@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

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

@@ -1,1171 +0,0 @@
-'use client';
-
-import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
-import {
-  ChevronDown,
-  ChevronUp,
-  Clock,
-  Copy,
-  Info,
-  Send,
-  Type,
-  X,
-  XCircle,
-} from 'lucide-react';
-import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useToast } from '../lib/toast';
-import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
-import { ErrorBoundary } from './error-boundary';
-import {
-  EntityDetailPanel,
-  type SelectedSpanInfo,
-  type SpanSelectionInfo,
-} from './sidebar/entity-detail-panel';
-import { ResolveHookModal } from './sidebar/resolve-hook-modal';
-import {
-  TraceViewerContextProvider,
-  TraceViewerTimeline,
-  useTraceViewer,
-} from './trace-viewer';
-import type { Span } from './trace-viewer/types';
-import { Skeleton } from './ui/skeleton';
-import { Spinner } from './ui/spinner';
-import {
-  getCustomSpanClassName,
-  getCustomSpanEventClassName,
-} from './workflow-traces/trace-colors';
-
-/**
- * While a run is live, continuously grow root.duration and rescale so the
- * trace always fits within the viewport. Individual span widths are grown
- * by each SpanComponent's own useEffect (see node.tsx).
- */
-function useLiveTick(isLive: boolean): void {
-  const { state, dispatch } = useTraceViewer();
-  const stateRef = useRef(state);
-  stateRef.current = state;
-
-  useEffect(() => {
-    if (!isLive) return;
-
-    // Grow root.duration on every frame so span rAFs see the latest time
-    let rafId = 0;
-    const tick = (): void => {
-      const { root } = stateRef.current;
-      if (root.startTime) {
-        const nowMs = Date.now();
-        if (nowMs > root.endTime) {
-          root.endTime = nowMs;
-          root.duration = root.endTime - root.startTime;
-        }
-      }
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-
-    // Re-scale smoothly so the trace fits the viewport as it grows.
-    // We dispatch detectBaseScale only when the computed baseScale has
-    // changed enough to matter visually (>0.1% shift), avoiding
-    // unnecessary React re-renders while keeping things smooth.
-    let scaleRafId = 0;
-    let lastBaseScale = 0;
-    const scaleTick = (): void => {
-      const s = stateRef.current;
-      if (s.root.duration > 0) {
-        const newBaseScale = (s.width - s.scrollbarWidth) / s.root.duration;
-        const delta = Math.abs(newBaseScale - lastBaseScale);
-        if (delta > lastBaseScale * 0.001 || lastBaseScale === 0) {
-          lastBaseScale = newBaseScale;
-          dispatch({ type: 'detectBaseScale' });
-        }
-      }
-      scaleRafId = requestAnimationFrame(scaleTick);
-    };
-    scaleRafId = requestAnimationFrame(scaleTick);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-      cancelAnimationFrame(scaleRafId);
-    };
-  }, [isLive, dispatch]);
-}
-
-const DEFAULT_PANEL_WIDTH = 450;
-const MIN_PANEL_WIDTH = 240;
-
-// ──────────────────────────────────────────────────────────────────────────
-// Right-click context menu for spans
-// ──────────────────────────────────────────────────────────────────────────
-
-type ResourceType = 'sleep' | 'step' | 'hook' | 'run' | 'unknown';
-
-interface ContextMenuState {
-  x: number;
-  y: number;
-  spanId: string;
-  spanName: string;
-  resourceType: ResourceType;
-  /** Whether the span represents an active/pending resource (not yet completed) */
-  isActive: boolean;
-}
-
-interface ContextMenuItem {
-  label: string;
-  icon?: ReactNode;
-  action: () => void;
-  destructive?: boolean;
-  disabled?: boolean;
-}
-
-function SpanContextMenu({
-  menu,
-  items,
-  onClose,
-}: {
-  menu: ContextMenuState;
-  items: ContextMenuItem[];
-  onClose: () => void;
-}): ReactNode {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    const handleClick = (e: MouseEvent): void => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    const handleKeyDown = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    const handleScroll = (): void => {
-      onClose();
-    };
-    // Use a timeout so we don't close immediately from the same event
-    const timeout = setTimeout(() => {
-      window.addEventListener('mousedown', handleClick);
-      window.addEventListener('keydown', handleKeyDown);
-      window.addEventListener('scroll', handleScroll, true);
-    }, 0);
-    return () => {
-      clearTimeout(timeout);
-      window.removeEventListener('mousedown', handleClick);
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, [onClose]);
-
-  // Adjust position if menu would overflow viewport
-  const [adjustedPos, setAdjustedPos] = useState({ x: menu.x, y: menu.y });
-  useEffect(() => {
-    const el = menuRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    let { x, y } = menu;
-    if (rect.right > window.innerWidth) {
-      x = window.innerWidth - rect.width - 8;
-    }
-    if (rect.bottom > window.innerHeight) {
-      y = window.innerHeight - rect.height - 8;
-    }
-    if (x !== menu.x || y !== menu.y) {
-      setAdjustedPos({ x, y });
-    }
-  }, [menu]);
-
-  if (items.length === 0) return null;
-
-  return createPortal(
-    <div
-      ref={menuRef}
-      style={{
-        position: 'fixed',
-        left: adjustedPos.x,
-        top: adjustedPos.y,
-        zIndex: 99999,
-        boxShadow: 'var(--ds-shadow-menu)',
-        borderRadius: 12,
-        background: 'var(--ds-background-100)',
-        padding: 'var(--geist-space-gap-quarter, 4px)',
-        fontSize: 14,
-        minWidth: 180,
-        overflowX: 'hidden',
-        overflowY: 'auto',
-      }}
-    >
-      <div
-        style={{
-          display: 'block',
-          color: 'var(--ds-gray-900)',
-          fontSize: '0.75rem',
-          padding: 'var(--geist-gap-quarter, 4px) var(--geist-space-2x, 8px)',
-          fontWeight: 500,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          maxWidth: 240,
-          borderBottom: '1px solid var(--ds-gray-alpha-400)',
-          marginBottom: 4,
-        }}
-      >
-        {menu.spanName}
-      </div>
-      {items.map((item) => (
-        <button
-          key={item.label}
-          type="button"
-          style={{
-            outline: 'none',
-            cursor: item.disabled ? 'not-allowed' : 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            padding: '0 var(--geist-space-2x, 8px)',
-            height: 40,
-            textDecoration: 'none',
-            borderRadius: 6,
-            color: item.destructive
-              ? 'var(--ds-red-900)'
-              : 'var(--ds-gray-1000)',
-            width: '100%',
-            background: 'transparent',
-            border: 'none',
-            fontSize: 14,
-            textAlign: 'left',
-            opacity: item.disabled ? 0.4 : 1,
-            transition: 'background 0.15s',
-          }}
-          disabled={item.disabled}
-          onMouseEnter={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              'var(--ds-gray-alpha-100)';
-          }}
-          onMouseLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background =
-              'transparent';
-          }}
-          onClick={() => {
-            item.action();
-            onClose();
-          }}
-        >
-          {item.icon ?? null}
-          {item.label}
-        </button>
-      ))}
-    </div>,
-    document.body
-  );
-}
-
-/** Inner wrapper that has access to the TraceViewer context */
-function TraceViewerWithContextMenu({
-  trace,
-  run,
-  isLive,
-  onWakeUpSleep,
-  onCancelRun,
-  onResolveHook,
-  onLoadMoreSpans,
-  hasMoreSpans = false,
-  isLoadingMoreSpans = false,
-  children,
-}: {
-  trace: { spans: Span[] };
-  run: WorkflowRun;
-  isLive: boolean;
-  onWakeUpSleep?: (
-    runId: string,
-    correlationId: string
-  ) => Promise<{ stoppedCount: number }>;
-  onCancelRun?: (runId: string) => Promise<void>;
-  onResolveHook?: (
-    hookToken: string,
-    payload: unknown,
-    hook?: Hook
-  ) => Promise<void>;
-  onLoadMoreSpans?: () => void | Promise<void>;
-  hasMoreSpans?: boolean;
-  isLoadingMoreSpans?: boolean;
-  children: ReactNode;
-}): ReactNode {
-  const toast = useToast();
-  const { state, dispatch } = useTraceViewer();
-
-  // Drive active span widths at 60fps without React re-renders
-  useLiveTick(isLive);
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | 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>>(
-    new Set()
-  );
-
-  // Build a lookup map: spanId -> span
-  const spanLookup = useMemo(() => {
-    const map = new Map<string, Span>();
-    for (const span of trace.spans) {
-      map.set(span.spanId, span);
-    }
-    return map;
-  }, [trace.spans]);
-
-  const handleResolveHook = useCallback(
-    async (payload: unknown) => {
-      if (resolvingHook || !resolveHookTarget || !onResolveHook) return;
-      if (!resolveHookTarget.token) {
-        toast.error('Unable to resolve hook', {
-          description:
-            'Missing hook token. Try refreshing the run data and retry.',
-        });
-        return;
-      }
-      try {
-        setResolvingHook(true);
-        await onResolveHook(resolveHookTarget.token, payload);
-        toast.success('Hook resolved', {
-          description: 'The payload has been sent and the hook resolved.',
-        });
-        // Mark this hook as resolved locally so the menu item hides immediately
-        setResolvedHookIds((prev) =>
-          new Set(prev).add(resolveHookTarget.hookId)
-        );
-        setResolveHookTarget(null);
-      } catch (err) {
-        console.error('Failed to resolve hook:', err);
-        toast.error('Failed to resolve hook', {
-          description:
-            err instanceof Error ? err.message : 'An unknown error occurred',
-        });
-      } finally {
-        setResolvingHook(false);
-      }
-    },
-    [onResolveHook, resolveHookTarget, resolvingHook]
-  );
-
-  const handleContextMenu = useCallback(
-    (e: ReactMouseEvent | MouseEvent): void => {
-      const target = e.target as HTMLElement;
-      const $button = target.closest<HTMLButtonElement>('[data-span-id]');
-      if (!$button) return;
-
-      const spanId = $button.dataset.spanId;
-      if (!spanId) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      const span = spanLookup.get(spanId);
-      if (!span) return;
-
-      const resourceType =
-        (span.attributes.resource as ResourceType) ?? 'unknown';
-      const spanData = span.attributes.data as
-        | Record<string, unknown>
-        | undefined;
-      const isActive = !spanData?.completedAt && !spanData?.disposedAt;
-
-      setContextMenu({
-        x: e.clientX,
-        y: e.clientY,
-        spanId,
-        spanName: span.name,
-        resourceType,
-        isActive,
-      });
-    },
-    [spanLookup]
-  );
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const $container = containerRef.current;
-    if (!$container) return;
-
-    const onContextMenu = (event: MouseEvent): void => {
-      handleContextMenu(event);
-    };
-    $container.addEventListener('contextmenu', onContextMenu);
-
-    return () => {
-      $container.removeEventListener('contextmenu', onContextMenu);
-    };
-  }, [handleContextMenu]);
-
-  const loadingMoreRef = useRef(false);
-  useEffect(() => {
-    const timeline = state.timelineRef.current;
-    if (!timeline || !onLoadMoreSpans || !hasMoreSpans) {
-      return;
-    }
-
-    const thresholdPx = 200;
-    const maybeLoadMore = () => {
-      if (loadingMoreRef.current || isLoadingMoreSpans || !hasMoreSpans) {
-        return;
-      }
-      const remaining =
-        timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight;
-      if (remaining > thresholdPx) {
-        return;
-      }
-
-      loadingMoreRef.current = true;
-      Promise.resolve(onLoadMoreSpans()).finally(() => {
-        loadingMoreRef.current = false;
-      });
-    };
-
-    timeline.addEventListener('scroll', maybeLoadMore);
-    maybeLoadMore();
-    return () => {
-      timeline.removeEventListener('scroll', maybeLoadMore);
-    };
-  }, [state.timelineRef, onLoadMoreSpans, hasMoreSpans, isLoadingMoreSpans]);
-
-  const closeMenu = useCallback(() => {
-    setContextMenu(null);
-  }, []);
-
-  const getMenuItems = useCallback(
-    (menu: ContextMenuState): ContextMenuItem[] => {
-      const items: ContextMenuItem[] = [];
-
-      // Sleep-specific: Wake Up (only on active runs)
-      const isRunActive = !run.completedAt;
-      if (
-        menu.resourceType === 'sleep' &&
-        menu.isActive &&
-        isRunActive &&
-        onWakeUpSleep
-      ) {
-        items.push({
-          label: 'Wake Up Sleep',
-          icon: <Clock className="h-3.5 w-3.5" />,
-          action: () => {
-            onWakeUpSleep(run.runId, menu.spanId)
-              .then((result) => {
-                if (result.stoppedCount > 0) {
-                  toast.success('Sleep woken up', {
-                    description: `Woke up ${String(result.stoppedCount)} sleep${result.stoppedCount > 1 ? 's' : ''}`,
-                  });
-                } else {
-                  toast.info('No active sleeps found', {
-                    description: 'The sleep may have already completed.',
-                  });
-                }
-              })
-              .catch((err: unknown) => {
-                toast.error('Failed to wake up sleep', {
-                  description:
-                    err instanceof Error
-                      ? err.message
-                      : 'An unknown error occurred',
-                });
-              });
-          },
-        });
-      }
-
-      // Hook-specific: Resolve Hook (only on active, unresolved hooks)
-      if (menu.resourceType === 'hook' && isRunActive && onResolveHook) {
-        const span = spanLookup.get(menu.spanId);
-        const hookData = span?.attributes?.data as
-          | { 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 (hookData?.token && !isDisposed) {
-          items.push({
-            label: 'Resolve Hook',
-            icon: <Send className="h-3.5 w-3.5" />,
-            action: () => {
-              setResolveHookTarget({
-                hookId: menu.spanId,
-                token: hookData.token!,
-              });
-            },
-          });
-        }
-      }
-
-      // Run-specific: Cancel (only on active runs)
-      if (menu.resourceType === 'run' && isRunActive && onCancelRun) {
-        items.push({
-          label: 'Cancel Run',
-          icon: <XCircle className="h-3.5 w-3.5" />,
-          destructive: true,
-          action: () => {
-            onCancelRun(run.runId).catch((err: unknown) => {
-              toast.error('Failed to cancel run', {
-                description:
-                  err instanceof Error
-                    ? err.message
-                    : 'An unknown error occurred',
-              });
-            });
-          },
-        });
-      }
-
-      // Common actions
-      items.push({
-        label: 'View Details',
-        icon: <Info className="h-3.5 w-3.5" />,
-        action: () => {
-          dispatch({ type: 'select', id: menu.spanId });
-        },
-      });
-
-      items.push({
-        label: 'Copy Name',
-        icon: <Type className="h-3.5 w-3.5" />,
-        action: () => {
-          navigator.clipboard
-            .writeText(menu.spanName)
-            .then(() => {
-              toast.success('Name copied to clipboard');
-            })
-            .catch(() => {
-              toast.error('Failed to copy name');
-            });
-        },
-      });
-
-      items.push({
-        label: 'Copy ID',
-        icon: <Copy className="h-3.5 w-3.5" />,
-        action: () => {
-          navigator.clipboard
-            .writeText(menu.spanId)
-            .then(() => {
-              toast.success('ID copied to clipboard');
-            })
-            .catch(() => {
-              toast.error('Failed to copy ID');
-            });
-        },
-      });
-
-      return items;
-    },
-    [
-      dispatch,
-      onWakeUpSleep,
-      onCancelRun,
-      onResolveHook,
-      spanLookup,
-      resolvedHookIds,
-      run.runId,
-      run.completedAt,
-    ]
-  );
-
-  return (
-    <div className="relative w-full h-full" ref={containerRef}>
-      {children}
-      {contextMenu ? (
-        <SpanContextMenu
-          menu={contextMenu}
-          items={getMenuItems(contextMenu)}
-          onClose={closeMenu}
-        />
-      ) : null}
-      <ResolveHookModal
-        isOpen={resolveHookTarget !== null}
-        onClose={() => setResolveHookTarget(null)}
-        onSubmit={handleResolveHook}
-        isSubmitting={resolvingHook}
-      />
-    </div>
-  );
-}
-
-/** Re-export SpanSelectionInfo for consumers */
-export type { SpanSelectionInfo };
-
-// ---------------------------------------------------------------------------
-// Bridge: reads selected span from trace viewer context and notifies parent
-// ---------------------------------------------------------------------------
-
-/**
- * Bridge component that lives INSIDE the TraceViewerContextProvider and
- * reads the selected span info, passing it up to the parent via callback.
- * This allows the parent to render the detail panel OUTSIDE the context.
- */
-function SelectionBridge({
-  onSelectionChange,
-}: {
-  onSelectionChange: (info: SelectedSpanInfo | null) => void;
-}) {
-  const { state } = useTraceViewer();
-  const { selected } = state;
-  const onSelectionChangeRef = useRef(onSelectionChange);
-  onSelectionChangeRef.current = onSelectionChange;
-  const prevSpanIdRef = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    const currentSpanId = selected?.span.spanId;
-    if (currentSpanId === prevSpanIdRef.current) return;
-    prevSpanIdRef.current = currentSpanId;
-
-    if (selected) {
-      onSelectionChangeRef.current({
-        data: selected.span.attributes?.data,
-        resource: selected.span.attributes?.resource as string | undefined,
-        spanId: selected.span.spanId,
-      });
-    } else {
-      onSelectionChangeRef.current(null);
-    }
-  }, [selected]);
-
-  return null;
-}
-
-/**
- * Bridge component to deselect from outside the context.
- */
-function DeselectBridge({ triggerDeselect }: { triggerDeselect: number }) {
-  const { dispatch } = useTraceViewer();
-
-  useEffect(() => {
-    if (triggerDeselect > 0) {
-      dispatch({ type: 'deselect' });
-    }
-  }, [triggerDeselect, dispatch]);
-
-  return null;
-}
-
-/**
- * Bridge component to select a span from outside the context.
- */
-function SelectBridge({
-  selectRequest,
-}: {
-  selectRequest: { id: string; token: number } | null;
-}) {
-  const { dispatch } = useTraceViewer();
-
-  useEffect(() => {
-    if (selectRequest?.id) {
-      dispatch({ type: 'select', id: selectRequest.id });
-    }
-  }, [dispatch, selectRequest]);
-
-  return null;
-}
-
-// ---------------------------------------------------------------------------
-// Panel chrome (header with name/duration, close button)
-// ---------------------------------------------------------------------------
-
-function PanelResizeHandle({
-  onResize,
-}: {
-  onResize: (deltaX: number) => void;
-}) {
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      let lastX = e.clientX;
-      const onPointerMove = (moveEvent: PointerEvent) => {
-        const deltaX = lastX - moveEvent.clientX;
-        lastX = moveEvent.clientX;
-        onResize(deltaX);
-      };
-      const onPointerUp = () => {
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-      };
-      document.addEventListener('pointermove', onPointerMove);
-      document.addEventListener('pointerup', onPointerUp);
-    },
-    [onResize]
-  );
-
-  return (
-    <div
-      className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-400/50 z-10"
-      onPointerDown={handlePointerDown}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// 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}
-      >
-        <Spinner size={14} />
-        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,
-  events,
-  isLoading,
-  error,
-  spanDetailData,
-  spanDetailLoading,
-  spanDetailError,
-  onWakeUpSleep,
-  onResolveHook,
-  onCancelRun,
-  onStreamClick,
-  onRunClick,
-  onSpanSelect,
-  onLoadEventData,
-  onLoadMoreSpans,
-  hasMoreSpans = false,
-  isLoadingMoreSpans = false,
-  encryptionKey,
-  onDecrypt,
-  isDecrypting = false,
-}: {
-  run: WorkflowRun;
-  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 to cancel the current run */
-  onCancelRun?: (runId: string) => Promise<void>;
-  /** Callback when a stream reference is clicked in the detail panel */
-  onStreamClick?: (streamId: string) => void;
-  /** Callback when a run reference is clicked in the detail panel */
-  onRunClick?: (runId: string) => void;
-  /** Callback when a span is selected. */
-  onSpanSelect?: (info: SpanSelectionInfo) => void;
-  /** Callback to load event data for a specific event (lazy loading in sidebar) */
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
-  /** Load next trace page when vertical scroll reaches bottom. */
-  onLoadMoreSpans?: () => void | Promise<void>;
-  /** Whether trace pagination has more data to load. */
-  hasMoreSpans?: boolean;
-  /** Whether trace pagination is currently fetching another page. */
-  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;
-  /** Whether the encryption key is currently being fetched */
-  isDecrypting?: boolean;
-}) => {
-  const toast = useToast();
-  const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
-    null
-  );
-  const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH);
-  const [deselectTrigger, setDeselectTrigger] = useState(0);
-  const [selectRequest, setSelectRequest] = useState<{
-    id: string;
-    token: number;
-  } | null>(null);
-
-  const isLive = Boolean(run && !run.completedAt);
-
-  // Build trace only when actual data changes — no timer-driven rebuilds.
-  // Active span widths are animated imperatively by useLiveTick at 60fps.
-  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
-    if (!run?.runId) {
-      return undefined;
-    }
-    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, events]);
-  const trace = traceWithMeta;
-
-  useEffect(() => {
-    if (error && !isLoading) {
-      console.error(error);
-      toast.error('Error loading workflow trace data', {
-        description: error.message,
-      });
-    }
-  }, [error, isLoading]);
-
-  const handleSpanSelect = useCallback(
-    (info: SpanSelectionInfo) => {
-      onSpanSelect?.(info);
-    },
-    [onSpanSelect]
-  );
-
-  const handleSelectionChange = useCallback(
-    (info: SelectedSpanInfo | null) => {
-      if (info) {
-        // Filter raw events by the selected span's correlationId (stepId/hookId)
-        // This bypasses the trace worker pipeline entirely.
-        const correlationId = info.spanId;
-        const rawEvents = correlationId
-          ? events.filter((e) => e.correlationId === correlationId)
-          : [];
-        setSelectedSpan({ ...info, rawEvents });
-      } else {
-        setSelectedSpan(null);
-      }
-    },
-    [events]
-  );
-
-  // Keep selected span raw events live as polling updates arrive.
-  useEffect(() => {
-    const correlationId = selectedSpan?.spanId;
-    if (!correlationId) return;
-
-    const nextRawEvents = events.filter(
-      (e) => e.correlationId === correlationId
-    );
-    setSelectedSpan((prev) => {
-      if (!prev || prev.spanId !== correlationId) {
-        return prev;
-      }
-
-      const prevRawEvents = prev.rawEvents ?? [];
-      const isSame =
-        prevRawEvents.length === nextRawEvents.length &&
-        prevRawEvents.every(
-          (event, index) => event.eventId === nextRawEvents[index]?.eventId
-        );
-      if (isSame) {
-        return prev;
-      }
-
-      return {
-        ...prev,
-        rawEvents: nextRawEvents,
-      };
-    });
-  }, [events, selectedSpan?.spanId]);
-
-  // Reset selected span when navigating to a different run
-  useEffect(() => {
-    setSelectedSpan(null);
-    setDeselectTrigger((n) => n + 1);
-  }, [run?.runId]);
-
-  const handleClose = useCallback(() => {
-    setSelectedSpan(null);
-    setDeselectTrigger((n) => n + 1);
-  }, []);
-
-  const handleResize = useCallback((deltaX: number) => {
-    setPanelWidth((w) => Math.max(MIN_PANEL_WIDTH, w + deltaX));
-  }, []);
-  const selectedSpanIndex = useMemo(() => {
-    if (!selectedSpan?.spanId || !trace) return -1;
-    return trace.spans.findIndex((span) => span.spanId === selectedSpan.spanId);
-  }, [selectedSpan?.spanId, trace]);
-  const canSelectPrevSpan = selectedSpanIndex > 0;
-  const canSelectNextSpan =
-    selectedSpanIndex >= 0 &&
-    trace != null &&
-    selectedSpanIndex < trace.spans.length - 1;
-  const handleSelectPrevSpan = useCallback(() => {
-    if (!trace || selectedSpanIndex <= 0) return;
-    const targetId = trace.spans[selectedSpanIndex - 1]?.spanId;
-    if (!targetId) return;
-    setSelectRequest({ id: targetId, token: Date.now() });
-  }, [selectedSpanIndex, trace]);
-  const handleSelectNextSpan = useCallback(() => {
-    if (!trace || selectedSpanIndex < 0) return;
-    const targetId = trace.spans[selectedSpanIndex + 1]?.spanId;
-    if (!targetId) return;
-    setSelectRequest({ id: targetId, token: Date.now() });
-  }, [selectedSpanIndex, trace]);
-
-  // Get the selected span name for the panel header
-  const selectedSpanName = useMemo(() => {
-    if (!selectedSpan?.data) return undefined;
-    const data = selectedSpan.data as Record<string, unknown>;
-    const stepName = data.stepName as string | undefined;
-    const workflowName = data.workflowName as string | undefined;
-    return (
-      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
-      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
-      stepName ??
-      workflowName ??
-      (data.hookId as string) ??
-      'Details'
-    );
-  }, [selectedSpan?.data]);
-
-  if (!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 flex flex-col">
-      {/* Timeline (takes remaining space) */}
-      <div className="flex-1 min-w-0 relative">
-        <TraceViewerContextProvider
-          customSpanClassNameFunc={getCustomSpanClassName}
-          customSpanEventClassNameFunc={getCustomSpanEventClassName}
-        >
-          <SelectionBridge onSelectionChange={handleSelectionChange} />
-          <DeselectBridge triggerDeselect={deselectTrigger} />
-          <SelectBridge selectRequest={selectRequest} />
-          <TraceViewerWithContextMenu
-            trace={trace}
-            run={run}
-            isLive={isLive}
-            onWakeUpSleep={onWakeUpSleep}
-            onCancelRun={onCancelRun}
-            onResolveHook={onResolveHook}
-            onLoadMoreSpans={onLoadMoreSpans}
-            hasMoreSpans={hasMoreSpans}
-            isLoadingMoreSpans={isLoadingMoreSpans}
-          >
-            <TraceViewerTimeline
-              eagerRender
-              height="100%"
-              isLive={isLive}
-              trace={trace}
-              knownDurationMs={traceWithMeta?.knownDurationMs}
-              hasMoreData={hasMoreSpans || Boolean(isLoading)}
-              footer={
-                <TraceViewerFooter
-                  hasMore={hasMoreSpans}
-                  isLive={isLive}
-                  isInitialLoading={Boolean(isLoading)}
-                />
-              }
-            />
-          </TraceViewerWithContextMenu>
-        </TraceViewerContextProvider>
-      </div>
-
-      {/* Detail panel (rendered outside the context, as a sibling) */}
-      {selectedSpan && (
-        <div
-          className="relative border-l flex-shrink-0 flex flex-col"
-          style={{
-            width: panelWidth,
-            borderColor: 'var(--ds-gray-200)',
-            backgroundColor: 'var(--ds-background-100)',
-          }}
-        >
-          <PanelResizeHandle onResize={handleResize} />
-          {/* Panel header */}
-          <div
-            className="flex items-center justify-between px-3 py-2 border-y flex-shrink-0"
-            style={{ borderColor: 'var(--ds-gray-200)' }}
-          >
-            <div className="min-w-0 flex-1">
-              <div
-                className="text-sm font-medium truncate"
-                style={{ color: 'var(--ds-gray-1000)' }}
-                title={selectedSpanName}
-              >
-                {selectedSpanName}
-              </div>
-            </div>
-            <div className="flex items-center">
-              <button
-                type="button"
-                aria-label="Previous span"
-                onClick={handleSelectPrevSpan}
-                disabled={!canSelectPrevSpan}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 6,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: canSelectPrevSpan ? 'pointer' : 'not-allowed',
-                  opacity: canSelectPrevSpan ? 1 : 0.45,
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  if (!canSelectPrevSpan) return;
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
-              >
-                <ChevronUp size={16} />
-              </button>
-              <button
-                type="button"
-                aria-label="Next span"
-                onClick={handleSelectNextSpan}
-                disabled={!canSelectNextSpan}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 2,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: canSelectNextSpan ? 'pointer' : 'not-allowed',
-                  opacity: canSelectNextSpan ? 1 : 0.45,
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  if (!canSelectNextSpan) return;
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
-              >
-                <ChevronDown size={16} />
-              </button>
-            </div>
-            <div
-              className="flex items-center"
-              style={{
-                borderLeft: '1px solid var(--ds-gray-300)',
-                marginLeft: 6,
-              }}
-            >
-              <button
-                type="button"
-                aria-label="Close panel"
-                onClick={handleClose}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginLeft: 6,
-                  width: 24,
-                  height: 24,
-                  padding: 0,
-                  borderRadius: 6,
-                  border: 'none',
-                  background: 'transparent',
-                  color: 'var(--ds-gray-700)',
-                  cursor: 'pointer',
-                  flexShrink: 0,
-                  transition: 'background 0.15s',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'transparent';
-                }}
-              >
-                <X size={16} />
-              </button>
-            </div>
-          </div>
-          {/* Panel body */}
-          <div className="flex-1 overflow-y-auto">
-            <ErrorBoundary title="Failed to load entity details">
-              <EntityDetailPanel
-                run={run}
-                onStreamClick={onStreamClick}
-                onRunClick={onRunClick}
-                spanDetailData={spanDetailData ?? null}
-                spanDetailError={spanDetailError}
-                spanDetailLoading={spanDetailLoading}
-                onSpanSelect={handleSpanSelect}
-                onWakeUpSleep={onWakeUpSleep}
-                onLoadEventData={onLoadEventData}
-                onResolveHook={onResolveHook}
-                encryptionKey={encryptionKey}
-                onDecrypt={onDecrypt}
-                isDecrypting={isDecrypting}
-                selectedSpan={selectedSpan}
-              />
-            </ErrorBoundary>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};