@workflow/web 5.0.0-beta.24 → 5.0.0-beta.25

package/build/client/assets/{run-detail-BzGs1YV_.js → run-detail-sr7StYc6.js}

@@ -1,6 +1,6 @@
 import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, G as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BXZSIDEp.js";
-import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, X, p as ChevronUp, N as ErrorBoundary, I as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-BlDVZ5AU.js";
-import { c as createLucideIcon, O as cn, U as DataInspector, W as DecryptClickContext, X as Button, Y as Spinner, Z as Lock, $ as RESERVED_ATTRIBUTE_KEY_PREFIX, a0 as ContextCardProvider, h as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as TimestampTooltip, a5 as formatDuration, a6 as _r, a7 as RunClickContext, a8 as StreamClickContext, a9 as isExpiredMarker, aa as isDoStreamStep, ab as extractConversation, ac as hasEncryptedFields, ad as EVENT_DATA_REF_FIELDS, ae as useSidebarDataOptional, af as clsx, I as cva, ag as useRowWindow, ah as isSpanDimmedBySearch, ai as ROW_HEIGHT_PX, aj as getSpanDurationMs, ak as formatDurationPrecise, al as TooltipProvider, am as ActiveSpanProvider, an as useActiveSpan, ao as useSidebarData, ap as useReducedMotion, aq as searchSpans, ar as computeRootBounds, as as computeTimeMarkers, at as getHighResInMs, au as scrollRowIntoView, av as TIMELINE_PADDING_PX, aw as Timeline, ax as TimelineHeader, ay as IconButton, az as Tooltip, aA as TooltipTrigger, aB as TooltipContent, aC as SidebarDataProvider, aD as hydrateResourceIOWithKey, aE as hydrateResourceIO, aF as fetchHook, l as fetchEvents, H as fetchRun, aG as fetchStep, aH as fetchStreams, aI as Slot, G as useComposedRefs, aJ as Slottable, e as cn$1, aK as buttonVariants, aL as fetchEvent, aM as fetchEventsByCorrelationId, aN as isEncryptedData, aO as hydrateData, aP as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aQ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aR as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aS as StreamViewer } from "./mermaid-3ZIDBTTL-C_xy8SxZ.js";
+import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, X, p as ChevronUp, N as ErrorBoundary, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-CcCwLmnF.js";
+import { c as createLucideIcon, O as cn, U as DataInspector, W as DecryptClickContext, X as Button, Y as Spinner, Z as Lock, $ as RESERVED_ATTRIBUTE_KEY_PREFIX, a0 as ContextCardProvider, h as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as TimestampTooltip, a5 as formatDuration, a6 as _r, a7 as RunClickContext, a8 as StreamClickContext, a9 as isExpiredMarker, aa as isDoStreamStep, ab as extractConversation, ac as hasEncryptedFields, ad as EVENT_DATA_REF_FIELDS, ae as useSidebarDataOptional, af as clsx, I as cva, ag as useRowWindow, ah as isSpanDimmedBySearch, ai as ROW_HEIGHT_PX, aj as getSpanDurationMs, ak as formatDurationPrecise, al as TooltipProvider, am as ActiveSpanProvider, an as useActiveSpan, ao as useSidebarData, ap as useReducedMotion, aq as searchSpans, ar as computeRootBounds, as as computeTimeMarkers, at as getHighResInMs, au as scrollRowIntoView, av as TIMELINE_PADDING_PX, aw as Timeline, ax as TimelineHeader, ay as IconButton, az as Tooltip, aA as TooltipTrigger, aB as TooltipContent, aC as SidebarDataProvider, aD as fetchHook, l as fetchEvents, aE as hydrateResourceIO, aF as hydrateResourceIOWithKey, H as fetchRun, aG as fetchStep, aH as fetchStreams, aI as Slot, G as useComposedRefs, aJ as Slottable, e as cn$1, aK as buttonVariants, aL as fetchEvent, aM as fetchEventsByCorrelationId, aN as isEncryptedData, aO as hydrateData, aP as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aQ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aR as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aS as StreamViewer } from "./mermaid-3ZIDBTTL-Cg-Mp5Kj.js";
 import { decrypt, importKey } from "./encryption-g14N5vQl.js";
 import "./index-B6-SzLmT.js";
 /**
@@ -327,6 +327,18 @@ function formatEventTime(date) {
     hour12: false
   }) + "." + date.getMilliseconds().toString().padStart(3, "0");
 }
+function parseEventDate(value) {
+  if (value == null)
+    return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function getEffectiveEventDate$1(event) {
+  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+}
+function getEffectiveEventTime(event) {
+  return getEffectiveEventDate$1(event).getTime();
+}
 function formatEventType(eventType) {
   return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
@@ -367,13 +379,13 @@ function buildNameMaps(events, run) {
   return { correlationNameMap, workflowName };
 }
 function buildDurationMap(events) {
-  const chronological = [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+  const chronological = [...events].sort((a, b) => getEffectiveEventTime(a) - getEffectiveEventTime(b));
   const createdTimes = /* @__PURE__ */ new Map();
   const firstStartedTimes = /* @__PURE__ */ new Map();
   const startedTimes = /* @__PURE__ */ new Map();
   const durations = /* @__PURE__ */ new Map();
   for (const event of chronological) {
-    const ts = new Date(event.createdAt).getTime();
+    const ts = getEffectiveEventTime(event);
     const key = event.correlationId ?? "__run__";
     const type = event.eventType;
     if (type === "step_created" || type === "run_created") {
@@ -596,7 +608,7 @@ const SORT_OPTIONS = [
   { value: "desc", label: "Newest" },
   { value: "asc", label: "Oldest" }
 ];
-function RowsSkeleton() {
+function RowsSkeleton({ showSeparateEventOccurrenceTimestamps = false }) {
   return jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 16 }, (_, i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0", style: { height: 40 }, children: [jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch flex items-center", style: { width: GUTTER_WIDTH }, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "absolute",
     left: 8,
@@ -608,9 +620,9 @@ function RowsSkeleton() {
     height: i % 4 === 0 ? 8 : 6,
     borderRadius: "50%",
     marginLeft: i % 4 === 0 ? 5 : 6
-  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
+  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
 }
-function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false }) {
+function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false, showSeparateEventOccurrenceTimestamps = false }) {
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadedEventData, setLoadedEventData] = reactExports.useState(cachedEventData);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -623,6 +635,8 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   const rowGroupKey = isRunLevel(event.eventType) ? "__run__" : event.correlationId ?? void 0;
   const statusDotColor = getStatusDotColor(event.eventType);
   const createdAt = new Date(event.createdAt);
+  const occurredAt = parseEventDate(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate$1(event);
   const hasExistingEventData = "eventData" in event && event.eventData != null;
   const isRun = isRunLevel(event.eventType);
   const eventName = isRun ? workflowName ?? "-" : event.correlationId ? correlationNameMap.get(event.correlationId) ?? "-" : "-";
@@ -726,7 +740,7 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
     color: "var(--ds-gray-900)",
     transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-  } }) }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: createdAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(createdAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
+  } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: occurredAt ? jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(occurredAt) }) }) : "-" }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: displayedCreatedAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(displayedCreatedAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
     position: "relative",
     display: "inline-flex",
     width: 6,
@@ -755,7 +769,7 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
     color: "var(--ds-red-900)"
   }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
 }
