@workflow/web 5.0.0-beta.26 → 5.0.0-beta.28

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

@@ -1,8 +1,8 @@
 import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, G as ReactDOM, B as useNavigate, C as useSearchParams, A as Link, w as withComponentProps, H as useParams } from "./index-BXZSIDEp.js";
-import { q as Check, O as Copy, j as ChevronRight, o as ChevronDown, C as CircleAlert, Q as parseStepName, B as parseWorkflowName, U as ErrorCard, V as format, Z as Zap, S as Send, R as ResolveHookModal, Y as Circle, X, p as ChevronUp, N as ErrorBoundary, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, _ as useEscapeKeydown, t as composeEventHandlers, $ as useCallbackRef, a0 as useLayoutEffect2, s as useControllableState, a1 as useId, a2 as createContext2, v as Presence, x as createContextScope, l as hideOthers, m as ReactRemoveScroll, a3 as useFocusGuards, a4 as LAYOUT, a5 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a6 as RunActionsButtons, F as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, y as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-CcCwLmnF.js";
-import { c as createLucideIcon, O as cn, U as DataInspector, W as DecryptClickContext, X as Button, Y as Spinner, Z as Lock, $ as RESERVED_ATTRIBUTE_KEY_PREFIX, a0 as ContextCardProvider, h as useToast, a1 as Skeleton, a2 as Yr, a3 as isEncryptedMarker, a4 as TimestampTooltip, a5 as formatDuration, a6 as _r, a7 as RunClickContext, a8 as StreamClickContext, a9 as isExpiredMarker, aa as isDoStreamStep, ab as extractConversation, ac as hasEncryptedFields, ad as EVENT_DATA_REF_FIELDS, ae as useSidebarDataOptional, af as clsx, I as cva, ag as useRowWindow, ah as isSpanDimmedBySearch, ai as ROW_HEIGHT_PX, aj as getSpanDurationMs, ak as formatDurationPrecise, al as TooltipProvider, am as ActiveSpanProvider, an as useActiveSpan, ao as useSidebarData, ap as useReducedMotion, aq as searchSpans, ar as computeRootBounds, as as computeTimeMarkers, at as getHighResInMs, au as scrollRowIntoView, av as TIMELINE_PADDING_PX, aw as Timeline, ax as TimelineHeader, ay as IconButton, az as Tooltip, aA as TooltipTrigger, aB as TooltipContent, aC as SidebarDataProvider, aD as fetchHook, l as fetchEvents, aE as hydrateResourceIO, aF as hydrateResourceIOWithKey, H as fetchRun, aG as fetchStep, aH as fetchStreams, aI as Slot, G as useComposedRefs, aJ as Slottable, e as cn$1, aK as buttonVariants, aL as fetchEvent, aM as fetchEventsByCorrelationId, aN as isEncryptedData, aO as hydrateData, aP as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, aQ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, aR as getEncryptionKeyForRun, t as toast, L as LoaderCircle, aS as StreamViewer } from "./mermaid-3ZIDBTTL-Cg-Mp5Kj.js";
-import { decrypt, importKey } from "./encryption-g14N5vQl.js";
-import "./index-B6-SzLmT.js";
+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-CyKfZJOQ.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 _r, ac as RunClickContext, ad as StreamClickContext, ae as Collapsible, af as isExpiredMarker, ag as isDoStreamStep, ah as extractConversation, ai as hasEncryptedFields, aj as getEventDataRefFields, ak as useSidebarDataOptional, al as clsx, am as useActiveSpan, an as useSidebarData, ao as Tooltip, ap as TooltipTrigger, aq as IconButton, ar as TooltipContent, H as ChevronDown, as as useRowWindow, at as isSpanDimmedBySearch, au as ROW_HEIGHT_PX, av as getSpanDurationMs, aw as isSpanErrored, ax as formatDurationPrecise, ay as TooltipProvider, az as ActiveSpanProvider, aA as useReducedMotion, aB as searchSpans, aC as computeRootBounds, aD as computeTimeMarkers, aE as clampViewportToRoot, aF as getHighResInMs, aG as scrollRowIntoView, aH as TIMELINE_PADDING_PX, aI as Minimap, aJ as Timeline, aK as TimelineHeader, aL as wheelZoomScaleFactor, aM as wheelDeltaToPixels, aN as SidebarDataProvider, aO as fetchHook, l as fetchEvents, aP as hydrateResourceIOAsync, J as fetchRun, aQ as fetchStep, aR as hydrateResourceIO, aS as fetchStreams, aT as Slot, I as useComposedRefs, aU as Slottable, e as cn$1, aV as buttonVariants, aW as fetchEvent, aX as fetchEventsByCorrelationId, aY as isEncryptedData, aZ as hydrateData, a_ as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, a$ as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, b0 as getEncryptionKeyForRun, t as toast, L as LoaderCircle, b1 as StreamViewer } from "./mermaid-3ZIDBTTL-QcES6x1o.js";
+import { decrypt, importKey } from "./encryption-BQTnudEZ.js";
+import "./index-ConSkUmc.js";
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -125,251 +125,561 @@ function CopyButton({ copyText, ariaLabel, className }) {
     });
   }, 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 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);
+const ELLIPSIS = "…";
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function toGraphemes(text) {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
   }
-};
-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 })] });
+  return Array.from(text);
 }
-function DetailCard({ summary, children, onToggle, disabled = false, defaultOpen = false, variant = "section", trailing, summaryClassName, contentClassName }) {
-  const [open, setOpen] = reactExports.useState(defaultOpen);
-  const handleToggle = (e) => {
-    if (e.target !== e.currentTarget)
-      return;
-    const next = e.currentTarget.open;
-    setOpen(next);
-    onToggle == null ? void 0 : onToggle(next);
+function buildCandidate(graphemes, kept) {
+  if (kept <= 0) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true
+    };
+  }
+  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
+  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true
   };
-  if (variant === "card") {
-    if (disabled) {
-      return jsxRuntimeExports.jsx("div", { className: cn("list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden", summaryClassName), style: { cursor: "not-allowed", opacity: 0.8 }, children: summary });
-    }
-    return jsxRuntimeExports.jsxs("details", { className: "group/card last:border-b border-gray-alpha-400", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsx("summary", { className: cn("list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden", summaryClassName), children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: cn("shrink-0 text-gray-700 group-hover/card:text-gray-1000", open && "rotate-90") }), summary] }) }), jsxRuntimeExports.jsx("div", { className: contentClassName, children })] });
+}
+function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
+  const fullText = graphemes.join("");
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
   }
-  const rowClasses = "flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2";
-  if (trailing) {
-    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("div", { className: cn(rowClasses, summaryClassName), children: [jsxRuntimeExports.jsx("div", { className: "isolate relative shrink-0 w-3.5 h-3.5 text-gray-700", children: jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }), jsxRuntimeExports.jsx("div", { className: "shrink-0 pr-1", children: trailing })] }) });
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
   }
-  if (disabled) {
-    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: cn(rowClasses, summaryClassName), style: { color: "var(--ds-gray-700)", cursor: "not-allowed" }, children: jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }) }) });
+  let lo = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+  while (lo <= hi) {
+    const mid = lo + hi >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
   }
-  return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("details", { className: "group", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsxs("summary", { className: cn("group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden", rowClasses, summaryClassName), children: [jsxRuntimeExports.jsxs("div", { className: "isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0" }), jsxRuntimeExports.jsx(ChevronDown, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100" })] }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary })] }), jsxRuntimeExports.jsx("div", { className: cn("mb-3", contentClassName), children })] }) });
-}
-const isReservedAttributeKey = (key) => key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
-function ReservedBadge() {
-  return jsxRuntimeExports.jsx("span", { className: "shrink-0 rounded border px-1 py-px text-[10px] font-medium leading-3", style: {
-    borderColor: "var(--ds-gray-alpha-400)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-700)"
-  }, title: `Keys prefixed with "${RESERVED_ATTRIBUTE_KEY_PREFIX}" are reserved for framework and library code`, children: "Reserved" });
-}
-function AttributeRow({ attributeKey, value, removed = false }) {
-  const reserved = isReservedAttributeKey(attributeKey);
-  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5", children: [jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-label-13 text-gray-900", style: reserved ? { color: "var(--ds-gray-700)" } : void 0, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: attributeKey }), reserved && jsxRuntimeExports.jsx(ReservedBadge, {})] }), removed ? jsxRuntimeExports.jsx("span", { className: "shrink-0 text-copy-13 italic text-gray-700", children: "removed" }) : jsxRuntimeExports.jsx("span", { className: "max-w-[60%] truncate text-copy-13 text-gray-1000", title: value, children: value })] });
-}
-function sortAttributeKeys(keys) {
-  return [...keys].sort((a, b) => {
-    const aReserved = isReservedAttributeKey(a);
-    const bReserved = isReservedAttributeKey(b);
-    if (aReserved !== bReserved)
-      return aReserved ? 1 : -1;
-    return a.localeCompare(b);
-  });
+  if (best === -1) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: "",
+      truncated: true
+    };
+  }
+  return buildCandidate(graphemes, best);
 }
-function RunAttributesCard({ attributes }) {
-  const keys = sortAttributeKeys(Object.keys(attributes));
-  if (keys.length === 0)
+function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
     return null;
-  return jsxRuntimeExports.jsx(DetailCard, { summary: "Attributes", defaultOpen: true, contentClassName: "mb-4", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: attributes[key] }, key)) }) });
-}
-function isAttrSetEventData(data) {
-  if (data === null || typeof data !== "object")
-    return false;
-  const record = data;
-  return Array.isArray(record.changes) && record.changes.every((c) => c !== null && typeof c === "object" && typeof c.key === "string");
-}
-function describeWriter(writer) {
-  if (!writer)
+  }
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
+    return value;
+  }
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
     return null;
-  if (writer.type === "workflow")
-    return "Set by workflow";
-  if (writer.type === "step") {
-    return `Set by step ${writer.stepId} (attempt ${writer.attempt})`;
   }
