@workflow/web-shared 5.0.0-beta.29 → 5.0.0-beta.30

package/src/components/sidebar/events-list.tsx

@@ -1,12 +1,8 @@
 'use client';
 
-import type { Event } from '@workflow/world';
+import { type Event, getEventDataRefFields } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import {
-  getEventDataRefFields,
-  hasEncryptedFields,
-  isExpiredMarker,
-} from '../../lib/hydration';
+import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
 import {
   Collapsible,
   CollapsibleContent,
@@ -21,29 +17,6 @@ import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { AttrSetEventBlock } from './attributes-block';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 
-/**
- * Event types whose eventData contains an error field with a StructuredError.
- */
-const ERROR_EVENT_TYPES = new Set(['step_failed', 'step_retrying']);
-
-/**
- * Event types that carry user-serialized data in their eventData field.
- */
-const DATA_EVENT_TYPES = new Set([
-  'step_created',
-  'step_completed',
-  'step_failed',
-  'step_retrying',
-  'hook_created',
-  'hook_received',
-  'run_created',
-  'run_completed',
-  'run_failed',
-  'wait_created',
-  'wait_completed',
-  'attr_set',
-]);
-
 const parseDateValue = (value: unknown): Date | null => {
   if (value == null) return null;
 
@@ -76,10 +49,7 @@ function EventItem({
   showSeparateEventOccurrenceTimestamps = false,
 }: {
   event: Event;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   /** When this changes (e.g., Decrypt was clicked), invalidate cached data */
   encryptionKey?: Uint8Array;
   /** Show occurredAt separately instead of folding it into the Created timestamp. */
@@ -96,19 +66,20 @@ function EventItem({
   const existingData =
     'eventData' in event && event.eventData != null ? event.eventData : null;
   const mergedDisplay = loadedData ?? existingData;
-  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
+  const canHaveData =
+    existingData !== null || getEventDataRefFields(event.eventType).length > 0;
 
   const loadEventData = useCallback(
-    async (options?: { force?: boolean }) => {
-      if (!onLoadEventData || !event.correlationId || !event.eventId) return;
-      if (!options?.force && loadedDataRef.current !== null) {
+    async (force: boolean) => {
+      if (!onLoadEventData) return;
+      if (!force && loadedDataRef.current !== null) {
         return;
       }
 
       try {
         setIsLoading(true);
         setLoadError(null);
-        const data = await onLoadEventData(event.correlationId, event.eventId);
+        const data = await onLoadEventData(event);
         loadedDataRef.current = data;
         setLoadedData(data);
       } catch (err) {
@@ -117,13 +88,13 @@ function EventItem({
         setIsLoading(false);
       }
     },
-    [onLoadEventData, event.correlationId, event.eventId]
+    [onLoadEventData, event]
   );
 
-  const handleExpand = useCallback(async () => {
+  const handleExpand = useCallback(() => {
     if (isLoading) return;
     wasExpandedRef.current = true;
-    await loadEventData();
+    void loadEventData(false);
   }, [isLoading, loadEventData]);
 
   // When the encryption key changes and this event was previously expanded,
@@ -132,7 +103,7 @@ function EventItem({
     if (!encryptionKey || !wasExpandedRef.current) return;
     loadedDataRef.current = null;
     setLoadedData(null);
-    void loadEventData({ force: true });
+    void loadEventData(true);
   }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
@@ -289,11 +260,10 @@ function EventDataBlock({
     return <AttrSetEventBlock data={data} />;
   }
 
-  // For error events (step_failed, step_retrying), the eventData has the shape
-  // { error: StructuredError, stack?: string, ... }. Check both the top-level
-  // value and the nested `error` field for a stack trace.
+  // Error events carry a StructuredError in eventData.error. Check both the
+  // nested field and the top-level value for legacy payloads.
   if (
-    ERROR_EVENT_TYPES.has(eventType) &&
+    getEventDataRefFields(eventType).includes('error') &&
     data != null &&
     typeof data === 'object'
   ) {
@@ -328,10 +298,7 @@ export function EventsList({
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   onStreamClick?: (streamId: string) => void;
   onRunClick?: (runId: string) => void;
   /** When provided, signals that decryption is active (triggers re-load of expanded events) */

package/src/components/sidebar/sidebar-data-context.tsx

@@ -14,10 +14,7 @@ export interface SidebarDataContextValue {
     runId: string,
     correlationId: string
   ) => Promise<{ stoppedCount: number }>;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   onResolveHook?: (
     hookToken: string,
     payload: unknown,

package/src/components/workflow-trace-view.tsx

@@ -801,10 +801,7 @@ export const WorkflowTraceViewer = ({
   /** Callback when a run reference is clicked in the detail panel */
   onRunClick?: (runId: string) => void;
   /** Callback to load event data for a specific event (lazy loading in sidebar) */
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   /** Load next trace page when vertical scroll reaches bottom. */
   onLoadMoreSpans?: () => void | Promise<void>;
   /** Whether trace pagination has more data to load. */

package/src/components/workflow-traces/event-colors.ts

@@ -2,7 +2,7 @@
  * Color utilities for workflow event markers
  */
 
-import type { Event } from '@workflow/world';
+import { type Event, isHookLifecycleEventType } from '@workflow/world';
 
 export interface EventColorPalette {
   /** Color of the diamond/marker itself */
@@ -51,11 +51,7 @@ export function getEventColor(
   }
 
   // Webhook-related - Purple
-  if (
-    eventType === 'hook_created' ||
-    eventType === 'hook_received' ||
-    eventType === 'hook_disposed'
-  ) {
+  if (isHookLifecycleEventType(eventType)) {
     return {
       color: 'var(--ds-purple-600)',
       background: 'var(--ds-purple-100)',
@@ -93,11 +89,7 @@ export function getEventColor(
  */
 export function shouldShowVerticalLine(eventType: Event['eventType']): boolean {
   // Show vertical lines for hook-related events
-  if (
-    eventType === 'hook_created' ||
-    eventType === 'hook_received' ||
-    eventType === 'hook_disposed'
-  ) {
+  if (isHookLifecycleEventType(eventType)) {
     return true;
   }
 

package/src/components/workflow-traces/trace-colors.ts

@@ -2,7 +2,11 @@
  * Color utilities for workflow traces
  */
 
-import type { Step, WorkflowRun } from '@workflow/world';
+import {
+  isHookLifecycleEventType,
+  type Step,
+  type WorkflowRun,
+} from '@workflow/world';
 import styles from '../trace-viewer/trace-viewer.module.css';
 import type { SpanNode, SpanNodeEvent } from '../trace-viewer/types';
 
@@ -99,11 +103,7 @@ export const getCustomSpanEventClassName = (
   }
 
   // Webhook-related events - Purple
-  if (
-    eventName === 'hook_created' ||
-    eventName === 'hook_received' ||
-    eventName === 'hook_disposed'
-  ) {
+  if (isHookLifecycleEventType(eventName)) {
     return styles.eventHook;
   }
 

package/src/components/workflow-traces/trace-span-construction.ts

@@ -3,7 +3,11 @@
  */
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import type { Event, WorkflowRun } from '@workflow/world';
+import {
+  type Event,
+  isTerminalStepEventType,
+  type WorkflowRun,
+} from '@workflow/world';
 import type { Span, SpanEvent } from '../trace-viewer/types';
 import { shouldShowVerticalLine } from './event-colors';
 import { calculateDuration, dateToOtelTime } from './trace-time-utils';
@@ -269,11 +273,7 @@ export function stepToSpan(stepEvents: Event[], maxEndTime: Date): Span | null {
     const completedEvent = stepEvents
       .slice()
       .reverse()
-      .find(
-        (event) =>
-          event.eventType === 'step_completed' ||
-          event.eventType === 'step_failed'
-      );
+      .find((event) => isTerminalStepEventType(event.eventType));
     endTime = getEventTimestamp(completedEvent) ?? new Date(step.completedAt);
   }
 

package/src/lib/event-analysis.ts

@@ -3,7 +3,11 @@
  * Used by run-actions and trace viewer components.
  */
 
-import type { Event, WorkflowRunStatus } from '@workflow/world';
+import {
+  type Event,
+  isTerminalWorkflowRunStatus,
+  type WorkflowRunStatus,
+} from '@workflow/world';
 
 // Time thresholds for Re-enqueue button visibility
 const STEP_ACTIVITY_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes
@@ -140,9 +144,7 @@ export function analyzeEvents(events: Event[] | undefined): EventAnalysis {
 export function isTerminalStatus(
   status: WorkflowRunStatus | undefined
 ): boolean {
-  return (
-    status === 'completed' || status === 'failed' || status === 'cancelled'
-  );
+  return status ? isTerminalWorkflowRunStatus(status) : false;
 }
 
 /**

package/src/lib/event-materialization.ts

@@ -10,7 +10,13 @@
  * of making separate API calls for each entity type.
  */
 
-import type { Event, StepStatus } from '@workflow/world';
+import {
+  type Event,
+  isHookLifecycleEventType,
+  isStepEventType,
+  isWaitEventType,
+  type StepStatus,
+} from '@workflow/world';
 
 // ---------------------------------------------------------------------------
 // Materialized entity types
@@ -60,18 +66,18 @@ export interface MaterializedEntities {
 }
 
 // ---------------------------------------------------------------------------
-// Helper: group events by correlationId prefix
+// Helper: group events by correlationId
 // ---------------------------------------------------------------------------
 
 function groupByCorrelationId(
   events: Event[],
-  prefixes: string[]
+  matchesEventType: (eventType: string) => boolean
 ): Map<string, Event[]> {
   const groups = new Map<string, Event[]>();
   for (const event of events) {
     const cid = event.correlationId;
     if (!cid) continue;
-    if (!prefixes.some((p) => cid.startsWith(p))) continue;
+    if (!matchesEventType(event.eventType)) continue;
     const existing = groups.get(cid);
     if (existing) {
       existing.push(event);
@@ -101,7 +107,7 @@ function getEventTimestamp(event: Event | undefined): Date | undefined {
  * step_created event with no completion yet.
  */
 export function materializeSteps(events: Event[]): MaterializedStep[] {
-  const groups = groupByCorrelationId(events, ['step_']);
+  const groups = groupByCorrelationId(events, isStepEventType);
   const steps: MaterializedStep[] = [];
 
   for (const [correlationId, stepEvents] of groups) {
@@ -169,7 +175,7 @@ export function materializeSteps(events: Event[]): MaterializedStep[] {
  * Group hook_* events by correlationId and build Hook-like entities.
  */
 export function materializeHooks(events: Event[]): MaterializedHook[] {
-  const groups = groupByCorrelationId(events, ['hook_']);
+  const groups = groupByCorrelationId(events, isHookLifecycleEventType);
   const hooks: MaterializedHook[] = [];
 
   for (const [correlationId, hookEvents] of groups) {
@@ -208,7 +214,7 @@ export function materializeHooks(events: Event[]): MaterializedHook[] {
  * Group wait_* events by correlationId and build Wait-like entities.
  */
 export function materializeWaits(events: Event[]): MaterializedWait[] {
-  const groups = groupByCorrelationId(events, ['wait_']);
+  const groups = groupByCorrelationId(events, isWaitEventType);
   const waits: MaterializedWait[] = [];
 
   for (const [correlationId, waitEvents] of groups) {

package/src/lib/hydration.ts

@@ -16,21 +16,7 @@ import {
   type Revivers,
   serializedInstanceToRef,
 } from '@workflow/core/serialization-format';
-import { EVENT_DATA_REF_FIELDS } from '@workflow/world';
-
-const V4_EXTRA_EVENT_DATA_REF_FIELDS: Record<string, string[]> = {
-  run_started: ['input'],
-  step_started: ['input'],
-};
-
-export function getEventDataRefFields(eventType: string): string[] {
-  return [
-    ...new Set([
-      ...(EVENT_DATA_REF_FIELDS[eventType] ?? []),
-      ...(V4_EXTRA_EVENT_DATA_REF_FIELDS[eventType] ?? []),
-    ]),
-  ];
-}
+import { getEventDataRefFields } from '@workflow/world';
 
 // Re-export types and utilities that consumers need
 export {

package/src/lib/trace-builder.ts

@@ -6,7 +6,13 @@
  * a fully-formed Trace ready for the trace viewer.
  */
 
-import type { Event, WorkflowRun } from '@workflow/world';
+import {
+  type Event,
+  isHookLifecycleEventType,
+  isStepEventType,
+  isWaitEventType,
+  type WorkflowRun,
+} from '@workflow/world';
 import type { Span } from '../components/trace-viewer/types';
 import {
   getEventTimestamp,
@@ -18,20 +24,6 @@ import {
 } from '../components/workflow-traces/trace-span-construction';
 import { otelTimeToMs } from '../components/workflow-traces/trace-time-utils';
 
-// ---------------------------------------------------------------------------
-// Event type classifiers
-// ---------------------------------------------------------------------------
-
-export const isStepEvent = (eventType: string) => eventType.startsWith('step_');
-
-export const isTimerEvent = (eventType: string) =>
-  eventType === 'wait_created' || eventType === 'wait_completed';
-
-export const isHookLifecycleEvent = (eventType: string) =>
-  eventType === 'hook_received' ||
-  eventType === 'hook_created' ||
-  eventType === 'hook_disposed';
-
 /**
  * Events that belong to the run root span rather than a child entity span.
  * Mirrors the fallthrough logic in {@link groupEventsByCorrelation}: events
@@ -41,9 +33,9 @@ export const isHookLifecycleEvent = (eventType: string) =>
  */
 export const isRunLevelEvent = (event: Event): boolean =>
   !event.correlationId ||
-  (!isTimerEvent(event.eventType) &&
-    !isHookLifecycleEvent(event.eventType) &&
-    !isStepEvent(event.eventType));
+  (!isWaitEventType(event.eventType) &&
+    !isHookLifecycleEventType(event.eventType) &&
+    !isStepEventType(event.eventType));
 
 /**
  * Filter the raw event list down to the events for a selected span.
@@ -100,17 +92,17 @@ export function groupEventsByCorrelation(events: Event[]): GroupedEvents {
       continue;
     }
 
-    if (isTimerEvent(event.eventType)) {
+    if (isWaitEventType(event.eventType)) {
       pushEvent(timerEvents, correlationId, event);
       continue;
     }
 
-    if (isHookLifecycleEvent(event.eventType)) {
+    if (isHookLifecycleEventType(event.eventType)) {
       pushEvent(hookEvents, correlationId, event);
       continue;
     }
 
-    if (isStepEvent(event.eventType)) {
+    if (isStepEventType(event.eventType)) {
       pushEvent(eventsByStepId, correlationId, event);
       continue;
     }