@workflow/web-shared 4.1.5 → 4.1.7

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

@@ -1,4 +1,17 @@
 import type { Event, WorkflowRun } from '@workflow/world';
+import { type ExactIdSearchResult, type ExactWorkflowSearchIdKind } from '../lib/exact-event-search-id';
+export interface DurationInfo {
+    /** Time from created → started (ms) */
+    queued?: number;
+    /** Time from started → completed/failed/cancelled (ms) */
+    ran?: number;
+}
+/**
+ * Build a map from correlationId → duration info by diffing
+ * created ↔ started (queued) and started ↔ completed/failed/cancelled (ran).
+ * Also computes run-level durations under the key '__run__'.
+ */
+export declare function buildDurationMap(events: Event[]): Map<string, DurationInfo>;
 interface EventsListProps {
     events: Event[] | null;
     run?: WorkflowRun | null;
@@ -21,7 +34,9 @@ interface EventsListProps {
     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>;
 }
-export declare function EventListView({ events, run, onLoadEventData, hasMoreEvents, isLoadingMoreEvents, onLoadMoreEvents, encryptionKey, isLoading, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting, hasEncryptedData: hasEncryptedDataProp, }: EventsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventListView({ events, run, onLoadEventData, hasMoreEvents, isLoadingMoreEvents, onLoadMoreEvents, encryptionKey, isLoading, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting, hasEncryptedData: hasEncryptedDataProp, onExactIdSearch, }: 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,WAAW,EAAE,MAAM,iBAAiB,CAAC;AA0qB1D,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;IACpD,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAoaD,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,EACjB,SAAS,EACT,YAAoB,EACpB,gBAAgB,EAAE,oBAA4B,GAC/C,EAAE,eAAe,2CAqcjB"}
+{"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;AAU1D,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,EAC/B,MAAM,8BAA8B,CAAC;AAyItC,MAAM,WAAW,YAAY;IAC3B,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAwE3E;AAydD,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;IACpD,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yDAAyD;IACzD,eAAe,CAAC,EAAE,CAChB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,yBAAyB,EAC/B,MAAM,CAAC,EAAE,WAAW,KACjB,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACnC;AAuaD,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,EACjB,SAAS,EACT,YAAoB,EACpB,gBAAgB,EAAE,oBAA4B,EAC9C,eAAe,GAChB,EAAE,eAAe,2CAujBjB"}

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

@@ -5,8 +5,10 @@ import { Check, ChevronRight, Copy } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import { isEncryptedMarker } from '../lib/hydration';
+import { parseExactWorkflowSearchId, looksLikeWorkflowIdSearchInput, } from '../lib/exact-event-search-id';
 import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
+import { useToast } from '../lib/toast';
 import { DataInspector, DecryptClickContext } from './ui/data-inspector';
 import { ErrorStackBlock, isStructuredErrorWithStack, } from './ui/error-stack-block';
 import { LoadMoreButton } from './ui/load-more-button';
@@ -112,33 +114,46 @@ function buildNameMaps(events, run) {
  * created ↔ started (queued) and started ↔ completed/failed/cancelled (ran).
  * Also computes run-level durations under the key '__run__'.
  */
-function buildDurationMap(events) {
+export function buildDurationMap(events) {
+    // 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();
+    const firstStartedTimes = new Map();
     const startedTimes = new Map();
     const durations = new Map();
-    for (const event of events) {
+    for (const event of chronological) {
         const ts = new Date(event.createdAt).getTime();
         const key = event.correlationId ?? '__run__';
         const type = event.eventType;
         // Track created times (first event for each correlation)
         if (type === 'step_created' || type === 'run_created') {
-            createdTimes.set(key, ts);
+            if (!createdTimes.has(key)) {
+                createdTimes.set(key, ts);
+            }
         }
         // Track started times & compute queued duration
         if (type === 'step_started' ||
             type === 'run_started' ||
             type === 'workflow_started') {
             startedTimes.set(key, ts);
-            // If no explicit created event was seen, use the started time as created
-            if (!createdTimes.has(key)) {
-                createdTimes.set(key, ts);
-            }
-            const createdAt = createdTimes.get(key);
-            const info = durations.get(key) ?? {};
-            if (createdAt !== undefined) {
-                info.queued = ts - createdAt;
+            // 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
         if (type === 'step_completed' ||
@@ -390,7 +405,7 @@ function RowsSkeleton() {
                                 marginLeft: i % 4 === 0 ? 5 : 6,
                             } })] }), _jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: _jsx(Skeleton, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: '70%' } }) }), _jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: '2 1 0%' }, children: [_jsx(Skeleton, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: '50%' } }), _jsx(Skeleton, { className: "h-3", style: { width: '60%' } })] }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: '50%' } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: '75%' } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: '75%' } }) })] }, i))) }));
 }
