@workflow/web-shared 5.0.0-beta.37 → 5.0.0-beta.39

package/src/components/new-trace-viewer/trace-viewer.tsx

@@ -1,632 +0,0 @@
-'use client';
-
-import { RotateCcw, Search, ZoomIn, ZoomOut } from 'lucide-react';
-import {
-  type ReactNode,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
-import { useReducedMotion } from '../../hooks/use-reduced-motion';
-import {
-  formatDurationPrecise,
-  getHighResInMs,
-} from '../trace-viewer/util/timing';
-import { IconButton } from '../ui/icon-button';
-import { Kbd } from '../ui/kbd';
-import { Spinner } from '../ui/spinner';
-import { TooltipProvider } from '../ui/tooltip';
-import { TraceDetailPanel } from './components/detail-panel';
-import EventList from './components/event-list';
-import { Minimap } from './components/minimap';
-import { SplitPane } from './components/split-pane';
-import {
-  TIMELINE_PADDING_PX,
-  Timeline,
-  TimelineHeader,
-  type TimelineHover,
-} from './components/timeline';
-import { TraceShortcutHelper } from './components/trace-shortcut-helper';
-import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
-import { ActiveSpanProvider, useActiveSpan } from './context';
-import { searchSpans } from './search';
-import type { TraceWithMeta } from './types';
-import {
-  clampViewportToRoot,
-  computeRootBounds,
-  computeTimeMarkers,
-  type ViewportRange,
-  wheelDeltaToPixels,
-  wheelZoomScaleFactor,
-} from './utils';
-
-interface NewTraceViewerProps {
-  trace: TraceWithMeta;
-  onLoadMore?: () => void | Promise<void>;
-  hasMore?: boolean;
-  isLoadingMore?: boolean;
-}
-
-const MIN_VIEWPORT_MS = 0.001;
-
-const ZOOM_DEBOUNCE_MS = 150;
-
-function useAnimatedViewport(initial: ViewportRange) {
-  const [viewport, setViewportState] = useState<ViewportRange>(initial);
-  const animRef = useRef<{
-    raf: number;
-    from: ViewportRange;
-    to: ViewportRange;
-    start: number;
-  } | null>(null);
-  const currentRef = useRef(initial);
-  currentRef.current = viewport;
-  const reducedMotion = useReducedMotion();
-
-  const cancel = useCallback(() => {
-    if (animRef.current) {
-      cancelAnimationFrame(animRef.current.raf);
-      animRef.current = null;
-    }
-  }, []);
-
-  const animateTo = useCallback(
-    (target: ViewportRange) => {
-      cancel();
-
-      if (reducedMotion) {
-        currentRef.current = target;
-        setViewportState(target);
-        return;
-      }
-
-      const from = currentRef.current;
-      const anim = { raf: 0, from, to: target, start: performance.now() };
-
-      const tick = () => {
-        const t = Math.min((performance.now() - anim.start) / 240, 1);
-        const e = t < 0.5 ? 8 * t * t * t * t : 1 - (-2 * t + 2) ** 4 / 2;
-        setViewportState({
-          start: anim.from.start + (anim.to.start - anim.from.start) * e,
-          end: anim.from.end + (anim.to.end - anim.from.end) * e,
-        });
-        if (t < 1) anim.raf = requestAnimationFrame(tick);
-        else animRef.current = null;
-      };
-
-      animRef.current = anim;
-      anim.raf = requestAnimationFrame(tick);
-    },
-    [cancel, reducedMotion]
-  );
-
-  const setViewport = useCallback(
-    (update: ViewportRange | ((prev: ViewportRange) => ViewportRange)) => {
-      cancel();
-      if (typeof update === 'function') {
-        setViewportState((prev) => {
-          const next = update(prev);
-          currentRef.current = next;
-          return next;
-        });
-      } else {
-        currentRef.current = update;
-        setViewportState(update);
-      }
-    },
-    [cancel]
-  );
-
-  useEffect(() => cancel, [cancel]);
-
-  return { viewport, setViewport, animateTo };
-}
-
-// ---------------------------------------------------------------------------
-// Root component
-// ---------------------------------------------------------------------------
-
-export function NewTraceViewer({
-  trace,
-  onLoadMore,
-  hasMore,
-  isLoadingMore,
-}: NewTraceViewerProps): ReactNode {
-  return (
-    <TooltipProvider delayDuration={300}>
-      <ActiveSpanProvider spans={trace.spans}>
-        <NewTraceViewerContent
-          trace={trace}
-          onLoadMore={onLoadMore}
-          hasMore={hasMore}
-          isLoadingMore={isLoadingMore}
-        />
-      </ActiveSpanProvider>
-    </TooltipProvider>
-  );
-}
-
-function NewTraceViewerContent({
-  trace,
-  onLoadMore,
-  hasMore,
-  isLoadingMore,
-}: NewTraceViewerProps): ReactNode {
-  const { activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
-
-  const reducedMotion = useReducedMotion();
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const deferredSearchQuery = useDeferredValue(searchQuery);
-
-  const paneRootRef = useRef<HTMLDivElement>(null);
-
-  const searchResult = useMemo(
-    () => searchSpans(trace.spans, deferredSearchQuery),
-    [trace.spans, deferredSearchQuery]
-  );
-
-  const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const loadMore = useCallback(() => {
-    void onLoadMore?.();
-  }, [onLoadMore]);
-  const loadMoreSentinelRef = useLoadMoreOnScroll(loadMore, {
-    hasMore: Boolean(onLoadMore && hasMore),
-    isLoadingMore: Boolean(isLoadingMore),
-    rootRef: scrollContainerRef,
-  });
-
-  const { viewport, setViewport, animateTo } = useAnimatedViewport({
-    start: root.startTime,
-    end: root.startTime + root.duration,
-  });
-
-  const prevRootRef = useRef<ViewportRange>({
-    start: root.startTime,
-    end: root.startTime + root.duration,
-  });
-
-  useEffect(() => {
-    const prevRoot = prevRootRef.current;
-    const newStart = root.startTime;
-    const newEnd = root.startTime + root.duration;
-
-    setViewport((prev) => {
-      const wasAtFullExtent =
-        Math.abs(prev.start - prevRoot.start) < 0.01 &&
-        Math.abs(prev.end - prevRoot.end) < 0.01;
-
-      if (wasAtFullExtent) {
-        return { start: newStart, end: newEnd };
-      }
-      return prev;
-    });
-
-    prevRootRef.current = { start: newStart, end: newEnd };
-  }, [root.startTime, root.duration, setViewport]);
-
-  const viewDuration = viewport.end - viewport.start;
-
-  // Keep a ref to the live viewport so zoom callbacks can read the current
-  // range without being recreated on every pan (which would bust TimelineBar's
-  // memo and re-render every row each animation frame).
-  const viewportRef = useRef(viewport);
-  viewportRef.current = viewport;
-
-  const timeMarkers = useMemo(
-    () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),
-    [viewDuration, viewport.start, root.startTime]
-  );
-
-  const resetZoom = useCallback(() => {
-    animateTo({ start: root.startTime, end: root.startTime + root.duration });
-  }, [animateTo, root.startTime, root.duration]);
-
-  const clampToRoot = useCallback(
-    (next: ViewportRange): ViewportRange =>
-      clampViewportToRoot(next, root.startTime, root.endTime, MIN_VIEWPORT_MS),
-    [root.startTime, root.endTime]
-  );
-
-  // Pan (keeping the current zoom) so `timeMs` is centered in view — used by the
-  // off-screen marker indicators to scroll their marker into view.
-  const handleRevealTime = useCallback(
-    (timeMs: number) => {
-      const { start, end } = viewportRef.current;
-      const duration = end - start;
-      animateTo(
-        clampToRoot({
-          start: timeMs - duration / 2,
-          end: timeMs + duration / 2,
-        })
-      );
-    },
-    [animateTo, clampToRoot]
-  );
-
-  const ZOOM_FACTOR = 0.5;
-
-  const zoomBy = useCallback(
-    (factor: number) => {
-      const { start, end } = viewportRef.current;
-      const center = (start + end) / 2;
-      const newDuration = Math.max(MIN_VIEWPORT_MS, (end - start) * factor);
-      animateTo(
-        clampToRoot({
-          start: center - newDuration / 2,
-          end: center + newDuration / 2,
-        })
-      );
-    },
-    [animateTo, clampToRoot]
-  );
-
-  const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
-  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
-  const isAtMinZoom = viewDuration >= root.duration;
-  const isAtMaxZoom = viewDuration <= MIN_VIEWPORT_MS;
-
-  const focusViewportOnSpan = useCallback(
-    (spanId: string) => {
-      const span = trace.spans.find((s) => s.spanId === spanId);
-      if (!span) return;
-
-      const spanStart = getHighResInMs(span.startTime);
-      const spanEnd = getHighResInMs(span.endTime);
-      const spanDuration = spanEnd - spanStart;
-
-      if (spanDuration > root.duration * 0.8) {
-        animateTo({ start: root.startTime, end: root.endTime });
-        return;
-      }
-
-      const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);
-      let newStart = spanStart - padding;
-      let newEnd = spanEnd + padding;
-
-      if (newEnd - newStart < MIN_VIEWPORT_MS) {
-        const center = (spanStart + spanEnd) / 2;
-        newStart = center - MIN_VIEWPORT_MS / 2;
-        newEnd = center + MIN_VIEWPORT_MS / 2;
-      }
-
-      animateTo(clampToRoot({ start: newStart, end: newEnd }));
-    },
-    [
-      animateTo,
-      trace.spans,
-      root.startTime,
-      root.endTime,
-      root.duration,
-      clampToRoot,
-    ]
-  );
-
-  // Bring a row into view when keyboard/button navigation lands on a span that
-  // sits outside the shared scroll container's visible area. The list is
-  // windowed, so an off-screen row has no DOM node to `scrollIntoView` —
-  // `scrollRowIntoView` computes the target offset from the span's index.
-  const scrollSpanIntoView = useCallback(
-    (spanId: string) => {
-      const index = trace.spans.findIndex((s) => s.spanId === spanId);
-      if (index === -1) return;
-
-      const list =
-        scrollContainerRef.current?.querySelector<HTMLElement>('#event-list') ??
-        null;
-      scrollRowIntoView(list, index, ROW_HEIGHT_PX, {
-        behavior: reducedMotion ? 'auto' : 'smooth',
-      });
-    },
-    [trace.spans, reducedMotion]
-  );
-
-  const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const cancelPendingZoom = useCallback(() => {
-    if (zoomTimerRef.current !== null) {
-      clearTimeout(zoomTimerRef.current);
-      zoomTimerRef.current = null;
-    }
-  }, []);
-  useEffect(() => cancelPendingZoom, [cancelPendingZoom]);
-
-  const handleClearActiveSpan = useCallback(() => {
-    cancelPendingZoom();
-    clearActiveSpan();
-  }, [cancelPendingZoom, clearActiveSpan]);
-
-  const handleSelectSpan = useCallback(
-    (spanId: string) => {
-      cancelPendingZoom();
-      if (spanId === activeSpanId) {
-        clearActiveSpan();
-        return;
-      }
-      setActiveSpan(spanId);
-      focusViewportOnSpan(spanId);
-    },
-    [
-      cancelPendingZoom,
-      activeSpanId,
-      clearActiveSpan,
-      setActiveSpan,
-      focusViewportOnSpan,
-    ]
-  );
-
-  const navigateToSpan = useCallback(
-    (spanId: string) => {
-      setActiveSpan(spanId);
-      scrollSpanIntoView(spanId);
-      cancelPendingZoom();
-      zoomTimerRef.current = setTimeout(() => {
-        zoomTimerRef.current = null;
-        focusViewportOnSpan(spanId);
-      }, ZOOM_DEBOUNCE_MS);
-    },
-    [setActiveSpan, scrollSpanIntoView, cancelPendingZoom, focusViewportOnSpan]
-  );
-
-  const [altHeld, setAltHeld] = useState(false);
-
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent): void => {
-      if (e.key === 'Escape') {
-        handleClearActiveSpan();
-      } else if (e.key === 'Alt') {
-        setAltHeld(true);
-      }
-    };
-    const onKeyUp = (e: KeyboardEvent): void => {
-      if (e.key === 'Alt') setAltHeld(false);
-    };
-    const onBlur = (): void => setAltHeld(false);
-
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('keyup', onKeyUp);
-    window.addEventListener('blur', onBlur);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('keyup', onKeyUp);
-      window.removeEventListener('blur', onBlur);
-    };
-  }, [handleClearActiveSpan]);
-
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const [hover, setHover] = useState<TimelineHover | null>(null);
-
-  const hoverInfo = useMemo(() => {
-    if (hover == null) return null;
-    const absTime = viewport.start + hover.fraction * viewDuration;
-    const offset = absTime - root.startTime;
-    return { fraction: hover.fraction, label: formatDurationPrecise(offset) };
-  }, [hover, viewport.start, viewDuration, root.startTime]);
-
-  const handleTimelineMouseMove = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const el = timelineRef.current;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
-      if (contentWidth <= 0) return;
-      const fraction = Math.max(
-        0,
-        Math.min(
-          1,
-          (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
-        )
-      );
-      setHover({
-        fraction,
-        rowIndex: Math.floor((e.clientY - rect.top) / ROW_HEIGHT_PX),
-      });
-    },
-    []
-  );
-
-  const handleTimelineMouseLeave = useCallback(() => {
-    setHover(null);
-  }, []);
-
-  useEffect(() => {
-    const el = timelineRef.current;
-    if (!el || root.duration <= 0) return;
-
-    const onWheel = (e: WheelEvent): void => {
-      const isZoomGesture = e.ctrlKey || e.metaKey;
-      const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
-
-      if (!isZoomGesture && !hasDeltaX) return;
-      e.preventDefault();
-
-      const rect = el.getBoundingClientRect();
-      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
-      if (contentWidth <= 0) return;
-
-      if (isZoomGesture) {
-        const cursorFraction = Math.max(
-          0,
-          Math.min(
-            1,
-            (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
-          )
-        );
-        const scaleFactor = wheelZoomScaleFactor(e);
-
-        setViewport((prev) => {
-          const prevDuration = prev.end - prev.start;
-          const cursorTime = prev.start + cursorFraction * prevDuration;
-          // Clamp the duration before anchoring so the cursor keeps its
-          // fraction even when the zoom hits the min/max bounds.
-          const newDuration = Math.max(
-            MIN_VIEWPORT_MS,
-            Math.min(root.duration, prevDuration * scaleFactor)
-          );
-          return clampToRoot({
-            start: cursorTime - cursorFraction * newDuration,
-            end: cursorTime + (1 - cursorFraction) * newDuration,
-          });
-        });
-      } else {
-        const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
-        setViewport((prev) => {
-          const panAmount = (dx / contentWidth) * (prev.end - prev.start);
-          return clampToRoot({
-            start: prev.start + panAmount,
-            end: prev.end + panAmount,
-          });
-        });
-      }
-    };
-
-    el.addEventListener('wheel', onWheel, { passive: false });
-    return () => el.removeEventListener('wheel', onWheel);
-  }, [root.duration, setViewport, clampToRoot]);
-
-  return (
-    <div
-      ref={paneRootRef}
-      data-pane="pane-root"
-      className="relative flex w-full h-full max-h-full"
-    >
-      <div
-        id="trace-parent"
-        className="@container flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
-      >
-        <Minimap
-          spans={trace.spans}
-          root={root}
-          viewport={viewport}
-          minViewportMs={MIN_VIEWPORT_MS}
-          onViewportChange={setViewport}
-          onAnimateTo={animateTo}
-        />
-        <SplitPane
-          scrollContainerRef={scrollContainerRef}
-          startHeader={
-            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5">
-              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
-              <input
-                id="trace-viewer-search"
-                name="trace-viewer-search"
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape' && searchQuery) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setSearchQuery('');
-                  }
-                }}
-                placeholder="Search spans..."
-                aria-label="Search spans"
-                className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
-              />
-              {searchQuery && (
-                <button
-                  type="button"
-                  aria-label="Clear search"
-                  onClick={() => setSearchQuery('')}
-                  className="-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex"
-                >
-                  <Kbd variant="outline" size="search">
-                    Esc
-                  </Kbd>
-                </button>
-              )}
-            </div>
-          }
-          endHeader={
-            <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />
-          }
-        >
-          <div className="block overflow-visible">
-            <EventList
-              spans={trace.spans}
-              activeSpanId={activeSpanId}
-              searchResult={searchResult}
-              onSelectSpan={handleSelectSpan}
-            />
-            <div ref={loadMoreSentinelRef} className="flex justify-center">
-              {isLoadingMore ? (
-                <div className="flex items-center justify-center gap-2 py-3 text-sm text-gray-800">
-                  <Spinner size={14} />
-                  <span>Loading spans…</span>
-                </div>
-              ) : null}
-            </div>
-          </div>
-          {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
-          <div
-            ref={timelineRef}
-            id="trace-timeline"
-            className="@container block min-h-0 overflow-visible relative"
-            onDoubleClick={resetZoom}
-            onMouseMove={handleTimelineMouseMove}
-            onMouseLeave={handleTimelineMouseLeave}
-          >
-            <Timeline
-              spans={trace.spans}
-              viewStart={viewport.start}
-              viewEnd={viewport.end}
-              markers={timeMarkers}
-              selectedId={activeSpanId}
-              searchResult={searchResult}
-              onSelect={handleSelectSpan}
-              onRevealTime={handleRevealTime}
-              hover={hover}
-              altHeld={altHeld}
-            />
-          </div>
-          <>
-            <TraceShortcutHelper
-              hasMultipleSpans={trace.spans.length > 1}
-              reducedMotion={reducedMotion}
-            />
-            <div className="pointer-events-auto flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
-              <IconButton
-                variant="muted"
-                size="small"
-                onClick={zoomOut}
-                disabled={isAtMinZoom}
-                aria-label="Zoom out"
-              >
-                <ZoomOut className="w-4 h-4" />
-              </IconButton>
-              <IconButton
-                variant="muted"
-                size="small"
-                onClick={resetZoom}
-                aria-label="Reset zoom"
-              >
-                <RotateCcw className="w-3.5 h-3.5" />
-              </IconButton>
-              <IconButton
-                variant="muted"
-                size="small"
-                onClick={zoomIn}
-                disabled={isAtMaxZoom}
-                aria-label="Zoom in"
-              >
-                <ZoomIn className="w-4 h-4" />
-              </IconButton>
-            </div>
-          </>
-        </SplitPane>
-      </div>
-
-      <TraceDetailPanel
-        containerRef={paneRootRef}
-        onNavigateToSpan={navigateToSpan}
-        onClose={handleClearActiveSpan}
-      />
-    </div>
-  );
-}

