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

package/build/client/assets/{run-detail-B1PK-m7y.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 Check, a as Copy, d as CircleAlert, U as parseStepName, G as parseWorkflowName, V as ErrorCard, Y as format, Z as Zap, S as Send, R as ResolveHookModal, t as ChevronUp, X, Q as ErrorBoundary, _ as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, K as unwrapServerActionResult, $ as useEscapeKeydown, w as composeEventHandlers, a0 as useCallbackRef, a1 as useLayoutEffect2, v as useControllableState, a2 as useId, a3 as createContext2, x as Presence, z as createContextScope, p as hideOthers, q as ReactRemoveScroll, a4 as useFocusGuards, a5 as LAYOUT, a6 as wakeUpRun, n as resumeHook, A as Alert, e as AlertTitle, g as getErrorTitle, h as AlertDescription, i as getErrorMessage, b as Skeleton$1, a7 as RunActionsButtons, H as StatusBadge, j as CopyableText, c as RelativeTime, T as Tabs, M as TabsList, N as TabsTrigger, O as TabsContent, B as cancelRun, a8 as recreateRun } from "./workflow-graph-viewer-DOLwtzSv.js";
-import { c as createLucideIcon, W as cn, X as DataInspector, Y as DecryptClickContext, Z as Button, $ as Spinner, a0 as Lock, a1 as CollapsibleRoot, a2 as CollapsibleTrigger, a3 as CollapsibleContent, M as cva, a4 as RESERVED_ATTRIBUTE_KEY_PREFIX, a5 as ContextCardProvider, h as useToast, a6 as Skeleton, a7 as Yr, a8 as isEncryptedMarker, C as ChevronRight, a9 as TimestampTooltip, aa as formatDuration, ab as isHookLifecycleEventType, ac as isTerminalStepEventType, ad as isWaitEventType, ae as isStepEventType, af as _r, ag as RunClickContext, ah as StreamClickContext, ai as Collapsible, aj as isExpiredMarker, ak as isDoStreamStep, al as extractConversation, am as getEventDataRefFields, an as hasEncryptedFields, ao as useSidebarDataOptional, ap as isTerminalWorkflowRunStatus, aq as clsx, ar as useActiveSpan, as as useSidebarData, at as Tooltip, au as TooltipTrigger, av as IconButton, aw as TooltipContent, H as ChevronDown, ax as useRowWindow, ay as isSpanDimmedBySearch, az as ROW_HEIGHT_PX, aA as getSpanDurationMs, aB as isSpanErrored, aC as formatDurationPrecise, aD as TooltipProvider, aE as ActiveSpanProvider, aF as useReducedMotion, aG as searchSpans, aH as computeRootBounds, aI as computeTimeMarkers, aJ as clampViewportToRoot, aK as getHighResInMs, aL as scrollRowIntoView, aM as TIMELINE_PADDING_PX, aN as Minimap, aO as Timeline, aP as TimelineHeader, aQ as wheelZoomScaleFactor, aR as wheelDeltaToPixels, aS as SidebarDataProvider, aT as fetchHook, l as fetchEvents, aU as hydrateResourceIOAsync, J as fetchRun, aV as fetchStep, aW as hydrateResourceIO, aX as fetchStreams, aY as Slot, I as useComposedRefs, aZ as Slottable, e as cn$1, a_ as buttonVariants, a$ as fetchEvent, b0 as fetchEventsByCorrelationId, b1 as isEncryptedData, b2 as hydrateData, b3 as decrypt, b4 as deriveRunPayloadKeys, b5 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, b6 as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, b7 as getEncryptionKeyForRun, t as toast, L as LoaderCircle, b8 as StreamViewer } from "./mermaid-3ZIDBTTL-CMP9Tato.js";
-import { A as ArrowUpRight } from "./arrow-up-right-DDNPFYmg.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
  *
@@ -103,27 +103,6 @@ function looksLikeWorkflowIdSearchInput(query) {
   }
   return /\d/.test(trimmed);
 }
-function CopyButton({ copyText, ariaLabel, className }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-0 p-1 m-0", className), onClick: (e) => {
-    e.stopPropagation();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    void navigator.clipboard.writeText(copyText).then(() => {
-      setCopied(true);
-      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
-    });
-  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
-}
 const ELLIPSIS = "…";
 const MIN_START = 3;
 const MIN_END = 3;
@@ -404,29 +383,6 @@ function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
   }, [onCopyProp, isTruncated, prefixText, suffixText, value]);
   return jsxRuntimeExports.jsxs("span", { title: isTruncated ? value : void 0, ...props, ref, className: cn("relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap", className), onCopy: handleCopy, children: [isTruncated && jsxRuntimeExports.jsx("span", { className: "sr-only select-none", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": isTruncated || void 0, className: "col-start-1 row-start-1 min-w-0 overflow-hidden", ref: visibleRef, children: isTruncated ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { children: prefixText }), jsxRuntimeExports.jsx("span", { children: ELLIPSIS }), jsxRuntimeExports.jsx("span", { children: suffixText })] }) : displayText }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap", ref: measureRef })] });
 }
