@workflow/web-shared 5.0.0-beta.27 → 5.0.0-beta.28

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

@@ -12,13 +12,17 @@ import {
 } from 'react';
 import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import {
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
 import { Kbd } from '../ui/kbd';
 import { Spinner } from '../ui/spinner';
 import { TooltipProvider } from '../ui/tooltip';
 import { TraceDetailPanel } from './components/detail-panel';
 import EventList from './components/event-list';
+import { Minimap } from './components/minimap';
 import { SplitPane } from './components/split-pane';
 import {
   TIMELINE_PADDING_PX,
@@ -30,7 +34,14 @@ import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { searchSpans } from './search';
 import type { TraceWithMeta } from './types';
-import { computeRootBounds, computeTimeMarkers } from './utils';
+import {
+  clampViewportToRoot,
+  computeRootBounds,
+  computeTimeMarkers,
+  type ViewportRange,
+  wheelDeltaToPixels,
+  wheelZoomScaleFactor,
+} from './utils';
 
 interface NewTraceViewerProps {
   trace: TraceWithMeta;
@@ -43,17 +54,12 @@ const MIN_VIEWPORT_MS = 0.001;
 
 const ZOOM_DEBOUNCE_MS = 150;
 
-interface Viewport {
-  start: number;
-  end: number;
-}
-
-function useAnimatedViewport(initial: Viewport) {
-  const [viewport, setViewportState] = useState<Viewport>(initial);
+function useAnimatedViewport(initial: ViewportRange) {
+  const [viewport, setViewportState] = useState<ViewportRange>(initial);
   const animRef = useRef<{
     raf: number;
-    from: Viewport;
-    to: Viewport;
+    from: ViewportRange;
+    to: ViewportRange;
     start: number;
   } | null>(null);
   const currentRef = useRef(initial);
@@ -68,7 +74,7 @@ function useAnimatedViewport(initial: Viewport) {
   }, []);
 
   const animateTo = useCallback(
-    (target: Viewport) => {
+    (target: ViewportRange) => {
       cancel();
 
       if (reducedMotion) {
@@ -98,7 +104,7 @@ function useAnimatedViewport(initial: Viewport) {
   );
 
   const setViewport = useCallback(
-    (update: Viewport | ((prev: Viewport) => Viewport)) => {
+    (update: ViewportRange | ((prev: ViewportRange) => ViewportRange)) => {
       cancel();
       if (typeof update === 'function') {
         setViewportState((prev) => {
@@ -180,7 +186,7 @@ function NewTraceViewerContent({
     end: root.startTime + root.duration,
   });
 
-  const prevRootRef = useRef<Viewport>({
+  const prevRootRef = useRef<ViewportRange>({
     start: root.startTime,
     end: root.startTime + root.duration,
   });
@@ -221,60 +227,45 @@ function NewTraceViewerContent({
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  const clampToRoot = useCallback(
+    (next: ViewportRange): ViewportRange =>
+      clampViewportToRoot(next, root.startTime, root.endTime, MIN_VIEWPORT_MS),
+    [root.startTime, root.endTime]
+  );
+
   // Pan (keeping the current zoom) so `timeMs` is centered in view — used by the
   // off-screen marker indicators to scroll their marker into view.
   const handleRevealTime = useCallback(
     (timeMs: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
       const { start, end } = viewportRef.current;
       const duration = end - start;
-      let newStart = timeMs - duration / 2;
-      let newEnd = timeMs + duration / 2;
-      if (newStart < rootS) {
-        newStart = rootS;
-        newEnd = rootS + duration;
-      }
-      if (newEnd > rootE) {
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(
+        clampToRoot({
+          start: timeMs - duration / 2,
+          end: timeMs + duration / 2,
+        })
+      );
     },
-    [animateTo, root.startTime, root.duration]
+    [animateTo, clampToRoot]
   );
 
   const ZOOM_FACTOR = 0.5;
 
   const zoomBy = useCallback(
     (factor: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
       setViewport((prev) => {
-        const prevDuration = prev.end - prev.start;
         const center = (prev.start + prev.end) / 2;
         const newDuration = Math.max(
           MIN_VIEWPORT_MS,
-          Math.min(rootD, prevDuration * factor)
+          (prev.end - prev.start) * factor
         );
-        let newStart = center - newDuration / 2;
-        let newEnd = center + newDuration / 2;
-
-        if (newStart < rootS) {
-          newStart = rootS;
-          newEnd = rootS + newDuration;
-        }
-        if (newEnd > rootE) {
-          newEnd = rootE;
-          newStart = Math.max(rootS, rootE - newDuration);
-        }
-
-        return { start: newStart, end: newEnd };
+        return clampToRoot({
+          start: center - newDuration / 2,
+          end: center + newDuration / 2,
+        });
       });
     },
-    [setViewport, root.startTime, root.duration]
+    [setViewport, clampToRoot]
   );
 
   const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
@@ -291,12 +282,8 @@ function NewTraceViewerContent({
       const spanEnd = getHighResInMs(span.endTime);
       const spanDuration = spanEnd - spanStart;
 
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
-      if (spanDuration > rootD * 0.8) {
-        animateTo({ start: rootS, end: rootE });
+      if (spanDuration > root.duration * 0.8) {
+        animateTo({ start: root.startTime, end: root.endTime });
         return;
       }
 
@@ -310,20 +297,16 @@ function NewTraceViewerContent({
         newEnd = center + MIN_VIEWPORT_MS / 2;
       }
 
-      if (newStart < rootS) {
-        const duration = newEnd - newStart;
-        newStart = rootS;
-        newEnd = Math.min(rootE, rootS + duration);
-      }
-      if (newEnd > rootE) {
-        const duration = newEnd - newStart;
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(clampToRoot({ start: newStart, end: newEnd }));
     },
-    [animateTo, trace.spans, root.startTime, root.duration]
+    [
+      animateTo,
+      trace.spans,
+      root.startTime,
+      root.endTime,
+      root.duration,
+      clampToRoot,
+    ]
   );
 
   // Bring a row into view when keyboard/button navigation lands on a span that
@@ -423,7 +406,7 @@ function NewTraceViewerContent({
     if (hoverFraction == null) return null;
     const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
-    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+    return { fraction: hoverFraction, label: formatDurationPrecise(offset) };
   }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
@@ -451,12 +434,7 @@ function NewTraceViewerContent({
 
   useEffect(() => {
     const el = timelineRef.current;
-    if (!el) return;
-
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
-    if (rootD <= 0) return;
+    if (!el || root.duration <= 0) return;
 
     const onWheel = (e: WheelEvent): void => {
       const isZoomGesture = e.ctrlKey || e.metaKey;
@@ -470,9 +448,6 @@ function NewTraceViewerContent({
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
-        let dy = e.deltaY;
-        if (e.deltaMode === 1) dy *= 16;
-
         const cursorFraction = Math.max(
           0,
           Math.min(
@@ -480,59 +455,37 @@ function NewTraceViewerContent({
             (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
           )
         );
-        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
-        const scaleFactor = 2 ** (dy / (isMouseWheel ? 200 : 60));
+        const scaleFactor = wheelZoomScaleFactor(e);
 
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
+          // Clamp the duration before anchoring so the cursor keeps its
+          // fraction even when the zoom hits the min/max bounds.
           const newDuration = Math.max(
             MIN_VIEWPORT_MS,
-            Math.min(rootD, prevDuration * scaleFactor)
+            Math.min(root.duration, prevDuration * scaleFactor)
           );
-
-          let newStart = cursorTime - cursorFraction * newDuration;
-          let newEnd = newStart + newDuration;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + newDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - newDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          return clampToRoot({
+            start: cursorTime - cursorFraction * newDuration,
+            end: cursorTime + (1 - cursorFraction) * newDuration,
+          });
         });
       } else {
-        let dx = e.deltaX;
-        if (e.deltaMode === 1) dx *= 16;
-
+        const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
         setViewport((prev) => {
-          const prevDuration = prev.end - prev.start;
-          const panAmount = (dx / contentWidth) * prevDuration;
-
-          let newStart = prev.start + panAmount;
-          let newEnd = prev.end + panAmount;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + prevDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - prevDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          const panAmount = (dx / contentWidth) * (prev.end - prev.start);
+          return clampToRoot({
+            start: prev.start + panAmount,
+            end: prev.end + panAmount,
+          });
         });
       }
     };
 
     el.addEventListener('wheel', onWheel, { passive: false });
     return () => el.removeEventListener('wheel', onWheel);
-  }, [root.startTime, root.duration, setViewport]);
+  }, [root.duration, setViewport, clampToRoot]);
 
   return (
     <div
@@ -542,8 +495,16 @@ function NewTraceViewerContent({
     >
       <div
         id="trace-parent"
-        className="flex-1 min-w-0 grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        className="flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
+        <Minimap
+          spans={trace.spans}
+          root={root}
+          viewport={viewport}
+          minViewportMs={MIN_VIEWPORT_MS}
+          onViewportChange={setViewport}
+          onAnimateTo={animateTo}
+        />
         <SplitPane
           scrollContainerRef={scrollContainerRef}
           startHeader={
@@ -603,6 +564,7 @@ function NewTraceViewerContent({
           {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
           <div
             ref={timelineRef}
+            id="trace-timeline"
             className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}

package/src/components/new-trace-viewer/utils.test.ts

@@ -1,9 +1,11 @@
 import { describe, expect, it } from 'vitest';
 import type { Span, SpanEvent } from './types';
 import {
+  clampViewportToRoot,
   computeOffscreenMarkers,
   computeSpanMarkers,
   computeSpanSegments,
+  computeTimeMarkers,
 } from './utils';
 
 /** Build a high-res timestamp tuple ([seconds, nanoseconds]) for a given ms. */
@@ -180,3 +182,66 @@ describe('computeOffscreenMarkers', () => {
     });
   });
 });
+
+describe('clampViewportToRoot', () => {
+  const clamp = (next: { start: number; end: number }) =>
+    clampViewportToRoot(next, 100, 1100, 10);
+
+  it('passes through a window already inside the root', () => {
+    expect(clamp({ start: 200, end: 400 })).toEqual({ start: 200, end: 400 });
+  });
+
+  it('shifts a window past the left edge without changing its duration', () => {
+    expect(clamp({ start: 50, end: 250 })).toEqual({ start: 100, end: 300 });
+  });
+
+  it('shifts a window past the right edge without changing its duration', () => {
+    expect(clamp({ start: 1000, end: 1200 })).toEqual({
+      start: 900,
+      end: 1100,
+    });
+  });
+
+  it('clamps a window wider than the root to the full extent', () => {
+    expect(clamp({ start: 0, end: 5000 })).toEqual({ start: 100, end: 1100 });
+  });
+
+  it('enforces the minimum duration', () => {
+    expect(clamp({ start: 500, end: 502 })).toEqual({ start: 500, end: 510 });
+  });
+
+  it('keeps a minimum-duration window inside the root near the right edge', () => {
+    expect(clamp({ start: 1098, end: 1099 })).toEqual({
+      start: 1090,
+      end: 1100,
+    });
+  });
+});
+
+describe('computeTimeMarkers', () => {
+  it('emits distinct, precise labels across a sub-second-step window', () => {
+    // A ~3s window drops the tick step to 500ms. Before the fix this rendered
+    // duplicate "2s, 2s, 3s, 3s" labels; now each tick is distinct.
+    const labels = computeTimeMarkers(3000, 0).map((m) => m.label);
+    expect(labels).toEqual(['0s', '500ms', '1s', '1.5s', '2s', '2.5s', '3s']);
+    expect(new Set(labels).size).toBe(labels.length);
+  });
+
+  it('keeps clean whole-second labels when the step is >=1s', () => {
+    const labels = computeTimeMarkers(10_000, 0).map((m) => m.label);
+    expect(labels).toEqual(['0s', '2s', '4s', '6s', '8s', '10s']);
+  });
+
+  it('still reads in ms when super zoomed in', () => {
+    const labels = computeTimeMarkers(120, 0).map((m) => m.label);
+    expect(labels).toEqual([
+      '0s',
+      '20ms',
+      '40ms',
+      '60ms',
+      '80ms',
+      '100ms',
+      '120ms',
+    ]);
+  });
+});

package/src/components/new-trace-viewer/utils.ts

@@ -1,4 +1,8 @@
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import {
+  formatDuration,
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
 import type { Span, SpanEvent } from './types';
 
 // ---------------------------------------------------------------------------
@@ -37,6 +41,64 @@ export function getSpanDurationMs(span: Span): number {
   );
 }
 
+export function isSpanErrored(span: Span): boolean {
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  return span.status.code === 2 || workflowStatus === 'failed';
+}
+
+// ---------------------------------------------------------------------------
+// Viewport
+// ---------------------------------------------------------------------------
+
+export interface ViewportRange {
+  start: number;
+  end: number;
+}
+
+/**
+ * Clamp a candidate viewport to the root extent. The requested duration is
+ * preserved where possible (clamped to [minDurationMs, root duration]), then
+ * the window is shifted back inside the root bounds.
+ */
+export function clampViewportToRoot(
+  next: ViewportRange,
+  rootStart: number,
+  rootEnd: number,
+  minDurationMs: number
+): ViewportRange {
+  const rootDuration = Math.max(rootEnd - rootStart, minDurationMs);
+  const duration = Math.min(
+    rootDuration,
+    Math.max(minDurationMs, next.end - next.start)
+  );
+  const maxStart = rootEnd - duration;
+  const start = Math.min(Math.max(next.start, rootStart), maxStart);
+  return { start, end: start + duration };
+}
+
+// ---------------------------------------------------------------------------
+// Wheel gestures — shared between the timeline and the minimap
+// ---------------------------------------------------------------------------
+
+/** Convert a wheel delta to pixel units (line-mode deltas arrive in lines). */
+export function wheelDeltaToPixels(delta: number, deltaMode: number): number {
+  return deltaMode === 1 ? delta * 16 : delta;
+}
+
+/**
+ * Exponential zoom factor for a wheel gesture. Coarse mouse-wheel steps are
+ * damped harder than trackpad pinches so both feel similar.
+ */
+export function wheelZoomScaleFactor(event: {
+  deltaY: number;
+  deltaMode: number;
+}): number {
+  const dy = wheelDeltaToPixels(event.deltaY, event.deltaMode);
+  const isMouseWheel = event.deltaMode === 1 || Math.abs(event.deltaY) >= 50;
+  return 2 ** (dy / (isMouseWheel ? 200 : 60));
+}
+
 // ---------------------------------------------------------------------------
 // Time markers
 // ---------------------------------------------------------------------------
@@ -56,6 +118,8 @@ const NICE_INTERVALS = [
 
 const MAX_MARKERS = 8;
 
+const MS_IN_SECOND = 1000;
+
 function pickInterval(viewDuration: number, maxTicks: number): number {
   for (const interval of NICE_INTERVALS) {
     if (viewDuration / interval <= maxTicks) return interval;
@@ -72,6 +136,13 @@ export function computeTimeMarkers(
   const maxTicks = 6;
   const interval = pickInterval(viewDuration, maxTicks);
 
+  // Sub-second steps need fractional labels, or ticks past 1s collide as
+  // duplicate whole seconds ("…1s, 2s, 2s, 3s"). Scale decimals to the step.
+  const fractionDigits =
+    interval >= MS_IN_SECOND
+      ? 0
+      : Math.ceil(-Math.log10(interval / MS_IN_SECOND));
+
   const firstTick = Math.ceil(offset / interval) * interval;
   const markers: TimeMarker[] = [];
 
@@ -80,7 +151,10 @@ export function computeTimeMarkers(
     if (position < -0.01 || position > 1.01) continue;
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      label:
+        fractionDigits === 0
+          ? formatDuration(Math.abs(t), true)
+          : formatDurationPrecise(Math.abs(t), fractionDigits),
       value: t,
     });
     if (markers.length >= MAX_MARKERS) break;

package/src/lib/utils.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { formatDurationPrecise } from './utils';
+
+describe('formatDurationPrecise', () => {
+  it('shows whole milliseconds below 1s', () => {
+    expect(formatDurationPrecise(0)).toBe('0s');
+    expect(formatDurationPrecise(626)).toBe('626ms');
+  });
+
+  it('keeps sub-second precision instead of rounding up to a whole second', () => {
+    // The bug this guards: 1626ms must not read as "2s".
+    expect(formatDurationPrecise(1626)).toBe('1.63s');
+  });
+
+  it('trims trailing zeros so whole/half seconds read cleanly', () => {
+    expect(formatDurationPrecise(2000)).toBe('2s');
+    expect(formatDurationPrecise(1500)).toBe('1.5s');
+    expect(formatDurationPrecise(1600)).toBe('1.6s');
+    expect(formatDurationPrecise(45_000)).toBe('45s');
+  });
+
+  it('honors a custom fraction-digit count (used by the timeline ruler)', () => {
+    // Fewer digits also coarsen the rounding: 1 digit rounds to 100ms.
+    expect(formatDurationPrecise(1500, 1)).toBe('1.5s');
+    expect(formatDurationPrecise(1620, 1)).toBe('1.6s');
+    expect(formatDurationPrecise(2000, 1)).toBe('2s');
+  });
+
+  it('decomposes durations of a minute or more', () => {
+    expect(formatDurationPrecise(65_000)).toBe('1m 5s');
+    expect(formatDurationPrecise(63_450)).toBe('1m 3.45s');
+  });
+});

package/src/lib/utils.ts

@@ -74,25 +74,20 @@ export function formatDuration(ms: number, compact = false): string {
   return parts.join(' ');
 }
 
-// Locale-aware formatter that always renders exactly two fraction digits.
-// Used for the seconds component of precise durations so values are never
-// snapped to a whole second (and thousands separators stay correct).
-const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 /**
  * Formats a duration in milliseconds without snapping to whole seconds.
  *
- * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
- * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ * Unlike {@link formatDuration}, this keeps sub-second detail, so 1626ms
+ * renders as "1.63s" rather than "2s". `fractionDigits` sets both the number of
+ * decimals on the seconds component (trailing zeros trimmed, so 2000ms is "2s"
+ * and 1500ms is "1.5s") and the rounding granularity — the default of 2 rounds
+ * to 10ms; the timeline ruler passes fewer digits to match its tick step.
  *
  * - < 1s: shows whole milliseconds (e.g. "626ms")
- * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
- * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ * - 1s – 1m: shows seconds with trimmed decimals (e.g. "1.63s", "1.5s", "45s")
+ * - >= 1m: decomposes into d/h/m with trimmed-decimal seconds (e.g. "1m 13.45s")
  */
-export function formatDurationPrecise(ms: number): string {
+export function formatDurationPrecise(ms: number, fractionDigits = 2): string {
   if (ms === 0) {
     return '0s';
   }
@@ -104,10 +99,11 @@ export function formatDurationPrecise(ms: number): string {
     }
   }
 
-  const normalizedMs = Math.round(ms / 10) * 10;
+  const granularityMs = MS_IN_SECOND / 10 ** fractionDigits;
+  const normalizedMs = Math.round(ms / granularityMs) * granularityMs;
 
   if (normalizedMs < MS_IN_MINUTE) {
-    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+    return `${Number((normalizedMs / MS_IN_SECOND).toFixed(fractionDigits))}s`;
   }
 
   const days = Math.floor(normalizedMs / MS_IN_DAY);
@@ -126,7 +122,7 @@ export function formatDurationPrecise(ms: number): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  parts.push(`${Number(seconds.toFixed(fractionDigits))}s`);
 
   return parts.join(' ');
 }