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

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { Search, X } from 'lucide-react';
+import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
 import {
   type ReactNode,
   useCallback,
@@ -19,19 +19,22 @@ import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
 import type { Trace } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { CopyButton } from './components/copy-button';
-import { SplitPane } from './components/split-pane';
 import EventList from './components/event-list';
-import { Timeline, TimelineHeader } from './components/timeline';
+import { SplitPane } from './components/split-pane';
+import {
+  Timeline,
+  TimelineHeader,
+  TIMELINE_PADDING_PX,
+} from './components/timeline';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
-import { buildTimeCompression, computeRootBounds } from './utils';
+import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
 }
 
 const MIN_VIEWPORT_MS = 0.001;
-const TIMELINE_PADDING = 16;
 
 interface Viewport {
   start: number;
@@ -189,19 +192,51 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const viewDuration = viewport.end - viewport.start;
 
-  const compression = useMemo(
-    () => buildTimeCompression(trace.spans, viewport.start, viewport.end),
-    [trace.spans, viewport.start, viewport.end]
+  const timeMarkers = useMemo(
+    () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),
+    [viewDuration, viewport.start, root.startTime]
   );
 
-  const isZoomed =
-    viewport.start > root.startTime + 0.01 ||
-    viewport.end < root.startTime + root.duration - 0.01;
-
   const resetZoom = useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
 
+  const ZOOM_FACTOR = 0.5;
+
+  const zoomBy = useCallback(
+    (factor: number) => {
+      const rootS = root.startTime;
+      const rootE = root.startTime + root.duration;
+      const rootD = root.duration;
+
+      setViewport((prev) => {
+        const prevDuration = prev.end - prev.start;
+        const center = (prev.start + prev.end) / 2;
+        const newDuration = Math.max(
+          MIN_VIEWPORT_MS,
+          Math.min(rootD, prevDuration * factor)
+        );
+        let newStart = center - newDuration / 2;
+        let newEnd = center + newDuration / 2;
+
+        if (newStart < rootS) {
+          newStart = rootS;
+          newEnd = rootS + newDuration;
+        }
+        if (newEnd > rootE) {
+          newEnd = rootE;
+          newStart = Math.max(rootS, rootE - newDuration);
+        }
+
+        return { start: newStart, end: newEnd };
+      });
+    },
+    [setViewport, root.startTime, root.duration]
+  );
+
+  const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
+  const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
+
   const handleSelectSpan = useCallback(
     (spanId: string) => {
       if (spanId === activeSpanId) {
@@ -292,22 +327,24 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const hoverInfo = useMemo(() => {
     if (hoverFraction == null) return null;
-    const absTime = compression.fromVisual(hoverFraction);
+    const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
     return { fraction: hoverFraction, label: formatDuration(offset, true) };
-  }, [hoverFraction, compression, root.startTime]);
+  }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
 
   const handleTimelineMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
       const el = timelineRef.current;
       if (!el) return;
       const rect = el.getBoundingClientRect();
-      const padding = 8;
-      const contentWidth = rect.width - padding * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
       const fraction = Math.max(
         0,
-        Math.min(1, (e.clientX - rect.left - padding) / contentWidth)
+        Math.min(
+          1,
+          (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+        )
       );
       setHoverFraction(fraction);
     },
@@ -335,7 +372,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
       e.preventDefault();
 
       const rect = el.getBoundingClientRect();
-      const contentWidth = rect.width - TIMELINE_PADDING * 2;
+      const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
       if (contentWidth <= 0) return;
 
       if (isZoomGesture) {
@@ -344,7 +381,10 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
         const cursorFraction = Math.max(
           0,
-          Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING) / contentWidth)
+          Math.min(
+            1,
+            (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth
+          )
         );
         const scaleFactor = Math.pow(2, dy / 200);
 
@@ -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}

package/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;

package/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`;
 }
 
 /**

package/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);

package/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 {