-function EventRow({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, }) {
+function EventRow({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false, }) {
     const [isLoading, setIsLoading] = useState(false);
     const [loadedEventData, setLoadedEventData] = useState(cachedEventData);
     const [loadError, setLoadError] = useState(null);
@@ -420,7 +435,7 @@ function EventRow({ event, index, isFirst, isLast, isExpanded, onToggleExpand, a
     const durationInfo = durationKey ? durationMap.get(durationKey) : undefined;
     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
     const showBranch = hasActive && isRelated && !isRun;
@@ -568,7 +583,8 @@ function EventRow({ event, index, isFirst, isLast, isExpanded, onToggleExpand, a
 // ──────────────────────────────────────────────────────────────────────────
 // Main component
 // ──────────────────────────────────────────────────────────────────────────
-export function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, }) {
+export function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch, }) {
+    const toast = useToast();
     const [internalSortOrder, setInternalSortOrder] = useState('asc');
     const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
     const handleSortOrderChange = useCallback((order) => {
@@ -579,24 +595,36 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
             setInternalSortOrder(order);
         }
     }, [onSortOrderChange]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState(null);
+    const [searchResultsTruncated, setSearchResultsTruncated] = useState(false);
+    const [searchError, setSearchError] = useState(null);
+    const [searchLoading, setSearchLoading] = useState(false);
+    const [searchNotFound, setSearchNotFound] = useState(false);
+    const searchRequestRef = useRef(0);
+    const virtuosoRef = useRef(null);
+    const parsedSearchId = useMemo(() => parseExactWorkflowSearchId(searchQuery), [searchQuery]);
+    const isExactSearchActive = searchResults !== null;
     const sortedEvents = useMemo(() => {
-        if (!events || events.length === 0)
+        const sourceEvents = isExactSearchActive ? searchResults : (events ?? []);
+        if (sourceEvents.length === 0)
             return [];
         const dir = effectiveSortOrder === 'desc' ? -1 : 1;
-        return [...events].sort((a, b) => dir *
+        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)
+        const sourceEvents = isExactSearchActive ? searchResults : events;
+        if (!sourceEvents)
             return false;
-        for (const event of events) {
+        for (const event of sourceEvents) {
             const ed = event.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).
     const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] = useState(false);
@@ -604,7 +632,7 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
         setFoundEncryptedInLazyData(true);
     }, []);
     const hasEncryptedData = hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
-    const { correlationNameMap, workflowName } = useMemo(() => buildNameMaps(events ?? null, run ?? null), [events, run]);
+    const { correlationNameMap, workflowName } = useMemo(() => buildNameMaps(isExactSearchActive ? searchResults : (events ?? null), run ?? null), [events, isExactSearchActive, run, searchResults]);
     const durationMap = useMemo(() => buildDurationMap(sortedEvents), [sortedEvents]);
     const [selectedGroupKey, setSelectedGroupKey] = useState(undefined);
     const [hoveredGroupKey, setHoveredGroupKey] = useState(undefined);
@@ -682,61 +710,112 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
         }
         return first >= 0 ? { first, last } : null;
     }, [activeGroupKey, sortedEvents]);
-    const [searchQuery, setSearchQuery] = useState('');
-    const virtuosoRef = useRef(null);
-    const searchIndex = useMemo(() => {
-        const entries = [];
-        for (let i = 0; i < sortedEvents.length; i++) {
-            const ev = sortedEvents[i];
-            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 = 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) => {
+        if (event.key !== 'Enter') {
+            return;
         }
-        if (bestMatch) {
-            setSelectedGroupKey(bestMatch.groupKey);
-            virtuosoRef.current?.scrollToIndex({
-                index: bestMatch.index,
-                align: 'center',
-                behavior: 'smooth',
-            });
+        const trimmed = searchQuery.trim();
+        if (!trimmed ||
+            parseExactWorkflowSearchId(trimmed) ||
+            !onExactIdSearch ||
+            !looksLikeWorkflowIdSearchInput(trimmed)) {
+            return;
         }
-    }, [searchQuery, searchIndex]);
+        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);
     if (sortedEvents.length > 0) {
@@ -747,9 +826,6 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
     if (isInitialLoad) {
         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", style: { borderColor: 'var(--ds-gray-alpha-200)' }, 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: _jsx(Skeleton, { className: "h-3", style: { width: 40 } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: 72 } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '2 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: 44 } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: 92 } }) }), _jsx("div", { className: "min-w-0 px-4", style: { flex: '3 1 0%' }, children: _jsx(Skeleton, { className: "h-3", style: { width: 60 } }) })] }), _jsx(RowsSkeleton, {})] }));
     }
-    if (!isLoading && (!events || events.length === 0)) {
-        return (_jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: 'var(--ds-gray-700)' }, children: "No events found" }));
-    }
     return (_jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : undefined, children: _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)',