-function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch }) {
+function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch, showSeparateEventOccurrenceTimestamps = false }) {
   const toast2 = useToast();
   const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
   const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
@@ -781,7 +795,7 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
     if (sourceEvents.length === 0)
       return [];
     const dir = effectiveSortOrder === "desc" ? -1 : 1;
-    return [...sourceEvents].sort((a, b) => dir * (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
+    return [...sourceEvents].sort((a, b) => dir * (getEffectiveEventTime(a) - getEffectiveEventTime(b)));
   }, [events, effectiveSortOrder, isExactSearchActive, searchResults]);
   const hasEncryptedInlineData = reactExports.useMemo(() => {
     const sourceEvents = isExactSearchActive ? searchResults : events;
@@ -1009,14 +1023,14 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
     borderColor: "var(--ds-gray-alpha-200)",
     color: "var(--ds-gray-900)",
     backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Time" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching || searchLoading ? jsxRuntimeExports.jsx(RowsSkeleton, {}) : sortedEvents.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-sm", style: { color: "var(--ds-gray-700)" }, children: searchNotFound && searchQuery.trim() ? `No events found for ${searchQuery.trim()}` : searchError ? searchError : parsedSearchId && searchQuery.trim() && !onExactIdSearch ? "Exact ID search is unavailable in this view." : "No events found" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Occurred" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Created" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching || searchLoading ? jsxRuntimeExports.jsx(RowsSkeleton, { showSeparateEventOccurrenceTimestamps }) : sortedEvents.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-sm", style: { color: "var(--ds-gray-700)" }, children: searchNotFound && searchQuery.trim() ? `No events found for ${searchQuery.trim()}` : searchError ? searchError : parsedSearchId && searchQuery.trim() && !onExactIdSearch ? "Exact ID search is unavailable in this view." : "No events found" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
     if (isExactSearchActive || !hasMoreEvents || isLoadingMoreEvents) {
       return;
     }
     void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
   }, itemContent: (index) => {
     const ev = sortedEvents[index];
-    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive });
+    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive, showSeparateEventOccurrenceTimestamps });
   }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs", style: {
     borderColor: "var(--ds-gray-alpha-200)",
     color: "var(--ds-gray-900)",
@@ -1026,6 +1040,22 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
 function EventListView(props) {
   return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(EventListViewInner, { ...props }) });
 }
