diff --git a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
index 0c2368a41c..973b27bf4f 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/event-list.tsx
@@ -1,13 +1,15 @@
 import { Circle } from 'lucide-react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { formatDuration } from '../../trace-viewer/util/timing';
 import {
   WorkflowIcon,
   WebhookIcon,
   SleepIcon,
   StepForwardIcon,
 } from '../icons';
+import { getSpanDurationMs } from '../utils';
+import { MiddleTruncate } from './middle-truncate/middle-truncate';
 
 interface EventStyle {
   icon: React.ComponentType<{ className?: string }>;
@@ -26,6 +28,8 @@ const defaultStyle: EventStyle = {
   className: 'text-gray-900',
 };
 
+const ROW_HEIGHT_CLASS = 'h-10';
+
 function getEventStyle(resource: string, isErrored: boolean): EventStyle {
   const style = eventStyles[resource] ?? defaultStyle;
   return {
@@ -43,7 +47,7 @@ const EventRow = ({
   isSelected: boolean;
   onSelectSpan: (spanId: string) => void;
 }) => {
-  const durationMs = getHighResInMs(span.duration);
+  const durationMs = getSpanDurationMs(span);
   const isErrored =
     (span.attributes.data as Record<string, unknown>).status === 'failed';
   const { icon: Icon, className: tagClassName } = getEventStyle(
@@ -53,24 +57,31 @@ const EventRow = ({
 
   return (
     <li
-      className="overflow-clip group"
-      role="treeitem"
+      className={cn(
+        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',
+        ROW_HEIGHT_CLASS
+      )}
+      role='treeitem'
       aria-selected={isSelected}
       aria-expanded={isSelected}
       aria-level={1}
       onClick={() => onSelectSpan(span.spanId)}
     >
-      <div className="hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex">
-        <div className="flex items-center gap-2">
-          <span className={tagClassName}>
-            <Icon className="w-4 h-4" />
-          </span>
-          <span className="text-label-14">{span.name}</span>
-        </div>
-        <div className="ml-auto">
-          <span className="text-label-14 text-gray-900 tabular-nums">
-            {formatDuration(durationMs)}
-          </span>
+      <div className='h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200'>
+        <div className='flex h-full min-w-0 items-center px-2'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
+            <span className={cn('shrink-0', tagClassName)}>
+              <Icon className='w-4 h-4' />
+            </span>
+            <span className='min-w-0 text-label-14'>
+              <MiddleTruncate value={span.name} />
+            </span>
+          </div>
+          <div className='ml-2 shrink-0'>
+            <span className='text-label-14 text-gray-900 tabular-nums'>
+              {formatDuration(durationMs)}
+            </span>
+          </div>
         </div>
       </div>
     </li>
@@ -87,11 +98,7 @@ const EventList = ({
   onSelectSpan: (spanId: string) => void;
 }) => {
   return (
-    <ul
-      id="event-list"
-      role="tree"
-      className="block min-h-0 overflow-visible px-2 py-2"
-    >
+    <ul id='event-list' role='tree' className='block min-h-0 overflow-visible'>
       {spans.map((span) => {
         return (
           <EventRow
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts
new file mode 100644
index 0000000000..6280336d8f
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/copy-selection.ts
@@ -0,0 +1,114 @@
+import { ELLIPSIS, toGraphemes } from './truncate';
+
+interface GetMiddleTruncateCopyTextOptions {
+  prefixText: string;
+  selectionEnd: number;
+  selectionStart: number;
+  suffixText: string;
+  value: string;
+}
+
+interface GetMiddleTruncateCopyTextFromSelectionTextOptions {
+  prefixText: string;
+  selectionText: string;
+  suffixText: string;
+  value: string;
+}
+
+function getMiddleTruncateCopyText({
+  prefixText,
+  selectionEnd,
+  selectionStart,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+
+  if (
+    selectionStart < 0 ||
+    selectionEnd > visibleText.length ||
+    selectionStart >= selectionEnd
+  ) {
+    return null;
+  }
+
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
+    return value;
+  }
+
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
+    return null;
+  }
+
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(
+    visibleText.slice(0, selectionStart)
+  ).length;
+  const selectedSuffixGraphemeCount = toGraphemes(
+    visibleText.slice(ellipsisEnd, selectionEnd)
+  ).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+
+  return originalGraphemes
+    .slice(
+      selectedPrefixGraphemeCount,
+      suffixStart + selectedSuffixGraphemeCount
+    )
+    .join('');
+}
+
+function getMiddleTruncateCopyTextFromSelectionText({
+  prefixText,
+  selectionText,
+  suffixText,
+  value,
+}: GetMiddleTruncateCopyTextFromSelectionTextOptions): string | null {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+
+  if (!trimmedSelectionText) {
+    return null;
+  }
+
+  const leading = selectionText.slice(
+    0,
+    selectionText.length - selectionText.trimStart().length
+  );
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value,
+  });
+
+  return mappedText === null ? null : leading + mappedText + trailing;
+}
+
+export {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+};
+export type {
+  GetMiddleTruncateCopyTextFromSelectionTextOptions,
+  GetMiddleTruncateCopyTextOptions,
+};
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
new file mode 100644
index 0000000000..c17b5ab173
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/middle-truncate.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import { useCallback, useRef } from 'react';
+import type { ClipboardEvent, ComponentPropsWithoutRef, JSX } from 'react';
+import { cn } from '../../../../lib/utils';
+import {
+  getMiddleTruncateCopyText,
+  getMiddleTruncateCopyTextFromSelectionText,
+} from './copy-selection';
+import { ELLIPSIS } from './truncate';
+import { useMiddleTruncate } from './use-middle-truncate';
+
+/** Props for the {@link MiddleTruncate} component. */
+interface MiddleTruncateProps
+  extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+  /** The full text string to display, truncated from the middle when it overflows. */
+  value: string;
+}
+
+function getRangeOffsets(
+  container: HTMLElement,
+  range: Range
+): { end: number; start: number } | null {
+  if (
+    !container.contains(range.startContainer) ||
+    !container.contains(range.endContainer)
+  ) {
+    return null;
+  }
+
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range.startContainer, range.startOffset);
+
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range.endContainer, range.endOffset);
+
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length,
+  };
+}
+
+/**
+ * @gdoc
+ *
+ * Truncates text from the middle with an ellipsis when it overflows, preserving the beginning and end (e.g. file paths, URLs). Copy behavior restores the full untruncated text to the clipboard.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to display.
+ */
+function MiddleTruncate({
+  value,
+  className,
+  onCopy: onCopyProp,
+  ...props
+}: MiddleTruncateProps): JSX.Element {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } =
+    useMiddleTruncate(value);
+  const visibleRef = useRef<HTMLSpanElement | null>(null);
+
+  const handleCopy = useCallback(
+    (e: ClipboardEvent<HTMLSpanElement>) => {
+      onCopyProp?.(e);
+      if (e.defaultPrevented || !isTruncated) return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const selectionText = selection.toString();
+      if (!selectionText) return;
+
+      // Only intercept when the selection is fully within this element.
+      // If the user selected across elements (e.g. a table row), let
+      // the browser's default behavior preserve surrounding context.
+      const range = selection.getRangeAt(0);
+      const visibleEl = visibleRef.current;
+      let copyText: string | null = null;
+
+      if (
+        e.currentTarget.contains(range.startContainer) &&
+        e.currentTarget.contains(range.endContainer) &&
+        visibleEl
+      ) {
+        const offsets = getRangeOffsets(visibleEl, range);
+        if (offsets) {
+          copyText = getMiddleTruncateCopyText({
+            prefixText,
+            selectionEnd: offsets.end,
+            selectionStart: offsets.start,
+            suffixText,
+            value,
+          });
+        }
+      }
+
+      copyText ??= getMiddleTruncateCopyTextFromSelectionText({
+        prefixText,
+        selectionText,
+        suffixText,
+        value,
+      });
+
+      if (copyText === null) return;
+
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', copyText);
+    },
+    [onCopyProp, isTruncated, prefixText, suffixText, value]
+  );
+
+  return (
+    <span
+      title={isTruncated ? value : undefined}
+      {...props}
+      ref={ref}
+      className={cn(
+        'relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap',
+        className
+      )}
+      onCopy={handleCopy}
+    >
+      {isTruncated && <span className='sr-only select-none'>{value}</span>}
+      <span
+        aria-hidden='true'
+        className='pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap'
+      >
+        {value}
+      </span>
+      <span
+        aria-hidden={isTruncated || undefined}
+        className='col-start-1 row-start-1 min-w-0 overflow-hidden'
+        ref={visibleRef}
+      >
+        {isTruncated ? (
+          <>
+            <span>{prefixText}</span>
+            <span>{ELLIPSIS}</span>
+            <span>{suffixText}</span>
+          </>
+        ) : (
+          displayText
+        )}
+      </span>
+      <span
+        aria-hidden='true'
+        className='pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap'
+        ref={measureRef}
+      />
+    </span>
+  );
+}
+
+export { MiddleTruncate };
+export type { MiddleTruncateProps };
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts
new file mode 100644
index 0000000000..feacc9f53e
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/truncate.ts
@@ -0,0 +1,132 @@
+const ELLIPSIS = '...';
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+
+type MeasureFn = (text: string) => number;
+
+/**
+ * Splits a string into grapheme clusters using Intl.Segmenter.
+ * Falls back to Array.from for environments without Intl.Segmenter.
+ */
+function toGraphemes(text: string): string[] {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
+  }
+  return Array.from(text);
+}
+
+interface TruncateResult {
+  prefixText: string;
+  prefixGraphemeCount: number;
+  suffixText: string;
+  suffixGraphemeCount: number;
+  text: string;
+  truncated: boolean;
+}
+
+function buildCandidate(graphemes: string[], kept: number): TruncateResult {
+  if (kept <= 0) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true,
+    };
+  }
+
+  const suffixGraphemeCount =
+    kept >= MIN_KEPT
+      ? Math.max(MIN_END, Math.floor(kept / 2))
+      : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');
+  const suffixText =
+    suffixGraphemeCount > 0
+      ? graphemes.slice(-suffixGraphemeCount).join('')
+      : '';
+
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true,
+  };
+}
+
+/**
+ * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.
+ * Uses binary search over grapheme clusters with an injectable measure function.
+ */
+function middleTruncate(
+  graphemes: string[],
+  availableWidth: number,
+  measure: MeasureFn,
+  fullWidth?: number
+): TruncateResult {
+  const fullText = graphemes.join('');
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false,
+    };
+  }
+
+  // Binary search for the maximum number of kept graphemes
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+
+  while (lo <= hi) {
+    const mid = (lo + hi) >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+
+  if (best === -1) {
+    return {
+      prefixText: '',
+      prefixGraphemeCount: 0,
+      suffixText: '',
+      suffixGraphemeCount: 0,
+      text: '',
+      truncated: true,
+    };
+  }
+
+  return buildCandidate(graphemes, best);
+}
+
+export { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };
+export type { MeasureFn, TruncateResult };
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts
new file mode 100644
index 0000000000..ae989d58c3
--- /dev/null
+++ b/packages/web-shared/src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts
@@ -0,0 +1,167 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { middleTruncate, toGraphemes } from './truncate';
+
+const useIsomorphicLayoutEffect =
+  typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MiddleTruncateState {
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+}
+
+function createFullState(
+  value: string,
+  graphemes: string[]
+): MiddleTruncateState {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: '',
+  };
+}
+
+/**
+ * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.
+ * Powers the `<MiddleTruncate>` (`<span>`) component.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to truncate.
+ */
+function useMiddleTruncate(value: string): {
+  ref: React.RefObject<HTMLSpanElement | null>;
+  measureRef: React.RefObject<HTMLSpanElement | null>;
+  displayText: string;
+  isTruncated: boolean;
+  prefixGraphemeCount: number;
+  prefixText: string;
+  suffixGraphemeCount: number;
+  suffixText: string;
+} {
+  const graphemes = useMemo(() => toGraphemes(value), [value]);
+  const fullState = useMemo(
+    () => createFullState(value, graphemes),
+    [graphemes, value]
+  );
+  const ref = useRef<HTMLSpanElement | null>(null);
+  const measureRef = useRef<HTMLSpanElement | null>(null);
+  const [state, setState] = useState<MiddleTruncateState>(() => fullState);
+  const rafRef = useRef<number>(0);
+
+  const updateState = useCallback((nextState: MiddleTruncateState) => {
+    setState((currentState) => {
+      if (
+        currentState.displayText === nextState.displayText &&
+        currentState.isTruncated === nextState.isTruncated &&
+        currentState.prefixText === nextState.prefixText &&
+        currentState.prefixGraphemeCount === nextState.prefixGraphemeCount &&
+        currentState.suffixText === nextState.suffixText &&
+        currentState.suffixGraphemeCount === nextState.suffixGraphemeCount
+      ) {
+        return currentState;
+      }
+
+      return nextState;
+    });
+  }, []);
+
+  const recalculate = useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl) return;
+
+    const available = el.clientWidth;
+
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+
+    const measure = (text: string): number => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+
+    const fullWidth = measure(value);
+
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText,
+    });
+  }, [fullState, graphemes, updateState, value]);
+
+  // Measure on mount and when value changes - before paint
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+
+  // ResizeObserver + font loading for ongoing responsiveness
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const debouncedRecalc = (): void => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+
+    const ro =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(debouncedRecalc)
+        : null;
+    ro?.observe(el);
+    window.addEventListener('resize', debouncedRecalc);
+
+    const onFontsLoaded = (): void => {
+      debouncedRecalc();
+    };
+    const fontSet = 'fonts' in document ? document.fonts : null;
+    fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
+
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
+    };
+  }, [recalculate]);
+
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText,
+  };
+}
+
+export { useMiddleTruncate };
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index ce5741450a..9a2677c736 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -11,8 +11,7 @@ import {
 } from 'react';
 import { cn } from '../../../lib/utils';
 
