causal-inspector 0.1.6 → 0.2.1

package/dist/reducer.js

@@ -3,24 +3,32 @@
  * (ui/flow_opened, ui/handler_selected) and browser-initiated
  * navigation (location/changed from popstate).
  */
-function applyNavigation(draft, correlationId, handler) {
-    // Correlation changed → reset flow state
-    if (correlationId !== draft.flowCorrelationId) {
-        if (correlationId) {
-            draft.flowCorrelationId = correlationId;
+function applyNavigation(draft, workflowId, handler) {
+    // Keep the timeline filter coupled to the active workflow. `?workflow=X` is
+    // the single source of truth, whether it was set from the Workflows tab, a
+    // timeline row, the timeline filter pill, or a shared/reloaded URL — so the
+    // workflow filter chip always reflects it (previously only popstate/initial
+    // load did this, so in-session navigation left the chip out of sync).
+    draft.filters.workflowId = workflowId;
+    // Any navigation clears a pending error focus; flow_opened re-arms it.
+    draft.pendingErrorFocus = null;
+    // Workflow changed → reset flow state
+    if (workflowId !== draft.flowWorkflowId) {
+        if (workflowId) {
+            draft.flowWorkflowId = workflowId;
             draft.flowData = [];
             draft.flowSelection = null;
             draft.scrubberStart = null;
             draft.scrubberEnd = null;
             draft.scrubberPlaying = false;
             draft.logsFilter = {
-                scope: "correlation",
+                scope: "workflow",
                 reactorId: null,
-                correlationId,
+                workflowId,
             };
         }
         else {
-            draft.flowCorrelationId = null;
+            draft.flowWorkflowId = null;
             draft.flowData = [];
             draft.flowSelection = null;
             draft.scrubberStart = null;
@@ -29,7 +37,7 @@ function applyNavigation(draft, correlationId, handler) {
             draft.logsFilter = {
                 scope: "reactor",
                 reactorId: null,
-                correlationId: null,
+                workflowId: null,
             };
         }
     }
@@ -38,24 +46,57 @@ function applyNavigation(draft, correlationId, handler) {
         draft.logsFilter = {
             scope: "reactor",
             reactorId: handler,
-            correlationId: draft.flowCorrelationId,
+            workflowId: draft.flowWorkflowId,
         };
     }
 }
+/**
+ * Select the first errored reactor in a workflow as the active flow node
+ * (and scope the logs to it). Returns false when the workflow's outcomes
+ * haven't loaded yet or contain no error, so the caller can defer.
+ */
+function selectFirstError(draft, workflowId) {
+    const outcomes = draft.outcomes[workflowId];
+    if (!outcomes)
+        return false;
+    const errored = outcomes.find((o) => o.status === "error");
+    if (!errored)
+        return false;
+    draft.flowSelection = { kind: "reactor", reactorId: errored.reactorId };
+    draft.logsFilter = { scope: "reactor", reactorId: errored.reactorId, workflowId };
+    return true;
+}
+function applySubjectSelected(draft, aggregateType, aggregateId, mode) {
+    draft.subjectType = aggregateType;
+    draft.subjectId = aggregateId;
+    draft.subjectMode = mode;
+    draft.subjectChain = [];
+    draft.subjectChainCursor = null;
+    draft.subjectDepthCapped = false;
+    draft.subjectChainLoading = true;
+    // Mutual exclusion: clear workflow state (incl. the timeline workflow filter)
+    draft.flowWorkflowId = null;
+    draft.filters.workflowId = null;
+    draft.flowData = [];
+    draft.flowSelection = null;
+    draft.causalTree = null;
+    draft.logsFilter = { scope: "reactor", reactorId: null, workflowId: null };
+    draft.pendingErrorFocus = null;
+}
 export const reducer = (draft, event) => {
     switch (event.type) {
         // ── Subscription ──
         case "events/received": {
             const newEvents = event.payload;
             const filtered = newEvents.filter((e) => {
-                if (draft.filters.correlationId && e.correlationId !== draft.filters.correlationId) {
+                if (draft.filters.workflowId && e.workflowId !== draft.filters.workflowId) {
                     return false;
                 }
                 if (draft.filters.search) {
                     const s = draft.filters.search.toLowerCase();
                     const matches = e.name.toLowerCase().includes(s) ||
                         e.payload.toLowerCase().includes(s) ||
-                        (e.correlationId ?? "").toLowerCase().includes(s);
+                        (e.workflowId ?? "").toLowerCase().includes(s);
                     if (!matches)
                         return false;
                 }
@@ -90,40 +131,45 @@ export const reducer = (draft, event) => {
             draft.logs = event.payload;
             break;
         case "events/descriptions_loaded": {
-            const { correlationId, descriptions } = event.payload;
-            draft.descriptions[correlationId] = descriptions;
+            const { workflowId, descriptions } = event.payload;
+            draft.descriptions[workflowId] = descriptions;
             break;
         }
         case "events/description_snapshots_loaded": {
-            const { correlationId, snapshots } = event.payload;
-            draft.descriptionSnapshots[correlationId] = snapshots;
+            const { workflowId, snapshots } = event.payload;
+            draft.descriptionSnapshots[workflowId] = snapshots;
             break;
         }
         case "events/aggregate_timeline_loaded": {
-            const { correlationId, entries } = event.payload;
-            draft.aggregateTimeline[correlationId] = entries;
+            const { workflowId, entries } = event.payload;
+            draft.aggregateTimeline[workflowId] = entries;
             break;
         }
         case "events/outcomes_loaded": {
-            const { correlationId, outcomes } = event.payload;
-            draft.outcomes[correlationId] = outcomes;
+            const { workflowId, outcomes } = event.payload;
+            draft.outcomes[workflowId] = outcomes;
+            // Resolve a deferred error focus now that outcomes are available.
+            if (draft.pendingErrorFocus === workflowId) {
+                selectFirstError(draft, workflowId);
+                draft.pendingErrorFocus = null;
+            }
             break;
         }
         case "events/attempts_loaded": {
-            const { correlationId, attempts } = event.payload;
-            draft.attempts[correlationId] = attempts;
+            const { workflowId, attempts } = event.payload;
+            draft.attempts[workflowId] = attempts;
             break;
         }
-        case "events/correlations_loaded": {
-            const { correlations, hasMore, append } = event.payload;
+        case "events/workflows_loaded": {
+            const { workflows, hasMore, append } = event.payload;
             if (append) {
-                draft.correlations.push(...correlations);
+                draft.workflows.push(...workflows);
             }
             else {
-                draft.correlations = correlations;
+                draft.workflows = workflows;
             }
-            draft.correlationsHasMore = hasMore;
-            draft.correlationsLoading = false;
+            draft.workflowsHasMore = hasMore;
+            draft.workflowsLoading = false;
             break;
         }
         case "events/reactor_dependencies_loaded":
@@ -138,17 +184,27 @@ export const reducer = (draft, event) => {
             break;
         // ── Navigation (user facts + browser popstate) ──
         case "ui/flow_opened":
-            applyNavigation(draft, event.payload.correlationId, null);
+            applyNavigation(draft, event.payload.workflowId, null);
+            // Opened via the error pill: jump straight to the failed reactor. If its
+            // outcomes are already cached, select now; otherwise defer to outcomes_loaded.
+            if (event.payload.focusError && !selectFirstError(draft, event.payload.workflowId)) {
+                draft.pendingErrorFocus = event.payload.workflowId;
+            }
             break;
         case "ui/flow_closed":
             applyNavigation(draft, null, null);
             break;
         case "ui/handler_selected":
-            applyNavigation(draft, draft.flowCorrelationId, event.payload.reactorId);
+            applyNavigation(draft, draft.flowWorkflowId, event.payload.reactorId);
             break;
         case "location/changed":
-            applyNavigation(draft, event.payload.correlationId, event.payload.handler);
-            draft.filters.correlationId = event.payload.correlationId;
+            if (event.payload.subject) {
+                const [subjectType, subjectId] = event.payload.subject.split(/:(.+)/);
+                applySubjectSelected(draft, subjectType, subjectId, event.payload.subjectMode ?? "both");
+            }
+            else {
+                applyNavigation(draft, event.payload.workflowId, event.payload.handler);
+            }
             break;
         // ── UI ──
         case "ui/event_selected":
@@ -163,9 +219,9 @@ export const reducer = (draft, event) => {
             // Clear reactor filter when deselecting a node
             if (event.payload == null && draft.logsFilter.reactorId != null) {
                 draft.logsFilter = {
-                    scope: "correlation",
+                    scope: "workflow",
                     reactorId: null,
-                    correlationId: draft.flowCorrelationId,
+                    workflowId: draft.flowWorkflowId,
                 };
             }
             break;
@@ -190,11 +246,51 @@ export const reducer = (draft, event) => {
         case "ui/scrubber_speed_changed":
             draft.scrubberSpeed = event.payload.speed;
             break;
-        case "ui/correlations_requested":
-            draft.correlationsLoading = true;
+        case "ui/workflows_requested":
+            draft.workflowsLoading = true;
+            break;
+        case "ui/load_more_workflows_requested":
+            draft.workflowsLoading = true;
+            break;
+        // ── Entity-scoped inspection ──
+        case "ui/subject_selected":
+            applySubjectSelected(draft, event.payload.aggregateType, event.payload.aggregateId, event.payload.mode ?? "both");
+            break;
+        case "ui/subject_mode_changed":
+            draft.subjectMode = event.payload.mode;
+            draft.subjectChain = [];
+            draft.subjectChainCursor = null;
+            draft.subjectChainLoading = true;
             break;
-        case "ui/load_more_correlations_requested":
-            draft.correlationsLoading = true;
+        case "ui/subject_chain_load_more":
+            draft.subjectChainLoading = true;
             break;
+        case "ui/event_effects_requested": {
+            const { eventId } = event.payload;
+            if (!draft.loadingEffects.includes(eventId) && !(eventId in draft.expandedEffects)) {
+                draft.loadingEffects.push(eventId);
+            }
+            break;
+        }
+        case "events/subject_chain_loaded": {
+            const { events, hasMore, cursor, depthCapped, append } = event.payload;
+            if (append) {
+                draft.subjectChain.push(...events);
+            }
+            else {
+                draft.subjectChain = events;
+            }
+            draft.subjectChainHasMore = hasMore;
+            draft.subjectChainCursor = cursor;
+            draft.subjectDepthCapped = depthCapped;
+            draft.subjectChainLoading = false;
+            break;
+        }
+        case "events/event_effects_loaded": {
+            const { eventId, effects } = event.payload;
+            draft.expandedEffects[eventId] = effects;
+            draft.loadingEffects = draft.loadingEffects.filter(id => id !== eventId);
+            break;
+        }
     }
 };

package/dist/state.d.ts

@@ -1,12 +1,15 @@
-import type { InspectorEvent, CorrelationSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, ReactorAttempt, LogsFilter, PaneLayout } from "./types";
+import type { InspectorEvent, WorkflowSummary, ReactorDependency, AggregateLifecycleEntry, FilterState, FlowSelection, ReactorDescription, ReactorDescriptionSnapshot, AggregateTimelineEntry, ReactorLog, ReactorOutcome, ReactorAttempt, LogsFilter, PaneLayout, SubjectChainEvent, SubjectChainMode, InspectorEffect } from "./types";
 export type InspectorState = {
     events: InspectorEvent[];
     hasMore: boolean;
     loading: boolean;
     selectedSeq: number | null;
-    flowCorrelationId: string | null;
+    flowWorkflowId: string | null;
     flowData: InspectorEvent[];
     flowSelection: FlowSelection;
+    /** Workflow whose first errored reactor should be auto-selected once its
+     *  outcomes load (set when a flow is opened via the Workflows error pill). */
+    pendingErrorFocus: string | null;
     scrubberStart: number | null;
     scrubberEnd: number | null;
     scrubberPlaying: boolean;
@@ -23,14 +26,24 @@ export type InspectorState = {
     aggregateTimeline: Record<string, AggregateTimelineEntry[]>;
     outcomes: Record<string, ReactorOutcome[]>;
     attempts: Record<string, ReactorAttempt[]>;
-    correlations: CorrelationSummary[];
-    correlationsLoading: boolean;
-    correlationsHasMore: boolean;
+    workflows: WorkflowSummary[];
+    workflowsLoading: boolean;
+    workflowsHasMore: boolean;
     reactorDependencies: ReactorDependency[];
     aggregateKeys: string[];
     aggregateLifecycle: AggregateLifecycleEntry[];
     aggregateLifecycleKey: string | null;
     subscription: "connected" | "disconnected" | "error";
     paneLayout: PaneLayout | null;
+    subjectType: string | null;
+    subjectId: string | null;
+    subjectMode: SubjectChainMode;
+    subjectChain: SubjectChainEvent[];
+    subjectChainLoading: boolean;
+    subjectChainHasMore: boolean;
+    subjectChainCursor: number | null;
+    subjectDepthCapped: boolean;
+    expandedEffects: Record<string, InspectorEffect[]>;
+    loadingEffects: string[];
 };
 export declare const initialState: InspectorState;

package/dist/state.js

@@ -3,9 +3,10 @@ export const initialState = {
     hasMore: true,
     loading: false,
     selectedSeq: null,
-    flowCorrelationId: null,
+    flowWorkflowId: null,
     flowData: [],
     flowSelection: null,
+    pendingErrorFocus: null,
     scrubberStart: null,
     scrubberEnd: null,
     scrubberPlaying: false,
@@ -13,29 +14,37 @@ export const initialState = {
     causalTree: null,
     filters: {
         search: "",
-        correlationId: null,
+        workflowId: null,
         aggregateKey: null,
-        from: null,
-        to: null,
     },
     logs: [],
     logsFilter: {
         scope: "reactor",
         reactorId: null,
-        correlationId: null,
+        workflowId: null,
     },
     descriptions: {},
     descriptionSnapshots: {},
     aggregateTimeline: {},
     outcomes: {},
     attempts: {},
-    correlations: [],
-    correlationsLoading: false,
-    correlationsHasMore: true,
+    workflows: [],
+    workflowsLoading: false,
+    workflowsHasMore: true,
     reactorDependencies: [],
     aggregateKeys: [],
     aggregateLifecycle: [],
     aggregateLifecycleKey: null,
     subscription: "disconnected",
     paneLayout: null,
+    subjectType: null,
+    subjectId: null,
+    subjectMode: "both",
+    subjectChain: [],
+    subjectChainLoading: false,
+    subjectChainHasMore: false,
+    subjectChainCursor: null,
+    subjectDepthCapped: false,
+    expandedEffects: {},
+    loadingEffects: [],
 };

package/dist/theme.js

@@ -28,8 +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: "ci-log-debug",
-    info: "ci-log-info",
-    warn: "ci-log-warn",
-    error: "ci-log-error",
+    debug: "bg-zinc-600/20 text-zinc-400",
+    info: "bg-indigo-500/15 text-indigo-400",
+    warn: "bg-amber-500/15 text-amber-400",
+    error: "bg-red-500/15 text-red-400",
 };

package/dist/types.d.ts

@@ -5,12 +5,12 @@ export type InspectorEvent = {
     type: string;
     name: string;
     id: string | null;
-    parentId: string | null;
-    correlationId: string | null;
+    causationId: string | null;
+    workflowId: string | null;
     reactorId: string | null;
     aggregateType: string | null;
     aggregateId: string | null;
-    streamVersion: number | null;
+    streamRevision: number | null;
     summary: string | null;
     payload: string;
 };
@@ -78,7 +78,7 @@ export type ReactorOutcome = {
 export type ReactorAttempt = {
     eventId: string;
     reactorId: string;
-    correlationId: string;
+    workflowId: string;
     attempt: number;
     status: string;
     error: string | null;
@@ -111,29 +111,31 @@ export type AggregateLifecycleEntry = {
     eventId: string;
     eventType: string;
     ts: string;
-    correlationId: string;
+    workflowId: string;
     aggregateKey: string;
     state: unknown;
 };
-export type CorrelationSummary = {
-    correlationId: string;
+export type WorkflowSummary = {
+    workflowId: string;
     eventCount: number;
     firstTs: string;
     lastTs: string;
     rootEventType: string;
     hasErrors: boolean;
 };
+export type WorkflowSummaryPage = {
+    workflows: WorkflowSummary[];
+    nextCursor: string | null;
+};
 export type FilterState = {
     search: string;
-    correlationId: string | null;
+    workflowId: string | null;
     aggregateKey: string | null;
-    from: string | null;
-    to: string | null;
 };
 export type LogsFilter = {
-    scope: "reactor" | "correlation";
+    scope: "reactor" | "workflow";
     reactorId: string | null;
-    correlationId: string | null;
+    workflowId: string | null;
 };
 export type FlowSelection = {
     kind: "event-type";
@@ -148,3 +150,41 @@ export type FlowSelection = {
  * just stores and round-trips it.
  */
 export type PaneLayout = Record<string, unknown>;
+/** Whether a subject-chain event came from the entity's own stream or a downstream descendant. */
+export type SubjectChainSourceMode = "stream" | "descendant";
+/** Query mode for subject_chain — which events to include. */
+export type SubjectChainMode = "stream" | "descendants" | "both";
+/** One event in a subject chain response, with display names applied. */
+export type SubjectChainEvent = {
+    seq: number;
+    ts: string;
+    type: string;
+    name: string;
+    id: string | null;
+    causationId: string | null;
+    workflowId: string | null;
+    reactorId: string | null;
+    aggregateType: string | null;
+    aggregateId: string | null;
+    streamRevision: number | null;
+    summary: string | null;
+    payload: string;
+    sourceMode: SubjectChainSourceMode;
+};
+/** One `ctx.effect()` result for the effects inspector panel. */
+export type InspectorEffect = {
+    consumer: string;
+    label: string;
+    value: unknown;
+    createdAt: string;
+};
+/** One entity entry from the aggregate keys listing. */
+export type AggregateKeyEntry = {
+    aggregateId: string;
+    displayLabel: string | null;
+};
+/** Paginated entity listing response. */
+export type AggregateKeysPage = {
+    entries: AggregateKeyEntry[];
+    nextCursor: string | null;
+};

package/dist/utils.js

@@ -9,7 +9,7 @@ export function inScrubberRange(seq, start, end) {
 /** Derive the walkable seq list based on current context (flow, selection, or global). */
 export function getScrubberSequence(state) {
     let events;
-    if (state.flowCorrelationId) {
+    if (state.flowWorkflowId) {
         events = state.flowData;
         const sel = state.flowSelection;
         if (sel) {

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "causal-inspector",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/causal-inspector.css"
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsc && cp src/*.css dist/",
+    "build": "tsc && cp src/CausalInspector.css dist/ && npm run build:css",
+    "build:css": "postcss src/styles.css -o dist/causal-inspector.css",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -34,10 +44,15 @@
   },
   "devDependencies": {
     "@dagrejs/dagre": "^2.0.4",
+    "@tailwindcss/postcss": "^4.3.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.2.3",
     "@xyflow/react": "^12.10.1",
     "flexlayout-react": "^0.8.19",
+    "postcss": "^8.5.15",
+    "postcss-cli": "^11.0.1",
+    "postcss-prefix-selector": "^2.1.1",
+    "tailwindcss": "^4.3.1",
     "typescript": "^5.0.0"
   }
 }

package/dist/panes/CorrelationExplorerPane.d.ts

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

package/dist/panes/CorrelationExplorerPane.js

@@ -1,51 +0,0 @@
-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 CorrelationExplorerPane() {
-    const correlations = useSelector((s) => s.correlations);
-    const loading = useSelector((s) => s.correlationsLoading);
-    const dispatch = useDispatch();
-    const [search, setSearch] = useState("");
-    const searchTimerRef = useRef(null);
-    // Request correlations on mount
-    useEffect(() => {
-        dispatch({ type: "ui/correlations_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 } });
-        }, 300);
-    }, [dispatch]);
-    const handleRowClick = useCallback((correlationId) => {
-        dispatch({ type: "ui/flow_opened", payload: { correlationId } });
-    }, [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)",
-                                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))) }))] }));
-}