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

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

@@ -0,0 +1,173 @@
+'use client';
+
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { cn } from '../../../lib/utils';
+import { TimestampTooltip } from '../../ui/timestamp-tooltip';
+import type { SpanMarker } from '../utils';
+
+// ---------------------------------------------------------------------------
+// Marker projection
+// ---------------------------------------------------------------------------
+
+export interface VisibleMarker {
+  leftPct: number;
+  /** Absolute (epoch) timestamp in ms — for the tooltip. */
+  timeMs: number;
+}
+
+/**
+ * Project point-in-time markers onto the visible window `[visibleStartMs,
+ * visibleEndMs]` of a bar, as percentages of that window. Markers outside the
+ * window are dropped.
+ */
+export function projectMarkers(
+  markers: SpanMarker[],
+  visibleStartMs: number,
+  visibleEndMs: number
+): VisibleMarker[] {
+  const visibleDurationMs = visibleEndMs - visibleStartMs;
+  if (visibleDurationMs <= 0) return [];
+
+  return markers.flatMap((m) => {
+    if (m.timeMs < visibleStartMs || m.timeMs > visibleEndMs) {
+      return [];
+    }
+    return [
+      {
+        leftPct: ((m.timeMs - visibleStartMs) / visibleDurationMs) * 100,
+        timeMs: m.timeMs,
+      },
+    ];
+  });
+}
+
+/** Min pixel gap a tick needs from the last-kept one, else it's culled. */
+const MARKER_MIN_GAP_PX = 16;
+
+/**
+ * Thin out ticks that would visually collide: walk left-to-right and keep each
+ * one unless it sits within MARKER_MIN_GAP_PX of the last kept tick. Well-spaced
+ * markers survive even when a tight cluster elsewhere on the bar gets thinned —
+ * zoom in to resolve a cluster.
+ */
+export function cullCollidingMarkers(
+  projected: VisibleMarker[],
+  pixelWidth: number
+): VisibleMarker[] {
+  const kept: VisibleMarker[] = [];
+  let lastKeptPct = Number.NEGATIVE_INFINITY;
+  for (const m of projected) {
+    const gapPx = ((m.leftPct - lastKeptPct) / 100) * pixelWidth;
+    if (gapPx < MARKER_MIN_GAP_PX) continue;
+    kept.push(m);
+    lastKeptPct = m.leftPct;
+  }
+  return kept;
+}
+
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+
+/** Marker glyph: a rounded vertical tick (3px wide). */
+function MarkerTick({ className }: { className?: string }): ReactNode {
+  return (
+    <span
+      className={cn('block w-[3px] rounded-full bg-gray-1000', className)}
+    />
+  );
+}
+
+/**
+ * Point-in-time markers overlaid on a bar — one vertical tick per event (hook
+ * resumptions and attribute writes), centered on the bar. Each tick sits inside
+ * a larger hit target and, on hover, shows the shared `TimestampTooltip` card
+ * (the same light Geist card used for every other timestamp in the app, e.g. the
+ * attribute panel and event list) so the time reads consistently with the rest
+ * of the product. The position is clamped a hair inside the bar so an edge
+ * marker never jams the rounded corner.
+ */
+export function MarkerLayer({
+  markers,
+}: {
+  markers: VisibleMarker[];
+}): ReactNode {
+  return (
+    <>
+      {markers.map((m) => (
+        <span
+          key={m.timeMs}
+          className="pointer-events-auto absolute top-0 bottom-0 z-10 flex w-8 -translate-x-1/2 items-center justify-center"
+          style={{ left: `clamp(8px, ${m.leftPct}%, calc(100% - 8px))` }}
+        >
+          <TimestampTooltip date={m.timeMs}>
+            <span className="flex h-6 w-8 items-center justify-center">
+              <MarkerTick className="h-3" />
+            </span>
+          </TimestampTooltip>
+        </span>
+      ))}
+    </>
+  );
+}
+
+/**
+ * Edge indicator for markers that have scrolled out of view while zoomed in.
+ * Pinned flush to the corresponding edge of the visible bar, it shows the marker
+ * glyph plus a chevron pointing the way to scroll. The chevron always sits on
+ * the outer (off-screen) side, in a box that lines up with the bare
+ * BoundaryArrow on adjacent rows.
+ */
+export function OffscreenMarkerIndicator({
+  direction,
+  count,
+  targetMs,
+  onReveal,
+}: {
+  direction: 'left' | 'right';
+  count: number;
+  targetMs: number;
+  onReveal?: (timeMs: number) => void;
+}): ReactNode {
+  const Chevron = direction === 'right' ? ArrowRight : ArrowLeft;
+  const label = `${count} marker${count === 1 ? '' : 's'} ${
+    direction === 'right' ? 'ahead' : 'behind'
+  } — click to scroll to ${count === 1 ? 'it' : 'the nearest'}`;
+  const chevron = (
+    <span className="flex h-6 w-6 shrink-0 items-center justify-center">
+      <Chevron className="size-3 text-gray-900" />
+    </span>
+  );
+  const tick = <MarkerTick className="h-3.5 shrink-0" />;
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={(e) => {
+        // Don't let the row's onClick fire — revealing shouldn't also
+        // change the span selection.
+        e.stopPropagation();
+        onReveal?.(targetMs);
+      }}
+      className={cn(
+        'pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 shadow-sm hover:bg-gray-100',
+        direction === 'right' ? 'right-0 pl-1.5' : 'left-0 pr-1.5'
+      )}
+    >
+      {direction === 'left' ? (
+        <>
+          {chevron}
+          {tick}
+        </>
+      ) : (
+        <>
+          {tick}
+          {chevron}
+        </>
+      )}
+    </button>
+  );
+}

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

@@ -0,0 +1,198 @@
+'use client';
+
+import {
+  Children,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  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;
+  scrollContainerRef?: RefObject<HTMLDivElement | null>;
+}
+
+export function SplitPane({
+  children,
+  className,
+  defaultStartWidth = DEFAULT_START_PX,
+  startHeader,
+  endHeader,
+  scrollContainerRef,
+}: 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 setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (scrollContainerRef) {
+        scrollContainerRef.current = node;
+      }
+    },
+    [scrollContainerRef]
+  );
+
+  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={setContainerRef}
+          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={setContainerRef}
+      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.module.css

@@ -0,0 +1,46 @@
+.runningStripes,
+.pendingStripes {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: 0.25rem;
+  opacity: 0.5;
+  background-size: 11.314px 11.314px;
+  animation: running-stripes 0.6s linear infinite;
+}
+
+.runningStripes {
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--ds-blue-500) 0,
+    var(--ds-blue-500) 1.5px,
+    transparent 1.5px,
+    transparent 8px
+  );
+}
+
+.pendingStripes {
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--ds-gray-500) 0,
+    var(--ds-gray-500) 1.5px,
+    transparent 1.5px,
+    transparent 8px
+  );
+}
+
+@keyframes running-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 11.314px 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runningStripes,
+  .pendingStripes {
+    animation: none;
+  }
+}