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

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

@@ -1,47 +1,45 @@
 'use client';
 
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 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 type { SegmentStatus, TimeMarker } from '../utils';
 import {
-  computeCompressedTimeMarkers,
   computeSpanGaps,
   computeSpanSegments,
-  computeTimeMarkers,
+  getSpanDurationMs,
   getResourceColor,
 } from '../utils';
 
-const QUEUED_BACKGROUND =
-  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
-
-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 SEGMENT_CONFIG: Record<
   SegmentStatus,
   { className?: string; style?: React.CSSProperties }
 > = {
-  queued: { style: { background: QUEUED_BACKGROUND } },
+  queued: { className: 'bg-gray-500' },
   retrying: {
     className: 'box-border bg-gray-500',
   },
-  waiting: { style: { background: HATCHED_BACKGROUND } },
+  waiting: { className: 'bg-gray-500' },
   running: { className: 'bg-blue-700' },
   failed: { className: 'bg-red-700' },
   succeeded: { className: 'bg-green-700' },
-  sleeping: { className: 'bg-amber-700' },
+  sleeping: { className: 'bg-gray-500' },
   received: { className: 'bg-blue-700' },
 };
 
-const FIXED_BAR_WIDTH_PX = 4;
+const BAR_HEIGHT_PX = 24;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_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 ROW_HEIGHT = 40;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
+export const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 0.000001;
 
 const DeltaIndicator = memo(function DeltaIndicator({
   leftFrac,
@@ -78,34 +76,42 @@ const DeltaIndicator = memo(function DeltaIndicator({
 
 const TimelineBar = memo(function TimelineBar({
   span,
-  compression,
+  viewStart,
+  viewDuration,
   containerWidth,
   isSelected,
   onClick,
 }: {
   span: Span;
-  compression: TimeCompression;
+  viewStart: number;
+  viewDuration: number;
   containerWidth: number;
   isSelected: boolean;
   onClick: () => void;
 }): ReactNode {
   const startTime = getHighResInMs(span.startTime);
   const endTime = getHighResInMs(span.endTime);
-  const totalDurationMs = endTime - startTime;
+  const totalDurationMs = getSpanDurationMs(span);
 
-  const leftFrac = compression.toVisual(startTime);
-  const rightFrac = compression.toVisual(endTime);
-  const widthFrac = rightFrac - leftFrac;
+  const leftFracRaw =
+    viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+  const rightFracRaw =
+    viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+  const widthFrac = rightFracRaw - leftFracRaw;
 
-  const leftPct = leftFrac * 100;
+  const leftPct = leftFracRaw * 100;
   const widthPct = widthFrac * 100;
 
   const pixelWidth = widthFrac * containerWidth;
-  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+  const visiblePixelWidth =
+    Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+  const isTinyBar =
+    containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
   const [isRowHovered, setIsRowHovered] = useState(false);
 
   const segments = useMemo(() => computeSpanSegments(span), [span]);
-  const finalSegment = segments[segments.length - 1];
 
   const workflowStatus = (span.attributes.data as Record<string, unknown>)
     ?.status as string | undefined;
@@ -114,24 +120,6 @@ const TimelineBar = memo(function TimelineBar({
   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) => (
     <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"
@@ -147,22 +135,19 @@ const TimelineBar = memo(function TimelineBar({
     isRowHovered &&
     pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
 
-  const barContent = isCompressed ? (
-    <div
-      className={cn(
-        'relative h-4 rounded-[0.25rem] top-[3px]',
-        compressedSegmentClassName
-      )}
-      style={{
-        width: '100%',
-        background: hasCompressedStatus ? undefined : fallbackColor,
-        ...compressedSegmentStyle,
-      }}
-    >
-      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}
+  const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+  const barContent = showBoundaryArrow ? (
+    <div className="flex h-6 w-6 items-center justify-center rounded-[0.25rem]">
+      <BoundaryArrow className="size-3 text-gray-900" />
     </div>
+  ) : isTinyBar ? (
+    <div
+      className="h-6 rounded-[0.25rem]"
+      style={{ background: fallbackColor }}
+    />
   ) : segments.length > 0 ? (
-    <div className="relative w-full h-4 top-[3px]">
+    <div className="relative h-6 w-full">
       {segments.map((seg, i) => {
         const segPixelWidth =
           (seg.endFraction - seg.startFraction) * pixelWidth;
@@ -200,7 +185,7 @@ const TimelineBar = memo(function TimelineBar({
     </div>
   ) : (
     <div
-      className="relative h-4 rounded-[0.25rem] top-[3px]"
+      className="relative h-6 rounded-[0.25rem]"
       style={{
         width: '100%',
         minWidth: 4,
@@ -218,24 +203,37 @@ 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'
+        'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'
       )}
       onMouseEnter={() => setIsRowHovered(true)}
       onMouseLeave={() => setIsRowHovered(false)}
       onClick={onClick}
     >
       <div
-        className="absolute top-1.5 h-[22px] rounded-sm"
+        className="absolute inset-y-0"
         style={{
-          left: isCompressed
-            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
-            : `${leftPct}%`,
-          width: isCompressed
-            ? `${FIXED_BAR_WIDTH_PX}px`
-            : `max(${widthPct}%, 4px)`,
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
         }}
       >
-        {barContent}
+        <div
+          className="absolute top-1/2 -translate-y-1/2"
+          style={{
+            left: showBoundaryArrow
+              ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+              : isTinyBar
+                ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+                : `${leftPct}%`,
+            width: showBoundaryArrow
+              ? `${TINY_BAR_BOX_SIZE_PX}px`
+              : isTinyBar
+                ? `${TINY_BAR_WIDTH_PX}px`
+                : `max(${widthPct}%, 4px)`,
+            height: BAR_HEIGHT_PX,
+          }}
+        >
+          {barContent}
+        </div>
       </div>
     </div>
   );
@@ -244,43 +242,18 @@ const TimelineBar = memo(function TimelineBar({
 export { TimelineBar };
 
 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={`${m.position}-${m.label}`}
             className="absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap"
             style={{ left: `${m.position * 100}%` }}
           >
@@ -296,29 +269,24 @@ 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>
   );
 }
 
 export function Timeline({
   spans,
-  compression,
+  viewStart,
+  viewEnd,
+  markers,
   selectedId,
   onSelect,
   hoverFraction,
   altHeld = false,
 }: {
   spans: Span[];
-  compression: TimeCompression;
+  viewStart: number;
+  viewEnd: number;
+  markers: TimeMarker[];
   selectedId: string | null;
   onSelect: (spanId: string) => void;
   hoverFraction?: number | null;
@@ -326,6 +294,8 @@ export function Timeline({
 }): 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);
 
   useEffect(() => {
     const el = containerRef.current;
@@ -338,30 +308,64 @@ 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">
+      <div
+        aria-hidden
+        className="absolute inset-y-0 pointer-events-none"
+        style={{
+          left: TIMELINE_PADDING_PX,
+          right: TIMELINE_PADDING_PX,
+        }}
+      >
+        {markers.map((marker) =>
+          Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (
+            <div
+              key={`${marker.position}-${marker.label}`}
+              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={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
+          <div
+            className="absolute top-0 bottom-0 w-px bg-gray-alpha-400"
+            style={{ left: `${hoverFraction * 100}%` }}
+          />
+        </div>
       )}
       {spans.map((span) => (
         <TimelineBar
           key={span.spanId}
           span={span}
-          compression={compression}
-          containerWidth={containerWidth}
+          viewStart={viewStart}
+          viewDuration={viewDuration}
+          containerWidth={timelineWidth}
           isSelected={selectedId === span.spanId}
           onClick={() => onSelect(span.spanId)}
         />
       ))}
       {altHeld && (
-        <div aria-hidden className="absolute inset-0 pointer-events-none">
+        <div
+          aria-hidden
+          className="absolute inset-y-0 pointer-events-none"
+          style={{
+            left: TIMELINE_PADDING_PX,
+            right: TIMELINE_PADDING_PX,
+          }}
+        >
           {gaps.map((gap) => (
             <DeltaIndicator
               key={gap.rowIndex}

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

@@ -34,20 +34,18 @@ export function ActiveSpanProvider({
 
   useEffect(() => {
     setActiveSpanId((currentSpanId) => {
-      if (spans.length === 0) {
+      if (!currentSpanId) {
         return null;
       }
 
-      if (currentSpanId) {
-        const hasCurrentSpan = spans.some(
-          (span) => span.spanId === currentSpanId
-        );
-        if (hasCurrentSpan) {
-          return currentSpanId;
-        }
+      const hasCurrentSpan = spans.some(
+        (span) => span.spanId === currentSpanId
+      );
+      if (hasCurrentSpan) {
+        return currentSpanId;
       }
 
-      return spans[0].spanId;
+      return null;
     });
   }, [spans]);
 

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

@@ -4,6 +4,7 @@ import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
 import type { Span } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { getSpanDurationMs } from './utils';
 
 interface DetailPanelProps {
   span: Span;
@@ -17,7 +18,7 @@ export function DetailPanel({
   onClose,
 }: DetailPanelProps): ReactNode {
   const startMs = getHighResInMs(span.startTime);
-  const durationMs = getHighResInMs(span.duration);
+  const durationMs = getSpanDurationMs(span);
   const offsetMs = startMs - rootStart;
 
   return (

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { Search, X } from 'lucide-react';
+import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -19,19 +19,22 @@ import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
 import type { Trace } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { CopyButton } from './components/copy-button';
-import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
-import { Timeline, TimelineHeader } from './components/timeline';
+import { SplitPane } from './components/split-pane';
+import {
+  Timeline,
+  TimelineHeader,
+  TIMELINE_PADDING_PX,
+} from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
-import { buildTimeCompression, computeRootBounds } from './utils';
+import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
 }
 
 const MIN_VIEWPORT_MS = 0.001;
-const TIMELINE_PADDING = 16;
 
 interface Viewport {
   start: number;
@@ -189,19 +192,51 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const viewDuration = viewport.end - viewport.start;
 
-  const compression = useMemo(
-    () => buildTimeCompression(trace.spans, viewport.start, viewport.end),
-    [trace.spans, viewport.start, viewport.end]
+  const timeMarkers = useMemo(
+    () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),
+    [viewDuration, viewport.start, root.startTime]
   );
 
-  const isZoomed =
-    viewport.start > root.startTime + 0.01 ||
-    viewport.end < root.startTime + root.duration - 0.01;
-
   const resetZoom = useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  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)
+        );
+        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 };
+      });
+    },
+    [setViewport, root.startTime, root.duration]
+  );
+
+  const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
+  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
+
   const handleSelectSpan = useCallback(
     (spanId: string) => {
       if (spanId === activeSpanId) {
@@ -292,22 +327,24 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const hoverInfo = useMemo(() => {
     if (hoverFraction == null) return null;
-    const absTime = compression.fromVisual(hoverFraction);
+    const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
     return { fraction: hoverFraction, label: formatDuration(offset, true) };
-  }, [hoverFraction, compression, root.startTime]);
+  }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       const el = timelineRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
-      const padding = 8;
-      const contentWidth = rect.width - padding * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
       const fraction = Math.max(
         0,
-        Math.min(1, (e.clientX - rect.left - padding) / contentWidth)
+        Math.min(
+          1,
+          (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+        )
       );
       setHoverFraction(fraction);
     },
@@ -335,7 +372,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       e.preventDefault();
 
       const rect = el.getBoundingClientRect();
-      const contentWidth = rect.width - TIMELINE_PADDING * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
@@ -344,7 +381,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
         const cursorFraction = Math.max(
           0,
-          Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING) / contentWidth)
+          Math.min(
+            1,
+            (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+          )
         );
         const scaleFactor = Math.pow(2, dy / 200);
 
@@ -403,6 +443,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
   const selectedSpanName = useMemo(() => {
     if (!selectedSpan?.data) return 'Details';
     const data = selectedSpan.data as Record<string, unknown>;
+    if (selectedSpan.resource === 'hook') {
+      return (data.token as string | undefined) ?? (data.hookId as string);
+    }
+
     const stepName = data.stepName as string | undefined;
     const workflowName = data.workflowName as string | undefined;
     return (
@@ -413,19 +457,23 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       (data.hookId as string) ??
       'Details'
     );
-  }, [selectedSpan?.data]);
+  }, [selectedSpan?.data, selectedSpan?.resource]);
 
   const selectedResource = selectedSpan?.resource as string | undefined;
   const selectedResourceId = useMemo(() => {
     if (!selectedSpan?.data) return undefined;
     const data = selectedSpan.data as Record<string, unknown>;
+    if (selectedSpan.resource === 'hook') {
+      return (data.hookId as string | undefined) ?? selectedSpan.spanId;
+    }
+
     return (
       (data.stepId as string) ??
       (data.runId as string) ??
       (data.hookId as string) ??
       selectedSpan.spanId
     );
-  }, [selectedSpan?.data, selectedSpan?.spanId]);
+  }, [selectedSpan?.data, selectedSpan?.resource, selectedSpan?.spanId]);
 
   return (
     <div
@@ -463,15 +511,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             </div>
           }
           endHeader={
-            <TimelineHeader
-              viewStart={viewport.start}
-              viewDuration={viewDuration}
-              rootStart={root.startTime}
-              compression={compression}
-              isZoomed={isZoomed}
-              onResetZoom={resetZoom}
-              hoverInfo={hoverInfo}
-            />
+            <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />
           }
         >
           <div className="block overflow-visible">
@@ -483,14 +523,16 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </div>
           <div
             ref={timelineRef}
-            className="block min-h-0 overflow-visible relative px-2"
+            className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}
             onMouseLeave={handleTimelineMouseLeave}
           >
             <Timeline
               spans={filteredSpans}
-              compression={compression}
+              viewStart={viewport.start}
+              viewEnd={viewport.end}
+              markers={timeMarkers}
               selectedId={activeSpanId}
               onSelect={handleSelectSpan}
               hoverFraction={hoverFraction}
@@ -498,6 +540,32 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
             />
           </div>
         </SplitPane>
+        <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
+          <button
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            onClick={zoomOut}
+            aria-label="Zoom out"
+          >
+            <ZoomOut className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            onClick={resetZoom}
+            aria-label="Reset zoom"
+          >
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+          <button
+            type="button"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            onClick={zoomIn}
+            aria-label="Zoom in"
+          >
+            <ZoomIn className="w-4 h-4" />
+          </button>
+        </div>
       </div>
 
       {/* Detail panel */}