-  return null;
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
+  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
 }
-function AttrSetEventBlock({ data }) {
-  if (!isAttrSetEventData(data)) {
-    return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
+function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+  if (!trimmedSelectionText) {
+    return null;
   }
-  const writerLabel = describeWriter(data.writer);
-  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col px-3 py-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: data.changes.map((change, index) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: change.key, removed: change.value === null, value: change.value ?? void 0 }, `${change.key}:${index}`)) }), writerLabel && jsxRuntimeExports.jsx("div", { className: "border-t py-1.5 text-label-12", style: {
-    borderColor: "var(--ds-gray-alpha-400)",
-    color: "var(--ds-gray-700)"
-  }, children: writerLabel })] });
-}
-const STYLES$2 = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
-function DecryptButton({ decrypted = false, loading = false, onClick }) {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$2 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick: decrypted ? void 0 : onClick, disabled: decrypted || loading, className: `wf-decrypt-btn ${decrypted ? "wf-decrypt-done" : "wf-decrypt-idle"}`, children: [loading ? jsxRuntimeExports.jsx(Spinner, { size: 14 }) : decrypted ? jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] }) : jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), loading ? "Decrypting…" : decrypted ? "Decrypted" : "Decrypt"] })] });
-}
-function isStructuredError(value) {
-  return value != null && typeof value === "object" && (typeof value.message === "string" || typeof value.stack === "string");
-}
-function deriveTitle(message) {
-  const firstLine = message.split("\n").find((line) => line.trim().length > 0) ?? message;
-  return firstLine.trim();
-}
-function ErrorStackBlock({ value }) {
-  const stack = typeof value.stack === "string" ? value.stack : void 0;
-  const message = typeof value.message === "string" ? value.message : void 0;
-  const body = stack ?? message ?? "";
-  const title = message ? deriveTitle(message) : deriveTitle(body);
-  const copyText = message && stack && !stack.includes(message) ? `${message}
-
-${stack}` : body;
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
-    borderColor: "var(--ds-red-400)",
-    background: "var(--ds-red-100)"
-  }, children: [jsxRuntimeExports.jsx(CopyButton, { copyText, ariaLabel: "Copy error", className: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95" }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
-    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",
-    // 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: {
-    color: "var(--ds-red-900)",
-    background: "var(--ds-red-200)"
-  }, children: body })] });
+  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value
+  });
+  return mappedText === null ? null : leading + mappedText + trailing;
 }
-const STYLES$1 = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
-function LoadMoreButton({ loading = false, onClick, label = "Load more", loadingLabel = "Loading..." }) {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$1 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick, disabled: loading, className: "wf-load-more", children: [loading && jsxRuntimeExports.jsx(Spinner, { size: 14 }), loading ? loadingLabel : label] })] });
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
+function createFullState(value, graphemes) {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: ""
+  };
 }
-const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
-function MenuDropdown({ options, value, onChange }) {
-  var _a, _b;
-  const [open, setOpen] = reactExports.useState(false);
+function useMiddleTruncate(value) {
+  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
+  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
   const ref = reactExports.useRef(null);
-  const label = ((_a = options.find((o) => o.value === value)) == null ? void 0 : _a.label) ?? ((_b = options[0]) == null ? void 0 : _b.label) ?? "";
-  reactExports.useEffect(() => {
-    if (!open)
-      return;
-    function handleClickOutside(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
+  const measureRef = reactExports.useRef(null);
+  const [state, setState] = reactExports.useState(() => fullState);
+  const rafRef = reactExports.useRef(0);
+  const updateState = reactExports.useCallback((nextState) => {
+    setState((currentState) => {
+      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
+        return currentState;
       }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
-  return jsxRuntimeExports.jsxs("div", { ref, style: { position: "relative", flexShrink: 0 }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES } }), jsxRuntimeExports.jsxs("button", { type: "button", className: "wf-menu-btn", onClick: () => setOpen(!open), children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", style: {
-    marginLeft: 16,
-    marginRight: -4,
-    color: "var(--ds-gray-900)"
-  }, children: jsxRuntimeExports.jsx("path", { d: "M4.5 6L8 9.5L11.5 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    right: 0,
-    top: "100%",
-    marginTop: 4,
-    minWidth: 140,
-    padding: 4,
-    borderRadius: 12,
-    background: "var(--ds-background-100)",
-    boxShadow: "var(--ds-shadow-menu, var(--ds-shadow-medium))",
-    zIndex: 2001
-  }, role: "menu", children: options.map((option) => jsxRuntimeExports.jsx("button", { type: "button", role: "menuitem", className: "wf-menu-item", style: {
-    fontWeight: option.value === value ? 500 : 400
-  }, onClick: () => {
-    onChange(option.value);
-    setOpen(false);
-  }, children: option.label }, option.value)) })] });
-}
-const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
-  "step_failed",
-  "step_retrying",
-  "run_failed",
-  "workflow_failed"
-]);
-const BUTTON_RESET_STYLE = {
-  appearance: "none",
-  WebkitAppearance: "none",
-  border: "none",
-  background: "transparent"
-};
-const DOT_PULSE_ANIMATION = "workflow-dot-pulse 1.25s cubic-bezier(0, 0, 0.2, 1) infinite";
-function formatEventTime(date) {
-  return date.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  }) + "." + date.getMilliseconds().toString().padStart(3, "0");
+      return nextState;
+    });
+  }, []);
+  const recalculate = reactExports.useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl)
+      return;
+    const available = el.clientWidth;
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+    const measure = (text) => {
+      measureEl.textContent = text;
+      return measureEl.scrollWidth;
+    };
+    const fullWidth = measure(value);
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText
+    });
+  }, [fullState, graphemes, updateState, value]);
+  useIsomorphicLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+  reactExports.useEffect(() => {
+    var _a;
+    const el = ref.current;
+    if (!el)
+      return;
+    const debouncedRecalc = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
+    ro == null ? void 0 : ro.observe(el);
+    window.addEventListener("resize", debouncedRecalc);
+    const onFontsLoaded = () => {
+      debouncedRecalc();
+    };
+    const fontSet = "fonts" in document ? document.fonts : null;
+    (_a = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a.call(fontSet, "loadingdone", onFontsLoaded);
+    return () => {
+      var _a2;
+      ro == null ? void 0 : ro.disconnect();
+      window.removeEventListener("resize", debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      (_a2 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a2.call(fontSet, "loadingdone", onFontsLoaded);
+    };
+  }, [recalculate]);
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText
+  };
 }
-function parseEventDate(value) {
-  if (value == null)
+function getRangeOffsets(container, range) {
+  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
     return null;
-  const date = value instanceof Date ? value : new Date(String(value));
-  return Number.isNaN(date.getTime()) ? null : date;
+  }
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range.startContainer, range.startOffset);
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range.endContainer, range.endOffset);
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length
+  };
 }
-function getEffectiveEventDate$1(event) {
-  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
+  const visibleRef = reactExports.useRef(null);
+  const handleCopy = reactExports.useCallback((e) => {
+    onCopyProp == null ? void 0 : onCopyProp(e);
+    if (e.defaultPrevented || !isTruncated)
+      return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+      return;
+    const selectionText = selection.toString();
+    if (!selectionText)
+      return;
+    const range = selection.getRangeAt(0);
+    const visibleEl = visibleRef.current;
+    let copyText = null;
+    if (e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
+      const offsets = getRangeOffsets(visibleEl, range);
+      if (offsets) {
+        copyText = getMiddleTruncateCopyText({
+          prefixText,
+          selectionEnd: offsets.end,
+          selectionStart: offsets.start,
+          suffixText,
+          value
+        });
+      }
+    }
+    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
+      prefixText,
+      selectionText,
+      suffixText,
+      value
+    }));
+    if (copyText === null)
+      return;
+    e.preventDefault();
+    e.clipboardData.setData("text/plain", copyText);
+  }, [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 })] });
 }
-function getEffectiveEventTime(event) {
-  return getEffectiveEventDate$1(event).getTime();
+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"] }) })] });
 }
