@workflow/web-shared 5.0.0-beta.17 → 5.0.0-beta.18

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

@@ -2,23 +2,43 @@
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { cn } from '../../../lib/utils';
 import {
   formatDuration,
   formatDurationPrecise,
   getHighResInMs,
 } from '../../trace-viewer/util/timing';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
 import type { Span } from '../types';
-import type { Segment, SegmentStatus, TimeMarker } from '../utils';
+import type {
+  OffscreenMarkers,
+  Segment,
+  SegmentStatus,
+  TimeMarker,
+} from '../utils';
 import {
+  computeOffscreenMarkers,
   computeSpanGaps,
+  computeSpanMarkers,
   computeSpanSegments,
   getResourceColor,
   getSpanDurationMs,
 } from '../utils';
+import {
+  cullCollidingMarkers,
+  MarkerLayer,
+  OffscreenMarkerIndicator,
+  projectMarkers,
+} from './span-markers';
 import styles from './timeline.module.css';
 import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
 
@@ -33,7 +53,7 @@ export const TIMELINE_PADDING_PX = 16;
 const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   queued: 'bg-gray-400 border border-gray-500',
   retrying: 'bg-gray-400 border border-gray-500',
-  waiting: 'bg-gray-400 border border-gray-500',
+  waiting: 'bg-gray-200 border border-gray-500',
   running: 'bg-blue-200 border border-blue-500',
   completed: 'bg-blue-200 border border-blue-500',
   failed: 'bg-red-200 border border-red-500',
