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

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/cn';
+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 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

@@ -3,40 +3,37 @@
 import {
   Children,
   type ReactNode,
-  type PointerEvent as ReactPointerEvent,
+  type RefObject,
   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;
+import { cn } from '../../../lib/cn';
+import { DraggableBorder } from './draggable-border';
+import {
+  DEFAULT_START_PX,
+  GUTTER_PX,
+  MIN_PX,
+  paneColTemplate,
+} from './pane-constants';
+import { useElementWidth } from './use-element-width';
 
-export function Divider() {
-  return <div aria-hidden className="h-full w-px shrink-0 bg-gray-alpha-400" />;
-}
+const SPLIT_PANE_START_ID = 'trace-split-start';
 
 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) {
@@ -44,19 +41,20 @@ export function SplitPane({
   }
   const [start, end] = parts;
 
-  const [startPx, setStartPx] = useState(defaultStartWidth);
-  const [isDragging, setIsDragging] = useState(false);
+  const [startPx, setStartPx] = useState(DEFAULT_START_PX);
   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 startRef = useRef<HTMLDivElement>(null);
+  const containerWidth = useElementWidth(containerRef);
+
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (scrollContainerRef) {
+        scrollContainerRef.current = node;
+      }
+    },
+    [scrollContainerRef]
+  );
 
   const clampPx = useCallback((px: number) => {
     const el = containerRef.current;
@@ -65,122 +63,69 @@ export function SplitPane({
     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 handleWidthChange = useCallback(
+    (next: number) => setStartPx(clampPx(next)),
+    [clampPx]
+  );
+  const handleReset = useCallback(
+    () => setStartPx(clampPx(DEFAULT_START_PX)),
+    [clampPx]
+  );
 
-  const handleLostPointerCapture = () => {
-    pointerIdRef.current = null;
-    setIsDragging(false);
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-  };
+  const effectiveStartPx =
+    containerWidth > 0
+      ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx))
+      : startPx;
 
-  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
-  const hasHeaders = startHeader != null || endHeader != null;
+  const colTemplate = paneColTemplate(effectiveStartPx);
 
-  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>
+  const maxStartPx = Math.max(
+    MIN_PX,
+    containerWidth > 0 ? containerWidth - MIN_PX - GUTTER_PX : startPx
   );
 
-  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>
+  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
-          ref={containerRef}
-          className={cn(
-            'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',
-            isDragging && 'select-none'
-          )}
-          style={{ gridTemplateColumns: colTemplate }}
-        >
+        <div>{endHeader}</div>
+      </div>
+      <div
+        ref={setContainerRef}
+        className="grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto"
+        style={{ gridTemplateColumns: colTemplate }}
+      >
+        <div ref={startRef} id={SPLIT_PANE_START_ID} className="min-w-0">
           {start}
-          {gutter}
-          {end}
         </div>
+        <div className="relative z-20 isolate flex shrink-0 justify-center">
+          <span
+            className="pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400"
+            aria-hidden
+          />
+          <DraggableBorder
+            element={startRef}
+            position="right"
+            onWidthChange={handleWidthChange}
+            onReset={handleReset}
+            aria-label="Resize event list"
+            aria-controls={SPLIT_PANE_START_ID}
+            aria-valuemin={MIN_PX}
+            aria-valuemax={maxStartPx}
+            aria-valuenow={Math.min(
+              Math.max(Math.round(effectiveStartPx), MIN_PX),
+              maxStartPx
+            )}
+          />
+        </div>
+        {end}
       </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.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;
+  }
+}