@workflow/web-shared 4.1.0-beta.51 → 4.1.0-beta.53

package/dist/components/event-list-view.js

@@ -1,14 +1,22 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronRight, Loader2 } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { ObjectInspector } from 'react-inspector';
-import { useDarkMode } from '../hooks/use-dark-mode';
-import { inspectorThemeDark, inspectorThemeLight } from './ui/inspector-theme';
-import { getEventColor } from './workflow-traces/event-colors';
-/**
- * Format a date to a human-readable local time string with milliseconds
- */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import { Check, ChevronRight, Copy } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { formatDuration } from '../lib/utils';
+import { DataInspector } from './ui/data-inspector';
+import { Skeleton } from './ui/skeleton';
+const BUTTON_RESET_STYLE = {
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    border: 'none',
+    background: 'transparent',
+};
+const DOT_PULSE_ANIMATION = 'workflow-dot-pulse 1.25s cubic-bezier(0, 0, 0.2, 1) infinite';
+// ──────────────────────────────────────────────────────────────────────────
+// Helpers
+// ──────────────────────────────────────────────────────────────────────────
 function formatEventTime(date) {
     return (date.toLocaleTimeString('en-US', {
         hour: '2-digit',
@@ -19,48 +27,331 @@ function formatEventTime(date) {
         '.' +
         date.getMilliseconds().toString().padStart(3, '0'));
 }
-/**
- * Format a date to full local datetime string with milliseconds
- */
-function formatEventDateTime(date) {
-    return date.toLocaleString(undefined, {
-        year: 'numeric',
-        month: 'numeric',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-        fractionalSecondDigits: 3,
-    });
-}
-/**
- * Format event type to a more readable label
- */
 function formatEventType(eventType) {
     return eventType
         .split('_')
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
+// ──────────────────────────────────────────────────────────────────────────
+// Event type → status color (small dot only)
+// ──────────────────────────────────────────────────────────────────────────
+/** Returns a CSS color using Geist design tokens for the status dot. */
+function getStatusDotColor(eventType) {
+    // Failed → red
+    if (eventType === 'step_failed' ||
+        eventType === 'run_failed' ||
+        eventType === 'workflow_failed') {
+        return 'var(--ds-red-700)';
+    }
+    // Cancelled → amber
+    if (eventType === 'run_cancelled') {
+        return 'var(--ds-amber-700)';
+    }
+    // Retrying → amber
+    if (eventType === 'step_retrying') {
+        return 'var(--ds-amber-700)';
+    }
+    // Completed/succeeded → green
+    if (eventType === 'step_completed' ||
+        eventType === 'run_completed' ||
+        eventType === 'workflow_completed' ||
+        eventType === 'hook_disposed' ||
+        eventType === 'wait_completed') {
+        return 'var(--ds-green-700)';
+    }
+    // Started/running → blue
+    if (eventType === 'step_started' ||
+        eventType === 'run_started' ||
+        eventType === 'workflow_started' ||
+        eventType === 'hook_received') {
+        return 'var(--ds-blue-700)';
+    }
+    // Created/pending → gray
+    return 'var(--ds-gray-600)';
+}
 /**
- * Single event row component with expandable details
+ * Build a map from correlationId (stepId) → display name using step entities,
+ * and parse the workflow name from the run.
  */
-function EventRow({ event, onLoadEventData, }) {
-    const isDark = useDarkMode();
+function buildNameMaps(steps, run) {
+    const correlationNameMap = new Map();
+    // Map step correlationId (= stepId) → parsed step name
+    if (steps) {
+        for (const step of steps) {
+            const parsed = parseStepName(String(step.stepName));
+            correlationNameMap.set(step.stepId, parsed?.shortName ?? step.stepName);
+        }
+    }
+    // Parse workflow name from run
+    const workflowName = run?.workflowName
+        ? (parseWorkflowName(run.workflowName)?.shortName ?? run.workflowName)
+        : null;
+    return { correlationNameMap, workflowName };
+}
+/**
+ * Build a map from correlationId → duration info by diffing
+ * created ↔ started (queued) and started ↔ completed/failed/cancelled (ran).
+ * Also computes run-level durations under the key '__run__'.
+ */
+function buildDurationMap(events) {
+    const createdTimes = new Map();
+    const startedTimes = new Map();
+    const durations = new Map();
+    for (const event of events) {
+        const ts = new Date(event.createdAt).getTime();
+        const key = event.correlationId ?? '__run__';
+        const type = event.eventType;
+        // Track created times (first event for each correlation)
+        if (type === 'step_created' || type === 'run_created') {
+            createdTimes.set(key, ts);
+        }
+        // Track started times & compute queued duration
+        if (type === 'step_started' ||
+            type === 'run_started' ||
+            type === 'workflow_started') {
+            startedTimes.set(key, ts);
+            // If no explicit created event was seen, use the started time as created
+            if (!createdTimes.has(key)) {
+                createdTimes.set(key, ts);
+            }
+            const createdAt = createdTimes.get(key);
+            const info = durations.get(key) ?? {};
+            if (createdAt !== undefined) {
+                info.queued = ts - createdAt;
+            }
+            durations.set(key, info);
+        }
+        // Compute ran duration on terminal events
+        if (type === 'step_completed' ||
+            type === 'step_failed' ||
+            type === 'run_completed' ||
+            type === 'run_failed' ||
+            type === 'run_cancelled' ||
+            type === 'workflow_completed' ||
+            type === 'workflow_failed' ||
+            type === 'wait_completed' ||
+            type === 'hook_disposed') {
+            const startedAt = startedTimes.get(key);
+            const info = durations.get(key) ?? {};
+            if (startedAt !== undefined) {
+                info.ran = ts - startedAt;
+            }
+            durations.set(key, info);
+        }
+    }
+    return durations;
+}
+function isRunLevel(eventType) {
+    return (eventType === 'run_created' ||
+        eventType === 'run_started' ||
+        eventType === 'run_completed' ||
+        eventType === 'run_failed' ||
+        eventType === 'run_cancelled' ||
+        eventType === 'workflow_started' ||
+        eventType === 'workflow_completed' ||
+        eventType === 'workflow_failed');
+}
+// ──────────────────────────────────────────────────────────────────────────
+// Tree gutter — fixed-width, shows branch lines only for the selected group
+// ──────────────────────────────────────────────────────────────────────────
+/** Fixed gutter width: 20px root area + 16px for one branch lane */
+const GUTTER_WIDTH = 36;
+/** X position of the single branch lane line */
+const LANE_X = 20;
+const ROOT_LINE_COLOR = 'var(--ds-gray-500)';
+function TreeGutter({ isFirst, isLast, isRunLevel: isRun, statusDotColor, pulse = false, hasSelection, showBranch, showLaneLine, isLaneStart, isLaneEnd, continuationOnly = false, }) {
+    const dotSize = isRun ? 8 : 6;
+    const dotLeft = isRun ? 5 : 6;
+    const dotOpacity = hasSelection && !showBranch && !isRun ? 0.3 : 1;
+    return (_jsxs("div", { className: "relative flex-shrink-0 self-stretch", style: {
+            width: GUTTER_WIDTH,
+            minHeight: continuationOnly ? 0 : undefined,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    left: 8,
+                    top: continuationOnly ? 0 : isFirst ? '50%' : 0,
+                    bottom: continuationOnly ? 0 : isLast ? '50%' : 0,
+                    width: 2,
+                    backgroundColor: ROOT_LINE_COLOR,
+                    zIndex: 0,
+                } }), !continuationOnly && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                            position: 'absolute',
+                            left: dotLeft,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            width: dotSize,
+                            height: dotSize,
+                            zIndex: 2,
+                        }, children: [_jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    borderRadius: '50%',
+                                    backgroundColor: 'var(--ds-background-100)',
+                                    zIndex: 0,
+                                } }), pulse && (_jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    borderRadius: '50%',
+                                    backgroundColor: statusDotColor,
+                                    opacity: 0.75 * dotOpacity,
+                                    animation: DOT_PULSE_ANIMATION,
+                                    zIndex: 1,
+                                } })), _jsx("div", { style: {
+                                    position: 'relative',
+                                    width: '100%',
+                                    height: '100%',
+                                    borderRadius: '50%',
+                                    backgroundColor: statusDotColor,
+                                    opacity: dotOpacity,
+                                    transition: 'opacity 150ms',
+                                    zIndex: 2,
+                                } })] }), showBranch && (_jsx("div", { style: {
+                            position: 'absolute',
+                            left: 9,
+                            top: '50%',
+                            width: GUTTER_WIDTH - 9,
+                            height: 2,
+                            backgroundColor: ROOT_LINE_COLOR,
+                            zIndex: 0,
+                        } }))] })), showLaneLine && (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: LANE_X,
+                    top: continuationOnly ? 0 : isLaneStart ? '50%' : 0,
+                    bottom: continuationOnly ? 0 : isLaneEnd ? '50%' : 0,
+                    width: 2,
+                    backgroundColor: ROOT_LINE_COLOR,
+                    zIndex: 0,
+                } }))] }));
+}
+// ──────────────────────────────────────────────────────────────────────────
+// Copyable cell — shows a copy button on hover
+// ──────────────────────────────────────────────────────────────────────────
+function CopyableCell({ value, className, }) {
+    const [copied, setCopied] = useState(false);
+    const resetCopiedTimeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (resetCopiedTimeoutRef.current !== null) {
+                window.clearTimeout(resetCopiedTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleCopy = useCallback((e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(value).then(() => {
+            setCopied(true);
+            if (resetCopiedTimeoutRef.current !== null) {
+                window.clearTimeout(resetCopiedTimeoutRef.current);
+            }
+            resetCopiedTimeoutRef.current = window.setTimeout(() => {
+                setCopied(false);
+                resetCopiedTimeoutRef.current = null;
+            }, 1500);
+        });
+    }, [value]);
+    return (_jsxs("div", { className: `group/copy flex items-center gap-1 flex-1 min-w-0 px-4 ${className ?? ''}`, children: [_jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: value || '-' }), value ? (_jsx("button", { type: "button", onClick: handleCopy, className: "flex-shrink-0 opacity-0 group-hover/copy:opacity-100 transition-opacity p-0.5 rounded hover:bg-[var(--ds-gray-alpha-200)]", style: BUTTON_RESET_STYLE, "aria-label": `Copy ${value}`, children: copied ? (_jsx(Check, { className: "h-3 w-3", style: { color: 'var(--ds-green-700)' } })) : (_jsx(Copy, { className: "h-3 w-3", style: { color: 'var(--ds-gray-700)' } })) })) : null] }));
+}
+/** Recursively parse stringified JSON values so escaped slashes / quotes are cleaned up */
+function deepParseJson(value) {
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if ((trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+            (trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+            (trimmed.startsWith('"') && trimmed.endsWith('"'))) {
+            try {
+                return deepParseJson(JSON.parse(trimmed));
+            }
+            catch {
+                return value;
+            }
+        }
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map(deepParseJson);
+    }
+    if (value !== null && typeof value === 'object') {
+        const result = {};
+        for (const [k, v] of Object.entries(value)) {
+            result[k] = deepParseJson(v);
+        }
+        return result;
+    }
+    return value;
+}
+function PayloadBlock({ data }) {
+    const [copied, setCopied] = useState(false);
+    const resetCopiedTimeoutRef = useRef(null);
+    const cleaned = useMemo(() => deepParseJson(data), [data]);
+    useEffect(() => {
+        return () => {
+            if (resetCopiedTimeoutRef.current !== null) {
+                window.clearTimeout(resetCopiedTimeoutRef.current);
+            }
+        };
+    }, []);
+    const formatted = useMemo(() => {
+        try {
+            return JSON.stringify(cleaned, null, 2);
+        }
+        catch {
+            return String(cleaned);
+        }
+    }, [cleaned]);
+    const handleCopy = useCallback((e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(formatted).then(() => {
+            setCopied(true);
+            if (resetCopiedTimeoutRef.current !== null) {
+                window.clearTimeout(resetCopiedTimeoutRef.current);
+            }
+            resetCopiedTimeoutRef.current = window.setTimeout(() => {
+                setCopied(false);
+                resetCopiedTimeoutRef.current = null;
+            }, 1500);
+        });
+    }, [formatted]);
+    return (_jsxs("div", { className: "relative group/payload", children: [_jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: 'var(--ds-gray-1000)' }, children: _jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), _jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: 'var(--ds-gray-700)' }, "aria-label": "Copy payload", children: copied ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-3 w-3", style: { color: 'var(--ds-green-700)' } }), _jsx("span", { style: { color: 'var(--ds-green-700)' }, children: "Copied" })] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "h-3 w-3" }), _jsx("span", { children: "Copy" })] })) })] }));
+}
+function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [loadedEventData, setLoadedEventData] = useState(null);
     const [loadError, setLoadError] = useState(null);
-    const colors = getEventColor(event.eventType);
+    const [hasAttemptedLoad, setHasAttemptedLoad] = useState(false);
+    const rowGroupKey = event.correlationId ??
+        (isRunLevel(event.eventType) ? '__run__' : undefined);
+    // Collapse when a different group gets selected
+    useEffect(() => {
+        if (selectedGroupKey !== undefined && selectedGroupKey !== rowGroupKey) {
+            setIsExpanded(false);
+        }
+    }, [selectedGroupKey, rowGroupKey]);
+    const statusDotColor = getStatusDotColor(event.eventType);
     const createdAt = new Date(event.createdAt);
-    // Check if event already has eventData (from initial fetch)
     const hasExistingEventData = 'eventData' in event && event.eventData != null;
-    // Load full event details when expanding
+    const isRun = isRunLevel(event.eventType);
+    const eventName = isRun
+        ? (workflowName ?? '-')
+        : event.correlationId
+            ? (correlationNameMap.get(event.correlationId) ?? '-')
+            : '-';
+    const durationKey = event.correlationId ?? (isRun ? '__run__' : '');
+    const durationInfo = durationKey ? durationMap.get(durationKey) : undefined;
+    const hasActive = activeGroupKey !== undefined;
+    const isRelated = rowGroupKey !== undefined && rowGroupKey === activeGroupKey;
+    const isDimmed = hasActive && !isRelated;
+    const isPulsing = hasActive && isRelated;
+    // Gutter state derived from selectedGroupRange
+    const showBranch = hasActive && isRelated && !isRun;
+    const showLaneLine = selectedGroupRange !== null &&
+        index >= selectedGroupRange.first &&
+        index <= selectedGroupRange.last;
+    const isLaneStart = selectedGroupRange !== null && index === selectedGroupRange.first;
+    const isLaneEnd = selectedGroupRange !== null && index === selectedGroupRange.last;
     const loadEventDetails = useCallback(async () => {
-        // Skip if we already have data or no correlationId
-        if (loadedEventData !== null ||
-            hasExistingEventData ||
-            !event.correlationId) {
+        if (loadedEventData !== null || hasExistingEventData) {
             return;
         }
         setIsLoading(true);
@@ -80,99 +371,191 @@ function EventRow({ event, onLoadEventData, }) {
         }
         finally {
             setIsLoading(false);
+            setHasAttemptedLoad(true);
         }
-    }, [
-        event.correlationId,
-        loadedEventData,
-        hasExistingEventData,
-        onLoadEventData,
-    ]);
-    // Handle expand/collapse
-    const handleToggle = useCallback(() => {
+    }, [event, loadedEventData, hasExistingEventData, onLoadEventData]);
+    const handleExpandToggle = useCallback((e) => {
+        e.stopPropagation();
         const newExpanded = !isExpanded;
         setIsExpanded(newExpanded);
-        // Load details when expanding for the first time
         if (newExpanded && loadedEventData === null && !hasExistingEventData) {
             loadEventDetails();
         }
     }, [isExpanded, loadedEventData, hasExistingEventData, loadEventDetails]);
-    // Get the event data to display (either from initial fetch, loaded data, or null)
+    const handleRowClick = useCallback(() => {
+        if (selectedGroupKey === rowGroupKey) {
+            onSelectGroup(undefined);
+        }
+        else {
+            onSelectGroup(rowGroupKey);
+        }
+    }, [selectedGroupKey, rowGroupKey, onSelectGroup]);
     const eventData = hasExistingEventData
         ? event.eventData
         : loadedEventData;
-    return (_jsxs("div", { className: "rounded-lg border overflow-hidden transition-all", style: {
-            backgroundColor: 'var(--ds-background-100)',
-            borderColor: colors.border,
-            borderLeftWidth: '1px',
-            borderLeftColor: colors.color,
-        }, children: [_jsxs("button", { type: "button", onClick: handleToggle, className: "w-full text-left grid gap-3 items-center px-0 py-2 text-xs hover:brightness-[0.98] transition-all cursor-pointer", style: {
-                    backgroundColor: 'var(--ds-background-100)',
-                    gridTemplateColumns: '24px 100px minmax(120px, auto) 1fr 1fr',
-                }, children: [_jsx("div", { className: "flex justify-center", children: _jsx(ChevronRight, { className: "h-3.5 w-3.5 transition-transform", style: {
-                                color: colors.secondary,
-                                transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                            } }) }), _jsx("div", { className: "font-mono tabular-nums", style: { color: colors.secondary }, children: formatEventTime(createdAt) }), _jsx("div", { className: "font-medium", style: { color: colors.text }, children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "w-2 h-2 rounded-full flex-shrink-0", style: { backgroundColor: colors.color } }), formatEventType(event.eventType)] }) }), _jsx("div", { className: "font-mono text-[11px] overflow-hidden text-ellipsis whitespace-nowrap", style: { color: colors.secondary }, title: event.correlationId || '-', children: event.correlationId || '-' }), _jsx("div", { className: "font-mono text-[11px] pr-3 overflow-hidden text-ellipsis whitespace-nowrap", style: { color: colors.secondary }, title: event.eventId, children: event.eventId })] }), isExpanded && (_jsxs("div", { className: "border-t px-4 py-3", style: {
-                    borderColor: colors.border,
-                    backgroundColor: 'var(--ds-background-100)',
-                }, children: [_jsxs("div", { className: "flex flex-col divide-y rounded-md border overflow-hidden", style: {
-                            borderColor: 'var(--ds-gray-300)',
-                            backgroundColor: 'var(--ds-gray-100)',
-                        }, children: [_jsx(AttributeRow, { label: "Event ID", value: event.eventId, mono: true }), _jsx(AttributeRow, { label: "Event Type", value: event.eventType }), _jsx(AttributeRow, { label: "Correlation ID", value: event.correlationId || '-', mono: true }), _jsx(AttributeRow, { label: "Run ID", value: event.runId, mono: true }), _jsx(AttributeRow, { label: "Created At", value: formatEventDateTime(createdAt) })] }), _jsxs("div", { className: "mt-3", children: [_jsx("div", { className: "text-xs font-medium mb-1.5", style: { color: 'var(--ds-gray-700)' }, children: "Event Data" }), isLoading && (_jsxs("div", { className: "flex items-center gap-2 rounded-md border p-3", style: {
-                                    borderColor: 'var(--ds-gray-300)',
-                                    backgroundColor: 'var(--ds-gray-100)',
-                                }, children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", style: { color: 'var(--ds-gray-700)' } }), _jsx("span", { className: "text-xs", style: { color: 'var(--ds-gray-700)' }, children: "Loading event details..." })] })), loadError && !isLoading && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+    const contentOpacity = isDimmed ? 0.3 : 1;
+    return (_jsxs("div", { "data-event-id": event.eventId, onMouseEnter: () => onHoverGroup(rowGroupKey), onMouseLeave: () => onHoverGroup(undefined), children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: handleRowClick, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ')
+                        handleRowClick();
+                }, className: "w-full text-left flex items-center gap-0 text-sm hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [_jsx(TreeGutter, { isFirst: isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor: statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch: showBranch, showLaneLine: showLaneLine, isLaneStart: isLaneStart, isLaneEnd: isLaneEnd }), _jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: 'opacity 150ms' }, children: [_jsx("button", { type: "button", onClick: handleExpandToggle, className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded hover:bg-[var(--ds-gray-alpha-200)] transition-colors", style: {
+                                    ...BUTTON_RESET_STYLE,
+                                    border: '1px solid var(--ds-gray-alpha-400)',
+                                }, "aria-label": isExpanded ? 'Collapse details' : 'Expand details', children: _jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
+                                        color: 'var(--ds-gray-700)',
+                                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                    } }) }), _jsx("div", { className: "text-xs tabular-nums flex-1 min-w-0 px-4", style: { color: 'var(--ds-gray-900)' }, children: formatEventTime(createdAt) }), _jsx("div", { className: "text-xs font-medium flex-1 min-w-0 px-4", children: _jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: 'var(--ds-gray-900)' }, children: [_jsxs("span", { style: {
+                                                position: 'relative',
+                                                display: 'inline-flex',
+                                                width: 6,
+                                                height: 6,
+                                                flexShrink: 0,
+                                            }, children: [isPulsing && (_jsx("span", { style: {
+                                                        position: 'absolute',
+                                                        inset: 0,
+                                                        borderRadius: '50%',
+                                                        backgroundColor: statusDotColor,
+                                                        opacity: 0.75,
+                                                        animation: DOT_PULSE_ANIMATION,
+                                                    } })), _jsx("span", { style: {
+                                                        position: 'relative',
+                                                        width: 6,
+                                                        height: 6,
+                                                        borderRadius: '50%',
+                                                        backgroundColor: statusDotColor,
+                                                    } })] }), formatEventType(event.eventType)] }) }), _jsx("div", { className: "text-xs flex-1 min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap", title: eventName !== '-' ? eventName : undefined, children: eventName }), _jsx(CopyableCell, { value: event.correlationId || '', className: "font-mono text-xs" }), _jsx(CopyableCell, { value: event.eventId, className: "font-mono text-xs" })] })] }), isExpanded && (_jsxs("div", { className: "flex", children: [_jsx(TreeGutter, { isFirst: false, isLast: isLast, isRunLevel: isRun, hasSelection: hasActive, showBranch: false, showLaneLine: showLaneLine && !isLaneEnd, isLaneStart: false, isLaneEnd: false, continuationOnly: true }), _jsx("div", { className: "w-5 flex-shrink-0" }), _jsxs("div", { className: "flex-1 my-1.5 mr-3 ml-2 py-2 rounded-md border overflow-hidden", style: {
+                            borderColor: 'var(--ds-gray-alpha-200)',
+                            opacity: contentOpacity,
+                            transition: 'opacity 150ms',
+                        }, children: [(durationInfo?.queued !== undefined ||
+                                durationInfo?.ran !== undefined) && (_jsxs("div", { className: "px-2 pb-1.5 text-xs flex gap-3", style: { color: 'var(--ds-gray-900)' }, children: [durationInfo.queued !== undefined &&
+                                        durationInfo.queued > 0 && (_jsxs("span", { children: ["Queued for", ' ', _jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] })), durationInfo.ran !== undefined && (_jsxs("span", { children: ["Ran for", ' ', _jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] }))] })), eventData != null ? (_jsx(PayloadBlock, { data: eventData })) : loadError ? (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
                                     borderColor: 'var(--ds-red-400)',
                                     backgroundColor: 'var(--ds-red-100)',
                                     color: 'var(--ds-red-900)',
-                                }, children: loadError })), !isLoading && !loadError && eventData != null && (_jsx("div", { className: "overflow-x-auto rounded-md border p-3", style: { borderColor: 'var(--ds-gray-300)' }, children: _jsx(ObjectInspector, { data: eventData, 
-                                    // @ts-expect-error react-inspector accepts theme objects at runtime
-                                    // see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-                                    theme: isDark ? inspectorThemeDark : inspectorThemeLight, expandLevel: 2 }) })), !isLoading &&
-                                !loadError &&
-                                eventData == null &&
-                                !event.correlationId && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
-                                    borderColor: 'var(--ds-gray-300)',
-                                    backgroundColor: 'var(--ds-gray-100)',
-                                    color: 'var(--ds-gray-700)',
-                                }, children: "No event data available" })), !isLoading &&
-                                !loadError &&
-                                eventData == null &&
-                                event.correlationId &&
-                                !hasExistingEventData &&
-                                loadedEventData === null && (_jsx("div", { className: "rounded-md border p-3 text-xs", style: {
-                                    borderColor: 'var(--ds-gray-300)',
-                                    backgroundColor: 'var(--ds-gray-100)',
-                                    color: 'var(--ds-gray-700)',
-                                }, children: "No event data for this event type" }))] })] }))] }));
-}
-/**
- * Helper component for attribute rows in the expanded details
- */
-function AttributeRow({ label, value, mono = false, }) {
-    return (_jsxs("div", { className: "flex items-center justify-between px-2.5 py-1.5", style: { borderColor: 'var(--ds-gray-300)' }, children: [_jsx("span", { className: "text-[11px] font-medium", style: { color: 'var(--ds-gray-700)' }, children: label }), _jsx("span", { className: `text-[11px] ${mono ? 'font-mono' : ''} text-right max-w-[70%] break-all`, style: { color: 'var(--ds-gray-1000)' }, children: value })] }));
+                                }, children: loadError })) : isLoading ||
+                                (!hasExistingEventData &&
+                                    !hasAttemptedLoad &&
+                                    event.correlationId) ? (_jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsx(Skeleton, { className: "h-3", style: { width: '75%' } }), _jsx(Skeleton, { className: "h-3", style: { width: '50%' } }), _jsx(Skeleton, { className: "h-3", style: { width: '60%' } })] })) : (_jsx("div", { className: "p-2 text-xs", style: { color: 'var(--ds-gray-900)' }, children: "No data" }))] })] }))] }));
 }
