@workflow/web-shared 4.1.0-beta.47 → 4.1.0-beta.49

package/src/components/ui/card.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/src/components/ui/error-card.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { AlertCircle, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+
+interface ErrorCardProps {
+  /** Title shown in the header */
+  title: string;
+  /** Error message or details to show when expanded */
+  details?: string;
+  /** Additional class names */
+  className?: string;
+}
+
+/**
+ * A collapsible error card that shows a title with an error icon,
+ * and expands to reveal details when clicked.
+ */
+export function ErrorCard({
+  title,
+  className,
+  details = 'Unknown error',
+}: ErrorCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="flex justify-center w-full">
+      <div
+        className={cn(
+          'rounded-lg border border-destructive/50 bg-destructive/5 w-full max-w-[800px]',
+          className
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="w-full px-4 py-3 flex items-center justify-between gap-2 text-left hover:bg-destructive/10 transition-colors"
+        >
+          <div className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-4 w-4 shrink-0" />
+            <span className="font-medium text-sm">{title}</span>
+          </div>
+          <div className="flex items-center gap-1.5 text-destructive/70">
+            <span className="text-xs">Click to show details</span>
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 transition-transform duration-200',
+                isExpanded && 'rotate-180'
+              )}
+            />
+          </div>
+        </button>
+
+        {isExpanded && details && (
+          <div className="px-4 pb-3 border-t border-destructive/20">
+            <pre className="mt-3 p-3 rounded-md bg-destructive/10 text-destructive text-xs font-mono whitespace-pre-wrap break-words overflow-auto">
+              {details}
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '../../lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

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

@@ -0,0 +1,306 @@
+'use client';
+
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import { ErrorBoundary } from './error-boundary';
+import {
+  EntityDetailPanel,
+  type SpanSelectionInfo,
+} from './sidebar/entity-detail-panel';
+import {
+  TraceViewerContextProvider,
+  TraceViewerTimeline,
+} from './trace-viewer';
+import type { Span } from './trace-viewer/types';
+import { Skeleton } from './ui/skeleton';
+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';
+
+const RE_RENDER_INTERVAL_MS = 2000;
+
+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 stepSpans = steps.map((step) => {
+    const stepEvents = groupedEvents.eventsByStepId.get(step.stepId) || [];
+    return stepToSpan(step, stepEvents, now);
+  });
+
+  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 };
+
+export const WorkflowTraceViewer = ({
+  run,
+  steps,
+  hooks,
+  events,
+  isLoading,
+  error,
+  spanDetailData,
+  spanDetailLoading,
+  spanDetailError,
+  onWakeUpSleep,
+  onResolveHook,
+  onStreamClick,
+  onSpanSelect,
+}: {
+  run: WorkflowRun;
+  steps: Step[];
+  hooks: Hook[];
+  events: Event[];
+  isLoading?: boolean;
+  error?: Error | null;
+  spanDetailData?: WorkflowRun | Step | Hook | Event | null;
+  spanDetailLoading?: boolean;
+  spanDetailError?: Error | null;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  /** Callback when a stream reference is clicked in the detail panel */
+  onStreamClick?: (streamId: string) => void;
+  /** Callback when a span is selected. */
+  onSpanSelect?: (info: SpanSelectionInfo) => void;
+}) => {
+  const [now, setNow] = useState(() => new Date());
+
+  useEffect(() => {
+    if (!run?.completedAt) {
+      const interval = setInterval(() => {
+        setNow(new Date());
+      }, RE_RENDER_INTERVAL_MS);
+      return () => clearInterval(interval);
+    }
+    return undefined;
+  }, [run?.completedAt]);
+
+  const trace = useMemo(() => {
+    if (!run) {
+      return undefined;
+    }
+    return buildTrace(run, steps, hooks, events, now);
+  }, [run, steps, hooks, events, now]);
+
+  useEffect(() => {
+    if (error && !isLoading) {
+      console.error(error);
+      toast.error('Error loading workflow trace data', {
+        description: error.message,
+      });
+    }
+  }, [error, isLoading]);
+
+  const DetailPanel = () => {
+    const handleSpanSelect = useCallback(
+      (info: SpanSelectionInfo) => {
+        onSpanSelect?.(info);
+      },
+      [onSpanSelect]
+    );
+
+    return (
+      <EntityDetailPanel
+        run={run}
+        onStreamClick={onStreamClick}
+        spanDetailData={spanDetailData ?? null}
+        spanDetailError={spanDetailError}
+        spanDetailLoading={spanDetailLoading}
+        onSpanSelect={handleSpanSelect}
+        onWakeUpSleep={onWakeUpSleep}
+        onResolveHook={onResolveHook}
+      />
+    );
+  };
+
+  if (isLoading || !trace) {
+    return (
+      <div className="relative w-full h-full">
+        <div className="border-b border-gray-alpha-400 w-full" />
+        <Skeleton className="w-full ml-2 mt-1 mb-1 h-[56px]" />
+        <div className="p-2 relative w-full">
+          <Skeleton className="w-full mt-6 h-[20px]" />
+          <Skeleton className="w-[10%] mt-2 ml-6 h-[20px]" />
+          <Skeleton className="w-[10%] mt-2 ml-12 h-[20px]" />
+          <Skeleton className="w-[20%] mt-2 ml-16 h-[20px]" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative w-full h-full">
+      <TraceViewerContextProvider
+        withPanel
+        customSpanClassNameFunc={getCustomSpanClassName}
+        customSpanEventClassNameFunc={getCustomSpanEventClassName}
+        customPanelComponent={
+          <ErrorBoundary title="Failed to load entity details">
+            <DetailPanel />
+          </ErrorBoundary>
+        }
+      >
+        <TraceViewerTimeline height="100%" trace={trace} withPanel />
+      </TraceViewerContextProvider>
+    </div>
+  );
+};

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

@@ -0,0 +1,94 @@
+/**
+ * Color utilities for workflow event markers
+ */
+
+import type { Event } from '@workflow/world';
+
+export interface EventColorPalette {
+  /** Color of the diamond/marker itself */
+  color: string;
+  /** Background color for hover info popup */
+  background: string;
+  /** Border color for hover info popup */
+  border: string;
+  /** Text color for event name in hover popup */
+  text: string;
+  /** Secondary text color for timestamp in hover popup */
+  secondary: string;
+}
+
+/**
+ * Get the color palette for an event based on its type
+ * - Red for failures (step_failed, run_failed)
+ * - Orange/yellow for retries (step_retrying)
+ * - Purple for webhook-related events
+ * - Blue otherwise (default)
+ */
+export function getEventColor(
+  eventType: Event['eventType']
+): EventColorPalette {
+  // Failures - Red
+  if (eventType === 'step_failed' || eventType === 'run_failed') {
+    return {
+      color: 'var(--ds-red-600)',
+      background: 'var(--ds-red-100)',
+      border: 'var(--ds-red-500)',
+      text: 'var(--ds-red-900)',
+      secondary: 'var(--ds-red-700)',
+    };
+  }
+
+  // Retries - Orange/Yellow
+  if (eventType === 'step_retrying') {
+    return {
+      color: 'var(--ds-amber-600)',
+      background: 'var(--ds-amber-100)',
+      border: 'var(--ds-amber-500)',
+      text: 'var(--ds-amber-900)',
+      secondary: 'var(--ds-amber-700)',
+    };
+  }
+
+  // Webhook-related - Purple
+  if (
+    eventType === 'hook_created' ||
+    eventType === 'hook_received' ||
+    eventType === 'hook_disposed'
+  ) {
+    return {
+      color: 'var(--ds-purple-600)',
+      background: 'var(--ds-purple-100)',
+      border: 'var(--ds-purple-500)',
+      text: 'var(--ds-purple-900)',
+      secondary: 'var(--ds-purple-700)',
+    };
+  }
+
+  // Default - Blue
+  return {
+    color: 'var(--ds-blue-600)',
+    background: 'var(--ds-blue-100)',
+    border: 'var(--ds-blue-500)',
+    text: 'var(--ds-blue-900)',
+    secondary: 'var(--ds-blue-700)',
+  };
+}
+
+/**
+ * Determine whether to show a vertical line for an event
+ * - Show vertical lines for hook-related events
+ * - Hide vertical lines for all other workflow events by default
+ */
+export function shouldShowVerticalLine(eventType: Event['eventType']): boolean {
+  // Show vertical lines for hook-related events
+  if (
+    eventType === 'hook_created' ||
+    eventType === 'hook_received' ||
+    eventType === 'hook_disposed'
+  ) {
+    return true;
+  }
+
+  // Hide vertical lines for all other workflow events
+  return false;
+}

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

@@ -0,0 +1,112 @@
+/**
+ * Color utilities for workflow traces
+ */
+
+import type { Step, WorkflowRun } from '@workflow/world';
+import styles from '../trace-viewer/trace-viewer.module.css';
+import type { SpanNode, SpanNodeEvent } from '../trace-viewer/types';
+
+/**
+ * Get the CSS class name for a workflow entity based on its status
+ */
+function getStatusClassName(
+  status: Step['status'] | WorkflowRun['status'],
+  isStripped = false
+): string {
+  if (isStripped && status === 'pending') {
+    return styles.spanPendingStriped;
+  }
+
+  switch (status) {
+    case 'running':
+      return styles.spanRunning;
+    case 'pending':
+      return styles.spanPending;
+    case 'completed':
+      return styles.spanCompleted;
+    case 'cancelled':
+      return styles.spanCancelled;
+    case 'failed':
+      return styles.spanFailed;
+    default:
+      return '';
+  }
+}
+
+/**
+ * Check if a step name indicates it's a sleep step
+ */
+function isSleepStep(stepName: string): boolean {
+  return String(stepName).toLowerCase().endsWith('sleep');
+}
+
+/**
+ * Get custom CSS class name for a span based on its attributes
+ * This is called dynamically by the trace viewer to style spans
+ */
+export const getCustomSpanClassName = (span: SpanNode): string => {
+  const attributes = span.span.attributes;
+  const resource = attributes?.resource;
+
+  if (resource === 'step') {
+    const stepData = attributes.data as Step;
+    const stepName = stepData?.stepName;
+
+    // DEPRECATED: Check if it's a sleep step
+    if (stepName && isSleepStep(stepName)) {
+      return styles.spanSleep;
+    }
+
+    // Regular step - use status colors
+    const isStripped = stepData?.status === 'pending';
+    return getStatusClassName(stepData?.status, isStripped);
+  }
+
+  if (resource === 'run') {
+    const runData = attributes.data as WorkflowRun;
+    return getStatusClassName(runData?.status, false);
+  }
+
+  if (resource === 'hook') {
+    return styles.spanHook;
+  }
+
+  if (resource === 'sleep') {
+    return styles.spanSleep;
+  }
+
+  // Default: no custom class
+  return '';
+};
+
+/**
+ * Get custom CSS class name for a span event based on its type
+ * This is called dynamically by the trace viewer to style event markers
+ */
+export const getCustomSpanEventClassName = (
+  spanEvent: SpanNodeEvent
+): string => {
+  const eventName = spanEvent.event.name;
+
+  // Failure events - Red
+  if (eventName === 'step_failed' || eventName === 'run_failed') {
+    return styles.eventFailed;
+  }
+
+  // Retry events - Orange/Yellow
+  if (eventName === 'step_retrying') {
+    return styles.eventRetrying;
+  }
+
+  // Webhook-related events - Purple
+  if (
+    eventName === 'hook_created' ||
+    eventName === 'hook_received' ||
+    eventName === 'hook_disposed'
+  ) {
+    return styles.eventHook;
+  }
+
+  // Default - Blue
+  return styles.eventDefault;
+};