-function formatEventType(eventType) {
-  return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+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 getStatusDotColor(eventType) {
-  if (eventType === "step_failed" || eventType === "run_failed" || eventType === "workflow_failed") {
-    return "var(--ds-red-700)";
+function isReservedAttributeKey(key) {
+  return key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
+}
+const rowValueVariants = cva("max-w-[60%] truncate text-right text-copy-13 text-gray-1000", {
+  variants: {
+    variant: {
+      default: "",
+      mono: "font-mono"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-  if (eventType === "run_cancelled") {
-    return "var(--ds-amber-700)";
+});
+const rowCopyValueVariants = cva("flex min-w-0 max-w-[60%] items-center justify-end gap-1 text-copy-13 text-gray-1000", {
+  variants: {
+    variant: {
+      default: "",
+      mono: "font-mono"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-  if (eventType === "step_retrying") {
-    return "var(--ds-amber-700)";
+});
+function DetailKeyValueRowBase({ label, value, copyText, removed = false, variant }) {
+  const stringValue = typeof value === "string" ? value : void 0;
+  return jsxRuntimeExports.jsxs("div", { className: "px-1.5 hover:bg-gray-100 flex justify-between gap-3 -mx-1.5 py-0.5 rounded items-center", children: [jsxRuntimeExports.jsx("span", { className: "flex min-w-0 items-center gap-1.5 truncate text-label-13 text-gray-900", children: label }), removed ? jsxRuntimeExports.jsx("span", { className: "shrink-0 text-copy-13 italic text-gray-700", children: "removed" }) : copyText ? jsxRuntimeExports.jsxs("div", { className: cn(rowCopyValueVariants({ variant })), title: copyText, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: copyText, className: cn(rowValueVariants({ variant, className: "text-right" })), style: { gridTemplateColumns: "minmax(0, 1fr)" } }), jsxRuntimeExports.jsx(CopyButton, { copyText, ariaLabel: `Copy ${label}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: cn(rowValueVariants({ variant })), title: stringValue, children: value })] });
+}
+function DetailKeyValueRow(props) {
+  return jsxRuntimeExports.jsx(DetailKeyValueRowBase, { ...props });
+}
+function DetailMonoKeyValueRow(props) {
+  return jsxRuntimeExports.jsx(DetailKeyValueRowBase, { ...props, variant: "mono" });
+}
+function AttributeRow({ attributeKey, value, removed = false }) {
+  return jsxRuntimeExports.jsx(DetailKeyValueRow, { label: attributeKey, value, removed });
+}
+function sortAttributeKeys(keys) {
+  return [...keys].sort((a, b) => {
+    const aReserved = isReservedAttributeKey(a);
+    const bReserved = isReservedAttributeKey(b);
+    if (aReserved !== bReserved)
+      return aReserved ? 1 : -1;
+    return a.localeCompare(b);
+  });
+}
+function RunAttributesCard({ attributes }) {
+  const keys = sortAttributeKeys(Object.keys(attributes));
+  if (keys.length === 0)
+    return null;
+  return jsxRuntimeExports.jsxs(CollapsibleRoot, { defaultOpen: true, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { children: "Attributes" }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "mb-4", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: attributes[key] }, key)) }) })] });
+}
+function formatMetadataValue(value) {
+  if (value == null) {
+    return String(value);
   }
-  if (eventType === "attr_set") {
-    return "var(--ds-teal-900)";
+  if (typeof value === "string") {
+    return value;
   }
-  if (eventType === "step_completed" || eventType === "run_completed" || eventType === "workflow_completed" || eventType === "hook_disposed" || eventType === "wait_completed") {
-    return "var(--ds-green-700)";
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
   }
-  if (eventType === "step_started" || eventType === "run_started" || eventType === "workflow_started" || eventType === "hook_received") {
-    return "var(--ds-blue-700)";
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
   }
-  return "var(--ds-gray-600)";
 }
-function buildNameMaps(events, run) {
-  var _a, _b;
-  const correlationNameMap = /* @__PURE__ */ new Map();
-  if (events) {
-    for (const event of events) {
-      if (event.eventType === "step_created" && event.correlationId) {
-        const stepName = ((_a = event.eventData) == null ? void 0 : _a.stepName) ?? "";
+function isMetadataRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function RunMetadataCard({ metadata }) {
+  if (!isMetadataRecord(metadata)) {
+    return jsxRuntimeExports.jsxs(CollapsibleRoot, { defaultOpen: true, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { children: "Metadata" }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "mb-4", children: jsxRuntimeExports.jsx(CopyableDataBlock, { data: metadata }) })] });
+  }
+  const keys = Object.keys(metadata).sort((a, b) => a.localeCompare(b));
+  if (keys.length === 0)
+    return null;
+  return jsxRuntimeExports.jsxs(CollapsibleRoot, { defaultOpen: true, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { children: "Metadata" }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "mb-4", children: jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: keys.map((key) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: key, value: formatMetadataValue(metadata[key]) }, key)) }) })] });
+}
+function isAttrSetEventData(data) {
+  if (data === null || typeof data !== "object")
+    return false;
+  const record = data;
+  return Array.isArray(record.changes) && record.changes.every((c) => c !== null && typeof c === "object" && typeof c.key === "string");
+}
+function describeWriter(writer) {
+  if (!writer)
+    return null;
+  if (writer.type === "workflow")
+    return "Set by workflow";
+  if (writer.type === "step") {
+    return `Set by step ${writer.stepId} (attempt ${writer.attempt})`;
+  }
+  return null;
+}
+function AttrSetEventBlock({ data }) {
+  if (!isAttrSetEventData(data)) {
+    return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
+  }
+  const writerLabel = describeWriter(data.writer);
+  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col px-3 py-1", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: data.changes.map((change, index) => jsxRuntimeExports.jsx(AttributeRow, { attributeKey: change.key, removed: change.value === null, value: change.value ?? void 0 }, `${change.key}:${index}`)) }), writerLabel && jsxRuntimeExports.jsx("div", { className: "border-t py-1.5 text-label-12", style: {
+    borderColor: "var(--ds-gray-alpha-400)",
+    color: "var(--ds-gray-700)"
+  }, children: writerLabel })] });
+}
+const STYLES$2 = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
+function DecryptButton({ decrypted = false, loading = false, onClick }) {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$2 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick: decrypted ? void 0 : onClick, disabled: decrypted || loading, className: `wf-decrypt-btn ${decrypted ? "wf-decrypt-done" : "wf-decrypt-idle"}`, children: [loading ? jsxRuntimeExports.jsx(Spinner, { size: 14 }) : decrypted ? jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] }) : jsxRuntimeExports.jsxs("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }), jsxRuntimeExports.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), loading ? "Decrypting…" : decrypted ? "Decrypted" : "Decrypt"] })] });
+}
+function isStructuredError(value) {
+  return value != null && typeof value === "object" && (typeof value.message === "string" || typeof value.stack === "string");
+}
+function deriveTitle(message) {
+  const firstLine = message.split("\n").find((line) => line.trim().length > 0) ?? message;
+  return firstLine.trim();
+}
+function ErrorStackBlock({ value }) {
+  const stack = typeof value.stack === "string" ? value.stack : void 0;
+  const message = typeof value.message === "string" ? value.message : void 0;
+  const body = stack ?? message ?? "";
+  const title = message ? deriveTitle(message) : deriveTitle(body);
+  const copyText = message && stack && !stack.includes(message) ? `${message}
+
+${stack}` : body;
+  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
+    borderColor: "var(--ds-red-400)",
+    background: "var(--ds-red-100)"
+  }, children: [jsxRuntimeExports.jsx(CopyButton, { copyText, ariaLabel: "Copy error", className: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95" }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
+    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",
+    // 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: {
+    color: "var(--ds-red-900)",
+    background: "var(--ds-red-200)"
+  }, children: body })] });
+}
+const STYLES$1 = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
+function LoadMoreButton({ loading = false, onClick, label = "Load more", loadingLabel = "Loading..." }) {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$1 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick, disabled: loading, className: "wf-load-more", children: [loading && jsxRuntimeExports.jsx(Spinner, { size: 14 }), loading ? loadingLabel : label] })] });
+}
+const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
+function MenuDropdown({ options, value, onChange }) {
+  var _a, _b;
+  const [open, setOpen] = reactExports.useState(false);
+  const ref = reactExports.useRef(null);
+  const label = ((_a = options.find((o) => o.value === value)) == null ? void 0 : _a.label) ?? ((_b = options[0]) == null ? void 0 : _b.label) ?? "";
+  reactExports.useEffect(() => {
+    if (!open)
+      return;
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return jsxRuntimeExports.jsxs("div", { ref, style: { position: "relative", flexShrink: 0 }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES } }), jsxRuntimeExports.jsxs("button", { type: "button", className: "wf-menu-btn", onClick: () => setOpen(!open), children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", style: {
+    marginLeft: 16,
+    marginRight: -4,
+    color: "var(--ds-gray-900)"
+  }, children: jsxRuntimeExports.jsx("path", { d: "M4.5 6L8 9.5L11.5 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    right: 0,
+    top: "100%",
+    marginTop: 4,
+    minWidth: 140,
+    padding: 4,
+    borderRadius: 12,
+    background: "var(--ds-background-100)",
+    boxShadow: "var(--ds-shadow-menu, var(--ds-shadow-medium))",
+    zIndex: 2001
+  }, role: "menu", children: options.map((option) => jsxRuntimeExports.jsx("button", { type: "button", role: "menuitem", className: "wf-menu-item", style: {
+    fontWeight: option.value === value ? 500 : 400
+  }, onClick: () => {
+    onChange(option.value);
+    setOpen(false);
+  }, children: option.label }, option.value)) })] });
+}
+const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
+  "step_failed",
+  "step_retrying",
+  "run_failed",
+  "workflow_failed"
+]);
+const BUTTON_RESET_STYLE = {
+  appearance: "none",
+  WebkitAppearance: "none",
+  border: "none",
+  background: "transparent"
+};
+const DOT_PULSE_ANIMATION = "workflow-dot-pulse 1.25s cubic-bezier(0, 0, 0.2, 1) infinite";
+function formatEventTime(date) {
+  return date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }) + "." + date.getMilliseconds().toString().padStart(3, "0");
+}
+function parseEventDate(value) {
+  if (value == null)
+    return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function getEffectiveEventDate$1(event) {
+  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+}
+function getEffectiveEventTime(event) {
+  return getEffectiveEventDate$1(event).getTime();
+}
+function formatEventType(eventType) {
+  return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function getStatusDotColor(eventType) {
+  if (eventType === "step_failed" || eventType === "run_failed" || eventType === "workflow_failed") {
+    return "var(--ds-red-700)";
+  }
+  if (eventType === "run_cancelled") {
+    return "var(--ds-amber-700)";
+  }
+  if (eventType === "step_retrying") {
+    return "var(--ds-amber-700)";
+  }
+  if (eventType === "attr_set") {
+    return "var(--ds-teal-900)";
+  }
+  if (eventType === "step_completed" || eventType === "run_completed" || eventType === "workflow_completed" || eventType === "hook_disposed" || eventType === "wait_completed") {
+    return "var(--ds-green-700)";
+  }
+  if (eventType === "step_started" || eventType === "run_started" || eventType === "workflow_started" || eventType === "hook_received") {
+    return "var(--ds-blue-700)";
+  }
+  return "var(--ds-gray-600)";
+}
+function buildNameMaps(events, run) {
+  var _a, _b;
+  const correlationNameMap = /* @__PURE__ */ new Map();
+  if (events) {
+    for (const event of events) {
+      if (event.eventType === "step_created" && event.correlationId) {
+        const stepName = ((_a = event.eventData) == null ? void 0 : _a.stepName) ?? "";
         const parsed = parseStepName(String(stepName));
         correlationNameMap.set(event.correlationId, (parsed == null ? void 0 : parsed.shortName) ?? stepName);
       }
@@ -1040,7 +1350,13 @@ function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = fals
 function EventListView(props) {
   return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(EventListViewInner, { ...props }) });
 }
-const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
+const 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)`;
+}
+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 },
@@ -1054,7 +1370,11 @@ const ROWS = [
 const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
 const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
 function TraceViewerSkeleton() {
-  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id) => jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-9" }, id)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
+  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 shouldShowVerticalLine(eventType) {
   if (eventType === "hook_created" || eventType === "hook_received" || eventType === "hook_disposed") {
@@ -1438,319 +1758,39 @@ function cascadeSpans(runSpan, spans) {
     runSpan,
     ...spans.slice().sort((a, b) => {
       const aStart = otelTimeToMs(a.startTime);
-      const bStart = otelTimeToMs(b.startTime);
-      return aStart - bStart;
-    })
-  ];
-  return sortedSpans.map((span, index) => {
-    const parentSpanId = index === 0 ? void 0 : String(sortedSpans[index - 1].spanId);
-    return {
-      ...span,
-      parentSpanId
-    };
-  });
-}
-function buildTrace(run, events, now) {
-  const groupedEvents = groupEventsByCorrelation(events);
-  const latestKnownTime = computeLatestKnownTime(events, run);
-  const { runSpan, spans } = buildSpans(run, groupedEvents, now, latestKnownTime);
-  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
-  const traceStartMs = otelTimeToMs(runSpan.startTime);
-  const knownDurationMs = latestKnownTime.getTime() - traceStartMs;
-  return {
-    traceId: run.runId,
-    rootSpanId: run.runId,
-    spans: sortedCascadingSpans,
-    resources: [
-      {
-        name: "workflow",
-        attributes: {
-          "service.name": WORKFLOW_LIBRARY.name
-        }
-      }
-    ],
-    knownDurationMs: Math.max(0, knownDurationMs)
-  };
-}
-const ELLIPSIS = "...";
-const MIN_START = 3;
-const MIN_END = 3;
-const MIN_KEPT = MIN_START + MIN_END;
-const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-function toGraphemes(text) {
-  if (graphemeSegmenter) {
-    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
-  }
-  return Array.from(text);
-}
-function buildCandidate(graphemes, kept) {
-  if (kept <= 0) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: ELLIPSIS,
-      truncated: true
-    };
-  }
-  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
-  const prefixGraphemeCount = kept - suffixGraphemeCount;
-  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
-  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
-  return {
-    prefixText,
-    prefixGraphemeCount,
-    suffixText,
-    suffixGraphemeCount,
-    text: prefixText + ELLIPSIS + suffixText,
-    truncated: true
-  };
-}
-function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
-  const fullText = graphemes.join("");
-  const resolvedFullWidth = fullWidth ?? measure(fullText);
-  if (availableWidth <= 0 || graphemes.length === 0) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
-  }
-  if (resolvedFullWidth <= availableWidth) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
-  }
-  let lo = 0;
-  let hi = graphemes.length - 1;
-  let best = -1;
-  while (lo <= hi) {
-    const mid = lo + hi >>> 1;
-    const candidate = buildCandidate(graphemes, mid);
-    if (measure(candidate.text) <= availableWidth) {
-      best = mid;
-      lo = mid + 1;
-    } else {
-      hi = mid - 1;
-    }
-  }
-  if (best === -1) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: "",
-      truncated: true
-    };
-  }
-  return buildCandidate(graphemes, best);
-}
-function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
-    return null;
-  }
-  if (selectionStart === 0 && selectionEnd === visibleText.length) {
-    return value;
-  }
-  const ellipsisStart = prefixText.length;
-  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
-  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
-    return null;
-  }
-  const originalGraphemes = toGraphemes(value);
-  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
-  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
-  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
-  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
-}
-function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  const trimmedSelectionText = selectionText.trim();
-  if (!trimmedSelectionText) {
-    return null;
-  }
-  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
-  const trailing = selectionText.slice(selectionText.trimEnd().length);
-  if (trimmedSelectionText === visibleText) {
-    return leading + value + trailing;
-  }
-  if (!trimmedSelectionText.includes(ELLIPSIS)) {
-    return null;
-  }
-  const selectionStart = visibleText.indexOf(trimmedSelectionText);
-  if (selectionStart === -1) {
-    return null;
-  }
-  const selectionEnd = selectionStart + trimmedSelectionText.length;
-  const mappedText = getMiddleTruncateCopyText({
-    prefixText,
-    selectionEnd,
-    selectionStart,
-    suffixText,
-    value
-  });
-  return mappedText === null ? null : leading + mappedText + trailing;
-}
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
-function createFullState(value, graphemes) {
-  return {
-    displayText: value,
-    isTruncated: false,
-    prefixGraphemeCount: graphemes.length,
-    prefixText: value,
-    suffixGraphemeCount: 0,
-    suffixText: ""
-  };
-}
-function useMiddleTruncate(value) {
-  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
-  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
-  const ref = reactExports.useRef(null);
-  const measureRef = reactExports.useRef(null);
-  const [state, setState] = reactExports.useState(() => fullState);
-  const rafRef = reactExports.useRef(0);
-  const updateState = reactExports.useCallback((nextState) => {
-    setState((currentState) => {
-      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
-        return currentState;
-      }
-      return nextState;
-    });
-  }, []);
-  const recalculate = reactExports.useCallback(() => {
-    const el = ref.current;
-    const measureEl = measureRef.current;
-    if (!el || !measureEl)
-      return;
-    const available = el.clientWidth;
-    if (available <= 0) {
-      updateState(fullState);
-      return;
-    }
-    const measure = (text) => {
-      measureEl.textContent = text;
-      return measureEl.scrollWidth;
-    };
-    const fullWidth = measure(value);
-    if (fullWidth <= available) {
-      updateState(fullState);
-      return;
-    }
-    const result = middleTruncate(graphemes, available, measure, fullWidth);
-    updateState({
-      displayText: result.text,
-      isTruncated: result.truncated,
-      prefixGraphemeCount: result.prefixGraphemeCount,
-      prefixText: result.prefixText,
-      suffixGraphemeCount: result.suffixGraphemeCount,
-      suffixText: result.suffixText
-    });
-  }, [fullState, graphemes, updateState, value]);
-  useIsomorphicLayoutEffect(() => {
-    recalculate();
-  }, [recalculate]);
-  reactExports.useEffect(() => {
-    var _a;
-    const el = ref.current;
-    if (!el)
-      return;
-    const debouncedRecalc = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(recalculate);
-    };
-    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
-    ro == null ? void 0 : ro.observe(el);
-    window.addEventListener("resize", debouncedRecalc);
-    const onFontsLoaded = () => {
-      debouncedRecalc();
-    };
-    const fontSet = "fonts" in document ? document.fonts : null;
-    (_a = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a.call(fontSet, "loadingdone", onFontsLoaded);
-    return () => {
-      var _a2;
-      ro == null ? void 0 : ro.disconnect();
-      window.removeEventListener("resize", debouncedRecalc);
-      cancelAnimationFrame(rafRef.current);
-      (_a2 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a2.call(fontSet, "loadingdone", onFontsLoaded);
-    };
-  }, [recalculate]);
-  return {
-    ref,
-    measureRef,
-    displayText: state.displayText,
-    isTruncated: state.isTruncated,
-    prefixGraphemeCount: state.prefixGraphemeCount,
-    prefixText: state.prefixText,
-    suffixGraphemeCount: state.suffixGraphemeCount,
-    suffixText: state.suffixText
-  };
-}
-function getRangeOffsets(container, range) {
-  if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) {
-    return null;
-  }
-  const startRange = document.createRange();
-  startRange.selectNodeContents(container);
-  startRange.setEnd(range.startContainer, range.startOffset);
-  const endRange = document.createRange();
-  endRange.selectNodeContents(container);
-  endRange.setEnd(range.endContainer, range.endOffset);
-  return {
-    end: endRange.toString().length,
-    start: startRange.toString().length
-  };
-}
-function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
-  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
-  const visibleRef = reactExports.useRef(null);
-  const handleCopy = reactExports.useCallback((e) => {
-    onCopyProp == null ? void 0 : onCopyProp(e);
-    if (e.defaultPrevented || !isTruncated)
-      return;
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0)
-      return;
-    const selectionText = selection.toString();
-    if (!selectionText)
-      return;
-    const range = selection.getRangeAt(0);
-    const visibleEl = visibleRef.current;
-    let copyText = null;
-    if (e.currentTarget.contains(range.startContainer) && e.currentTarget.contains(range.endContainer) && visibleEl) {
-      const offsets = getRangeOffsets(visibleEl, range);
-      if (offsets) {
-        copyText = getMiddleTruncateCopyText({
-          prefixText,
-          selectionEnd: offsets.end,
-          selectionStart: offsets.start,
-          suffixText,
-          value
-        });
+      const bStart = otelTimeToMs(b.startTime);
+      return aStart - bStart;
+    })
+  ];
+  return sortedSpans.map((span, index) => {
+    const parentSpanId = index === 0 ? void 0 : String(sortedSpans[index - 1].spanId);
+    return {
+      ...span,
+      parentSpanId
+    };
+  });
+}
+function buildTrace(run, events, now) {
+  const groupedEvents = groupEventsByCorrelation(events);
+  const latestKnownTime = computeLatestKnownTime(events, run);
+  const { runSpan, spans } = buildSpans(run, groupedEvents, now, latestKnownTime);
+  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
+  const traceStartMs = otelTimeToMs(runSpan.startTime);
+  const knownDurationMs = latestKnownTime.getTime() - traceStartMs;
+  return {
+    traceId: run.runId,
+    rootSpanId: run.runId,
+    spans: sortedCascadingSpans,
+    resources: [
+      {
+        name: "workflow",
+        attributes: {
+          "service.name": WORKFLOW_LIBRARY.name
+        }
       }
-    }
-    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
-      prefixText,
-      selectionText,
-      suffixText,
-      value
-    }));
-    if (copyText === null)
-      return;
-    e.preventDefault();
-    e.clipboardData.setData("text/plain", copyText);
-  }, [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 })] });
+    ],
+    knownDurationMs: Math.max(0, knownDurationMs)
+  };
 }
 function ConversationView({ messages }) {
   if (messages.length === 0) {
@@ -1897,7 +1937,7 @@ const conversationTabs = [
 ];
 function ConversationWithTabs({ conversation, args }) {
   const [activeTab, setActiveTab] = reactExports.useState("conversation");
-  return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }) }) });
+  return jsxRuntimeExports.jsx(Collapsible, { label: "Input", children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }) }) });
 }
 function EncryptedFieldBlock() {
   return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
@@ -2069,7 +2109,7 @@ const attributeToDisplayFn = {
   environment: (_value) => null,
   executionContext: (_value) => null,
   // Attributes — string-string metadata attached to the run.
-  // Rendered as key-value rows in its own collapsible DetailCard;
+  // Rendered as key-value rows in its own collapsible section;
   // if empty/missing, hidden by the hasDisplayContent gate.
   attributes: (value) => {
     if (!hasDisplayContent(value))
@@ -2089,15 +2129,17 @@ const attributeToDisplayFn = {
   metadata: (value) => {
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
-    if (isExpiredMarker(value))
-      return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
-    return JsonBlock(value);
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Metadata", children: jsxRuntimeExports.jsx(EncryptedDataBlock, {}) });
+    }
+    if (isExpiredMarker(value)) {
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Metadata", children: jsxRuntimeExports.jsx(ExpiredFieldBlock, {}) });
+    }
+    return jsxRuntimeExports.jsx(RunMetadataCard, { metadata: value });
   },
   input: (value, context) => {
     if (isEncryptedMarker(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Input", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
@@ -2109,51 +2151,51 @@ const attributeToDisplayFn = {
       if ((context == null ? void 0 : context.stepName) && isDoStreamStep(context.stepName)) {
         const conversation = extractConversation(args);
         if (conversation && conversation.length > 0) {
-          return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(ConversationWithTabs, { conversation, args }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "This Value", children: JsonBlock(thisVal) })] });
+          return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(ConversationWithTabs, { conversation, args }), hasClosureVars && jsxRuntimeExports.jsx(Collapsible, { label: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(Collapsible, { label: "This Value", children: JsonBlock(thisVal) })] });
         }
       }
       if (!hasArgs && !hasClosureVars && !hasThisVal) {
-        return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
+        return jsxRuntimeExports.jsx(Collapsible, { label: "Input (no data)", disabled: true });
       }
-      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "Context", children: JsonBlock(thisVal) })] });
+      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Collapsible, { label: "Input", children: Array.isArray(args) ? args.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(Collapsible, { label: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(Collapsible, { label: "Context", children: JsonBlock(thisVal) })] });
     }
     if (!hasDisplayContent(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Input (no data)", disabled: true });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(value) ? value.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Input", children: Array.isArray(value) ? value.map((v, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)) : JsonBlock(value) });
   },
   output: (value) => {
     if (isEncryptedMarker(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Output", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (!hasDisplayContent(value))
       return null;
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Output", children: JsonBlock(value) });
   },
   error: (value) => {
     if (isEncryptedMarker(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
     if (isStructuredError(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Error", defaultOpen: true, children: JsonBlock(value) });
   },
   eventData: (value) => {
     if (isEncryptedMarker(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Event Data", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Event Data", defaultOpen: true, children: JsonBlock(value) });
   },
   errorCode: (value) => {
     if (typeof value !== "string" || value.length === 0)
@@ -2173,6 +2215,7 @@ const selfHeaderedAttributes = /* @__PURE__ */ new Set([
   "input",
   "output",
   "error",
+  "metadata",
   "attributes",
   "eventData"
 ]);
@@ -2194,9 +2237,9 @@ const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }
   if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
     const label = attribute === "eventData" ? "Event Data" : attribute === "output" ? "Output" : "Input";
     if (decryptCtx == null ? void 0 : decryptCtx.hasEncryptedData) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: label, defaultOpen: attribute === "eventData", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+      return jsxRuntimeExports.jsx(Collapsible, { label, defaultOpen: attribute === "eventData", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: label });
+    return jsxRuntimeExports.jsx(Collapsible, { label });
   }
   const displayFn = attributeToDisplayFn[attribute];
   if (!displayFn) {
@@ -2282,12 +2325,13 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
     isDecrypting,
     hasEncryptedData: outerDecryptCtx == null ? void 0 : outerDecryptCtx.hasEncryptedData
   } : outerDecryptCtx;
-  return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3", children: [orderedBasicAttributes.map((attribute) => {
+  return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs(CollapsibleRoot, { defaultOpen: true, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { children: "Metadata" }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "mt-0 mb-2", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [orderedBasicAttributes.map((attribute) => {
     var _a;
     const displayValue = (_a = attributeToDisplayFn[attribute]) == null ? void 0 : _a.call(attributeToDisplayFn, displayData[attribute]);
     const isCopyableBasicAttribute = copyableBasicAttributes.has(attribute) && typeof displayValue === "string";
-    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: getAttributeDisplayName(attribute) }), isCopyableBasicAttribute ? jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-[13px] font-mono text-gray-1000", title: displayValue, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: displayValue, className: "text-right", style: { gridTemplateColumns: "minmax(0, 1fr)" } }), jsxRuntimeExports.jsx(CopyButton, { copyText: displayValue, ariaLabel: `Copy ${getAttributeDisplayName(attribute)}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: "text-right text-label-13 font-mono", children: displayValue })] }, attribute);
-  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[55%]" })] }) })] }), error ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : resolvedAttributes.length > 0 ? jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) }) : null] }) }) }) });
+    const label = getAttributeDisplayName(attribute);
+    return jsxRuntimeExports.jsx(DetailMonoKeyValueRow, { label, value: displayValue, copyText: isCopyableBasicAttribute ? displayValue : void 0 }, attribute);
+  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 py-0.5", children: [jsxRuntimeExports.jsx("span", { className: "text-label-13 text-gray-900", children: "Resume" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[55%]" })] })] }) })] }), error ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : resolvedAttributes.length > 0 ? resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) : null] }) }) }) });
 };
 const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set(["step_failed", "step_retrying"]);
 const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
