causal-inspector 0.2.0 → 0.2.1

package/dist/events.d.ts

@@ -52,6 +52,7 @@ type EventSelected = BaseEvent<"ui/event_selected", {
 type EventDeselected = BaseEvent<"ui/event_deselected">;
 type FlowOpened = BaseEvent<"ui/flow_opened", {
     workflowId: string;
+    focusError?: boolean;
 }>;
 type FlowClosed = BaseEvent<"ui/flow_closed">;
 type FlowNodeSelected = BaseEvent<"ui/flow_node_selected", FlowSelection>;

package/dist/panes/CausalFlowPane.js

@@ -373,9 +373,19 @@ function FitOnLoad() {
 function FocusOnSelection({ nodes, flowData }) {
     const selectedSeq = useSelector((s) => s.selectedSeq);
     const scrubberEnd = useSelector((s) => s.scrubberEnd);
+    const flowSelection = useSelector((s) => s.flowSelection);
     const { setCenter, getZoom } = useReactFlow();
     const nodesRef = useRef(nodes);
     nodesRef.current = nodes;
+    const centerOnNode = useCallback((nodeId) => {
+        const node = nodesRef.current.find(n => n.id === nodeId);
+        if (!node)
+            return;
+        const isReactor = node.id.startsWith("hdl:");
+        const w = isReactor ? REACTOR_WIDTH : NODE_WIDTH;
+        const h = isReactor ? estimateReactorHeight(node.data) : NODE_HEIGHT;
+        setCenter(node.position.x + w / 2, node.position.y + h / 2, { zoom: getZoom(), duration: 400 });
+    }, [setCenter, getZoom]);
     useEffect(() => {
         // Don't recenter while scrubber is active
         if (scrubberEnd != null)
@@ -385,15 +395,17 @@ function FocusOnSelection({ nodes, flowData }) {
         const evt = flowData.find(e => e.seq === selectedSeq);
         if (!evt)
             return;
-        const nodeId = `evt:${evt.name}`;
-        const node = nodesRef.current.find(n => n.id === nodeId);
-        if (!node)
+        centerOnNode(`evt:${evt.name}`);
+    }, [selectedSeq, scrubberEnd, flowData, centerOnNode]);
+    // Pan to a selected reactor node (e.g. the failed reactor opened from the
+    // Workflows error pill), so it isn't left off-screen in a large graph.
+    useEffect(() => {
+        if (scrubberEnd != null)
             return;
-        const isReactor = node.id.startsWith("hdl:");
-        const w = isReactor ? REACTOR_WIDTH : NODE_WIDTH;
-        const h = isReactor ? estimateReactorHeight(node.data) : NODE_HEIGHT;
-        setCenter(node.position.x + w / 2, node.position.y + h / 2, { zoom: getZoom(), duration: 400 });
-    }, [selectedSeq, scrubberEnd, flowData, setCenter, getZoom]);
+        if (flowSelection?.kind !== "reactor" || !flowData.length)
+            return;
+        centerOnNode(`hdl:${flowSelection.reactorId}`);
+    }, [flowSelection, scrubberEnd, flowData, centerOnNode]);
     return null;
 }
 // ---------------------------------------------------------------------------
@@ -596,5 +608,5 @@ export function CausalFlowPane({ defaultHiddenReactors, headerExtra } = {}) {
     if (flowLoading) {
         return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0", children: [_jsx("div", { className: "h-3 w-10 bg-muted rounded animate-pulse" }), _jsx("div", { className: "h-3 w-48 bg-muted rounded animate-pulse" })] }), _jsx("div", { className: "flex-1 flex items-center justify-center", children: _jsxs("div", { className: "animate-pulse flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-8 w-40 bg-muted rounded-md" }), _jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-6 w-28 bg-muted rounded-full" }), _jsxs("div", { className: "flex items-start gap-8", children: [_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-8 w-36 bg-muted rounded-md" })] }), _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "h-6 w-px bg-muted" }), _jsx("div", { className: "h-8 w-36 bg-muted rounded-md" })] })] })] }) })] }));
     }
-    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2 border-b border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("h3", { className: "text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-widest", children: "Flow" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/80 truncate px-1.5 py-0.5 rounded bg-white/[0.03] border border-border", children: flowWorkflowId }), _jsxs("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums", children: [flowData.length, " events \u00B7 ", nodes.length, " nodes"] }), headerExtra, _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("button", { onClick: () => setDirection(d => d === "LR" ? "TB" : "LR"), className: "text-[10px] text-muted-foreground/60 hover:text-foreground px-2 py-1 rounded-md border border-border hover:border-indigo-500/30 transition-all duration-150", title: direction === "LR" ? "Switch to vertical layout" : "Switch to horizontal layout", children: direction === "LR" ? _jsx(ArrowDown, { size: 11, className: "inline" }) : _jsx(ArrowRight, { size: 11, className: "inline" }) }), _jsx(ReactorFilter, { allReactorIds: allReactorIds, hiddenReactors: hiddenReactors, setHiddenReactors: setHiddenReactors })] })] }), _jsx("div", { className: "flex-1 relative", children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, defaultEdgeOptions: { type: "smoothstep" }, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, minZoom: 0.25, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, elevateNodesOnSelect: false, colorMode: "dark", children: [_jsx(FitOnLoad, {}), _jsx(FocusOnSelection, { nodes: nodes, flowData: flowData }), _jsx(Background, { color: "rgba(255,255,255,0.03)", gap: 24, size: 1 }), _jsx(Controls, { showInteractive: false })] }) })] }));
+    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "relative z-20 flex items-center gap-2.5 px-3 py-2 border-b border-border shrink-0", style: { background: "rgba(15, 15, 20, 0.6)", backdropFilter: "blur(8px)" }, children: [_jsx("h3", { className: "text-[10px] font-semibold text-muted-foreground/60 uppercase tracking-widest", children: "Flow" }), _jsx("span", { className: "text-[10px] font-mono text-foreground/80 truncate px-1.5 py-0.5 rounded bg-white/[0.03] border border-border", children: flowWorkflowId }), _jsxs("span", { className: "text-[10px] text-muted-foreground/50 tabular-nums", children: [flowData.length, " events \u00B7 ", nodes.length, " nodes"] }), headerExtra, _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("button", { onClick: () => setDirection(d => d === "LR" ? "TB" : "LR"), className: "text-[10px] text-muted-foreground/60 hover:text-foreground px-2 py-1 rounded-md border border-border hover:border-indigo-500/30 transition-all duration-150", title: direction === "LR" ? "Switch to vertical layout" : "Switch to horizontal layout", children: direction === "LR" ? _jsx(ArrowDown, { size: 11, className: "inline" }) : _jsx(ArrowRight, { size: 11, className: "inline" }) }), _jsx(ReactorFilter, { allReactorIds: allReactorIds, hiddenReactors: hiddenReactors, setHiddenReactors: setHiddenReactors })] })] }), _jsx("div", { className: "flex-1 relative", children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, defaultEdgeOptions: { type: "smoothstep" }, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, minZoom: 0.25, proOptions: { hideAttribution: true }, nodesDraggable: false, nodesConnectable: false, elevateNodesOnSelect: false, colorMode: "dark", children: [_jsx(FitOnLoad, {}), _jsx(FocusOnSelection, { nodes: nodes, flowData: flowData }), _jsx(Background, { color: "rgba(255,255,255,0.03)", gap: 24, size: 1 }), _jsx(Controls, { showInteractive: false })] }) })] }));
 }

