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

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

@@ -1,215 +1,472 @@
 'use client';
 
-import type { ReactNode } from 'react';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../../../lib/utils';
-import type { Span } from '../../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import type { SegmentStatus, TimeCompression } from '../utils';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
 import {
-  computeCompressedTimeMarkers,
+  Fragment,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../../lib/cn';
+import {
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../../trace-viewer/util/timing';
+import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import type { Span } from '../types';
+import type {
+  OffscreenMarkers,
+  Segment,
+  SegmentStatus,
+  TimeMarker,
+} from '../utils';
+import {
+  computeOffscreenMarkers,
   computeSpanGaps,
+  computeSpanMarkers,
   computeSpanSegments,
-  computeTimeMarkers,
   getResourceColor,
+  getSpanDurationMs,
+  isSpanErrored,
 } 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';
 
-const QUEUED_BACKGROUND =
-  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
 
-const HATCHED_BACKGROUND =
-  'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
+export const TIMELINE_PADDING_PX = 16;
 
-const SEGMENT_CONFIG: Record<
-  SegmentStatus,
-  { className?: string; style?: React.CSSProperties }
-> = {
-  queued: { style: { background: QUEUED_BACKGROUND } },
-  retrying: {
-    className: 'box-border bg-gray-500',
-  },
-  waiting: { style: { background: HATCHED_BACKGROUND } },
-  running: { className: 'bg-blue-700' },
-  failed: { className: 'bg-red-700' },
-  succeeded: { className: 'bg-green-700' },
-  sleeping: { className: 'bg-amber-700' },
-  received: { className: 'bg-blue-700' },
+const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
+  queued: 'bg-gray-400 border border-gray-500',
+  pending: 'bg-gray-200 border border-gray-500',
+  retrying: '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',
+  succeeded: 'bg-green-200 border border-green-500',
+  sleeping: 'bg-gray-400 border border-gray-500',
+  received: 'bg-blue-200 border border-blue-500',
 };
 
-const FIXED_BAR_WIDTH_PX = 4;
-const SEGMENT_GAP_PX = 1;
-// Keep this in sync with the rendered row height in the timeline/event list.
-const ROW_HEIGHT = 34;
-const CONTAINER_PAD_Y = 8;
-const END_CAP_HEIGHT = 8;
+const TIMELINE_INSET_STYLE: CSSProperties = {
+  left: TIMELINE_PADDING_PX,
+  right: TIMELINE_PADDING_PX,
+};
 
-const DeltaIndicator = memo(function DeltaIndicator({
-  leftFrac,
-  rightFrac,
-  label,
-  rowIndex,
-}: {
-  leftFrac: number;
-  rightFrac: number;
-  label: string;
-  rowIndex: number;
-}) {
-  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+const STRIPED_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
+  'pending',
+  'running',
+  'received',
+]);
 
+function AnimatedStripes({ status }: { status: SegmentStatus }): ReactNode {
   return (
     <div
-      className="absolute pointer-events-none"
-      style={{
-        left: `${leftFrac * 100}%`,
-        width: `${(rightFrac - leftFrac) * 100}%`,
-        top: centerY - END_CAP_HEIGHT / 2,
-        height: END_CAP_HEIGHT,
-      }}
-    >
-      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
-      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
-      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
-      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
-        {label}
-      </span>
-    </div>
+      aria-hidden
+      className={
+        status === 'pending' ? styles.pendingStripes : styles.runningStripes
+      }
+    />
   );
-});
+}
 