@@ -2369,17 +2413,17 @@ function EventItem({ event, onLoadEventData, encryptionKey, showSeparateEventOcc
     second: "numeric"
   });
   const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: displayedCreatedAtTime })] }), onToggle: canHaveData ? (open) => {
+  return jsxRuntimeExports.jsxs(CollapsibleRoot, { variant: "card", onOpenChange: canHaveData ? (open) => {
     if (open)
       handleExpand();
-  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [showSeparateEventOccurrenceTimestamps && occurredAt && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Occurred" }), jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: formatEventTimestamp(occurredAt) }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
+  } : void 0, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { className: "px-3 py-2", children: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: displayedCreatedAtTime })] }) }), jsxRuntimeExports.jsxs(CollapsibleContent, { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [showSeparateEventOccurrenceTimestamps && occurredAt && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Occurred" }), jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: formatEventTimestamp(occurredAt) }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] })] });
 }
 function hasOnlyExpiredFields(data, eventType) {
   if (data === null || typeof data !== "object" || Array.isArray(data)) {
     return false;
   }
   const record = data;
-  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const refKeys = getEventDataRefFields(eventType);
   const presentKeys = refKeys.filter((k) => k in record);
   return presentKeys.length > 0 && presentKeys.every((k) => isExpiredMarker(record[k]));
 }
@@ -2412,9 +2456,9 @@ function EventsList({ events, isLoading = false, error, onLoadEventData, onStrea
   const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => getEffectiveEventDate(a).getTime() - getEffectiveEventDate(b).getTime()), [events]);
   const hasEvents = sortedEvents.length > 0 && !error;
   if (!hasEvents && !isLoading) {
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", disabled: true });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Events", disabled: true });
   }
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps }, event.eventId)) }) }) }) });
+  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(CollapsibleRoot, { defaultOpen: true, children: [jsxRuntimeExports.jsx(CollapsibleTrigger, { children: "Events" }), jsxRuntimeExports.jsx(CollapsibleContent, { className: "mb-0", children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps }, event.eventId)) }) })] }) }) });
 }
 const hasField = (value, key) => key in value;
 const RESOURCES_WITH_FETCHED_DETAIL = /* @__PURE__ */ new Set(["run", "step", "sleep"]);
