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

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

@@ -0,0 +1,185 @@
+'use client';
+
+import {
+  Children,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/utils';
+
+const GUTTER_PX = 1;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+
+export function Divider() {
+  return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
+}
+
+export interface SplitPaneProps {
+  children: ReactNode;
+  className?: string;
+  /** Fixed pixel width for the start (left) pane. Default 220. */
+  defaultStartWidth?: number;
+  /** Fixed (non-scrolling) header rendered above the start pane. */
+  startHeader?: ReactNode;
+  /** Fixed (non-scrolling) header rendered above the end pane. */
+  endHeader?: ReactNode;
+}
+
+export function SplitPane({
+  children,
+  className,
+  defaultStartWidth = DEFAULT_START_PX,
+  startHeader,
+  endHeader,
+}: SplitPaneProps) {
+  const parts = Children.toArray(children);
+  if (parts.length !== 2) {
+    throw new Error('SplitPane expects exactly two children');
+  }
+  const [start, end] = parts;
+
+  const [startPx, setStartPx] = useState(defaultStartWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gutterRef = useRef<HTMLDivElement>(null);
+  const rafRef = useRef<number | null>(null);
+  const pendingPx = useRef(defaultStartWidth);
+  const pointerIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+
+  const clampPx = useCallback((px: number) => {
+    const el = containerRef.current;
+    if (!el) return px;
+    const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
+    return Math.min(maxPx, Math.max(MIN_PX, px));
+  }, []);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const onPointerMove = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      pendingPx.current = clampPx(e.clientX - rect.left);
+      if (!rafRef.current) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          setStartPx(pendingPx.current);
+        });
+      }
+    };
+
+    const onPointerUp = (e: globalThis.PointerEvent) => {
+      if (e.pointerId !== pointerIdRef.current) return;
+      const gutter = gutterRef.current;
+      if (gutter?.hasPointerCapture(e.pointerId)) {
+        gutter.releasePointerCapture(e.pointerId);
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      pointerIdRef.current = null;
+      setIsDragging(false);
+    };
+
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+
+    return () => {
+      document.removeEventListener('pointermove', onPointerMove);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [isDragging, clampPx]);
+
+  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    pointerIdRef.current = e.pointerId;
+    setIsDragging(true);
+  };
+
+  const handleLostPointerCapture = () => {
+    pointerIdRef.current = null;
+    setIsDragging(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  };
+
+  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+  const hasHeaders = startHeader != null || endHeader != null;
+
+  const gutter = (
+    <div
+      ref={gutterRef}
+      className="relative z-20 isolate flex shrink-0 cursor-col-resize justify-center"
+      onPointerDown={handlePointerDown}
+      onLostPointerCapture={handleLostPointerCapture}
+    >
+      <span
+        className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+        aria-hidden
+      />
+    </div>
+  );
+
+  if (hasHeaders) {
+    return (
+      <div className={cn('flex flex-col h-full min-h-0', className)}>
+        <div
+          className="shrink-0 grid"
+          style={{ gridTemplateColumns: colTemplate }}
+        >
+          <div>{startHeader}</div>
+          <div className="flex justify-center">
+            <span className="h-full w-px bg-gray-alpha-400" aria-hidden />
+          </div>
+          <div>{endHeader}</div>
+        </div>
+        <div
+          ref={containerRef}
+          className={cn(
+            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
+            isDragging && 'select-none'
+          )}
+          style={{ gridTemplateColumns: colTemplate }}
+        >
+          {start}
+          {gutter}
+          {end}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
+        isDragging && 'select-none',
+        className
+      )}
+      style={{ gridTemplateColumns: colTemplate, height: '100%' }}
+    >
+      {start}
+      {gutter}
+      {end}
+    </div>
+  );
+}

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

