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

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

@@ -0,0 +1,186 @@
+'use client';
+
+import {
+  Children,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/utils';
+
+/** Wide enough for comfortable dragging; visual line stays 1px centered. */
+const GUTTER_PX = 9;
+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 content-start 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,378 @@
+'use client';
+
+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, TimeCompression } from '../utils';
+import {
+  computeCompressedTimeMarkers,
+  computeSpanGaps,
+  computeSpanSegments,
+  computeTimeMarkers,
+  getResourceColor,
+} from '../utils';
+
+const QUEUED_BACKGROUND =
+  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
+
+const HATCHED_BACKGROUND =
+  'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
+
+const SEGMENT_CONFIG: Record<
+  SegmentStatus,
+  { className?: string; style?: React.CSSProperties }
+> = {
+  queued: { style: { background: QUEUED_BACKGROUND } },
+  retrying: {
+    className: 'box-border bg-gray-500',
+  },
+  waiting: { style: { background: HATCHED_BACKGROUND } },
+  running: { className: 'bg-blue-700' },
+  failed: { className: 'bg-red-700' },
+  succeeded: { className: 'bg-green-700' },
+  sleeping: { className: 'bg-amber-700' },
+  received: { className: 'bg-blue-700' },
+};
+
+const FIXED_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 = 34;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+
+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,
+  compression,
+  containerWidth,
+  isSelected,
+  onClick,
+}: {
+  span: Span;
+  compression: TimeCompression;
+  containerWidth: number;
+  isSelected: boolean;
+  onClick: () => void;
+}): ReactNode {
+  const startTime = getHighResInMs(span.startTime);
+  const endTime = getHighResInMs(span.endTime);
+  const totalDurationMs = endTime - startTime;
+
+  const leftFrac = compression.toVisual(startTime);
+  const rightFrac = compression.toVisual(endTime);
+  const widthFrac = rightFrac - leftFrac;
+
+  const leftPct = leftFrac * 100;
+  const widthPct = widthFrac * 100;
+
+  const pixelWidth = widthFrac * containerWidth;
+  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const [isRowHovered, setIsRowHovered] = useState(false);
+
+  const segments = useMemo(() => computeSpanSegments(span), [span]);
+  const finalSegment = segments[segments.length - 1];
+
+  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 compressedSegmentStatus = isErrored
+    ? 'failed'
+    : span.resource === 'hook'
+      ? 'received'
+      : finalSegment?.status;
+  const compressedSegmentStyle =
+    compressedSegmentStatus === 'queued'
+      ? { background: 'var(--ds-gray-500)' }
+      : compressedSegmentStatus
+        ? SEGMENT_CONFIG[compressedSegmentStatus].style
+        : undefined;
+  const compressedSegmentClassName = compressedSegmentStatus
+    ? SEGMENT_CONFIG[compressedSegmentStatus].className
+    : undefined;
+
+  const hasCompressedStatus = Boolean(
+    compressedSegmentClassName || compressedSegmentStyle
+  );
+  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 barContent = isCompressed ? (
+    <div
+      className={cn(
+        'relative h-4 rounded-[0.25rem] top-[3px]',
+        compressedSegmentClassName
+      )}
+      style={{
+        width: '100%',
+        background: hasCompressedStatus ? undefined : fallbackColor,
+        ...compressedSegmentStyle,
+      }}
+    >
+      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+    </div>
+  ) : segments.length > 0 ? (
+    <div className="relative w-full h-4 top-[3px]">
+      {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-4 rounded-[0.25rem] top-[3px]"
+      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-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
+      )}
+      onMouseEnter={() => setIsRowHovered(true)}
+      onMouseLeave={() => setIsRowHovered(false)}
+      onClick={onClick}
+    >
+      <div
+        className="absolute top-1.5 h-[22px] rounded-sm"
+        style={{
+          left: isCompressed
+            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+            : `${leftPct}%`,
+          width: isCompressed
+            ? `${FIXED_BAR_WIDTH_PX}px`
+            : `max(${widthPct}%, 4px)`,
+        }}
+      >
+        {barContent}
+      </div>
+    </div>
+  );
+});
+
+export { TimelineBar };
+
+export function TimelineHeader({
+  viewStart,
+  viewDuration,
+  rootStart,
+  compression,
+  isZoomed,
+  onResetZoom,
+  hoverInfo,
+}: {
+  viewStart: number;
+  viewDuration: number;
+  rootStart: number;
+  compression: TimeCompression;
+  isZoomed: boolean;
+  onResetZoom: () => void;
+  hoverInfo?: { fraction: number; label: string } | null;
+}): ReactNode {
+  const viewEnd = viewStart + viewDuration;
+
+  const markers = useMemo(
+    () =>
+      compression.isCompressed
+        ? computeCompressedTimeMarkers(
+            compression,
+            viewStart,
+            viewEnd,
+            rootStart
+          )
+        : computeTimeMarkers(viewDuration, viewStart - rootStart),
+    [compression, viewStart, viewEnd, viewDuration, rootStart]
+  );
+
+  return (
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1">
+      <div className="relative h-full flex-1">
+        {markers.map((m, i) => (
+          <span
+            key={i}
+            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>
+      {isZoomed && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
+          onClick={onResetZoom}
+        >
+          Reset zoom
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function Timeline({
+  spans,
+  compression,
+  selectedId,
+  onSelect,
+  hoverFraction,
+  altHeld = false,
+}: {
+  spans: Span[];
+  compression: TimeCompression;
+  selectedId: string | null;
+  onSelect: (spanId: string) => void;
+  hoverFraction?: number | null;
+  altHeld?: boolean;
+}): ReactNode {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  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, compression),
+    [spans, compression]
+  );
+
+  return (
+    <div ref={containerRef} className="relative py-2">
+      {hoverFraction != null && (
+        <div
+          className="absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10"
+          style={{ left: `${hoverFraction * 100}%` }}
+        />
+      )}
+      {spans.map((span) => (
+        <TimelineBar
+          key={span.spanId}
+          span={span}
+          compression={compression}
+          containerWidth={containerWidth}
+          isSelected={selectedId === span.spanId}
+          onClick={() => onSelect(span.spanId)}
+        />
+      ))}
+      {altHeld && (
+        <div aria-hidden className="absolute inset-0 pointer-events-none">
+          {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,94 @@
+'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 (spans.length === 0) {
+        return null;
+      }
+
+      if (currentSpanId) {
+        const hasCurrentSpan = spans.some(
+          (span) => span.spanId === currentSpanId
+        );
+        if (hasCurrentSpan) {
+          return currentSpanId;
+        }
+      }
+
+      return spans[0].spanId;
+    });
+  }, [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;
+};

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+
+interface DetailPanelProps {
+  span: Span;
+  rootStart: number;
+  onClose: () => void;
+}
+
+export function DetailPanel({
+  span,
+  rootStart,
+  onClose,
+}: DetailPanelProps): ReactNode {
+  const startMs = getHighResInMs(span.startTime);
+  const durationMs = getHighResInMs(span.duration);
+  const offsetMs = startMs - rootStart;
+
+  return (
+    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200">
+      <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
+        <span className="text-sm font-medium text-gray-1000 truncate">
+          {span.name}
+        </span>
+        <button
+          type="button"
+          className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors"
+          onClick={onClose}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+      <div className="overflow-y-auto p-3 space-y-3">
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
+          <dt className="text-gray-900">Resource</dt>
+          <dd className="text-gray-1000 font-mono">{span.resource}</dd>
+          <dt className="text-gray-900">Duration</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            {formatDuration(durationMs)}
+          </dd>
+          <dt className="text-gray-900">Offset</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            +{formatDuration(offsetMs)}
+          </dd>
+          <dt className="text-gray-900">Status</dt>
+          <dd className="text-gray-1000 font-mono">
+            {span.status.code === 2 ? 'Error' : 'OK'}
+          </dd>
+        </dl>
+      </div>
+    </aside>
+  );
+}