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

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

@@ -1,84 +0,0 @@
-'use client';
-
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
-import { AlertCircle } from 'lucide-react';
-import type { SpanSelectionInfo } from './sidebar/entity-detail-panel';
-import { WorkflowTraceViewer } from './workflow-trace-view';
-
-interface RunTraceViewProps {
-  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>;
-  onCancelRun?: (runId: string) => Promise<void>;
-  onStreamClick?: (streamId: string) => void;
-  onRunClick?: (runId: string) => void;
-  onSpanSelect?: (info: SpanSelectionInfo) => void;
-  onLoadMoreSpans?: () => void | Promise<void>;
-  hasMoreSpans?: boolean;
-  isLoadingMoreSpans?: boolean;
-}
-
-export function RunTraceView({
-  run,
-  events,
-  isLoading,
-  error,
-  spanDetailData,
-  spanDetailLoading,
-  spanDetailError,
-  onWakeUpSleep,
-  onResolveHook,
-  onCancelRun,
-  onStreamClick,
-  onRunClick,
-  onSpanSelect,
-  onLoadMoreSpans,
-  hasMoreSpans,
-  isLoadingMoreSpans,
-}: 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}
-        spanDetailData={spanDetailData}
-        spanDetailLoading={spanDetailLoading}
-        spanDetailError={spanDetailError}
-        onWakeUpSleep={onWakeUpSleep}
-        onResolveHook={onResolveHook}
-        onCancelRun={onCancelRun}
-        onStreamClick={onStreamClick}
-        onRunClick={onRunClick}
-        onSpanSelect={onSpanSelect}
-        onLoadMoreSpans={onLoadMoreSpans}
-        hasMoreSpans={hasMoreSpans}
-        isLoadingMoreSpans={isLoadingMoreSpans}
-      />
-    </div>
-  );
-}

package/src/components/sidebar/detail-card.tsx

@@ -1,65 +0,0 @@
-import { ChevronRight } from 'lucide-react';
-import type { ReactNode } from 'react';
-
-export function DetailCard({
-  summary,
-  children,
-  onToggle,
-  disabled = false,
-  summaryClassName,
-  contentClassName,
-}: {
-  summary: ReactNode;
-  children?: ReactNode;
-  /** Called when the detail card is expanded/collapsed */
-  onToggle?: (open: boolean) => void;
-  /** Renders a non-expandable summary card when true. */
-  disabled?: boolean;
-  /** Extra classes for the summary row. */
-  summaryClassName?: string;
-  /** Extra classes for expanded content wrapper. */
-  contentClassName?: string;
-}) {
-  if (disabled) {
-    return (
-      <div
-        className={`rounded-md border px-2.5 py-1.5 text-xs ${summaryClassName ?? ''}`}
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-700)',
-          cursor: 'not-allowed',
-          opacity: 0.8,
-        }}
-      >
-        {summary}
-      </div>
-    );
-  }
-
-  return (
-    <details
-      className="group"
-      onToggle={(e) => onToggle?.((e.target as HTMLDetailsElement).open)}
-    >
-      <summary
-        className={`cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ''}`}
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-          color: 'var(--ds-gray-900)',
-          listStyle: 'none',
-        }}
-      >
-        <span className="flex items-center gap-1.5">
-          <ChevronRight
-            size={14}
-            className="shrink-0 transition-transform group-open:rotate-90"
-          />
-          {summary}
-        </span>
-      </summary>
-      <div className={`mt-2 ${contentClassName ?? ''}`}>{children}</div>
-    </details>
-  );
-}

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