package/dist/panes/LogsPane.js

@@ -10,7 +10,8 @@ import { Search, ChevronRight, ChevronDown } from "lucide-react";
 function LogRow({ log, showReactor }) {
     const [expanded, setExpanded] = useState(false);
     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) }))] }));
+    const hasPayload = log.data != null;
+    return (_jsxs("div", { onClick: hasPayload ? () => setExpanded((v) => !v) : undefined, className: `px-2 py-1.5 hover:bg-white/[0.02] rounded-md transition-colors duration-100 ${hasPayload ? "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 }), hasPayload && (_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);

package/dist/panes/WorkflowExplorerPane.js

@@ -42,5 +42,8 @@ export function WorkflowExplorerPane() {
     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))) }))] }));
+                            }, 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 cursor-pointer hover:bg-red-500/20 hover:text-red-400 transition-colors", style: { boxShadow: "0 0 6px rgba(239, 68, 68, 0.15)" }, title: "View error \u2014 open this workflow and select the failed reactor", onClick: (e) => {
+                                e.stopPropagation();
+                                dispatch({ type: "ui/flow_opened", payload: { workflowId: corr.workflowId, focusError: true } });
+                            }, children: "error" }))] }, corr.workflowId))) }))] }));
 }

package/dist/reducer.js

@@ -4,6 +4,14 @@
  * navigation (location/changed from popstate).
  */
 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) {
@@ -42,6 +50,22 @@ function applyNavigation(draft, workflowId, handler) {
         };
     }
 }
+/**
+ * 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;
@@ -50,12 +74,14 @@ function applySubjectSelected(draft, aggregateType, aggregateId, mode) {
     draft.subjectChainCursor = null;
     draft.subjectDepthCapped = false;
     draft.subjectChainLoading = true;
-    // Mutual exclusion: clear workflow state
+    // 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) {
@@ -122,6 +148,11 @@ export const reducer = (draft, event) => {
         case "events/outcomes_loaded": {
             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": {
@@ -154,6 +185,11 @@ export const reducer = (draft, event) => {
         // ── Navigation (user facts + browser popstate) ──
         case "ui/flow_opened":
             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);
@@ -168,7 +204,6 @@ export const reducer = (draft, event) => {
             }
             else {
                 applyNavigation(draft, event.payload.workflowId, event.payload.handler);
-                draft.filters.workflowId = event.payload.workflowId;
             }
             break;
         // ── UI ──

package/dist/state.d.ts

@@ -7,6 +7,9 @@ export type InspectorState = {
     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;

package/dist/state.js

@@ -6,6 +6,7 @@ export const initialState = {
     flowWorkflowId: null,
     flowData: [],
     flowSelection: null,
+    pendingErrorFocus: null,
     scrubberStart: null,
     scrubberEnd: null,
     scrubberPlaying: false,

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "causal-inspector",
-  "version": "0.2.0",
+  "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 WorkflowExplorerPaneProps = Record<string, never>;
-export declare function WorkflowExplorerPane(): import("react/jsx-runtime").JSX.Element;

package/dist/panes/CorrelationExplorerPane.js

@@ -1,46 +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 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))) }))] }));
-}