@@ -194,9 +214,20 @@ function projectSegments(
 // Small render helpers
 // ---------------------------------------------------------------------------
 
-function DurationLabel({ label }: { label: string }): ReactNode {
+function DurationLabel({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}): ReactNode {
   return (
-    <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-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100">
+    <span
+      className={cn(
+        '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-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100',
+        className
+      )}
+    >
       {label}
     </span>
   );
@@ -258,27 +289,50 @@ function LeadInConnector({
   );
 }
 
-function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
+function SegmentBar({
+  segments,
+  showLabels = true,
+}: {
+  segments: VisibleSegment[];
+  /**
+   * When false, segment duration labels are suppressed. Used when a separate
+   * top layer (e.g. the resumption-marker duration overlay) renders the label
+   * above the markers instead, so we don't draw it twice.
+   */
+  showLabels?: boolean;
+}): ReactNode {
   return (
     <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
         if (seg.status === 'queued') {
           const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
           const showLeadInLabel =
+            showLabels &&
             seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+          const isFullWidthQueued = segments.length === 1;
           return (
-            <LeadInConnector
-              key={i}
-              leftPct={seg.leftPct}
-              widthPct={seg.widthPct}
-              label={showLeadInLabel ? leadInLabel : null}
-            />
+            <Fragment key={i}>
+              <LeadInConnector
+                leftPct={seg.leftPct}
+                widthPct={seg.widthPct}
+                label={showLeadInLabel ? leadInLabel : null}
+              />
+              {isFullWidthQueued ? (
+                <div
+                  className="absolute top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500"
+                  style={{
+                    left: `calc(${seg.leftPct + seg.widthPct}% - 1.5px)`,
+                  }}
+                />
+              ) : null}
+            </Fragment>
           );
         }
 
         const label = formatDurationPrecise(seg.fullDurationMs);
         // Only render the label when there's enough room for it without clipping.
-        const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
+        const showLabel =
+          showLabels && seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
 
         return (
           <div
@@ -305,80 +359,6 @@ function SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {
   );
 }
 
-// ---------------------------------------------------------------------------
-// Event markers (attr_set)
-// ---------------------------------------------------------------------------
-
-function formatMarkerTime(ms: number): string {
-  const date = new Date(ms);
-  return (
-    date.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      hour12: false,
-    }) +
-    '.' +
-    date.getMilliseconds().toString().padStart(3, '0')
-  );
-}
-
-/**
- * Diamond markers for `attr_set` events on a span's timeline row. Attribute
- * changes are point-in-time events with no duration, so they don't get a
- * status segment — instead they render as small teal diamonds at the moment
- * the attributes were written.
- */
-function AttrSetMarkers({
-  span,
-  viewStart,
-  viewDuration,
-}: {
-  span: Span;
-  viewStart: number;
-  viewDuration: number;
-}): ReactNode {
-  const markers = useMemo(
-    () => span.events.filter((e) => e.name === 'attr_set'),
-    [span.events]
-  );
-
-  if (markers.length === 0 || viewDuration <= 0) return null;
-
-  return (
-    <>
-      {markers.map((event, index) => {
-        const timeMs = getHighResInMs(event.timestamp);
-        const frac = (timeMs - viewStart) / viewDuration;
-        if (frac < 0 || frac > 1) return null;
-
-        return (
-          <Tooltip key={`attr-set-${index}`}>
-            <TooltipTrigger asChild>
-              <div
-                aria-label="Attributes set"
-                className="absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center"
-                style={{ left: `${frac * 100}%` }}
-              >
-                <div
-                  className="h-2 w-2 rotate-45 rounded-[1px] border"
-                  style={{
-                    backgroundColor: 'var(--ds-teal-400)',
-                    borderColor: 'var(--ds-teal-900)',
-                  }}
-                />
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>
-              Attributes set · {formatMarkerTime(timeMs)}
-            </TooltipContent>
-          </Tooltip>
-        );
-      })}
-    </>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // TimelineBar
 // ---------------------------------------------------------------------------
@@ -391,6 +371,7 @@ const TimelineBar = memo(function TimelineBar({
   isSelected,
   isDimmed,
   onSelect,
+  onRevealTime,
 }: {
   span: Span;
   viewStart: number;
@@ -399,6 +380,7 @@ const TimelineBar = memo(function TimelineBar({
   isSelected: boolean;
   isDimmed?: boolean;
   onSelect: (spanId: string) => void;
+  onRevealTime?: (timeMs: number) => void;
 }): ReactNode {
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
@@ -425,6 +407,41 @@ const TimelineBar = memo(function TimelineBar({
     [geometry, baseSegments, startMs, totalDurationMs]
   );
 
+  const baseMarkers = useMemo(() => computeSpanMarkers(span), [span]);
+  const markers = useMemo(
+    () =>
+      geometry.mode.kind === 'full'
+        ? cullCollidingMarkers(
+            projectMarkers(
+              baseMarkers,
+              geometry.visibleStartMs,
+              geometry.visibleEndMs
+            ),
+            geometry.visiblePixelWidth
+          )
+        : [],
+    [geometry, baseMarkers]
+  );
+
+  // Markers that fall outside the visible window (scrolled off while zoomed in)
+  // — surfaced as edge indicators so they aren't silently lost.
+  const offscreen = useMemo<OffscreenMarkers>(
+    () =>
+      geometry.mode.kind === 'full'
+        ? computeOffscreenMarkers(
+            baseMarkers,
+            geometry.visibleStartMs,
+            geometry.visibleEndMs
+          )
+        : { left: null, right: null },
+    [geometry, baseMarkers]
+  );
+
+  // Markers (visible or off-screen) move the duration label into the overlay,
+  // so the in-bar segment label is suppressed.
+  const hasMarkers =
+    markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
+
   const workflowStatus = (span.attributes.data as Record<string, unknown>)
     ?.status as string | undefined;
   const isErrored = span.status.code === 2 || workflowStatus === 'failed';
@@ -458,7 +475,7 @@ const TimelineBar = memo(function TimelineBar({
     >
       <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
         <div
-          className="absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]"
+          className="absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]"
           style={getBarPositionStyle(geometry)}
         >
           {geometry.mode.kind === 'arrow' ? (
@@ -469,7 +486,7 @@ const TimelineBar = memo(function TimelineBar({
               style={{ background: fallbackBg, borderColor: fallbackBorder }}
             />
           ) : segments.length > 0 ? (
-            <SegmentBar segments={segments} />
+            <SegmentBar segments={segments} showLabels={!hasMarkers} />
           ) : (
             <PlainBar
               bg={fallbackBg}
@@ -478,11 +495,38 @@ const TimelineBar = memo(function TimelineBar({
             />
           )}
         </div>
-        <AttrSetMarkers
-          span={span}
-          viewStart={viewStart}
-          viewDuration={viewDuration}
-        />
+        {/* Overlay (not clipped): ticks, off-screen indicators, then the duration label on top. */}
+        {hasMarkers ? (
+          <div
+            className="pointer-events-none absolute top-1/2 h-6 -translate-y-1/2"
+            style={getBarPositionStyle(geometry)}
+          >
+            {markers.length > 0 ? <MarkerLayer markers={markers} /> : null}
+            {offscreen.left ? (
+              <OffscreenMarkerIndicator
+                direction="left"
+                count={offscreen.left.count}
+                targetMs={offscreen.left.nearestMs}
+                onReveal={onRevealTime}
+              />
+            ) : null}
+            {offscreen.right ? (
+              <OffscreenMarkerIndicator
+                direction="right"
+                count={offscreen.right.count}
+                targetMs={offscreen.right.nearestMs}
+                onReveal={onRevealTime}
+              />
+            ) : null}
+            {showTotalLabel ? (
+              <DurationLabel
+                label={totalLabel}
+                // Shift clear of the left edge indicator so it isn't covered.
+                className={offscreen.left ? 'pl-10' : undefined}
+              />
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -581,6 +625,7 @@ export function Timeline({
   selectedId,
   searchResult,
   onSelect,
+  onRevealTime,
   hoverFraction,
   altHeld = false,
 }: {
@@ -591,6 +636,7 @@ export function Timeline({
   selectedId: string | null;
   searchResult: SpanSearchResult;
   onSelect: (spanId: string) => void;
+  onRevealTime?: (timeMs: number) => void;
   hoverFraction?: number | null;
   altHeld?: boolean;
 }): ReactNode {
@@ -663,6 +709,7 @@ export function Timeline({
             isSelected={selectedId === span.spanId}
             isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
             onSelect={onSelect}
+            onRevealTime={onRevealTime}
           />
         ))}
       </div>

package/src/components/new-trace-viewer/components/use-row-window.ts

@@ -91,3 +91,50 @@ export function useRowWindow(
 
 /** Row height (px) shared by the events list and timeline rows (`h-10`). */
 export const ROW_HEIGHT_PX = 40;
+
+/**
+ * Scroll a windowed row into view by index.
+ *
+ * The list is virtualized (fixed `rowHeight` rows), so an off-screen row has no
+ * DOM node to `scrollIntoView` — its target offset is computed from its index
+ * instead. Walks up from `listEl` to the shared scrollable ancestor (the same
+ * one `useRowWindow` measures against), only scrolls when the row sits outside
+ * the visible area, leaves a one-row `margin` of breathing room past it, and
+ * clamps the result to `[0, scrollHeight - clientHeight]`.
+ */
+export function scrollRowIntoView(
+  listEl: HTMLElement | null,
+  index: number,
+  rowHeight: number,
+  opts?: { margin?: number; behavior?: ScrollBehavior }
+): void {
+  const scroller = listEl ? getScrollParent(listEl) : null;
+  if (!listEl || !scroller) return;
+
+  const margin = opts?.margin ?? rowHeight;
+
+  // Offset of the list's top within the scroll container's content.
+  const listOffset =
+    listEl.getBoundingClientRect().top -
+    scroller.getBoundingClientRect().top +
+    scroller.scrollTop;
+
+  const rowTop = listOffset + index * rowHeight;
+  const rowBottom = rowTop + rowHeight;
+  const viewTop = scroller.scrollTop;
+  const viewBottom = viewTop + scroller.clientHeight;
+
+  let top: number | null = null;
+  if (rowTop < viewTop) {
+    top = rowTop - margin;
+  } else if (rowBottom > viewBottom) {
+    top = rowBottom + margin - scroller.clientHeight;
+  }
+  if (top === null) return;
+
+  const max = scroller.scrollHeight - scroller.clientHeight;
+  scroller.scrollTo({
+    top: Math.max(0, Math.min(top, max)),
+    behavior: opts?.behavior,
+  });
+}

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

@@ -39,6 +39,7 @@ import {
   TooltipTrigger,
 } from '../ui/tooltip';
 import EventList from './components/event-list';
+import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { SplitPane } from './components/split-pane';
 import {
   TIMELINE_PADDING_PX,
@@ -59,6 +60,8 @@ interface NewTraceViewerProps {
 
 const MIN_VIEWPORT_MS = 0.001;
 
+const ZOOM_DEBOUNCE_MS = 150;
+
 interface Viewport {
   start: number;
   end: number;
@@ -197,6 +200,7 @@ function NewTraceViewerContent({
 
   const sidebar = useSidebarData();
   const selectedSpan = useSelectedSpanInfo();
+  const reducedMotion = useReducedMotion();
 
   const [searchQuery, setSearchQuery] = useState('');
   const deferredSearchQuery = useDeferredValue(searchQuery);
@@ -249,6 +253,12 @@ function NewTraceViewerContent({
 
   const viewDuration = viewport.end - viewport.start;
 
+  // Keep a ref to the live viewport so the reveal callback can read the current
+  // zoom without being recreated on every pan (which would bust TimelineBar's
+  // memo and re-render every row each animation frame).
+  const viewportRef = useRef(viewport);
+  viewportRef.current = viewport;
+
   const timeMarkers = useMemo(
     () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),
     [viewDuration, viewport.start, root.startTime]
@@ -258,6 +268,29 @@ function NewTraceViewerContent({
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  // 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, root.startTime, root.duration]
+  );
+
   const ZOOM_FACTOR = 0.5;
 
   const zoomBy = useCallback(
@@ -294,14 +327,8 @@ function NewTraceViewerContent({
   const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
 
-  const handleSelectSpan = useCallback(
+  const focusViewportOnSpan = useCallback(
     (spanId: string) => {
-      if (spanId === activeSpanId) {
-        clearActiveSpan();
-        return;
-      }
-      setActiveSpan(spanId);
-
       const span = trace.spans.find((s) => s.spanId === spanId);
       if (!span) return;
 
@@ -341,17 +368,74 @@ function NewTraceViewerContent({
 
       animateTo({ start: newStart, end: newEnd });
     },
+    [animateTo, trace.spans, root.startTime, root.duration]
+  );
+
+  // Bring a row into view when keyboard/button navigation lands on a span that
+  // sits outside the shared scroll container's visible area. The list is
+  // windowed, so an off-screen row has no DOM node to `scrollIntoView` —
+  // `scrollRowIntoView` computes the target offset from the span's index.
+  const scrollSpanIntoView = useCallback(
+    (spanId: string) => {
+      const index = trace.spans.findIndex((s) => s.spanId === spanId);
+      if (index === -1) return;
+
+      const list =
+        scrollContainerRef.current?.querySelector<HTMLElement>('#event-list') ??
+        null;
+      scrollRowIntoView(list, index, ROW_HEIGHT_PX, {
+        behavior: reducedMotion ? 'auto' : 'smooth',
+      });
+    },
+    [trace.spans, reducedMotion]
+  );
+
+  const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelPendingZoom = useCallback(() => {
+    if (zoomTimerRef.current !== null) {
+      clearTimeout(zoomTimerRef.current);
+      zoomTimerRef.current = null;
+    }
+  }, []);
+  useEffect(() => cancelPendingZoom, [cancelPendingZoom]);
+
+  const handleClearActiveSpan = useCallback(() => {
+    cancelPendingZoom();
+    clearActiveSpan();
+  }, [cancelPendingZoom, clearActiveSpan]);
+
+  const handleSelectSpan = useCallback(
+    (spanId: string) => {
+      cancelPendingZoom();
+      if (spanId === activeSpanId) {
+        clearActiveSpan();
+        return;
+      }
+      setActiveSpan(spanId);
+      focusViewportOnSpan(spanId);
+    },
     [
-      animateTo,
-      setActiveSpan,
-      clearActiveSpan,
+      cancelPendingZoom,
       activeSpanId,
-      trace.spans,
-      root.startTime,
-      root.duration,
+      clearActiveSpan,
+      setActiveSpan,
+      focusViewportOnSpan,
     ]
   );
 
+  const navigateToSpan = useCallback(
+    (spanId: string) => {
+      setActiveSpan(spanId);
+      scrollSpanIntoView(spanId);
+      cancelPendingZoom();
+      zoomTimerRef.current = setTimeout(() => {
+        zoomTimerRef.current = null;
+        focusViewportOnSpan(spanId);
+      }, ZOOM_DEBOUNCE_MS);
+    },
+    [setActiveSpan, scrollSpanIntoView, cancelPendingZoom, focusViewportOnSpan]
+  );
+
   const [altHeld, setAltHeld] = useState(false);
 
   useEffect(() => {
@@ -368,13 +452,13 @@ function NewTraceViewerContent({
         e.key === 'k' ? prevSpanIdRef.current : nextSpanIdRef.current;
       if (targetId) {
         e.preventDefault();
-        handleSelectSpanRef.current(targetId);
+        navigateToSpanRef.current(targetId);
       }
     };
 
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
-        clearActiveSpan();
+        handleClearActiveSpan();
       } else if (e.key === 'Alt') {
         e.preventDefault();
         setAltHeld(true);
@@ -395,7 +479,7 @@ function NewTraceViewerContent({
       window.removeEventListener('keyup', onKeyUp);
       window.removeEventListener('blur', onBlur);
     };
-  }, [clearActiveSpan]);
+  }, [handleClearActiveSpan]);
 
   const timelineRef = useRef<HTMLDivElement>(null);
   const [hoverFraction, setHoverFraction] = useState<number | null>(null);
@@ -546,19 +630,19 @@ function NewTraceViewerContent({
   }, [activeSpanId, trace.spans]);
 
   const handleSelectPrevSpan = useCallback(() => {
-    if (prevSpanId) handleSelectSpan(prevSpanId);
-  }, [prevSpanId, handleSelectSpan]);
+    if (prevSpanId) navigateToSpan(prevSpanId);
+  }, [prevSpanId, navigateToSpan]);
 
   const handleSelectNextSpan = useCallback(() => {
-    if (nextSpanId) handleSelectSpan(nextSpanId);
-  }, [nextSpanId, handleSelectSpan]);
+    if (nextSpanId) navigateToSpan(nextSpanId);
+  }, [nextSpanId, navigateToSpan]);
 
   const prevSpanIdRef = useRef(prevSpanId);
   const nextSpanIdRef = useRef(nextSpanId);
-  const handleSelectSpanRef = useRef(handleSelectSpan);
+  const navigateToSpanRef = useRef(navigateToSpan);
   prevSpanIdRef.current = prevSpanId;
   nextSpanIdRef.current = nextSpanId;
-  handleSelectSpanRef.current = handleSelectSpan;
+  navigateToSpanRef.current = navigateToSpan;
 
   return (
     <div
@@ -642,6 +726,7 @@ function NewTraceViewerContent({
               selectedId={activeSpanId}
               searchResult={searchResult}
               onSelect={handleSelectSpan}
+              onRevealTime={handleRevealTime}
               hoverFraction={hoverFraction}
               altHeld={altHeld}
             />
@@ -724,7 +809,7 @@ function NewTraceViewerContent({
               <IconButton
                 aria-label="Close span details"
                 aria-keyshortcuts="Escape"
-                onClick={clearActiveSpan}
+                onClick={handleClearActiveSpan}
               >
                 <X className="w-4 h-4" />
               </IconButton>