-const encryptedPlaceholderPreview = `{
-  "input": "[encrypted]",
-  "result": "[encrypted]"
-}`;
-function EncryptedDataBlock() {
-  const ctx = reactExports.useContext(DecryptClickContext);
-  return jsxRuntimeExports.jsxs("div", { className: "relative min-h-20 overflow-hidden rounded-md border border-gray-alpha-400 bg-background-100", children: [jsxRuntimeExports.jsx("pre", { "aria-hidden": "true", className: "pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]", children: encryptedPlaceholderPreview }), jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: ctx ? jsxRuntimeExports.jsxs(Button, { onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, size: "xs", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] }) : jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-gray-alpha-400 bg-gray-100 px-1.5 py-0.5 text-button-12 font-medium text-gray-700", children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), "Encrypted"] }) })] });
-}
-const serializeForClipboard = (value) => {
-  if (typeof value === "string")
-    return value;
-  if (typeof value === "number" || typeof value === "boolean" || value === null) {
-    return String(value);
-  }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-};
-function CopyableDataBlock({ data }) {
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border border-gray-alpha-400 p-3", children: [jsxRuntimeExports.jsx(CopyButton, { copyText: serializeForClipboard(data), ariaLabel: "Copy data", className: "absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md border border-gray-alpha-400 !bg-background-100 p-0 text-gray-900 transition-transform transition-colors duration-100 hover:bg-gray-200 active:scale-95 active:bg-gray-300" }), jsxRuntimeExports.jsx(DataInspector, { data })] });
-}
 function isReservedAttributeKey(key) {
   return key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
 }
@@ -560,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 })] });
@@ -914,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" },
@@ -1050,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)",
@@ -1078,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();
@@ -1334,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;
     }