@@ -773,7 +849,9 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
                                         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: {
+                                    }, 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 step ID, wait ID, hook ID, or event ID\u2026", 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',
@@ -783,22 +861,38 @@ export function EventListView({ events, run, onLoadEventData, hasMoreEvents = fa
                                         outline: 'none',
                                         height: 40,
                                         width: '100%',
+                                        opacity: onExactIdSearch ? 1 : 0.5,
+                                        cursor: onExactIdSearch ? 'text' : 'not-allowed',
                                     } })] }), _jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && (_jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt }))] }), _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: "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" })] }), isRefetching ? (_jsx(RowsSkeleton, {})) : (_jsx(Virtuoso, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
-                        if (!hasMoreEvents || isLoadingMoreEvents) {
+                    }, 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" })] }), isRefetching || searchLoading ? (_jsx(RowsSkeleton, {})) : sortedEvents.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-sm", style: { color: 'var(--ds-gray-700)' }, children: 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' })) : (_jsx(Virtuoso, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+                        if (isExactSearchActive ||
+                            !hasMoreEvents ||
+                            isLoadingMoreEvents) {
                             return;
                         }
                         void onLoadMoreEvents?.();
                     }, itemContent: (index) => {
                         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, onEncryptedDataDetected: handleEncryptedDataDetected }));
+                        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, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive }));
                     }, style: { flex: 1, minHeight: 0 } })), _jsxs("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)',
-                    }, children: [_jsxs("span", { children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? 's' : '', " loaded"] }), hasMoreEvents && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsx("div", { className: "pointer-events-auto", children: _jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void onLoadMoreEvents?.() }) }) }))] })] }) }));
+                    }, children: [_jsx("span", { children: 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` }), !isExactSearchActive && hasMoreEvents && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsx("div", { className: "pointer-events-auto", children: _jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void onLoadMoreEvents?.() }) }) }))] })] }) }));
 }
 //# sourceMappingURL=event-list-view.js.map