+const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
+const ROWS = [
+  { id: "r0", name: 62, off: 0, bar: 72 },
+  { id: "r1", name: 78, off: 6, bar: 48 },
+  { id: "r2", name: 50, off: 10, bar: 55 },
+  { id: "r3", name: 84, off: 18, bar: 30 },
+  { id: "r4", name: 45, off: 18, bar: 42 },
+  { id: "r5", name: 66, off: 34, bar: 38 },
+  { id: "r6", name: 55, off: 41, bar: 25 },
+  { id: "r7", name: 40, off: 50, bar: 30 }
+];
+const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
+const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
+function TraceViewerSkeleton() {
+  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id) => jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-9" }, id)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
+}
 function shouldShowVerticalLine(eventType) {
   if (eventType === "hook_created" || eventType === "hook_received" || eventType === "hook_disposed") {
     return true;
@@ -1081,24 +1111,17 @@ const MARKER_EVENT_TYPES = /* @__PURE__ */ new Set([
   "wait_completed",
   "attr_set"
 ]);
-const findEventByType = (events, eventTypes) => {
-  for (const eventType of eventTypes) {
-    const event = events.find((e) => e.eventType === eventType);
-    if (event)
-      return event;
-  }
-  return void 0;
-};
-const withOccurredAt = (entity, occurredAt) => {
-  if (!occurredAt || entity.occurredAt != null) {
-    return entity;
-  }
-  return { ...entity, occurredAt };
+const getEventTimestamp = (event) => {
+  const value = (event == null ? void 0 : event.occurredAt) ?? (event == null ? void 0 : event.createdAt);
+  if (!value)
+    return void 0;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
 };
-function convertEventsToSpanEvents(events, filterTypes = true) {
+function convertEventsToSpanEvents(events, filterTypes = true, options = {}) {
   return events.filter((event) => filterTypes ? MARKER_EVENT_TYPES.has(event.eventType) : true).map((event) => ({
     name: event.eventType,
-    timestamp: dateToOtelTime(event.createdAt),
+    timestamp: dateToOtelTime(options.preferOccurredAt ? getEventTimestamp(event) ?? event.createdAt : event.createdAt),
     attributes: {
       eventId: event.eventId,
       correlationId: event.correlationId,
@@ -1115,13 +1138,13 @@ const waitEventsToWaitEntity = (events) => {
     return null;
   }
   const completedEvent = events.find((event) => event.eventType === "wait_completed");
-  return withOccurredAt({
+  return {
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
-    createdAt: startEvent.createdAt,
+    createdAt: getEventTimestamp(startEvent) ?? startEvent.createdAt,
     resumeAt: ((_a = startEvent.eventData) == null ? void 0 : _a.resumeAt) ? new Date(startEvent.eventData.resumeAt) : void 0,
-    completedAt: completedEvent == null ? void 0 : completedEvent.createdAt
-  }, startEvent.occurredAt);
+    completedAt: getEventTimestamp(completedEvent)
+  };
 };
 function waitToSpan(events, maxEndTime, fallbackEndTime = maxEndTime) {
   const wait = waitEventsToWaitEntity(events);
@@ -1177,16 +1200,16 @@ const stepEventsToStepEntity = (events) => {
         status = "running";
         attempt += 1;
         if (!startedAt)
-          startedAt = e.createdAt;
+          startedAt = getEventTimestamp(e) ?? e.createdAt;
         completedAt = void 0;
         break;
       case "step_completed":
         status = "completed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_failed":
         status = "failed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_retrying":
         status = "pending";
@@ -1197,19 +1220,18 @@ const stepEventsToStepEntity = (events) => {
   if (attempt === 0)
     attempt = 1;
   const lastEvent = events[events.length - 1];
-  const occurrenceEvent = findEventByType(events, ["step_created", "step_started"]) ?? anchorEvent;
-  return withOccurredAt({
+  return {
     stepId: anchorEvent.correlationId ?? "",
     runId: anchorEvent.runId,
     stepName: ((_a = createdEvent == null ? void 0 : createdEvent.eventData) == null ? void 0 : _a.stepName) ?? "",
     status,
     attempt,
-    createdAt: anchorEvent.createdAt,
-    updatedAt: (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
+    createdAt: getEventTimestamp(anchorEvent) ?? anchorEvent.createdAt,
+    updatedAt: getEventTimestamp(lastEvent) ?? (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
     startedAt,
     completedAt,
     specVersion: anchorEvent.specVersion
-  }, occurrenceEvent.occurredAt);
+  };
 };
 function stepToSpan(stepEvents, maxEndTime) {
   const step = stepEventsToStepEntity(stepEvents);
@@ -1222,13 +1244,20 @@ function stepToSpan(stepEvents, maxEndTime) {
     data: step
   };
   const resource = "step";
-  const endTime = new Date(step.completedAt ?? maxEndTime);
-  const events = convertEventsToSpanEvents(stepEvents, false);
-  const spanStartTime = new Date(step.createdAt);
+  const events = convertEventsToSpanEvents(stepEvents, false, {
+    preferOccurredAt: true
+  });
+  const spanStartEvent = stepEvents.find((event) => event.eventType === "step_created") ?? stepEvents[0];
+  const spanStartTime = getEventTimestamp(spanStartEvent) ?? new Date(step.createdAt);
   let activeStartTime = step.startedAt ? new Date(step.startedAt) : void 0;
   const firstStartEvent = stepEvents.find((event) => event.eventType === "step_started");
   if (firstStartEvent) {
-    activeStartTime = new Date(firstStartEvent.createdAt);
+    activeStartTime = getEventTimestamp(firstStartEvent) ?? new Date(firstStartEvent.createdAt);
+  }
+  let endTime = new Date(maxEndTime);
+  if (step.completedAt) {
+    const completedEvent = stepEvents.slice().reverse().find((event) => event.eventType === "step_completed" || event.eventType === "step_failed");
+    endTime = getEventTimestamp(completedEvent) ?? new Date(step.completedAt);
   }
   return {
     spanId: String(step.stepId),
@@ -1250,7 +1279,7 @@ function stepToSpan(stepEvents, maxEndTime) {
   };
 }
 const hookEventsToHookEntity = (events) => {
-  var _a, _b;
+  var _a;
   const createdEvent = events.find((event) => event.eventType === "hook_created");
   if (!createdEvent) {
     return null;
@@ -1258,15 +1287,15 @@ const hookEventsToHookEntity = (events) => {
   const receivedEvents = events.filter((event) => event.eventType === "hook_received");
   const disposedEvents = events.filter((event) => event.eventType === "hook_disposed");
   const lastReceivedEvent = receivedEvents.at(-1);
-  return withOccurredAt({
+  return {
     hookId: createdEvent.correlationId,
     runId: createdEvent.runId,
     token: (_a = createdEvent.eventData) == null ? void 0 : _a.token,
-    createdAt: createdEvent.createdAt,
+    createdAt: getEventTimestamp(createdEvent) ?? createdEvent.createdAt,
     receivedCount: receivedEvents.length,
-    lastReceivedAt: (lastReceivedEvent == null ? void 0 : lastReceivedEvent.createdAt) || void 0,
-    disposedAt: ((_b = disposedEvents.at(-1)) == null ? void 0 : _b.createdAt) || void 0
-  }, createdEvent.occurredAt);
+    lastReceivedAt: getEventTimestamp(lastReceivedEvent),
+    disposedAt: getEventTimestamp(disposedEvents.at(-1))
+  };
 };
 function hookToSpan(hookEvents, maxEndTime) {
   const hook = hookEventsToHookEntity(hookEvents);
@@ -1298,19 +1327,26 @@ function hookToSpan(hookEvents, maxEndTime) {
 function runToSpan(run, runEvents, nowTime) {
   var _a;
   const now = nowTime ?? /* @__PURE__ */ new Date();
+  const runCreatedEvent = runEvents.find((event) => event.eventType === "run_created");
+  const runStartedEvent = runEvents.find((event) => event.eventType === "run_started");
+  const terminalEvent = runEvents.slice().reverse().find((event) => event.eventType === "run_completed" || event.eventType === "run_failed" || event.eventType === "run_cancelled");
+  const spanStartTime = getEventTimestamp(runCreatedEvent) ?? new Date(run.createdAt);
+  const activeStartTime = getEventTimestamp(runStartedEvent) ?? (run.startedAt ? new Date(run.startedAt) : void 0);
+  const completedAt = getEventTimestamp(terminalEvent) ?? run.completedAt ?? void 0;
+  const endTime = completedAt ?? now;
   const { input: _i, output: _o, error: _e, ...runIdentity } = run;
-  const occurrenceEvent = findEventByType(runEvents, [
-    "run_created",
-    "run_started"
-  ]);
   const attributes = {
     resource: "run",
-    data: withOccurredAt(runIdentity, occurrenceEvent == null ? void 0 : occurrenceEvent.occurredAt)
+    data: {
+      ...runIdentity,
+      createdAt: spanStartTime,
+      startedAt: activeStartTime,
+      completedAt
+    }
   };
-  const spanStartTime = new Date(run.createdAt);
-  const activeStartTime = run.startedAt ? new Date(run.startedAt) : void 0;
-  const endTime = run.completedAt ?? now;
-  const events = convertEventsToSpanEvents(runEvents, false);
+  const events = convertEventsToSpanEvents(runEvents, false, {
+    preferOccurredAt: true
+  });
   return {
     spanId: String(run.runId),
     name: String(((_a = parseWorkflowName(run.workflowName)) == null ? void 0 : _a.shortName) ?? "?"),
@@ -1380,7 +1416,7 @@ function groupEventsByCorrelation(events) {
 function computeLatestKnownTime(events, run) {
   let latest = new Date(run.createdAt).getTime();
   for (const event of events) {
-    const t = new Date(event.createdAt).getTime();
+    const t = (getEventTimestamp(event) ?? new Date(event.createdAt)).getTime();
     if (t > latest)
       latest = t;
   }
@@ -1973,7 +2009,7 @@ const getModuleSpecifierFromName = (value) => {
   }
   return raw;
 };
-const parseDateValue = (value) => {
+const parseDateValue$1 = (value) => {
   if (value == null) {
     return null;
   }
@@ -1988,14 +2024,14 @@ const parseDateValue = (value) => {
 };
 const formatLocalMillisecondTime = (date) => format(date, "MMM dd HH:mm:ss.SS OO").toUpperCase();
 const localMillisecondTimeOrNull = (value) => {
-  const date = parseDateValue(value);
+  const date = parseDateValue$1(value);
   if (!date) {
     return null;
   }
   return formatLocalMillisecondTime(date);
 };
 const timestampWithTooltipOrNull = (value) => {
-  const date = parseDateValue(value);
+  const date = parseDateValue$1(value);
   if (!date)
     return null;
   return jsxRuntimeExports.jsx(TimestampTooltip, { date, children: jsxRuntimeExports.jsx("span", { children: formatLocalMillisecondTime(date) }) });
@@ -2202,8 +2238,8 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
       return present;
     if (resource === "sleep")
       return present;
-    const loadingDefaults = ["input", "output"];
-    for (const key of loadingDefaults) {
+    const loadingPlaceholders = ["input", "output"];
+    for (const key of loadingPlaceholders) {
       if (!present.includes(key)) {
         present.push(key);
       }
@@ -2268,7 +2304,23 @@ const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
   "wait_completed",
   "attr_set"
 ]);
-function EventItem({ event, onLoadEventData, encryptionKey }) {
+const parseDateValue = (value) => {
+  if (value == null)
+    return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+const getEffectiveEventDate = (event) => parseDateValue(event.occurredAt) ?? new Date(event.createdAt);
+const formatEventTimestamp = (date) => date.toLocaleString(void 0, {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  fractionalSecondDigits: 3,
+  timeZoneName: "short"
+});
+function EventItem({ event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
   const [loadedData, setLoadedData] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -2309,16 +2361,18 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
     void loadEventData({ force: true });
   }, [encryptionKey, loadEventData]);
   const createdAt = new Date(event.createdAt);
-  const createdAtTime = createdAt.toLocaleTimeString(void 0, {
+  const occurredAt = parseDateValue(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate(event);
+  const displayedCreatedAtTime = displayedCreatedAt.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "numeric",
     second: "numeric"
   });
   const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: createdAtTime })] }), onToggle: canHaveData ? (open) => {
+  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: displayedCreatedAtTime })] }), onToggle: canHaveData ? (open) => {
     if (open)
       handleExpand();
-  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
+  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [showSeparateEventOccurrenceTimestamps && occurredAt && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Occurred" }), jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: formatEventTimestamp(occurredAt) }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
 }
 function hasOnlyExpiredFields(data, eventType) {
   if (data === null || typeof data !== "object" || Array.isArray(data)) {
@@ -2354,15 +2408,52 @@ function EventDataBlock({ eventType, data }) {
   }
   return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
 }
-function EventsList({ events, isLoading = false, error, onLoadEventData, onStreamClick, onRunClick, encryptionKey }) {
-  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()), [events]);
+function EventsList({ events, isLoading = false, error, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
+  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => getEffectiveEventDate(a).getTime() - getEffectiveEventDate(b).getTime()), [events]);
   const hasEvents = sortedEvents.length > 0 && !error;
   if (!hasEvents && !isLoading) {
     return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", disabled: true });
   }
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) }) }) });
+  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps }, event.eventId)) }) }) }) });
 }
 const hasField = (value, key) => key in value;