@@ -1346,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)"
@@ -1355,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)) {
@@ -1794,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: {
@@ -1945,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)"
@@ -1976,12 +1987,16 @@ const attributeOrder = [
   "runId",
   "attempt",
   "token",
+  "isWebhook",
+  "isSystem",
   "receivedCount",
   "lastReceivedAt",
   "disposedAt",
   "correlationId",
   "eventType",
   "deploymentId",
+  "vercelId",
+  "computeInstanceId",
   "specVersion",
   "workflowCoreVersion",
   "ownerId",
@@ -1995,6 +2010,7 @@ const attributeOrder = [
   "completedAt",
   "expiredAt",
   "retryAfter",
+  "errorCode",
   "error",
   "metadata",
   "eventData",
@@ -2003,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",
@@ -2022,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",
@@ -2078,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,
@@ -2100,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)
@@ -2227,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)"
@@ -2237,6 +2260,8 @@ const copyableBasicAttributes = /* @__PURE__ */ new Set([
   "hookId",
   "eventId",
   "deploymentId",
+  "vercelId",
+  "computeInstanceId",
   "moduleSpecifier",
   "token"
 ]);
@@ -2276,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(() => {
@@ -2435,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)"
@@ -2778,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;
@@ -3218,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;
@@ -3274,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("");
@@ -3514,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;
@@ -3526,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";
@@ -3835,7 +3805,7 @@ async function readStream(_env, streamId, runId, signal, cursor) {
     if (cursor) {
       params.set("cursor", cursor);
     }
-    const url = `/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
+    const url = `${apiBase()}/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
     const response = await fetch(url, { signal });
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
@@ -5174,6 +5144,9 @@ function detectEncoding(data) {
 function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   const [chunks, setChunks] = reactExports.useState([]);
   const [isLive, setIsLive] = reactExports.useState(false);
+  const [isInitialLoading, setIsInitialLoading] = reactExports.useState(
+    Boolean(streamId && runId)
+  );
   const [error, setError] = reactExports.useState(null);
   const abortControllerRef = reactExports.useRef(null);
   const chunkIdRef = reactExports.useRef(0);
@@ -5220,6 +5193,8 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   reactExports.useEffect(() => {
     setChunks([]);
     setError(null);
+    setIsLive(false);
+    setIsInitialLoading(Boolean(streamId && runId));
     chunkIdRef.current = 0;
     frameCountRef.current = 0;
     serverCursorRef.current = null;
@@ -5228,13 +5203,12 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       pollTimerRef.current = null;
     }
     if (!streamId || !runId) {
-      setIsLive(false);
+      setIsInitialLoading(false);
       return;
     }
     let mounted = true;
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
-    setIsLive(true);
     const revivers = getWebRevivers();
     const parseLegacyLine = (line) => {
       const chunkId = chunkIdRef.current++;
@@ -5363,6 +5337,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
           if (mounted) {
             setError("This stream is encrypted. Click Decrypt to view.");
             setIsLive(false);
+            setIsInitialLoading(false);
           }
           return;
         }
@@ -5370,11 +5345,13 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         serverCursorRef.current = result.cursor;
         if (!mounted || abortController.signal.aborted) return;
         setChunks(initialChunks);
+        setIsInitialLoading(false);
         if (result.done) {
           setIsLive(false);
           return;
         }
         if (isRunActive(runStatusRef.current)) {
+          setIsLive(true);
           const poll = async () => {
             if (!mounted || abortController.signal.aborted) return;
             try {
@@ -5412,6 +5389,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         if (mounted) {
           setError(err instanceof Error ? err.message : String(err));
           setIsLive(false);
+          setIsInitialLoading(false);
         }
       }
     };
@@ -5432,7 +5410,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       setIsLive(false);
     }
   }, [runStatus]);
-  return { chunks, isLive, error };
+  return { chunks, isLive, isInitialLoading, error };
 }
 function LiveStatus({ hasError, errorMessage }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
@@ -5643,6 +5621,7 @@ function RunDetailView({
   const {
     chunks: streamChunks,
     isLive: streamIsLive,
+    isInitialLoading: streamIsInitialLoading,
     error: streamError
   } = useStreamReader(env, selectedStreamId, runId, encryptionKey, run.status);
   const handleCancelClick = () => {
@@ -5827,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 ?? [],
@@ -5857,115 +5836,54 @@ function RunDetailView({
                 onExactIdSearch: searchByExactId
               }
             ) }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "w-64 flex-shrink-0 border rounded-lg overflow-hidden",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-background-100)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: "px-3 py-2 border-b text-xs font-medium",
-                        style: {
-                          borderColor: "var(--ds-gray-300)",
-                          color: "var(--ds-gray-900)"
-                        },
-                        children: [
-                          "Streams (",
-                          streams.length,
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto max-h-[calc(100vh-400px)]", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-xs text-destructive", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "p-4 text-xs",
-                        style: { color: "var(--ds-gray-600)" },
-                        children: "No streams found for this run"
-                      }
-                    ) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setSelectedStreamId(streamId),
-                        className: "w-full text-left px-3 py-2 text-xs font-mono truncate hover:bg-accent transition-colors",
-                        style: {
-                          backgroundColor: selectedStreamId === streamId ? "var(--ds-gray-200)" : "transparent",
-                          color: "var(--ds-gray-1000)"
-                        },
-                        title: streamId,
-                        children: streamId
-                      },
-                      streamId
-                    )) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "h-full flex flex-col items-center justify-center gap-3 rounded-lg border p-4",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative -mx-6 flex h-full min-h-0 overflow-hidden border-t border-gray-alpha-400 bg-background-100", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-[340px] shrink-0 flex-col border-r border-gray-alpha-400 bg-background-100", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "h-10 min-h-10 border-b border-gray-alpha-400"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1 divide-y divide-gray-400 overflow-y-auto", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col divide-y divide-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-24" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-32" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-20" }) })
+                ] }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2 text-label-12 text-red-900", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center px-4 text-label-12 text-gray-900", children: "No streams found for this run" }) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedStreamId(streamId),
+                    className: `flex h-10 w-full min-w-0 items-center truncate pl-4 pr-2 text-left text-label-14 transition-colors ${selectedStreamId === streamId ? "bg-gray-100 text-gray-1000 hover:bg-gray-200 active:bg-gray-200" : "bg-transparent text-gray-900 hover:bg-gray-100 hover:text-gray-1000 focus-visible:bg-gray-100 focus-visible:text-gray-1000"}`,
+                    title: streamId,
+                    children: streamId
                   },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Lock,
-                      {
-                        className: "h-6 w-6",
-                        style: { color: "var(--ds-gray-700)" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "text-sm",
-                        style: { color: "var(--ds-gray-900)" },
-                        children: "This stream is encrypted."
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      DecryptButton,
-                      {
-                        onClick: handleDecrypt,
-                        loading: isDecrypting
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  streamId
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden bg-background-100", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StreamViewerSkeleton, {}) }) : selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "h-8 w-8 text-gray-700" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 font-medium text-gray-1000", children: "Encrypted Stream" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-12 text-gray-900", children: "Decrypt this stream to view its chunks." })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DecryptButton,
+                  {
+                    onClick: handleDecrypt,
+                    loading: isDecrypting
+                  }
+                )
+              ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 StreamViewer,
                 {
                   streamId: selectedStreamId,
                   chunks: streamChunks,
                   isLive: streamIsLive,
+                  isLoading: streamIsInitialLoading,
                   error: (streamError == null ? void 0 : streamError.includes("encrypted")) ? null : streamError
                 }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "h-full flex items-center justify-center rounded-lg border",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
-                  },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "text-sm",
-                      style: { color: "var(--ds-gray-600)" },
-                      children: streams.length > 0 ? "Select a stream to view its data" : "No streams available"
-                    }
-                  )
-                }
-              ) })
+              ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 text-gray-600", children: streams.length > 0 ? "Select a stream to view its data" : "No streams available" }) }) })
             ] }) }) }),
             false
           ]