-/** Wide enough for comfortable dragging; visual line stays 1px centered. */
-const GUTTER_PX = 9;
+const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
 
@@ -155,7 +154,7 @@ export function SplitPane({
         <div
           ref={containerRef}
           className={cn(
-            'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',
+            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
             isDragging && 'select-none'
           )}
           style={{ gridTemplateColumns: colTemplate }}
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx b/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
index 84585612a7..0ff2c8a92e 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/timeline.tsx
+++ b/packages/web-shared/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}
diff --git a/packages/web-shared/src/components/new-trace-viewer/context.tsx b/packages/web-shared/src/components/new-trace-viewer/context.tsx
index d20cb63437..dc8bd82a6c 100644
--- a/packages/web-shared/src/components/new-trace-viewer/context.tsx
+++ b/packages/web-shared/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]);
 
diff --git a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx b/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
index 6fa902539e..64956d78fc 100644
--- a/packages/web-shared/src/components/new-trace-viewer/detail-panel.tsx
+++ b/packages/web-shared/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 (
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index b9fb629bda..3332994d4c 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/packages/web-shared/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);
 
@@ -429,52 +469,44 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   return (
     <div
-      data-pane="pane-root"
+      data-pane='pane-root'
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
+      className='grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]'
     >
       <div
-        id="trace-parent"
-        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        id='trace-parent'
+        className='grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100'
       >
         <SplitPane
           startHeader={
-            <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5">
-              <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
+            <div className='bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5'>
+              <Search className='w-3.5 h-3.5 shrink-0 text-gray-800' />
               <input
-                id="trace-viewer-search"
-                name="trace-viewer-search"
-                type="text"
+                id='trace-viewer-search'
+                name='trace-viewer-search'
+                type='text'
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder="Search spans..."
-                aria-label="Search spans"
-                className="flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none"
+                placeholder='Search spans...'
+                aria-label='Search spans'
+                className='flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none'
               />
               {searchQuery && (
                 <button
-                  type="button"
+                  type='button'
                   onClick={() => setSearchQuery('')}
-                  className="shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors"
+                  className='shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors'
                 >
-                  <X className="w-3 h-3" />
+                  <X className='w-3 h-3' />
                 </button>
               )}
             </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">
+          <div className='block overflow-visible'>
             <EventList
               spans={filteredSpans}
               activeSpanId={activeSpanId}
@@ -483,14 +515,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,20 +532,46 @@ 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 */}
       {activeSpan && sidebar ? (
-        <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
+        <aside className='flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto'>
           {/* Panel header */}
-          <div className="flex-shrink-0 px-4 pt-4 pb-3">
-            <div className="flex items-start justify-between gap-2">
-              <div className="min-w-0 flex-1">
-                <span className="text-[15px] font-semibold text-gray-1000 truncate block">
+          <div className='flex-shrink-0 px-4 pt-4 pb-3'>
+            <div className='flex items-start justify-between gap-2'>
+              <div className='min-w-0 flex-1'>
+                <span className='text-[15px] font-semibold text-gray-1000 truncate block'>
                   {selectedSpanName}
                 </span>
                 {selectedResourceId && (
-                  <div className="mt-1 flex items-center gap-2">
+                  <div className='mt-1 flex items-center gap-2'>
                     {selectedResource && (
                       <span
                         className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${
@@ -529,30 +589,30 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
                       </span>
                     )}
                     <div
-                      className="flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0"
+                      className='flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0'
                       title={selectedResourceId}
                     >
-                      <span className="truncate">{selectedResourceId}</span>
+                      <span className='truncate'>{selectedResourceId}</span>
                       <CopyButton
                         copyText={selectedResourceId}
-                        ariaLabel="Copy ID"
-                        className="shrink-0"
+                        ariaLabel='Copy ID'
+                        className='shrink-0'
                       />
                     </div>
                   </div>
                 )}
               </div>
               <button
-                type="button"
-                className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0"
+                type='button'
+                className='p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0'
                 onClick={clearActiveSpan}
               >
-                <X className="w-4 h-4" />
+                <X className='w-4 h-4' />
               </button>
             </div>
           </div>
           {/* Panel body */}
-          <div className="flex-1 overflow-y-auto">
+          <div className='flex-1 overflow-y-auto'>
             <ErrorBoundary>
               <EntityDetailPanel
                 run={sidebar.run}
diff --git a/packages/web-shared/src/components/new-trace-viewer/utils.ts b/packages/web-shared/src/components/new-trace-viewer/utils.ts
index 028cb56e89..012b7828a1 100644
--- a/packages/web-shared/src/components/new-trace-viewer/utils.ts
+++ b/packages/web-shared/src/components/new-trace-viewer/utils.ts
@@ -30,33 +30,11 @@ export function computeRootBounds(spans: Span[]): RootBounds {
   return { startTime: minStart, endTime: maxEnd, duration };
 }
 
-// ---------------------------------------------------------------------------
-// Time compression
-// ---------------------------------------------------------------------------
-
-export interface TimeCompression {
-  toVisual(time: number): number;
-  fromVisual(fraction: number): number;
-  isCompressed: boolean;
-}
-
-export function buildTimeCompression(
-  _spans: Span[],
-  viewStart: number,
-  viewEnd: number
-): TimeCompression {
-  const range = viewEnd - viewStart;
-
-  return {
-    isCompressed: false,
-    toVisual(time: number): number {
-      if (range <= 0) return 0;
-      return Math.min(Math.max((time - viewStart) / range, 0), 1);
-    },
-    fromVisual(fraction: number): number {
-      return viewStart + fraction * range;
-    },
-  };
+export function getSpanDurationMs(span: Span): number {
+  return Math.max(
+    0,
+    getHighResInMs(span.endTime) - getHighResInMs(span.startTime)
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -66,6 +44,7 @@ export function buildTimeCompression(
 export interface TimeMarker {
   position: number;
   label: string;
+  value: number;
 }
 
 const NICE_INTERVALS = [
@@ -102,36 +81,7 @@ export function computeTimeMarkers(
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
       label: formatDuration(Math.abs(t), true),
-    });
-    if (markers.length >= MAX_MARKERS) break;
-  }
-
-  return markers;
-}
-
-export function computeCompressedTimeMarkers(
-  compression: TimeCompression,
-  viewStart: number,
-  viewEnd: number,
-  rootStart: number
-): TimeMarker[] {
-  const viewDuration = viewEnd - viewStart;
-  if (viewDuration <= 0) return [];
-
-  const maxTicks = 6;
-  const interval = pickInterval(viewDuration, maxTicks);
-  const offset = viewStart - rootStart;
-
-  const firstTick = Math.ceil(offset / interval) * interval;
-  const markers: TimeMarker[] = [];
-
-  for (let t = firstTick; t <= offset + viewDuration; t += interval) {
-    const absTime = rootStart + t;
-    const position = compression.toVisual(absTime);
-    if (position < -0.01 || position > 1.01) continue;
-    markers.push({
-      position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      value: t,
     });
     if (markers.length >= MAX_MARKERS) break;
   }
@@ -152,8 +102,12 @@ export interface SpanGap {
 
 export function computeSpanGaps(
   spans: Span[],
-  compression: TimeCompression
+  viewStart: number,
+  viewEnd: number
 ): SpanGap[] {
+  const range = viewEnd - viewStart;
+  if (range <= 0) return [];
+
   const gaps: SpanGap[] = [];
   for (let i = 0; i < spans.length - 1; i++) {
     const endTime = getHighResInMs(spans[i].endTime);
@@ -161,8 +115,8 @@ export function computeSpanGaps(
     const gapMs = startTime - endTime;
     if (gapMs <= 0) continue;
 
-    const leftFrac = compression.toVisual(endTime);
-    const rightFrac = compression.toVisual(startTime);
+    const leftFrac = Math.min(Math.max((endTime - viewStart) / range, 0), 1);
+    const rightFrac = Math.min(Math.max((startTime - viewStart) / range, 0), 1);
     if (rightFrac - leftFrac < 0.001) continue;
 
     gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
@@ -379,39 +333,12 @@ function computeHookSegmentsFromSpan(
 }
 
 function computeSleepSegmentsFromSpan(
-  startMs: number,
+  _startMs: number,
   duration: number,
-  events: SpanEvent[]
+  _events: SpanEvent[]
 ): Segment[] {
-  const segments: Segment[] = [];
-  if (duration <= 0) return segments;
-
-  const completedTime = events
-    .filter((e) => e.name === 'wait_completed')
-    .map((e) => getHighResInMs(e.timestamp))
-    .sort((a, b) => a - b)[0];
-
-  if (completedTime === undefined) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'sleeping' });
-    return segments;
-  }
-
-  const completedFrac = timeToFraction(completedTime, startMs, duration);
-  if (completedFrac > 0.001) {
-    segments.push({
-      startFraction: 0,
-      endFraction: completedFrac,
-      status: 'sleeping',
-    });
-  }
-
-  segments.push({
-    startFraction: completedFrac,
-    endFraction: 1,
-    status: 'succeeded',
-  });
-
-  return segments;
+  if (duration <= 0) return [];
+  return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
 }
 
 function computeRunSegmentsFromSpan(
@@ -497,8 +424,7 @@ function computeV1RunSegments(
  */
 export function computeSpanSegments(span: Span): Segment[] {
   const startMs = getHighResInMs(span.startTime);
-  const endMs = getHighResInMs(span.endTime);
-  const duration = endMs - startMs;
+  const duration = getSpanDurationMs(span);
   const activeStartMs = span.activeStartTime
     ? getHighResInMs(span.activeStartTime)
     : undefined;
diff --git a/packages/web-shared/src/components/trace-viewer/util/timing.ts b/packages/web-shared/src/components/trace-viewer/util/timing.ts
index b357635890..60ae65582b 100644
--- a/packages/web-shared/src/components/trace-viewer/util/timing.ts
+++ b/packages/web-shared/src/components/trace-viewer/util/timing.ts
@@ -14,22 +14,18 @@ export function getMsInHighRes(ms: number): [number, number] {
 }
 
 /**
- * Formats a duration for timeline display (compact single-unit format).
+ * Formats a duration for timeline display (compact format).
  * @deprecated Use formatDuration(ms, true) instead.
  */
 export const formatDurationForTimeline = (ms: number): string =>
   formatDuration(ms, true);
 
-const timeSelectionFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 export function formatTimeSelection(ms: number): string {
-  if (ms >= 1000) {
-    return `${timeSelectionFormatter.format(ms / 1000)}s`;
+  const roundedMs = Math.round(ms);
+  if (roundedMs < 1000) {
+    return `${roundedMs}ms`;
   }
-  return `${timeSelectionFormatter.format(ms)}ms`;
+  return `${Math.round(ms / 1000)}s`;
 }
 
 /**
diff --git a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts b/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
index 7005c3930f..8fffbb669d 100644
--- a/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
+++ b/packages/web-shared/src/components/workflow-traces/trace-span-construction.ts
@@ -59,7 +59,7 @@ export const waitEventsToWaitEntity = (
   waitId: string;
   runId: string;
   createdAt: Date;
-  resumeAt: Date;
+  resumeAt?: Date;
   completedAt?: Date;
 } | null => {
   const startEvent = events.find((event) => event.eventType === 'wait_created');
@@ -73,7 +73,9 @@ export const waitEventsToWaitEntity = (
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
     createdAt: startEvent.createdAt,
-    resumeAt: startEvent.eventData?.resumeAt,
+    resumeAt: startEvent.eventData?.resumeAt
+      ? new Date(startEvent.eventData.resumeAt)
+      : undefined,
     completedAt: completedEvent?.createdAt,
   };
 };
@@ -81,13 +83,29 @@ export const waitEventsToWaitEntity = (
 /**
  * Converts a workflow Wait to an OpenTelemetry Span
  */
-export function waitToSpan(events: Event[], maxEndTime: Date): Span | null {
+export function waitToSpan(
+  events: Event[],
+  maxEndTime: Date,
+  fallbackEndTime = maxEndTime
+): Span | null {
   const wait = waitEventsToWaitEntity(events);
   if (!wait) {
     return null;
   }
   const startTime = wait.createdAt;
-  const endTime = wait.completedAt ?? maxEndTime;
+  const startMs = startTime.getTime();
+  let endTime = wait.completedAt;
+  if (!endTime) {
+    const fallbackCap =
+      wait.resumeAt && wait.resumeAt.getTime() < fallbackEndTime.getTime()
+        ? wait.resumeAt
+        : fallbackEndTime;
+    endTime =
+      maxEndTime.getTime() > startMs &&
+      maxEndTime.getTime() < fallbackCap.getTime()
+        ? maxEndTime
+        : fallbackCap;
+  }
   const start = dateToOtelTime(startTime);
   const end = dateToOtelTime(endTime);
   const duration = calculateDuration(startTime, endTime);
diff --git a/packages/web-shared/src/lib/trace-builder.ts b/packages/web-shared/src/lib/trace-builder.ts
index b4179813ec..81faa537fd 100644
--- a/packages/web-shared/src/lib/trace-builder.ts
+++ b/packages/web-shared/src/lib/trace-builder.ts
@@ -117,6 +117,7 @@ function buildSpans(
   // unknown territory. Even when the run is completed, we may not have loaded
   // all events yet, so always use the latest event we've actually seen.
   const childMaxEnd = latestKnownTime;
+  const runMaxEnd = run.completedAt ?? now;
 
   const stepSpans = Array.from(groupedEvents.eventsByStepId.values())
     .map((events) => stepToSpan(events, childMaxEnd))
@@ -127,7 +128,7 @@ function buildSpans(
     .filter((span): span is Span => span !== null);
 
   const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, childMaxEnd))
+    .map((events) => waitToSpan(events, childMaxEnd, runMaxEnd))
     .filter((span): span is Span => span !== null);
 
   return {
diff --git a/packages/web-shared/src/lib/utils.ts b/packages/web-shared/src/lib/utils.ts
index 861f551620..4e36599785 100644
--- a/packages/web-shared/src/lib/utils.ts
+++ b/packages/web-shared/src/lib/utils.ts
@@ -7,15 +7,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-// const compactFormatter = new Intl.NumberFormat(undefined, {
-//   maximumFractionDigits: 2,
-// });
-
-const secondsFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 const MS_IN_SECOND = 1000;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -25,44 +16,53 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "0.38s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1m 13.21s", "2d 5h 3m 12.00s").
+ * @param compact - If true, returns a compact format (e.g., "380ms", "2m 30s").
+ *                  If false (default), returns multi-part format (e.g., "1m 13s", "2d 5h 3m 12s").
  *
  * Compact format (timeline markers):
- * - < 1m: shows seconds (e.g., "0.38s", "45s")
- * - < 1h: shows minutes (e.g., "2.5m")
- * - >= 1h: shows hours (e.g., "2.5h")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - < 1h: shows minutes and seconds (e.g., "2m 30s")
+ * - >= 1h: shows hours and minutes (e.g., "2h 30m")
  *
  * Full format:
- * - < 1m: shows seconds (e.g., "0.38s", "2.71s")
- * - >= 1m: shows decomposed format with fractional seconds (e.g., "1m 13.21s", "2m 13.04s")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - >= 1m: shows decomposed format with whole seconds (e.g., "1m 13s", "2m 13s")
  */
 export function formatDuration(ms: number, compact = false): string {
   if (ms === 0) {
     return '0s';
   }
 
-  if (ms < MS_IN_MINUTE) {
-    return `${secondsFormatter.format(ms / MS_IN_SECOND)}s`;
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    return roundedMs < MS_IN_SECOND ? `${roundedMs}ms` : '1s';
+  }
+
+  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
   }
 
   // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
   if (compact) {
-    if (ms < MS_IN_HOUR) {
-      const m = Math.floor(ms / MS_IN_MINUTE);
-      const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+    if (roundedMs < MS_IN_HOUR) {
+      const m = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
       return s > 0 ? `${m}m ${s}s` : `${m}m`;
     }
-    const h = Math.floor(ms / MS_IN_HOUR);
-    const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+    const h = Math.floor(roundedMs / MS_IN_HOUR);
+    const m = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
     return m > 0 ? `${h}h ${m}m` : `${h}h`;
   }
 
-  // Full format: decompose into larger units + fractional seconds
-  const days = Math.floor(ms / MS_IN_DAY);
-  const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
-  const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-  const seconds = (ms % MS_IN_MINUTE) / MS_IN_SECOND;
+  // Full format: decompose into larger units + whole seconds.
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor((roundedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
 
   const parts: string[] = [];
 
@@ -75,7 +75,7 @@ export function formatDuration(ms: number, compact = false): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${secondsFormatter.format(seconds)}s`);
+  parts.push(`${seconds}s`);
 
   return parts.join(' ');
 }
diff --git a/packages/web-shared/test/trace-builder-v1.test.ts b/packages/web-shared/test/trace-builder-v1.test.ts
index 1109b9b2f1..e99ea664a6 100644
--- a/packages/web-shared/test/trace-builder-v1.test.ts
+++ b/packages/web-shared/test/trace-builder-v1.test.ts
@@ -192,6 +192,74 @@ describe('Trace viewer with v1 events (no run lifecycle events)', () => {
       // parseStepName which returns the correlationId as fallback
       expect(stepSpan!.spanId).toBe('step_1');
     });
+
+    it('uses resumeAt for pending sleep span duration', () => {
+      const run = makeV1Run({
+        status: 'running',
+        completedAt: undefined,
+        output: undefined,
+      });
+      const waitCreatedAt = new Date(BASE_TIME.getTime() + 1_000);
+      const resumeAt = new Date(BASE_TIME.getTime() + 61_000);
+      const events = [
+        {
+          eventId: 'evnt_wait_created',
+          runId: 'wrun_v1test',
+          eventType: 'wait_created',
+          correlationId: 'wait_1',
+          createdAt: waitCreatedAt,
+          specVersion: 1,
+          eventData: { resumeAt },
+        },
+      ] as Event[];
+
+      const trace = buildTrace(
+        run,
+        events,
+        new Date(BASE_TIME.getTime() + 11_000)
+      );
+      const sleepSpan = trace.spans.find((s) => s.resource === 'sleep');
+
+      expect(sleepSpan).toBeDefined();
+      const { map } = parseTrace(trace);
+      expect(map[sleepSpan!.spanId].duration).toBe(10_000);
+    });
+
+    it('caps pending sleep spans at the latest known event before resumeAt', () => {
+      const run = makeV1Run({
+        status: 'completed',
+        completedAt: new Date(BASE_TIME.getTime() + 86_400_000),
+      });
+      const waitCreatedAt = new Date(BASE_TIME.getTime() + 1_000);
+      const latestKnownAt = new Date(BASE_TIME.getTime() + 86_401_000);
+      const resumeAt = new Date(BASE_TIME.getTime() + 6 * 86_400_000 + 1_000);
+      const events = [
+        {
+          eventId: 'evnt_wait_created',
+          runId: 'wrun_v1test',
+          eventType: 'wait_created',
+          correlationId: 'wait_1',
+          createdAt: waitCreatedAt,
+          specVersion: 1,
+          eventData: { resumeAt },
+        },
+        {
+          eventId: 'evnt_run_completed',
+          runId: 'wrun_v1test',
+          eventType: 'run_completed',
+          createdAt: latestKnownAt,
+          specVersion: 1,
+          eventData: { output: { result: 'ok' } },
+        },
+      ] as Event[];
+
+      const trace = buildTrace(run, events, latestKnownAt);
+      const sleepSpan = trace.spans.find((s) => s.resource === 'sleep');
+
+      expect(sleepSpan).toBeDefined();
+      const { map } = parseTrace(trace);
+      expect(map[sleepSpan!.spanId].duration).toBe(86_399_000);
+    });
   });
 
   describe('computeSegments for v1 run spans', () => {
diff --git a/packages/web/app/components/run-detail-view.tsx b/packages/web/app/components/run-detail-view.tsx
index 7750b5d474..0f362c4842 100644
--- a/packages/web/app/components/run-detail-view.tsx
+++ b/packages/web/app/components/run-detail-view.tsx
@@ -781,7 +781,7 @@ export function RunDetailView({
 
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
-                <div className="h-full -mx-6 pl-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
+                <div className="h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden">
                   <NewTraceViewer
                     run={run}
                     events={allEvents ?? []}