+const RESOURCES_WITH_FETCHED_DETAIL = /* @__PURE__ */ new Set(["run", "step", "sleep"]);
+function resourceNeedsFetchedDetail(resource) {
+  return resource !== void 0 && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+function deriveSpanDetailView(args) {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } = args;
+  const matchedDetail = spanDetailMatchesSelection(fetchedDetail, resource, resourceId) ? fetchedDetail : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail);
+  if (!resource || !resourceId) {
+    return { status: "idle", displayData, detail: null, error: void 0 };
+  }
+  if (fetchedError) {
+    return {
+      status: "error",
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  return { status: "loading", displayData, detail: null, error: void 0 };
+}
 function spanDetailMatchesSelection(detail, resource, resourceId) {
   if (!detail || typeof detail !== "object" || !resource || !resourceId) {
     return false;
@@ -2395,16 +2486,88 @@ function mergeSpanDetail(spanData, detail) {
   }
   return merged;
 }
-function isStep(data) {
-  return data !== null && typeof data === "object" && "stepId" in data;
+function deriveSpanSelection(selectedSpan) {
+  if (!selectedSpan)
+    return null;
+  const { resource, data } = selectedSpan;
+  if (resource === "step" && data && typeof data === "object" && "stepId" in data) {
+    const step = data;
+    return { resource: "step", resourceId: step.stepId, runId: step.runId };
+  }
+  if (resource === "run" && data && typeof data === "object" && "runId" in data) {
+    return { resource: "run", resourceId: data.runId };
+  }
+  if (resource === "hook" && data && typeof data === "object" && "hookId" in data) {
+    return { resource: "hook", resourceId: data.hookId };
+  }
+  if (resource === "sleep") {
+    if (!selectedSpan.spanId)
+      return null;
+    const waitData = data;
+    return {
+      resource: "sleep",
+      resourceId: selectedSpan.spanId,
+      runId: waitData == null ? void 0 : waitData.runId
+    };
+  }
+  return null;
 }
-function isWorkflowRun(data) {
-  return data !== null && typeof data === "object" && "runId" in data;
+function useSelectedSpanDetail(selectedSpan, fetchSpanDetail) {
+  const selection = reactExports.useMemo(() => deriveSpanSelection(selectedSpan), [selectedSpan]);
+  const resource = selection == null ? void 0 : selection.resource;
+  const resourceId = selection == null ? void 0 : selection.resourceId;
+  const runId = selection == null ? void 0 : selection.runId;
+  const selectionKey = resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+  const [fetched, setFetched] = reactExports.useState({ detail: null, error: null, errorKey: null });
+  const tokenRef = reactExports.useRef(0);
+  const selectionRef = reactExports.useRef(selection);
+  selectionRef.current = selection;
+  reactExports.useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection).then((detail) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({ detail, error: null, errorKey: null });
+    }).catch((err) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({
+        detail: null,
+        error: err instanceof Error ? err : new Error(String(err)),
+        errorKey: selectionKey
+      });
+    });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+  const view = reactExports.useMemo(() => deriveSpanDetailView({
+    resource,
+    resourceId,
+    inlineData: selectedSpan == null ? void 0 : selectedSpan.data,
+    fetchedDetail: fetched.detail,
+    fetchedError: scopedError
+  }), [resource, resourceId, selectedSpan == null ? void 0 : selectedSpan.data, fetched.detail, scopedError]);
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail,
+    error: view.error
+  };
 }
 function isHook(data) {
   return data !== null && typeof data === "object" && "hookId" in data;
 }
