@workflow/web 5.0.0-beta.38 → 5.0.0-beta.39

package/build/client/assets/{run-detail-Dr7nmBuO.js → run-detail-DtCCxxv2.js}

@@ -1,7 +1,7 @@
 import { r as reactExports, j as jsxRuntimeExports, o as reactDomExports, D as ReactDOM, d as useNavigate, e as useSearchParams, c as Link, w as withComponentProps, G as useParams } from "./index-PFjW8YjQ.js";
-import { C as CircleAlert, O as parseStepName, B as parseWorkflowName, Q as ErrorCard, U as format, Z as Zap, S as Send, R as ResolveHookModal, q as ChevronUp, X, N as ErrorBoundary, V as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, Y as useEscapeKeydown, t as composeEventHandlers, _ as useCallbackRef, $ as useLayoutEffect2, s as useControllableState, a0 as useId, a1 as createContext2, v as Presence, x as createContextScope, n as hideOthers, o as ReactRemoveScroll, a2 as useFocusGuards, a3 as LAYOUT, a4 as wakeUpRun, l as resumeHook, A as Alert, c as AlertTitle, g as getErrorTitle, d as AlertDescription, e as getErrorMessage, a as Skeleton$1, a5 as RunActionsButtons, F as StatusBadge, h as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a6 as recreateRun } from "./workflow-graph-viewer-tTf4FHzV.js";
-import { c as createLucideIcon, X as cn, Y as CopyableDataBlock, Z as CollapsibleRoot, $ as CollapsibleTrigger, a0 as CollapsibleContent, a1 as CopyButton, N as cva, a2 as RESERVED_ATTRIBUTE_KEY_PREFIX, a3 as Spinner, a4 as ContextCardProvider, h as useToast, a5 as Skeleton, a6 as DecryptClickContext, a7 as Yr, a8 as isEncryptedMarker, m as ChevronRight, a9 as TimestampTooltip, aa as formatDuration, C as Check, l as Copy, ab as DataInspector, ac as isHookLifecycleEventType, ad as isTerminalStepEventType, ae as isWaitEventType, af as isStepEventType, ag as _r, ah as RunClickContext, ai as StreamClickContext, aj as Collapsible, ak as isExpiredMarker, al as isDoStreamStep, am as extractConversation, an as EncryptedDataBlock, ao as getEventDataRefFields, ap as hasEncryptedFields, aq as useSidebarDataOptional, ar as isTerminalWorkflowRunStatus, as as clsx, at as useActiveSpan, au as useSidebarData, av as Tooltip, aw as TooltipTrigger, ax as IconButton, ay as TooltipContent, J as ChevronDown, az as useRowWindow, aA as isSpanDimmedBySearch, aB as ROW_HEIGHT_PX, aC as getSpanDurationMs, aD as isSpanErrored, aE as formatDurationPrecise, aF as TooltipProvider, aG as ActiveSpanProvider, aH as useReducedMotion, aI as searchSpans, aJ as computeRootBounds, aK as computeTimeMarkers, aL as clampViewportToRoot, aM as getHighResInMs, aN as scrollRowIntoView, aO as TIMELINE_PADDING_PX, aP as Minimap, aQ as Timeline, aR as TimelineHeader, aS as wheelZoomScaleFactor, aT as wheelDeltaToPixels, aU as SidebarDataProvider, aV as fetchHook, n as fetchEvents, aW as hydrateResourceIOAsync, M as fetchRun, aX as fetchStep, aY as hydrateResourceIO, aZ as fetchStreams, a_ as apiBase, a$ as Slot, L as useComposedRefs, b0 as Slottable, e as cn$1, b1 as buttonVariants, b2 as fetchEvent, b3 as fetchEventsByCorrelationId, b4 as isEncryptedData, b5 as hydrateData, b6 as decrypt, b7 as deriveRunPayloadKeys, b8 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, b9 as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, ba as getEncryptionKeyForRun, t as toast, bb as StreamViewerSkeleton, bc as Lock, bd as StreamViewer } from "./mermaid-3ZIDBTTL-xYKZZytQ.js";
-import { A as ArrowUpRight } from "./arrow-up-right-BRTGGI7c.js";
+import { C as CircleAlert, O as parseStepName, B as parseWorkflowName, Q as ErrorCard, U as format, Z as Zap, S as Send, R as ResolveHookModal, q as ChevronUp, X, N as ErrorBoundary, V as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, Y as useEscapeKeydown, t as composeEventHandlers, _ as useCallbackRef, $ as useLayoutEffect2, s as useControllableState, a0 as useId, a1 as createContext2, v as Presence, x as createContextScope, n as hideOthers, o as ReactRemoveScroll, a2 as useFocusGuards, a3 as LAYOUT, a4 as wakeUpRun, l as resumeHook, A as Alert, c as AlertTitle, g as getErrorTitle, d as AlertDescription, e as getErrorMessage, a as Skeleton$1, a5 as RunActionsButtons, F as StatusBadge, h as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a6 as recreateRun } from "./workflow-graph-viewer-B01nH75E.js";
+import { c as createLucideIcon, X as cn, Y as CopyableDataBlock, Z as CollapsibleRoot, $ as CollapsibleTrigger, a0 as CollapsibleContent, a1 as CopyButton, N as cva, a2 as RESERVED_ATTRIBUTE_KEY_PREFIX, a3 as Spinner, a4 as ContextCardProvider, h as useToast, a5 as Skeleton, a6 as DecryptClickContext, a7 as Yr, a8 as isEncryptedMarker, m as ChevronRight, a9 as TimestampTooltip, aa as formatDuration, C as Check, l as Copy, ab as DataInspector, ac as _r, ad as isHookLifecycleEventType, ae as isTerminalStepEventType, af as isWaitEventType, ag as isStepEventType, ah as RunClickContext, ai as StreamClickContext, aj as Collapsible, ak as isExpiredMarker, al as isDoStreamStep, am as extractConversation, an as EncryptedDataBlock, ao as getEventDataRefFields, ap as hasEncryptedFields, aq as useSidebarDataOptional, ar as isTerminalWorkflowRunStatus, as as clsx, at as useActiveSpan, au as useSidebarData, av as Tooltip, aw as TooltipTrigger, ax as IconButton, ay as TooltipContent, J as ChevronDown, az as useRowWindow, aA as isSpanDimmedBySearch, aB as ROW_HEIGHT_PX, aC as getSpanDurationMs, aD as isSpanErrored, aE as formatDurationPrecise, aF as TooltipProvider, aG as ActiveSpanProvider, aH as useReducedMotion, aI as searchSpans, aJ as computeRootBounds, aK as computeTimeMarkers, aL as clampViewportToRoot, aM as getHighResInMs, aN as scrollRowIntoView, aO as TIMELINE_PADDING_PX, aP as Minimap, aQ as Timeline, aR as TimelineHeader, aS as wheelZoomScaleFactor, aT as wheelDeltaToPixels, aU as SidebarDataProvider, aV as fetchHook, n as fetchEvents, aW as hydrateResourceIOAsync, M as fetchRun, aX as fetchStep, aY as hydrateResourceIO, aZ as fetchStreams, a_ as apiBase, a$ as Slot, L as useComposedRefs, b0 as Slottable, e as cn$1, b1 as buttonVariants, b2 as fetchEvent, b3 as fetchEventsByCorrelationId, b4 as isEncryptedData, b5 as hydrateData, b6 as decrypt, b7 as deriveRunPayloadKeys, b8 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, b9 as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, ba as getEncryptionKeyForRun, t as toast, bb as StreamViewerSkeleton, bc as Lock, bd as StreamViewer } from "./mermaid-3ZIDBTTL-D20ZkB54.js";
+import { A as ArrowUpRight } from "./arrow-up-right-Ccx_FPfU.js";
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -516,14 +516,14 @@ ${stack}` : body;
     color: "var(--ds-red-900)",
     borderBottom: "1px solid var(--ds-red-400)"
   }, children: [jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 shrink-0" }), jsxRuntimeExports.jsx("p", {
-    className: "text-xs font-semibold m-0 truncate",
+    className: "text-label-12 font-semibold m-0 truncate",
     // The full message or stack is in the body below; the header just
     // shows the first line, single-line, with overflow
     // ellipsised so a long title doesn't push the copy button or
     // wrap into the framed hint/docs lines.
     title: message,
     children: title
-  })] }), body && jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
+  })] }), body && jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-label-12-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
     color: "var(--ds-red-900)",
     background: "var(--ds-red-200)"
   }, children: body })] });
@@ -870,10 +870,10 @@ function PayloadBlock({ data, eventType }) {
   if (eventType === "run_cancelled") {
     const cancelReason = cleaned != null && typeof cleaned === "object" && typeof cleaned.cancelReason === "string" ? cleaned.cancelReason : null;
     if (cancelReason) {
-      return jsxRuntimeExports.jsxs("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-900)" }, children: "Reason: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", children: cancelReason })] });
+      return jsxRuntimeExports.jsxs("div", { className: "p-2 text-label-12", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-900)" }, children: "Reason: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", children: cancelReason })] });
     }
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
+  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-button-12 hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
 }
 const SORT_OPTIONS = [
   { value: "desc", label: "Newest" },
@@ -1006,7 +1006,7 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   return jsxRuntimeExports.jsxs("div", { "data-event-id": event.eventId, onMouseEnter: () => onHoverGroup(rowGroupKey), onMouseLeave: () => onHoverGroup(void 0), children: [jsxRuntimeExports.jsxs("div", { role: "button", tabIndex: 0, onClick: handleRowClick, onKeyDown: (e) => {
     if (e.key === "Enter" || e.key === " ")
       handleRowClick();
-  }, className: "w-full text-left flex items-center gap-0 text-[13px] hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
+  }, className: "w-full text-left flex items-center gap-0 text-label-13 hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
     border: "1px solid var(--ds-gray-400)"
   }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
     color: "var(--ds-gray-900)",
@@ -1034,11 +1034,11 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
     borderColor: "var(--ds-gray-alpha-200)",
     opacity: contentOpacity,
     transition: "opacity 150ms"
-  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-xs flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-label-12 flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-label-12", style: {
     borderColor: "var(--ds-red-400)",
     backgroundColor: "var(--ds-red-100)",
     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" })] })] })] });
+  }, 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-label-12", 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, showSeparateEventOccurrenceTimestamps = false }) {
   const toast2 = useToast();
@@ -1290,11 +1290,11 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
     width: "100%",
     opacity: onExactIdSearch ? 1 : 0.5,
     cursor: onExactIdSearch ? "text" : "not-allowed"
-  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0", style: {
+  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-label-13 font-medium h-10 border-b flex-shrink-0", style: {
     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" }), 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: () => {
+  }, 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-copy-14", 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;
     }
@@ -1302,7 +1302,7 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
   }, 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, 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: {
+  }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-label-12", style: {
     borderColor: "var(--ds-gray-alpha-200)",
     color: "var(--ds-gray-900)",
     backgroundColor: "var(--ds-background-100)"
@@ -1311,31 +1311,111 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
 function EventListView(props) {
   return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(EventListViewInner, { ...props }) });
 }
-const GUTTER_PX = 1;
-const MIN_PX = 50;
-const DEFAULT_START_PX = 340;
-function paneColTemplate(startPx) {
-  return `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+function ConversationView({ messages }) {
+  if (messages.length === 0) {
+    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
+  }
+  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
 }
