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

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

@@ -1,15 +1,6 @@
 'use client';
 
-import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import {
-  ChevronDown,
-  ChevronUp,
-  RotateCcw,
-  Search,
-  X,
-  ZoomIn,
-  ZoomOut,
-} from 'lucide-react';
+import { RotateCcw, Search, ZoomIn, ZoomOut } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -21,24 +12,17 @@ import {
 } from 'react';
 import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
-import { filterSpanRawEvents } from '../../lib/trace-builder';
-import { ErrorBoundary } from '../error-boundary';
 import {
-  EntityDetailPanel,
-  type SelectedSpanInfo,
-} from '../sidebar/entity-detail-panel';
-import { useSidebarData } from '../sidebar/sidebar-data-context';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
 import { Kbd } from '../ui/kbd';
 import { Spinner } from '../ui/spinner';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '../ui/tooltip';
+import { TooltipProvider } from '../ui/tooltip';
+import { TraceDetailPanel } from './components/detail-panel';
 import EventList from './components/event-list';
+import { Minimap } from './components/minimap';
 import { SplitPane } from './components/split-pane';
 import {
   TIMELINE_PADDING_PX,
@@ -50,7 +34,14 @@ import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { searchSpans } from './search';
 import type { TraceWithMeta } from './types';
-import { computeRootBounds, computeTimeMarkers } from './utils';
+import {
+  clampViewportToRoot,
+  computeRootBounds,
+  computeTimeMarkers,
+  type ViewportRange,
+  wheelDeltaToPixels,
+  wheelZoomScaleFactor,
+} from './utils';
 
 interface NewTraceViewerProps {
   trace: TraceWithMeta;
@@ -63,17 +54,12 @@ const MIN_VIEWPORT_MS = 0.001;
 
 const ZOOM_DEBOUNCE_MS = 150;
 
-interface Viewport {
-  start: number;
-  end: number;
-}
-
-function useAnimatedViewport(initial: Viewport) {
-  const [viewport, setViewportState] = useState<Viewport>(initial);
+function useAnimatedViewport(initial: ViewportRange) {
+  const [viewport, setViewportState] = useState<ViewportRange>(initial);
   const animRef = useRef<{
     raf: number;
-    from: Viewport;
-    to: Viewport;
+    from: ViewportRange;
+    to: ViewportRange;
     start: number;
   } | null>(null);
   const currentRef = useRef(initial);
@@ -88,7 +74,7 @@ function useAnimatedViewport(initial: Viewport) {
   }, []);
 
   const animateTo = useCallback(
-    (target: Viewport) => {
+    (target: ViewportRange) => {
       cancel();
 
       if (reducedMotion) {
@@ -118,7 +104,7 @@ function useAnimatedViewport(initial: Viewport) {
   );
 
   const setViewport = useCallback(
-    (update: Viewport | ((prev: Viewport) => Viewport)) => {
+    (update: ViewportRange | ((prev: ViewportRange) => ViewportRange)) => {
       cancel();
       if (typeof update === 'function') {
         setViewportState((prev) => {
@@ -139,33 +125,6 @@ function useAnimatedViewport(initial: Viewport) {
   return { viewport, setViewport, animateTo };
 }
 
-// ---------------------------------------------------------------------------
-// Hook: bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo
-// ---------------------------------------------------------------------------
-
-function useSelectedSpanInfo(): SelectedSpanInfo | null {
-  const { activeSpan } = useActiveSpan();
-  const sidebar = useSidebarData();
-
-  return useMemo(() => {
-    if (!activeSpan) return null;
-
-    const resource = activeSpan.attributes?.resource as string | undefined;
-    const rawEvents = filterSpanRawEvents(
-      sidebar.events,
-      resource,
-      activeSpan.spanId
-    );
-
-    return {
-      data: activeSpan.attributes?.data,
-      resource,
-      spanId: activeSpan.spanId,
-      rawEvents,
-    };
-  }, [activeSpan, sidebar]);
-}
-
 // ---------------------------------------------------------------------------
 // Root component
 // ---------------------------------------------------------------------------
@@ -196,16 +155,15 @@ function NewTraceViewerContent({
   hasMore,
   isLoadingMore,
 }: NewTraceViewerProps): ReactNode {
-  const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
-    useActiveSpan();
+  const { activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
 
-  const sidebar = useSidebarData();
-  const selectedSpan = useSelectedSpanInfo();
   const reducedMotion = useReducedMotion();
 
   const [searchQuery, setSearchQuery] = useState('');
   const deferredSearchQuery = useDeferredValue(searchQuery);
 
+  const paneRootRef = useRef<HTMLDivElement>(null);
+
   const searchResult = useMemo(
     () => searchSpans(trace.spans, deferredSearchQuery),
     [trace.spans, deferredSearchQuery]
@@ -228,7 +186,7 @@ function NewTraceViewerContent({
     end: root.startTime + root.duration,
   });
 
-  const prevRootRef = useRef<Viewport>({
+  const prevRootRef = useRef<ViewportRange>({
     start: root.startTime,
     end: root.startTime + root.duration,
   });
@@ -269,64 +227,51 @@ function NewTraceViewerContent({
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  const clampToRoot = useCallback(
+    (next: ViewportRange): ViewportRange =>
+      clampViewportToRoot(next, root.startTime, root.endTime, MIN_VIEWPORT_MS),
+    [root.startTime, root.endTime]
+  );
+
   // Pan (keeping the current zoom) so `timeMs` is centered in view — used by the
   // off-screen marker indicators to scroll their marker into view.
   const handleRevealTime = useCallback(
     (timeMs: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
       const { start, end } = viewportRef.current;
       const duration = end - start;
-      let newStart = timeMs - duration / 2;
-      let newEnd = timeMs + duration / 2;
-      if (newStart < rootS) {
-        newStart = rootS;
-        newEnd = rootS + duration;
-      }
-      if (newEnd > rootE) {
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(
+        clampToRoot({
+          start: timeMs - duration / 2,
+          end: timeMs + duration / 2,
+        })
+      );
     },
-    [animateTo, root.startTime, root.duration]
+    [animateTo, clampToRoot]
   );
 
   const ZOOM_FACTOR = 0.5;
 
   const zoomBy = useCallback(
     (factor: number) => {
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
       setViewport((prev) => {
-        const prevDuration = prev.end - prev.start;
         const center = (prev.start + prev.end) / 2;
         const newDuration = Math.max(
           MIN_VIEWPORT_MS,
-          Math.min(rootD, prevDuration * factor)
+          (prev.end - prev.start) * factor
         );
-        let newStart = center - newDuration / 2;
-        let newEnd = center + newDuration / 2;
-
-        if (newStart < rootS) {
-          newStart = rootS;
-          newEnd = rootS + newDuration;
-        }
-        if (newEnd > rootE) {
-          newEnd = rootE;
-          newStart = Math.max(rootS, rootE - newDuration);
-        }
-
-        return { start: newStart, end: newEnd };
+        return clampToRoot({
+          start: center - newDuration / 2,
+          end: center + newDuration / 2,
+        });
       });
     },
-    [setViewport, root.startTime, root.duration]
+    [setViewport, clampToRoot]
   );
 
   const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
+  const isAtMinZoom = viewDuration >= root.duration;
+  const isAtMaxZoom = viewDuration <= MIN_VIEWPORT_MS;
 
   const focusViewportOnSpan = useCallback(
     (spanId: string) => {
@@ -337,12 +282,8 @@ function NewTraceViewerContent({
       const spanEnd = getHighResInMs(span.endTime);
       const spanDuration = spanEnd - spanStart;
 
-      const rootS = root.startTime;
-      const rootE = root.startTime + root.duration;
-      const rootD = root.duration;
-
-      if (spanDuration > rootD * 0.8) {
-        animateTo({ start: rootS, end: rootE });
+      if (spanDuration > root.duration * 0.8) {
+        animateTo({ start: root.startTime, end: root.endTime });
         return;
       }
 
@@ -356,20 +297,16 @@ function NewTraceViewerContent({
         newEnd = center + MIN_VIEWPORT_MS / 2;
       }
 
-      if (newStart < rootS) {
-        const duration = newEnd - newStart;
-        newStart = rootS;
-        newEnd = Math.min(rootE, rootS + duration);
-      }
-      if (newEnd > rootE) {
-        const duration = newEnd - newStart;
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - duration);
-      }
-
-      animateTo({ start: newStart, end: newEnd });
+      animateTo(clampToRoot({ start: newStart, end: newEnd }));
     },
-    [animateTo, trace.spans, root.startTime, root.duration]
+    [
+      animateTo,
+      trace.spans,
+      root.startTime,
+      root.endTime,
+      root.duration,
+      clampToRoot,
+    ]
   );
 
   // Bring a row into view when keyboard/button navigation lands on a span that
@@ -440,30 +377,11 @@ function NewTraceViewerContent({
   const [altHeld, setAltHeld] = useState(false);
 
   useEffect(() => {
-    const handleSidebarNavKey = (e: KeyboardEvent): void => {
-      const target = e.target as HTMLElement | null;
-      if (
-        target instanceof HTMLInputElement ||
-        target instanceof HTMLTextAreaElement ||
-        target?.isContentEditable
-      ) {
-        return;
-      }
-      const targetId =
-        e.key === 'k' ? prevSpanIdRef.current : nextSpanIdRef.current;
-      if (targetId) {
-        e.preventDefault();
-        navigateToSpanRef.current(targetId);
-      }
-    };
-
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') {
         handleClearActiveSpan();
       } else if (e.key === 'Alt') {
         setAltHeld(true);
-      } else if (e.key === 'j' || e.key === 'k') {
-        handleSidebarNavKey(e);
       }
     };
     const onKeyUp = (e: KeyboardEvent): void => {
@@ -488,7 +406,7 @@ function NewTraceViewerContent({
     if (hoverFraction == null) return null;
     const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
-    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+    return { fraction: hoverFraction, label: formatDurationPrecise(offset) };
   }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
@@ -516,12 +434,7 @@ function NewTraceViewerContent({
 
   useEffect(() => {
     const el = timelineRef.current;
-    if (!el) return;
-
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
-    if (rootD <= 0) return;
+    if (!el || root.duration <= 0) return;
 
     const onWheel = (e: WheelEvent): void => {
       const isZoomGesture = e.ctrlKey || e.metaKey;
@@ -535,9 +448,6 @@ function NewTraceViewerContent({
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
-        let dy = e.deltaY;
-        if (e.deltaMode === 1) dy *= 16;
-
         const cursorFraction = Math.max(
           0,
           Math.min(
@@ -545,115 +455,56 @@ function NewTraceViewerContent({
             (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
           )
         );
-        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
-        const scaleFactor = 2 ** (dy / (isMouseWheel ? 200 : 60));
+        const scaleFactor = wheelZoomScaleFactor(e);
 
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
+          // Clamp the duration before anchoring so the cursor keeps its
+          // fraction even when the zoom hits the min/max bounds.
           const newDuration = Math.max(
             MIN_VIEWPORT_MS,
-            Math.min(rootD, prevDuration * scaleFactor)
+            Math.min(root.duration, prevDuration * scaleFactor)
           );
-
-          let newStart = cursorTime - cursorFraction * newDuration;
-          let newEnd = newStart + newDuration;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + newDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - newDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          return clampToRoot({
+            start: cursorTime - cursorFraction * newDuration,
+            end: cursorTime + (1 - cursorFraction) * newDuration,
+          });
         });
       } else {
-        let dx = e.deltaX;
-        if (e.deltaMode === 1) dx *= 16;
-
+        const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
         setViewport((prev) => {
-          const prevDuration = prev.end - prev.start;
-          const panAmount = (dx / contentWidth) * prevDuration;
-
-          let newStart = prev.start + panAmount;
-          let newEnd = prev.end + panAmount;
-
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + prevDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - prevDuration);
-          }
-
-          return { start: newStart, end: newEnd };
+          const panAmount = (dx / contentWidth) * (prev.end - prev.start);
+          return clampToRoot({
+            start: prev.start + panAmount,
+            end: prev.end + panAmount,
+          });
         });
       }
     };
 
     el.addEventListener('wheel', onWheel, { passive: false });
     return () => el.removeEventListener('wheel', onWheel);
-  }, [root.startTime, root.duration, setViewport]);
-
-  // Derive the selected span name and metadata for the panel header
-  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 (
-      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
-      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
-      stepName ??
-      workflowName ??
-      (data.hookId as string) ??
-      'Details'
-    );
-  }, [selectedSpan?.data, selectedSpan?.resource]);
-
-  const { prevSpanId, nextSpanId } = useMemo(() => {
-    if (!activeSpanId) return { prevSpanId: null, nextSpanId: null };
-    const i = trace.spans.findIndex((s) => s.spanId === activeSpanId);
-    if (i === -1) return { prevSpanId: null, nextSpanId: null };
-    return {
-      prevSpanId: trace.spans[i - 1]?.spanId ?? null,
-      nextSpanId: trace.spans[i + 1]?.spanId ?? null,
-    };
-  }, [activeSpanId, trace.spans]);
-
-  const handleSelectPrevSpan = useCallback(() => {
-    if (prevSpanId) navigateToSpan(prevSpanId);
-  }, [prevSpanId, navigateToSpan]);
-
-  const handleSelectNextSpan = useCallback(() => {
-    if (nextSpanId) navigateToSpan(nextSpanId);
-  }, [nextSpanId, navigateToSpan]);
-
-  const prevSpanIdRef = useRef(prevSpanId);
-  const nextSpanIdRef = useRef(nextSpanId);
-  const navigateToSpanRef = useRef(navigateToSpan);
-  prevSpanIdRef.current = prevSpanId;
-  nextSpanIdRef.current = nextSpanId;
-  navigateToSpanRef.current = navigateToSpan;
+  }, [root.duration, setViewport, clampToRoot]);
 
   return (
     <div
+      ref={paneRootRef}
       data-pane="pane-root"
-      data-has-detail={activeSpan ? '' : undefined}
-      className="relative grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]"
+      className="relative flex w-full h-full max-h-full"
     >
       <div
         id="trace-parent"
-        className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        className="flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
+        <Minimap
+          spans={trace.spans}
+          root={root}
+          viewport={viewport}
+          minViewportMs={MIN_VIEWPORT_MS}
+          onViewportChange={setViewport}
+          onAnimateTo={animateTo}
+        />
         <SplitPane
           scrollContainerRef={scrollContainerRef}
           startHeader={
@@ -713,6 +564,7 @@ function NewTraceViewerContent({
           {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
           <div
             ref={timelineRef}
+            id="trace-timeline"
             className="block min-h-0 overflow-visible relative"
             onDoubleClick={resetZoom}
             onMouseMove={handleTimelineMouseMove}
@@ -737,6 +589,7 @@ function NewTraceViewerContent({
             variant="muted"
             size="small"
             onClick={zoomOut}
+            disabled={isAtMinZoom}
             aria-label="Zoom out"
           >
             <ZoomOut className="w-4 h-4" />
@@ -753,6 +606,7 @@ function NewTraceViewerContent({
             variant="muted"
             size="small"
             onClick={zoomIn}
+            disabled={isAtMaxZoom}
             aria-label="Zoom in"
           >
             <ZoomIn className="w-4 h-4" />
@@ -760,84 +614,11 @@ function NewTraceViewerContent({
         </div>
       </div>
 
-      {/* Detail panel */}
-      {activeSpan ? (
-        <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 items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3">
-            <span className="text-label-14 font-medium text-gray-1000 truncate block">
-              {selectedSpanName}
-            </span>
-            <div className="flex items-center gap-0.5 shrink-0">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <IconButton
-                    aria-label="Navigate up"
-                    aria-keyshortcuts="K"
-                    onClick={handleSelectPrevSpan}
-                    disabled={!prevSpanId}
-                  >
-                    <ChevronUp className="w-4 h-4" />
-                  </IconButton>
-                </TooltipTrigger>
-                {prevSpanId ? (
-                  <TooltipContent>
-                    Navigate up
-                    <Kbd>K</Kbd>
-                  </TooltipContent>
-                ) : null}
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <IconButton
-                    aria-label="Navigate down"
-                    aria-keyshortcuts="J"
-                    onClick={handleSelectNextSpan}
-                    disabled={!nextSpanId}
-                  >
-                    <ChevronDown className="w-4 h-4" />
-                  </IconButton>
-                </TooltipTrigger>
-                {nextSpanId ? (
-                  <TooltipContent>
-                    Navigate down
-                    <Kbd>J</Kbd>
-                  </TooltipContent>
-                ) : null}
-              </Tooltip>
-              <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
-              <IconButton
-                aria-label="Close span details"
-                aria-keyshortcuts="Escape"
-                onClick={handleClearActiveSpan}
-              >
-                <X className="w-4 h-4" />
-              </IconButton>
-            </div>
-          </div>
-          {/* Panel body */}
-          <div className="flex-1 overflow-y-auto">
-            <ErrorBoundary>
-              <EntityDetailPanel
-                run={sidebar.run}
-                onStreamClick={sidebar.onStreamClick}
-                onRunClick={sidebar.onRunClick}
-                fetchSpanDetail={sidebar.fetchSpanDetail}
-                onWakeUpSleep={sidebar.onWakeUpSleep}
-                onLoadEventData={sidebar.onLoadEventData}
-                onResolveHook={sidebar.onResolveHook}
-                encryptionKey={sidebar.encryptionKey}
-                onDecrypt={sidebar.onDecrypt}
-                isDecrypting={sidebar.isDecrypting}
-                selectedSpan={selectedSpan}
-                showSeparateEventOccurrenceTimestamps={
-                  sidebar.showSeparateEventOccurrenceTimestamps
-                }
-              />
-            </ErrorBoundary>
-          </div>
-        </aside>
-      ) : null}
+      <TraceDetailPanel
+        containerRef={paneRootRef}
+        onNavigateToSpan={navigateToSpan}
+        onClose={handleClearActiveSpan}
+      />
 
       <TraceShortcutHelper
         hasMultipleSpans={trace.spans.length > 1}

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

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