-function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan }) {
+function EntityDetailPanel({ run, onStreamClick, onRunClick, fetchSpanDetail, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan, showSeparateEventOccurrenceTimestamps = false }) {
   const toast2 = useToast();
   const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
@@ -2415,41 +2578,8 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
   const data = selectedSpan == null ? void 0 : selectedSpan.data;
   const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
   const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
-  const { resource, resourceId, runId } = reactExports.useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: void 0, resourceId: void 0, runId: void 0 };
-    }
-    const res = selectedSpan.resource;
-    if (res === "step" && isStep(data)) {
-      return { resource: "step", resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === "run" && isWorkflowRun(data)) {
-      return { resource: "run", resourceId: data.runId, runId: void 0 };
-    }
-    if (res === "hook" && isHook(data)) {
-      return { resource: "hook", resourceId: data.hookId, runId: void 0 };
-    }
-    if (res === "sleep") {
-      const waitData = data;
-      return {
-        resource: "sleep",
-        resourceId: selectedSpan.spanId,
-        runId: waitData == null ? void 0 : waitData.runId
-      };
-    }
-    return { resource: void 0, resourceId: void 0, runId: void 0 };
-  }, [selectedSpan, data]);
-  const onSpanSelectRef = reactExports.useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-  reactExports.useEffect(() => {
-    if (resource && resourceId && ["run", "step", "hook", "sleep"].includes(resource)) {
-      onSpanSelectRef.current({
-        resource,
-        resourceId,
-        runId
-      });
-    }
-  }, [resource, resourceId, runId]);
+  const { status, resource, resourceId, displayData, detail: matchedSpanDetailData, error } = useSelectedSpanDetail(selectedSpan, fetchSpanDetail);
+  const loading = status === "loading";
   const canWakeUp = reactExports.useMemo(() => {
     if (resource !== "sleep" || !rawEvents)
       return false;
@@ -2482,9 +2612,6 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     run.status,
     resolvedHookIds
   ]);