-const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
-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.jsx("div", { className: "relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 top-[6px]", children: ROWS.map((row, index) => jsxRuntimeExports.jsx(Skeleton, { className: "absolute h-[3px] rounded-full", style: {
-    left: `${row.off}%`,
-    width: `${row.bar}%`,
-    top: index * 3.5
-  } }, row.id)) }) }), 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 MessageBubble({ message }) {
+  const role = message.role;
+  const parts = parseContent(message.content);
+  const style = getRoleStyle(role);
+  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
+    backgroundColor: style.bg,
+    borderColor: style.border
+  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
+    borderColor: style.border,
+    color: style.label
+  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
+}
+function ContentPart({ part, role }) {
+  if (part.type === "text") {
+    if (!part.text)
+      return null;
+    if (role === "assistant") {
+      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
+    }
+    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
+  }
+  if (part.type === "tool-call") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-purple-100)",
+      borderColor: "var(--ds-purple-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
+  }
+  if (part.type === "tool-result") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-green-100)",
+      borderColor: "var(--ds-green-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
+  }
+  return null;
+}
+function getRoleStyle(role) {
+  switch (role) {
+    case "user":
+      return {
+        bg: "var(--ds-blue-100)",
+        border: "var(--ds-blue-300)",
+        label: "var(--ds-blue-700)"
+      };
+    case "assistant":
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+    case "system":
+      return {
+        bg: "var(--ds-amber-100)",
+        border: "var(--ds-amber-300)",
+        label: "var(--ds-amber-700)"
+      };
+    case "tool":
+      return {
+        bg: "var(--ds-green-50)",
+        border: "var(--ds-green-300)",
+        label: "var(--ds-green-700)"
+      };
+    default:
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+  }
+}
+function parseContent(content) {
+  if (typeof content === "string") {
+    return [{ type: "text", text: content }];
+  }
+  if (Array.isArray(content)) {
+    return content.map((part) => {
+      if (typeof part === "string") {
+        return { type: "text", text: part };
+      }
+      if ((part == null ? void 0 : part.type) === "text") {
+        return { type: "text", text: String(part.text ?? "") };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-call") {
+        return {
+          type: "tool-call",
+          toolName: part.toolName,
+          input: part.input
+        };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-result") {
+        return {
+          type: "tool-result",
+          toolName: part.toolName,
+          output: part.output
+        };
+      }
+      return { type: "text", text: "" };
+    });
+  }
+  return [];
 }
 function shouldShowVerticalLine(eventType) {
   if (isHookLifecycleEventType(eventType)) {
@@ -1750,111 +1830,86 @@ function buildTrace(run, events, now) {
     knownDurationMs: Math.max(0, knownDurationMs)
   };
 }
-function ConversationView({ messages }) {
-  if (messages.length === 0) {
-    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
-  }
-  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
+const GUTTER_PX = 1;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+function paneColTemplate(startPx) {
+  return `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
 }
-function MessageBubble({ message }) {
-  const role = message.role;
-  const parts = parseContent(message.content);
-  const style = getRoleStyle(role);
-  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
-    backgroundColor: style.bg,
-    borderColor: style.border
-  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
-    borderColor: style.border,
-    color: style.label
-  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
+const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
+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.jsx("div", { className: "relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 top-[6px]", children: ROWS.map((row, index) => jsxRuntimeExports.jsx(Skeleton, { className: "absolute h-[3px] rounded-full", style: {
+    left: `${row.off}%`,
+    width: `${row.bar}%`,
+    top: index * 3.5
+  } }, row.id)) }) }), 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 ContentPart({ part, role }) {
-  if (part.type === "text") {
-    if (!part.text)
-      return null;
-    if (role === "assistant") {
-      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
-    }
-    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
-  }
-  if (part.type === "tool-call") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-purple-100)",
-      borderColor: "var(--ds-purple-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
-  }
-  if (part.type === "tool-result") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-green-100)",
-      borderColor: "var(--ds-green-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
-  }
-  return null;
+function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
+  const [entry, setEntry] = reactExports.useState();
+  const frozen = (entry == null ? void 0 : entry.isIntersecting) && freezeOnceVisible;
+  reactExports.useEffect(() => {
+    const node = elementRef == null ? void 0 : elementRef.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || frozen || !node)
+      return;
+    const updateEntry = ([entry2]) => {
+      setEntry(entry2);
+    };
+    const observer = new IntersectionObserver(updateEntry, {
+      threshold,
+      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
+      rootMargin
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
+  return entry;
 }
-function getRoleStyle(role) {
-  switch (role) {
-    case "user":
-      return {
-        bg: "var(--ds-blue-100)",
-        border: "var(--ds-blue-300)",
-        label: "var(--ds-blue-700)"
-      };
-    case "assistant":
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
-    case "system":
-      return {
-        bg: "var(--ds-amber-100)",
-        border: "var(--ds-amber-300)",
-        label: "var(--ds-amber-700)"
-      };
-    case "tool":
-      return {
-        bg: "var(--ds-green-50)",
-        border: "var(--ds-green-300)",
-        label: "var(--ds-green-700)"
-      };
-    default:
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
-  }
+function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
+  const sentinelRef = reactExports.useRef(null);
+  const entry = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
+  const loadMoreRef = reactExports.useRef(loadMore);
+  reactExports.useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  reactExports.useEffect(() => {
+    if ((entry == null ? void 0 : entry.isIntersecting) && hasMore && !isLoadingMore) {
+      loadMoreRef.current();
+    }
+  }, [entry == null ? void 0 : entry.isIntersecting, hasMore, isLoadingMore]);
+  return sentinelRef;
 }
-function parseContent(content) {
-  if (typeof content === "string") {
-    return [{ type: "text", text: content }];
-  }
-  if (Array.isArray(content)) {
-    return content.map((part) => {
-      if (typeof part === "string") {
-        return { type: "text", text: part };
-      }
-      if ((part == null ? void 0 : part.type) === "text") {
-        return { type: "text", text: String(part.text ?? "") };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-call") {
-        return {
-          type: "tool-call",
-          toolName: part.toolName,
-          input: part.input
-        };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-result") {
-        return {
-          type: "tool-result",
-          toolName: part.toolName,
-          output: part.output
-        };
-      }
-      return { type: "text", text: "" };
-    });
+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-label-12 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-label-13 leading-[1.7em]"
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "default"
   }
-  return [];
+});
+function Kbd({ children, className, variant, size, ...props }) {
+  return jsxRuntimeExports.jsx("kbd", { className: cn(kbdVariants({ variant, size, className })), ...props, children });
 }
 function TabButton({ active, onClick, children }) {
   return jsxRuntimeExports.jsx("button", { type: "button", role: "tab", "aria-selected": active, tabIndex: active ? 0 : -1, onClick, className: "px-3 py-1.5 text-[11px] font-medium transition-colors -mb-px", style: {
@@ -1901,7 +1956,7 @@ function EncryptedFieldBlock() {
   return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
 }
 function ExpiredFieldBlock() {
-  return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
+  return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)",
     color: "var(--ds-gray-700)"
@@ -1932,12 +1987,16 @@ const attributeOrder = [
   "runId",
   "attempt",
   "token",
+  "isWebhook",
+  "isSystem",
   "receivedCount",
   "lastReceivedAt",
   "disposedAt",
   "correlationId",
   "eventType",
   "deploymentId",
+  "vercelId",
+  "computeInstanceId",
   "specVersion",
   "workflowCoreVersion",
   "ownerId",
@@ -1951,6 +2010,7 @@ const attributeOrder = [
   "completedAt",
   "expiredAt",
   "retryAfter",
+  "errorCode",
   "error",
   "metadata",
   "eventData",
@@ -1959,11 +2019,11 @@ const attributeOrder = [
   "attributes",
   "resumeAt"
 ];
-const sortByAttributeOrder = (a, b) => {
-  const aIndex = attributeOrder.indexOf(a) || 0;
-  const bIndex = attributeOrder.indexOf(b) || 0;
-  return aIndex - bIndex;
+const attributeOrderIndex = (attribute) => {
+  const index = attributeOrder.indexOf(attribute);
+  return index === -1 ? attributeOrder.length : index;
 };
+const sortByAttributeOrder = (a, b) => attributeOrderIndex(a) - attributeOrderIndex(b);
 const attributeDisplayNames = {
   moduleSpecifier: "Module",
   workflowName: "Workflow Name",
@@ -1978,6 +2038,8 @@ const attributeDisplayNames = {
   errorCode: "Error Code",
   correlationId: "Correlation ID",
   deploymentId: "Deployment ID",
+  vercelId: "Request ID",
+  computeInstanceId: "Compute Instance ID",
   specVersion: "Spec Version",
   workflowCoreVersion: "@workflow/core version",
   occurredAt: "Occurred",
@@ -2034,6 +2096,7 @@ const timestampWithTooltipOrNull = (value) => {
     return null;
   return jsxRuntimeExports.jsx(TimestampTooltip, { date, children: jsxRuntimeExports.jsx("span", { children: formatLocalMillisecondTime(date) }) });
 };
+const opaqueIdOrNull = (value) => hasDisplayContent(value) ? String(value) : null;
 const attributeToDisplayFn = {
   // Names that need pretty-printing
   workflowName: (_value) => null,
@@ -2056,11 +2119,15 @@ const attributeToDisplayFn = {
   disposedAt: localMillisecondTimeOrNull,
   // Internal resume plumbing — not surfaced in the UI
   resumeContext: (_value) => null,
+  resumeId: (_value) => null,
+  resumeCapabilities: (_value) => null,
   // Event details
   eventType: (value) => String(value),
   correlationId: (value) => String(value),
   // Project details
   deploymentId: (value) => String(value),
+  vercelId: opaqueIdOrNull,
+  computeInstanceId: opaqueIdOrNull,
   specVersion: (value) => String(value),
   workflowCoreVersion: (value) => String(value),
   // Tenancy (we don't show these)
@@ -2183,7 +2250,7 @@ const selfHeaderedAttributes = /* @__PURE__ */ new Set([
   "attributes",
   "eventData"
 ]);
-const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-copy-12 rounded-md border p-4 my-2", style: {
+const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-label-12 rounded-md border p-4 my-2", style: {
   borderColor: "var(--ds-gray-300)",
   backgroundColor: "var(--ds-gray-100)",
   color: "var(--ds-gray-700)"
@@ -2193,6 +2260,8 @@ const copyableBasicAttributes = /* @__PURE__ */ new Set([
   "hookId",
   "eventId",
   "deploymentId",
+  "vercelId",
+  "computeInstanceId",
   "moduleSpecifier",
   "token"
 ]);
@@ -2232,7 +2301,7 @@ const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }
   if (selfHeaderedAttributes.has(attribute)) {
     return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: displayValue });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
+  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-label-12", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
 };
 const AttributePanel = ({ data, moduleSpecifier, moduleSourceUrl, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
   const displayData = reactExports.useMemo(() => {
@@ -2391,7 +2460,7 @@ function hasOnlyExpiredFields(data, eventType) {
 }
 function EventDataBlock({ eventType, data }) {
   if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
-    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
+    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12", style: {
       borderColor: "var(--ds-gray-300)",
       backgroundColor: "var(--ds-gray-100)",
       color: "var(--ds-gray-700)"
@@ -2734,69 +2803,14 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, fetchSpanDetail, on
   return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-[13px] font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, 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", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
+  }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-label-13 font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
     background: "var(--ds-amber-200)",
     color: "var(--ds-amber-900)"
-  }, 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: {
+  }, 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-button-14", "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, moduleSourceUrl, 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();
-  const frozen = (entry == null ? void 0 : entry.isIntersecting) && freezeOnceVisible;
-  reactExports.useEffect(() => {
-    const node = elementRef == null ? void 0 : elementRef.current;
-    const hasIOSupport = !!window.IntersectionObserver;
-    if (!hasIOSupport || frozen || !node)
-      return;
-    const updateEntry = ([entry2]) => {
-      setEntry(entry2);
-    };
-    const observer = new IntersectionObserver(updateEntry, {
-      threshold,
-      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
-      rootMargin
-    });
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
-  return entry;
-}
-function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
-  const sentinelRef = reactExports.useRef(null);
-  const entry = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
-  const loadMoreRef = reactExports.useRef(loadMore);
-  reactExports.useEffect(() => {
-    loadMoreRef.current = loadMore;
-  }, [loadMore]);
-  reactExports.useEffect(() => {
-    if ((entry == null ? void 0 : entry.isIntersecting) && hasMore && !isLoadingMore) {
-      loadMoreRef.current();
-    }
-  }, [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 PANEL_MIN_WIDTH = 280;
 const PANEL_HARD_MAX_WIDTH = 1300;
 const PANEL_DEFAULT_WIDTH = 360;
@@ -3174,7 +3188,7 @@ function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
     }
     setVisible(false);
   };
-  return jsxRuntimeExports.jsxs("div", { className: "group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-xs leading-none text-gray-900 @min-[480px]: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" }) })] });
+  return jsxRuntimeExports.jsxs("div", { className: "group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-label-12 leading-none text-gray-900 @min-[480px]: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;
@@ -3230,10 +3244,10 @@ function useAnimatedViewport(initial) {
   reactExports.useEffect(() => cancel, [cancel]);
   return { viewport, setViewport, animateTo };
 }
-function NewTraceViewer$1({ trace, onLoadMore, hasMore, isLoadingMore }) {
-  return jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
+function TraceViewer$1({ trace, onLoadMore, hasMore, isLoadingMore }) {
+  return jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace.spans, children: jsxRuntimeExports.jsx(TraceViewerContent, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
 }
-function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
+function TraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   const { activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
   const reducedMotion = useReducedMotion();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
@@ -3470,9 +3484,9 @@ 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, id: "trace-timeline", className: "@container 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, hover, altHeld }) }), jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion }), jsxRuntimeExports.jsxs("div", { className: "pointer-events-auto 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, disabled: isAtMinZoom, "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, disabled: isAtMaxZoom, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] })] })] }), jsxRuntimeExports.jsx(TraceDetailPanel, { containerRef: paneRootRef, onNavigateToSpan: navigateToSpan, onClose: handleClearActiveSpan })] });
+  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-label-14 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-label-16 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-label-14 text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, id: "trace-timeline", className: "@container 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, hover, altHeld }) }), jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion }), jsxRuntimeExports.jsxs("div", { className: "pointer-events-auto 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, disabled: isAtMinZoom, "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, disabled: isAtMaxZoom, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] })] })] }), jsxRuntimeExports.jsx(TraceDetailPanel, { containerRef: paneRootRef, onNavigateToSpan: navigateToSpan, onClose: handleClearActiveSpan })] });
 }
-const NewTraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
+const TraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace = reactExports.useMemo(() => {
     if (!(run == null ? void 0 : run.runId)) {
       return void 0;
@@ -3482,7 +3496,7 @@ const NewTraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadi
   if (!trace || loading && events.length === 0) {
     return jsxRuntimeExports.jsx(TraceViewerSkeleton, {});
   }
-  return jsxRuntimeExports.jsx(SidebarDataProvider, { value: sidebarData, children: jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex", children: jsxRuntimeExports.jsx(NewTraceViewer$1, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
+  return jsxRuntimeExports.jsx(SidebarDataProvider, { value: sidebarData, children: jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex", children: jsxRuntimeExports.jsx(TraceViewer$1, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
 };
 async function fetchResourceWithCorrelationId(env, resource, resourceId, options = {}) {
   const resolveData = options.resolveData ?? "all";
@@ -5792,7 +5806,7 @@ function RunDetailView({
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              NewTraceViewer,
+              TraceViewer,
               {
                 run,
                 events: allEvents ?? [],