@@ -0,0 +1,382 @@
+'use client';
+
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+import type { Span } from '../../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import type { SegmentStatus, TimeMarker } from '../utils';
+import {
+  computeSpanGaps,
+  computeSpanSegments,
+  getSpanDurationMs,
+  getResourceColor,
+} from '../utils';
+
+const SEGMENT_CONFIG: Record<
+  SegmentStatus,
+  { className?: string; style?: React.CSSProperties }
+> = {
+  queued: { className: 'bg-gray-500' },
+  retrying: {
+    className: 'box-border bg-gray-500',
+  },
+  waiting: { className: 'bg-gray-500' },
+  running: { className: 'bg-blue-700' },
+  failed: { className: 'bg-red-700' },
+  succeeded: { className: 'bg-green-700' },
+  sleeping: { className: 'bg-gray-500' },
+  received: { className: 'bg-blue-700' },
+};
+
+const BAR_HEIGHT_PX = 24;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
+const SEGMENT_GAP_PX = 1;
+// Keep this in sync with the rendered row height in the timeline/event list.
+const ROW_HEIGHT = 40;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+export const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 0.000001;
+
+const DeltaIndicator = memo(function DeltaIndicator({
+  leftFrac,
+  rightFrac,
+  label,
+  rowIndex,
+}: {
+  leftFrac: number;
+  rightFrac: number;
+  label: string;
+  rowIndex: number;
+}) {
+  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        left: `${leftFrac * 100}%`,
+        width: `${(rightFrac - leftFrac) * 100}%`,
+        top: centerY - END_CAP_HEIGHT / 2,
+        height: END_CAP_HEIGHT,
+      }}
+    >
+      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
+      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
+      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
+        {label}
+      </span>
+    </div>
+  );
+});
+
+const TimelineBar = memo(function TimelineBar({
+  span,
+  viewStart,
+  viewDuration,
+  containerWidth,
+  isSelected,
+  onClick,
+}: {
+  span: Span;
+  viewStart: number;
+  viewDuration: number;
+  containerWidth: number;
+  isSelected: boolean;
+  onClick: () => void;
+}): ReactNode {
+  const startTime = getHighResInMs(span.startTime);
+  const endTime = getHighResInMs(span.endTime);
+  const totalDurationMs = getSpanDurationMs(span);
+
+  const leftFracRaw =
+    viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+  const rightFracRaw =
+    viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+  const widthFrac = rightFracRaw - leftFracRaw;
+
+  const leftPct = leftFracRaw * 100;
+  const widthPct = widthFrac * 100;
+
+  const pixelWidth = widthFrac * containerWidth;
+  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+  const visiblePixelWidth =
+    Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+  const isTinyBar =
+    containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
+  const [isRowHovered, setIsRowHovered] = useState(false);
+
+  const segments = useMemo(() => computeSpanSegments(span), [span]);
+
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+  const colors = getResourceColor(span.resource);
+  const fallbackColor = isErrored
+    ? (colors.errorBar ?? 'var(--ds-red-700)')
+    : colors.bar;
+  const renderDurationLabel = (label: string) => (
+    <span
+      className="pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums"
+      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}
+    >
+      {label}
+    </span>
+  );
+  const getMinDurationLabelWidthPx = (label: string) =>
+    Math.max(40, label.length * 6 + 12);
+  const totalDurationLabel = formatDuration(totalDurationMs);
+  const showBarDurationLabel =
+    isRowHovered &&
+    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
+
+  const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+  const barContent = showBoundaryArrow ? (
+    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
+      <BoundaryArrow className="size-3 text-gray-900" />
+    </div>
+  ) : isTinyBar ? (
+    <div
+      className="h-6 rounded-[0.25rem]"
+      style={{ background: fallbackColor }}
+    />
+  ) : segments.length > 0 ? (
+    <div className="relative h-6 w-full">
+      {segments.map((seg, i) => {
+        const segPixelWidth =
+          (seg.endFraction - seg.startFraction) * pixelWidth;
+        const segDurationLabel = formatDuration(
+          (seg.endFraction - seg.startFraction) * totalDurationMs
+        );
+        const showSegmentDurationLabel =
+          isRowHovered &&
+          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
+        const segStyle =
+          seg.status === 'queued' && segPixelWidth < 20
+            ? { background: 'var(--ds-gray-500)' }
+            : SEGMENT_CONFIG[seg.status].style;
+
+        return (
+          <div
+            key={`${seg.status}-${i}`}
+            className={cn(
+              'absolute h-full rounded-[0.25rem]',
+              SEGMENT_CONFIG[seg.status].className
+            )}
+            style={{
+              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
+              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+              minWidth: 1,
+              ...segStyle,
+            }}
+          >
+            {showSegmentDurationLabel
+              ? renderDurationLabel(segDurationLabel)
+              : null}
+          </div>
+        );
+      })}
+    </div>
+  ) : (
+    <div
+      className="relative h-6 rounded-[0.25rem]"
+      style={{
+        width: '100%',
+        minWidth: 4,
+        background: fallbackColor,
+      }}
+    >
+      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+    </div>
+  );
+
+  return (
+    <div
+      role="treeitem"
+      aria-selected={isSelected}
+      aria-expanded={isSelected}
+      aria-level={1}
+      className={cn(
+        'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
+      )}
+      onMouseEnter={() => setIsRowHovered(true)}
+      onMouseLeave={() => setIsRowHovered(false)}
+      onClick={onClick}
+    >
+      <div
+        className="absolute inset-y-0"
+        style={{
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
+        }}
+      >
+        <div
+          className="absolute top-1/2 -translate-y-1/2"
+          style={{
+            left: showBoundaryArrow
+              ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+              : isTinyBar
+                ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+                : `${leftPct}%`,
+            width: showBoundaryArrow
+              ? `${TINY_BAR_BOX_SIZE_PX}px`
+              : isTinyBar
+                ? `${TINY_BAR_WIDTH_PX}px`
+                : `max(${widthPct}%, 4px)`,
+            height: BAR_HEIGHT_PX,
+          }}
+        >
+          {barContent}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export { TimelineBar };
+
+export function TimelineHeader({
+  markers,
+  hoverInfo,
+}: {
+  markers: TimeMarker[];
+  hoverInfo?: { fraction: number; label: string } | null;
+}): ReactNode {
+  return (
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1">
+      <div className="relative h-full flex-1">
+        {markers.map((m) => (
+          <span
+            key={`${m.position}-${m.label}`}
+            className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
+            style={{ left: `${m.position * 100}%` }}
+          >
+            {m.label}
+          </span>
+        ))}
+        {hoverInfo && (
+          <span
+            className="absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2"
+            style={{ left: `${hoverInfo.fraction * 100}%` }}
+          >
+            {hoverInfo.label}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function Timeline({
+  spans,
+  viewStart,
+  viewEnd,
+  markers,
+  selectedId,
+  onSelect,
+  hoverFraction,
+  altHeld = false,
+}: {
+  spans: Span[];
+  viewStart: number;
+  viewEnd: number;
+  markers: TimeMarker[];
+  selectedId: string | null;
+  onSelect: (spanId: string) => void;
+  hoverFraction?: number | null;
+  altHeld?: boolean;
+}): ReactNode {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const viewDuration = viewEnd - viewStart;
+  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setContainerWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const gaps = useMemo(
+    () => computeSpanGaps(spans, viewStart, viewEnd),
+    [spans, viewStart, viewEnd]
+  );
+
+  return (
+    <div ref={containerRef} className="relative h-full overflow-hidden">
+      <div
+        aria-hidden
+        className="absolute inset-y-0 pointer-events-none"
+        style={{
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
+        }}
+      >
+        {markers.map((marker) =>
+          Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (
+            <div
+              key={`${marker.position}-${marker.label}`}
+              className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
+              style={{ left: `${marker.position * 100}%` }}
+            />
+          ) : null
+        )}
+      </div>
+      {hoverFraction != null && (
+        <div
+          className="absolute inset-y-0 pointer-events-none z-10"
+          style={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
+          <div
+            className="absolute top-0 bottom-0 w-px bg-gray-alpha-400"
+            style={{ left: `${hoverFraction * 100}%` }}
+          />
+        </div>
+      )}
+      {spans.map((span) => (
+        <TimelineBar
+          key={span.spanId}
+          span={span}
+          viewStart={viewStart}
+          viewDuration={viewDuration}
+          containerWidth={timelineWidth}
+          isSelected={selectedId === span.spanId}
+          onClick={() => onSelect(span.spanId)}
+        />
+      ))}
+      {altHeld && (
+        <div
+          aria-hidden
+          className="absolute inset-y-0 pointer-events-none"
+          style={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
+          {gaps.map((gap) => (
+            <DeltaIndicator
+              key={gap.rowIndex}
+              leftFrac={gap.leftFrac}
+              rightFrac={gap.rightFrac}
+              label={formatDuration(gap.gapMs, true)}
+              rowIndex={gap.rowIndex}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import type { Span } from '../trace-viewer/types';
+
+interface ActiveSpanContextValue {
+  activeSpanId: string | null;
+  activeSpan: Span | null;
+  setActiveSpan: (spanId: string) => void;
+  clearActiveSpan: () => void;
+}
+
+const ActiveSpanContext = createContext<ActiveSpanContextValue | null>(null);
+ActiveSpanContext.displayName = 'ActiveSpanContext';
+
+export function ActiveSpanProvider({
+  spans,
+  children,
+}: {
+  spans: Span[];
+  children: ReactNode;
+}) {
+  const [activeSpanId, setActiveSpanId] = useState<string | null>(
+    spans[0]?.spanId ?? null
+  );
+
+  useEffect(() => {
+    setActiveSpanId((currentSpanId) => {
+      if (!currentSpanId) {
+        return null;
+      }
+
+      const hasCurrentSpan = spans.some(
+        (span) => span.spanId === currentSpanId
+      );
+      if (hasCurrentSpan) {
+        return currentSpanId;
+      }
+
+      return null;
+    });
+  }, [spans]);
+
+  const activeSpan = useMemo(() => {
+    if (!activeSpanId) {
+      return null;
+    }
+
+    return spans.find((span) => span.spanId === activeSpanId) ?? null;
+  }, [activeSpanId, spans]);
+
+  const setActiveSpan = useCallback((spanId: string) => {
+    setActiveSpanId(spanId);
+  }, []);
+
+  const clearActiveSpan = useCallback(() => {
+    setActiveSpanId(null);
+  }, []);
+
+  const value = useMemo<ActiveSpanContextValue>(
+    () => ({
+      activeSpanId,
+      activeSpan,
+      setActiveSpan,
+      clearActiveSpan,
+    }),
+    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]
+  );
+
+  return (
+    <ActiveSpanContext.Provider value={value}>
+      {children}
+    </ActiveSpanContext.Provider>
+  );
+}
+
+export const useActiveSpan = (): ActiveSpanContextValue => {
+  const context = useContext(ActiveSpanContext);
+  if (!context) {
+    throw new Error('useActiveSpan must be used within ActiveSpanProvider');
+  }
+
+  return context;
+};