@workflow/web-shared 4.1.0-beta.62 → 4.1.0-beta.64

package/README.md

@@ -37,6 +37,10 @@ export default function MyRunDetailView({
 Server actions and data fetching are intentionally **not** part of `web-shared`. Implement those in your app
 and pass data + callbacks into these components. If you need world run helpers, use `@workflow/core/runtime`.
 
+> **Security notice:** If you implement server-side data fetching using `@workflow/world-vercel` or similar backends,
+> ensure that user-supplied IDs (runId, stepId, etc.) are validated before passing them to world functions.
+> The server actions in `@workflow/web` do not include authentication — see that package's README for details on securing self-hosted deployments.
+
 ## Styling
 
 In order for tailwind classes to be picked up correctly, you might need to configure your NextJS app

package/dist/components/event-list-view.d.ts

@@ -1,7 +1,6 @@
-import type { Event, Step, WorkflowRun } from '@workflow/world';
+import type { Event, WorkflowRun } from '@workflow/world';
 interface EventsListProps {
     events: Event[] | null;
-    steps?: Step[] | null;
     run?: WorkflowRun | null;
     onLoadEventData?: (event: Event) => Promise<unknown | null>;
     hasMoreEvents?: boolean;
@@ -9,7 +8,14 @@ interface EventsListProps {
     onLoadMoreEvents?: () => Promise<void> | void;
     /** When provided, signals that decryption is active (triggers re-load of expanded events) */
     encryptionKey?: Uint8Array;
+    /** When true, shows a loading state instead of "No events found" for empty lists */
+    isLoading?: boolean;
+    /** Sort order for events. Defaults to 'asc'. */
+    sortOrder?: 'asc' | 'desc';
+    /** Called when the user changes sort order. When provided, the sort dropdown is shown
+     *  and the parent is expected to refetch from the API with the new order. */
+    onSortOrderChange?: (order: 'asc' | 'desc') => void;
 }
-export declare function EventListView({ events, steps, run, onLoadEventData, hasMoreEvents, isLoadingMoreEvents, onLoadMoreEvents, encryptionKey, }: EventsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventListView({ events, run, onLoadEventData, hasMoreEvents, isLoadingMoreEvents, onLoadMoreEvents, encryptionKey, isLoading, sortOrder: sortOrderProp, onSortOrderChange, }: EventsListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=event-list-view.d.ts.map

package/dist/components/event-list-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event-list-view.d.ts","sourceRoot":"","sources":["../../src/components/event-list-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAokBhE,UAAU,eAAe;IACvB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACtB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,6FAA6F;IAC7F,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AA+WD,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,GAAG,EACH,eAAe,EACf,aAAqB,EACrB,mBAA2B,EAC3B,gBAAgB,EAChB,aAAa,GACd,EAAE,eAAe,2CAoQjB"}
+{"version":3,"file":"event-list-view.d.ts","sourceRoot":"","sources":["../../src/components/event-list-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAulB1D,UAAU,eAAe;IACvB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,6FAA6F;IAC7F,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;iFAC6E;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAyYD,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,GAAG,EACH,eAAe,EACf,aAAqB,EACrB,mBAA2B,EAC3B,gBAAgB,EAChB,aAAa,EACb,SAAiB,EACjB,SAAS,EAAE,aAAa,EACxB,iBAAiB,GAClB,EAAE,eAAe,2CA4ajB"}

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

@@ -7,6 +7,7 @@ import { Virtuoso } from 'react-virtuoso';
 import { formatDuration } from '../lib/utils';
 import { DataInspector } from './ui/data-inspector';
 import { ErrorStackBlock, isStructuredErrorWithStack, } from './ui/error-stack-block';
+import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -81,16 +82,19 @@ function getStatusDotColor(eventType) {
     return 'var(--ds-gray-600)';
 }
 /**
- * Build a map from correlationId (stepId) → display name using step entities,
- * and parse the workflow name from the run.
+ * Build a map from correlationId (stepId) → display name using step_created
+ * events, and parse the workflow name from the run.
  */
-function buildNameMaps(steps, run) {
+function buildNameMaps(events, 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);
+    // Map step correlationId (= stepId) → parsed step name from step_created events
+    if (events) {
+        for (const event of events) {
+            if (event.eventType === 'step_created' && event.correlationId) {
+                const stepName = event.eventData?.stepName ?? '';
+                const parsed = parseStepName(String(stepName));
+                correlationNameMap.set(event.correlationId, parsed?.shortName ?? stepName);
+            }
         }
     }
     // Parse workflow name from run
@@ -237,7 +241,7 @@ function TreeGutter({ isFirst, isLast, isRunLevel: isRun, statusDotColor, pulse
 // ──────────────────────────────────────────────────────────────────────────
 // Copyable cell — shows a copy button on hover
 // ──────────────────────────────────────────────────────────────────────────
-function CopyableCell({ value, className, }) {
+function CopyableCell({ value, className, style: styleProp, }) {
     const [copied, setCopied] = useState(false);
     const resetCopiedTimeoutRef = useRef(null);
     useEffect(() => {
@@ -260,7 +264,7 @@ function CopyableCell({ value, className, }) {
             }, 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] }));
+    return (_jsxs("div", { className: `group/copy flex items-center gap-1 min-w-0 px-4 ${className ?? ''}`, style: styleProp, 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) {
@@ -351,20 +355,21 @@ function PayloadBlock({ data, eventType, }) {
     }
     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, encryptionKey, }) {
-    const [isExpanded, setIsExpanded] = useState(false);
+// ──────────────────────────────────────────────────────────────────────────
+// Sort options for the events list
+// ──────────────────────────────────────────────────────────────────────────
+const SORT_OPTIONS = [
+    { value: 'desc', label: 'Newest' },
+    { value: 'asc', label: 'Oldest' },
+];
+function EventRow({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, }) {
     const [isLoading, setIsLoading] = useState(false);
-    const [loadedEventData, setLoadedEventData] = useState(null);
+    const [loadedEventData, setLoadedEventData] = useState(cachedEventData);
     const [loadError, setLoadError] = useState(null);
-    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 [hasAttemptedLoad, setHasAttemptedLoad] = useState(cachedEventData !== null);
+    const rowGroupKey = isRunLevel(event.eventType)
+        ? '__run__'
+        : (event.correlationId ?? undefined);
     const statusDotColor = getStatusDotColor(event.eventType);
     const createdAt = new Date(event.createdAt);
     const hasExistingEventData = 'eventData' in event && event.eventData != null;
@@ -398,9 +403,10 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
                 setLoadError('Event details unavailable');
                 return;
             }
-            const eventData = await onLoadEventData(event);
-            if (eventData !== null && eventData !== undefined) {
-                setLoadedEventData(eventData);
+            const data = await onLoadEventData(event);
+            if (data !== null && data !== undefined) {
+                setLoadedEventData(data);
+                onCacheEventData(event.eventId, data);
             }
         }
         catch (err) {
@@ -410,7 +416,24 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
             setIsLoading(false);
             setHasAttemptedLoad(true);
         }
-    }, [event, loadedEventData, hasExistingEventData, onLoadEventData]);
+    }, [
+        event,
+        loadedEventData,
+        hasExistingEventData,
+        onLoadEventData,
+        onCacheEventData,
+    ]);
+    // Auto-load event data when remounting in expanded state without cached data
+    useEffect(() => {
+        if (isExpanded &&
+            loadedEventData === null &&
+            !hasExistingEventData &&
+            !isLoading &&
+            !hasAttemptedLoad) {
+            loadEventDetails();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     // When encryption key changes and this event was previously loaded,
     // re-load to get decrypted data
     useEffect(() => {
@@ -421,6 +444,7 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
                 .then((data) => {
                 if (data !== null && data !== undefined) {
                     setLoadedEventData(data);
+                    onCacheEventData(event.eventId, data);
                 }
                 setHasAttemptedLoad(true);
             })
@@ -430,22 +454,23 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [encryptionKey]);
-    const handleExpandToggle = useCallback((e) => {
-        e.stopPropagation();
-        const newExpanded = !isExpanded;
-        setIsExpanded(newExpanded);
-        if (newExpanded && loadedEventData === null && !hasExistingEventData) {
-            loadEventDetails();
-        }
-    }, [isExpanded, loadedEventData, hasExistingEventData, loadEventDetails]);
     const handleRowClick = useCallback(() => {
-        if (selectedGroupKey === rowGroupKey) {
-            onSelectGroup(undefined);
-        }
-        else {
-            onSelectGroup(rowGroupKey);
+        onSelectGroup(rowGroupKey === selectedGroupKey ? undefined : rowGroupKey);
+        onToggleExpand(event.eventId);
+        if (!isExpanded && loadedEventData === null && !hasExistingEventData) {
+            loadEventDetails();
         }
-    }, [selectedGroupKey, rowGroupKey, onSelectGroup]);
+    }, [
+        selectedGroupKey,
+        rowGroupKey,
+        onSelectGroup,
+        onToggleExpand,
+        event.eventId,
+        isExpanded,
+        loadedEventData,
+        hasExistingEventData,
+        loadEventDetails,
+    ]);
     const eventData = hasExistingEventData
         ? event.eventData
         : loadedEventData;
@@ -453,13 +478,12 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
     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)',
+                }, className: "w-full text-left flex items-center gap-0 text-[13px] 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("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
+                                    border: '1px solid var(--ds-gray-400)',
+                                }, children: _jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
+                                        color: 'var(--ds-gray-900)',
                                         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: {
+                                    } }) }), _jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: 'var(--ds-gray-900)', flex: '2 1 0%' }, children: formatEventTime(createdAt) }), _jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: '2 1 0%' }, 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,
@@ -478,7 +502,7 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
                                                         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: {
+                                                    } })] }), formatEventType(event.eventType)] }) }), _jsx("div", { className: "min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap", style: { flex: '2 1 0%' }, title: eventName !== '-' ? eventName : undefined, children: eventName }), _jsx(CopyableCell, { value: event.correlationId || '', className: "font-mono", style: { flex: '3 1 0%' } }), _jsx(CopyableCell, { value: event.eventId, className: "font-mono", style: { flex: '3 1 0%' } })] })] }), 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',
@@ -496,13 +520,25 @@ function EventRow({ event, index, isFirst, isLast, activeGroupKey, selectedGroup
 // ──────────────────────────────────────────────────────────────────────────
 // Main component
 // ──────────────────────────────────────────────────────────────────────────
-export function EventListView({ events, steps, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, }) {
+export function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, }) {
+    const [internalSortOrder, setInternalSortOrder] = useState('asc');
+    const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
+    const handleSortOrderChange = useCallback((order) => {
+        if (onSortOrderChange) {
+            onSortOrderChange(order);
+        }
+        else {
+            setInternalSortOrder(order);
+        }
+    }, [onSortOrderChange]);
     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 dir = effectiveSortOrder === 'desc' ? -1 : 1;
+        return [...events].sort((a, b) => dir *
+            (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
+    }, [events, effectiveSortOrder]);
+    const { correlationNameMap, workflowName } = useMemo(() => buildNameMaps(events ?? null, run ?? null), [events, run]);
     const durationMap = useMemo(() => buildDurationMap(sortedEvents), [sortedEvents]);
     const [selectedGroupKey, setSelectedGroupKey] = useState(undefined);
     const [hoveredGroupKey, setHoveredGroupKey] = useState(undefined);
@@ -513,6 +549,57 @@ export function EventListView({ events, steps, run, onLoadEventData, hasMoreEven
         setHoveredGroupKey(groupKey);
     }, []);
     const activeGroupKey = selectedGroupKey ?? hoveredGroupKey;
+    // Expanded state lifted out of EventRow so it survives virtualization
+    const [expandedEventIds, setExpandedEventIds] = useState(() => new Set());
+    const toggleEventExpanded = useCallback((eventId) => {
+        setExpandedEventIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(eventId)) {
+                next.delete(eventId);
+            }
+            else {
+                next.add(eventId);
+            }
+            return next;
+        });
+    }, []);
+    // Event data cache — ref avoids re-renders when cache updates
+    const eventDataCacheRef = useRef(new Map());
+    const cacheEventData = useCallback((eventId, data) => {
+        eventDataCacheRef.current.set(eventId, data);
+    }, []);
+    // Lookup from eventId → groupKey for efficient collapse filtering
+    const eventGroupKeyMap = useMemo(() => {
+        const map = new Map();
+        for (const ev of sortedEvents) {
+            const gk = isRunLevel(ev.eventType)
+                ? '__run__'
+                : (ev.correlationId ?? '');
+            if (gk)
+                map.set(ev.eventId, gk);
+        }
+        return map;
+    }, [sortedEvents]);
+    // Collapse expanded events that don't belong to the newly selected group
+    useEffect(() => {
+        if (selectedGroupKey === undefined)
+            return;
+        setExpandedEventIds((prev) => {
+            if (prev.size === 0)
+                return prev;
+            let changed = false;
+            const next = new Set();
+            for (const eventId of prev) {
+                if (eventGroupKeyMap.get(eventId) === selectedGroupKey) {
+                    next.add(eventId);
+                }
+                else {
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [selectedGroupKey, eventGroupKeyMap]);
     // 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(() => {
@@ -535,83 +622,120 @@ export function EventListView({ events, steps, run, onLoadEventData, hasMoreEven
         const entries = [];
         for (let i = 0; i < sortedEvents.length; i++) {
             const ev = sortedEvents[i];
+            const isRun = isRunLevel(ev.eventType);
+            const name = isRun
+                ? (workflowName ?? '')
+                : ev.correlationId
+                    ? (correlationNameMap.get(ev.correlationId) ?? '')
+                    : '';
             entries.push({
-                text: [ev.eventId, ev.correlationId ?? ''].join(' ').toLowerCase(),
-                groupKey: ev.correlationId ??
-                    (isRunLevel(ev.eventType) ? '__run__' : undefined),
+                fields: [
+                    ev.eventId,
+                    ev.correlationId ?? '',
+                    ev.eventType,
+                    formatEventType(ev.eventType),
+                    name,
+                ].map((f) => f.toLowerCase()),
+                groupKey: ev.correlationId ?? (isRun ? '__run__' : undefined),
                 eventId: ev.eventId,
                 index: i,
             });
         }
         return entries;
-    }, [sortedEvents]);
+    }, [sortedEvents, correlationNameMap, workflowName]);
     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);
+        let bestMatch = null;
+        let bestScore = 0;
+        for (const entry of searchIndex) {
+            for (const field of entry.fields) {
+                if (field && field.includes(q)) {
+                    const score = q.length / field.length;
+                    if (score > bestScore) {
+                        bestScore = score;
+                        bestMatch = entry;
+                    }
+                }
+            }
+        }
+        if (bestMatch) {
+            setSelectedGroupKey(bestMatch.groupKey);
             virtuosoRef.current?.scrollToIndex({
-                index: match.index,
+                index: bestMatch.index,
                 align: 'center',
                 behavior: 'smooth',
             });
         }
     }, [searchQuery, searchIndex]);
     if (!events || events.length === 0) {
+        if (isLoading) {
+            return (_jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [_jsx("div", { style: { padding: 6 }, children: _jsx(Skeleton, { style: { height: 40, borderRadius: 6 } }) }), _jsxs("div", { className: "flex items-center gap-0 h-10 border-b flex-shrink-0 px-4", style: { borderColor: 'var(--ds-gray-alpha-200)' }, children: [_jsx(Skeleton, { className: "h-3", style: { width: 60 } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { className: "h-3", style: { width: 80 } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { className: "h-3", style: { width: 50 } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { className: "h-3", style: { width: 90 } }), _jsx("div", { style: { flex: 1 } }), _jsx(Skeleton, { className: "h-3", style: { width: 70 } })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 8 }, (_, i) => (_jsxs("div", { className: "flex items-center gap-3 px-4", style: { height: 40 }, children: [_jsx(Skeleton, { className: "h-2 w-2 flex-shrink-0", style: { borderRadius: '50%' } }), _jsx(Skeleton, { className: "h-3", style: { width: 90 } }), _jsx(Skeleton, { className: "h-3", style: { width: 100 } }), _jsx(Skeleton, { className: "h-3", style: { width: 80 } }), _jsx(Skeleton, { className: "h-3 flex-1" }), _jsx(Skeleton, { className: "h-3 flex-1" })] }, i))) })] }));
+        }
         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 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: {
+    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}}` }), _jsxs("div", { style: {
+                    padding: 6,
+                    backgroundColor: 'var(--ds-background-100)',
+                    display: 'flex',
+                    gap: 6,
+                }, 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,
+                            flex: 1,
+                            minWidth: 0,
+                        }, 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 name, event type, or 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%',
+                                } })] }), _jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange })] }), _jsxs("div", { className: "flex items-center gap-0 text-[13px] 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: () => {
+                }, children: [_jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), _jsx("div", { className: "w-5 flex-shrink-0" }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: "Time" }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: "Event Type" }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: "Name" }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, children: "Correlation ID" }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, 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, encryptionKey: encryptionKey }));
+                    const ev = sortedEvents[index];
+                    return (_jsx(EventRow, { event: ev, index: index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey: activeGroupKey, selectedGroupKey: selectedGroupKey, selectedGroupRange: selectedGroupRange, correlationNameMap: correlationNameMap, workflowName: workflowName, durationMap: durationMap, onSelectGroup: onSelectGroup, onHoverGroup: onHoverGroup, onLoadEventData: onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey: encryptionKey }));
                 }, 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)',
+                    Footer: 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)',
-                                }, children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " total"] })] })),
-                }, style: { flex: 1, minHeight: 0 } })] }));
+                                    backgroundColor: 'var(--ds-background-100)',
+                                }, children: isLoadingMoreEvents
+                                    ? 'Loading more events...'
+                                    : 'Load more' }) }))
+                        : undefined,
+                }, style: { flex: 1, minHeight: 0 } }), _jsxs("div", { className: "flex-shrink-0 border-t text-xs px-3 py-2", style: {
+                    borderColor: 'var(--ds-gray-alpha-200)',
+                    color: 'var(--ds-gray-900)',
+                    backgroundColor: 'var(--ds-background-100)',
+                }, children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " total"] })] }));
 }
 //# sourceMappingURL=event-list-view.js.map