package/src/components/new-trace-viewer/types.ts

@@ -1,2 +0,0 @@
-export type { Span, SpanEvent, Trace } from '../trace-viewer/types';
-export type { TraceWithMeta } from '../../lib/trace-builder';

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

@@ -1,80 +0,0 @@
-'use client';
-
-import type { Event, Hook, WorkflowRun } from '@workflow/world';
-import { AlertCircle } from 'lucide-react';
-import type { FetchSpanDetail } from './sidebar/use-selected-span-detail';
-import { WorkflowTraceViewer } from './workflow-trace-view';
-
-interface RunTraceViewProps {
-  run: WorkflowRun;
-  events: Event[];
-  isLoading?: boolean;
-  error?: Error | null;
-  fetchSpanDetail: FetchSpanDetail;
-  onWakeUpSleep?: (
-    runId: string,
-    correlationId: string
-  ) => Promise<{ stoppedCount: number }>;
-  onResolveHook?: (
-    hookToken: string,
-    payload: unknown,
-    hook?: Hook
-  ) => Promise<void>;
-  onCancelRun?: (runId: string) => Promise<void>;
-  onStreamClick?: (streamId: string) => void;
-  onRunClick?: (runId: string) => void;
-  onLoadMoreSpans?: () => void | Promise<void>;
-  hasMoreSpans?: boolean;
-  isLoadingMoreSpans?: boolean;
-  showSeparateEventOccurrenceTimestamps?: boolean;
-}
-
-export function RunTraceView({
-  run,
-  events,
-  isLoading,
-  error,
-  fetchSpanDetail,
-  onWakeUpSleep,
-  onResolveHook,
-  onCancelRun,
-  onStreamClick,
-  onRunClick,
-  onLoadMoreSpans,
-  hasMoreSpans,
-  isLoadingMoreSpans,
-  showSeparateEventOccurrenceTimestamps,
-}: RunTraceViewProps) {
-  if (error && !run) {
-    return (
-      <div className="m-4">
-        <AlertCircle className="h-4 w-4" />
-        <p>Error loading workflow run</p>
-        <p>{error.message}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full h-full relative">
-      <WorkflowTraceViewer
-        error={error}
-        events={events}
-        run={run}
-        isLoading={isLoading}
-        fetchSpanDetail={fetchSpanDetail}
-        onWakeUpSleep={onWakeUpSleep}
-        onResolveHook={onResolveHook}
-        onCancelRun={onCancelRun}
-        onStreamClick={onStreamClick}
-        onRunClick={onRunClick}
-        onLoadMoreSpans={onLoadMoreSpans}
-        hasMoreSpans={hasMoreSpans}
-        isLoadingMoreSpans={isLoadingMoreSpans}
-        showSeparateEventOccurrenceTimestamps={
-          showSeparateEventOccurrenceTimestamps
-        }
-      />
-    </div>
-  );
-}