-  const error = spanDetailError ?? void 0;
-  const loading = spanDetailLoading ?? false;
-  const matchedSpanDetailData = reactExports.useMemo(() => spanDetailMatchesSelection(spanDetailData, resource, resourceId) ? spanDetailData : null, [spanDetailData, resource, resourceId]);
   const hookToken = reactExports.useMemo(() => {
     if (resource !== "hook" || !resourceId)
       return void 0;
@@ -2569,7 +2696,6 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
       setResolvingHook(false);
     }
   }, [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]);
-  const displayData = reactExports.useMemo(() => mergeSpanDetail(data, matchedSpanDetailData), [data, matchedSpanDetailData]);
   const moduleSpecifier = reactExports.useMemo(() => {
     const displayRecord = displayData;
     const displayStepName = displayRecord.stepName;
@@ -2598,43 +2724,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
   }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
     background: "var(--ds-gray-1000)",
     color: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
-}
-const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 text-center font-sans", {
-  variants: {
-    variant: {
-      subtle: "bg-background-100/20",
-      outline: "border border-gray-alpha-400 bg-background-100 font-medium text-gray-900"
-    },
-    size: {
-      default: "h-5 min-w-5 text-xs leading-none",
-      compact: "h-4 min-h-4 min-w-4 text-[11px] leading-none",
-      search: "h-5 min-h-5 min-w-5 text-[13px] leading-[1.7em]"
-    }
-  },
-  defaultVariants: {
-    variant: "subtle",
-    size: "default"
-  }
-});
-function Kbd({ children, className, variant, size, ...props }) {
-  return jsxRuntimeExports.jsx("kbd", { className: cn(kbdVariants({ variant, size, className })), ...props, children });
-}
-const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
-const ROWS = [
-  { id: "r0", name: 62, off: 0, bar: 72 },
-  { id: "r1", name: 78, off: 6, bar: 48 },
-  { id: "r2", name: 50, off: 10, bar: 55 },
-  { id: "r3", name: 84, off: 18, bar: 30 },
-  { id: "r4", name: 45, off: 18, bar: 42 },
-  { id: "r5", name: 66, off: 34, bar: 38 },
-  { id: "r6", name: 55, off: 41, bar: 25 },
-  { id: "r7", name: 40, off: 50, bar: 30 }
-];
-const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
-const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
-function TraceViewerSkeleton() {
-  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id) => jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-9" }, id)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
+  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
 function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
   const [entry, setEntry] = reactExports.useState();
@@ -2671,6 +2761,26 @@ function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMa
   }, [entry == null ? void 0 : entry.isIntersecting, hasMore, isLoadingMore]);
   return sentinelRef;
 }
+const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 text-center font-sans", {
+  variants: {
+    variant: {
+      subtle: "bg-background-100/20",
+      outline: "border border-gray-alpha-400 bg-background-100 font-medium text-gray-900"
+    },
+    size: {
+      default: "h-5 min-w-5 text-xs leading-none",
+      compact: "h-4 min-h-4 min-w-4 text-[11px] leading-none",
+      search: "h-5 min-h-5 min-w-5 text-[13px] leading-[1.7em]"
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "default"
+  }
+});
+function Kbd({ children, className, variant, size, ...props }) {
+  return jsxRuntimeExports.jsx("kbd", { className: cn(kbdVariants({ variant, size, className })), ...props, children });
+}
 const WorkflowIcon = () => {
   return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", style: { color: "currentColor" }, viewBox: "0 0 16 16", width: "16", children: jsxRuntimeExports.jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) });
 };
@@ -2717,57 +2827,6 @@ const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
     paddingBottom: (spans.length - end) * ROW_HEIGHT_PX
   }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId)) });
 };
