@workflow/web-shared 5.0.0-beta.6 → 5.0.0-beta.7

package/dist/components/new-trace-viewer/components/event-list.js

@@ -8,7 +8,7 @@ import { MiddleTruncate } from './middle-truncate/middle-truncate';
 const eventStyles = {
     run: { icon: WorkflowIcon, className: 'text-blue-900' },
     step: { icon: StepForwardIcon, className: 'text-green-900' },
-    hook: { icon: WebhookIcon, className: 'text-yellow-900' },
+    hook: { icon: WebhookIcon, className: 'text-gray-900' },
     sleep: { icon: SleepIcon, className: 'text-gray-900' },
 };
 const defaultStyle = {

package/dist/components/new-trace-viewer/components/event-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/event-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Circle } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration } from '../../trace-viewer/util/timing';\nimport {\n  WorkflowIcon,\n  WebhookIcon,\n  SleepIcon,\n  StepForwardIcon,\n} from '../icons';\nimport { getSpanDurationMs } from '../utils';\nimport { MiddleTruncate } from './middle-truncate/middle-truncate';\n\ninterface EventStyle {\n  icon: React.ComponentType<{ className?: string }>;\n  className: string;\n}\n\nconst eventStyles: Record<string, EventStyle> = {\n  run: { icon: WorkflowIcon, className: 'text-blue-900' },\n  step: { icon: StepForwardIcon, className: 'text-green-900' },\n  hook: { icon: WebhookIcon, className: 'text-yellow-900' },\n  sleep: { icon: SleepIcon, className: 'text-gray-900' },\n};\n\nconst defaultStyle: EventStyle = {\n  icon: Circle,\n  className: 'text-gray-900',\n};\n\nconst ROW_HEIGHT_CLASS = 'h-10';\n\nfunction getEventStyle(resource: string, isErrored: boolean): EventStyle {\n  const style = eventStyles[resource] ?? defaultStyle;\n  return {\n    icon: style.icon,\n    className: cn(isErrored ? 'text-red-900' : style.className),\n  };\n}\n\nconst EventRow = ({\n  span,\n  isSelected,\n  onSelectSpan,\n}: {\n  span: Span;\n  isSelected: boolean;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  const durationMs = getSpanDurationMs(span);\n  const isErrored =\n    (span.attributes.data as Record<string, unknown>).status === 'failed';\n  const { icon: Icon, className: tagClassName } = getEventStyle(\n    span.resource,\n    isErrored\n  );\n\n  return (\n    <li\n      className={cn(\n        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',\n        ROW_HEIGHT_CLASS\n      )}\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      onClick={() => onSelectSpan(span.spanId)}\n    >\n      <div className=\"h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200\">\n        <div className=\"flex h-full min-w-0 items-center px-2\">\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn('shrink-0', tagClassName)}>\n              <Icon className=\"w-4 h-4\" />\n            </span>\n            <span className=\"min-w-0 text-label-14\">\n              <MiddleTruncate value={span.name} />\n            </span>\n          </div>\n          <div className=\"ml-2 shrink-0\">\n            <span className=\"text-label-14 text-gray-900 tabular-nums\">\n              {formatDuration(durationMs)}\n            </span>\n          </div>\n        </div>\n      </div>\n    </li>\n  );\n};\n\nconst EventList = ({\n  spans,\n  activeSpanId,\n  onSelectSpan,\n}: {\n  spans: Span[];\n  activeSpanId: string | null;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  return (\n    <ul id=\"event-list\" role=\"tree\" className=\"block min-h-0 overflow-visible\">\n      {spans.map((span) => {\n        return (\n          <EventRow\n            key={span.spanId}\n            span={span}\n            isSelected={span.spanId === activeSpanId}\n            onSelectSpan={onSelectSpan}\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default EventList;\n"]}
+{"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/event-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Circle } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration } from '../../trace-viewer/util/timing';\nimport {\n  WorkflowIcon,\n  WebhookIcon,\n  SleepIcon,\n  StepForwardIcon,\n} from '../icons';\nimport { getSpanDurationMs } from '../utils';\nimport { MiddleTruncate } from './middle-truncate/middle-truncate';\n\ninterface EventStyle {\n  icon: React.ComponentType<{ className?: string }>;\n  className: string;\n}\n\nconst eventStyles: Record<string, EventStyle> = {\n  run: { icon: WorkflowIcon, className: 'text-blue-900' },\n  step: { icon: StepForwardIcon, className: 'text-green-900' },\n  hook: { icon: WebhookIcon, className: 'text-gray-900' },\n  sleep: { icon: SleepIcon, className: 'text-gray-900' },\n};\n\nconst defaultStyle: EventStyle = {\n  icon: Circle,\n  className: 'text-gray-900',\n};\n\nconst ROW_HEIGHT_CLASS = 'h-10';\n\nfunction getEventStyle(resource: string, isErrored: boolean): EventStyle {\n  const style = eventStyles[resource] ?? defaultStyle;\n  return {\n    icon: style.icon,\n    className: cn(isErrored ? 'text-red-900' : style.className),\n  };\n}\n\nconst EventRow = ({\n  span,\n  isSelected,\n  onSelectSpan,\n}: {\n  span: Span;\n  isSelected: boolean;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  const durationMs = getSpanDurationMs(span);\n  const isErrored =\n    (span.attributes.data as Record<string, unknown>).status === 'failed';\n  const { icon: Icon, className: tagClassName } = getEventStyle(\n    span.resource,\n    isErrored\n  );\n\n  return (\n    <li\n      className={cn(\n        'relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400',\n        ROW_HEIGHT_CLASS\n      )}\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      onClick={() => onSelectSpan(span.spanId)}\n    >\n      <div className=\"h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200\">\n        <div className=\"flex h-full min-w-0 items-center px-2\">\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            <span className={cn('shrink-0', tagClassName)}>\n              <Icon className=\"w-4 h-4\" />\n            </span>\n            <span className=\"min-w-0 text-label-14\">\n              <MiddleTruncate value={span.name} />\n            </span>\n          </div>\n          <div className=\"ml-2 shrink-0\">\n            <span className=\"text-label-14 text-gray-900 tabular-nums\">\n              {formatDuration(durationMs)}\n            </span>\n          </div>\n        </div>\n      </div>\n    </li>\n  );\n};\n\nconst EventList = ({\n  spans,\n  activeSpanId,\n  onSelectSpan,\n}: {\n  spans: Span[];\n  activeSpanId: string | null;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  return (\n    <ul id=\"event-list\" role=\"tree\" className=\"block min-h-0 overflow-visible\">\n      {spans.map((span) => {\n        return (\n          <EventRow\n            key={span.spanId}\n            span={span}\n            isSelected={span.spanId === activeSpanId}\n            onSelectSpan={onSelectSpan}\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default EventList;\n"]}

package/dist/components/new-trace-viewer/components/timeline.d.ts

@@ -8,7 +8,7 @@ declare const TimelineBar: import("react").NamedExoticComponent<{
     viewDuration: number;
     containerWidth: number;
     isSelected: boolean;
-    onClick: () => void;
+    onSelect: (spanId: string) => void;
 }>;
 export { TimelineBar };
 export declare function TimelineHeader({ markers, hoverInfo, }: {

package/dist/components/new-trace-viewer/components/timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAgC1D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAoCtC,QAAA,MAAM,WAAW;UAQT,IAAI;eACC,MAAM;kBACH,MAAM;oBACJ,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;EAsJnB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAwBZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CAwFZ"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAA0B,UAAU,EAAE,MAAM,UAAU,CAAC;AAcnE,eAAO,MAAM,mBAAmB,KAAK,CAAC;AA8OtC,QAAA,MAAM,WAAW;UAQT,IAAI;eACC,MAAM;kBACH,MAAM;oBACJ,MAAM;gBACV,OAAO;cACT,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;EAgFlC,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAqDvB,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAwBZ;AAMD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CAgFZ"}

package/dist/components/new-trace-viewer/components/timeline.js

@@ -1,113 +1,204 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import { computeSpanGaps, computeSpanSegments, getSpanDurationMs, getResourceColor, } from '../utils';
-const SEGMENT_CONFIG = {
-    queued: { className: 'bg-gray-500' },
-    retrying: {
-        className: 'box-border bg-gray-500',
-    },
-    waiting: { className: 'bg-gray-500' },
-    running: { className: 'bg-blue-700' },
-    failed: { className: 'bg-red-700' },
-    succeeded: { className: 'bg-green-700' },
-    sleeping: { className: 'bg-gray-500' },
-    received: { className: 'bg-blue-700' },
-};
-const BAR_HEIGHT_PX = 24;
+import { computeSpanGaps, computeSpanSegments, getResourceColor, getSpanDurationMs, } from '../utils';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
 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 = 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, rightFrac, label, rowIndex, }) {
-    const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
-    return (_jsxs("div", { className: "absolute pointer-events-none", style: {
-            left: `${leftFrac * 100}%`,
-            width: `${(rightFrac - leftFrac) * 100}%`,
-            top: centerY - END_CAP_HEIGHT / 2,
-            height: END_CAP_HEIGHT,
-        }, children: [_jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), _jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), _jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), _jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] }));
-});
-const TimelineBar = memo(function TimelineBar({ span, viewStart, viewDuration, containerWidth, isSelected, onClick, }) {
-    const startTime = getHighResInMs(span.startTime);
-    const endTime = getHighResInMs(span.endTime);
+const SEGMENT_CLASSES = {
+    queued: 'bg-gray-400 border border-gray-500',
+    retrying: 'bg-gray-400 border border-gray-500',
+    waiting: 'bg-gray-400 border border-gray-500',
+    running: 'bg-blue-200 border border-blue-500',
+    failed: 'bg-red-200 border border-red-500',
+    succeeded: 'bg-green-200 border border-green-500',
+    sleeping: 'bg-gray-400 border border-gray-500',
+    received: 'bg-blue-200 border border-blue-500',
+};
+const TIMELINE_INSET_STYLE = {
+    left: TIMELINE_PADDING_PX,
+    right: TIMELINE_PADDING_PX,
+};
+/**
+ * Compute the bar's geometry inside the timeline viewport. Percentages are
+ * always in [0, 100] so we never emit CSS values that exceed browser layout
+ * limits at extreme zoom.
+ */
+function computeBarGeometry(startMs, endMs, viewStart, viewEnd, containerWidth) {
+    const viewDuration = viewEnd - viewStart;
+    const visibleStartMs = Math.max(startMs, viewStart);
+    const visibleEndMs = Math.min(endMs, viewEnd);
+    const visibleDurationMs = Math.max(0, visibleEndMs - visibleStartMs);
+    const widthFrac = viewDuration > 0 ? visibleDurationMs / viewDuration : 0;
+    const visiblePixelWidth = widthFrac * containerWidth;
+    const isTiny = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
+    const extendsOffLeft = startMs < viewStart;
+    const extendsOffRight = endMs > viewEnd;
+    const mode = isTiny && (extendsOffLeft || extendsOffRight)
+        ? { kind: 'arrow', direction: extendsOffRight ? 'right' : 'left' }
+        : isTiny
+            ? { kind: 'tiny' }
+            : { kind: 'full' };
+    return {
+        mode,
+        leftPct: viewDuration > 0
+            ? ((visibleStartMs - viewStart) / viewDuration) * 100
+            : 0,
+        widthPct: widthFrac * 100,
+        visibleStartMs,
+        visibleEndMs,
+        visiblePixelWidth,
+    };
+}
+function getBarPositionStyle(geometry) {
+    switch (geometry.mode.kind) {
+        case 'arrow':
+            return {
+                left: geometry.mode.direction === 'right'
+                    ? `calc(100% - ${TINY_BAR_BOX_SIZE_PX}px)`
+                    : '0px',
+                width: `${TINY_BAR_BOX_SIZE_PX}px`,
+            };
+        case 'tiny':
+            return {
+                left: `min(${geometry.leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`,
+                width: `${TINY_BAR_WIDTH_PX}px`,
+            };
+        case 'full':
+            return {
+                left: `${geometry.leftPct}%`,
+                width: `max(${geometry.widthPct}%, 4px)`,
+            };
+    }
+}
+/**
+ * Project status segments onto the visible portion of a bar. Segments fully
+ * outside the visible window are dropped; segments crossing the edge are
+ * clipped to [0%, 100%] of the visible bar.
+ */
+function projectSegments(segments, spanStartMs, spanDurationMs, geometry) {
+    const visibleDurationMs = geometry.visibleEndMs - geometry.visibleStartMs;
+    if (visibleDurationMs <= 0)
+        return [];
+    return segments.flatMap((seg) => {
+        const segStartMs = spanStartMs + seg.startFraction * spanDurationMs;
+        const segEndMs = spanStartMs + seg.endFraction * spanDurationMs;
+        const startMs = Math.max(segStartMs, geometry.visibleStartMs);
+        const endMs = Math.min(segEndMs, geometry.visibleEndMs);
+        if (endMs <= startMs)
+            return [];
+        const widthFrac = (endMs - startMs) / visibleDurationMs;
+        return [
+            {
+                status: seg.status,
+                leftPct: ((startMs - geometry.visibleStartMs) / visibleDurationMs) * 100,
+                widthPct: widthFrac * 100,
+                pixelWidth: widthFrac * geometry.visiblePixelWidth,
+                fullDurationMs: (seg.endFraction - seg.startFraction) * spanDurationMs,
+            },
+        ];
+    });
+}
+// ---------------------------------------------------------------------------
+// Small render helpers
+// ---------------------------------------------------------------------------
+function DurationLabel({ label }) {
+    return (_jsx("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-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100", children: label }));
+}
+function BoundaryArrow({ direction, }) {
+    const Icon = direction === 'right' ? ArrowRight : ArrowLeft;
+    return (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: _jsx(Icon, { className: "size-3 text-gray-900" }) }));
+}
+function PlainBar({ bg, border, label, }) {
+    return (_jsx("div", { className: "relative h-6 w-full min-w-1 rounded-[0.25rem] border", style: { background: bg, borderColor: border }, children: label ? _jsx(DurationLabel, { label: label }) : null }));
+}
+function SegmentBar({ segments }) {
+    return (_jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
+            const label = formatDuration(seg.fullDurationMs);
+            // Only render the label when there's enough room for it without clipping.
+            const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
+            // Beef up the queued segment when it's too narrow to read.
+            const isNarrowQueued = seg.status === 'queued' && seg.pixelWidth < 20;
+            const overrideBg = isNarrowQueued ? 'var(--ds-gray-400)' : undefined;
+            const overrideBorder = isNarrowQueued
+                ? 'var(--ds-gray-500)'
+                : undefined;
+            return (_jsx("div", { className: cn('absolute h-full rounded-[0.25rem]', SEGMENT_CLASSES[seg.status]), style: {
+                    // 1px gap between adjacent segments, distributed equally.
+                    left: `calc(${seg.leftPct}% + 0.5px)`,
+                    width: `calc(${seg.widthPct}% - 1px)`,
+                    minWidth: 1,
+                    background: overrideBg,
+                    borderColor: overrideBorder,
+                }, children: showLabel ? _jsx(DurationLabel, { label: label }) : null }, `${seg.status}-${i}`));
+        }) }));
+}
+// ---------------------------------------------------------------------------
+// TimelineBar
+// ---------------------------------------------------------------------------
+const TimelineBar = memo(function TimelineBar({ span, viewStart, viewDuration, containerWidth, isSelected, onSelect, }) {
+    const startMs = getHighResInMs(span.startTime);
+    const endMs = getHighResInMs(span.endTime);
     const totalDurationMs = getSpanDurationMs(span);
-    const leftFracRaw = viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
-    const rightFracRaw = viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
-    const widthFrac = rightFracRaw - leftFracRaw;
-    const leftPct = leftFracRaw * 100;
-    const widthPct = widthFrac * 100;
-    const pixelWidth = widthFrac * containerWidth;
-    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 geometry = useMemo(() => computeBarGeometry(startMs, endMs, viewStart, viewStart + viewDuration, containerWidth), [startMs, endMs, viewStart, viewDuration, containerWidth]);
+    const baseSegments = useMemo(() => computeSpanSegments(span), [span]);
+    const segments = useMemo(() => geometry.mode.kind === 'full'
+        ? projectSegments(baseSegments, startMs, totalDurationMs, geometry)
+        : [], [geometry, baseSegments, startMs, totalDurationMs]);
     const workflowStatus = span.attributes.data
         ?.status;
     const isErrored = span.status.code === 2 || workflowStatus === 'failed';
     const colors = getResourceColor(span.resource);
-    const fallbackColor = isErrored
-        ? (colors.errorBar ?? 'var(--ds-red-700)')
-        : colors.bar;
-    const renderDurationLabel = (label) => (_jsx("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", style: { textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }, children: label }));
-    const getMinDurationLabelWidthPx = (label) => Math.max(40, label.length * 6 + 12);
-    const totalDurationLabel = formatDuration(totalDurationMs);
-    const showBarDurationLabel = isRowHovered &&
-        pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
-    const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
-    const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
-    const barContent = showBoundaryArrow ? (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: _jsx(BoundaryArrow, { className: "size-3 text-gray-900" }) })) : isTinyBar ? (_jsx("div", { className: "h-6 rounded-[0.25rem]", style: { background: fallbackColor } })) : segments.length > 0 ? (_jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
-            const segPixelWidth = (seg.endFraction - seg.startFraction) * pixelWidth;
-            const segDurationLabel = formatDuration((seg.endFraction - seg.startFraction) * totalDurationMs);
-            const showSegmentDurationLabel = isRowHovered &&
-                segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
-            const segStyle = seg.status === 'queued' && segPixelWidth < 20
-                ? { background: 'var(--ds-gray-500)' }
-                : SEGMENT_CONFIG[seg.status].style;
-            return (_jsx("div", { className: cn('absolute h-full rounded-[0.25rem]', SEGMENT_CONFIG[seg.status].className), style: {
-                    left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
-                    width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
-                    minWidth: 1,
-                    ...segStyle,
-                }, children: showSegmentDurationLabel
-                    ? renderDurationLabel(segDurationLabel)
-                    : null }, `${seg.status}-${i}`));
-        }) })) : (_jsx("div", { className: "relative h-6 rounded-[0.25rem]", style: {
-            width: '100%',
-            minWidth: 4,
-            background: fallbackColor,
-        }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null }));
-    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn('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, children: _jsx("div", { className: "absolute inset-y-0", style: {
-                left: TIMELINE_PADDING_PX,
-                right: TIMELINE_PADDING_PX,
-            }, children: _jsx("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,
-                }, children: barContent }) }) }));
+    const fallbackBg = isErrored
+        ? (colors.errorBg ?? 'var(--ds-red-200)')
+        : colors.bg;
+    const fallbackBorder = isErrored
+        ? (colors.errorBorder ?? 'var(--ds-red-500)')
+        : colors.border;
+    const totalLabel = formatDuration(totalDurationMs);
+    const showTotalLabel = geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);
+    const handleClick = useCallback(() => {
+        onSelect(span.spanId);
+    }, [onSelect, span.spanId]);
+    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: "group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200", onClick: handleClick, children: _jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: _jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: geometry.mode.kind === 'arrow' ? (_jsx(BoundaryArrow, { direction: geometry.mode.direction })) : geometry.mode.kind === 'tiny' ? (_jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } })) : segments.length > 0 ? (_jsx(SegmentBar, { segments: segments })) : (_jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null })) }) }) }));
 });
 export { TimelineBar };
