@workflow/web-shared 4.1.0-beta.63 → 4.1.0-beta.65

package/src/components/event-list-view.tsx

@@ -6,12 +6,16 @@ import { Check, ChevronRight, Copy } from 'lucide-react';
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import { isEncryptedMarker } from '../lib/hydration';
+import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
 import { DataInspector } from './ui/data-inspector';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
 } from './ui/error-stack-block';
+import { LoadMoreButton } from './ui/load-more-button';
+import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
 
 /**
@@ -378,9 +382,11 @@ function TreeGutter({
 function CopyableCell({
   value,
   className,
+  style: styleProp,
 }: {
   value: string;
   className?: string;
+  style?: React.CSSProperties;
 }): ReactNode {
   const [copied, setCopied] = useState(false);
   const resetCopiedTimeoutRef = useRef<number | null>(null);
@@ -412,7 +418,8 @@ function CopyableCell({
 
   return (
     <div
-      className={`group/copy flex items-center gap-1 flex-1 min-w-0 px-4 ${className ?? ''}`}
+      className={`group/copy flex items-center gap-1 min-w-0 px-4 ${className ?? ''}`}
+      style={styleProp}
     >
       <span className="overflow-hidden text-ellipsis whitespace-nowrap">
         {value || '-'}
@@ -583,6 +590,39 @@ function PayloadBlock({
   );
 }
 
+// ──────────────────────────────────────────────────────────────────────────
+// Sort options for the events list
+// ──────────────────────────────────────────────────────────────────────────
+
+const SORT_OPTIONS = [
+  { value: 'desc' as const, label: 'Newest' },
+  { value: 'asc' as const, label: 'Oldest' },
+];
+
+function RowsSkeleton() {
+  return (
+    <div className="flex-1 overflow-hidden">
+      {Array.from({ length: 8 }, (_, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 px-4"
+          style={{ height: 40 }}
+        >
+          <Skeleton
+            className="h-2 w-2 flex-shrink-0"
+            style={{ borderRadius: '50%' }}
+          />
+          <Skeleton className="h-3" style={{ width: 90 }} />
+          <Skeleton className="h-3" style={{ width: 100 }} />
+          <Skeleton className="h-3" style={{ width: 80 }} />
+          <Skeleton className="h-3 flex-1" />
+          <Skeleton className="h-3 flex-1" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 // ──────────────────────────────────────────────────────────────────────────
 // Event row
 // ──────────────────────────────────────────────────────────────────────────
@@ -596,6 +636,17 @@ 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;
+  /** Called when the user clicks the Decrypt button. */
+  onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched. */
+  isDecrypting?: boolean;
 }
 
 function EventRow({
@@ -603,6 +654,8 @@ function EventRow({
   index,
   isFirst,
   isLast,
+  isExpanded,
+  onToggleExpand,
   activeGroupKey,
   selectedGroupKey,
   selectedGroupRange,
@@ -612,12 +665,16 @@ function EventRow({
   onSelectGroup,
   onHoverGroup,
   onLoadEventData,
+  cachedEventData,
+  onCacheEventData,
   encryptionKey,
 }: {
   event: Event;
   index: number;
   isFirst: boolean;
   isLast: boolean;
+  isExpanded: boolean;
+  onToggleExpand: (eventId: string) => void;
   activeGroupKey?: string;
   selectedGroupKey?: string;
   selectedGroupRange: { first: number; last: number } | null;
@@ -627,24 +684,22 @@ function EventRow({
   onSelectGroup: (groupKey: string | undefined) => void;
   onHoverGroup: (groupKey: string | undefined) => void;
   onLoadEventData?: (event: Event) => Promise<unknown | null>;
+  cachedEventData: unknown | null;
+  onCacheEventData: (eventId: string, data: unknown) => void;
   encryptionKey?: Uint8Array;
 }) {
-  const [isExpanded, setIsExpanded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [loadedEventData, setLoadedEventData] = useState<unknown | null>(null);
+  const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
+    cachedEventData
+  );
   const [loadError, setLoadError] = useState<string | null>(null);
-  const [hasAttemptedLoad, setHasAttemptedLoad] = useState(false);
-
-  const rowGroupKey =
-    event.correlationId ??
-    (isRunLevel(event.eventType) ? '__run__' : undefined);
+  const [hasAttemptedLoad, setHasAttemptedLoad] = useState(
+    cachedEventData !== null
+  );
 
-  // Collapse when a different group gets selected
-  useEffect(() => {
-    if (selectedGroupKey !== undefined && selectedGroupKey !== rowGroupKey) {
-      setIsExpanded(false);
-    }
-  }, [selectedGroupKey, rowGroupKey]);
+  const rowGroupKey = isRunLevel(event.eventType)
+    ? '__run__'
+    : (event.correlationId ?? undefined);
 
   const statusDotColor = getStatusDotColor(event.eventType);
   const createdAt = new Date(event.createdAt);
@@ -686,9 +741,10 @@ function EventRow({
         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) {
       setLoadError(
@@ -698,7 +754,27 @@ function EventRow({
       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
@@ -710,6 +786,7 @@ function EventRow({
         .then((data) => {
           if (data !== null && data !== undefined) {
             setLoadedEventData(data);
+            onCacheEventData(event.eventId, data);
           }
           setHasAttemptedLoad(true);
         })
@@ -720,25 +797,23 @@ function EventRow({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [encryptionKey]);
 
-  const handleExpandToggle = useCallback(
-    (e: ReactMouseEvent) => {
-      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 as Event & { eventData: unknown }).eventData
@@ -760,7 +835,7 @@ function EventRow({
         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"
+        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 }}
       >
         <TreeGutter
@@ -781,36 +856,32 @@ function EventRow({
           className="flex items-center flex-1 min-w-0"
           style={{ opacity: contentOpacity, transition: 'opacity 150ms' }}
         >
-          {/* Expand chevron button */}
-          <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"
+          {/* Expand chevron indicator */}
+          <div
+            className="flex items-center justify-center w-5 h-5 flex-shrink-0 rounded"
             style={{
-              ...BUTTON_RESET_STYLE,
-              border: '1px solid var(--ds-gray-alpha-400)',
+              border: '1px solid var(--ds-gray-400)',
             }}
-            aria-label={isExpanded ? 'Collapse details' : 'Expand details'}
           >
             <ChevronRight
               className="h-3 w-3 transition-transform"
               style={{
-                color: 'var(--ds-gray-700)',
+                color: 'var(--ds-gray-900)',
                 transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
               }}
             />
-          </button>
+          </div>
 
           {/* Time */}
           <div
-            className="text-xs tabular-nums flex-1 min-w-0 px-4"
-            style={{ color: 'var(--ds-gray-900)' }}
+            className="tabular-nums min-w-0 px-4"
+            style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
           >
             {formatEventTime(createdAt)}
           </div>
 
           {/* Event Type */}
-          <div className="text-xs font-medium flex-1 min-w-0 px-4">
+          <div className="font-medium min-w-0 px-4" style={{ flex: '2 1 0%' }}>
             <span
               className="inline-flex items-center gap-1.5"
               style={{ color: 'var(--ds-gray-900)' }}
@@ -852,7 +923,8 @@ function EventRow({
 
           {/* Name */}
           <div
-            className="text-xs flex-1 min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap"
+            className="min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ flex: '2 1 0%' }}
             title={eventName !== '-' ? eventName : undefined}
           >
             {eventName}
@@ -861,11 +933,16 @@ function EventRow({
           {/* Correlation ID */}
           <CopyableCell
             value={event.correlationId || ''}
-            className="font-mono text-xs"
+            className="font-mono"
+            style={{ flex: '3 1 0%' }}
           />
 
           {/* Event ID */}
-          <CopyableCell value={event.eventId} className="font-mono text-xs" />
+          <CopyableCell
+            value={event.eventId}
+            className="font-mono"
+            style={{ flex: '3 1 0%' }}
+          />
         </div>
       </div>
 
@@ -971,13 +1048,51 @@ export function EventListView({
   isLoadingMoreEvents = false,
   onLoadMoreEvents,
   encryptionKey,
+  isLoading = false,
+  sortOrder: sortOrderProp,
+  onSortOrderChange,
+  onDecrypt,
+  isDecrypting = false,
 }: EventsListProps) {
+  const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
+    'asc'
+  );
+  const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
+  const handleSortOrderChange = useCallback(
+    (order: 'asc' | 'desc') => {
+      if (onSortOrderChange) {
+        onSortOrderChange(order);
+      } else {
+        setInternalSortOrder(order);
+      }
+    },
+    [onSortOrderChange]
+  );
+
   const sortedEvents = useMemo(() => {
     if (!events || events.length === 0) return [];
+    const dir = effectiveSortOrder === 'desc' ? -1 : 1;
     return [...events].sort(
       (a, b) =>
-        new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+        dir *
+        (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
     );
+  }, [events, effectiveSortOrder]);
+
+  // Detect encrypted fields across all loaded events.
+  // Only checks top-level eventData values (input, output, result, etc.) —
+  // the current data model guarantees encrypted markers appear at this level.
+  const hasEncryptedData = useMemo(() => {
+    if (!events) return false;
+    for (const event of events) {
+      const ed = (event as Record<string, unknown>).eventData;
+      if (!ed || typeof ed !== 'object') continue;
+      const data = ed as Record<string, unknown>;
+      for (const val of Object.values(data)) {
+        if (isEncryptedMarker(val)) return true;
+      }
+    }
+    return false;
   }, [events]);
 
   const { correlationNameMap, workflowName } = useMemo(
@@ -1005,6 +1120,58 @@ export function EventListView({
 
   const activeGroupKey = selectedGroupKey ?? hoveredGroupKey;
 
+  // Expanded state lifted out of EventRow so it survives virtualization
+  const [expandedEventIds, setExpandedEventIds] = useState<Set<string>>(
+    () => new Set()
+  );
+  const toggleEventExpanded = useCallback((eventId: string) => {
+    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<Map<string, unknown>>(new Map());
+  const cacheEventData = useCallback((eventId: string, data: unknown) => {
+    eventDataCacheRef.current.set(eventId, data);
+  }, []);
+
+  // Lookup from eventId → groupKey for efficient collapse filtering
+  const eventGroupKeyMap = useMemo(() => {
+    const map = new Map<string, string>();
+    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<string>();
+      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(() => {
@@ -1025,24 +1192,34 @@ export function EventListView({
 
   const searchIndex = useMemo(() => {
     const entries: {
-      text: string;
+      fields: string[];
       groupKey?: string;
       eventId: string;
       index: number;
     }[] = [];
     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();
@@ -1050,18 +1227,66 @@ export function EventListView({
       setSelectedGroupKey(undefined);
       return;
     }
-    const match = searchIndex.find((entry) => entry.text.includes(q));
-    if (match) {
-      setSelectedGroupKey(match.groupKey);
+    let bestMatch: (typeof searchIndex)[number] | null = 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) {
+  // Track whether we've ever had events to distinguish initial load from refetch
+  const hasHadEventsRef = useRef(false);
+  if (sortedEvents.length > 0) {
+    hasHadEventsRef.current = true;
+  }
+  const isInitialLoad = isLoading && !hasHadEventsRef.current;
+  const isRefetching =
+    isLoading && hasHadEventsRef.current && sortedEvents.length === 0;
+
+  if (isInitialLoad) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        {/* Skeleton search bar */}
+        <div style={{ padding: 6 }}>
+          <Skeleton style={{ height: 40, borderRadius: 6 }} />
+        </div>
+        {/* Skeleton header */}
+        <div
+          className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
+          style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
+        >
+          <Skeleton className="h-3" style={{ width: 60 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 80 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 50 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 90 }} />
+          <div style={{ flex: 1 }} />
+          <Skeleton className="h-3" style={{ width: 70 }} />
+        </div>
+        <RowsSkeleton />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!events || events.length === 0)) {
     return (
       <div
         className="flex items-center justify-center h-full text-sm"
@@ -1075,8 +1300,15 @@ export function EventListView({
   return (
     <div className="h-full flex flex-col overflow-hidden">
       <style>{`@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}`}</style>
-      {/* Search bar */}
-      <div style={{ padding: 6, backgroundColor: 'var(--ds-background-100)' }}>
+      {/* Search bar + sort */}
+      <div
+        style={{
+          padding: 6,
+          backgroundColor: 'var(--ds-background-100)',
+          display: 'flex',
+          gap: 6,
+        }}
+      >
         <label
           style={{
             display: 'flex',
@@ -1086,6 +1318,8 @@ export function EventListView({
             boxShadow: '0 0 0 1px var(--ds-gray-alpha-400)',
             background: 'var(--ds-background-100)',
             height: 40,
+            flex: 1,
+            minWidth: 0,
           }}
         >
           <div
@@ -1124,7 +1358,7 @@ export function EventListView({
           </div>
           <input
             type="search"
-            placeholder="Search by event ID or correlation ID…"
+            placeholder="Search by name, event type, or ID…"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             style={{
@@ -1140,11 +1374,23 @@ export function EventListView({
             }}
           />
         </label>
+        <MenuDropdown
+          options={SORT_OPTIONS}
+          value={effectiveSortOrder}
+          onChange={handleSortOrderChange}
+        />
+        {(hasEncryptedData || encryptionKey) && onDecrypt && (
+          <DecryptButton
+            decrypted={!!encryptionKey}
+            loading={isDecrypting}
+            onClick={onDecrypt}
+          />
+        )}
       </div>
 
       {/* Header */}
       <div
-        className="flex items-center gap-0 text-sm font-medium h-10 border-b flex-shrink-0"
+        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)',
@@ -1153,82 +1399,93 @@ export function EventListView({
       >
         <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
         <div className="w-5 flex-shrink-0" />
-        <div className="flex-1 min-w-0 px-4">Time</div>
-        <div className="flex-1 min-w-0 px-4">Event Type</div>
-        <div className="flex-1 min-w-0 px-4">Name</div>
-        <div className="flex-1 min-w-0 px-4">Correlation ID</div>
-        <div className="flex-1 min-w-0 px-4">Event ID</div>
+        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+          Time
+        </div>
+        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+          Event Type
+        </div>
+        <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+          Name
+        </div>
+        <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+          Correlation ID
+        </div>
+        <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+          Event ID
+        </div>
       </div>
 
-      {/* Virtualized event rows */}
-      <Virtuoso
-        ref={virtuosoRef}
-        totalCount={sortedEvents.length}
-        overscan={20}
-        defaultItemHeight={40}
-        endReached={() => {
-          if (!hasMoreEvents || isLoadingMoreEvents) {
-            return;
-          }
-          void onLoadMoreEvents?.();
-        }}
-        itemContent={(index: number) => {
-          return (
-            <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}
-            />
-          );
-        }}
-        components={{
-          Footer: () => (
-            <>
-              {hasMoreEvents && (
-                <div className="px-3 pt-3 flex justify-center">
-                  <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)',
-                    }}
-                  >
-                    {isLoadingMoreEvents
-                      ? 'Loading more events...'
-                      : 'Load more'}
-                  </button>
-                </div>
-              )}
-              <div
-                className="mt-4 pt-3 border-t text-xs px-3"
-                style={{
-                  borderColor: 'var(--ds-gray-alpha-200)',
-                  color: 'var(--ds-gray-900)',
-                }}
-              >
-                {sortedEvents.length} event
-                {sortedEvents.length !== 1 ? 's' : ''} total
-              </div>
-            </>
-          ),
+      {/* Virtualized event rows or refetching skeleton */}
+      {isRefetching ? (
+        <RowsSkeleton />
+      ) : (
+        <Virtuoso
+          ref={virtuosoRef}
+          totalCount={sortedEvents.length}
+          overscan={20}
+          defaultItemHeight={40}
+          endReached={() => {
+            if (!hasMoreEvents || isLoadingMoreEvents) {
+              return;
+            }
+            void onLoadMoreEvents?.();
+          }}
+          itemContent={(index: number) => {
+            const ev = sortedEvents[index];
+            return (
+              <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}
+              />
+            );
+          }}
+          style={{ flex: 1, minHeight: 0 }}
+        />
+      )}
+
+      {/* Fixed footer — count + load more */}
+      <div
+        className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
+        style={{
+          borderColor: 'var(--ds-gray-alpha-200)',
+          color: 'var(--ds-gray-900)',
+          backgroundColor: 'var(--ds-background-100)',
         }}
-        style={{ flex: 1, minHeight: 0 }}
-      />
+      >
+        <span>
+          {sortedEvents.length} event
+          {sortedEvents.length !== 1 ? 's' : ''} loaded
+        </span>
+        {hasMoreEvents && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="pointer-events-auto">
+              <LoadMoreButton
+                loading={isLoadingMoreEvents}
+                onClick={() => void onLoadMoreEvents?.()}
+              />
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }