@workflow/web-shared 4.1.0-beta.62 → 4.1.0-beta.64

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

@@ -35,14 +35,7 @@ import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
-import {
-  hookToSpan,
-  runToSpan,
-  stepToSpan,
-  WORKFLOW_LIBRARY,
-  waitToSpan,
-} from './workflow-traces/trace-span-construction';
-import { otelTimeToMs } from './workflow-traces/trace-time-utils';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -273,7 +266,6 @@ function SpanContextMenu({
 function TraceViewerWithContextMenu({
   trace,
   run,
-  hooks,
   isLive,
   onWakeUpSleep,
   onCancelRun,
@@ -285,7 +277,6 @@ function TraceViewerWithContextMenu({
 }: {
   trace: { spans: Span[] };
   run: WorkflowRun;
-  hooks: Hook[];
   isLive: boolean;
   onWakeUpSleep?: (
     runId: string,
@@ -307,7 +298,10 @@ function TraceViewerWithContextMenu({
   // Drive active span widths at 60fps without React re-renders
   useLiveTick(isLive);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  const [resolveHookTarget, setResolveHookTarget] = useState<Hook | null>(null);
+  const [resolveHookTarget, setResolveHookTarget] = useState<{
+    hookId: string;
+    token: string;
+  } | null>(null);
   const [resolvingHook, setResolvingHook] = useState(false);
   // Track hooks resolved in this session so the context menu item hides immediately
   const [resolvedHookIds, setResolvedHookIds] = useState<Set<string>>(
@@ -323,15 +317,6 @@ function TraceViewerWithContextMenu({
     return map;
   }, [trace.spans]);
 
-  // Build a lookup map: hookId -> Hook
-  const hookLookup = useMemo(() => {
-    const map = new Map<string, Hook>();
-    for (const hook of hooks) {
-      map.set(hook.hookId, hook);
-    }
-    return map;
-  }, [hooks]);
-
   const handleResolveHook = useCallback(
     async (payload: unknown) => {
       if (resolvingHook || !resolveHookTarget || !onResolveHook) return;
@@ -344,11 +329,7 @@ function TraceViewerWithContextMenu({
       }
       try {
         setResolvingHook(true);
-        await onResolveHook(
-          resolveHookTarget.token,
-          payload,
-          resolveHookTarget
-        );
+        await onResolveHook(resolveHookTarget.token, payload);
         toast.success('Hook resolved', {
           description: 'The payload has been sent and the hook resolved.',
         });
@@ -496,22 +477,24 @@ function TraceViewerWithContextMenu({
 
       // Hook-specific: Resolve Hook (only on active, unresolved hooks)
       if (menu.resourceType === 'hook' && isRunActive && onResolveHook) {
-        const hook = hookLookup.get(menu.spanId);
         const span = spanLookup.get(menu.spanId);
-        // Check data-level disposedAt, span events, AND local resolved state
         const hookData = span?.attributes?.data as
-          | { disposedAt?: unknown }
+          | { token?: string; disposedAt?: unknown }
           | undefined;
+        // Check data-level disposedAt, span events, AND local resolved state
         const isDisposed =
           Boolean(hookData?.disposedAt) ||
           Boolean(span?.events?.some((e) => e.name === 'hook_disposed')) ||
           resolvedHookIds.has(menu.spanId);
-        if (hook?.token && !isDisposed) {
+        if (hookData?.token && !isDisposed) {
           items.push({
             label: 'Resolve Hook',
             icon: <Send className="h-3.5 w-3.5" />,
             action: () => {
-              setResolveHookTarget(hook);
+              setResolveHookTarget({
+                hookId: menu.spanId,
+                token: hookData.token!,
+              });
             },
           });
         }
@@ -582,7 +565,6 @@ function TraceViewerWithContextMenu({
       onWakeUpSleep,
       onCancelRun,
       onResolveHook,
-      hookLookup,
       spanLookup,
       resolvedHookIds,
       run.runId,
@@ -610,159 +592,6 @@ function TraceViewerWithContextMenu({
   );
 }
 
-type GroupedEvents = {
-  eventsByStepId: Map<string, Event[]>;
-  eventsByHookId: Map<string, Event[]>;
-  runLevelEvents: Event[];
-  timerEvents: Map<string, Event[]>;
-  hookEvents: Map<string, Event[]>;
-};
-
-const isTimerEvent = (eventType: string) =>
-  eventType === 'wait_created' || eventType === 'wait_completed';
-
-const isHookLifecycleEvent = (eventType: string) =>
-  eventType === 'hook_received' ||
-  eventType === 'hook_created' ||
-  eventType === 'hook_disposed';
-
-const pushEvent = (
-  map: Map<string, Event[]>,
-  correlationId: string,
-  event: Event
-) => {
-  const existing = map.get(correlationId);
-  if (existing) {
-    existing.push(event);
-    return;
-  }
-  map.set(correlationId, [event]);
-};
-
-const groupEventsByCorrelation = (
-  events: Event[],
-  steps: Step[],
-  hooks: Hook[]
-): GroupedEvents => {
-  const eventsByStepId = new Map<string, Event[]>();
-  const eventsByHookId = new Map<string, Event[]>();
-  const runLevelEvents: Event[] = [];
-  const timerEvents = new Map<string, Event[]>();
-  const hookEvents = new Map<string, Event[]>();
-  const stepIds = new Set(steps.map((step) => step.stepId));
-  const hookIds = new Set(hooks.map((hook) => hook.hookId));
-
-  for (const event of events) {
-    const correlationId = event.correlationId;
-    if (!correlationId) {
-      runLevelEvents.push(event);
-      continue;
-    }
-
-    if (isTimerEvent(event.eventType)) {
-      pushEvent(timerEvents, correlationId, event);
-      continue;
-    }
-
-    if (isHookLifecycleEvent(event.eventType)) {
-      pushEvent(hookEvents, correlationId, event);
-      continue;
-    }
-
-    if (stepIds.has(correlationId)) {
-      pushEvent(eventsByStepId, correlationId, event);
-      continue;
-    }
-
-    if (hookIds.has(correlationId)) {
-      pushEvent(eventsByHookId, correlationId, event);
-      continue;
-    }
-
-    runLevelEvents.push(event);
-  }
-
-  return {
-    eventsByStepId,
-    eventsByHookId,
-    runLevelEvents,
-    timerEvents,
-    hookEvents,
-  };
-};
-
-const buildSpans = (
-  run: WorkflowRun,
-  steps: Step[],
-  groupedEvents: GroupedEvents,
-  now: Date
-) => {
-  const viewerEndTime = new Date(run.completedAt || now);
-  const stepSpans = steps.map((step) => {
-    const stepEvents = groupedEvents.eventsByStepId.get(step.stepId) || [];
-    return stepToSpan(step, stepEvents, now, viewerEndTime);
-  });
-
-  const hookSpans = Array.from(groupedEvents.hookEvents.values())
-    .map((events) => hookToSpan(events, run, now))
-    .filter((span): span is Span => span !== null);
-
-  const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, run, now))
-    .filter((span): span is Span => span !== null);
-
-  return {
-    runSpan: runToSpan(run, groupedEvents.runLevelEvents, now),
-    spans: [...stepSpans, ...hookSpans, ...waitSpans],
-  };
-};
-
-const cascadeSpans = (runSpan: Span, spans: Span[]) => {
-  const sortedSpans = [
-    runSpan,
-    ...spans.slice().sort((a, b) => {
-      const aStart = otelTimeToMs(a.startTime);
-      const bStart = otelTimeToMs(b.startTime);
-      return aStart - bStart;
-    }),
-  ];
-
-  return sortedSpans.map((span, index) => {
-    const parentSpanId =
-      index === 0 ? undefined : String(sortedSpans[index - 1].spanId);
-    return {
-      ...span,
-      parentSpanId,
-    };
-  });
-};
-
-const buildTrace = (
-  run: WorkflowRun,
-  steps: Step[],
-  hooks: Hook[],
-  events: Event[],
-  now: Date
-) => {
-  const groupedEvents = groupEventsByCorrelation(events, steps, hooks);
-  const { runSpan, spans } = buildSpans(run, steps, groupedEvents, now);
-  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
-
-  return {
-    traceId: run.runId,
-    rootSpanId: run.runId,
-    spans: sortedCascadingSpans,
-    resources: [
-      {
-        name: 'workflow',
-        attributes: {
-          'service.name': WORKFLOW_LIBRARY.name,
-        },
-      },
-    ],
-  };
-};
-
 /** Re-export SpanSelectionInfo for consumers */
 export type { SpanSelectionInfo };
 
@@ -870,14 +699,75 @@ function PanelResizeHandle({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Trace viewer footer — loading / waiting indicator
+// ---------------------------------------------------------------------------
+
+function TraceViewerFooter({
+  hasMore,
+  isLive,
+  isInitialLoading,
+}: {
+  hasMore: boolean;
+  isLive: boolean;
+  isInitialLoading: boolean;
+}): ReactNode {
+  const style = { color: 'var(--ds-gray-900)' };
+  if (hasMore || isInitialLoading) {
+    return (
+      <div
+        className="flex items-center justify-center gap-2 py-3 text-xs"
+        style={style}
+      >
+        <svg
+          className="h-3.5 w-3.5 animate-spin"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
+        </svg>
+        Loading more events…
+      </div>
+    );
+  }
+  if (isLive) {
+    return (
+      <div
+        className="flex items-center justify-center py-3 text-xs"
+        style={style}
+      >
+        Waiting for more events…
+      </div>
+    );
+  }
+  return (
+    <div
+      className="flex items-center justify-center py-3 text-xs"
+      style={style}
+    >
+      End of run
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
 
 export const WorkflowTraceViewer = ({
   run,
-  steps,
-  hooks,
   events,
   isLoading,
   error,
@@ -894,10 +784,9 @@ export const WorkflowTraceViewer = ({
   hasMoreSpans = false,
   isLoadingMoreSpans = false,
   encryptionKey,
+  onDecrypt,
 }: {
   run: WorkflowRun;
-  steps: Step[];
-  hooks: Hook[];
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
@@ -932,6 +821,8 @@ export const WorkflowTraceViewer = ({
   isLoadingMoreSpans?: boolean;
   /** Encryption key (available after Decrypt), threaded to event list for re-loading */
   encryptionKey?: Uint8Array;
+  /** Callback to initiate decryption of encrypted run data */
+  onDecrypt?: () => void;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -947,13 +838,14 @@ export const WorkflowTraceViewer = ({
 
   // Build trace only when actual data changes — no timer-driven rebuilds.
   // Active span widths are animated imperatively by useLiveTick at 60fps.
-  const trace = useMemo(() => {
-    if (!run) {
+  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+    if (!run?.runId) {
       return undefined;
     }
-    return buildTrace(run, steps, hooks, events, new Date());
+    return buildTrace(run, events, new Date());
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
-  }, [run, steps, hooks, events]);
+  }, [run, events]);
+  const trace = traceWithMeta;
 
   useEffect(() => {
     if (error && !isLoading) {
@@ -1064,7 +956,7 @@ export const WorkflowTraceViewer = ({
     );
   }, [selectedSpan?.data]);
 
-  if (isLoading || !trace) {
+  if (!trace) {
     return (
       <div className="relative w-full h-full">
         <div className="border-b border-gray-alpha-400 w-full" />
@@ -1093,7 +985,6 @@ export const WorkflowTraceViewer = ({
           <TraceViewerWithContextMenu
             trace={trace}
             run={run}
-            hooks={hooks}
             isLive={isLive}
             onWakeUpSleep={onWakeUpSleep}
             onCancelRun={onCancelRun}
@@ -1107,6 +998,15 @@ export const WorkflowTraceViewer = ({
               height="100%"
               isLive={isLive}
               trace={trace}
+              knownDurationMs={traceWithMeta?.knownDurationMs}
+              hasMoreData={hasMoreSpans || Boolean(isLoading)}
+              footer={
+                <TraceViewerFooter
+                  hasMore={hasMoreSpans}
+                  isLive={isLive}
+                  isInitialLoading={Boolean(isLoading)}
+                />
+              }
             />
           </TraceViewerWithContextMenu>
         </TraceViewerContextProvider>
@@ -1246,7 +1146,6 @@ export const WorkflowTraceViewer = ({
             <ErrorBoundary title="Failed to load entity details">
               <EntityDetailPanel
                 run={run}
-                hooks={hooks}
                 onStreamClick={onStreamClick}
                 spanDetailData={spanDetailData ?? null}
                 spanDetailError={spanDetailError}
@@ -1256,6 +1155,7 @@ export const WorkflowTraceViewer = ({
                 onLoadEventData={onLoadEventData}
                 onResolveHook={onResolveHook}
                 encryptionKey={encryptionKey}
+                onDecrypt={onDecrypt}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>

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

@@ -3,7 +3,7 @@
  */
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import type { Event, Step, WorkflowRun } from '@workflow/world';
+import type { Event, WorkflowRun } from '@workflow/world';
 import type { Span, SpanEvent } from '../trace-viewer/types';
 import { shouldShowVerticalLine } from './event-colors';
 import { calculateDuration, dateToOtelTime } from './trace-time-utils';
@@ -81,18 +81,13 @@ export const waitEventsToWaitEntity = (
 /**
  * Converts a workflow Wait to an OpenTelemetry Span
  */
-export function waitToSpan(
-  events: Event[],
-  run: WorkflowRun,
-  nowTime: Date
-): Span | null {
+export function waitToSpan(events: Event[], maxEndTime: Date): Span | null {
   const wait = waitEventsToWaitEntity(events);
   if (!wait) {
     return null;
   }
-  const viewerEndTime = new Date(run.completedAt || nowTime) ?? nowTime;
-  const startTime = wait?.createdAt ?? nowTime;
-  const endTime = wait?.completedAt ?? viewerEndTime;
+  const startTime = wait.createdAt;
+  const endTime = wait.completedAt ?? maxEndTime;
   const start = dateToOtelTime(startTime);
   const end = dateToOtelTime(endTime);
   const duration = calculateDuration(startTime, endTime);
@@ -117,29 +112,92 @@ export function waitToSpan(
   };
 }
 
+export const stepEventsToStepEntity = (
+  events: Event[]
+): {
+  stepId: string;
+  runId: string;
+  stepName: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+  attempt: number;
+  createdAt: Date;
+  updatedAt: Date;
+  startedAt?: Date;
+  completedAt?: Date;
+  specVersion?: number;
+} | null => {
+  const createdEvent = events.find(
+    (event) => event.eventType === 'step_created'
+  );
+  if (!createdEvent) {
+    return null;
+  }
+  // Walk events in order to derive status, attempt count, and timestamps.
+  // Handles both step_retrying and consecutive step_started as retry signals.
+  let status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' =
+    'pending';
+  let attempt = 0;
+  let startedAt: Date | undefined;
+  let completedAt: Date | undefined;
+
+  for (const e of events) {
+    switch (e.eventType) {
+      case 'step_started':
+        status = 'running';
+        attempt += 1;
+        if (!startedAt) startedAt = e.createdAt;
+        completedAt = undefined;
+        break;
+      case 'step_completed':
+        status = 'completed';
+        completedAt = e.createdAt;
+        break;
+      case 'step_failed':
+        status = 'failed';
+        completedAt = e.createdAt;
+        break;
+      case 'step_retrying':
+        status = 'pending';
+        completedAt = undefined;
+        break;
+    }
+  }
+
+  // Ensure at least attempt 1 if we never saw step_started
+  if (attempt === 0) attempt = 1;
+
+  const lastEvent = events[events.length - 1];
+  return {
+    stepId: createdEvent.correlationId,
+    runId: createdEvent.runId,
+    stepName: createdEvent.eventData?.stepName ?? '',
+    status,
+    attempt,
+    createdAt: createdEvent.createdAt,
+    updatedAt: lastEvent?.createdAt ?? createdEvent.createdAt,
+    startedAt,
+    completedAt,
+    specVersion: createdEvent.specVersion,
+  };
+};
+
 /**
- * Converts a workflow Step to an OpenTelemetry Span
+ * Converts step events to an OpenTelemetry Span
  */
-export function stepToSpan(
-  step: Step,
-  stepEvents: Event[],
-  nowTime?: Date,
-  maxEndTime?: Date
-): Span {
-  const now = nowTime ?? new Date();
+export function stepToSpan(stepEvents: Event[], maxEndTime: Date): Span | null {
+  const step = stepEventsToStepEntity(stepEvents);
+  if (!step) {
+    return null;
+  }
   const parsedName = parseStepName(String(step.stepName));
 
-  // Only embed identification fields — not the full object with
-  // input/output/error which may contain non-cloneable types.
-  // The detail panel fetches full data separately via spanDetailData.
-  const { input: _i, output: _o, error: _e, ...stepIdentity } = step;
   const attributes = {
     resource: 'step' as const,
-    data: stepIdentity,
+    data: step,
   };
 
   const resource = 'step';
-  const endTime = new Date(step.completedAt ?? maxEndTime ?? now);
+  const endTime = new Date(step.completedAt ?? maxEndTime);
 
   // Include ALL correlated events on the span so the sidebar detail view
   // can display them. The timeline uses the `showVerticalLine` flag to
@@ -187,6 +245,7 @@ export const hookEventsToHookEntity = (
 ): {
   hookId: string;
   runId: string;
+  token?: string;
   createdAt: Date;
   receivedCount: number;
   lastReceivedAt?: Date;
@@ -208,6 +267,7 @@ export const hookEventsToHookEntity = (
   return {
     hookId: createdEvent.correlationId,
     runId: createdEvent.runId,
+    token: createdEvent.eventData?.token,
     createdAt: createdEvent.createdAt,
     receivedCount: receivedEvents.length,
     lastReceivedAt: lastReceivedEvent?.createdAt || undefined,
@@ -218,11 +278,7 @@ export const hookEventsToHookEntity = (
 /**
  * Converts a workflow Hook to an OpenTelemetry Span
  */
-export function hookToSpan(
-  hookEvents: Event[],
-  run: WorkflowRun,
-  nowTime: Date
-): Span | null {
+export function hookToSpan(hookEvents: Event[], maxEndTime: Date): Span | null {
   const hook = hookEventsToHookEntity(hookEvents);
   if (!hook) {
     return null;
@@ -231,10 +287,7 @@ export function hookToSpan(
   // Convert hook-related events to span events
   const events = convertEventsToSpanEvents(hookEvents, false);
 
-  // We display hooks as a minimum span size of 10 seconds, just to ensure
-  // it's clickable even if there is no
-  const viewerEndTime = new Date(run.completedAt || nowTime) ?? nowTime;
-  const endTime = hook.disposedAt || viewerEndTime;
+  const endTime = hook.disposedAt || maxEndTime;
 
   return {
     spanId: String(hook.hookId),

package/src/index.ts

@@ -10,6 +10,7 @@ export type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 export * from './components';
 export {
   hookEventsToHookEntity,
+  stepEventsToStepEntity,
   waitEventsToWaitEntity,
 } from './components/workflow-traces/trace-span-construction';
 export type { EventAnalysis } from './lib/event-analysis';
@@ -20,6 +21,18 @@ export {
   isTerminalStatus,
   shouldShowReenqueueButton,
 } from './lib/event-analysis';
+export type {
+  MaterializedEntities,
+  MaterializedHook,
+  MaterializedStep,
+  MaterializedWait,
+} from './lib/event-materialization';
+export {
+  materializeAll,
+  materializeHooks,
+  materializeSteps,
+  materializeWaits,
+} from './lib/event-materialization';
 export type { Revivers, StreamRef } from './lib/hydration';
 export {
   CLASS_INSTANCE_REF_TYPE,