-/**
- * Displays a list of all events for a workflow run as colored cards in a pseudo-table.
- * Events are sorted by createdAt (oldest first).
- */
-export function EventListView({ events, onLoadEventData }) {
-    // Sort events by createdAt (oldest first)
+// ──────────────────────────────────────────────────────────────────────────
+// Main component
+// ──────────────────────────────────────────────────────────────────────────
+export function EventListView({ events, steps, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, }) {
     const sortedEvents = useMemo(() => {
         if (!events || events.length === 0)
             return [];
         return [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
     }, [events]);
+    const { correlationNameMap, workflowName } = useMemo(() => buildNameMaps(steps ?? null, run ?? null), [steps, run]);
+    const durationMap = useMemo(() => buildDurationMap(sortedEvents), [sortedEvents]);
+    const [selectedGroupKey, setSelectedGroupKey] = useState(undefined);
+    const [hoveredGroupKey, setHoveredGroupKey] = useState(undefined);
+    const onSelectGroup = useCallback((groupKey) => {
+        setSelectedGroupKey(groupKey);
+    }, []);
+    const onHoverGroup = useCallback((groupKey) => {
+        setHoveredGroupKey(groupKey);
+    }, []);
+    const activeGroupKey = selectedGroupKey ?? hoveredGroupKey;
+    // Compute the row-index range for the active group's connecting lane line.
+    // Only applies to non-run groups (step/hook/wait correlations).
+    const selectedGroupRange = useMemo(() => {
+        if (!activeGroupKey || activeGroupKey === '__run__')
+            return null;
+        let first = -1;
+        let last = -1;
+        for (let i = 0; i < sortedEvents.length; i++) {
+            if (sortedEvents[i].correlationId === activeGroupKey) {
+                if (first === -1)
+                    first = i;
+                last = i;
+            }
+        }
+        return first >= 0 ? { first, last } : null;
+    }, [activeGroupKey, sortedEvents]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const virtuosoRef = useRef(null);
+    const searchIndex = useMemo(() => {
+        const entries = [];
+        for (let i = 0; i < sortedEvents.length; i++) {
+            const ev = sortedEvents[i];
+            entries.push({
+                text: [ev.eventId, ev.correlationId ?? ''].join(' ').toLowerCase(),
+                groupKey: ev.correlationId ??
+                    (isRunLevel(ev.eventType) ? '__run__' : undefined),
+                eventId: ev.eventId,
+                index: i,
+            });
+        }
+        return entries;
+    }, [sortedEvents]);
+    useEffect(() => {
+        const q = searchQuery.trim().toLowerCase();
+        if (!q) {
+            setSelectedGroupKey(undefined);
+            return;
+        }
+        const match = searchIndex.find((entry) => entry.text.includes(q));
+        if (match) {
+            setSelectedGroupKey(match.groupKey);
+            virtuosoRef.current?.scrollToIndex({
+                index: match.index,
+                align: 'center',
+                behavior: 'smooth',
+            });
+        }
+    }, [searchQuery, searchIndex]);
     if (!events || events.length === 0) {
         return (_jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: 'var(--ds-gray-700)' }, children: "No events found" }));
     }
-    return (_jsxs("div", { className: "h-full overflow-auto m-2", children: [_jsxs("div", { className: "grid gap-3 pb-2 mb-2 border-b text-xs font-medium sticky top-0 z-10", style: {
-                    gridTemplateColumns: '24px 100px minmax(120px, auto) 1fr 1fr',
-                    borderColor: 'var(--ds-gray-300)',
-                    backgroundColor: 'transparent',
-                    color: 'var(--ds-gray-700)',
-                }, children: [_jsx("div", {}), _jsx("div", { children: "Time" }), _jsx("div", { children: "Event Type" }), _jsx("div", { children: "Correlation ID" }), _jsx("div", { children: "Event ID" })] }), _jsx("div", { className: "flex flex-col gap-2", children: sortedEvents.map((event) => (_jsx(EventRow, { event: event, onLoadEventData: onLoadEventData }, event.eventId))) }), _jsxs("div", { className: "mt-4 pt-3 border-t text-xs", style: {
-                    borderColor: 'var(--ds-gray-300)',
-                    color: 'var(--ds-gray-700)',
-                }, children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " total"] })] }));
+    return (_jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [_jsx("style", { children: `@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}` }), _jsx("div", { style: { padding: 6, backgroundColor: 'var(--ds-background-100)' }, children: _jsxs("label", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: 6,
+                        boxShadow: '0 0 0 1px var(--ds-gray-alpha-400)',
+                        background: 'var(--ds-background-100)',
+                        height: 40,
+                    }, children: [_jsx("div", { style: {
+                                width: 40,
+                                height: 40,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                color: 'var(--ds-gray-800)',
+                                flexShrink: 0,
+                            }, children: _jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), _jsx("input", { type: "search", placeholder: "Search by event ID or correlation ID\u2026", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+                                marginLeft: -16,
+                                paddingInline: 12,
+                                fontFamily: 'inherit',
+                                fontSize: 14,
+                                background: 'transparent',
+                                border: 'none',
+                                outline: 'none',
+                                height: 40,
+                                width: '100%',
+                            } })] }) }), _jsxs("div", { className: "flex items-center gap-0 text-sm font-medium h-10 border-b flex-shrink-0", style: {
+                    borderColor: 'var(--ds-gray-alpha-200)',
+                    color: 'var(--ds-gray-900)',
+                    backgroundColor: 'var(--ds-background-100)',
+                }, children: [_jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), _jsx("div", { className: "w-5 flex-shrink-0" }), _jsx("div", { className: "flex-1 min-w-0 px-4", children: "Time" }), _jsx("div", { className: "flex-1 min-w-0 px-4", children: "Event Type" }), _jsx("div", { className: "flex-1 min-w-0 px-4", children: "Name" }), _jsx("div", { className: "flex-1 min-w-0 px-4", children: "Correlation ID" }), _jsx("div", { className: "flex-1 min-w-0 px-4", children: "Event ID" })] }), _jsx(Virtuoso, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+                    if (!hasMoreEvents || isLoadingMoreEvents) {
+                        return;
+                    }
+                    void onLoadMoreEvents?.();
+                }, itemContent: (index) => {
+                    return (_jsx(EventRow, { event: sortedEvents[index], index: index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, activeGroupKey: activeGroupKey, selectedGroupKey: selectedGroupKey, selectedGroupRange: selectedGroupRange, correlationNameMap: correlationNameMap, workflowName: workflowName, durationMap: durationMap, onSelectGroup: onSelectGroup, onHoverGroup: onHoverGroup, onLoadEventData: onLoadEventData }));
+                }, components: {
+                    Footer: () => (_jsxs(_Fragment, { children: [hasMoreEvents && (_jsx("div", { className: "px-3 pt-3 flex justify-center", children: _jsx("button", { type: "button", onClick: () => void onLoadMoreEvents?.(), disabled: isLoadingMoreEvents, className: "h-8 px-3 text-xs rounded-md border transition-colors disabled:opacity-60 disabled:cursor-not-allowed", style: {
+                                        borderColor: 'var(--ds-gray-alpha-400)',
+                                        color: 'var(--ds-gray-900)',
+                                        backgroundColor: 'var(--ds-background-100)',
+                                    }, children: isLoadingMoreEvents
+                                        ? 'Loading more events...'
+                                        : 'Load more' }) })), _jsxs("div", { className: "mt-4 pt-3 border-t text-xs px-3", style: {
+                                    borderColor: 'var(--ds-gray-alpha-200)',
+                                    color: 'var(--ds-gray-900)',
+                                }, children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " total"] })] })),
+                }, style: { flex: 1, minHeight: 0 } })] }));
 }
 //# sourceMappingURL=event-list-view.js.map