@@ -2781,6 +2825,257 @@ const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 te
 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;
+const MAIN_MIN_WIDTH = 400;
+const PANEL_WIDTH_STORAGE_KEY = "workflow-trace-detail-panel-width";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function computeMaxPanelWidth(availableWidth) {
+  if (availableWidth <= 0)
+    return PANEL_HARD_MAX_WIDTH;
+  return Math.min(Math.max(availableWidth - MAIN_MIN_WIDTH, 0), PANEL_HARD_MAX_WIDTH);
+}
+function clampPanelWidth(width, availableWidth) {
+  return clamp(width, PANEL_MIN_WIDTH, computeMaxPanelWidth(availableWidth));
+}
+function readStoredPanelWidth() {
+  if (typeof window === "undefined")
+    return PANEL_DEFAULT_WIDTH;
+  try {
+    const raw = window.localStorage.getItem(PANEL_WIDTH_STORAGE_KEY);
+    const value = raw ? Number(raw) : Number.NaN;
+    if (!Number.isFinite(value))
+      return PANEL_DEFAULT_WIDTH;
+    return clamp(value, PANEL_MIN_WIDTH, PANEL_HARD_MAX_WIDTH);
+  } catch {
+    return PANEL_DEFAULT_WIDTH;
+  }
+}
+function writeStoredPanelWidth(width) {
+  if (typeof window === "undefined")
+    return;
+  try {
+    window.localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, String(Math.round(width)));
+  } catch {
+  }
+}
+function DraggableBorder({ element, position, onWidthChange, onReset, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuenow": ariaValueNow }) {
+  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const pointerIdRef = reactExports.useRef(null);
+  const startXRef = reactExports.useRef(0);
+  const startWidthRef = reactExports.useRef(0);
+  const pendingWidthRef = reactExports.useRef(0);
+  const rafRef = reactExports.useRef(null);
+  const movedRef = reactExports.useRef(false);
+  const lastDragEndAtRef = reactExports.useRef(0);
+  reactExports.useEffect(() => {
+    return () => {
+      if (rafRef.current)
+        cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  reactExports.useEffect(() => {
+    if (!isDragging)
+      return;
+    const previous = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    return () => {
+      document.body.style.userSelect = previous;
+    };
+  }, [isDragging]);
+  const stopDrag = () => {
+    pointerIdRef.current = null;
+    setIsDragging(false);
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      if (movedRef.current)
+        onWidthChange(pendingWidthRef.current);
+    }
+    if (movedRef.current) {
+      movedRef.current = false;
+      lastDragEndAtRef.current = performance.now();
+    }
+  };
+  const handlePointerDown = (e) => {
+    if (pointerIdRef.current !== null)
+      return;
+    const el = element.current;
+    if (!el)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    pointerIdRef.current = e.pointerId;
+    startXRef.current = e.clientX;
+    startWidthRef.current = el.offsetWidth;
+    movedRef.current = false;
+    setIsDragging(true);
+  };
+  const handlePointerMove = (e) => {
+    if (pointerIdRef.current !== e.pointerId)
+      return;
+    if (Math.abs(e.clientX - startXRef.current) > 4) {
+      movedRef.current = true;
+    }
+    const delta = position === "left" ? startXRef.current - e.clientX : e.clientX - startXRef.current;
+    pendingWidthRef.current = startWidthRef.current + delta;
+    if (!rafRef.current) {
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        onWidthChange(pendingWidthRef.current);
+      });
+    }
+  };
+  const handlePointerEnd = (e) => {
+    if (pointerIdRef.current !== e.pointerId)
+      return;
+    stopDrag();
+  };
+  const handleLostPointerCapture = (e) => {
+    if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) {
+      return;
+    }
+    stopDrag();
+  };
+  const handleDoubleClick = () => {
+    if (movedRef.current || performance.now() - lastDragEndAtRef.current < 500) {
+      return;
+    }
+    onReset == null ? void 0 : onReset();
+  };
+  const handleKeyDown = (e) => {
+    const el = element.current;
+    if (!el)
+      return;
+    const step = e.shiftKey ? 64 : 16;
+    const grow = position === "left" ? 1 : -1;
+    let next = null;
+    if (e.key === "ArrowLeft") {
+      next = el.offsetWidth + grow * step;
+    } else if (e.key === "ArrowRight") {
+      next = el.offsetWidth - grow * step;
+    } else if (e.key === "Home" && ariaValueMin !== void 0) {
+      next = ariaValueMin;
+    } else if (e.key === "End" && ariaValueMax !== void 0) {
+      next = ariaValueMax;
+    }
+    if (next === null)
+      return;
+    e.preventDefault();
+    onWidthChange(next);
+  };
+  return jsxRuntimeExports.jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuenow": ariaValueNow, tabIndex: 0, className: cn("group absolute inset-y-0 z-10 w-[17px] cursor-col-resize touch-none outline-none", position === "left" ? "-left-2" : "-right-2"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerEnd, onPointerCancel: handlePointerEnd, onLostPointerCapture: handleLostPointerCapture, onDoubleClick: handleDoubleClick, onKeyDown: handleKeyDown, children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-transparent transition-colors delay-75 duration-100", "group-hover:bg-gray-500 group-focus-visible:bg-[var(--ds-focus-color)]", isDragging && "bg-gray-500") }) });
+}
+function useElementWidth(ref, enabled = true) {
+  const [width, setWidth] = reactExports.useState(0);
+  reactExports.useLayoutEffect(() => {
+    if (!enabled)
+      return;
+    const el = ref.current;
+    if (!el)
+      return;
+    setWidth(Math.round(el.getBoundingClientRect().width));
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(Math.round((entry == null ? void 0 : entry.contentRect.width) ?? 0));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+  return width;
+}
+const DETAIL_PANEL_ID = "trace-detail-panel";
+function useSelectedSpanInfo() {
+  const { activeSpan } = useActiveSpan();
+  const sidebar = useSidebarData();
+  return reactExports.useMemo(() => {
+    var _a, _b;
+    if (!activeSpan)
+      return null;
+    const resource = (_a = activeSpan.attributes) == null ? void 0 : _a.resource;
+    const rawEvents = filterSpanRawEvents(sidebar.events, resource, activeSpan.spanId);
+    return {
+      data: (_b = activeSpan.attributes) == null ? void 0 : _b.data,
+      resource,
+      spanId: activeSpan.spanId,
+      rawEvents
+    };
+  }, [activeSpan, sidebar]);
+}
+function TraceDetailPanel({ containerRef, onNavigateToSpan, onClose }) {
+  const { activeSpan, activeSpanId, spans } = useActiveSpan();
+  const sidebar = useSidebarData();
+  const selectedSpan = useSelectedSpanInfo();
+  const isOpen = Boolean(activeSpan);
+  const [storedWidth, setStoredWidth] = reactExports.useState(() => readStoredPanelWidth());
+  const containerWidth = useElementWidth(containerRef, isOpen);
+  const asideRef = reactExports.useRef(null);
+  const handleResize = reactExports.useCallback((next) => {
+    const clamped = clampPanelWidth(next, containerWidth);
+    setStoredWidth(clamped);
+    writeStoredPanelWidth(clamped);
+  }, [containerWidth]);
+  const panelWidth = clampPanelWidth(storedWidth, containerWidth);
+  const panelMaxWidth = Math.max(PANEL_MIN_WIDTH, computeMaxPanelWidth(containerWidth));
+  const { prevSpanId, nextSpanId } = reactExports.useMemo(() => {
+    var _a, _b;
+    if (!activeSpanId)
+      return { prevSpanId: null, nextSpanId: null };
+    const i = spans.findIndex((s) => s.spanId === activeSpanId);
+    if (i === -1)
+      return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: ((_a = spans[i - 1]) == null ? void 0 : _a.spanId) ?? null,
+      nextSpanId: ((_b = spans[i + 1]) == null ? void 0 : _b.spanId) ?? null
+    };
+  }, [activeSpanId, spans]);
+  const handleSelectPrev = reactExports.useCallback(() => {
+    if (prevSpanId)
+      onNavigateToSpan(prevSpanId);
+  }, [prevSpanId, onNavigateToSpan]);
+  const handleSelectNext = reactExports.useCallback(() => {
+    if (nextSpanId)
+      onNavigateToSpan(nextSpanId);
+  }, [nextSpanId, onNavigateToSpan]);
+  reactExports.useEffect(() => {
+    if (!isOpen)
+      return;
+    const onKeyDown = (e) => {
+      if (e.key !== "j" && e.key !== "k" && e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+        return;
+      }
+      const target = e.target;
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || (target == null ? void 0 : target.isContentEditable)) {
+        return;
+      }
+      const targetId = e.key === "k" || e.key === "ArrowUp" ? prevSpanId : nextSpanId;
+      if (targetId) {
+        e.preventDefault();
+        onNavigateToSpan(targetId);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, prevSpanId, nextSpanId, onNavigateToSpan]);
+  const selectedSpanName = reactExports.useMemo(() => {
+    var _a, _b;
+    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
+      return "Details";
+    const data = selectedSpan.data;
+    if (selectedSpan.resource === "hook") {
+      return data.token ?? data.hookId;
+    }
+    const stepName = data.stepName;
+    const workflowName = data.workflowName;
+    return (stepName ? (_a = parseStepName(stepName)) == null ? void 0 : _a.shortName : void 0) ?? (workflowName ? (_b = parseWorkflowName(workflowName)) == null ? void 0 : _b.shortName : void 0) ?? stepName ?? workflowName ?? data.hookId ?? "Details";
+  }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.resource]);
+  if (!activeSpan)
+    return null;
+  return jsxRuntimeExports.jsxs("aside", { ref: asideRef, id: DETAIL_PANEL_ID, className: "relative flex flex-col h-full max-h-full shrink-0 bg-background-100 border-l border-gray-alpha-400", style: { width: panelWidth }, children: [jsxRuntimeExports.jsx(DraggableBorder, { element: asideRef, position: "left", onWidthChange: handleResize, onReset: () => handleResize(PANEL_DEFAULT_WIDTH), "aria-label": "Resize span details panel", "aria-controls": DETAIL_PANEL_ID, "aria-valuemin": PANEL_MIN_WIDTH, "aria-valuemax": panelMaxWidth, "aria-valuenow": Math.min(Math.max(Math.round(panelWidth), PANEL_MIN_WIDTH), panelMaxWidth) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 py-[7.5px]", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrev, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNext, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: onClose, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, fetchSpanDetail: sidebar.fetchSpanDetail, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan, showSeparateEventOccurrenceTimestamps: sidebar.showSeparateEventOccurrenceTimestamps }) }) })] });
+}
 const WorkflowIcon = () => {
   return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", style: { color: "currentColor" }, viewBox: "0 0 16 16", width: "16", children: jsxRuntimeExports.jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) });
 };
@@ -2812,10 +3107,8 @@ function getEventStyle(resource, isErrored) {
   };
 }
 const EventRow = ({ span, isSelected, isDimmed, onSelectSpan }) => {
-  var _a;
   const durationMs = getSpanDurationMs(span);
-  const workflowStatus = (_a = span.attributes.data) == null ? void 0 : _a.status;
-  const isErrored = span.status.code === 2 || workflowStatus === "failed";
+  const isErrored = isSpanErrored(span);
   const { icon: Icon, className: tagClassName } = getEventStyle(span.resource, isErrored);
   return jsxRuntimeExports.jsx("li", { className: cn("relative overflow-clip group transition-opacity", ROW_HEIGHT_CLASS, isDimmed && "opacity-35"), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 text-label-14", children: jsxRuntimeExports.jsx(MiddleTruncate, { value: span.name }) })] }), jsxRuntimeExports.jsx("div", { className: "ml-2 shrink-0", children: jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDurationPrecise(durationMs) }) })] }) }) });
 };
@@ -2827,22 +3120,20 @@ const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
     paddingBottom: (spans.length - end) * ROW_HEIGHT_PX
   }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId)) });
 };
-const GUTTER_PX = 1;
-const MIN_PX = 50;
-const DEFAULT_START_PX = 340;
-function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX, startHeader, endHeader, scrollContainerRef }) {
+function SplitPane({ children, className, startHeader, endHeader, scrollContainerRef }) {
   const parts = reactExports.Children.toArray(children);
   if (parts.length !== 2) {
     throw new Error("SplitPane expects exactly two children");
   }
   const [start, end] = parts;
-  const [startPx, setStartPx] = reactExports.useState(defaultStartWidth);
+  const [startPx, setStartPx] = reactExports.useState(DEFAULT_START_PX);
   const [isDragging, setIsDragging] = reactExports.useState(false);
   const containerRef = reactExports.useRef(null);
   const gutterRef = reactExports.useRef(null);
   const rafRef = reactExports.useRef(null);
-  const pendingPx = reactExports.useRef(defaultStartWidth);
+  const pendingPx = reactExports.useRef(DEFAULT_START_PX);
   const pointerIdRef = reactExports.useRef(null);
+  const containerWidth = useElementWidth(containerRef);
   reactExports.useEffect(() => {
     return () => {
       if (rafRef.current)
@@ -2916,13 +3207,10 @@ function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX,
       rafRef.current = null;
     }
   };
-  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
-  const hasHeaders = startHeader != null || endHeader != null;
+  const effectiveStartPx = containerWidth > 0 ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx)) : startPx;
+  const colTemplate = paneColTemplate(effectiveStartPx);
   const gutter = jsxRuntimeExports.jsx("div", { ref: gutterRef, className: "relative z-20 isolate flex shrink-0 cursor-col-resize justify-center", onPointerDown: handlePointerDown, onLostPointerCapture: handleLostPointerCapture, children: jsxRuntimeExports.jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }) });
