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

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

@@ -1,5 +1,9 @@
-import type { Span, SpanEvent } from '../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import {
+  formatDuration,
+  formatDurationPrecise,
+  getHighResInMs,
+} from '../trace-viewer/util/timing';
+import type { Span, SpanEvent } from './types';
 
 // ---------------------------------------------------------------------------
 // Root bounds
@@ -30,33 +34,69 @@ export function computeRootBounds(spans: Span[]): RootBounds {
   return { startTime: minStart, endTime: maxEnd, duration };
 }
 
+export function getSpanDurationMs(span: Span): number {
+  return Math.max(
+    0,
+    getHighResInMs(span.endTime) - getHighResInMs(span.startTime)
+  );
+}
+
+export function isSpanErrored(span: Span): boolean {
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  return span.status.code === 2 || workflowStatus === 'failed';
+}
+
 // ---------------------------------------------------------------------------
-// Time compression
+// Viewport
 // ---------------------------------------------------------------------------
 
-export interface TimeCompression {
-  toVisual(time: number): number;
-  fromVisual(fraction: number): number;
-  isCompressed: boolean;
+export interface ViewportRange {
+  start: number;
+  end: number;
 }
 
-export function buildTimeCompression(
-  _spans: Span[],
-  viewStart: number,
-  viewEnd: number
-): TimeCompression {
-  const range = viewEnd - viewStart;
+/**
+ * Clamp a candidate viewport to the root extent. The requested duration is
+ * preserved where possible (clamped to [minDurationMs, root duration]), then
+ * the window is shifted back inside the root bounds.
+ */
+export function clampViewportToRoot(
+  next: ViewportRange,
+  rootStart: number,
+  rootEnd: number,
+  minDurationMs: number
+): ViewportRange {
+  const rootDuration = Math.max(rootEnd - rootStart, minDurationMs);
+  const duration = Math.min(
+    rootDuration,
+    Math.max(minDurationMs, next.end - next.start)
+  );
+  const maxStart = rootEnd - duration;
+  const start = Math.min(Math.max(next.start, rootStart), maxStart);
+  return { start, end: start + duration };
+}
 
-  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;
-    },
-  };
+// ---------------------------------------------------------------------------
+// Wheel gestures — shared between the timeline and the minimap
+// ---------------------------------------------------------------------------
+
+/** Convert a wheel delta to pixel units (line-mode deltas arrive in lines). */
+export function wheelDeltaToPixels(delta: number, deltaMode: number): number {
+  return deltaMode === 1 ? delta * 16 : delta;
+}
+
+/**
+ * Exponential zoom factor for a wheel gesture. Coarse mouse-wheel steps are
+ * damped harder than trackpad pinches so both feel similar.
+ */
+export function wheelZoomScaleFactor(event: {
+  deltaY: number;
+  deltaMode: number;
+}): number {
+  const dy = wheelDeltaToPixels(event.deltaY, event.deltaMode);
+  const isMouseWheel = event.deltaMode === 1 || Math.abs(event.deltaY) >= 50;
+  return 2 ** (dy / (isMouseWheel ? 200 : 60));
 }
 
 // ---------------------------------------------------------------------------
@@ -66,6 +106,7 @@ export function buildTimeCompression(
 export interface TimeMarker {
   position: number;
   label: string;
+  value: number;
 }
 
 const NICE_INTERVALS = [
@@ -77,6 +118,8 @@ const NICE_INTERVALS = [
 
 const MAX_MARKERS = 8;
 
+const MS_IN_SECOND = 1000;
+
 function pickInterval(viewDuration: number, maxTicks: number): number {
   for (const interval of NICE_INTERVALS) {
     if (viewDuration / interval <= maxTicks) return interval;
@@ -93,45 +136,26 @@ export function computeTimeMarkers(
   const maxTicks = 6;
   const interval = pickInterval(viewDuration, maxTicks);
 
-  const firstTick = Math.ceil(offset / interval) * interval;
-  const markers: TimeMarker[] = [];
-
-  for (let t = firstTick; t <= offset + viewDuration; t += interval) {
-    const position = (t - offset) / viewDuration;
-    if (position < -0.01 || position > 1.01) continue;
-    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;
+  // Sub-second steps need fractional labels, or ticks past 1s collide as
+  // duplicate whole seconds ("…1s, 2s, 2s, 3s"). Scale decimals to the step.
+  const fractionDigits =
+    interval >= MS_IN_SECOND
+      ? 0
+      : Math.ceil(-Math.log10(interval / MS_IN_SECOND));
 
   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);
+    const position = (t - offset) / viewDuration;
     if (position < -0.01 || position > 1.01) continue;
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      label:
+        fractionDigits === 0
+          ? formatDuration(Math.abs(t), true)
+          : formatDurationPrecise(Math.abs(t), fractionDigits),
+      value: t,
     });
     if (markers.length >= MAX_MARKERS) break;
   }
@@ -152,8 +176,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 +189,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 });
@@ -176,18 +204,50 @@ export function computeSpanGaps(
 
 export const RESOURCE_COLORS: Record<
   string,
-  { bar: string; errorBar?: string }
+  {
+    bg: string;
+    border: string;
+    errorBg?: string;
+    errorBorder?: string;
+  }
 > = {
-  run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },
-  step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },
-  hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },
-  sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },
-  default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },
+  run: {
+    bg: 'var(--ds-blue-200)',
+    border: 'var(--ds-blue-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  step: {
+    bg: 'var(--ds-green-200)',
+    border: 'var(--ds-green-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  hook: {
+    bg: 'var(--ds-amber-200)',
+    border: 'var(--ds-amber-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  sleep: {
+    bg: 'var(--ds-purple-200)',
+    border: 'var(--ds-purple-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  default: {
+    bg: 'var(--ds-gray-200)',
+    border: 'var(--ds-gray-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
 };
 
 export function getResourceColor(resource: string): {
-  bar: string;
-  errorBar?: string;
+  bg: string;
+  border: string;
+  errorBg?: string;
+  errorBorder?: string;
 } {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
 }