+// ---------------------------------------------------------------------------
+// DeltaIndicator (Alt-key gap overlay)
+// ---------------------------------------------------------------------------
+// Row and indicator sizes are local to DeltaIndicator since it's the only
+// place that needs to compute Y positions from a row index. ROW_HEIGHT must
+// match the `h-10` (40px) row used in TimelineBar.
+const DELTA_ROW_HEIGHT_PX = 40;
+const DELTA_CAP_HEIGHT_PX = 8;
+// Vertical offset to sit the indicator inside the gap between row N and N+1,
+// aligned with where the bar starts in the next row (rows center a 24px bar
+// inside 40px, so bars start ~8px from the top of the row).
+const DELTA_ROW_OFFSET_PX = 8;
+const DeltaIndicator = memo(function DeltaIndicator({ leftFrac, rightFrac, label, rowIndex, }) {
+    const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * DELTA_ROW_HEIGHT_PX;
+    return (_jsxs("div", { className: "absolute pointer-events-none", style: {
+            left: `${leftFrac * 100}%`,
+            width: `${(rightFrac - leftFrac) * 100}%`,
+            top: centerY - DELTA_CAP_HEIGHT_PX / 2,
+            height: DELTA_CAP_HEIGHT_PX,
+        }, children: [_jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), _jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), _jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), _jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] }));
+});
+// ---------------------------------------------------------------------------
+// TimelineHeader
+// ---------------------------------------------------------------------------
 export function TimelineHeader({ markers, hoverInfo, }) {
     return (_jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: _jsxs("div", { className: "relative h-full flex-1", children: [markers.map((m) => (_jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m.position * 100}%` }, children: m.label }, `${m.position}-${m.label}`))), hoverInfo && (_jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo.fraction * 100}%` }, children: hoverInfo.label }))] }) }));
 }