-  if (hasHeaders) {
-    return jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full min-h-0", className), children: [jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [jsxRuntimeExports.jsx("div", { children: startHeader }), jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), jsxRuntimeExports.jsx("div", { children: endHeader })] }), jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn("grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", isDragging && "select-none"), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] });
-  }
-  return jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn("grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto", isDragging && "select-none", className), style: { gridTemplateColumns: colTemplate, height: "100%" }, children: [start, gutter, end] });
+  return jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full min-h-0", className), children: [jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [jsxRuntimeExports.jsx("div", { children: startHeader }), jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), jsxRuntimeExports.jsx("div", { children: endHeader })] }), jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn("grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", isDragging && "select-none"), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] });
 }
 const hint = "_hint_1dmsq_3";
 const styles = {
@@ -3029,33 +3317,15 @@ function useAnimatedViewport(initial) {
   reactExports.useEffect(() => cancel, [cancel]);
   return { viewport, setViewport, animateTo };
 }
-function useSelectedSpanInfo() {
-  const { activeSpan } = useActiveSpan();
-  const sidebar = useSidebarData();
-  return reactExports.useMemo(() => {
-    var _a, _b;
-    if (!activeSpan)
-      return null;
-    const resource = (_a = activeSpan.attributes) == null ? void 0 : _a.resource;
-    const rawEvents = filterSpanRawEvents(sidebar.events, resource, activeSpan.spanId);
-    return {
-      data: (_b = activeSpan.attributes) == null ? void 0 : _b.data,
-      resource,
-      spanId: activeSpan.spanId,
-      rawEvents
-    };
-  }, [activeSpan, sidebar]);
-}
 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 NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
-  const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
-  const sidebar = useSidebarData();
-  const selectedSpan = useSelectedSpanInfo();
+  const { activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
   const reducedMotion = useReducedMotion();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
   const deferredSearchQuery = reactExports.useDeferredValue(searchQuery);
+  const paneRootRef = reactExports.useRef(null);
   const searchResult = reactExports.useMemo(() => searchSpans(trace.spans, deferredSearchQuery), [trace.spans, deferredSearchQuery]);
   const root = reactExports.useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
   const scrollContainerRef = reactExports.useRef(null);
@@ -3095,47 +3365,30 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   const resetZoom = reactExports.useCallback(() => {
     animateTo({ start: root.startTime, end: root.startTime + root.duration });
   }, [animateTo, root.startTime, root.duration]);
+  const clampToRoot = reactExports.useCallback((next) => clampViewportToRoot(next, root.startTime, root.endTime, MIN_VIEWPORT_MS), [root.startTime, root.endTime]);
   const handleRevealTime = reactExports.useCallback((timeMs) => {
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
     const { start, end } = viewportRef.current;
     const duration = end - start;
-    let newStart = timeMs - duration / 2;
-    let newEnd = timeMs + duration / 2;
-    if (newStart < rootS) {
-      newStart = rootS;
-      newEnd = rootS + duration;
-    }
-    if (newEnd > rootE) {
-      newEnd = rootE;
-      newStart = Math.max(rootS, rootE - duration);
-    }
-    animateTo({ start: newStart, end: newEnd });
-  }, [animateTo, root.startTime, root.duration]);
+    animateTo(clampToRoot({
+      start: timeMs - duration / 2,
+      end: timeMs + duration / 2
+    }));
+  }, [animateTo, clampToRoot]);
   const ZOOM_FACTOR = 0.5;
   const zoomBy = reactExports.useCallback((factor) => {
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
     setViewport((prev) => {
-      const prevDuration = prev.end - prev.start;
       const center = (prev.start + prev.end) / 2;
-      const newDuration = Math.max(MIN_VIEWPORT_MS, Math.min(rootD, prevDuration * factor));
-      let newStart = center - newDuration / 2;
-      let newEnd = center + newDuration / 2;
-      if (newStart < rootS) {
-        newStart = rootS;
-        newEnd = rootS + newDuration;
-      }
-      if (newEnd > rootE) {
-        newEnd = rootE;
-        newStart = Math.max(rootS, rootE - newDuration);
-      }
-      return { start: newStart, end: newEnd };
+      const newDuration = Math.max(MIN_VIEWPORT_MS, (prev.end - prev.start) * factor);
+      return clampToRoot({
+        start: center - newDuration / 2,
+        end: center + newDuration / 2
+      });
     });
-  }, [setViewport, root.startTime, root.duration]);
+  }, [setViewport, clampToRoot]);
   const zoomIn = reactExports.useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = reactExports.useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
