@workflow/web-shared 4.1.6 → 4.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "private": false,
   "files": [
     "dist",
@@ -52,9 +52,9 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "4.2.5",
+    "@workflow/core": "4.3.0",
     "@workflow/utils": "4.1.2",
-    "@workflow/world": "4.1.2"
+    "@workflow/world": "4.1.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",

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

@@ -3,12 +3,23 @@
 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 { useToast } from '../lib/toast';
 import { DataInspector, DecryptClickContext } from './ui/data-inspector';
 import {
   ErrorStackBlock,
@@ -721,6 +732,12 @@ 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>;
 }
 
 function EventRow({
@@ -743,6 +760,7 @@ function EventRow({
   onCacheEventData,
   encryptionKey,
   onEncryptedDataDetected,
+  suppressGroupDimming = false,
 }: {
   event: Event;
   index: number;
@@ -763,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>(
@@ -804,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
@@ -1155,7 +1175,9 @@ export function EventListView({
   onDecrypt,
   isDecrypting = false,
   hasEncryptedData: hasEncryptedDataProp = false,
+  onExactIdSearch,
 }: EventsListProps) {
+  const toast = useToast();
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
     'asc'
   );
@@ -1171,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).
@@ -1203,8 +1242,12 @@ export function EventListView({
     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(
@@ -1294,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;
+      }
+
+      const trimmed = searchQuery.trim();
+      if (
+        !trimmed ||
+        parseExactWorkflowSearchId(trimmed) ||
+        !onExactIdSearch ||
+        !looksLikeWorkflowIdSearchInput(trimmed)
+      ) {
+        return;
       }
-    }
-    if (bestMatch) {
-      setSelectedGroupKey(bestMatch.groupKey);
-      virtuosoRef.current?.scrollToIndex({
-        index: bestMatch.index,
-        align: 'center',
-        behavior: 'smooth',
-      });
-    }
-  }, [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);
@@ -1401,17 +1515,6 @@ 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 (
     <DecryptClickContext.Provider
       value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
@@ -1476,9 +1579,16 @@ export function EventListView({
             </div>
             <input
               type="search"
-              placeholder="Search by name, event type, or ID…"
+              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,
@@ -1489,6 +1599,8 @@ export function EventListView({
                 outline: 'none',
                 height: 40,
                 width: '100%',
+                opacity: onExactIdSearch ? 1 : 0.5,
+                cursor: onExactIdSearch ? 'text' : 'not-allowed',
               }}
             />
           </label>
@@ -1535,8 +1647,21 @@ export function EventListView({
         </div>
 
         {/* Virtualized event rows or refetching skeleton */}
-        {isRefetching ? (
+        {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}
@@ -1544,7 +1669,11 @@ export function EventListView({
             overscan={20}
             defaultItemHeight={40}
             endReached={() => {
-              if (!hasMoreEvents || isLoadingMoreEvents) {
+              if (
+                isExactSearchActive ||
+                !hasMoreEvents ||
+                isLoadingMoreEvents
+              ) {
                 return;
               }
               void onLoadMoreEvents?.();
@@ -1574,6 +1703,7 @@ export function EventListView({
                   onCacheEventData={cacheEventData}
                   encryptionKey={encryptionKey}
                   onEncryptedDataDetected={handleEncryptedDataDetected}
+                  suppressGroupDimming={isExactSearchActive}
                 />
               );
             }}
@@ -1591,10 +1721,15 @@ export function EventListView({
           }}
         >
           <span>
-            {sortedEvents.length} event
-            {sortedEvents.length !== 1 ? 's' : ''} loaded
+            {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>
-          {hasMoreEvents && (
+          {!isExactSearchActive && hasMoreEvents && (
             <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
               <div className="pointer-events-auto">
                 <LoadMoreButton

package/src/index.ts

@@ -14,6 +14,13 @@ export {
   waitEventsToWaitEntity,
 } from './components/workflow-traces/trace-span-construction';
 export type { EventAnalysis } from './lib/event-analysis';
+export {
+  parseExactWorkflowSearchId,
+  looksLikeWorkflowIdSearchInput,
+  type ExactWorkflowSearchId,
+  type ExactWorkflowSearchIdKind,
+  type ExactIdSearchResult,
+} from './lib/exact-event-search-id';
 export {
   analyzeEvents,
   hasPendingHooksFromEvents,

package/src/lib/exact-event-search-id.ts

@@ -0,0 +1,67 @@
+import type { Event } from '@workflow/world';
+
+const WORKFLOW_ULID_BODY = '[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}';
+
+const STEP_ID_PATTERN = new RegExp(`^step_(${WORKFLOW_ULID_BODY})$`, 'i');
+const WAIT_ID_PATTERN = new RegExp(`^wait_(${WORKFLOW_ULID_BODY})$`, 'i');
+const HOOK_ID_PATTERN = new RegExp(`^hook_(${WORKFLOW_ULID_BODY})$`, 'i');
+const EVENT_ID_PATTERN = new RegExp(`^evnt_(${WORKFLOW_ULID_BODY})$`, 'i');
+
+const WORKFLOW_ID_PREFIX_PATTERN = /^(step_|wait_|hook_|evnt_|wrun_)/i;
+
+export type ExactWorkflowSearchIdKind = 'step' | 'wait' | 'hook' | 'event';
+
+export type ExactWorkflowSearchId = {
+  kind: ExactWorkflowSearchIdKind;
+  id: string;
+};
+
+export type ExactIdSearchResult =
+  | { status: 'ok'; events: Event[]; truncated?: boolean }
+  | { status: 'not_found' }
+  | { status: 'error'; message: string };
+
+function matchPrefixedId(
+  pattern: RegExp,
+  prefix: 'step' | 'wait' | 'hook' | 'evnt',
+  kind: ExactWorkflowSearchIdKind,
+  query: string
+): ExactWorkflowSearchId | null {
+  const match = query.match(pattern);
+  if (!match) {
+    return null;
+  }
+  return { kind, id: `${prefix}_${match[1].toUpperCase()}` };
+}
+
+/**
+ * Returns a parsed workflow ID when `query` is a full step, wait, hook, or event ID.
+ * Partial IDs and run IDs (`wrun_`) are ignored. ULID bodies are matched case-insensitively
+ * and normalized to uppercase in the returned ID.
+ */
+export function parseExactWorkflowSearchId(
+  query: string
+): ExactWorkflowSearchId | null {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  return (
+    matchPrefixedId(STEP_ID_PATTERN, 'step', 'step', trimmed) ??
+    matchPrefixedId(WAIT_ID_PATTERN, 'wait', 'wait', trimmed) ??
+    matchPrefixedId(HOOK_ID_PATTERN, 'hook', 'hook', trimmed) ??
+    matchPrefixedId(EVENT_ID_PATTERN, 'evnt', 'event', trimmed)
+  );
+}
+
+/** True when input looks like the user is attempting an ID search (including partial). */
+export function looksLikeWorkflowIdSearchInput(query: string): boolean {
+  const trimmed = query.trim();
+  if (!WORKFLOW_ID_PREFIX_PATTERN.test(trimmed)) {
+    return false;
+  }
+  // Distinguish IDs (contain digits) from event-type strings like step_started.
+  // Assumes workflow event types do not include digits in their names.
+  return /\d/.test(trimmed);
+}