@workflow/web-shared 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -3,13 +3,24 @@
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, WorkflowRun } from '@workflow/world';
 import { Check, ChevronRight, Copy } from 'lucide-react';
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  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 {
+  parseExactWorkflowSearchId,
+  looksLikeWorkflowIdSearchInput,
+  type ExactIdSearchResult,
+  type ExactWorkflowSearchIdKind,
+} from '../lib/exact-event-search-id';
 import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
-import { DataInspector } from './ui/data-inspector';
+import { useToast } from '../lib/toast';
+import { DataInspector, DecryptClickContext } from './ui/data-inspector';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -142,7 +153,7 @@ function buildNameMaps(
   return { correlationNameMap, workflowName };
 }
 
-interface DurationInfo {
+export interface DurationInfo {
   /** Time from created → started (ms) */
   queued?: number;
   /** Time from started → completed/failed/cancelled (ms) */
@@ -154,19 +165,30 @@ interface DurationInfo {
  * created ↔ started (queued) and started ↔ completed/failed/cancelled (ran).
  * Also computes run-level durations under the key '__run__'.
  */
-function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
+export function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
+  // Process events in chronological order so the result doesn't depend on
+  // the caller's sort direction. Retried steps emit multiple `step_started`
+  // events for the same correlationId; the queued duration must be measured
+  // against the first one, not the last.
+  const chronological = [...events].sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
+
   const createdTimes = new Map<string, number>();
+  const firstStartedTimes = new Map<string, number>();
   const startedTimes = new Map<string, number>();
   const durations = new Map<string, DurationInfo>();
 
-  for (const event of events) {
+  for (const event of chronological) {
     const ts = new Date(event.createdAt).getTime();
     const key = event.correlationId ?? '__run__';
     const type: string = event.eventType;
 
     // Track created times (first event for each correlation)
     if (type === 'step_created' || type === 'run_created') {
-      createdTimes.set(key, ts);
+      if (!createdTimes.has(key)) {
+        createdTimes.set(key, ts);
+      }
     }
 
     // Track started times & compute queued duration
@@ -176,16 +198,21 @@ function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
       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;
+      // The queued duration is anchored on the first start event only —
+      // subsequent step_started events come from retries.
+      if (!firstStartedTimes.has(key)) {
+        firstStartedTimes.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);
       }
-      durations.set(key, info);
     }
 
     // Compute ran duration on terminal events
@@ -703,6 +730,14 @@ interface EventsListProps {
   onDecrypt?: () => void;
   /** Whether the encryption key is currently being fetched. */
   isDecrypting?: boolean;
+  /** Run-level hint: the run contains encrypted data (from probe). */
+  hasEncryptedData?: boolean;
+  /** Fetch events for an exact correlation or event ID. */
+  onExactIdSearch?: (
+    id: string,
+    kind: ExactWorkflowSearchIdKind,
+    signal?: AbortSignal
+  ) => Promise<ExactIdSearchResult>;
 }
 
 function EventRow({
@@ -725,6 +760,7 @@ function EventRow({
   onCacheEventData,
   encryptionKey,
   onEncryptedDataDetected,
+  suppressGroupDimming = false,
 }: {
   event: Event;
   index: number;
@@ -745,6 +781,8 @@ function EventRow({
   onCacheEventData: (eventId: string, data: unknown) => void;
   encryptionKey?: Uint8Array;
   onEncryptedDataDetected?: () => void;
+  /** Exact-ID search results should not dim unrelated rows. */
+  suppressGroupDimming?: boolean;
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
@@ -786,7 +824,7 @@ function EventRow({
 
   const hasActive = activeGroupKey !== undefined;
   const isRelated = rowGroupKey !== undefined && rowGroupKey === activeGroupKey;
-  const isDimmed = hasActive && !isRelated;
+  const isDimmed = hasActive && !isRelated && !suppressGroupDimming;
   const isPulsing = hasActive && isRelated;
 
   // Gutter state derived from selectedGroupRange
@@ -801,7 +839,15 @@ function EventRow({
     selectedGroupRange !== null && index === selectedGroupRange.last;
 
   const loadEventDetails = useCallback(async () => {
-    if (loadedEventData !== null || hasExistingEventData) {
+    if (loadedEventData !== null) {
+      return;
+    }
+    if (cachedEventData !== null) {
+      setLoadedEventData(cachedEventData);
+      setHasAttemptedLoad(true);
+      return;
+    }
+    if (isLoading) {
       return;
     }
     setIsLoading(true);
@@ -830,24 +876,20 @@ function EventRow({
   }, [
     event,
     loadedEventData,
-    hasExistingEventData,
+    isLoading,
     onLoadEventData,
     onCacheEventData,
     encryptionKey,
     onEncryptedDataDetected,
+    cachedEventData,
   ]);
 
   // Auto-load event data when remounting in expanded state without cached data
   useEffect(() => {
-    if (
-      isExpanded &&
-      loadedEventData === null &&
-      !hasExistingEventData &&
-      !isLoading &&
-      !hasAttemptedLoad
-    ) {
-      loadEventDetails();
+    if (!isExpanded || isLoading) {
+      return;
     }
+    void loadEventDetails();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -875,8 +917,8 @@ function EventRow({
   const handleRowClick = useCallback(() => {
     onSelectGroup(rowGroupKey === selectedGroupKey ? undefined : rowGroupKey);
     onToggleExpand(event.eventId);
-    if (!isExpanded && loadedEventData === null && !hasExistingEventData) {
-      loadEventDetails();
+    if (!isExpanded) {
+      void loadEventDetails();
     }
   }, [
     selectedGroupKey,
@@ -885,14 +927,16 @@ function EventRow({
     onToggleExpand,
     event.eventId,
     isExpanded,
-    loadedEventData,
-    hasExistingEventData,
     loadEventDetails,
   ]);
 
-  const eventData = hasExistingEventData
-    ? (event as Event & { eventData: unknown }).eventData
-    : loadedEventData;
+  const mergedEventData =
+    loadedEventData ??
+    (hasExistingEventData
+      ? (event as Event & { eventData: unknown }).eventData
+      : null);
+
+  const displayPayload = isLoading ? loadedEventData : mergedEventData;
 
   const contentOpacity = isDimmed ? 0.3 : 1;
 
@@ -1076,8 +1120,8 @@ function EventRow({
             )}
 
             {/* Payload */}
-            {eventData != null ? (
-              <PayloadBlock data={eventData} eventType={event.eventType} />
+            {displayPayload != null ? (
+              <PayloadBlock data={displayPayload} eventType={event.eventType} />
             ) : loadError ? (
               <div
                 className="rounded-md border p-3 text-xs"
@@ -1090,7 +1134,7 @@ function EventRow({
                 {loadError}
               </div>
             ) : isLoading ||
-              (!hasExistingEventData &&
+              (loadedEventData === null &&
                 !hasAttemptedLoad &&
                 event.correlationId) ? (
               <div className="flex flex-col gap-2 p-3">
@@ -1130,7 +1174,10 @@ export function EventListView({
   onSortOrderChange,
   onDecrypt,
   isDecrypting = false,
+  hasEncryptedData: hasEncryptedDataProp = false,
+  onExactIdSearch,
 }: EventsListProps) {
+  const toast = useToast();
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
     'asc'
   );
@@ -1146,25 +1193,42 @@ export function EventListView({
     [onSortOrderChange]
   );
 
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Event[] | null>(null);
+  const [searchResultsTruncated, setSearchResultsTruncated] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [searchNotFound, setSearchNotFound] = useState(false);
+  const searchRequestRef = useRef(0);
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+  const parsedSearchId = useMemo(
+    () => parseExactWorkflowSearchId(searchQuery),
+    [searchQuery]
+  );
+  const isExactSearchActive = searchResults !== null;
+
   const sortedEvents = useMemo(() => {
-    if (!events || events.length === 0) return [];
+    const sourceEvents = isExactSearchActive ? searchResults : (events ?? []);
+    if (sourceEvents.length === 0) return [];
     const dir = effectiveSortOrder === 'desc' ? -1 : 1;
-    return [...events].sort(
+    return [...sourceEvents].sort(
       (a, b) =>
         dir *
         (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
     );
-  }, [events, effectiveSortOrder]);
+  }, [events, effectiveSortOrder, isExactSearchActive, searchResults]);
 
   // Detect encrypted fields across all loaded events (inline eventData).
   const hasEncryptedInlineData = useMemo(() => {
-    if (!events) return false;
-    for (const event of events) {
+    const sourceEvents = isExactSearchActive ? searchResults : events;
+    if (!sourceEvents) return false;
+    for (const event of sourceEvents) {
       const ed = (event as Record<string, unknown>).eventData;
       if (hasEncryptedValues(ed)) return true;
     }
     return false;
-  }, [events]);
+  }, [events, isExactSearchActive, searchResults]);
 
   // Tracks whether any expanded row's lazy-loaded data contained encrypted markers.
   // Set to true by EventRow via onEncryptedDataDetected; never reset (sticky).
@@ -1174,11 +1238,16 @@ export function EventListView({
     setFoundEncryptedInLazyData(true);
   }, []);
 
-  const hasEncryptedData = hasEncryptedInlineData || foundEncryptedInLazyData;
+  const hasEncryptedData =
+    hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
 
   const { correlationNameMap, workflowName } = useMemo(
-    () => buildNameMaps(events ?? null, run ?? null),
-    [events, run]
+    () =>
+      buildNameMaps(
+        isExactSearchActive ? searchResults : (events ?? null),
+        run ?? null
+      ),
+    [events, isExactSearchActive, run, searchResults]
   );
 
   const durationMap = useMemo(
@@ -1268,68 +1337,139 @@ export function EventListView({
     return first >= 0 ? { first, last } : null;
   }, [activeGroupKey, sortedEvents]);
 
-  const [searchQuery, setSearchQuery] = useState('');
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
-
-  const searchIndex = useMemo(() => {
-    const entries: {
-      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({
-        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, correlationNameMap, workflowName]);
-
   useEffect(() => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) {
+    const trimmed = searchQuery.trim();
+    if (!trimmed) {
+      searchRequestRef.current += 1;
+      setSearchResults(null);
+      setSearchResultsTruncated(false);
+      setSearchError(null);
+      setSearchLoading(false);
+      setSearchNotFound(false);
       setSelectedGroupKey(undefined);
       return;
     }
-    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;
+
+    const parsed = parseExactWorkflowSearchId(trimmed);
+    if (!parsed || !onExactIdSearch) {
+      setSearchResults(null);
+      setSearchLoading(false);
+      setSearchNotFound(false);
+      return;
+    }
+
+    const requestId = ++searchRequestRef.current;
+    setSearchLoading(true);
+    setSearchNotFound(false);
+    setSearchError(null);
+
+    const abortController = new AbortController();
+
+    const timer = setTimeout(() => {
+      void (async () => {
+        try {
+          const results = await onExactIdSearch(
+            parsed.id,
+            parsed.kind,
+            abortController.signal
+          );
+          if (
+            abortController.signal.aborted ||
+            searchRequestRef.current !== requestId
+          ) {
+            return;
+          }
+
+          if (results.status === 'error') {
+            setSearchResults([]);
+            setSearchResultsTruncated(false);
+            setSearchNotFound(false);
+            setSearchError(results.message);
+            setSelectedGroupKey(undefined);
+            return;
+          }
+
+          if (
+            results.status === 'not_found' ||
+            (results.status === 'ok' && results.events.length === 0)
+          ) {
+            setSearchResults([]);
+            setSearchResultsTruncated(false);
+            setSearchNotFound(true);
+            setSearchError(null);
+            setSelectedGroupKey(undefined);
+            return;
+          }
+
+          setSearchResults(results.events);
+          setSearchResultsTruncated(Boolean(results.truncated));
+          setSearchNotFound(false);
+          setSearchError(null);
+          setSelectedGroupKey(
+            parsed.kind === 'event'
+              ? (() => {
+                  const first = results.events[0];
+                  if (!first) return undefined;
+                  return isRunLevel(first.eventType)
+                    ? '__run__'
+                    : (first.correlationId ?? undefined);
+                })()
+              : parsed.id
+          );
+          virtuosoRef.current?.scrollToIndex({
+            index: 0,
+            align: 'start',
+            behavior: 'smooth',
+          });
+        } catch {
+          if (
+            abortController.signal.aborted ||
+            searchRequestRef.current !== requestId
+          ) {
+            return;
+          }
+          setSearchResults([]);
+          setSearchResultsTruncated(false);
+          setSearchNotFound(false);
+          setSearchError('Failed to search events. Try again.');
+          setSelectedGroupKey(undefined);
+        } finally {
+          if (
+            searchRequestRef.current === requestId &&
+            !abortController.signal.aborted
+          ) {
+            setSearchLoading(false);
           }
         }
+      })();
+    }, 300);
+
+    return () => {
+      clearTimeout(timer);
+      abortController.abort();
+    };
+  }, [searchQuery, onExactIdSearch]);
+
+  const handleSearchKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== 'Enter') {
+        return;
       }
-    }
-    if (bestMatch) {
-      setSelectedGroupKey(bestMatch.groupKey);
-      virtuosoRef.current?.scrollToIndex({
-        index: bestMatch.index,
-        align: 'center',
-        behavior: 'smooth',
-      });
-    }
-  }, [searchQuery, searchIndex]);
+
+      const trimmed = searchQuery.trim();
+      if (
+        !trimmed ||
+        parseExactWorkflowSearchId(trimmed) ||
+        !onExactIdSearch ||
+        !looksLikeWorkflowIdSearchInput(trimmed)
+      ) {
+        return;
+      }
+
+      toast.info('Enter a full step ID, wait ID, hook ID, or event ID');
+    },
+    [searchQuery, onExactIdSearch, toast]
+  );
 
   // Track whether we've ever had events to distinguish initial load from refetch
   const hasHadEventsRef = useRef(false);
@@ -1375,207 +1515,232 @@ export function EventListView({
     );
   }
 
-  if (!isLoading && (!events || events.length === 0)) {
-    return (
-      <div
-        className="flex items-center justify-center h-full text-sm"
-        style={{ color: 'var(--ds-gray-700)' }}
-      >
-        No events found
-      </div>
-    );
-  }
-
   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 + sort */}
-      <div
-        style={{
-          padding: 6,
-          backgroundColor: 'var(--ds-background-100)',
-          display: 'flex',
-          gap: 6,
-        }}
-      >
-        <label
+    <DecryptClickContext.Provider
+      value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+    >
+      <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 + sort */}
+        <div
           style={{
+            padding: 6,
+            backgroundColor: 'var(--ds-background-100)',
             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,
+            gap: 6,
           }}
         >
-          <div
+          <label
             style={{
-              width: 40,
-              height: 40,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              color: 'var(--ds-gray-800)',
-              flexShrink: 0,
+              borderRadius: 6,
+              boxShadow: '0 0 0 1px var(--ds-gray-alpha-400)',
+              background: 'var(--ds-background-100)',
+              height: 40,
+              flex: 1,
+              minWidth: 0,
             }}
           >
-            <svg
-              width={16}
-              height={16}
-              viewBox="0 0 16 16"
-              fill="none"
-              aria-hidden="true"
-              focusable="false"
+            <div
+              style={{
+                width: 40,
+                height: 40,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'var(--ds-gray-800)',
+                flexShrink: 0,
+              }}
             >
-              <circle
-                cx="7"
-                cy="7"
-                r="4.5"
-                stroke="currentColor"
-                strokeWidth="1.5"
-              />
-              <path
-                d="M11.5 11.5L14 14"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-              />
-            </svg>
-          </div>
-          <input
-            type="search"
-            placeholder="Search by name, event type, or ID…"
-            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%',
-            }}
-          />
-        </label>
-        <MenuDropdown
-          options={SORT_OPTIONS}
-          value={effectiveSortOrder}
-          onChange={handleSortOrderChange}
-        />
-        {(hasEncryptedData || encryptionKey) && onDecrypt && (
-          <DecryptButton
-            decrypted={!!encryptionKey}
-            loading={isDecrypting}
-            onClick={onDecrypt}
+              <svg
+                width={16}
+                height={16}
+                viewBox="0 0 16 16"
+                fill="none"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <circle
+                  cx="7"
+                  cy="7"
+                  r="4.5"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M11.5 11.5L14 14"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </div>
+            <input
+              type="search"
+              placeholder="Search by step ID, wait ID, hook ID, or event ID…"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={handleSearchKeyDown}
+              disabled={!onExactIdSearch}
+              title={
+                onExactIdSearch
+                  ? undefined
+                  : 'Exact ID search is unavailable in this view.'
+              }
+              style={{
+                marginLeft: -16,
+                paddingInline: 12,
+                fontFamily: 'inherit',
+                fontSize: 14,
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                height: 40,
+                width: '100%',
+                opacity: onExactIdSearch ? 1 : 0.5,
+                cursor: onExactIdSearch ? 'text' : 'not-allowed',
+              }}
+            />
+          </label>
+          <MenuDropdown
+            options={SORT_OPTIONS}
+            value={effectiveSortOrder}
+            onChange={handleSortOrderChange}
           />
-        )}
-      </div>
-
-      {/* Header */}
-      <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)',
-        }}
-      >
-        <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
-        <div className="w-5 flex-shrink-0" />
-        <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
+          {(hasEncryptedData || encryptionKey) && onDecrypt && (
+            <DecryptButton
+              decrypted={!!encryptionKey}
+              loading={isDecrypting}
+              onClick={onDecrypt}
+            />
+          )}
         </div>
-      </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}
-                onEncryptedDataDetected={handleEncryptedDataDetected}
-              />
-            );
+        {/* Header */}
+        <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)',
           }}
-          style={{ flex: 1, minHeight: 0 }}
-        />
-      )}
+        >
+          <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
+          <div className="w-5 flex-shrink-0" />
+          <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>
 
-      {/* 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)',
-        }}
-      >
-        <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>
+        {/* Virtualized event rows or refetching skeleton */}
+        {isRefetching || searchLoading ? (
+          <RowsSkeleton />
+        ) : sortedEvents.length === 0 ? (
+          <div
+            className="flex flex-1 items-center justify-center px-6 text-center text-sm"
+            style={{ color: 'var(--ds-gray-700)' }}
+          >
+            {searchNotFound && searchQuery.trim()
+              ? `No events found for ${searchQuery.trim()}`
+              : searchError
+                ? searchError
+                : parsedSearchId && searchQuery.trim() && !onExactIdSearch
+                  ? 'Exact ID search is unavailable in this view.'
+                  : 'No events found'}
           </div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            totalCount={sortedEvents.length}
+            overscan={20}
+            defaultItemHeight={40}
+            endReached={() => {
+              if (
+                isExactSearchActive ||
+                !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}
+                  onEncryptedDataDetected={handleEncryptedDataDetected}
+                  suppressGroupDimming={isExactSearchActive}
+                />
+              );
+            }}
+            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)',
+          }}
+        >
+          <span>
+            {isExactSearchActive
+              ? searchError
+                ? searchError
+                : searchNotFound
+                  ? `No events found for ${searchQuery.trim()}`
+                  : `${sortedEvents.length} event${sortedEvents.length !== 1 ? 's' : ''} for ${searchQuery.trim()}${searchResultsTruncated ? ' (results may be truncated)' : ''}`
+              : `${sortedEvents.length} event${sortedEvents.length !== 1 ? 's' : ''} loaded`}
+          </span>
+          {!isExactSearchActive && 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>
-    </div>
+    </DecryptClickContext.Provider>
   );
 }