@@ -198,7 +258,9 @@ export function getResourceColor(resource: string): {
 
 export type SegmentStatus =
   | 'queued'
+  | 'pending'
   | 'running'
+  | 'completed'
   | 'failed'
   | 'retrying'
   | 'succeeded'
@@ -256,7 +318,7 @@ function computeStepSegmentsFromSpan(
   ]);
 
   if (marks.length === 0) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+    segments.push({ startFraction: 0, endFraction: 1, status: 'queued' });
     return segments;
   }
 
@@ -291,7 +353,7 @@ function computeStepSegmentsFromSpan(
             ? 'failed'
             : nextType === 'step_completed'
               ? 'succeeded'
-              : 'running';
+              : 'retrying';
         segments.push({
           startFraction: markFrac,
           endFraction: nextFrac,
@@ -326,45 +388,18 @@ function computeHookSegmentsFromSpan(
   const segments: Segment[] = [];
   if (duration <= 0) return segments;
 
-  const sorted = [...events]
-    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
-    .sort((a, b) => a.time - b.time);
-
-  const received = sorted.find((e) => e.name === 'hook_received');
-  const disposed = sorted.find((e) => e.name === 'hook_disposed');
-
-  if (!received && !disposed) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'waiting' });
-    return segments;
-  }
-
-  const receivedFrac = received
-    ? timeToFraction(received.time, startMs, duration)
-    : null;
+  const disposed = sortedEventMarks(events, ['hook_disposed'])[0];
   const disposedFrac = disposed
     ? timeToFraction(disposed.time, startMs, duration)
     : null;
 
-  if (receivedFrac !== null && receivedFrac > 0.001) {
+  const waitingEnd = disposedFrac ?? 1;
+  if (waitingEnd > 0.001) {
     segments.push({
       startFraction: 0,
-      endFraction: receivedFrac,
+      endFraction: waitingEnd,
       status: 'waiting',
     });
-  } else if (receivedFrac === null && disposedFrac !== null) {
-    segments.push({
-      startFraction: 0,
-      endFraction: disposedFrac,
-      status: 'waiting',
-    });
-  }
-
-  if (receivedFrac !== null) {
-    segments.push({
-      startFraction: receivedFrac,
-      endFraction: disposedFrac ?? 1,
-      status: 'received',
-    });
   }
 
   if (disposedFrac !== null && disposedFrac < 0.999) {
@@ -379,39 +414,19 @@ 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',
-  });
+  if (duration <= 0) return [];
+  return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
+}
 