@@ -1,226 +0,0 @@
-import {
-  type MutableRefObject,
-  memo,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import { useTraceViewer } from '../context';
-import styles from '../trace-viewer.module.css';
-import type { VisibleSpan } from '../types';
-import { MAP_HEIGHT, TIMELINE_PADDING } from '../util/constants';
-import { useImmediateStyle } from '../util/use-immediate-style';
-
-const getDpi = (): number => {
-  if ('devicePixelRatio' in globalThis) {
-    return globalThis.devicePixelRatio || 1;
-  }
-  return 1;
-};
-
-const useDpi = (): number => {
-  const [dpi, setDpi] = useState(1);
-  useLayoutEffect(() => {
-    const onChange = (): void => setDpi(getDpi());
-    const media = matchMedia(`(resolution: ${dpi}dppx)`);
-    media.addEventListener('change', onChange);
-    onChange();
-
-    return () => {
-      media.removeEventListener('change', onChange);
-    };
-  }, [dpi]);
-  return dpi;
-};
-
-const padding = TIMELINE_PADDING;
-
-export const MiniMap = memo(function MiniMap({
-  timelineRef,
-  rows,
-  scale,
-}: {
-  timelineRef: MutableRefObject<HTMLDivElement | null>;
-  rows: VisibleSpan[][];
-  scale: number;
-}) {
-  const {
-    state: { root, baseScale, timelineWidth, width: fullWidth, scrollbarWidth },
-  } = useTraceViewer();
-  const mapWidth = fullWidth + TIMELINE_PADDING * 2;
-  const dpi = useDpi();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  const thumbRatio =
-    (fullWidth / (fullWidth - scrollbarWidth)) *
-    Math.min(fullWidth / timelineWidth, baseScale / scale);
-  const thumbWidth = Math.min(
-    fullWidth,
-    (timelineWidth - scrollbarWidth) * thumbRatio
-  );
-  useEffect(() => {
-    let isHeld = false;
-    let clientX = 0;
-    let rect: DOMRect | undefined;
-
-    const isValidEventTarget = (target: EventTarget | null): boolean => {
-      return Boolean(containerRef.current?.contains(target as HTMLElement));
-    };
-
-    let nextFrame = 0;
-    const onFrame = (): void => {
-      if (!isHeld || !rect) return;
-      const $timeline = timelineRef.current;
-      if (!$timeline) return;
-
-      const x = clientX - thumbWidth * 0.5 - rect.left;
-      $timeline.scrollLeft = x / thumbRatio;
-    };
-
-    const onPointerMove = (event: PointerEvent): void => {
-      ({ clientX } = event);
-      cancelAnimationFrame(nextFrame);
-      nextFrame = requestAnimationFrame(onFrame);
-    };
-
-    const onPointerDown = (event: PointerEvent): void => {
-      if (!isValidEventTarget(event.target)) return;
-      isHeld = true;
-      rect = containerRef.current?.getBoundingClientRect();
-      onPointerMove(event);
-    };
-
-    const onPointerUp = (): void => {
-      isHeld = false;
-      rect = undefined;
-    };
-
-    const onTouchStart = (event: TouchEvent): void => {
-      if (!isValidEventTarget(event.target)) return;
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-    };
-    const onTouchMove = (event: TouchEvent): void => {
-      if (!isHeld) return;
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-    };
-
-    window.addEventListener('pointerdown', onPointerDown);
-    window.addEventListener('pointermove', onPointerMove);
-    window.addEventListener('pointerup', onPointerUp);
-    window.addEventListener('blur', onPointerUp);
-    window.addEventListener('touchstart', onTouchStart, { passive: false });
-    window.addEventListener('touchmove', onTouchMove, { passive: false });
-
-    return () => {
-      window.removeEventListener('pointerdown', onPointerDown);
-      window.removeEventListener('pointermove', onPointerMove);
-      window.removeEventListener('pointerup', onPointerUp);
-      window.removeEventListener('blur', onPointerUp);
-      window.removeEventListener('touchstart', onTouchStart);
-      window.removeEventListener('touchmove', onTouchMove);
-      cancelAnimationFrame(nextFrame);
-    };
-  }, [timelineRef, thumbRatio, thumbWidth]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    const render = (): void => {
-      ctx.resetTransform();
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.scale(dpi, dpi);
-
-      const gap = 1;
-      const height = 3;
-      const ratio = (mapWidth - padding * 2) / root.duration;
-
-      // TODO: fill spans based on depth
-      ctx.fillStyle = '#ccc';
-      ctx.beginPath();
-      for (const row of rows) {
-        for (const span of row) {
-          const y = padding - gap + (gap + height) * span.row;
-          if (y >= MAP_HEIGHT - height - padding) break;
-
-          const x = padding + (span.startTime - root.startTime) * ratio;
-          const width = span.duration * ratio;
-
-          ctx.roundRect(x, y, width, height, height);
-        }
-      }
-      ctx.fill();
-    };
-
-    const nextFrame = requestAnimationFrame(render);
-
-    return () => cancelAnimationFrame(nextFrame);
-  }, [dpi, root, mapWidth, rows]);
-
-  const thumbRef = useRef<HTMLDivElement>(null);
-  const { style: thumbStyle, setStyle: setThumbStyle } =
-    useImmediateStyle(thumbRef);
-  useLayoutEffect(() => {
-    const $timeline = timelineRef.current;
-    if (!$timeline) return;
-
-    let nextFrame = 0;
-    const onFrame = (): void => {
-      setThumbStyle(
-        'transform',
-        `translateX(${padding + $timeline.scrollLeft * thumbRatio}px)`
-      );
-    };
-    onFrame();
-
-    const onScroll = (): void => {
-      cancelAnimationFrame(nextFrame);
-      nextFrame = requestAnimationFrame(onFrame);
-    };
-    $timeline.addEventListener('scroll', onScroll);
-
-    return () => {
-      cancelAnimationFrame(nextFrame);
-      $timeline.removeEventListener('scroll', onScroll);
-    };
-  }, [timelineRef, thumbRatio, setThumbStyle]);
-
-  return (
-    <div
-      className={styles.mapContainer}
-      ref={containerRef}
-      style={{
-        width: thumbWidth > 0 ? mapWidth : '100%',
-        height: MAP_HEIGHT,
-      }}
-    >
-      <canvas
-        className={styles.mapCanvas}
-        height={MAP_HEIGHT * dpi}
-        ref={canvasRef}
-        style={{ width: mapWidth, height: MAP_HEIGHT }}
-        width={mapWidth * dpi}
-      />
-      <div
-        className={styles.mapThumb}
-        ref={thumbRef}
-        style={{
-          transform: thumbStyle.transform,
-          width:
-            thumbWidth > 0
-              ? thumbWidth
-              : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
-          top: 2,
-          height: MAP_HEIGHT - 4,
-        }}
-      />
-    </div>
-  );
-});