+  const isAtMinZoom = viewDuration >= root.duration;
+  const isAtMaxZoom = viewDuration <= MIN_VIEWPORT_MS;
   const focusViewportOnSpan = reactExports.useCallback((spanId) => {
     const span = trace.spans.find((s) => s.spanId === spanId);
     if (!span)
@@ -3143,11 +3396,8 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
     const spanStart = getHighResInMs(span.startTime);
     const spanEnd = getHighResInMs(span.endTime);
     const spanDuration = spanEnd - spanStart;
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
-    if (spanDuration > rootD * 0.8) {
-      animateTo({ start: rootS, end: rootE });
+    if (spanDuration > root.duration * 0.8) {
+      animateTo({ start: root.startTime, end: root.endTime });
       return;
     }
     const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);
@@ -3158,18 +3408,15 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       newStart = center - MIN_VIEWPORT_MS / 2;
       newEnd = center + MIN_VIEWPORT_MS / 2;
     }
-    if (newStart < rootS) {
-      const duration = newEnd - newStart;
-      newStart = rootS;
-      newEnd = Math.min(rootE, rootS + duration);
-    }
-    if (newEnd > rootE) {
-      const duration = newEnd - newStart;
-      newEnd = rootE;
-      newStart = Math.max(rootS, rootE - duration);
-    }
-    animateTo({ start: newStart, end: newEnd });
-  }, [animateTo, trace.spans, root.startTime, root.duration]);
+    animateTo(clampToRoot({ start: newStart, end: newEnd }));
+  }, [
+    animateTo,
+    trace.spans,
+    root.startTime,
+    root.endTime,
+    root.duration,
+    clampToRoot
+  ]);
   const scrollSpanIntoView = reactExports.useCallback((spanId) => {
     var _a;
     const index = trace.spans.findIndex((s) => s.spanId === spanId);
@@ -3218,24 +3465,11 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   }, [setActiveSpan, scrollSpanIntoView, cancelPendingZoom, focusViewportOnSpan]);
   const [altHeld, setAltHeld] = reactExports.useState(false);
   reactExports.useEffect(() => {
-    const handleSidebarNavKey = (e) => {
-      const target = e.target;
-      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || (target == null ? void 0 : target.isContentEditable)) {
-        return;
-      }
-      const targetId = e.key === "k" ? prevSpanIdRef.current : nextSpanIdRef.current;
-      if (targetId) {
-        e.preventDefault();
-        navigateToSpanRef.current(targetId);
-      }
-    };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         handleClearActiveSpan();
       } else if (e.key === "Alt") {
         setAltHeld(true);
-      } else if (e.key === "j" || e.key === "k") {
-        handleSidebarNavKey(e);
       }
     };
     const onKeyUp = (e) => {
@@ -3259,7 +3493,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       return null;
     const absTime = viewport.start + hoverFraction * viewDuration;
     const offset = absTime - root.startTime;
-    return { fraction: hoverFraction, label: formatDuration(offset, true) };
+    return { fraction: hoverFraction, label: formatDurationPrecise(offset) };
   }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
   const handleTimelineMouseMove = reactExports.useCallback((e) => {
     const el = timelineRef.current;
@@ -3277,12 +3511,7 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
   }, []);
   reactExports.useEffect(() => {
     const el = timelineRef.current;
-    if (!el)
-      return;
-    const rootS = root.startTime;
-    const rootE = root.startTime + root.duration;
-    const rootD = root.duration;
-    if (rootD <= 0)
+    if (!el || root.duration <= 0)
       return;
     const onWheel = (e) => {
       const isZoomGesture = e.ctrlKey || e.metaKey;
@@ -3295,97 +3524,38 @@ function NewTraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
       if (contentWidth <= 0)
         return;
       if (isZoomGesture) {
-        let dy = e.deltaY;
-        if (e.deltaMode === 1)
-          dy *= 16;
         const cursorFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
-        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
-        const scaleFactor = 2 ** (dy / (isMouseWheel ? 200 : 60));
+        const scaleFactor = wheelZoomScaleFactor(e);
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
-          const newDuration = Math.max(MIN_VIEWPORT_MS, Math.min(rootD, prevDuration * scaleFactor));
-          let newStart = cursorTime - cursorFraction * newDuration;
-          let newEnd = newStart + newDuration;
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + newDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - newDuration);
-          }
-          return { start: newStart, end: newEnd };
+          const newDuration = Math.max(MIN_VIEWPORT_MS, Math.min(root.duration, prevDuration * scaleFactor));
+          return clampToRoot({
+            start: cursorTime - cursorFraction * newDuration,
+            end: cursorTime + (1 - cursorFraction) * newDuration
+          });
         });
       } else {
-        let dx = e.deltaX;
-        if (e.deltaMode === 1)
-          dx *= 16;
+        const dx = wheelDeltaToPixels(e.deltaX, e.deltaMode);
         setViewport((prev) => {
-          const prevDuration = prev.end - prev.start;
-          const panAmount = dx / contentWidth * prevDuration;
-          let newStart = prev.start + panAmount;
-          let newEnd = prev.end + panAmount;
-          if (newStart < rootS) {
-            newStart = rootS;
-            newEnd = rootS + prevDuration;
-          }
-          if (newEnd > rootE) {
-            newEnd = rootE;
-            newStart = Math.max(rootS, rootE - prevDuration);
-          }
-          return { start: newStart, end: newEnd };
+          const panAmount = dx / contentWidth * (prev.end - prev.start);
+          return clampToRoot({
+            start: prev.start + panAmount,
+            end: prev.end + panAmount
+          });
         });
       }
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, [root.startTime, root.duration, setViewport]);
-  const selectedSpanName = reactExports.useMemo(() => {
-    var _a, _b;
-    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
-      return "Details";
-    const data = selectedSpan.data;
-    if (selectedSpan.resource === "hook") {
-      return data.token ?? data.hookId;
-    }
-    const stepName = data.stepName;
-    const workflowName = data.workflowName;
-    return (stepName ? (_a = parseStepName(stepName)) == null ? void 0 : _a.shortName : void 0) ?? (workflowName ? (_b = parseWorkflowName(workflowName)) == null ? void 0 : _b.shortName : void 0) ?? stepName ?? workflowName ?? data.hookId ?? "Details";
-  }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.resource]);
-  const { prevSpanId, nextSpanId } = reactExports.useMemo(() => {
-    var _a, _b;
-    if (!activeSpanId)
-      return { prevSpanId: null, nextSpanId: null };
-    const i = trace.spans.findIndex((s) => s.spanId === activeSpanId);
-    if (i === -1)
-      return { prevSpanId: null, nextSpanId: null };
-    return {
-      prevSpanId: ((_a = trace.spans[i - 1]) == null ? void 0 : _a.spanId) ?? null,
-      nextSpanId: ((_b = trace.spans[i + 1]) == null ? void 0 : _b.spanId) ?? null
-    };
-  }, [activeSpanId, trace.spans]);
-  const handleSelectPrevSpan = reactExports.useCallback(() => {
-    if (prevSpanId)
-      navigateToSpan(prevSpanId);
-  }, [prevSpanId, navigateToSpan]);
-  const handleSelectNextSpan = reactExports.useCallback(() => {
-    if (nextSpanId)
-      navigateToSpan(nextSpanId);
-  }, [nextSpanId, navigateToSpan]);
-  const prevSpanIdRef = reactExports.useRef(prevSpanId);
-  const nextSpanIdRef = reactExports.useRef(nextSpanId);
-  const navigateToSpanRef = reactExports.useRef(navigateToSpan);
-  prevSpanIdRef.current = prevSpanId;
-  nextSpanIdRef.current = nextSpanId;
-  navigateToSpanRef.current = navigateToSpan;
-  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "relative grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { scrollContainerRef, startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
+  }, [root.duration, setViewport, clampToRoot]);
+  return jsxRuntimeExports.jsxs("div", { ref: paneRootRef, "data-pane": "pane-root", className: "relative flex w-full h-full max-h-full", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsx(Minimap, { spans: trace.spans, root, viewport, minViewportMs: MIN_VIEWPORT_MS, onViewportChange: setViewport, onAnimateTo: animateTo }), jsxRuntimeExports.jsxs(SplitPane, { scrollContainerRef, startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
     if (e.key === "Escape" && searchQuery) {
       e.preventDefault();
       e.stopPropagation();
       setSearchQuery("");
     }
-  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip, { children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, fetchSpanDetail: sidebar.fetchSpanDetail, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan, showSeparateEventOccurrenceTimestamps: sidebar.showSeparateEventOccurrenceTimestamps }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion })] });
+  }, 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: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, 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 }), jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion })] });
 }
 const NewTraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace = reactExports.useMemo(() => {
@@ -3430,7 +3600,7 @@ async function fetchResourceWithCorrelationId(env, resource, resourceId, options
 async function fetchSpanDetailResource(env, selection, options = {}) {
   const { resource, resourceId, runId } = selection;
   const { encryptionKey } = options;
-  const hydrate = async (value) => encryptionKey ? hydrateResourceIOWithKey(value, encryptionKey) : hydrateResourceIO(value);
+  const hydrate = async (value) => hydrateResourceIOAsync(value, encryptionKey);
   if (resource === "hook") {
     const result = await unwrapOrThrow(fetchHook(env, resourceId, "all"));
     return hydrate(result);
@@ -3445,11 +3615,8 @@ async function fetchSpanDetailResource(env, selection, options = {}) {
     const result = await unwrapOrThrow(
       fetchEvents(env, runId, { sortOrder: "asc", limit: 1e3, withData: true })
     );
-    const allEvents = result.data.map(
-      hydrateResourceIO
-    );
     const waitEvents = await Promise.all(
-      allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
+      result.data.filter((e) => e.correlationId === resourceId).map(hydrate)
     );
     const data2 = waitEventsToWaitEntity(waitEvents);
     if (data2 === null) {
@@ -4895,14 +5062,8 @@ function useEventsListData(env, runId, options = {}) {
   const encryptionKeyRef = reactExports.useRef(encryptionKey);
   encryptionKeyRef.current = encryptionKey;
   const hydrateEvents = reactExports.useCallback(async (rawEvents) => {
-    const hydrated = rawEvents.map(hydrateResourceIO);
     const key = encryptionKeyRef.current;
-    if (key) {
-      return Promise.all(
-        hydrated.map((ev) => hydrateResourceIOWithKey(ev, key))
-      );
-    }
-    return hydrated;
+    return Promise.all(rawEvents.map((ev) => hydrateResourceIOAsync(ev, key)));
   }, []);
   const fetchInitial = reactExports.useCallback(async () => {
     if (isFetchingRef.current) return;
@@ -4940,7 +5101,7 @@ function useEventsListData(env, runId, options = {}) {
   reactExports.useEffect(() => {
     if (!encryptionKey || events.length === 0) return;
     let cancelled = false;
-    Promise.all(events.map((ev) => hydrateResourceIOWithKey(ev, encryptionKey))).then((decrypted) => {
+    Promise.all(events.map((ev) => hydrateResourceIOAsync(ev, encryptionKey))).then((decrypted) => {
       if (!cancelled) setEvents(decrypted);
     }).catch(() => {
     });
@@ -5343,7 +5504,6 @@ function LiveStatus({ hasError, errorMessage }) {
 });
 function RunDetailView({
   runId,
-  // TODO: This should open the right sidebar within the trace viewer
   selectedId: _selectedId
 }) {
   var _a;
@@ -5421,7 +5581,10 @@ function RunDetailView({
       if (error2) {
         throw error2;
       }
-      const fullEvent = encryptionKeyRef.current ? await hydrateResourceIOWithKey(result, encryptionKeyRef.current) : hydrateResourceIO(result);
+      const fullEvent = await hydrateResourceIOAsync(
+        result,
+        encryptionKeyRef.current ?? void 0
+      );
       if ("eventData" in fullEvent) {
         return fullEvent.eventData;
       }
@@ -5437,7 +5600,10 @@ function RunDetailView({
       if (error2) {
         throw error2;
       }
-      const fullEvent = encryptionKeyRef.current ? await hydrateResourceIOWithKey(result, encryptionKeyRef.current) : hydrateResourceIO(result);
+      const fullEvent = await hydrateResourceIOAsync(
+        result,
+        encryptionKeyRef.current ?? void 0
+      );
       if ("eventData" in fullEvent) {
         return fullEvent.eventData;
       }
@@ -5586,8 +5752,8 @@ function RunDetailView({
   if (error && !runData) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { variant: "destructive", className: "m-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: "Error loading workflow run" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: error.message })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTitle, { children: getErrorTitle(error, "Error loading workflow run") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDescription, { children: getErrorMessage(error) })
     ] });
   }
   const workflowName = (_a = parseWorkflowName(run.workflowName)) == null ? void 0 : _a.shortName;