-const hint = "_hint_1dmsq_3";
-const styles = {
-  hint
-};
-const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
-const DISMISSAL_LIMIT = 3;
-const HINT_ROTATION_MS = 8e3;
-function getAltKeyLabel() {
-  if (typeof navigator === "undefined")
-    return "Alt";
-  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
-}
-function readDismissals() {
-  try {
-    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
-    return Number.isNaN(dismissals) ? 0 : dismissals;
-  } catch {
-    return 0;
-  }
-}
-function AltHint() {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
-}
-function NavHint() {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
-}
-function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
-  const [visible, setVisible] = reactExports.useState(false);
-  const [index, setIndex] = reactExports.useState(0);
-  reactExports.useEffect(() => {
-    setVisible(readDismissals() < DISMISSAL_LIMIT);
-  }, []);
-  reactExports.useEffect(() => {
-    if (reducedMotion)
-      return;
-    const id = setInterval(() => {
-      setIndex((i) => i === 0 ? 1 : 0);
-    }, HINT_ROTATION_MS);
-    return () => clearInterval(id);
-  }, [reducedMotion]);
-  if (!visible || !hasMultipleSpans)
-    return null;
-  const dismiss = () => {
-    try {
-      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
-    } catch {
-    }
-    setVisible(false);
-  };
-  return jsxRuntimeExports.jsxs("div", { className: "group absolute bottom-3 left-1/2 z-10 hidden h-8 max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 text-xs leading-none text-gray-900 md:inline-flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles.hint}`, children: index === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })] });
-}
 const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
@@ -2865,6 +2924,57 @@ function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX,
   }
   return jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn("grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto", isDragging && "select-none", className), style: { gridTemplateColumns: colTemplate, height: "100%" }, children: [start, gutter, end] });
 }