-  return segments;
+function runSegmentStatus(runStatus: string | undefined): SegmentStatus {
+  if (runStatus === 'failed') return 'failed';
+  if (runStatus === 'pending') return 'pending';
+  if (runStatus === 'running') return 'running';
+  return 'completed';
 }
 
 function computeRunSegmentsFromSpan(
@@ -428,11 +443,12 @@ function computeRunSegmentsFromSpan(
     .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
     .sort((a, b) => a.time - b.time);
 
+  const runData = attributes?.data as Record<string, unknown> | undefined;
+  const runStatus = runData?.status as string | undefined;
+
   const hasRunCreated = sorted.some((e) => e.name === 'run_created');
 
   if (!hasRunCreated) {
-    const runData = attributes?.data as Record<string, unknown> | undefined;
-    const runStatus = runData?.status as string | undefined;
     return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
   }
 
@@ -454,7 +470,7 @@ function computeRunSegmentsFromSpan(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? 'failed' : 'running',
+    status: failedEvent ? 'failed' : runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -484,7 +500,7 @@ function computeV1RunSegments(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === 'failed' ? 'failed' : 'running',
+    status: runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -497,8 +513,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;
@@ -522,3 +537,57 @@ export function computeSpanSegments(span: Span): Segment[] {
       return [];
   }
 }
+
+// ---------------------------------------------------------------------------
+// Span markers — point-in-time events rendered as ticks on top of a bar
+// ---------------------------------------------------------------------------
+
+export interface SpanMarker {
+  timeMs: number;
+}
+
+// `hook_received` = a resumption; `attr_set` = attributes written mid-span.
+const MARKER_EVENT_NAMES = ['hook_received', 'attr_set'];
+
+export function computeSpanMarkers(span: Span): SpanMarker[] {
+  return sortedEventMarks(span.events, MARKER_EVENT_NAMES).map((mark) => ({
+    timeMs: mark.time,
+  }));
+}
+
+export interface OffscreenSide {
+  count: number;
+  /** Nearest off-screen marker — the one a reveal jumps to. */
+  nearestMs: number;
+}
+
+export interface OffscreenMarkers {
+  left: OffscreenSide | null;
+  right: OffscreenSide | null;
+}
+
+/** Partition markers outside `[visibleStartMs, visibleEndMs]` by side. */
+export function computeOffscreenMarkers(
+  markers: SpanMarker[],
+  visibleStartMs: number,
+  visibleEndMs: number
+): OffscreenMarkers {
+  let leftCount = 0;
+  let rightCount = 0;
+  let nearestLeft = Number.NEGATIVE_INFINITY;
+  let nearestRight = Number.POSITIVE_INFINITY;
+  for (const { timeMs } of markers) {
+    if (timeMs < visibleStartMs) {
+      leftCount++;
+      if (timeMs > nearestLeft) nearestLeft = timeMs;
+    } else if (timeMs > visibleEndMs) {
+      rightCount++;
+      if (timeMs < nearestRight) nearestRight = timeMs;
+    }
+  }
+  return {
+    left: leftCount > 0 ? { count: leftCount, nearestMs: nearestLeft } : null,
+    right:
+      rightCount > 0 ? { count: rightCount, nearestMs: nearestRight } : null,
+  };
+}

package/src/components/run-trace-view.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import { AlertCircle } from 'lucide-react';
-import type { SpanSelectionInfo } from './sidebar/entity-detail-panel';
+import type { FetchSpanDetail } from './sidebar/use-selected-span-detail';
 import { WorkflowTraceViewer } from './workflow-trace-view';
 
 interface RunTraceViewProps {
@@ -10,9 +10,7 @@ interface RunTraceViewProps {
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
-  spanDetailData?: WorkflowRun | Step | Hook | Event | null;
-  spanDetailLoading?: boolean;
-  spanDetailError?: Error | null;
+  fetchSpanDetail: FetchSpanDetail;
   onWakeUpSleep?: (
     runId: string,
     correlationId: string
@@ -25,10 +23,10 @@ interface RunTraceViewProps {
   onCancelRun?: (runId: string) => Promise<void>;
   onStreamClick?: (streamId: string) => void;
   onRunClick?: (runId: string) => void;
-  onSpanSelect?: (info: SpanSelectionInfo) => void;
   onLoadMoreSpans?: () => void | Promise<void>;
   hasMoreSpans?: boolean;
   isLoadingMoreSpans?: boolean;
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }
 
 export function RunTraceView({
@@ -36,18 +34,16 @@ export function RunTraceView({
   events,
   isLoading,
   error,
-  spanDetailData,
-  spanDetailLoading,
-  spanDetailError,
+  fetchSpanDetail,
   onWakeUpSleep,
   onResolveHook,
   onCancelRun,
   onStreamClick,
   onRunClick,
-  onSpanSelect,
   onLoadMoreSpans,
   hasMoreSpans,
   isLoadingMoreSpans,
+  showSeparateEventOccurrenceTimestamps,
 }: RunTraceViewProps) {
   if (error && !run) {
     return (
@@ -66,18 +62,18 @@ export function RunTraceView({
         events={events}
         run={run}
         isLoading={isLoading}
-        spanDetailData={spanDetailData}
-        spanDetailLoading={spanDetailLoading}
-        spanDetailError={spanDetailError}
+        fetchSpanDetail={fetchSpanDetail}
         onWakeUpSleep={onWakeUpSleep}
         onResolveHook={onResolveHook}
         onCancelRun={onCancelRun}
         onStreamClick={onStreamClick}
         onRunClick={onRunClick}
-        onSpanSelect={onSpanSelect}
         onLoadMoreSpans={onLoadMoreSpans}
         hasMoreSpans={hasMoreSpans}
         isLoadingMoreSpans={isLoadingMoreSpans}
+        showSeparateEventOccurrenceTimestamps={
+          showSeparateEventOccurrenceTimestamps
+        }
       />
     </div>
   );