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

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

@@ -1,116 +0,0 @@
-import { Circle } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-import type { Span } from '../../trace-viewer/types';
-import { formatDuration } from '../../trace-viewer/util/timing';
-import {
-  WorkflowIcon,
-  WebhookIcon,
-  SleepIcon,
-  StepForwardIcon,
-} from '../icons';
-import { getSpanDurationMs } from '../utils';
-import { MiddleTruncate } from './middle-truncate/middle-truncate';
-
-interface EventStyle {
-  icon: React.ComponentType<{ className?: string }>;
-  className: string;
-}
-
-const eventStyles: Record<string, EventStyle> = {
-  run: { icon: WorkflowIcon, className: 'text-blue-900' },
-  step: { icon: StepForwardIcon, className: 'text-green-900' },
-  hook: { icon: WebhookIcon, className: 'text-yellow-900' },
-  sleep: { icon: SleepIcon, className: 'text-gray-900' },
-};
-
-const defaultStyle: EventStyle = {
-  icon: Circle,
-  className: 'text-gray-900',
-};
-
-const ROW_HEIGHT_CLASS = 'h-10';
-
-function getEventStyle(resource: string, isErrored: boolean): EventStyle {
-  const style = eventStyles[resource] ?? defaultStyle;
-  return {
-    icon: style.icon,
-    className: cn(isErrored ? 'text-red-900' : style.className),
-  };
-}
-
-const EventRow = ({
-  span,
-  isSelected,
-  onSelectSpan,
-}: {
-  span: Span;
-  isSelected: boolean;
-  onSelectSpan: (spanId: string) => void;
-}) => {
-  const durationMs = getSpanDurationMs(span);
-  const isErrored =
-    (span.attributes.data as Record<string, unknown>).status === 'failed';
-  const { icon: Icon, className: tagClassName } = getEventStyle(
-    span.resource,
-    isErrored
-  );
-
-  return (
-    <li
-      className={cn(
-        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',
-        ROW_HEIGHT_CLASS
-      )}
-      role='treeitem'
-      aria-selected={isSelected}
-      aria-expanded={isSelected}
-      aria-level={1}
-      onClick={() => onSelectSpan(span.spanId)}
-    >
-      <div className='h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'>
-        <div className='flex h-full min-w-0 items-center px-2'>
-          <div className='flex min-w-0 flex-1 items-center gap-2'>
-            <span className={cn('shrink-0', tagClassName)}>
-              <Icon className='w-4 h-4' />
-            </span>
-            <span className='min-w-0 text-label-14'>
-              <MiddleTruncate value={span.name} />
-            </span>
-          </div>
-          <div className='ml-2 shrink-0'>
-            <span className='text-label-14 text-gray-900 tabular-nums'>
-              {formatDuration(durationMs)}
-            </span>
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
-
-const EventList = ({
-  spans,
-  activeSpanId,
-  onSelectSpan,
-}: {
-  spans: Span[];
-  activeSpanId: string | null;
-  onSelectSpan: (spanId: string) => void;
-}) => {
-  return (
-    <ul id='event-list' role='tree' className='block min-h-0 overflow-visible'>
-      {spans.map((span) => {
-        return (
-          <EventRow
-            key={span.spanId}
-            span={span}
-            isSelected={span.spanId === activeSpanId}
-            onSelectSpan={onSelectSpan}
-          />
-        );
-      })}
-    </ul>
-  );
-};
-
-export default EventList;

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

@@ -1,185 +0,0 @@
-'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

@@ -1,382 +0,0 @@
-'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>
-  );
-}