+const hint = "_hint_1dmsq_3";
+const styles = {
+  hint
+};
+const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
+const DISMISSAL_LIMIT = 3;
+const HINT_ROTATION_MS = 8e3;
+function getAltKeyLabel() {
+  if (typeof navigator === "undefined")
+    return "Alt";
+  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
+}
+function readDismissals() {
+  try {
+    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
+    return Number.isNaN(dismissals) ? 0 : dismissals;
+  } catch {
+    return 0;
+  }
+}
+function AltHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
+}
+function NavHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
+}
+function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
+  const [visible, setVisible] = reactExports.useState(false);
+  const [index, setIndex] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    setVisible(readDismissals() < DISMISSAL_LIMIT);
+  }, []);
+  reactExports.useEffect(() => {
+    if (reducedMotion)
+      return;
+    const id = setInterval(() => {
+      setIndex((i) => i === 0 ? 1 : 0);
+    }, HINT_ROTATION_MS);
+    return () => clearInterval(id);
+  }, [reducedMotion]);
+  if (!visible || !hasMultipleSpans)
+    return null;
+  const dismiss = () => {
+    try {
+      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
+    } catch {
+    }
+    setVisible(false);
+  };
+  return jsxRuntimeExports.jsxs("div", { className: "group absolute bottom-3 left-1/2 z-10 hidden h-8 max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 text-xs leading-none text-gray-900 md:inline-flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles.hint}`, children: index === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })] });
+}
 const MIN_VIEWPORT_MS = 1e-3;
 const ZOOM_DEBOUNCE_MS = 150;
 function useAnimatedViewport(initial) {
@@ -3275,7 +3385,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       e.stopPropagation();
       setSearchQuery("");
     }
-  }, 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 && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.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 }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion })] });
+  }, 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 && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, fetchSpanDetail: sidebar.fetchSpanDetail, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan, showSeparateEventOccurrenceTimestamps: sidebar.showSeparateEventOccurrenceTimestamps }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion })] });
 }
 const NewTraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace = reactExports.useMemo(() => {
@@ -3317,130 +3427,48 @@ async function fetchResourceWithCorrelationId(env, resource, resourceId, options
   }
   return { data: resourceData, correlationId };
 }
-function useWorkflowResourceData(env, resource, resourceId, options = {}) {
-  const { refreshInterval = 0, runId, enabled = true, encryptionKey } = options;
-  const [data, setData] = reactExports.useState(
-    null
-  );
-  const [loading, setLoading] = reactExports.useState(enabled);
-  const [error, setError] = reactExports.useState(null);
-  const hydrate = reactExports.useCallback(
-    async (resource2) => encryptionKey ? hydrateResourceIOWithKey(resource2, encryptionKey) : hydrateResourceIO(resource2),
-    [encryptionKey]
-  );
-  const prevSelectionRef = reactExports.useRef("");
-  const fetchData = reactExports.useCallback(async () => {
-    if (!enabled) {
-      setLoading(false);
-      return;
-    }
-    const selectionKey = `${resource}:${resourceId}`;
-    if (selectionKey !== prevSelectionRef.current) {
-      setData(null);
-      prevSelectionRef.current = selectionKey;
-    }
-    setError(null);
-    setLoading(true);
-    if (resource === "hook") {
-      try {
-        const { error: error2, result } = await unwrapServerActionResult(
-          fetchHook(env, resourceId, "all")
-        );
-        if (error2) {
-          setError(error2);
-          return;
-        }
-        try {
-          setData(await hydrate(result));
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
-    }
-    if (resource === "sleep") {
-      try {
-        if (!runId) {
-          setError(new Error("runId is required for loading sleep details"));
-          return;
-        }
-        const { error: error2, result } = await unwrapServerActionResult(
-          fetchEvents(env, runId, {
-            sortOrder: "asc",
-            limit: 1e3,
-            withData: true
-          })
-        );
-        if (error2) {
-          setError(error2);
-          return;
-        }
-        try {
-          const allEvents = result.data.map(
-            hydrateResourceIO
-          );
-          const waitEvents = await Promise.all(
-            allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
-          );
-          const data2 = waitEventsToWaitEntity(waitEvents);
-          if (data2 === null) {
-            setError(
-              new Error(
-                `Failed to load ${resource} details: missing required event data`
-              )
-            );
-            return;
-          }
-          setData(data2);
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
+async function fetchSpanDetailResource(env, selection, options = {}) {
+  const { resource, resourceId, runId } = selection;
+  const { encryptionKey } = options;
+  const hydrate = async (value) => encryptionKey ? hydrateResourceIOWithKey(value, encryptionKey) : hydrateResourceIO(value);
+  if (resource === "hook") {
+    const result = await unwrapOrThrow(fetchHook(env, resourceId, "all"));
+    return hydrate(result);
+  }
+  if (resource === "sleep") {
+    if (!runId) {
+      throw new WorkflowWebAPIError(
+        "runId is required for loading sleep details",
+        { layer: "client" }
+      );
     }
-    try {
-      const { data: resourceData } = await fetchResourceWithCorrelationId(
-        env,
-        resource,
-        resourceId,
-        { runId }
+    const result = await unwrapOrThrow(
+      fetchEvents(env, runId, { sortOrder: "asc", limit: 1e3, withData: true })
+    );
+    const allEvents = result.data.map(
+      hydrateResourceIO
+    );
+    const waitEvents = await Promise.all(
+      allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
+    );
+    const data2 = waitEventsToWaitEntity(waitEvents);
+    if (data2 === null) {
+      throw new WorkflowWebAPIError(
+        `Failed to load ${resource} details: missing required event data`,
+        { layer: "client" }
       );
-      setData(await hydrate(resourceData));
-    } catch (error2) {
-      if (error2 instanceof Error) {
-        setError(error2);
-      } else {
-        setError(new Error(String(error2)));
-      }
-      return;
-    } finally {
-      setLoading(false);
     }
-  }, [env, resource, resourceId, runId, enabled, hydrate]);
-  reactExports.useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  reactExports.useEffect(() => {
-    if (!refreshInterval || refreshInterval <= 0) {
-      return;
+    return data2;
+  }
+  const { data } = await fetchResourceWithCorrelationId(
+    env,
+    resource,
+    resourceId,
+    {
+      runId
     }
-    const interval = setInterval(fetchData, refreshInterval);
-    return () => clearInterval(interval);
-  }, [refreshInterval, fetchData]);
-  return {
-    data,
-    loading,
-    error,
-    refresh: fetchData
-  };
+  );
+  return hydrate(data);
 }
 function mergeById(prev, next, idKey) {
   const combined = [...prev, ...next];
@@ -5445,30 +5473,15 @@ function RunDetailView({
     encryptionKey: encryptionKey ?? void 0,
     enabled: activeTab === "events"
   });
-  const [spanSelection, setSpanSelection] = reactExports.useState(
-    null
-  );
-  const {
-    data: spanDetailData,
-    loading: spanDetailLoading,
-    error: spanDetailError,
-    refresh: refreshSpanDetail
-  } = useWorkflowResourceData(
-    env,
-    (spanSelection == null ? void 0 : spanSelection.resource) ?? "run",
-    (spanSelection == null ? void 0 : spanSelection.resourceId) ?? "",
-    {
-      runId: spanSelection == null ? void 0 : spanSelection.runId,
-      enabled: Boolean(
-        (spanSelection == null ? void 0 : spanSelection.resource) && (spanSelection == null ? void 0 : spanSelection.resourceId) && spanSelection.resource !== "hook"
-      ),
+  const fetchSpanDetail = reactExports.useCallback(
+    (selection) => fetchSpanDetailResource(env, selection, {
       encryptionKey: encryptionKey ?? void 0
-    }
+    }),
+    [env, encryptionKey]
   );
   const [isDecrypting, setIsDecrypting] = reactExports.useState(false);
   const handleDecrypt = reactExports.useCallback(async () => {
     if (encryptionKey) {
-      refreshSpanDetail();
       return;
     }
     setIsDecrypting(true);
@@ -5486,18 +5499,12 @@ function RunDetailView({
     } finally {
       setIsDecrypting(false);
     }
-  }, [encryptionKey, env, runId, refreshSpanDetail]);
-  const handleSpanSelect = reactExports.useCallback((info) => {
-    setSpanSelection(info);
-  }, []);
+  }, [encryptionKey, env, runId]);
   const sidebarData = reactExports.useMemo(
     () => ({
       run,
       events: allEvents ?? [],
-      spanDetailData: spanDetailData ?? null,
-      spanDetailError,
-      spanDetailLoading,
-      onSpanSelect: handleSpanSelect,
+      fetchSpanDetail,
       onStreamClick: handleStreamClick,
       onRunClick: handleRunRefClick,
       onWakeUpSleep: handleWakeUpSleep,
@@ -5511,10 +5518,7 @@ function RunDetailView({
     [
       run,
       allEvents,
-      spanDetailData,
-      spanDetailError,
-      spanDetailLoading,
-      handleSpanSelect,
+      fetchSpanDetail,
       handleStreamClick,
       handleRunRefClick,
       handleWakeUpSleep,