+// ---------------------------------------------------------------------------
+// Timeline
+// ---------------------------------------------------------------------------
 export function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSelect, hoverFraction, altHeld = false, }) {
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
@@ -124,15 +215,8 @@ export function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSel
         return () => ro.disconnect();
     }, []);
     const gaps = useMemo(() => computeSpanGaps(spans, viewStart, viewEnd), [spans, viewStart, viewEnd]);
-    return (_jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
-                    left: TIMELINE_PADDING_PX,
-                    right: TIMELINE_PADDING_PX,
-                }, children: markers.map((marker) => Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker.position * 100}%` } }, `${marker.position}-${marker.label}`)) : null) }), hoverFraction != null && (_jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: {
-                    left: TIMELINE_PADDING_PX,
-                    right: TIMELINE_PADDING_PX,
-                }, children: _jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400", style: { left: `${hoverFraction * 100}%` } }) })), spans.map((span) => (_jsx(TimelineBar, { span: span, viewStart: viewStart, viewDuration: viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
-                    left: TIMELINE_PADDING_PX,
-                    right: TIMELINE_PADDING_PX,
-                }, children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers.map((marker) => 
+                // Skip the "0s" origin marker since the left edge already implies it.
+                Math.abs(marker.value) > 0.000001 ? (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker.position * 100}%` } }, `${marker.position}-${marker.label}`)) : null) }), hoverFraction != null && (_jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: _jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) })), spans.map((span) => (_jsx(TimelineBar, { span: span, viewStart: viewStart, viewDuration: viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onSelect: onSelect }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
 }
 //# sourceMappingURL=timeline.js.map

package/dist/components/new-trace-viewer/components/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { SegmentStatus, TimeMarker } from '../utils';\nimport {\n  computeSpanGaps,\n  computeSpanSegments,\n  getSpanDurationMs,\n  getResourceColor,\n} from '../utils';\n\nconst SEGMENT_CONFIG: Record<\n  SegmentStatus,\n  { className?: string; style?: React.CSSProperties }\n> = {\n  queued: { className: 'bg-gray-500' },\n  retrying: {\n    className: 'box-border bg-gray-500',\n  },\n  waiting: { className: 'bg-gray-500' },\n  running: { className: 'bg-blue-700' },\n  failed: { className: 'bg-red-700' },\n  succeeded: { className: 'bg-green-700' },\n  sleeping: { className: 'bg-gray-500' },\n  received: { className: 'bg-blue-700' },\n};\n\nconst BAR_HEIGHT_PX = 24;\nconst TINY_BAR_BOX_SIZE_PX = 24;\nconst TINY_BAR_WIDTH_PX = 4;\nconst SEGMENT_GAP_PX = 1;\n// Keep this in sync with the rendered row height in the timeline/event list.\nconst ROW_HEIGHT = 40;\nconst CONTAINER_PAD_Y = 8;\nconst END_CAP_HEIGHT = 8;\nexport const TIMELINE_PADDING_PX = 16;\nconst ORIGIN_MARKER_EPSILON = 0.000001;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n  leftFrac,\n  rightFrac,\n  label,\n  rowIndex,\n}: {\n  leftFrac: number;\n  rightFrac: number;\n  label: string;\n  rowIndex: number;\n}) {\n  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;\n\n  return (\n    <div\n      className=\"absolute pointer-events-none\"\n      style={{\n        left: `${leftFrac * 100}%`,\n        width: `${(rightFrac - leftFrac) * 100}%`,\n        top: centerY - END_CAP_HEIGHT / 2,\n        height: END_CAP_HEIGHT,\n      }}\n    >\n      <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n      <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n      <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n      <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n        {label}\n      </span>\n    </div>\n  );\n});\n\nconst TimelineBar = memo(function TimelineBar({\n  span,\n  viewStart,\n  viewDuration,\n  containerWidth,\n  isSelected,\n  onClick,\n}: {\n  span: Span;\n  viewStart: number;\n  viewDuration: number;\n  containerWidth: number;\n  isSelected: boolean;\n  onClick: () => void;\n}): ReactNode {\n  const startTime = getHighResInMs(span.startTime);\n  const endTime = getHighResInMs(span.endTime);\n  const totalDurationMs = getSpanDurationMs(span);\n\n  const leftFracRaw =\n    viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;\n  const rightFracRaw =\n    viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;\n  const widthFrac = rightFracRaw - leftFracRaw;\n\n  const leftPct = leftFracRaw * 100;\n  const widthPct = widthFrac * 100;\n\n  const pixelWidth = widthFrac * containerWidth;\n  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));\n  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));\n  const visiblePixelWidth =\n    Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;\n  const isTinyBar =\n    containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;\n  const [isRowHovered, setIsRowHovered] = useState(false);\n\n  const segments = useMemo(() => computeSpanSegments(span), [span]);\n\n  const workflowStatus = (span.attributes.data as Record<string, unknown>)\n    ?.status as string | undefined;\n  const isErrored = span.status.code === 2 || workflowStatus === 'failed';\n  const colors = getResourceColor(span.resource);\n  const fallbackColor = isErrored\n    ? (colors.errorBar ?? 'var(--ds-red-700)')\n    : colors.bar;\n  const renderDurationLabel = (label: string) => (\n    <span\n      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\"\n      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}\n    >\n      {label}\n    </span>\n  );\n  const getMinDurationLabelWidthPx = (label: string) =>\n    Math.max(40, label.length * 6 + 12);\n  const totalDurationLabel = formatDuration(totalDurationMs);\n  const showBarDurationLabel =\n    isRowHovered &&\n    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);\n\n  const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);\n  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;\n  const barContent = showBoundaryArrow ? (\n    <div className=\"flex h-6 w-6 items-center justify-center rounded-[0.25rem]\">\n      <BoundaryArrow className=\"size-3 text-gray-900\" />\n    </div>\n  ) : isTinyBar ? (\n    <div\n      className=\"h-6 rounded-[0.25rem]\"\n      style={{ background: fallbackColor }}\n    />\n  ) : segments.length > 0 ? (\n    <div className=\"relative h-6 w-full\">\n      {segments.map((seg, i) => {\n        const segPixelWidth =\n          (seg.endFraction - seg.startFraction) * pixelWidth;\n        const segDurationLabel = formatDuration(\n          (seg.endFraction - seg.startFraction) * totalDurationMs\n        );\n        const showSegmentDurationLabel =\n          isRowHovered &&\n          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);\n        const segStyle =\n          seg.status === 'queued' && segPixelWidth < 20\n            ? { background: 'var(--ds-gray-500)' }\n            : SEGMENT_CONFIG[seg.status].style;\n\n        return (\n          <div\n            key={`${seg.status}-${i}`}\n            className={cn(\n              'absolute h-full rounded-[0.25rem]',\n              SEGMENT_CONFIG[seg.status].className\n            )}\n            style={{\n              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,\n              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,\n              minWidth: 1,\n              ...segStyle,\n            }}\n          >\n            {showSegmentDurationLabel\n              ? renderDurationLabel(segDurationLabel)\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  ) : (\n    <div\n      className=\"relative h-6 rounded-[0.25rem]\"\n      style={{\n        width: '100%',\n        minWidth: 4,\n        background: fallbackColor,\n      }}\n    >\n      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n    </div>\n  );\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      className={cn(\n        'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'\n      )}\n      onMouseEnter={() => setIsRowHovered(true)}\n      onMouseLeave={() => setIsRowHovered(false)}\n      onClick={onClick}\n    >\n      <div\n        className=\"absolute inset-y-0\"\n        style={{\n          left: TIMELINE_PADDING_PX,\n          right: TIMELINE_PADDING_PX,\n        }}\n      >\n        <div\n          className=\"absolute top-1/2 -translate-y-1/2\"\n          style={{\n            left: showBoundaryArrow\n              ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`\n              : isTinyBar\n                ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`\n                : `${leftPct}%`,\n            width: showBoundaryArrow\n              ? `${TINY_BAR_BOX_SIZE_PX}px`\n              : isTinyBar\n                ? `${TINY_BAR_WIDTH_PX}px`\n                : `max(${widthPct}%, 4px)`,\n            height: BAR_HEIGHT_PX,\n          }}\n        >\n          {barContent}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport { TimelineBar };\n\nexport function TimelineHeader({\n  markers,\n  hoverInfo,\n}: {\n  markers: TimeMarker[];\n  hoverInfo?: { fraction: number; label: string } | null;\n}): ReactNode {\n  return (\n    <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1\">\n      <div className=\"relative h-full flex-1\">\n        {markers.map((m) => (\n          <span\n            key={`${m.position}-${m.label}`}\n            className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n            style={{ left: `${m.position * 100}%` }}\n          >\n            {m.label}\n          </span>\n        ))}\n        {hoverInfo && (\n          <span\n            className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n            style={{ left: `${hoverInfo.fraction * 100}%` }}\n          >\n            {hoverInfo.label}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function Timeline({\n  spans,\n  viewStart,\n  viewEnd,\n  markers,\n  selectedId,\n  onSelect,\n  hoverFraction,\n  altHeld = false,\n}: {\n  spans: Span[];\n  viewStart: number;\n  viewEnd: number;\n  markers: TimeMarker[];\n  selectedId: string | null;\n  onSelect: (spanId: string) => void;\n  hoverFraction?: number | null;\n  altHeld?: boolean;\n}): ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const viewDuration = viewEnd - viewStart;\n  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setContainerWidth(entry.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const gaps = useMemo(\n    () => computeSpanGaps(spans, viewStart, viewEnd),\n    [spans, viewStart, viewEnd]\n  );\n\n  return (\n    <div ref={containerRef} className=\"relative h-full overflow-hidden\">\n      <div\n        aria-hidden\n        className=\"absolute inset-y-0 pointer-events-none\"\n        style={{\n          left: TIMELINE_PADDING_PX,\n          right: TIMELINE_PADDING_PX,\n        }}\n      >\n        {markers.map((marker) =>\n          Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (\n            <div\n              key={`${marker.position}-${marker.label}`}\n              className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-300\"\n              style={{ left: `${marker.position * 100}%` }}\n            />\n          ) : null\n        )}\n      </div>\n      {hoverFraction != null && (\n        <div\n          className=\"absolute inset-y-0 pointer-events-none z-10\"\n          style={{\n            left: TIMELINE_PADDING_PX,\n            right: TIMELINE_PADDING_PX,\n          }}\n        >\n          <div\n            className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-400\"\n            style={{ left: `${hoverFraction * 100}%` }}\n          />\n        </div>\n      )}\n      {spans.map((span) => (\n        <TimelineBar\n          key={span.spanId}\n          span={span}\n          viewStart={viewStart}\n          viewDuration={viewDuration}\n          containerWidth={timelineWidth}\n          isSelected={selectedId === span.spanId}\n          onClick={() => onSelect(span.spanId)}\n        />\n      ))}\n      {altHeld && (\n        <div\n          aria-hidden\n          className=\"absolute inset-y-0 pointer-events-none\"\n          style={{\n            left: TIMELINE_PADDING_PX,\n            right: TIMELINE_PADDING_PX,\n          }}\n        >\n          {gaps.map((gap) => (\n            <DeltaIndicator\n              key={gap.rowIndex}\n              leftFrac={gap.leftFrac}\n              rightFrac={gap.rightFrac}\n              label={formatDuration(gap.gapMs, true)}\n              rowIndex={gap.rowIndex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { Segment, SegmentStatus, TimeMarker } from '../utils';\nimport {\n  computeSpanGaps,\n  computeSpanSegments,\n  getResourceColor,\n  getSpanDurationMs,\n} from '../utils';\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\nconst TINY_BAR_BOX_SIZE_PX = 24;\nconst TINY_BAR_WIDTH_PX = 4;\nexport const TIMELINE_PADDING_PX = 16;\n\nconst SEGMENT_CLASSES: Record<SegmentStatus, string> = {\n  queued: 'bg-gray-400 border border-gray-500',\n  retrying: 'bg-gray-400 border border-gray-500',\n  waiting: 'bg-gray-400 border border-gray-500',\n  running: 'bg-blue-200 border border-blue-500',\n  failed: 'bg-red-200 border border-red-500',\n  succeeded: 'bg-green-200 border border-green-500',\n  sleeping: 'bg-gray-400 border border-gray-500',\n  received: 'bg-blue-200 border border-blue-500',\n};\n\nconst TIMELINE_INSET_STYLE: CSSProperties = {\n  left: TIMELINE_PADDING_PX,\n  right: TIMELINE_PADDING_PX,\n};\n\n// ---------------------------------------------------------------------------\n// Bar geometry\n// ---------------------------------------------------------------------------\n\ntype BarMode =\n  | { kind: 'arrow'; direction: 'left' | 'right' }\n  | { kind: 'tiny' }\n  | { kind: 'full' };\n\ninterface BarGeometry {\n  mode: BarMode;\n  leftPct: number;\n  widthPct: number;\n  visibleStartMs: number;\n  visibleEndMs: number;\n  visiblePixelWidth: number;\n}\n\n/**\n * Compute the bar's geometry inside the timeline viewport. Percentages are\n * always in [0, 100] so we never emit CSS values that exceed browser layout\n * limits at extreme zoom.\n */\nfunction computeBarGeometry(\n  startMs: number,\n  endMs: number,\n  viewStart: number,\n  viewEnd: number,\n  containerWidth: number\n): BarGeometry {\n  const viewDuration = viewEnd - viewStart;\n  const visibleStartMs = Math.max(startMs, viewStart);\n  const visibleEndMs = Math.min(endMs, viewEnd);\n  const visibleDurationMs = Math.max(0, visibleEndMs - visibleStartMs);\n  const widthFrac = viewDuration > 0 ? visibleDurationMs / viewDuration : 0;\n  const visiblePixelWidth = widthFrac * containerWidth;\n\n  const isTiny = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;\n  const extendsOffLeft = startMs < viewStart;\n  const extendsOffRight = endMs > viewEnd;\n\n  const mode: BarMode =\n    isTiny && (extendsOffLeft || extendsOffRight)\n      ? { kind: 'arrow', direction: extendsOffRight ? 'right' : 'left' }\n      : isTiny\n        ? { kind: 'tiny' }\n        : { kind: 'full' };\n\n  return {\n    mode,\n    leftPct:\n      viewDuration > 0\n        ? ((visibleStartMs - viewStart) / viewDuration) * 100\n        : 0,\n    widthPct: widthFrac * 100,\n    visibleStartMs,\n    visibleEndMs,\n    visiblePixelWidth,\n  };\n}\n\nfunction getBarPositionStyle(geometry: BarGeometry): {\n  left: string;\n  width: string;\n} {\n  switch (geometry.mode.kind) {\n    case 'arrow':\n      return {\n        left:\n          geometry.mode.direction === 'right'\n            ? `calc(100% - ${TINY_BAR_BOX_SIZE_PX}px)`\n            : '0px',\n        width: `${TINY_BAR_BOX_SIZE_PX}px`,\n      };\n    case 'tiny':\n      return {\n        left: `min(${geometry.leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`,\n        width: `${TINY_BAR_WIDTH_PX}px`,\n      };\n    case 'full':\n      return {\n        left: `${geometry.leftPct}%`,\n        width: `max(${geometry.widthPct}%, 4px)`,\n      };\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Segment projection\n// ---------------------------------------------------------------------------\n\ninterface VisibleSegment {\n  status: SegmentStatus;\n  leftPct: number;\n  widthPct: number;\n  pixelWidth: number;\n  fullDurationMs: number;\n}\n\n/**\n * Project status segments onto the visible portion of a bar. Segments fully\n * outside the visible window are dropped; segments crossing the edge are\n * clipped to [0%, 100%] of the visible bar.\n */\nfunction projectSegments(\n  segments: Segment[],\n  spanStartMs: number,\n  spanDurationMs: number,\n  geometry: BarGeometry\n): VisibleSegment[] {\n  const visibleDurationMs = geometry.visibleEndMs - geometry.visibleStartMs;\n  if (visibleDurationMs <= 0) return [];\n\n  return segments.flatMap((seg) => {\n    const segStartMs = spanStartMs + seg.startFraction * spanDurationMs;\n    const segEndMs = spanStartMs + seg.endFraction * spanDurationMs;\n    const startMs = Math.max(segStartMs, geometry.visibleStartMs);\n    const endMs = Math.min(segEndMs, geometry.visibleEndMs);\n    if (endMs <= startMs) return [];\n\n    const widthFrac = (endMs - startMs) / visibleDurationMs;\n    return [\n      {\n        status: seg.status,\n        leftPct:\n          ((startMs - geometry.visibleStartMs) / visibleDurationMs) * 100,\n        widthPct: widthFrac * 100,\n        pixelWidth: widthFrac * geometry.visiblePixelWidth,\n        fullDurationMs: (seg.endFraction - seg.startFraction) * spanDurationMs,\n      },\n    ];\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Small render helpers\n// ---------------------------------------------------------------------------\n\nfunction DurationLabel({ label }: { label: string }): ReactNode {\n  return (\n    <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-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100\">\n      {label}\n    </span>\n  );\n}\n\nfunction BoundaryArrow({\n  direction,\n}: {\n  direction: 'left' | 'right';\n}): ReactNode {\n  const Icon = direction === 'right' ? ArrowRight : ArrowLeft;\n  return (\n    <div className=\"flex h-6 w-6 items-center justify-center rounded-[0.25rem]\">\n      <Icon className=\"size-3 text-gray-900\" />\n    </div>\n  );\n}\n\nfunction PlainBar({\n  bg,\n  border,\n  label,\n}: {\n  bg: string;\n  border: string;\n  label: string | null;\n}): ReactNode {\n  return (\n    <div\n      className=\"relative h-6 w-full min-w-1 rounded-[0.25rem] border\"\n      style={{ background: bg, borderColor: border }}\n    >\n      {label ? <DurationLabel label={label} /> : null}\n    </div>\n  );\n}\n\nfunction SegmentBar({ segments }: { segments: VisibleSegment[] }): ReactNode {\n  return (\n    <div className=\"relative h-6 w-full\">\n      {segments.map((seg, i) => {\n        const label = formatDuration(seg.fullDurationMs);\n        // Only render the label when there's enough room for it without clipping.\n        const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);\n        // Beef up the queued segment when it's too narrow to read.\n        const isNarrowQueued = seg.status === 'queued' && seg.pixelWidth < 20;\n        const overrideBg = isNarrowQueued ? 'var(--ds-gray-400)' : undefined;\n        const overrideBorder = isNarrowQueued\n          ? 'var(--ds-gray-500)'\n          : undefined;\n\n        return (\n          <div\n            key={`${seg.status}-${i}`}\n            className={cn(\n              'absolute h-full rounded-[0.25rem]',\n              SEGMENT_CLASSES[seg.status]\n            )}\n            style={{\n              // 1px gap between adjacent segments, distributed equally.\n              left: `calc(${seg.leftPct}% + 0.5px)`,\n              width: `calc(${seg.widthPct}% - 1px)`,\n              minWidth: 1,\n              background: overrideBg,\n              borderColor: overrideBorder,\n            }}\n          >\n            {showLabel ? <DurationLabel label={label} /> : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// TimelineBar\n// ---------------------------------------------------------------------------\n\nconst TimelineBar = memo(function TimelineBar({\n  span,\n  viewStart,\n  viewDuration,\n  containerWidth,\n  isSelected,\n  onSelect,\n}: {\n  span: Span;\n  viewStart: number;\n  viewDuration: number;\n  containerWidth: number;\n  isSelected: boolean;\n  onSelect: (spanId: string) => void;\n}): ReactNode {\n  const startMs = getHighResInMs(span.startTime);\n  const endMs = getHighResInMs(span.endTime);\n  const totalDurationMs = getSpanDurationMs(span);\n\n  const geometry = useMemo(\n    () =>\n      computeBarGeometry(\n        startMs,\n        endMs,\n        viewStart,\n        viewStart + viewDuration,\n        containerWidth\n      ),\n    [startMs, endMs, viewStart, viewDuration, containerWidth]\n  );\n\n  const baseSegments = useMemo(() => computeSpanSegments(span), [span]);\n  const segments = useMemo(\n    () =>\n      geometry.mode.kind === 'full'\n        ? projectSegments(baseSegments, startMs, totalDurationMs, geometry)\n        : [],\n    [geometry, baseSegments, startMs, totalDurationMs]\n  );\n\n  const workflowStatus = (span.attributes.data as Record<string, unknown>)\n    ?.status as string | undefined;\n  const isErrored = span.status.code === 2 || workflowStatus === 'failed';\n  const colors = getResourceColor(span.resource);\n  const fallbackBg = isErrored\n    ? (colors.errorBg ?? 'var(--ds-red-200)')\n    : colors.bg;\n  const fallbackBorder = isErrored\n    ? (colors.errorBorder ?? 'var(--ds-red-500)')\n    : colors.border;\n\n  const totalLabel = formatDuration(totalDurationMs);\n  const showTotalLabel =\n    geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);\n\n  const handleClick = useCallback(() => {\n    onSelect(span.spanId);\n  }, [onSelect, span.spanId]);\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      className=\"group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200\"\n      onClick={handleClick}\n    >\n      <div className=\"absolute inset-y-0\" style={TIMELINE_INSET_STYLE}>\n        <div\n          className=\"absolute top-1/2 h-6 -translate-y-1/2\"\n          style={getBarPositionStyle(geometry)}\n        >\n          {geometry.mode.kind === 'arrow' ? (\n            <BoundaryArrow direction={geometry.mode.direction} />\n          ) : geometry.mode.kind === 'tiny' ? (\n            <div\n              className=\"h-6 rounded-[0.25rem] border\"\n              style={{ background: fallbackBg, borderColor: fallbackBorder }}\n            />\n          ) : segments.length > 0 ? (\n            <SegmentBar segments={segments} />\n          ) : (\n            <PlainBar\n              bg={fallbackBg}\n              border={fallbackBorder}\n              label={showTotalLabel ? totalLabel : null}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport { TimelineBar };\n\n// ---------------------------------------------------------------------------\n// DeltaIndicator (Alt-key gap overlay)\n// ---------------------------------------------------------------------------\n\n// Row and indicator sizes are local to DeltaIndicator since it's the only\n// place that needs to compute Y positions from a row index. ROW_HEIGHT must\n// match the `h-10` (40px) row used in TimelineBar.\nconst DELTA_ROW_HEIGHT_PX = 40;\nconst DELTA_CAP_HEIGHT_PX = 8;\n// Vertical offset to sit the indicator inside the gap between row N and N+1,\n// aligned with where the bar starts in the next row (rows center a 24px bar\n// inside 40px, so bars start ~8px from the top of the row).\nconst DELTA_ROW_OFFSET_PX = 8;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n  leftFrac,\n  rightFrac,\n  label,\n  rowIndex,\n}: {\n  leftFrac: number;\n  rightFrac: number;\n  label: string;\n  rowIndex: number;\n}) {\n  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * DELTA_ROW_HEIGHT_PX;\n\n  return (\n    <div\n      className=\"absolute pointer-events-none\"\n      style={{\n        left: `${leftFrac * 100}%`,\n        width: `${(rightFrac - leftFrac) * 100}%`,\n        top: centerY - DELTA_CAP_HEIGHT_PX / 2,\n        height: DELTA_CAP_HEIGHT_PX,\n      }}\n    >\n      <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n      <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n      <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n      <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n        {label}\n      </span>\n    </div>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// TimelineHeader\n// ---------------------------------------------------------------------------\n\nexport function TimelineHeader({\n  markers,\n  hoverInfo,\n}: {\n  markers: TimeMarker[];\n  hoverInfo?: { fraction: number; label: string } | null;\n}): ReactNode {\n  return (\n    <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1\">\n      <div className=\"relative h-full flex-1\">\n        {markers.map((m) => (\n          <span\n            key={`${m.position}-${m.label}`}\n            className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n            style={{ left: `${m.position * 100}%` }}\n          >\n            {m.label}\n          </span>\n        ))}\n        {hoverInfo && (\n          <span\n            className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n            style={{ left: `${hoverInfo.fraction * 100}%` }}\n          >\n            {hoverInfo.label}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Timeline\n// ---------------------------------------------------------------------------\n\nexport function Timeline({\n  spans,\n  viewStart,\n  viewEnd,\n  markers,\n  selectedId,\n  onSelect,\n  hoverFraction,\n  altHeld = false,\n}: {\n  spans: Span[];\n  viewStart: number;\n  viewEnd: number;\n  markers: TimeMarker[];\n  selectedId: string | null;\n  onSelect: (spanId: string) => void;\n  hoverFraction?: number | null;\n  altHeld?: boolean;\n}): ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const viewDuration = viewEnd - viewStart;\n  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setContainerWidth(entry.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const gaps = useMemo(\n    () => computeSpanGaps(spans, viewStart, viewEnd),\n    [spans, viewStart, viewEnd]\n  );\n\n  return (\n    <div ref={containerRef} className=\"relative h-full overflow-hidden\">\n      <div\n        aria-hidden\n        className=\"absolute inset-y-0 pointer-events-none\"\n        style={TIMELINE_INSET_STYLE}\n      >\n        {markers.map((marker) =>\n          // Skip the \"0s\" origin marker since the left edge already implies it.\n          Math.abs(marker.value) > 0.000001 ? (\n            <div\n              key={`${marker.position}-${marker.label}`}\n              className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-300\"\n              style={{ left: `${marker.position * 100}%` }}\n            />\n          ) : null\n        )}\n      </div>\n      {hoverFraction != null && (\n        <div\n          className=\"absolute inset-y-0 pointer-events-none z-10\"\n          style={TIMELINE_INSET_STYLE}\n        >\n          <div\n            className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-500\"\n            style={{ left: `${hoverFraction * 100}%` }}\n          />\n        </div>\n      )}\n      {spans.map((span) => (\n        <TimelineBar\n          key={span.spanId}\n          span={span}\n          viewStart={viewStart}\n          viewDuration={viewDuration}\n          containerWidth={timelineWidth}\n          isSelected={selectedId === span.spanId}\n          onSelect={onSelect}\n        />\n      ))}\n      {altHeld && (\n        <div\n          aria-hidden\n          className=\"absolute inset-y-0 pointer-events-none\"\n          style={TIMELINE_INSET_STYLE}\n        >\n          {gaps.map((gap) => (\n            <DeltaIndicator\n              key={gap.rowIndex}\n              leftFrac={gap.leftFrac}\n              rightFrac={gap.rightFrac}\n              label={formatDuration(gap.gapMs, true)}\n              rowIndex={gap.rowIndex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/trace-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trace-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/trace-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAcnD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd;AAqGD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAMxE"}
+{"version":3,"file":"trace-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/trace-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAcnD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd;AA6GD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAMxE"}

package/dist/components/new-trace-viewer/trace-viewer.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useReducedMotion } from '../../hooks/use-reduced-motion';
 import { ErrorBoundary } from '../error-boundary';
 import { EntityDetailPanel, } from '../sidebar/entity-detail-panel';
 import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
@@ -20,6 +21,7 @@ function useAnimatedViewport(initial) {
     const animRef = useRef(null);
     const currentRef = useRef(initial);
     currentRef.current = viewport;
+    const reducedMotion = useReducedMotion();
     const cancel = useCallback(() => {
         if (animRef.current) {
             cancelAnimationFrame(animRef.current.raf);
@@ -28,6 +30,11 @@ function useAnimatedViewport(initial) {
     }, []);
     const animateTo = useCallback((target) => {
         cancel();
+        if (reducedMotion) {
+            currentRef.current = target;
+            setViewportState(target);
+            return;
+        }
         const from = currentRef.current;
         const anim = { raf: 0, from, to: target, start: performance.now() };
         const tick = () => {
@@ -44,7 +51,7 @@ function useAnimatedViewport(initial) {
         };
         animRef.current = anim;
         anim.raf = requestAnimationFrame(tick);
-    }, [cancel]);
+    }, [cancel, reducedMotion]);
     const setViewport = useCallback((update) => {
         cancel();
         if (typeof update === 'function') {
@@ -347,9 +354,7 @@ function NewTraceViewerContent({ trace }) {
                                                         ? 'bg-green-200 text-green-900'
                                                         : selectedResource === 'run'
                                                             ? 'bg-blue-200 text-blue-900'
-                                                            : selectedResource === 'hook'
-                                                                ? 'bg-yellow-200 text-yellow-900'
-                                                                : 'bg-gray-200 text-gray-900'}`, children: selectedResource.charAt(0).toUpperCase() +
+                                                            : 'bg-gray-200 text-gray-900'}`, children: selectedResource.charAt(0).toUpperCase() +
                                                         selectedResource.slice(1) })), _jsxs("div", { className: "flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0", title: selectedResourceId, children: [_jsx("span", { className: "truncate", children: selectedResourceId }), _jsx(CopyButton, { copyText: selectedResourceId, ariaLabel: "Copy ID", className: "shrink-0" })] })] }))] }), _jsx("button", { 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, children: _jsx(X, { className: "w-4 h-4" }) })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(ErrorBoundary, { children: _jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan: selectedSpan }) }) })] })) : activeSpan ? (_jsx(DetailPanel, { span: activeSpan, rootStart: root.startTime, onClose: clearActiveSpan })) : null] }));
 }
 //# sourceMappingURL=trace-viewer.js.map