-const TimelineBar = memo(function TimelineBar({
-  span,
-  compression,
-  containerWidth,
-  isSelected,
-  onClick,
-}: {
-  span: Span;
-  compression: TimeCompression;
-  containerWidth: number;
-  isSelected: boolean;
-  onClick: () => void;
-}): ReactNode {
-  const startTime = getHighResInMs(span.startTime);
-  const endTime = getHighResInMs(span.endTime);
-  const totalDurationMs = endTime - startTime;
+// ---------------------------------------------------------------------------
+// Bar geometry
+// ---------------------------------------------------------------------------
 
-  const leftFrac = compression.toVisual(startTime);
-  const rightFrac = compression.toVisual(endTime);
-  const widthFrac = rightFrac - leftFrac;
+type BarMode =
+  | { kind: 'arrow'; direction: 'left' | 'right' }
+  | { kind: 'tiny' }
+  | { kind: 'full' };
 
-  const leftPct = leftFrac * 100;
-  const widthPct = widthFrac * 100;
+interface BarGeometry {
+  mode: BarMode;
+  leftPct: number;
+  widthPct: number;
+  visibleStartMs: number;
+  visibleEndMs: number;
+  visiblePixelWidth: number;
+}
 
-  const pixelWidth = widthFrac * containerWidth;
-  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
-  const [isRowHovered, setIsRowHovered] = useState(false);
+/**
+ * Compute the bar's geometry inside the timeline viewport. Percentages are
+ * always in [0, 100] so we never emit CSS values that exceed browser layout
+ * limits at extreme zoom.
+ */
+function computeBarGeometry(
+  startMs: number,
+  endMs: number,
+  viewStart: number,
+  viewEnd: number,
+  containerWidth: number
+): BarGeometry {
+  const viewDuration = viewEnd - viewStart;
+  const visibleStartMs = Math.max(startMs, viewStart);
+  const visibleEndMs = Math.min(endMs, viewEnd);
+  const visibleDurationMs = Math.max(0, visibleEndMs - visibleStartMs);
+  const widthFrac = viewDuration > 0 ? visibleDurationMs / viewDuration : 0;
+  const visiblePixelWidth = widthFrac * containerWidth;
 
-  const segments = useMemo(() => computeSpanSegments(span), [span]);
-  const finalSegment = segments[segments.length - 1];
+  const isTiny = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
+  const extendsOffLeft = startMs < viewStart;
+  const extendsOffRight = endMs > viewEnd;
 
-  const workflowStatus = (span.attributes.data as Record<string, unknown>)
-    ?.status as string | undefined;
-  const isErrored = span.status.code === 2 || workflowStatus === 'failed';
-  const colors = getResourceColor(span.resource);
-  const fallbackColor = isErrored
-    ? (colors.errorBar ?? 'var(--ds-red-700)')
-    : colors.bar;
-  const compressedSegmentStatus = isErrored
-    ? 'failed'
-    : span.resource === 'hook'
-      ? 'received'
-      : finalSegment?.status;
-  const compressedSegmentStyle =
-    compressedSegmentStatus === 'queued'
-      ? { background: 'var(--ds-gray-500)' }
-      : compressedSegmentStatus
-        ? SEGMENT_CONFIG[compressedSegmentStatus].style
-        : undefined;
-  const compressedSegmentClassName = compressedSegmentStatus
-    ? SEGMENT_CONFIG[compressedSegmentStatus].className
-    : undefined;
-
-  const hasCompressedStatus = Boolean(
-    compressedSegmentClassName || compressedSegmentStyle
-  );
-  const renderDurationLabel = (label: string) => (
+  const mode: BarMode =
+    isTiny && (extendsOffLeft || extendsOffRight)
+      ? { kind: 'arrow', direction: extendsOffRight ? 'right' : 'left' }
+      : isTiny
+        ? { kind: 'tiny' }
+        : { kind: 'full' };
+
+  return {
+    mode,
+    leftPct:
+      viewDuration > 0
+        ? ((visibleStartMs - viewStart) / viewDuration) * 100
+        : 0,
+    widthPct: widthFrac * 100,
+    visibleStartMs,
+    visibleEndMs,
+    visiblePixelWidth,
+  };
+}
+
+function getBarPositionStyle(geometry: BarGeometry): {
+  left: string;
+  width: string;
+} {
+  switch (geometry.mode.kind) {
+    case 'arrow':
+      return {
+        left:
+          geometry.mode.direction === 'right'
+            ? `calc(100% - ${TINY_BAR_BOX_SIZE_PX}px)`
+            : '0px',
+        width: `${TINY_BAR_BOX_SIZE_PX}px`,
+      };
+    case 'tiny':
+      return {
+        left: `min(${geometry.leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`,
+        width: `${TINY_BAR_WIDTH_PX}px`,
+      };
+    case 'full':
+      return {
+        left: `${geometry.leftPct}%`,
+        width: `max(${geometry.widthPct}%, 4px)`,
+      };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Segment projection
+// ---------------------------------------------------------------------------
+
+interface VisibleSegment {
+  status: SegmentStatus;
+  leftPct: number;
+  widthPct: number;
+  pixelWidth: number;
+  fullDurationMs: number;
+}
+
+/**
+ * Project status segments onto the visible portion of a bar. Segments fully
+ * outside the visible window are dropped; segments crossing the edge are
+ * clipped to [0%, 100%] of the visible bar.
+ */
+function projectSegments(
+  segments: Segment[],
+  spanStartMs: number,
+  spanDurationMs: number,
+  geometry: BarGeometry
+): VisibleSegment[] {
+  const visibleDurationMs = geometry.visibleEndMs - geometry.visibleStartMs;
+  if (visibleDurationMs <= 0) return [];
+
+  return segments.flatMap((seg) => {
+    const segStartMs = spanStartMs + seg.startFraction * spanDurationMs;
+    const segEndMs = spanStartMs + seg.endFraction * spanDurationMs;
+    const startMs = Math.max(segStartMs, geometry.visibleStartMs);
+    const endMs = Math.min(segEndMs, geometry.visibleEndMs);
+    if (endMs <= startMs) return [];
+
+    const widthFrac = (endMs - startMs) / visibleDurationMs;
+    return [
+      {
+        status: seg.status,
+        leftPct:
+          ((startMs - geometry.visibleStartMs) / visibleDurationMs) * 100,
+        widthPct: widthFrac * 100,
+        pixelWidth: widthFrac * geometry.visiblePixelWidth,
+        fullDurationMs: (seg.endFraction - seg.startFraction) * spanDurationMs,
+      },
+    ];
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Small render helpers
+// ---------------------------------------------------------------------------
+
+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-white tabular-nums"
-      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}
+      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>
   );
-  const getMinDurationLabelWidthPx = (label: string) =>
-    Math.max(40, label.length * 6 + 12);
-  const totalDurationLabel = formatDuration(totalDurationMs);
-  const showBarDurationLabel =
-    isRowHovered &&
-    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
-
-  const barContent = isCompressed ? (
+}
+
+function BoundaryArrow({
+  direction,
+}: {
+  direction: 'left' | 'right';
+}): ReactNode {
+  const Icon = direction === 'right' ? ArrowRight : ArrowLeft;
+  return (
+    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
+      <Icon className="size-3 text-gray-900" />
+    </div>
+  );
+}
+
+function PlainBar({
+  bg,
+  border,
+  label,
+}: {
+  bg: string;
+  border: string;
+  label: string | null;
+}): ReactNode {
+  return (
     <div
-      className={cn(
-        'relative h-4 rounded-[0.25rem] top-[3px]',
-        compressedSegmentClassName
-      )}
+      className="relative h-6 w-full min-w-1 rounded-[0.25rem] border"
+      style={{ background: bg, borderColor: border }}
+    >
+      {label ? <DurationLabel label={label} /> : null}
+    </div>
+  );
+}
+
+function LeadInConnector({
+  leftPct,
+  widthPct,
+  label,
+}: {
+  leftPct: number;
+  widthPct: number;
+  label: string | null;
+}): ReactNode {
+  return (
+    <div
+      className="absolute top-1/2 h-6 -translate-y-1/2"
       style={{
-        width: '100%',
-        background: hasCompressedStatus ? undefined : fallbackColor,
-        ...compressedSegmentStyle,
+        left: `calc(${leftPct}% + 0.5px)`,
+        width: `calc(${widthPct}% - 1px)`,
       }}
     >
-      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+      <div className="absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" />
+      <div className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" />
+      {label ? <DurationLabel label={label} /> : null}
     </div>
-  ) : segments.length > 0 ? (
-    <div className="relative w-full h-4 top-[3px]">
+  );
+}
+
+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) => {
-        const segPixelWidth =
-          (seg.endFraction - seg.startFraction) * pixelWidth;
-        const segDurationLabel = formatDuration(
-          (seg.endFraction - seg.startFraction) * totalDurationMs
-        );
-        const showSegmentDurationLabel =
-          isRowHovered &&
-          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
-        const segStyle =
-          seg.status === 'queued' && segPixelWidth < 20
-            ? { background: 'var(--ds-gray-500)' }
-            : SEGMENT_CONFIG[seg.status].style;
+        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 (
+            <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 =
+          showLabels && seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
 
         return (
           <div
-            key={`${seg.status}-${i}`}
+            key={i}
             className={cn(
-              'absolute h-full rounded-[0.25rem]',
-              SEGMENT_CONFIG[seg.status].className
+              'absolute h-full overflow-hidden rounded-[0.25rem]',
+              SEGMENT_CLASSES[seg.status]
             )}
             style={{
-              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
-              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+              // 1px gap between adjacent segments, distributed equally.
+              left: `calc(${seg.leftPct}% + 0.5px)`,
+              width: `calc(${seg.widthPct}% - 1px)`,
               minWidth: 1,
-              ...segStyle,
             }}
           >
-            {showSegmentDurationLabel
-              ? renderDurationLabel(segDurationLabel)
-              : null}
+            {STRIPED_SEGMENT_STATUSES.has(seg.status) ? (
+              <AnimatedStripes status={seg.status} />
+            ) : null}
+            {showLabel ? <DurationLabel label={label} /> : null}
           </div>
         );
       })}
     </div>
-  ) : (
-    <div
-      className="relative h-4 rounded-[0.25rem] top-[3px]"
-      style={{
-        width: '100%',
-        minWidth: 4,
-        background: fallbackColor,
-      }}
-    >
-      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
-    </div>
   );
+}
+
+// ---------------------------------------------------------------------------
+// TimelineBar
+// ---------------------------------------------------------------------------
+
+const TimelineBar = memo(function TimelineBar({
+  span,
+  viewStart,
+  viewDuration,
+  containerWidth,
+  isSelected,
+  isDimmed,
+  onSelect,
+  onRevealTime,
+}: {
+  span: Span;
+  viewStart: number;
+  viewDuration: number;
+  containerWidth: number;
+  isSelected: boolean;
+  isDimmed?: boolean;
+  onSelect: (spanId: string) => void;
+  onRevealTime?: (timeMs: number) => void;
+}): ReactNode {
+  const startMs = getHighResInMs(span.startTime);
+  const endMs = getHighResInMs(span.endTime);
+  const totalDurationMs = getSpanDurationMs(span);
+
+  const geometry = useMemo(
+    () =>
+      computeBarGeometry(
+        startMs,
+        endMs,
+        viewStart,
+        viewStart + viewDuration,
+        containerWidth
+      ),
+    [startMs, endMs, viewStart, viewDuration, containerWidth]
+  );
+
+  const baseSegments = useMemo(() => computeSpanSegments(span), [span]);
+  const segments = useMemo(
+    () =>
+      geometry.mode.kind === 'full'
+        ? projectSegments(baseSegments, startMs, totalDurationMs, geometry)
+        : [],
+    [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 isErrored = isSpanErrored(span);
+  const colors = getResourceColor(span.resource);
+  const fallbackBg = isErrored
+    ? (colors.errorBg ?? 'var(--ds-red-200)')
+    : colors.bg;
+  const fallbackBorder = isErrored
+    ? (colors.errorBorder ?? 'var(--ds-red-500)')
+    : colors.border;
+
+  const totalLabel = formatDurationPrecise(totalDurationMs);
+  const showTotalLabel =
+    geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);
+
+  const handleClick = useCallback(() => {
+    onSelect(span.spanId);
+  }, [onSelect, span.spanId]);
 
   return (
     <div
@@ -218,24 +475,65 @@ const TimelineBar = memo(function TimelineBar({
       aria-expanded={isSelected}
       aria-level={1}
       className={cn(
-        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'
+        'group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity',
+        isDimmed && 'opacity-35'
       )}
-      onMouseEnter={() => setIsRowHovered(true)}
-      onMouseLeave={() => setIsRowHovered(false)}
-      onClick={onClick}
+      onClick={handleClick}
     >
-      <div
-        className="absolute top-1.5 h-[22px] rounded-sm"
-        style={{
-          left: isCompressed
-            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
-            : `${leftPct}%`,
-          width: isCompressed
-            ? `${FIXED_BAR_WIDTH_PX}px`
-            : `max(${widthPct}%, 4px)`,
-        }}
-      >
-        {barContent}
+      <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
+        <div
+          className="absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]"
+          style={getBarPositionStyle(geometry)}
+        >
+          {geometry.mode.kind === 'arrow' ? (
+            <BoundaryArrow direction={geometry.mode.direction} />
+          ) : geometry.mode.kind === 'tiny' ? (
+            <div
+              className="h-6 rounded-[0.25rem] border"
+              style={{ background: fallbackBg, borderColor: fallbackBorder }}
+            />
+          ) : segments.length > 0 ? (
+            <SegmentBar segments={segments} showLabels={!hasMarkers} />
+          ) : (
+            <PlainBar
+              bg={fallbackBg}
+              border={fallbackBorder}
+              label={showTotalLabel ? totalLabel : null}
+            />
+          )}
+        </div>
+        {/* 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>
   );
@@ -243,44 +541,66 @@ const TimelineBar = memo(function TimelineBar({
 
 export { TimelineBar };
 
+// ---------------------------------------------------------------------------
+// DeltaIndicator (Alt-key gap overlay)
+// ---------------------------------------------------------------------------
+
+const DELTA_CAP_HEIGHT_PX = 8;
+// Vertical offset to sit the indicator inside the gap between row N and N+1,
+// aligned with where the bar starts in the next row (rows center a 24px bar
+// inside 40px, so bars start ~8px from the top of the row).
+const DELTA_ROW_OFFSET_PX = 8;
+
+const DeltaIndicator = memo(function DeltaIndicator({
+  leftFrac,
+  rightFrac,
+  label,
+  rowIndex,
+}: {
+  leftFrac: number;
+  rightFrac: number;
+  label: string;
+  rowIndex: number;
+}) {
+  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * ROW_HEIGHT_PX;
+
+  return (
+    <div
+      className="absolute pointer-events-none"
+      style={{
+        left: `${leftFrac * 100}%`,
+        width: `${(rightFrac - leftFrac) * 100}%`,
+        top: centerY - DELTA_CAP_HEIGHT_PX / 2,
+        height: DELTA_CAP_HEIGHT_PX,
+      }}
+    >
+      <div className="absolute left-0 top-0 w-px h-full bg-amber-800" />
+      <div className="absolute left-0 right-0 top-1/2 h-px bg-amber-800" />
+      <div className="absolute right-0 top-0 w-px h-full bg-amber-800" />
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800">
+        {label}
+      </span>
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// TimelineHeader
+// ---------------------------------------------------------------------------
+
 export function TimelineHeader({
-  viewStart,
-  viewDuration,
-  rootStart,
-  compression,
-  isZoomed,
-  onResetZoom,
+  markers,
   hoverInfo,
 }: {
-  viewStart: number;
-  viewDuration: number;
-  rootStart: number;
-  compression: TimeCompression;
-  isZoomed: boolean;
-  onResetZoom: () => void;
+  markers: TimeMarker[];
   hoverInfo?: { fraction: number; label: string } | null;
 }): ReactNode {
-  const viewEnd = viewStart + viewDuration;
-
-  const markers = useMemo(
-    () =>
-      compression.isCompressed
-        ? computeCompressedTimeMarkers(
-            compression,
-            viewStart,
-            viewEnd,
-            rootStart
-          )
-        : computeTimeMarkers(viewDuration, viewStart - rootStart),
-    [compression, viewStart, viewEnd, viewDuration, rootStart]
-  );
-
   return (
-    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1">
+    <div className="relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1">
       <div className="relative h-full flex-1">
-        {markers.map((m, i) => (
+        {markers.map((m) => (
           <span
-            key={i}
+            key={String(m.value)}
             className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
@@ -296,36 +616,46 @@ export function TimelineHeader({
           </span>
         )}
       </div>
-      {isZoomed && (
-        <button
-          type="button"
-          className="absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600"
-          onClick={onResetZoom}
-        >
-          Reset zoom
-        </button>
-      )}
     </div>
   );
 }
 
+// ---------------------------------------------------------------------------
+// Timeline
+// ---------------------------------------------------------------------------
+
 export function Timeline({
   spans,
-  compression,
+  viewStart,
+  viewEnd,
+  markers,
   selectedId,
+  searchResult,
   onSelect,
+  onRevealTime,
   hoverFraction,
   altHeld = false,
 }: {
   spans: Span[];
-  compression: TimeCompression;
+  viewStart: number;
+  viewEnd: number;
+  markers: TimeMarker[];
   selectedId: string | null;
+  searchResult: SpanSearchResult;
   onSelect: (spanId: string) => void;
+  onRevealTime?: (timeMs: number) => void;
   hoverFraction?: number | null;
   altHeld?: boolean;
 }): ReactNode {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(0);
+  const viewDuration = viewEnd - viewStart;
+  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
+  const { start, end } = useRowWindow(
+    containerRef,
+    spans.length,
+    ROW_HEIGHT_PX
+  );
 
   useEffect(() => {
     const el = containerRef.current;
@@ -338,36 +668,70 @@ export function Timeline({
   }, []);
 
   const gaps = useMemo(
-    () => computeSpanGaps(spans, compression),
-    [spans, compression]
+    () => computeSpanGaps(spans, viewStart, viewEnd),
+    [spans, viewStart, viewEnd]
   );
 
   return (
-    <div ref={containerRef} className="relative py-2">
+    <div
+      ref={containerRef}
+      className="relative h-full overflow-hidden"
+      style={{ minHeight: spans.length * ROW_HEIGHT_PX }}
+    >
+      <div
+        aria-hidden
+        className="absolute inset-y-0 pointer-events-none"
+        style={TIMELINE_INSET_STYLE}
+      >
+        {markers.map((marker) =>
+          // Skip the "0s" origin marker since the left edge already implies it.
+          Math.abs(marker.value) > 0.000001 ? (
+            <div
+              key={String(marker.value)}
+              className="absolute top-0 bottom-0 w-px bg-gray-alpha-300"
+              style={{ left: `${marker.position * 100}%` }}
+            />
+          ) : null
+        )}
+      </div>
       {hoverFraction != null && (
         <div
-          className="absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10"
-          style={{ left: `${hoverFraction * 100}%` }}
-        />
+          className="absolute inset-y-0 pointer-events-none z-10"
+          style={TIMELINE_INSET_STYLE}
+        >
+          <div
+            className="absolute top-0 bottom-0 w-px bg-gray-alpha-500"
+            style={{ left: `${hoverFraction * 100}%` }}
+          />
+        </div>
       )}
-      {spans.map((span) => (
-        <TimelineBar
-          key={span.spanId}
-          span={span}
-          compression={compression}
-          containerWidth={containerWidth}
-          isSelected={selectedId === span.spanId}
-          onClick={() => onSelect(span.spanId)}
-        />
-      ))}
+      <div style={{ transform: `translateY(${start * ROW_HEIGHT_PX}px)` }}>
+        {spans.slice(start, end).map((span) => (
+          <TimelineBar
+            key={span.spanId}
+            span={span}
+            viewStart={viewStart}
+            viewDuration={viewDuration}
+            containerWidth={timelineWidth}
+            isSelected={selectedId === span.spanId}
+            isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
+            onSelect={onSelect}
+            onRevealTime={onRevealTime}
+          />
+        ))}
+      </div>
       {altHeld && (
-        <div aria-hidden className="absolute inset-0 pointer-events-none">
+        <div
+          aria-hidden
+          className="absolute inset-y-0 pointer-events-none"
+          style={TIMELINE_INSET_STYLE}
+        >
           {gaps.map((gap) => (
             <DeltaIndicator
               key={gap.rowIndex}
               leftFrac={gap.leftFrac}
               rightFrac={gap.rightFrac}
-              label={formatDuration(gap.gapMs, true)}
+              label={formatDurationPrecise(gap.gapMs)}
               rowIndex={gap.rowIndex}
             />
           ))}