@workflow/web 5.0.0-beta.4 → 5.0.0-beta.41

package/build/client/assets/{run-detail-7Pj2mQLs.js → run-detail-vPCbZIXx.js}

@@ -1,7 +1,7 @@
-import { j as jsxRuntimeExports, r as reactExports, f as reactDomExports, C as ReactDOM, A as useNavigate, B as useSearchParams, z as Link, w as withComponentProps, G as useParams } from "./index-DQa-BExo.js";
-import { N as Copy, C as CircleAlert, O as parseStepName, z as parseWorkflowName, j as ChevronRight, p as Check, Q as ErrorCard, Z as Zap, S as Send, R as ResolveHookModal, U as Circle, X, M as ErrorBoundary, H as unwrapServerActionResult, u as unwrapOrThrow, W as WorkflowWebAPIError, V as useEscapeKeydown, s as composeEventHandlers, Y as useCallbackRef, _ as useLayoutEffect2, q as useControllableState, $ as useId, a0 as createContext2, t as Presence, w as createContextScope, l as hideOthers, m as ReactRemoveScroll, a1 as useFocusGuards, a2 as LAYOUT, a3 as wakeUpRun, r as resumeHook, A as Alert, c as AlertTitle, d as AlertDescription, a as Skeleton$1, a4 as RunActionsButtons, B as StatusBadge, e as CopyableText, b as RelativeTime, T as Tabs, J as TabsList, K as TabsTrigger, L as TabsContent, x as cancelRun, a5 as recreateRun } from "./workflow-graph-viewer-De9JQkZc.js";
-import { c as createLucideIcon, M as Spinner, h as useToast, N as Skeleton, O as DecryptClickContext, Y as Yr, U as isEncryptedMarker, W as formatDuration, X as DataInspector, _ as _r, Z as RunClickContext, $ as StreamClickContext, a0 as isExpiredMarker, a1 as isDoStreamStep, a2 as extractConversation, a3 as Lock, a4 as EVENT_DATA_REF_FIELDS, a5 as clsx, a6 as cn, a7 as getSpanDurationMs, a8 as getHighResInMs, a9 as ActiveSpanProvider, aa as useActiveSpan, ab as useSidebarDataOptional, ac as computeRootBounds, ad as computeTimeMarkers, ae as TIMELINE_PADDING_PX, af as Timeline, ag as TimelineHeader, ah as SidebarDataProvider, ai as hydrateResourceIOWithKey, aj as hydrateResourceIO, ak as fetchHook, l as fetchEvents, F as fetchRun, al as fetchStep, am as hasEncryptedFields, an as fetchStreams, ao as Slot, E as useComposedRefs, ap as Slottable, d as cn$1, aq as buttonVariants, ar as isEncryptedData, as as hydrateData, at as getWebRevivers, T as Tooltip, a as TooltipTrigger, b as TooltipContent, au as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, av as fetchEvent, aw as getEncryptionKeyForRun, t as toast, L as LoaderCircle, ax as StreamViewer } from "./mermaid-3ZIDBTTL-w46Kr90n.js";
-import { decrypt, importKey } from "./encryption-80GMP4r0.js";
+import { r as reactExports, j as jsxRuntimeExports, o as reactDomExports, D as ReactDOM, d as useNavigate, e as useSearchParams, c as Link, w as withComponentProps, G as useParams } from "./index-PFjW8YjQ.js";
+import { C as CircleAlert, O as parseStepName, B as parseWorkflowName, Q as ErrorCard, U as format, Z as Zap, S as Send, R as ResolveHookModal, q as ChevronUp, X, N as ErrorBoundary, V as Circle, u as unwrapOrThrow, W as WorkflowWebAPIError, I as unwrapServerActionResult, Y as useEscapeKeydown, t as composeEventHandlers, _ as useCallbackRef, $ as useLayoutEffect2, s as useControllableState, a0 as useId, a1 as createContext2, v as Presence, x as createContextScope, n as hideOthers, o as ReactRemoveScroll, a2 as useFocusGuards, a3 as LAYOUT, a4 as wakeUpRun, l as resumeHook, A as Alert, c as AlertTitle, g as getErrorTitle, d as AlertDescription, e as getErrorMessage, a as Skeleton$1, a5 as RunActionsButtons, F as StatusBadge, h as CopyableText, b as RelativeTime, T as Tabs, K as TabsList, L as TabsTrigger, M as TabsContent, a6 as cancelRun, a7 as recreateRun } from "./workflow-graph-viewer-t_fSwuwz.js";
+import { c as createLucideIcon, Y as cn, Z as CopyableDataBlock, $ as CollapsibleRoot, a0 as CollapsibleTrigger, a1 as CollapsibleContent, a2 as CopyButton, O as cva, a3 as RESERVED_ATTRIBUTE_KEY_PREFIX, a4 as Spinner, a5 as ContextCardProvider, h as useToast, a6 as Skeleton, a7 as DecryptClickContext, a8 as Yr, a9 as isEncryptedMarker, m as ChevronRight, aa as TimestampTooltip, ab as formatDuration, C as Check, l as Copy, ac as DataInspector, ad as _r, ae as isHookLifecycleEventType, af as isTerminalStepEventType, ag as isWaitEventType, ah as isStepEventType, ai as RunClickContext, aj as StreamClickContext, ak as Collapsible, al as isExpiredMarker, am as isDoStreamStep, an as extractConversation, ao as EncryptedDataBlock, ap as getEventDataRefFields, aq as hasEncryptedFields, ar as useSidebarDataOptional, as as isTerminalWorkflowRunStatus, at as clsx, au as useActiveSpan, av as useSidebarData, aw as Tooltip, ax as TooltipTrigger, ay as IconButton, az as TooltipContent, J as ChevronDown, aA as useRowWindow, aB as isSpanDimmedBySearch, aC as ROW_HEIGHT_PX, aD as getSpanDurationMs, aE as isSpanErrored, aF as formatDurationPrecise, aG as TooltipProvider, aH as ActiveSpanProvider, aI as useReducedMotion, aJ as searchSpans, aK as computeRootBounds, aL as computeTimeMarkers, aM as clampViewportToRoot, aN as getHighResInMs, aO as scrollRowIntoView, aP as TIMELINE_PADDING_PX, aQ as Minimap, aR as Timeline, aS as TimelineHeader, aT as wheelZoomScaleFactor, aU as wheelDeltaToPixels, aV as SidebarDataProvider, aW as fetchHook, n as fetchEvents, aX as hydrateResourceIOAsync, N as fetchRun, aY as fetchStep, aZ as hydrateResourceIO, a_ as fetchStreams, a$ as apiBase, b0 as Slot, L as useComposedRefs, b1 as Slottable, e as cn$1, b2 as buttonVariants, b3 as fetchEvent, b4 as fetchEventsByCorrelationId, b5 as isEncryptedData, b6 as hydrateData, b7 as decrypt, b8 as deriveRunPayloadKeys, b9 as getWebRevivers, T as Tooltip$1, a as TooltipTrigger$1, b as TooltipContent$1, ba as LIVE_UPDATE_INTERVAL_MS$1, u as useServerConfig, bb as getEncryptionKeyForRun, t as toast, bc as StreamViewerSkeleton, bd as Lock, be as StreamViewer } from "./mermaid-3ZIDBTTL-DchhEfRL.js";
+import { A as ArrowUpRight } from "./arrow-up-right-jWH-UQH9.js";
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -76,40 +76,457 @@ const __iconNode = [
   ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
 ];
 const ZoomOut = createLucideIcon("zoom-out", __iconNode);
+const WORKFLOW_ULID_BODY = "[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}";
+const STEP_ID_PATTERN = new RegExp(`^step_(${WORKFLOW_ULID_BODY})$`, "i");
+const WAIT_ID_PATTERN = new RegExp(`^wait_(${WORKFLOW_ULID_BODY})$`, "i");
+const HOOK_ID_PATTERN = new RegExp(`^hook_(${WORKFLOW_ULID_BODY})$`, "i");
+const EVENT_ID_PATTERN = new RegExp(`^evnt_(${WORKFLOW_ULID_BODY})$`, "i");
+const WORKFLOW_ID_PREFIX_PATTERN = /^(step_|wait_|hook_|evnt_|wrun_)/i;
+function matchPrefixedId(pattern, prefix, kind, query) {
+  const match = query.match(pattern);
+  if (!match) {
+    return null;
+  }
+  return { kind, id: `${prefix}_${match[1].toUpperCase()}` };
+}
+function parseExactWorkflowSearchId(query) {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return null;
+  }
+  return matchPrefixedId(STEP_ID_PATTERN, "step", "step", trimmed) ?? matchPrefixedId(WAIT_ID_PATTERN, "wait", "wait", trimmed) ?? matchPrefixedId(HOOK_ID_PATTERN, "hook", "hook", trimmed) ?? matchPrefixedId(EVENT_ID_PATTERN, "evnt", "event", trimmed);
+}
+function looksLikeWorkflowIdSearchInput(query) {
+  const trimmed = query.trim();
+  if (!WORKFLOW_ID_PREFIX_PATTERN.test(trimmed)) {
+    return false;
+  }
+  return /\d/.test(trimmed);
+}
+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
+        });
+      }
+    }
+    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 isReservedAttributeKey(key) {
+  return key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX);
+}
+const rowValueVariants = cva("min-w-0 flex-1 truncate text-right text-copy-13 text-gray-1000", {
+  variants: {
+    variant: {
+      default: "",
+      mono: "font-mono"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const rowCopyValueVariants = cva("flex min-w-0 flex-1 items-center justify-end gap-1 overflow-hidden text-copy-13 text-gray-1000", {
+  variants: {
+    variant: {
+      default: "",
+      mono: "font-mono"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function DetailKeyValueRowBase({ label, value, copyText, href, 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: [href ? jsxRuntimeExports.jsxs("a", { href, target: "_blank", rel: "noreferrer", className: cn(rowValueVariants({ variant }), "flex min-w-0 items-center gap-0.5 hover:underline"), children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: copyText, className: "min-w-0 text-right", style: { gridTemplateColumns: "minmax(0, 1fr)" } }), jsxRuntimeExports.jsx(ArrowUpRight, { "aria-hidden": true, className: "h-3 w-3 shrink-0" })] }) : 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: href ? jsxRuntimeExports.jsx("a", { href, target: "_blank", rel: "noreferrer", className: "hover:underline", children: value }) : 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 (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+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 isStructuredErrorWithStack(value) {
-  return value != null && typeof value === "object" && "stack" in value && typeof value.stack === "string";
+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 toast2 = useToast();
-  const stack = value.stack;
+  const stack = typeof value.stack === "string" ? value.stack : void 0;
   const message = typeof value.message === "string" ? value.message : void 0;
-  const copyText = message ? `${message}
+  const body = stack ?? message ?? "";
+  const title = message ? deriveTitle(message) : deriveTitle(body);
+  const copyText = message && stack && !stack.includes(message) ? `${message}
 
-${stack}` : stack;
+${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("button", { type: "button", "aria-label": "Copy error", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95", style: {
-    borderColor: "var(--ds-red-400)",
-    background: "var(--ds-red-100)",
-    color: "var(--ds-red-900)"
-  }, onClick: () => {
-    navigator.clipboard.writeText(copyText).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), message && jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2 px-3 py-2.5 pr-10", style: {
+  }, 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", style: { marginTop: 1 } }), jsxRuntimeExports.jsx("p", { className: "text-xs font-semibold m-0 break-words", children: message })] }), jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
+  }, children: [jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 shrink-0" }), jsxRuntimeExports.jsx("p", {
+    className: "text-label-12 font-semibold m-0 truncate",
+    // The full message or stack is in the body below; the header just
+    // shows the first line, single-line, with overflow
+    // ellipsised so a long title doesn't push the copy button or
+    // wrap into the framed hint/docs lines.
+    title: message,
+    children: title
+  })] }), body && jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-label-12-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
     color: "var(--ds-red-900)",
     background: "var(--ds-red-200)"
-  }, children: stack })] });
+  }, 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..." }) {
@@ -154,190 +571,7 @@ function MenuDropdown({ options, value, onChange }) {
     setOpen(false);
   }, children: option.label }, option.value)) })] });
 }
-const TIME_UNITS = [
-  { unit: "year", ms: 31536e6 },
-  { unit: "month", ms: 2628e6 },
-  { unit: "day", ms: 864e5 },
-  { unit: "hour", ms: 36e5 },
-  { unit: "minute", ms: 6e4 },
-  { unit: "second", ms: 1e3 }
-];
-function formatTimeDifference(diff) {
-  let remaining = Math.abs(diff);
-  const result = [];
-  for (const { unit, ms } of TIME_UNITS) {
-    const value = Math.floor(remaining / ms);
-    if (value > 0 || result.length > 0) {
-      result.push(`${value} ${unit}${value !== 1 ? "s" : ""}`);
-      remaining %= ms;
-    }
-    if (result.length === 3)
-      break;
-  }
-  return result.join(", ");
-}
-function useTimeAgo(date) {
-  const [timeAgo, setTimeAgo] = reactExports.useState("");
-  reactExports.useEffect(() => {
-    const update = () => {
-      const diff = Date.now() - date;
-      const formatted = formatTimeDifference(diff);
-      setTimeAgo(formatted ? `${formatted} ago` : "Just now");
-    };
-    update();
-    const timer = setInterval(update, 1e3);
-    return () => clearInterval(timer);
-  }, [date]);
-  return timeAgo;
-}
-function ZoneDateTimeRow({ date, zone }) {
-  var _a;
-  const dateObj = new Date(date);
-  const formattedZone = ((_a = new Intl.DateTimeFormat("en-US", {
-    timeZone: zone,
-    timeZoneName: "short"
-  }).formatToParts(dateObj).find((part) => part.type === "timeZoneName")) == null ? void 0 : _a.value) || zone;
-  const formattedDate = dateObj.toLocaleString("en-US", {
-    timeZone: zone,
-    year: "numeric",
-    month: "long",
-    day: "numeric"
-  });
-  const formattedTime = dateObj.toLocaleTimeString("en-US", {
-    timeZone: zone,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12
-  }, children: [jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [jsxRuntimeExports.jsx("div", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: 16,
-    padding: "0 6px",
-    backgroundColor: "var(--ds-gray-200)",
-    borderRadius: 3,
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontWeight: 500,
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedZone }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    color: "var(--ds-gray-1000)",
-    whiteSpace: "nowrap"
-  }, children: formattedDate })] }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedTime })] });
-}
-function TimestampTooltipContent({ date }) {
-  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const timeAgo = useTimeAgo(date);
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 12,
-    minWidth: 300,
-    padding: "12px 14px"
-  }, children: [jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)"
-  }, children: timeAgo }), jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date, zone: localTimezone })] })] });
-}
-const TOOLTIP_WIDTH = 330;
-const VIEWPORT_PAD = 8;
-function TooltipPortal({ triggerRect, onMouseEnter, onMouseLeave, date }) {
-  const tooltipRef = reactExports.useRef(null);
-  const [style, setStyle] = reactExports.useState({
-    position: "fixed",
-    zIndex: 9999,
-    visibility: "hidden"
-  });
-  reactExports.useEffect(() => {
-    const placement = triggerRect.top > 240 ? "above" : "below";
-    const centerX = triggerRect.left + triggerRect.width / 2;
-    const el = tooltipRef.current;
-    const w = el ? el.offsetWidth : TOOLTIP_WIDTH;
-    const h = el ? el.offsetHeight : 100;
-    let left = centerX - w / 2;
-    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - w - VIEWPORT_PAD));
-    let top;
-    if (placement === "above") {
-      top = triggerRect.top - h - 6;
-      if (top < VIEWPORT_PAD) {
-        top = triggerRect.bottom + 6;
-      }
-    } else {
-      top = triggerRect.bottom + 6;
-      if (top + h > window.innerHeight - VIEWPORT_PAD) {
-        top = triggerRect.top - h - 6;
-      }
-    }
-    setStyle({
-      position: "fixed",
-      left,
-      top,
-      zIndex: 9999,
-      borderRadius: 10,
-      border: "1px solid var(--ds-gray-alpha-200)",
-      backgroundColor: "var(--ds-background-100)",
-      boxShadow: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
-      visibility: "visible"
-    });
-  }, [triggerRect]);
-  return reactDomExports.createPortal(
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip hover zone
-    jsxRuntimeExports.jsx("div", { ref: tooltipRef, onMouseEnter, onMouseLeave, style, children: jsxRuntimeExports.jsx(TimestampTooltipContent, { date }) }),
-    document.body
-  );
-}
-function TimestampTooltip({ date, children }) {
-  const [open, setOpen] = reactExports.useState(false);
-  const [triggerRect, setTriggerRect] = reactExports.useState(null);
-  const triggerRef = reactExports.useRef(null);
-  const closeTimer = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (closeTimer.current)
-        clearTimeout(closeTimer.current);
-    };
-  }, []);
-  const ts = date == null ? null : typeof date === "number" ? date : new Date(date).getTime();
-  if (ts == null || Number.isNaN(ts))
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
-  const cancelClose = () => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  };
-  const scheduleClose = () => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), 120);
-  };
-  const handleOpen = () => {
-    cancelClose();
-    if (triggerRef.current) {
-      setTriggerRect(triggerRef.current.getBoundingClientRect());
-    }
-    setOpen(true);
-  };
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip trigger
-    jsxRuntimeExports.jsxs("span", { ref: triggerRef, onMouseEnter: handleOpen, onMouseLeave: scheduleClose, style: { display: "inline-flex" }, children: [children, open && triggerRect && jsxRuntimeExports.jsx(TooltipPortal, { triggerRect, onMouseEnter: cancelClose, onMouseLeave: scheduleClose, date: ts })] })
-  );
-}
-const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
+const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set([
   "step_failed",
   "step_retrying",
   "run_failed",
@@ -358,6 +592,18 @@ function formatEventTime(date) {
     hour12: false
   }) + "." + date.getMilliseconds().toString().padStart(3, "0");
 }
+function parseEventDate(value) {
+  if (value == null)
+    return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function getEffectiveEventDate$1(event) {
+  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+}
+function getEffectiveEventTime(event) {
+  return getEffectiveEventDate$1(event).getTime();
+}
 function formatEventType(eventType) {
   return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
@@ -371,6 +617,9 @@ function getStatusDotColor(eventType) {
   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)";
   }
@@ -395,27 +644,34 @@ function buildNameMaps(events, run) {
   return { correlationNameMap, workflowName };
 }
 function buildDurationMap(events) {
+  const chronological = [...events].sort((a, b) => getEffectiveEventTime(a) - getEffectiveEventTime(b));
   const createdTimes = /* @__PURE__ */ new Map();
+  const firstStartedTimes = /* @__PURE__ */ new Map();
   const startedTimes = /* @__PURE__ */ new Map();
   const durations = /* @__PURE__ */ new Map();
-  for (const event of events) {
-    const ts = new Date(event.createdAt).getTime();
+  for (const event of chronological) {
+    const ts = getEffectiveEventTime(event);
     const key = event.correlationId ?? "__run__";
     const type = event.eventType;
     if (type === "step_created" || type === "run_created") {
-      createdTimes.set(key, ts);
-    }
-    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
-      startedTimes.set(key, ts);
       if (!createdTimes.has(key)) {
         createdTimes.set(key, ts);
       }
-      const createdAt = createdTimes.get(key);
-      const info = durations.get(key) ?? {};
-      if (createdAt !== void 0) {
-        info.queued = ts - createdAt;
+    }
+    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
+      startedTimes.set(key, ts);
+      if (!firstStartedTimes.has(key)) {
+        firstStartedTimes.set(key, ts);
+        if (!createdTimes.has(key)) {
+          createdTimes.set(key, ts);
+        }
+        const createdAt = createdTimes.get(key);
+        const info = durations.get(key) ?? {};
+        if (createdAt !== void 0) {
+          info.queued = ts - createdAt;
+        }
+        durations.set(key, info);
       }
-      durations.set(key, info);
     }
     if (type === "step_completed" || type === "step_failed" || type === "run_completed" || type === "run_failed" || type === "run_cancelled" || type === "workflow_completed" || type === "workflow_failed" || type === "wait_completed" || type === "hook_disposed") {
       const startedAt = startedTimes.get(key);
@@ -438,7 +694,9 @@ function hasEncryptedValues(data) {
   return false;
 }
 function isRunLevel(eventType) {
-  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed";
+  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed" || // attr_set carries a dedup correlationId rather than a child entity ID,
+  // so it groups and labels with the run itself.
+  eventType === "attr_set";
 }
 const GUTTER_WIDTH = 36;
 const LANE_X = 20;
@@ -560,14 +818,14 @@ function deepParseJson(value) {
   return value;
 }
 function extractStructuredError(data, eventType) {
-  if (!eventType || !ERROR_EVENT_TYPES$1.has(eventType))
+  if (!eventType || !ERROR_EVENT_TYPES.has(eventType))
     return null;
   if (data == null || typeof data !== "object")
     return null;
   const record = data;
-  if (isStructuredErrorWithStack(record.error))
+  if (isStructuredError(record.error))
     return record.error;
-  if (isStructuredErrorWithStack(record))
+  if (isStructuredError(record))
     return record;
   return null;
 }
@@ -606,13 +864,22 @@ function PayloadBlock({ data, eventType }) {
   if (structuredError) {
     return jsxRuntimeExports.jsx("div", { className: "p-2", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value: structuredError }) });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
+  if (eventType === "attr_set") {
+    return jsxRuntimeExports.jsx(AttrSetEventBlock, { data: cleaned });
+  }
+  if (eventType === "run_cancelled") {
+    const cancelReason = cleaned != null && typeof cleaned === "object" && typeof cleaned.cancelReason === "string" ? cleaned.cancelReason : null;
+    if (cancelReason) {
+      return jsxRuntimeExports.jsxs("div", { className: "p-2 text-label-12", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-900)" }, children: "Reason: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", children: cancelReason })] });
+    }
+  }
+  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-button-12 hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
 }
 const SORT_OPTIONS = [
   { value: "desc", label: "Newest" },
   { value: "asc", label: "Oldest" }
 ];
-function RowsSkeleton() {
+function RowsSkeleton({ showSeparateEventOccurrenceTimestamps = false }) {
   return jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 16 }, (_, i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0", style: { height: 40 }, children: [jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch flex items-center", style: { width: GUTTER_WIDTH }, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "absolute",
     left: 8,
@@ -624,9 +891,9 @@ function RowsSkeleton() {
     height: i % 4 === 0 ? 8 : 6,
     borderRadius: "50%",
     marginLeft: i % 4 === 0 ? 5 : 6
-  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
+  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
 }
-function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected }) {
+function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false, showSeparateEventOccurrenceTimestamps = false }) {
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadedEventData, setLoadedEventData] = reactExports.useState(cachedEventData);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -639,6 +906,8 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   const rowGroupKey = isRunLevel(event.eventType) ? "__run__" : event.correlationId ?? void 0;
   const statusDotColor = getStatusDotColor(event.eventType);
   const createdAt = new Date(event.createdAt);
+  const occurredAt = parseEventDate(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate$1(event);
   const hasExistingEventData = "eventData" in event && event.eventData != null;
   const isRun = isRunLevel(event.eventType);
   const eventName = isRun ? workflowName ?? "-" : event.correlationId ? correlationNameMap.get(event.correlationId) ?? "-" : "-";
@@ -646,7 +915,7 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   const durationInfo = durationKey ? durationMap.get(durationKey) : void 0;
   const hasActive = activeGroupKey !== void 0;
   const isRelated = rowGroupKey !== void 0 && rowGroupKey === activeGroupKey;
-  const isDimmed = hasActive && !isRelated;
+  const isDimmed = hasActive && !isRelated && !suppressGroupDimming;
   const isPulsing = hasActive && isRelated;
   const showBranch = hasActive && isRelated && !isRun;
   const showLaneLine = selectedGroupRange !== null && index >= selectedGroupRange.first && index <= selectedGroupRange.last;
@@ -737,12 +1006,12 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
   return jsxRuntimeExports.jsxs("div", { "data-event-id": event.eventId, onMouseEnter: () => onHoverGroup(rowGroupKey), onMouseLeave: () => onHoverGroup(void 0), children: [jsxRuntimeExports.jsxs("div", { role: "button", tabIndex: 0, onClick: handleRowClick, onKeyDown: (e) => {
     if (e.key === "Enter" || e.key === " ")
       handleRowClick();
-  }, className: "w-full text-left flex items-center gap-0 text-[13px] hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
+  }, className: "w-full text-left flex items-center gap-0 text-label-13 hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
     border: "1px solid var(--ds-gray-400)"
   }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
     color: "var(--ds-gray-900)",
     transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-  } }) }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: createdAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(createdAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
+  } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: occurredAt ? jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(occurredAt) }) }) : "-" }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: displayedCreatedAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(displayedCreatedAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
     position: "relative",
     display: "inline-flex",
     width: 6,
@@ -765,13 +1034,14 @@ function EventRow$1({ event, index, isFirst, isLast, isExpanded, onToggleExpand,
     borderColor: "var(--ds-gray-alpha-200)",
     opacity: contentOpacity,
     transition: "opacity 150ms"
-  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-xs flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-label-12 flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-label-12", style: {
     borderColor: "var(--ds-red-400)",
     backgroundColor: "var(--ds-red-100)",
     color: "var(--ds-red-900)"
-  }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
+  }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-label-12", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
 }
-function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false }) {
+function EventListViewInner({ events, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch, showSeparateEventOccurrenceTimestamps = false }) {
+  const toast2 = useToast();
   const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
   const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
   const handleSortOrderChange = reactExports.useCallback((order) => {
@@ -781,28 +1051,40 @@ function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, is
       setInternalSortOrder(order);
     }
   }, [onSortOrderChange]);
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [searchResults, setSearchResults] = reactExports.useState(null);
+  const [searchResultsTruncated, setSearchResultsTruncated] = reactExports.useState(false);
+  const [searchError, setSearchError] = reactExports.useState(null);
+  const [searchLoading, setSearchLoading] = reactExports.useState(false);
+  const [searchNotFound, setSearchNotFound] = reactExports.useState(false);
+  const searchRequestRef = reactExports.useRef(0);
+  const virtuosoRef = reactExports.useRef(null);
+  const parsedSearchId = reactExports.useMemo(() => parseExactWorkflowSearchId(searchQuery), [searchQuery]);
+  const isExactSearchActive = searchResults !== null;
   const sortedEvents = reactExports.useMemo(() => {
-    if (!events || events.length === 0)
+    const sourceEvents = isExactSearchActive ? searchResults : events ?? [];
+    if (sourceEvents.length === 0)
       return [];
     const dir = effectiveSortOrder === "desc" ? -1 : 1;
-    return [...events].sort((a, b) => dir * (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
-  }, [events, effectiveSortOrder]);
+    return [...sourceEvents].sort((a, b) => dir * (getEffectiveEventTime(a) - getEffectiveEventTime(b)));
+  }, [events, effectiveSortOrder, isExactSearchActive, searchResults]);
   const hasEncryptedInlineData = reactExports.useMemo(() => {
-    if (!events)
+    const sourceEvents = isExactSearchActive ? searchResults : events;
+    if (!sourceEvents)
       return false;
-    for (const event of events) {
+    for (const event of sourceEvents) {
       const ed = event.eventData;
       if (hasEncryptedValues(ed))
         return true;
     }
     return false;
-  }, [events]);
+  }, [events, isExactSearchActive, searchResults]);
   const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] = reactExports.useState(false);
   const handleEncryptedDataDetected = reactExports.useCallback(() => {
     setFoundEncryptedInLazyData(true);
   }, []);
   const hasEncryptedData = hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
-  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(events ?? null, run ?? null), [events, run]);
+  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(isExactSearchActive ? searchResults : events ?? null, run ?? null), [events, isExactSearchActive, run, searchResults]);
   const durationMap = reactExports.useMemo(() => buildDurationMap(sortedEvents), [sortedEvents]);
   const [selectedGroupKey, setSelectedGroupKey] = reactExports.useState(void 0);
   const [hoveredGroupKey, setHoveredGroupKey] = reactExports.useState(void 0);
@@ -870,123 +1152,273 @@ function EventListView({ events, run, onLoadEventData, hasMoreEvents = false, is
     }
     return first >= 0 ? { first, last } : null;
   }, [activeGroupKey, sortedEvents]);
-  const [searchQuery, setSearchQuery] = reactExports.useState("");
-  const virtuosoRef = reactExports.useRef(null);
-  const searchIndex = reactExports.useMemo(() => {
-    const entries = [];
-    for (let i = 0; i < sortedEvents.length; i++) {
-      const ev = sortedEvents[i];
-      const isRun = isRunLevel(ev.eventType);
-      const name = isRun ? workflowName ?? "" : ev.correlationId ? correlationNameMap.get(ev.correlationId) ?? "" : "";
-      entries.push({
-        fields: [
-          ev.eventId,
-          ev.correlationId ?? "",
-          ev.eventType,
-          formatEventType(ev.eventType),
-          name
-        ].map((f) => f.toLowerCase()),
-        groupKey: ev.correlationId ?? (isRun ? "__run__" : void 0),
-        eventId: ev.eventId,
-        index: i
-      });
-    }
-    return entries;
-  }, [sortedEvents, correlationNameMap, workflowName]);
   reactExports.useEffect(() => {
-    var _a;
-    const q = searchQuery.trim().toLowerCase();
-    if (!q) {
+    const trimmed = searchQuery.trim();
+    if (!trimmed) {
+      searchRequestRef.current += 1;
+      setSearchResults(null);
+      setSearchResultsTruncated(false);
+      setSearchError(null);
+      setSearchLoading(false);
+      setSearchNotFound(false);
       setSelectedGroupKey(void 0);
       return;
     }
-    let bestMatch = null;
-    let bestScore = 0;
-    for (const entry of searchIndex) {
-      for (const field of entry.fields) {
-        if (field && field.includes(q)) {
-          const score = q.length / field.length;
-          if (score > bestScore) {
-            bestScore = score;
-            bestMatch = entry;
+    const parsed = parseExactWorkflowSearchId(trimmed);
+    if (!parsed || !onExactIdSearch) {
+      setSearchResults(null);
+      setSearchLoading(false);
+      setSearchNotFound(false);
+      return;
+    }
+    const requestId = ++searchRequestRef.current;
+    setSearchLoading(true);
+    setSearchNotFound(false);
+    setSearchError(null);
+    const abortController = new AbortController();
+    const timer = setTimeout(() => {
+      void (async () => {
+        var _a;
+        try {
+          const results = await onExactIdSearch(parsed.id, parsed.kind, abortController.signal);
+          if (abortController.signal.aborted || searchRequestRef.current !== requestId) {
+            return;
+          }
+          if (results.status === "error") {
+            setSearchResults([]);
+            setSearchResultsTruncated(false);
+            setSearchNotFound(false);
+            setSearchError(results.message);
+            setSelectedGroupKey(void 0);
+            return;
+          }
+          if (results.status === "not_found" || results.status === "ok" && results.events.length === 0) {
+            setSearchResults([]);
+            setSearchResultsTruncated(false);
+            setSearchNotFound(true);
+            setSearchError(null);
+            setSelectedGroupKey(void 0);
+            return;
+          }
+          setSearchResults(results.events);
+          setSearchResultsTruncated(Boolean(results.truncated));
+          setSearchNotFound(false);
+          setSearchError(null);
+          setSelectedGroupKey(parsed.kind === "event" ? (() => {
+            const first = results.events[0];
+            if (!first)
+              return void 0;
+            return isRunLevel(first.eventType) ? "__run__" : first.correlationId ?? void 0;
+          })() : parsed.id);
+          (_a = virtuosoRef.current) == null ? void 0 : _a.scrollToIndex({
+            index: 0,
+            align: "start",
+            behavior: "smooth"
+          });
+        } catch {
+          if (abortController.signal.aborted || searchRequestRef.current !== requestId) {
+            return;
+          }
+          setSearchResults([]);
+          setSearchResultsTruncated(false);
+          setSearchNotFound(false);
+          setSearchError("Failed to search events. Try again.");
+          setSelectedGroupKey(void 0);
+        } finally {
+          if (searchRequestRef.current === requestId && !abortController.signal.aborted) {
+            setSearchLoading(false);
           }
         }
-      }
+      })();
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+      abortController.abort();
+    };
+  }, [searchQuery, onExactIdSearch]);
+  const handleSearchKeyDown = reactExports.useCallback((event) => {
+    if (event.key !== "Enter") {
+      return;
     }
-    if (bestMatch) {
-      setSelectedGroupKey(bestMatch.groupKey);
-      (_a = virtuosoRef.current) == null ? void 0 : _a.scrollToIndex({
-        index: bestMatch.index,
-        align: "center",
-        behavior: "smooth"
-      });
+    const trimmed = searchQuery.trim();
+    if (!trimmed || parseExactWorkflowSearchId(trimmed) || !onExactIdSearch || !looksLikeWorkflowIdSearchInput(trimmed)) {
+      return;
     }
-  }, [searchQuery, searchIndex]);
+    toast2.info("Enter a full step ID, wait ID, hook ID, or event ID");
+  }, [searchQuery, onExactIdSearch, toast2]);
   const hasHadEventsRef = reactExports.useRef(false);
   if (sortedEvents.length > 0) {
     hasHadEventsRef.current = true;
   }
-  const isInitialLoad = isLoading && !hasHadEventsRef.current;
-  const isRefetching = isLoading && hasHadEventsRef.current && sortedEvents.length === 0;
-  if (isInitialLoad) {
-    return jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("div", { style: { padding: 6 }, children: jsxRuntimeExports.jsx(Skeleton, { style: { height: 40, borderRadius: 6 } }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 h-10 border-b flex-shrink-0", style: { borderColor: "var(--ds-gray-alpha-200)" }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 40 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 72 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 44 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 92 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 60 } }) })] }), jsxRuntimeExports.jsx(RowsSkeleton, {})] });
+  const isInitialLoad = isLoading && !hasHadEventsRef.current;
+  const isRefetching = isLoading && hasHadEventsRef.current && sortedEvents.length === 0;
+  if (isInitialLoad) {
+    return jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("div", { style: { padding: 6 }, children: jsxRuntimeExports.jsx(Skeleton, { style: { height: 40, borderRadius: 6 } }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 h-10 border-b flex-shrink-0", style: { borderColor: "var(--ds-gray-alpha-200)" }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 40 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 72 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 44 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 92 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: 60 } }) })] }), jsxRuntimeExports.jsx(RowsSkeleton, {})] });
+  }
+  return jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("style", { children: `@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}` }), jsxRuntimeExports.jsxs("div", { style: {
+    padding: 6,
+    backgroundColor: "var(--ds-background-100)",
+    display: "flex",
+    gap: 6
+  }, children: [jsxRuntimeExports.jsxs("label", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    boxShadow: "0 0 0 1px var(--ds-gray-alpha-400)",
+    background: "var(--ds-background-100)",
+    height: 40,
+    flex: 1,
+    minWidth: 0
+  }, children: [jsxRuntimeExports.jsx("div", { style: {
+    width: 40,
+    height: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--ds-gray-800)",
+    flexShrink: 0
+  }, children: jsxRuntimeExports.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsxRuntimeExports.jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntimeExports.jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), jsxRuntimeExports.jsx("input", { type: "search", placeholder: "Search by step ID, wait ID, hook ID, or event ID…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: handleSearchKeyDown, disabled: !onExactIdSearch, title: onExactIdSearch ? void 0 : "Exact ID search is unavailable in this view.", style: {
+    marginLeft: -16,
+    paddingInline: 12,
+    fontFamily: "inherit",
+    fontSize: 14,
+    background: "transparent",
+    border: "none",
+    outline: "none",
+    height: 40,
+    width: "100%",
+    opacity: onExactIdSearch ? 1 : 0.5,
+    cursor: onExactIdSearch ? "text" : "not-allowed"
+  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-label-13 font-medium h-10 border-b flex-shrink-0", style: {
+    borderColor: "var(--ds-gray-alpha-200)",
+    color: "var(--ds-gray-900)",
+    backgroundColor: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Occurred" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Created" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching || searchLoading ? jsxRuntimeExports.jsx(RowsSkeleton, { showSeparateEventOccurrenceTimestamps }) : sortedEvents.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-copy-14", style: { color: "var(--ds-gray-700)" }, children: searchNotFound && searchQuery.trim() ? `No events found for ${searchQuery.trim()}` : searchError ? searchError : parsedSearchId && searchQuery.trim() && !onExactIdSearch ? "Exact ID search is unavailable in this view." : "No events found" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+    if (isExactSearchActive || !hasMoreEvents || isLoadingMoreEvents) {
+      return;
+    }
+    void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
+  }, itemContent: (index) => {
+    const ev = sortedEvents[index];
+    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive, showSeparateEventOccurrenceTimestamps });
+  }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-label-12", style: {
+    borderColor: "var(--ds-gray-alpha-200)",
+    color: "var(--ds-gray-900)",
+    backgroundColor: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsx("span", { children: isExactSearchActive ? searchError ? searchError : searchNotFound ? `No events found for ${searchQuery.trim()}` : `${sortedEvents.length} event${sortedEvents.length !== 1 ? "s" : ""} for ${searchQuery.trim()}${searchResultsTruncated ? " (results may be truncated)" : ""}` : `${sortedEvents.length} event${sortedEvents.length !== 1 ? "s" : ""} loaded` }), !isExactSearchActive && hasMoreEvents && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto", children: jsxRuntimeExports.jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents()) }) }) })] })] }) });
+}
+function EventListView(props) {
+  return jsxRuntimeExports.jsx(ContextCardProvider, { children: jsxRuntimeExports.jsx(EventListViewInner, { ...props }) });
+}
+function ConversationView({ messages }) {
+  if (messages.length === 0) {
+    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
+  }
+  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
+}
+function MessageBubble({ message }) {
+  const role = message.role;
+  const parts = parseContent(message.content);
+  const style = getRoleStyle(role);
+  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
+    backgroundColor: style.bg,
+    borderColor: style.border
+  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
+    borderColor: style.border,
+    color: style.label
+  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
+}
+function ContentPart({ part, role }) {
+  if (part.type === "text") {
+    if (!part.text)
+      return null;
+    if (role === "assistant") {
+      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
+    }
+    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
+  }
+  if (part.type === "tool-call") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-purple-100)",
+      borderColor: "var(--ds-purple-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
+  }
+  if (part.type === "tool-result") {
+    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
+      backgroundColor: "var(--ds-green-100)",
+      borderColor: "var(--ds-green-300)"
+    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
+  }
+  return null;
+}
+function getRoleStyle(role) {
+  switch (role) {
+    case "user":
+      return {
+        bg: "var(--ds-blue-100)",
+        border: "var(--ds-blue-300)",
+        label: "var(--ds-blue-700)"
+      };
+    case "assistant":
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+    case "system":
+      return {
+        bg: "var(--ds-amber-100)",
+        border: "var(--ds-amber-300)",
+        label: "var(--ds-amber-700)"
+      };
+    case "tool":
+      return {
+        bg: "var(--ds-green-50)",
+        border: "var(--ds-green-300)",
+        label: "var(--ds-green-700)"
+      };
+    default:
+      return {
+        bg: "var(--ds-gray-100)",
+        border: "var(--ds-gray-300)",
+        label: "var(--ds-gray-700)"
+      };
+  }
+}
+function parseContent(content) {
+  if (typeof content === "string") {
+    return [{ type: "text", text: content }];
   }
-  if (!isLoading && (!events || events.length === 0)) {
-    return jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: "var(--ds-gray-700)" }, children: "No events found" });
+  if (Array.isArray(content)) {
+    return content.map((part) => {
+      if (typeof part === "string") {
+        return { type: "text", text: part };
+      }
+      if ((part == null ? void 0 : part.type) === "text") {
+        return { type: "text", text: String(part.text ?? "") };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-call") {
+        return {
+          type: "tool-call",
+          toolName: part.toolName,
+          input: part.input
+        };
+      }
+      if ((part == null ? void 0 : part.type) === "tool-result") {
+        return {
+          type: "tool-result",
+          toolName: part.toolName,
+          output: part.output
+        };
+      }
+      return { type: "text", text: "" };
+    });
   }
-  return jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("style", { children: `@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}` }), jsxRuntimeExports.jsxs("div", { style: {
-    padding: 6,
-    backgroundColor: "var(--ds-background-100)",
-    display: "flex",
-    gap: 6
-  }, children: [jsxRuntimeExports.jsxs("label", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 6,
-    boxShadow: "0 0 0 1px var(--ds-gray-alpha-400)",
-    background: "var(--ds-background-100)",
-    height: 40,
-    flex: 1,
-    minWidth: 0
-  }, children: [jsxRuntimeExports.jsx("div", { style: {
-    width: 40,
-    height: 40,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "var(--ds-gray-800)",
-    flexShrink: 0
-  }, children: jsxRuntimeExports.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsxRuntimeExports.jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntimeExports.jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), jsxRuntimeExports.jsx("input", { type: "search", placeholder: "Search by name, event type, or ID…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
-    marginLeft: -16,
-    paddingInline: 12,
-    fontFamily: "inherit",
-    fontSize: 14,
-    background: "transparent",
-    border: "none",
-    outline: "none",
-    height: 40,
-    width: "100%"
-  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0", style: {
-    borderColor: "var(--ds-gray-alpha-200)",
-    color: "var(--ds-gray-900)",
-    backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Time" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching ? jsxRuntimeExports.jsx(RowsSkeleton, {}) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
-    if (!hasMoreEvents || isLoadingMoreEvents) {
-      return;
-    }
-    void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
-  }, itemContent: (index) => {
-    const ev = sortedEvents[index];
-    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index, isFirst: index === 0, isLast: index === sortedEvents.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected });
-  }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs", style: {
-    borderColor: "var(--ds-gray-alpha-200)",
-    color: "var(--ds-gray-900)",
-    backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsxs("span", { children: [sortedEvents.length, " event", sortedEvents.length !== 1 ? "s" : "", " loaded"] }), hasMoreEvents && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto", children: jsxRuntimeExports.jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents()) }) }) })] })] }) });
+  return [];
 }
 function shouldShowVerticalLine(eventType) {
-  if (eventType === "hook_created" || eventType === "hook_received" || eventType === "hook_disposed") {
+  if (isHookLifecycleEventType(eventType)) {
     return true;
   }
   return false;
@@ -1037,12 +1469,20 @@ const MARKER_EVENT_TYPES = /* @__PURE__ */ new Set([
   "step_failed",
   "run_failed",
   "wait_created",
-  "wait_completed"
+  "wait_completed",
+  "attr_set"
 ]);
-function convertEventsToSpanEvents(events, filterTypes = true) {
+const getEventTimestamp = (event) => {
+  const value = (event == null ? void 0 : event.occurredAt) ?? (event == null ? void 0 : event.createdAt);
+  if (!value)
+    return void 0;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+function convertEventsToSpanEvents(events, filterTypes = true, options = {}) {
   return events.filter((event) => filterTypes ? MARKER_EVENT_TYPES.has(event.eventType) : true).map((event) => ({
     name: event.eventType,
-    timestamp: dateToOtelTime(event.createdAt),
+    timestamp: dateToOtelTime(options.preferOccurredAt ? getEventTimestamp(event) ?? event.createdAt : event.createdAt),
     attributes: {
       eventId: event.eventId,
       correlationId: event.correlationId,
@@ -1062,9 +1502,9 @@ const waitEventsToWaitEntity = (events) => {
   return {
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
-    createdAt: startEvent.createdAt,
+    createdAt: getEventTimestamp(startEvent) ?? startEvent.createdAt,
     resumeAt: ((_a = startEvent.eventData) == null ? void 0 : _a.resumeAt) ? new Date(startEvent.eventData.resumeAt) : void 0,
-    completedAt: completedEvent == null ? void 0 : completedEvent.createdAt
+    completedAt: getEventTimestamp(completedEvent)
   };
 };
 function waitToSpan(events, maxEndTime, fallbackEndTime = maxEndTime) {
@@ -1121,16 +1561,16 @@ const stepEventsToStepEntity = (events) => {
         status = "running";
         attempt += 1;
         if (!startedAt)
-          startedAt = e.createdAt;
+          startedAt = getEventTimestamp(e) ?? e.createdAt;
         completedAt = void 0;
         break;
       case "step_completed":
         status = "completed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_failed":
         status = "failed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_retrying":
         status = "pending";
@@ -1147,8 +1587,8 @@ const stepEventsToStepEntity = (events) => {
     stepName: ((_a = createdEvent == null ? void 0 : createdEvent.eventData) == null ? void 0 : _a.stepName) ?? "",
     status,
     attempt,
-    createdAt: anchorEvent.createdAt,
-    updatedAt: (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
+    createdAt: getEventTimestamp(anchorEvent) ?? anchorEvent.createdAt,
+    updatedAt: getEventTimestamp(lastEvent) ?? (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
     startedAt,
     completedAt,
     specVersion: anchorEvent.specVersion
@@ -1165,13 +1605,20 @@ function stepToSpan(stepEvents, maxEndTime) {
     data: step
   };
   const resource = "step";
-  const endTime = new Date(step.completedAt ?? maxEndTime);
-  const events = convertEventsToSpanEvents(stepEvents, false);
-  const spanStartTime = new Date(step.createdAt);
+  const events = convertEventsToSpanEvents(stepEvents, false, {
+    preferOccurredAt: true
+  });
+  const spanStartEvent = stepEvents.find((event) => event.eventType === "step_created") ?? stepEvents[0];
+  const spanStartTime = getEventTimestamp(spanStartEvent) ?? new Date(step.createdAt);
   let activeStartTime = step.startedAt ? new Date(step.startedAt) : void 0;
   const firstStartEvent = stepEvents.find((event) => event.eventType === "step_started");
   if (firstStartEvent) {
-    activeStartTime = new Date(firstStartEvent.createdAt);
+    activeStartTime = getEventTimestamp(firstStartEvent) ?? new Date(firstStartEvent.createdAt);
+  }
+  let endTime = new Date(maxEndTime);
+  if (step.completedAt) {
+    const completedEvent = stepEvents.slice().reverse().find((event) => isTerminalStepEventType(event.eventType));
+    endTime = getEventTimestamp(completedEvent) ?? new Date(step.completedAt);
   }
   return {
     spanId: String(step.stepId),
@@ -1193,7 +1640,7 @@ function stepToSpan(stepEvents, maxEndTime) {
   };
 }
 const hookEventsToHookEntity = (events) => {
-  var _a, _b;
+  var _a;
   const createdEvent = events.find((event) => event.eventType === "hook_created");
   if (!createdEvent) {
     return null;
@@ -1205,10 +1652,10 @@ const hookEventsToHookEntity = (events) => {
     hookId: createdEvent.correlationId,
     runId: createdEvent.runId,
     token: (_a = createdEvent.eventData) == null ? void 0 : _a.token,
-    createdAt: createdEvent.createdAt,
+    createdAt: getEventTimestamp(createdEvent) ?? createdEvent.createdAt,
     receivedCount: receivedEvents.length,
-    lastReceivedAt: (lastReceivedEvent == null ? void 0 : lastReceivedEvent.createdAt) || void 0,
-    disposedAt: ((_b = disposedEvents.at(-1)) == null ? void 0 : _b.createdAt) || void 0
+    lastReceivedAt: getEventTimestamp(lastReceivedEvent),
+    disposedAt: getEventTimestamp(disposedEvents.at(-1))
   };
 };
 function hookToSpan(hookEvents, maxEndTime) {
@@ -1220,7 +1667,7 @@ function hookToSpan(hookEvents, maxEndTime) {
   const endTime = hook.disposedAt || maxEndTime;
   return {
     spanId: String(hook.hookId),
-    name: String(hook.hookId),
+    name: hook.token ?? String(hook.hookId),
     kind: 1,
     // INTERNAL span kind
     resource: "hook",
@@ -1241,15 +1688,26 @@ function hookToSpan(hookEvents, maxEndTime) {
 function runToSpan(run, runEvents, nowTime) {
   var _a;
   const now = nowTime ?? /* @__PURE__ */ new Date();
+  const runCreatedEvent = runEvents.find((event) => event.eventType === "run_created");
+  const runStartedEvent = runEvents.find((event) => event.eventType === "run_started");
+  const terminalEvent = runEvents.slice().reverse().find((event) => event.eventType === "run_completed" || event.eventType === "run_failed" || event.eventType === "run_cancelled");
+  const spanStartTime = getEventTimestamp(runCreatedEvent) ?? new Date(run.createdAt);
+  const activeStartTime = getEventTimestamp(runStartedEvent) ?? (run.startedAt ? new Date(run.startedAt) : void 0);
+  const completedAt = getEventTimestamp(terminalEvent) ?? run.completedAt ?? void 0;
+  const endTime = completedAt ?? now;
   const { input: _i, output: _o, error: _e, ...runIdentity } = run;
   const attributes = {
     resource: "run",
-    data: runIdentity
+    data: {
+      ...runIdentity,
+      createdAt: spanStartTime,
+      startedAt: activeStartTime,
+      completedAt
+    }
   };
-  const spanStartTime = new Date(run.createdAt);
-  const activeStartTime = run.startedAt ? new Date(run.startedAt) : void 0;
-  const endTime = run.completedAt ?? now;
-  const events = convertEventsToSpanEvents(runEvents, false);
+  const events = convertEventsToSpanEvents(runEvents, false, {
+    preferOccurredAt: true
+  });
   return {
     spanId: String(run.runId),
     name: String(((_a = parseWorkflowName(run.workflowName)) == null ? void 0 : _a.shortName) ?? "?"),
@@ -1269,9 +1727,15 @@ function runToSpan(run, runEvents, nowTime) {
     activeStartTime: activeStartTime && activeStartTime.getTime() > spanStartTime.getTime() ? dateToOtelTime(activeStartTime) : void 0
   };
 }
-const isStepEvent = (eventType) => eventType.startsWith("step_");
-const isTimerEvent = (eventType) => eventType === "wait_created" || eventType === "wait_completed";
-const isHookLifecycleEvent = (eventType) => eventType === "hook_received" || eventType === "hook_created" || eventType === "hook_disposed";
+const isRunLevelEvent = (event) => !event.correlationId || !isWaitEventType(event.eventType) && !isHookLifecycleEventType(event.eventType) && !isStepEventType(event.eventType);
+function filterSpanRawEvents(events, resource, spanId) {
+  if (resource === "run") {
+    return events.filter(isRunLevelEvent);
+  }
+  if (!spanId)
+    return [];
+  return events.filter((e) => e.correlationId === spanId);
+}
 function pushEvent(map, correlationId, event) {
   const existing = map.get(correlationId);
   if (existing) {
@@ -1291,15 +1755,15 @@ function groupEventsByCorrelation(events) {
       runLevelEvents.push(event);
       continue;
     }
-    if (isTimerEvent(event.eventType)) {
+    if (isWaitEventType(event.eventType)) {
       pushEvent(timerEvents, correlationId, event);
       continue;
     }
-    if (isHookLifecycleEvent(event.eventType)) {
+    if (isHookLifecycleEventType(event.eventType)) {
       pushEvent(hookEvents, correlationId, event);
       continue;
     }
-    if (isStepEvent(event.eventType)) {
+    if (isStepEventType(event.eventType)) {
       pushEvent(eventsByStepId, correlationId, event);
       continue;
     }
@@ -1310,7 +1774,7 @@ function groupEventsByCorrelation(events) {
 function computeLatestKnownTime(events, run) {
   let latest = new Date(run.createdAt).getTime();
   for (const event of events) {
-    const t = new Date(event.createdAt).getTime();
+    const t = (getEventTimestamp(event) ?? new Date(event.createdAt)).getTime();
     if (t > latest)
       latest = t;
   }
@@ -1366,150 +1830,86 @@ function buildTrace(run, events, now) {
     knownDurationMs: Math.max(0, knownDurationMs)
   };
 }
-function ConversationView({ messages }) {
-  if (messages.length === 0) {
-    return jsxRuntimeExports.jsx("div", { className: "text-center py-8 text-[11px]", style: { color: "var(--ds-gray-600)" }, children: "No messages" });
-  }
-  return jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 p-3", children: messages.map((message, index) => jsxRuntimeExports.jsx(MessageBubble, { message }, index)) });
-}
-function MessageBubble({ message }) {
-  const role = message.role;
-  const parts = parseContent(message.content);
-  const style = getRoleStyle(role);
-  return jsxRuntimeExports.jsxs("div", { className: "rounded-md border text-[11px]", style: {
-    backgroundColor: style.bg,
-    borderColor: style.border
-  }, children: [jsxRuntimeExports.jsx("div", { className: "px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide", style: {
-    borderColor: style.border,
-    color: style.label
-  }, children: role }), jsxRuntimeExports.jsx("div", { className: "px-2.5 py-2 space-y-2", children: parts.map((part, i) => jsxRuntimeExports.jsx(ContentPart, { part, role }, i)) })] });
-}
-function ContentPart({ part, role }) {
-  if (part.type === "text") {
-    if (!part.text)
-      return null;
-    if (role === "assistant") {
-      return jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(_r, { children: part.text }) });
-    }
-    return jsxRuntimeExports.jsx("div", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: part.text });
-  }
-  if (part.type === "tool-call") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-purple-100)",
-      borderColor: "var(--ds-purple-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "🔧" }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-purple-900)" }, children: part.toolName })] }), part.input != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.input === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.input }) : jsxRuntimeExports.jsx(DataInspector, { data: part.input }) })] });
-  }
-  if (part.type === "tool-result") {
-    return jsxRuntimeExports.jsxs("div", { className: "rounded border px-2 py-1.5", style: {
-      backgroundColor: "var(--ds-green-100)",
-      borderColor: "var(--ds-green-300)"
-    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 text-[10px] font-medium", children: [jsxRuntimeExports.jsx("span", { children: "✓" }), jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-green-900)" }, children: [part.toolName, " result"] })] }), part.output != null && jsxRuntimeExports.jsx("div", { className: "mt-1.5 overflow-x-auto max-h-[200px] overflow-y-auto p-1.5 rounded", style: { backgroundColor: "var(--ds-gray-100)" }, children: typeof part.output === "string" ? jsxRuntimeExports.jsx("pre", { className: "text-[10px]", style: { color: "var(--ds-gray-800)" }, children: part.output }) : jsxRuntimeExports.jsx(DataInspector, { data: part.output, expandLevel: 1 }) })] });
-  }
-  return null;
+const GUTTER_PX = 1;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+function paneColTemplate(startPx) {
+  return `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
 }
-function getRoleStyle(role) {
-  switch (role) {
-    case "user":
-      return {
-        bg: "var(--ds-blue-100)",
-        border: "var(--ds-blue-300)",
-        label: "var(--ds-blue-700)"
-      };
-    case "assistant":
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
-    case "system":
-      return {
-        bg: "var(--ds-amber-100)",
-        border: "var(--ds-amber-300)",
-        label: "var(--ds-amber-700)"
-      };
-    case "tool":
-      return {
-        bg: "var(--ds-green-50)",
-        border: "var(--ds-green-300)",
-        label: "var(--ds-green-700)"
-      };
-    default:
-      return {
-        bg: "var(--ds-gray-100)",
-        border: "var(--ds-gray-300)",
-        label: "var(--ds-gray-700)"
-      };
-  }
+const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
+const ROWS = [
+  { id: "r0", name: 62, off: 0, bar: 72 },
+  { id: "r1", name: 78, off: 6, bar: 48 },
+  { id: "r2", name: 50, off: 10, bar: 55 },
+  { id: "r3", name: 84, off: 18, bar: 30 },
+  { id: "r4", name: 45, off: 18, bar: 42 },
+  { id: "r5", name: 66, off: 34, bar: 38 },
+  { id: "r6", name: 55, off: 41, bar: 25 },
+  { id: "r7", name: 40, off: 50, bar: 30 }
+];
+const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
+const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
+function TraceViewerSkeleton() {
+  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsx("div", { className: "relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 top-[6px]", children: ROWS.map((row, index) => jsxRuntimeExports.jsx(Skeleton, { className: "absolute h-[3px] rounded-full", style: {
+    left: `${row.off}%`,
+    width: `${row.bar}%`,
+    top: index * 3.5
+  } }, row.id)) }) }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id) => jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-9" }, id)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
 }
-function parseContent(content) {
-  if (typeof content === "string") {
-    return [{ type: "text", text: content }];
-  }
-  if (Array.isArray(content)) {
-    return content.map((part) => {
-      if (typeof part === "string") {
-        return { type: "text", text: part };
-      }
-      if ((part == null ? void 0 : part.type) === "text") {
-        return { type: "text", text: String(part.text ?? "") };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-call") {
-        return {
-          type: "tool-call",
-          toolName: part.toolName,
-          input: part.input
-        };
-      }
-      if ((part == null ? void 0 : part.type) === "tool-result") {
-        return {
-          type: "tool-result",
-          toolName: part.toolName,
-          output: part.output
-        };
-      }
-      return { type: "text", text: "" };
+function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
+  const [entry, setEntry] = reactExports.useState();
+  const frozen = (entry == null ? void 0 : entry.isIntersecting) && freezeOnceVisible;
+  reactExports.useEffect(() => {
+    const node = elementRef == null ? void 0 : elementRef.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || frozen || !node)
+      return;
+    const updateEntry = ([entry2]) => {
+      setEntry(entry2);
+    };
+    const observer = new IntersectionObserver(updateEntry, {
+      threshold,
+      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
+      rootMargin
     });
-  }
-  return [];
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
+  return entry;
 }
-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 }) {
-  const toast2 = useToast();
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border p-3", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Copy data", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]", style: { borderColor: "var(--ds-gray-300)" }, onClick: () => {
-    navigator.clipboard.writeText(serializeForClipboard(data)).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), jsxRuntimeExports.jsx(DataInspector, { data })] });
+function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
+  const sentinelRef = reactExports.useRef(null);
+  const entry = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
+  const loadMoreRef = reactExports.useRef(loadMore);
+  reactExports.useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  reactExports.useEffect(() => {
+    if ((entry == null ? void 0 : entry.isIntersecting) && hasMore && !isLoadingMore) {
+      loadMoreRef.current();
+    }
+  }, [entry == null ? void 0 : entry.isIntersecting, hasMore, isLoadingMore]);
+  return sentinelRef;
 }
-function DetailCard({ summary, children, onToggle, disabled = false, summaryClassName, contentClassName }) {
-  if (disabled) {
-    return jsxRuntimeExports.jsx("div", { className: `rounded-md border px-2.5 py-1.5 text-xs ${summaryClassName ?? ""}`, style: {
-      borderColor: "var(--ds-gray-300)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      cursor: "not-allowed",
-      opacity: 0.8
-    }, children: summary });
+const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 text-center font-sans", {
+  variants: {
+    variant: {
+      subtle: "bg-background-100/20",
+      outline: "border border-gray-alpha-400 bg-background-100 font-medium text-gray-900"
+    },
+    size: {
+      default: "h-5 min-w-5 text-label-12 leading-none",
+      compact: "h-4 min-h-4 min-w-4 text-[11px] leading-none",
+      search: "h-5 min-h-5 min-w-5 text-label-13 leading-[1.7em]"
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "default"
   }
-  return jsxRuntimeExports.jsxs("details", { className: "group", onToggle: (e) => onToggle == null ? void 0 : onToggle(e.target.open), children: [jsxRuntimeExports.jsx("summary", { className: `cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ""}`, style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-900)",
-    listStyle: "none"
-  }, children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "shrink-0 transition-transform group-open:rotate-90" }), summary] }) }), jsxRuntimeExports.jsx("div", { className: `mt-2 ${contentClassName ?? ""}`, children })] });
+});
+function Kbd({ children, className, variant, size, ...props }) {
+  return jsxRuntimeExports.jsx("kbd", { className: cn(kbdVariants({ variant, size, className })), ...props, children });
 }
 function TabButton({ active, onClick, children }) {
   return jsxRuntimeExports.jsx("button", { type: "button", role: "tab", "aria-selected": active, tabIndex: active ? 0 : -1, onClick, className: "px-3 py-1.5 text-[11px] font-medium transition-colors -mb-px", style: {
@@ -1548,28 +1948,15 @@ const conversationTabs = [
   { id: "conversation", label: "Conversation" },
   { id: "json", label: "Raw JSON" }
 ];
-function ConversationWithTabs({ conversation, args }) {
+function ConversationWithTabs({ conversation, args, defaultOpen, onOpenChange }) {
   const [activeTab, setActiveTab] = reactExports.useState("conversation");
-  return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${conversation.length} messages)`, 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", defaultOpen, onOpenChange, 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() {
-  const ctx = reactExports.useContext(DecryptClickContext);
-  if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors", style: {
-      borderColor: "var(--ds-gray-400)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
-  }
-  return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-700)"
-  }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Encrypted" })] });
+  return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
 }
 function ExpiredFieldBlock() {
-  return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
+  return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)",
     color: "var(--ds-gray-700)"
@@ -1600,36 +1987,44 @@ const attributeOrder = [
   "runId",
   "attempt",
   "token",
+  "tokenRetentionUntil",
+  "isWebhook",
+  "isSystem",
   "receivedCount",
   "lastReceivedAt",
   "disposedAt",
   "correlationId",
   "eventType",
   "deploymentId",
+  "vercelId",
+  "computeInstanceId",
   "specVersion",
   "workflowCoreVersion",
   "ownerId",
   "projectId",
   "environment",
   "executionContext",
+  "occurredAt",
   "createdAt",
   "startedAt",
   "updatedAt",
   "completedAt",
   "expiredAt",
   "retryAfter",
+  "errorCode",
   "error",
   "metadata",
   "eventData",
   "input",
   "output",
+  "attributes",
   "resumeAt"
 ];
-const sortByAttributeOrder = (a, b) => {
-  const aIndex = attributeOrder.indexOf(a) || 0;
-  const bIndex = attributeOrder.indexOf(b) || 0;
-  return aIndex - bIndex;
+const attributeOrderIndex = (attribute) => {
+  const index = attributeOrder.indexOf(attribute);
+  return index === -1 ? attributeOrder.length : index;
 };
+const sortByAttributeOrder = (a, b) => attributeOrderIndex(a) - attributeOrderIndex(b);
 const attributeDisplayNames = {
   moduleSpecifier: "Module",
   workflowName: "Workflow Name",
@@ -1639,11 +2034,17 @@ const attributeDisplayNames = {
   attempt: "Attempts",
   eventId: "Event ID",
   runId: "Run ID",
+  token: "Token",
+  tokenRetentionUntil: "Minimum Retention Until",
   eventType: "Event Type",
+  errorCode: "Error Code",
   correlationId: "Correlation ID",
   deploymentId: "Deployment ID",
+  vercelId: "Request ID",
+  computeInstanceId: "Compute Instance ID",
   specVersion: "Spec Version",
   workflowCoreVersion: "@workflow/core version",
+  occurredAt: "Occurred",
   createdAt: "Created",
   startedAt: "Started",
   updatedAt: "Updated",
@@ -1670,7 +2071,7 @@ const getModuleSpecifierFromName = (value) => {
   }
   return raw;
 };
-const parseDateValue = (value) => {
+const parseDateValue$1 = (value) => {
   if (value == null) {
     return null;
   }
@@ -1683,35 +2084,21 @@ const parseDateValue = (value) => {
   const date = typeof value === "number" ? new Date(value) : new Date(String(value));
   return Number.isNaN(date.getTime()) ? null : date;
 };
-const formatLocalMillisecondTime = (date) => date.toLocaleString(void 0, {
-  year: "numeric",
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3
-});
-const localMillisecondTime = (value) => {
-  const date = parseDateValue(value);
-  if (!date) {
-    return "-";
-  }
-  return formatLocalMillisecondTime(date);
-};
+const formatLocalMillisecondTime = (date) => format(date, "MMM dd HH:mm:ss.SS OO").toUpperCase();
 const localMillisecondTimeOrNull = (value) => {
-  const date = parseDateValue(value);
+  const date = parseDateValue$1(value);
   if (!date) {
     return null;
   }
   return formatLocalMillisecondTime(date);
 };
 const timestampWithTooltipOrNull = (value) => {
-  const date = parseDateValue(value);
+  const date = parseDateValue$1(value);
   if (!date)
     return null;
   return jsxRuntimeExports.jsx(TimestampTooltip, { date, children: jsxRuntimeExports.jsx("span", { children: formatLocalMillisecondTime(date) }) });
 };
+const opaqueIdOrNull = (value) => hasDisplayContent(value) ? String(value) : null;
 const attributeToDisplayFn = {
   // Names that need pretty-printing
   workflowName: (_value) => null,
@@ -1719,7 +2106,7 @@ const attributeToDisplayFn = {
   stepName: (_value) => null,
   // IDs
   runId: (_value) => null,
-  stepId: (_value) => null,
+  stepId: (value) => String(value),
   hookId: (value) => String(value),
   eventId: (value) => String(value),
   // Run/step details
@@ -1727,15 +2114,23 @@ const attributeToDisplayFn = {
   attempt: (value) => String(value),
   // Hook details
   token: (value) => String(value),
+  tokenRetentionUntil: timestampWithTooltipOrNull,
   isWebhook: (value) => String(value),
+  isSystem: (value) => String(value),
   receivedCount: (value) => String(value),
   lastReceivedAt: localMillisecondTimeOrNull,
   disposedAt: localMillisecondTimeOrNull,
+  // Internal resume plumbing — not surfaced in the UI
+  resumeContext: (_value) => null,
+  resumeId: (_value) => null,
+  resumeCapabilities: (_value) => null,
   // Event details
   eventType: (value) => String(value),
   correlationId: (value) => String(value),
   // Project details
   deploymentId: (value) => String(value),
+  vercelId: opaqueIdOrNull,
+  computeInstanceId: opaqueIdOrNull,
   specVersion: (value) => String(value),
   workflowCoreVersion: (value) => String(value),
   // Tenancy (we don't show these)
@@ -1743,7 +2138,16 @@ const attributeToDisplayFn = {
   projectId: (_value) => null,
   environment: (_value) => null,
   executionContext: (_value) => null,
+  // Attributes — string-string metadata attached to the run.
+  // Rendered as key-value rows in its own collapsible section;
+  // if empty/missing, hidden by the hasDisplayContent gate.
+  attributes: (value) => {
+    if (!hasDisplayContent(value))
+      return null;
+    return jsxRuntimeExports.jsx(RunAttributesCard, { attributes: value });
+  },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  occurredAt: timestampWithTooltipOrNull,
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
   updatedAt: (_value) => null,
@@ -1755,105 +2159,154 @@ const attributeToDisplayFn = {
   metadata: (value) => {
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
-    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(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Input", defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (value && typeof value === "object" && "args" in value) {
       const { args, closureVars, thisVal } = value;
-      const argCount2 = Array.isArray(args) ? args.length : 0;
-      const argLabel2 = argCount2 === 1 ? "argument" : "arguments";
       const hasClosureVars = hasDisplayContent(closureVars);
       const hasThisVal = hasDisplayContent(thisVal);
       const hasArgs = hasDisplayContent(args);
       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, defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange }), 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, summaryClassName: "text-label-14 font-medium py-2" });
+        return jsxRuntimeExports.jsx(Collapsible, { label: "Input (no data)", disabled: true });
       }
-      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount2} ${argLabel2})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", 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: "this", children: JsonBlock(thisVal) })] });
+      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Collapsible, { label: "Input", defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange, 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) })] });
     }
-    const argCount = Array.isArray(value) ? value.length : 0;
-    const argLabel = argCount === 1 ? "argument" : "arguments";
     if (!hasDisplayContent(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" });
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Input (no data)", disabled: true });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", 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", defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange, 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) => {
+  output: (value, context) => {
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Output", defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Output", defaultOpen: context == null ? void 0 : context.sectionOpen, onOpenChange: context == null ? void 0 : context.onSectionOpenChange, children: JsonBlock(value) });
   },
   error: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      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 (isStructuredErrorWithStack(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
+    if (isStructuredError(value)) {
+      return jsxRuntimeExports.jsx(Collapsible, { label: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Error", defaultOpen: true, children: JsonBlock(value) });
   },
   eventData: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      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", children: JsonBlock(value) });
-  }
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Event Data", defaultOpen: true, children: JsonBlock(value) });
+  },
+  errorCode: (value) => {
+    if (typeof value !== "string" || value.length === 0)
+      return null;
+    return String(value);
+  },
+  // Internal encryption plumbing: the run's X25519 public key, used by
+  // cross-run writers to seal payloads to this run. Not actionable for users
+  // and not secret — hidden rather than rendered as 44 opaque base64 chars.
+  encryptionPublicKey: (_value) => null
 };
 const resolvableAttributes = [
   "input",
   "output",
   "error",
   "metadata",
+  "attributes",
+  "eventData"
+];
+const selfHeaderedAttributes = /* @__PURE__ */ new Set([
+  "input",
+  "output",
+  "error",
+  "metadata",
+  "attributes",
   "eventData"
-];
-const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-copy-12 rounded-md border p-4 my-2", style: {
+]);
+const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-label-12 rounded-md border p-4 my-2", style: {
   borderColor: "var(--ds-gray-300)",
   backgroundColor: "var(--ds-gray-100)",
   color: "var(--ds-gray-700)"
 }, children: jsxRuntimeExports.jsx("span", { children: "The data for this run has expired and is no longer available." }) });
+const copyableBasicAttributes = /* @__PURE__ */ new Set([
+  "stepId",
+  "hookId",
+  "eventId",
+  "deploymentId",
+  "vercelId",
+  "computeInstanceId",
+  "moduleSpecifier",
+  "token"
+]);
+const loadingSectionLabels = {
+  input: "Input",
+  output: "Output",
+  eventData: "Event Data"
+};
 const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }) => {
-  const isExpandableLoadingTarget = attribute === "input" || attribute === "eventData";
-  if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    return jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" })] });
+  const decryptCtx = reactExports.useContext(DecryptClickContext);
+  const sectionOpenRef = reactExports.useRef(false);
+  const handleSectionOpenChange = reactExports.useCallback((open) => {
+    sectionOpenRef.current = open;
+  }, []);
+  const label = loadingSectionLabels[attribute];
+  if (isLoading && label && !hasDisplayContent(value)) {
+    if (decryptCtx == null ? void 0 : decryptCtx.hasEncryptedData) {
+      return jsxRuntimeExports.jsx(Collapsible, { label, defaultOpen: attribute === "eventData" || sectionOpenRef.current, onOpenChange: handleSectionOpenChange, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
+    return jsxRuntimeExports.jsx(Collapsible, { label });
   }
   const displayFn = attributeToDisplayFn[attribute];
   if (!displayFn) {
     return null;
   }
-  const displayValue = displayFn(value, context);
+  const displayValue = displayFn(value, {
+    ...context,
+    sectionOpen: sectionOpenRef.current,
+    onSectionOpenChange: handleSectionOpenChange
+  });
   if (!displayValue) {
     return null;
   }
   if (inline) {
     return jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("span", { className: "text-[11px] font-medium", style: { color: "var(--ds-gray-700)" }, children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" || attribute === "output" || attribute === "error" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
+  if (selfHeaderedAttributes.has(attribute)) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: displayValue });
+  }
+  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-label-12", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
 };
-const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
-  const toast2 = useToast();
+const AttributePanel = ({ data, moduleSpecifier, moduleSourceUrl, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
   const displayData = reactExports.useMemo(() => {
     const result = { ...data };
     const execCtx = data.executionContext;
@@ -1875,14 +2328,16 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
     const present = Object.keys(displayData).filter((key) => resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
     if (!isLoading)
       return present;
-    const loadingDefaults = ["input"];
-    for (const key of loadingDefaults) {
+    if (resource === "sleep")
+      return present;
+    const loadingPlaceholders = ["input", "output"];
+    for (const key of loadingPlaceholders) {
       if (!present.includes(key)) {
         present.push(key);
       }
     }
     return present.sort(sortByAttributeOrder);
-  }, [displayData, isLoading]);
+  }, [displayData, isLoading, resource]);
   const visibleBasicAttributes = basicAttributes.filter((attribute) => {
     const displayFn = attributeToDisplayFn[attribute];
     if (!displayFn)
@@ -1913,46 +2368,37 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, on
   const displayContext = reactExports.useMemo(() => ({
     stepName: displayData.stepName
   }), [displayData.stepName]);
-  const handleCopyModuleSpecifier = reactExports.useCallback((value) => {
-    navigator.clipboard.writeText(value).then(() => {
-      toast2.success("moduleSpecifier copied");
-    }).catch(() => {
-      toast2.error("Failed to copy moduleSpecifier");
-    });
-  }, []);
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "mb-3 flex flex-col overflow-hidden rounded-md border", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, children: [orderedBasicAttributes.map((attribute, index) => {
+  const outerDecryptCtx = reactExports.useContext(DecryptClickContext);
+  const decryptValue = onDecrypt ? {
+    onDecrypt,
+    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(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 isModuleSpecifier = attribute === "moduleSpecifier";
-    const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
-    const shouldCapitalizeLabel = attribute !== "workflowCoreVersion";
-    const showResumeAtSkeleton = isLoading && resource === "sleep" && !displayData.resumeAt;
-    const showDivider = index < orderedBasicAttributes.length - 1 || showResumeAtSkeleton;
-    return jsxRuntimeExports.jsxs("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: shouldCapitalizeLabel ? "text-[14px] first-letter:uppercase" : "text-[14px]", style: { color: "var(--ds-gray-700)" }, children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: {
-      color: "var(--ds-gray-1000)",
-      background: "transparent",
-      border: "none",
-      padding: 0
-    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : jsxRuntimeExports.jsx("span", { className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }), showDivider ? jsxRuntimeExports.jsx("div", { className: "mx-2.5 border-b", style: { borderColor: "var(--ds-gray-300)" } }) : null] }, 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, {}) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) })] }) }) }) });
+    const isCopyableBasicAttribute = copyableBasicAttributes.has(attribute) && typeof displayValue === "string";
+    const label = getAttributeDisplayName(attribute);
+    return jsxRuntimeExports.jsx(DetailMonoKeyValueRow, { label, value: displayValue, copyText: isCopyableBasicAttribute ? displayValue : void 0, href: attribute === "moduleSpecifier" ? moduleSourceUrl : 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([
-  "step_created",
-  "step_completed",
-  "step_failed",
-  "step_retrying",
-  "hook_created",
-  "hook_received",
-  "run_created",
-  "run_completed",
-  "run_failed",
-  "wait_created",
-  "wait_completed"
-]);
-function EventItem({ event, onLoadEventData, encryptionKey }) {
+const parseDateValue = (value) => {
+  if (value == null)
+    return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+const getEffectiveEventDate = (event) => parseDateValue(event.occurredAt) ?? new Date(event.createdAt);
+const formatEventTimestamp = (date) => date.toLocaleString(void 0, {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  fractionalSecondDigits: 3,
+  timeZoneName: "short"
+});
+function EventItem({ event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
   const [loadedData, setLoadedData] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -1960,17 +2406,17 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
   const loadedDataRef = reactExports.useRef(null);
   const existingData = "eventData" in event && event.eventData != null ? event.eventData : null;
   const mergedDisplay = loadedData ?? existingData;
-  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
-  const loadEventData = reactExports.useCallback(async (options) => {
-    if (!onLoadEventData || !event.correlationId || !event.eventId)
+  const canHaveData = existingData !== null || getEventDataRefFields(event.eventType).length > 0;
+  const loadEventData = reactExports.useCallback(async (force) => {
+    if (!onLoadEventData)
       return;
-    if (!(options == null ? void 0 : options.force) && loadedDataRef.current !== null) {
+    if (!force && loadedDataRef.current !== null) {
       return;
     }
     try {
       setIsLoading(true);
       setLoadError(null);
-      const data = await onLoadEventData(event.correlationId, event.eventId);
+      const data = await onLoadEventData(event);
       loadedDataRef.current = data;
       setLoadedData(data);
     } catch (err) {
@@ -1978,122 +2424,244 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
     } finally {
       setIsLoading(false);
     }
-  }, [onLoadEventData, event.correlationId, event.eventId]);
-  const handleExpand = reactExports.useCallback(async () => {
+  }, [onLoadEventData, event]);
+  const handleExpand = reactExports.useCallback(() => {
     if (isLoading)
       return;
     wasExpandedRef.current = true;
-    await loadEventData();
+    void loadEventData(false);
   }, [isLoading, loadEventData]);
-  reactExports.useEffect(() => {
+  reactExports.useLayoutEffect(() => {
     if (!encryptionKey || !wasExpandedRef.current)
       return;
     loadedDataRef.current = null;
     setLoadedData(null);
-    void loadEventData({ force: true });
+    void loadEventData(true);
   }, [encryptionKey, loadEventData]);
   const createdAt = new Date(event.createdAt);
+  const occurredAt = parseDateValue(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate(event);
+  const displayedCreatedAtTime = displayedCreatedAt.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  });
   const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { summaryClassName: "text-base py-2", summary: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "font-medium", style: { color: "var(--ds-gray-1000)" }, children: event.eventType }), " ", "-", " ", jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: localMillisecondTime(createdAt.getTime()) })] }), 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 divide-y rounded-md border overflow-hidden", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.eventId, children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.correlationId, children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "mt-2 rounded-md border p-3", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, 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: "mt-2", 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]));
 }
 function EventDataBlock({ eventType, data }) {
   if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
-    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
+    return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12", style: {
       borderColor: "var(--ds-gray-300)",
       backgroundColor: "var(--ds-gray-100)",
       color: "var(--ds-gray-700)"
     }, children: jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Data expired" }) });
   }
-  if (ERROR_EVENT_TYPES.has(eventType) && data != null && typeof data === "object") {
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
+  }
+  if (eventType === "attr_set") {
+    return jsxRuntimeExports.jsx(AttrSetEventBlock, { data });
+  }
+  if (getEventDataRefFields(eventType).includes("error") && data != null && typeof data === "object") {
     const record = data;
-    if (isStructuredErrorWithStack(record.error)) {
+    if (isStructuredError(record.error)) {
       return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record.error });
     }
-    if (isStructuredErrorWithStack(record)) {
+    if (isStructuredError(record)) {
       return jsxRuntimeExports.jsx(ErrorStackBlock, { value: record });
     }
   }
   return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
 }
-function EventsList({ events, isLoading = false, error, onLoadEventData, encryptionKey }) {
-  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()), [events]);
-  return jsxRuntimeExports.jsxs("div", { className: "mt-2", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("h3", { className: "text-label-14 font-medium mt-4 mb-2", style: { color: "var(--ds-gray-1000)" }, children: "Events" }), isLoading ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-full rounded-md" })] }) : null, !isLoading && !error && sortedEvents.length === 0 && jsxRuntimeExports.jsx("div", { className: "text-sm", children: "No events found" }), sortedEvents.length > 0 && !error ? jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4", children: sortedEvents.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) : null] });
+function EventsList({ events, isLoading = false, error, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
+  const sortedEvents = reactExports.useMemo(() => [...events].sort((a, b) => getEffectiveEventDate(a).getTime() - getEffectiveEventDate(b).getTime()), [events]);
+  const hasEvents = sortedEvents.length > 0 && !error;
+  if (!hasEvents && !isLoading) {
+    return jsxRuntimeExports.jsx(Collapsible, { label: "Events", disabled: true });
+  }
+  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"]);
+function resourceNeedsFetchedDetail(resource) {
+  return resource !== void 0 && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+function deriveSpanDetailView(args) {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } = args;
+  const matchedDetail = spanDetailMatchesSelection(fetchedDetail, resource, resourceId) ? fetchedDetail : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail);
+  if (!resource || !resourceId) {
+    return { status: "idle", displayData, detail: null, error: void 0 };
+  }
+  if (fetchedError) {
+    return {
+      status: "error",
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  return { status: "loading", displayData, detail: null, error: void 0 };
+}
+function spanDetailMatchesSelection(detail, resource, resourceId) {
+  if (!detail || typeof detail !== "object" || !resource || !resourceId) {
+    return false;
+  }
+  switch (resource) {
+    case "step":
+      return hasField(detail, "stepId") && detail.stepId === resourceId;
+    case "hook":
+      return hasField(detail, "hookId") && detail.hookId === resourceId;
+    case "sleep":
+      return hasField(detail, "waitId") && detail.waitId === resourceId;
+    case "run":
+      return hasField(detail, "runId") && !("stepId" in detail) && !("hookId" in detail) && !("waitId" in detail) && detail.runId === resourceId;
+    default:
+      return false;
+  }
+}
+function mergeSpanDetail(spanData, detail) {
+  if (!detail || typeof detail !== "object") {
+    return spanData;
+  }
+  if (!spanData || typeof spanData !== "object") {
+    return detail;
+  }
+  const merged = { ...detail };
+  for (const [key, value] of Object.entries(spanData)) {
+    if (value !== void 0) {
+      merged[key] = value;
+    }
+  }
+  return merged;
 }
-function isStep(data) {
-  return data !== null && typeof data === "object" && "stepId" in data;
+function deriveSpanSelection(selectedSpan) {
+  if (!selectedSpan)
+    return null;
+  const { resource, data } = selectedSpan;
+  if (resource === "step" && data && typeof data === "object" && "stepId" in data) {
+    const step = data;
+    return { resource: "step", resourceId: step.stepId, runId: step.runId };
+  }
+  if (resource === "run" && data && typeof data === "object" && "runId" in data) {
+    return { resource: "run", resourceId: data.runId };
+  }
+  if (resource === "hook" && data && typeof data === "object" && "hookId" in data) {
+    return { resource: "hook", resourceId: data.hookId };
+  }
+  if (resource === "sleep") {
+    if (!selectedSpan.spanId)
+      return null;
+    const waitData = data;
+    return {
+      resource: "sleep",
+      resourceId: selectedSpan.spanId,
+      runId: waitData == null ? void 0 : waitData.runId
+    };
+  }
+  return null;
 }
-function isWorkflowRun(data) {
-  return data !== null && typeof data === "object" && "runId" in data;
+function useSelectedSpanDetail(selectedSpan, fetchSpanDetail) {
+  const selection = reactExports.useMemo(() => deriveSpanSelection(selectedSpan), [selectedSpan]);
+  const resource = selection == null ? void 0 : selection.resource;
+  const resourceId = selection == null ? void 0 : selection.resourceId;
+  const runId = selection == null ? void 0 : selection.runId;
+  const selectionKey = resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+  const [fetched, setFetched] = reactExports.useState({ detail: null, error: null, errorKey: null });
+  const tokenRef = reactExports.useRef(0);
+  const selectionRef = reactExports.useRef(selection);
+  selectionRef.current = selection;
+  reactExports.useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection).then((detail) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({ detail, error: null, errorKey: null });
+    }).catch((err) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({
+        detail: null,
+        error: err instanceof Error ? err : new Error(String(err)),
+        errorKey: selectionKey
+      });
+    });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+  const view = reactExports.useMemo(() => deriveSpanDetailView({
+    resource,
+    resourceId,
+    inlineData: selectedSpan == null ? void 0 : selectedSpan.data,
+    fetchedDetail: fetched.detail,
+    fetchedError: scopedError
+  }), [resource, resourceId, selectedSpan == null ? void 0 : selectedSpan.data, fetched.detail, scopedError]);
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail,
+    error: view.error
+  };
 }
 function isHook(data) {
   return data !== null && typeof data === "object" && "hookId" in data;
 }
-function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan }) {
+function EntityDetailPanel({ run, onStreamClick, onRunClick, fetchSpanDetail, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan, showSeparateEventOccurrenceTimestamps = false, getModuleSourceUrl }) {
   const toast2 = useToast();
   const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
   const [resolvingHook, setResolvingHook] = reactExports.useState(false);
   const [resolvedHookIds, setResolvedHookIds] = reactExports.useState(/* @__PURE__ */ new Set());
+  const sidebar = useSidebarDataOptional();
+  const hasEncryptedData = Boolean((sidebar == null ? void 0 : sidebar.hasEncryptedData) && !encryptionKey);
   const data = selectedSpan == null ? void 0 : selectedSpan.data;
   const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
   const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
-  const { resource, resourceId, runId } = reactExports.useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: void 0, resourceId: void 0, runId: void 0 };
-    }
-    const res = selectedSpan.resource;
-    if (res === "step" && isStep(data)) {
-      return { resource: "step", resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === "run" && isWorkflowRun(data)) {
-      return { resource: "run", resourceId: data.runId, runId: void 0 };
-    }
-    if (res === "hook" && isHook(data)) {
-      return { resource: "hook", resourceId: data.hookId, runId: void 0 };
-    }
-    if (res === "sleep") {
-      const waitData = data;
-      return {
-        resource: "sleep",
-        resourceId: selectedSpan.spanId,
-        runId: waitData == null ? void 0 : waitData.runId
-      };
-    }
-    return { resource: void 0, resourceId: void 0, runId: void 0 };
-  }, [selectedSpan, data]);
-  const onSpanSelectRef = reactExports.useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-  reactExports.useEffect(() => {
-    if (resource && resourceId && ["run", "step", "hook", "sleep"].includes(resource)) {
-      onSpanSelectRef.current({
-        resource,
-        resourceId,
-        runId
-      });
-    }
-  }, [resource, resourceId, runId]);
+  const { status, resource, resourceId, displayData, detail: matchedSpanDetailData, error } = useSelectedSpanDetail(selectedSpan, fetchSpanDetail);
+  const loading = status === "loading";
   const canWakeUp = reactExports.useMemo(() => {
     if (resource !== "sleep" || !rawEvents)
       return false;
-    const terminalStates = ["completed", "failed", "cancelled"];
-    if (terminalStates.includes(run.status))
+    if (isTerminalWorkflowRunStatus(run.status))
       return false;
     const hasWaitCreated = rawEvents.some((e) => e.eventType === "wait_created");
     if (!hasWaitCreated)
@@ -2106,8 +2674,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
       return false;
     if (resolvedHookIds.has(resourceId))
       return false;
-    const terminalStates = ["completed", "failed", "cancelled"];
-    if (terminalStates.includes(run.status))
+    if (isTerminalWorkflowRunStatus(run.status))
       return false;
     const hasHookDisposed = rawEvents.some((e) => e.eventType === "hook_disposed");
     if (hasHookDisposed)
@@ -2121,19 +2688,17 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     run.status,
     resolvedHookIds
   ]);
-  const error = spanDetailError ?? void 0;
-  const loading = spanDetailLoading ?? false;
   const hookToken = reactExports.useMemo(() => {
     if (resource !== "hook" || !resourceId)
       return void 0;
-    if (isHook(spanDetailData) && spanDetailData.token) {
-      return spanDetailData.token;
+    if (isHook(matchedSpanDetailData) && matchedSpanDetailData.token) {
+      return matchedSpanDetailData.token;
     }
     if (isHook(data) && data.token) {
       return data.token;
     }
     return void 0;
-  }, [resource, resourceId, spanDetailData, data]);
+  }, [resource, resourceId, matchedSpanDetailData, data]);
   reactExports.useEffect(() => {
     if (error && selectedSpan && resource) {
       toast2.error(`Failed to load ${resource} details`, {
@@ -2188,7 +2753,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     }
     try {
       setResolvingHook(true);
-      const candidate = spanDetailData ?? data;
+      const candidate = matchedSpanDetailData ?? data;
       const hook = isHook(candidate) ? candidate : void 0;
       await onResolveHook(hookToken, payload, hook);
       toast2.success("Hook resolved", {
@@ -2206,8 +2771,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     } finally {
       setResolvingHook(false);
     }
-  }, [onResolveHook, hookToken, resolvingHook, spanDetailData, data]);
-  const displayData = spanDetailData ?? data;
+  }, [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]);
   const moduleSpecifier = reactExports.useMemo(() => {
     const displayRecord = displayData;
     const displayStepName = displayRecord.stepName;
@@ -2217,391 +2781,353 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     }
     if (typeof displayWorkflowName === "string") {
       return displayWorkflowName;
-    }
-    if (typeof run.workflowName === "string") {
-      return run.workflowName;
-    }
-    return void 0;
-  }, [displayData, run.workflowName]);
-  if (!selectedSpan || !resource || !resourceId) {
-    return null;
-  }
-  const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
-  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-3 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-[13px] font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
-    background: "var(--ds-amber-200)",
-    color: "var(--ds-amber-900)"
-  }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
-    background: "var(--ds-gray-1000)",
-    color: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }) }), resource !== "run" && rawEvents && jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, encryptionKey }) })] })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
-}
-function CopyButton({ copyText, ariaLabel, className }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0", className), onClick: (e) => {
-    e.stopPropagation();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    void navigator.clipboard.writeText(copyText).then(() => {
-      setCopied(true);
-      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
-    });
-  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
-}
-const WorkflowIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "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" }) });
-};
-const WebhookIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z", fill: "currentColor" }) });
-};
-const SleepIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z", fill: "currentColor" }) });
-};
-const StepForwardIcon = () => {
-  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
-};
-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)) {
+    }
+    if (typeof run.workflowName === "string") {
+      return run.workflowName;
+    }
+    return void 0;
+  }, [displayData, run.workflowName]);
+  const moduleSourceUrl = reactExports.useMemo(() => {
+    if (!getModuleSourceUrl || !moduleSpecifier)
+      return void 0;
+    const parsed = parseStepName(moduleSpecifier) ?? parseWorkflowName(moduleSpecifier);
+    if (!parsed)
+      return void 0;
+    const dataDeploymentId = displayData.deploymentId;
+    return getModuleSourceUrl({
+      moduleSpecifier: parsed.moduleSpecifier,
+      deploymentId: typeof dataDeploymentId === "string" ? dataDeploymentId : run.deploymentId
+    });
+  }, [getModuleSourceUrl, moduleSpecifier, displayData, run.deploymentId]);
+  if (!selectedSpan || !resource || !resourceId) {
     return null;
   }
-  const selectionStart = visibleText.indexOf(trimmedSelectionText);
-  if (selectionStart === -1) {
-    return null;
+  const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
+  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
+    borderColor: "var(--ds-gray-300)",
+    backgroundColor: "var(--ds-gray-100)"
+  }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-label-13 font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
+    background: "var(--ds-amber-200)",
+    color: "var(--ds-amber-900)"
+  }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
+    background: "var(--ds-gray-1000)",
+    color: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, moduleSourceUrl, expiredAt: run.expiredAt, isLoading: loading, error: error ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
+}
+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;
   }
-  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 writeStoredPanelWidth(width) {
+  if (typeof window === "undefined")
+    return;
+  try {
+    window.localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, String(Math.round(width)));
+  } catch {
+  }
 }
-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;
-    });
+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);
+    };
   }, []);
-  const recalculate = reactExports.useCallback(() => {
-    const el = ref.current;
-    const measureEl = measureRef.current;
-    if (!el || !measureEl)
+  reactExports.useEffect(() => {
+    if (!isDragging)
       return;
-    const available = el.clientWidth;
-    if (available <= 0) {
-      updateState(fullState);
+    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 measure = (text) => {
-      measureEl.textContent = text;
-      return measureEl.scrollWidth;
-    };
-    const fullWidth = measure(value);
-    if (fullWidth <= available) {
-      updateState(fullState);
+    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;
     }
-    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)
+    stopDrag();
+  };
+  const handleDoubleClick = () => {
+    if (movedRef.current || performance.now() - lastDragEndAtRef.current < 500) {
       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
+    }
+    onReset == null ? void 0 : onReset();
   };
-}
-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
+  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 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)
+function useElementWidth(ref, enabled = true) {
+  const [width, setWidth] = reactExports.useState(0);
+  reactExports.useLayoutEffect(() => {
+    if (!enabled)
       return;
-    const selection = window.getSelection();
-    if (!selection || selection.rangeCount === 0)
+    const el = ref.current;
+    if (!el)
       return;
-    const selectionText = selection.toString();
-    if (!selectionText)
+    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 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 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;
     }
-    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 })] });
+    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, getModuleSourceUrl: sidebar.getModuleSourceUrl }) }) })] });
 }
+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" }) });
+};
+const WebhookIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z", fill: "currentColor" }) });
+};
+const SleepIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z", fill: "currentColor" }) });
+};
+const StepForwardIcon = () => {
+  return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
+};
 const eventStyles = {
-  run: { icon: WorkflowIcon, className: "text-blue-900" },
-  step: { icon: StepForwardIcon, className: "text-green-900" },
-  hook: { icon: WebhookIcon, className: "text-yellow-900" },
-  sleep: { icon: SleepIcon, className: "text-gray-900" }
+  run: { icon: WorkflowIcon, className: "text-blue-900", label: "Workflow" },
+  step: { icon: StepForwardIcon, className: "text-green-900", label: "Step" },
+  hook: { icon: WebhookIcon, className: "text-gray-900", label: "Hook" },
+  sleep: { icon: SleepIcon, className: "text-gray-900", label: "Sleep" }
 };
 const defaultStyle = {
   icon: Circle,
-  className: "text-gray-900"
+  className: "text-gray-900",
+  label: "Event"
 };
 const ROW_HEIGHT_CLASS = "h-10";
 function getEventStyle(resource, isErrored) {
   const style = eventStyles[resource] ?? defaultStyle;
   return {
     icon: style.icon,
-    className: cn(isErrored ? "text-red-900" : style.className)
+    className: cn(isErrored ? "text-red-900" : style.className),
+    label: style.label
   };
 }
-const EventRow = ({ span, isSelected, onSelectSpan }) => {
+const EventRow = ({ span, isSelected, isDimmed, onSelectSpan }) => {
   const durationMs = getSpanDurationMs(span);
-  const isErrored = span.attributes.data.status === "failed";
-  const { icon: Icon, className: tagClassName } = getEventStyle(span.resource, isErrored);
-  return jsxRuntimeExports.jsx("li", { className: cn("relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400", ROW_HEIGHT_CLASS), 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 px-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: formatDuration(durationMs) }) })] }) }) });
+  const isErrored = isSpanErrored(span);
+  const { icon: Icon, className: tagClassName, label: iconLabel } = 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.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: jsxRuntimeExports.jsx("span", { className: cn("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon, { className: "w-4 h-4" }) }) }), jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: iconLabel })] }), 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) }) })] }) }) });
 };
-const EventList = ({ spans, activeSpanId, onSelectSpan }) => {
-  return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible", children: spans.map((span) => {
-    return jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, onSelectSpan }, span.spanId);
-  }) });
+const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
+  const listRef = reactExports.useRef(null);
+  const { start, end } = useRowWindow(listRef, spans.length, ROW_HEIGHT_PX);
+  return jsxRuntimeExports.jsx("ul", { ref: listRef, id: "event-list", role: "tree", className: "block min-h-0 overflow-visible divide-y divide-gray-400 border-b border-gray-400", style: {
+    paddingTop: start * ROW_HEIGHT_PX,
+    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 }) {
+const SPLIT_PANE_START_ID = "trace-split-start";
+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");
+  if (parts.length !== 3) {
+    throw new Error("SplitPane expects exactly three children");
   }
-  const [start, end] = parts;
-  const [startPx, setStartPx] = reactExports.useState(defaultStartWidth);
-  const [isDragging, setIsDragging] = reactExports.useState(false);
+  const [start, end, endOverlay] = parts;
+  const [startPx, setStartPx] = reactExports.useState(DEFAULT_START_PX);
   const containerRef = reactExports.useRef(null);
-  const gutterRef = reactExports.useRef(null);
-  const rafRef = reactExports.useRef(null);
-  const pendingPx = reactExports.useRef(defaultStartWidth);
-  const pointerIdRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (rafRef.current)
-        cancelAnimationFrame(rafRef.current);
-    };
-  }, []);
+  const startRef = reactExports.useRef(null);
+  const containerWidth = useElementWidth(containerRef);
+  const setContainerRef = reactExports.useCallback((node) => {
+    containerRef.current = node;
+    if (scrollContainerRef) {
+      scrollContainerRef.current = node;
+    }
+  }, [scrollContainerRef]);
   const clampPx = reactExports.useCallback((px) => {
     const el = containerRef.current;
     if (!el)
@@ -2609,80 +3135,72 @@ function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX,
     const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
     return Math.min(maxPx, Math.max(MIN_PX, px));
   }, []);
+  const handleWidthChange = reactExports.useCallback((next) => setStartPx(clampPx(next)), [clampPx]);
+  const handleReset = reactExports.useCallback(() => setStartPx(clampPx(DEFAULT_START_PX)), [clampPx]);
+  const effectiveStartPx = containerWidth > 0 ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx)) : startPx;
+  const colTemplate = paneColTemplate(effectiveStartPx);
+  const maxStartPx = Math.max(MIN_PX, containerWidth > 0 ? containerWidth - MIN_PX - GUTTER_PX : startPx);
+  return jsxRuntimeExports.jsxs("div", { className: cn("relative 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: "grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", style: { gridTemplateColumns: colTemplate }, children: [jsxRuntimeExports.jsx("div", { ref: startRef, id: SPLIT_PANE_START_ID, className: "min-w-0", children: start }), jsxRuntimeExports.jsxs("div", { className: "relative z-20 isolate flex shrink-0 justify-center", children: [jsxRuntimeExports.jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }), jsxRuntimeExports.jsx(DraggableBorder, { element: startRef, position: "right", onWidthChange: handleWidthChange, onReset: handleReset, "aria-label": "Resize event list", "aria-controls": SPLIT_PANE_START_ID, "aria-valuemin": MIN_PX, "aria-valuemax": maxStartPx, "aria-valuenow": Math.min(Math.max(Math.round(effectiveStartPx), MIN_PX), maxStartPx) })] }), end] }), jsxRuntimeExports.jsxs("div", { className: "pointer-events-none absolute inset-x-0 bottom-3 z-[5] grid", style: { gridTemplateColumns: colTemplate }, children: [jsxRuntimeExports.jsx("div", {}), jsxRuntimeExports.jsx("div", {}), jsxRuntimeExports.jsx("div", { className: "flex min-w-0 items-center justify-between gap-3 pl-4 pr-3", children: endOverlay })] })] });
+}
+const hint = "_hint_1dmsq_3";
+const styles = {
+  hint
+};
+const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
+const DISMISSAL_LIMIT = 3;
+const HINT_ROTATION_MS = 8e3;
+function getAltKeyLabel() {
+  if (typeof navigator === "undefined")
+    return "Alt";
+  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
+}
+function readDismissals() {
+  try {
+    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
+    return Number.isNaN(dismissals) ? 0 : dismissals;
+  } catch {
+    return 0;
+  }
+}
+function AltHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
+}
+function NavHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
+}
+function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
+  const [visible, setVisible] = reactExports.useState(false);
+  const [index, setIndex] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    setVisible(readDismissals() < DISMISSAL_LIMIT);
+  }, []);
   reactExports.useEffect(() => {
-    if (!isDragging)
+    if (reducedMotion)
       return;
-    const onPointerMove = (e) => {
-      if (e.pointerId !== pointerIdRef.current)
-        return;
-      const container = containerRef.current;
-      if (!container)
-        return;
-      const rect = container.getBoundingClientRect();
-      pendingPx.current = clampPx(e.clientX - rect.left);
-      if (!rafRef.current) {
-        rafRef.current = requestAnimationFrame(() => {
-          rafRef.current = null;
-          setStartPx(pendingPx.current);
-        });
-      }
-    };
-    const onPointerUp = (e) => {
-      if (e.pointerId !== pointerIdRef.current)
-        return;
-      const gutter2 = gutterRef.current;
-      if (gutter2 == null ? void 0 : gutter2.hasPointerCapture(e.pointerId)) {
-        gutter2.releasePointerCapture(e.pointerId);
-      }
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      pointerIdRef.current = null;
-      setIsDragging(false);
-    };
-    document.addEventListener("pointermove", onPointerMove);
-    document.addEventListener("pointerup", onPointerUp);
-    document.addEventListener("pointercancel", onPointerUp);
-    return () => {
-      document.removeEventListener("pointermove", onPointerMove);
-      document.removeEventListener("pointerup", onPointerUp);
-      document.removeEventListener("pointercancel", onPointerUp);
-    };
-  }, [isDragging, clampPx]);
-  const handlePointerDown = (e) => {
-    e.currentTarget.setPointerCapture(e.pointerId);
-    pointerIdRef.current = e.pointerId;
-    setIsDragging(true);
-  };
-  const handleLostPointerCapture = () => {
-    pointerIdRef.current = null;
-    setIsDragging(false);
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
+    const id = setInterval(() => {
+      setIndex((i) => i === 0 ? 1 : 0);
+    }, HINT_ROTATION_MS);
+    return () => clearInterval(id);
+  }, [reducedMotion]);
+  if (!visible || !hasMultipleSpans)
+    return null;
+  const dismiss = () => {
+    try {
+      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
+    } catch {
     }
+    setVisible(false);
   };
-  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
-  const hasHeaders = startHeader != null || endHeader != null;
-  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: containerRef, 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: containerRef, 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] });
-}
-function DetailPanel({ span, rootStart, onClose }) {
-  const startMs = getHighResInMs(span.startTime);
-  const durationMs = getSpanDurationMs(span);
-  const offsetMs = startMs - rootStart;
-  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors", onClick: onClose, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
+  return jsxRuntimeExports.jsxs("div", { className: "group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-label-12 leading-none text-gray-900 @min-[480px]:flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles.hint}`, children: index === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })] });
 }
 const MIN_VIEWPORT_MS = 1e-3;
+const ZOOM_DEBOUNCE_MS = 150;
 function useAnimatedViewport(initial) {
   const [viewport, setViewportState] = reactExports.useState(initial);
   const animRef = reactExports.useRef(null);
   const currentRef = reactExports.useRef(initial);
   currentRef.current = viewport;
+  const reducedMotion = useReducedMotion();
   const cancel = reactExports.useCallback(() => {
     if (animRef.current) {
       cancelAnimationFrame(animRef.current.raf);
@@ -2691,11 +3209,16 @@ function useAnimatedViewport(initial) {
   }, []);
   const animateTo = reactExports.useCallback((target) => {
     cancel();
+    if (reducedMotion) {
+      currentRef.current = target;
+      setViewportState(target);
+      return;
+    }
     const from = currentRef.current;
     const anim = { raf: 0, from, to: target, start: performance.now() };
     const tick = () => {
-      const t = Math.min((performance.now() - anim.start) / 150, 1);
-      const e = 1 - (1 - t) * (1 - t);
+      const t = Math.min((performance.now() - anim.start) / 240, 1);
+      const e = t < 0.5 ? 8 * t * t * t * t : 1 - (-2 * t + 2) ** 4 / 2;
       setViewportState({
         start: anim.from.start + (anim.to.start - anim.from.start) * e,
         end: anim.from.end + (anim.to.end - anim.from.end) * e
@@ -2707,7 +3230,7 @@ function useAnimatedViewport(initial) {
     };
     animRef.current = anim;
     anim.raf = requestAnimationFrame(tick);
-  }, [cancel]);
+  }, [cancel, reducedMotion]);
   const setViewport = reactExports.useCallback((update) => {
     cancel();
     if (typeof update === "function") {
@@ -2724,38 +3247,26 @@ function useAnimatedViewport(initial) {
   reactExports.useEffect(() => cancel, [cancel]);
   return { viewport, setViewport, animateTo };
 }
-function useSelectedSpanInfo() {
-  const { activeSpan } = useActiveSpan();
-  const sidebar = useSidebarDataOptional();
-  return reactExports.useMemo(() => {
-    var _a, _b;
-    if (!activeSpan || !sidebar)
-      return null;
-    const correlationId = activeSpan.spanId;
-    const rawEvents = correlationId ? sidebar.events.filter((e) => e.correlationId === correlationId) : [];
-    return {
-      data: (_a = activeSpan.attributes) == null ? void 0 : _a.data,
-      resource: (_b = activeSpan.attributes) == null ? void 0 : _b.resource,
-      spanId: activeSpan.spanId,
-      rawEvents
-    };
-  }, [activeSpan, sidebar == null ? void 0 : sidebar.events]);
-}
-function NewTraceViewer$1({ trace }) {
-  return jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace }) });
+function TraceViewer$1({ trace, onLoadMore, hasMore, isLoadingMore }) {
+  return jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace.spans, children: jsxRuntimeExports.jsx(TraceViewerContent, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
 }
-function NewTraceViewerContent({ trace }) {
-  const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
-  const sidebar = useSidebarDataOptional();
-  const selectedSpan = useSelectedSpanInfo();
+function TraceViewerContent({ trace, onLoadMore, hasMore, isLoadingMore }) {
+  const { activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
+  const reducedMotion = useReducedMotion();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
-  const filteredSpans = reactExports.useMemo(() => {
-    const q = searchQuery.trim().toLowerCase();
-    if (!q)
-      return trace.spans;
-    return trace.spans.filter((s) => s.name.toLowerCase().includes(q) || s.resource.toLowerCase().includes(q));
-  }, [trace.spans, searchQuery]);
+  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);
+  const loadMore = reactExports.useCallback(() => {
+    void (onLoadMore == null ? void 0 : onLoadMore());
+  }, [onLoadMore]);
+  const loadMoreSentinelRef = useLoadMoreOnScroll(loadMore, {
+    hasMore: Boolean(onLoadMore && hasMore),
+    isLoadingMore: Boolean(isLoadingMore),
+    rootRef: scrollContainerRef
+  });
   const { viewport, setViewport, animateTo } = useAnimatedViewport({
     start: root.startTime,
     end: root.startTime + root.duration
@@ -2776,53 +3287,46 @@ function NewTraceViewerContent({ trace }) {
       return prev;
     });
     prevRootRef.current = { start: newStart, end: newEnd };
-  }, [root.startTime, root.duration]);
+  }, [root.startTime, root.duration, setViewport]);
   const viewDuration = viewport.end - viewport.start;
+  const viewportRef = reactExports.useRef(viewport);
+  viewportRef.current = viewport;
   const timeMarkers = reactExports.useMemo(() => computeTimeMarkers(viewDuration, viewport.start - root.startTime), [viewDuration, viewport.start, root.startTime]);
   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 { start, end } = viewportRef.current;
+    const duration = end - start;
+    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 };
-    });
-  }, [setViewport, root.startTime, root.duration]);
+    const { start, end } = viewportRef.current;
+    const center = (start + end) / 2;
+    const newDuration = Math.max(MIN_VIEWPORT_MS, (end - start) * factor);
+    animateTo(clampToRoot({
+      start: center - newDuration / 2,
+      end: center + newDuration / 2
+    }));
+  }, [animateTo, clampToRoot]);
   const zoomIn = reactExports.useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
   const zoomOut = reactExports.useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
-  const handleSelectSpan = reactExports.useCallback((spanId) => {
-    if (spanId === activeSpanId) {
-      clearActiveSpan();
-      return;
-    }
-    setActiveSpan(spanId);
+  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)
       return;
     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);
@@ -2833,34 +3337,67 @@ function NewTraceViewerContent({ trace }) {
       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(clampToRoot({ start: newStart, end: newEnd }));
   }, [
     animateTo,
-    setActiveSpan,
-    clearActiveSpan,
-    activeSpanId,
     trace.spans,
     root.startTime,
-    root.duration
+    root.endTime,
+    root.duration,
+    clampToRoot
+  ]);
+  const scrollSpanIntoView = reactExports.useCallback((spanId) => {
+    var _a;
+    const index = trace.spans.findIndex((s) => s.spanId === spanId);
+    if (index === -1)
+      return;
+    const list = ((_a = scrollContainerRef.current) == null ? void 0 : _a.querySelector("#event-list")) ?? null;
+    scrollRowIntoView(list, index, ROW_HEIGHT_PX, {
+      behavior: reducedMotion ? "auto" : "smooth"
+    });
+  }, [trace.spans, reducedMotion]);
+  const zoomTimerRef = reactExports.useRef(null);
+  const cancelPendingZoom = reactExports.useCallback(() => {
+    if (zoomTimerRef.current !== null) {
+      clearTimeout(zoomTimerRef.current);
+      zoomTimerRef.current = null;
+    }
+  }, []);
+  reactExports.useEffect(() => cancelPendingZoom, [cancelPendingZoom]);
+  const handleClearActiveSpan = reactExports.useCallback(() => {
+    cancelPendingZoom();
+    clearActiveSpan();
+  }, [cancelPendingZoom, clearActiveSpan]);
+  const handleSelectSpan = reactExports.useCallback((spanId) => {
+    cancelPendingZoom();
+    if (spanId === activeSpanId) {
+      clearActiveSpan();
+      return;
+    }
+    setActiveSpan(spanId);
+    focusViewportOnSpan(spanId);
+  }, [
+    cancelPendingZoom,
+    activeSpanId,
+    clearActiveSpan,
+    setActiveSpan,
+    focusViewportOnSpan
   ]);
+  const navigateToSpan = reactExports.useCallback((spanId) => {
+    setActiveSpan(spanId);
+    scrollSpanIntoView(spanId);
+    cancelPendingZoom();
+    zoomTimerRef.current = setTimeout(() => {
+      zoomTimerRef.current = null;
+      focusViewportOnSpan(spanId);
+    }, ZOOM_DEBOUNCE_MS);
+  }, [setActiveSpan, scrollSpanIntoView, cancelPendingZoom, focusViewportOnSpan]);
   const [altHeld, setAltHeld] = reactExports.useState(false);
   reactExports.useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
-        clearActiveSpan();
-      }
-      if (e.key === "Alt") {
-        e.preventDefault();
+        handleClearActiveSpan();
+      } else if (e.key === "Alt") {
         setAltHeld(true);
       }
     };
@@ -2877,16 +3414,16 @@ function NewTraceViewerContent({ trace }) {
       window.removeEventListener("keyup", onKeyUp);
       window.removeEventListener("blur", onBlur);
     };
-  }, [clearActiveSpan]);
+  }, [handleClearActiveSpan]);
   const timelineRef = reactExports.useRef(null);
-  const [hoverFraction, setHoverFraction] = reactExports.useState(null);
+  const [hover, setHover] = reactExports.useState(null);
   const hoverInfo = reactExports.useMemo(() => {
-    if (hoverFraction == null)
+    if (hover == null)
       return null;
-    const absTime = viewport.start + hoverFraction * viewDuration;
+    const absTime = viewport.start + hover.fraction * viewDuration;
     const offset = absTime - root.startTime;
-    return { fraction: hoverFraction, label: formatDuration(offset, true) };
-  }, [hoverFraction, viewport.start, viewDuration, root.startTime]);
+    return { fraction: hover.fraction, label: formatDurationPrecise(offset) };
+  }, [hover, viewport.start, viewDuration, root.startTime]);
   const handleTimelineMouseMove = reactExports.useCallback((e) => {
     const el = timelineRef.current;
     if (!el)
@@ -2896,19 +3433,17 @@ function NewTraceViewerContent({ trace }) {
     if (contentWidth <= 0)
       return;
     const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
-    setHoverFraction(fraction);
+    setHover({
+      fraction,
+      rowIndex: Math.floor((e.clientY - rect.top) / ROW_HEIGHT_PX)
+    });
   }, []);
   const handleTimelineMouseLeave = reactExports.useCallback(() => {
-    setHoverFraction(null);
+    setHover(null);
   }, []);
   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;
@@ -2921,81 +3456,50 @@ function NewTraceViewerContent({ trace }) {
       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 scaleFactor = Math.pow(2, dy / 200);
+        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]);
-  const selectedSpanName = reactExports.useMemo(() => {
-    var _a, _b;
-    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
-      return "Details";
-    const data = selectedSpan.data;
-    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]);
-  const selectedResource = selectedSpan == null ? void 0 : selectedSpan.resource;
-  const selectedResourceId = reactExports.useMemo(() => {
-    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
-      return void 0;
-    const data = selectedSpan.data;
-    return data.stepId ?? data.runId ?? data.hookId ?? selectedSpan.spanId;
-  }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.spanId]);
-  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,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, { startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-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), 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", onClick: () => setSearchQuery(""), className: "shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors", children: jsxRuntimeExports.jsx(X, { className: "w-3 h-3" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: filteredSpans, activeSpanId, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? 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.jsx("div", { className: "flex-shrink-0 px-4 pt-4 pb-3", children: jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[15px] font-semibold text-gray-1000 truncate block", children: selectedSpanName }), selectedResourceId && jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [selectedResource && jsxRuntimeExports.jsx("span", { className: `inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${selectedResource === "step" ? "bg-green-200 text-green-900" : selectedResource === "run" ? "bg-blue-200 text-blue-900" : selectedResource === "hook" ? "bg-yellow-200 text-yellow-900" : "bg-gray-200 text-gray-900"}`, children: selectedResource.charAt(0).toUpperCase() + selectedResource.slice(1) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0", title: selectedResourceId, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: selectedResourceId }), jsxRuntimeExports.jsx(CopyButton, { copyText: selectedResourceId, ariaLabel: "Copy ID", className: "shrink-0" })] })] })] }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X, { className: "w-4 h-4" }) })] }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : activeSpan ? jsxRuntimeExports.jsx(DetailPanel, { span: activeSpan, rootStart: root.startTime, onClose: clearActiveSpan }) : null] });
+  }, [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: "@container 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-label-14 text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-label-16 text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-label-14 text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, id: "trace-timeline", className: "@container block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hover, altHeld }) }), jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace.spans.length > 1, reducedMotion }), jsxRuntimeExports.jsxs("div", { className: "pointer-events-auto flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, disabled: isAtMinZoom, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, disabled: isAtMaxZoom, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] })] })] }), jsxRuntimeExports.jsx(TraceDetailPanel, { containerRef: paneRootRef, onNavigateToSpan: navigateToSpan, onClose: handleClearActiveSpan })] });
 }
-const NewTraceViewer = ({ run, events, sidebarData }) => {
-  const traceWithMeta = reactExports.useMemo(() => {
+const TraceViewer = ({ run, events, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
+  const trace = reactExports.useMemo(() => {
     if (!(run == null ? void 0 : run.runId)) {
       return void 0;
     }
     return buildTrace(run, events, /* @__PURE__ */ new Date());
   }, [run, events]);
-  const trace = traceWithMeta;
-  if (!trace) {
-    return jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex items-center justify-center", children: jsxRuntimeExports.jsx("div", { className: "text-gray-500 text-sm", children: "Loading trace…" }) });
+  if (!trace || loading && events.length === 0) {
+    return jsxRuntimeExports.jsx(TraceViewerSkeleton, {});
   }
-  return jsxRuntimeExports.jsx(SidebarDataProvider, { value: sidebarData, children: jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex", children: jsxRuntimeExports.jsx(NewTraceViewer$1, { trace }) }) });
+  return jsxRuntimeExports.jsx(SidebarDataProvider, { value: sidebarData, children: jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex", children: jsxRuntimeExports.jsx(TraceViewer$1, { trace, onLoadMore, hasMore, isLoadingMore }) }) });
 };
 async function fetchResourceWithCorrelationId(env, resource, resourceId, options = {}) {
   const resolveData = options.resolveData ?? "all";
@@ -3025,130 +3529,45 @@ async function fetchResourceWithCorrelationId(env, resource, resourceId, options
   }
   return { data: resourceData, correlationId };
 }
-function useWorkflowResourceData(env, resource, resourceId, options = {}) {
-  const { refreshInterval = 0, runId, enabled = true, encryptionKey } = options;
-  const [data, setData] = reactExports.useState(
-    null
-  );
-  const [loading, setLoading] = reactExports.useState(enabled);
-  const [error, setError] = reactExports.useState(null);
-  const hydrate = reactExports.useCallback(
-    async (resource2) => encryptionKey ? hydrateResourceIOWithKey(resource2, encryptionKey) : hydrateResourceIO(resource2),
-    [encryptionKey]
-  );
-  const prevSelectionRef = reactExports.useRef("");
-  const fetchData = reactExports.useCallback(async () => {
-    if (!enabled) {
-      setLoading(false);
-      return;
-    }
-    const selectionKey = `${resource}:${resourceId}`;
-    if (selectionKey !== prevSelectionRef.current) {
-      setData(null);
-      prevSelectionRef.current = selectionKey;
-    }
-    setError(null);
-    setLoading(true);
-    if (resource === "hook") {
-      try {
-        const { error: error2, result } = await unwrapServerActionResult(
-          fetchHook(env, resourceId, "all")
-        );
-        if (error2) {
-          setError(error2);
-          return;
-        }
-        try {
-          setData(await hydrate(result));
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
-    }
-    if (resource === "sleep") {
-      try {
-        if (!runId) {
-          setError(new Error("runId is required for loading sleep details"));
-          return;
-        }
-        const { error: error2, result } = await unwrapServerActionResult(
-          fetchEvents(env, runId, {
-            sortOrder: "asc",
-            limit: 1e3,
-            withData: true
-          })
-        );
-        if (error2) {
-          setError(error2);
-          return;
-        }
-        try {
-          const allEvents = result.data.map(
-            hydrateResourceIO
-          );
-          const waitEvents = await Promise.all(
-            allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
-          );
-          const data2 = waitEventsToWaitEntity(waitEvents);
-          if (data2 === null) {
-            setError(
-              new Error(
-                `Failed to load ${resource} details: missing required event data`
-              )
-            );
-            return;
-          }
-          setData(data2);
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
+async function fetchSpanDetailResource(env, selection, options = {}) {
+  const { resource, resourceId, runId } = selection;
+  const { encryptionKey } = options;
+  const hydrate = async (value) => hydrateResourceIOAsync(value, encryptionKey);
+  if (resource === "hook") {
+    const result = await unwrapOrThrow(fetchHook(env, resourceId, "all"));
+    return hydrate(result);
+  }
+  if (resource === "sleep") {
+    if (!runId) {
+      throw new WorkflowWebAPIError(
+        "runId is required for loading sleep details",
+        { layer: "client" }
+      );
     }
-    try {
-      const { data: resourceData } = await fetchResourceWithCorrelationId(
-        env,
-        resource,
-        resourceId,
-        { runId }
+    const result = await unwrapOrThrow(
+      fetchEvents(env, runId, { sortOrder: "asc", limit: 1e3, withData: true })
+    );
+    const waitEvents = await Promise.all(
+      result.data.filter((e) => e.correlationId === resourceId).map(hydrate)
+    );
+    const data2 = waitEventsToWaitEntity(waitEvents);
+    if (data2 === null) {
+      throw new WorkflowWebAPIError(
+        `Failed to load ${resource} details: missing required event data`,
+        { layer: "client" }
       );
-      setData(await hydrate(resourceData));
-    } catch (error2) {
-      if (error2 instanceof Error) {
-        setError(error2);
-      } else {
-        setError(new Error(String(error2)));
-      }
-      return;
-    } finally {
-      setLoading(false);
     }
-  }, [env, resource, resourceId, runId, enabled, hydrate]);
-  reactExports.useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  reactExports.useEffect(() => {
-    if (!refreshInterval || refreshInterval <= 0) {
-      return;
+    return data2;
+  }
+  const { data } = await fetchResourceWithCorrelationId(
+    env,
+    resource,
+    resourceId,
+    {
+      runId
     }
-    const interval = setInterval(fetchData, refreshInterval);
-    return () => clearInterval(interval);
-  }, [refreshInterval, fetchData]);
-  return {
-    data,
-    loading,
-    error,
-    refresh: fetchData
-  };
+  );
+  return hydrate(data);
 }
 function mergeById(prev, next, idKey) {
   const combined = [...prev, ...next];
@@ -3187,6 +3606,7 @@ const LIVE_POLL_LIMIT = 100;
 const INITIAL_PAGE_SIZE$1 = 500;
 const LOAD_MORE_PAGE_SIZE$1 = 100;
 const LIVE_UPDATE_INTERVAL_MS = 5e3;
+const AUTO_LOAD_MAX_EVENTS = 500;
 function useWorkflowTraceViewerData(env, runId, options = {}) {
   const { live = false } = options;
   const [run, setRun] = reactExports.useState(null);
@@ -3295,6 +3715,12 @@ function useWorkflowTraceViewerData(env, runId, options = {}) {
     eventsHasMore,
     eventsCursor
   ]);
+  reactExports.useEffect(() => {
+    if (events.length >= AUTO_LOAD_MAX_EVENTS) {
+      return;
+    }
+    loadMoreTraceData();
+  }, [events.length, loadMoreTraceData]);
   const pollRun = reactExports.useCallback(async () => {
     if (run == null ? void 0 : run.completedAt) {
       return false;
@@ -3382,7 +3808,7 @@ async function readStream(_env, streamId, runId, signal, cursor) {
     if (cursor) {
       params.set("cursor", cursor);
     }
-    const url = `/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
+    const url = `${apiBase()}/api/stream/${encodeURIComponent(streamId)}?${params.toString()}`;
     const response = await fetch(url, { signal });
     if (!response.ok) {
       const errorData = await response.json().catch(() => null);
@@ -4555,6 +4981,7 @@ function BreadcrumbSeparator({
 }
 const INITIAL_PAGE_SIZE = 100;
 const LOAD_MORE_PAGE_SIZE = 100;
+const MAX_CORRELATION_SEARCH_PAGES = 30;
 function useEventsListData(env, runId, options = {}) {
   const { sortOrder = "asc", encryptionKey, enabled = true } = options;
   const [events, setEvents] = reactExports.useState([]);
@@ -4566,6 +4993,10 @@ function useEventsListData(env, runId, options = {}) {
   const isFetchingRef = reactExports.useRef(false);
   const encryptionKeyRef = reactExports.useRef(encryptionKey);
   encryptionKeyRef.current = encryptionKey;
+  const hydrateEvents = reactExports.useCallback(async (rawEvents) => {
+    const key = encryptionKeyRef.current;
+    return Promise.all(rawEvents.map((ev) => hydrateResourceIOAsync(ev, key)));
+  }, []);
   const fetchInitial = reactExports.useCallback(async () => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
@@ -4585,16 +5016,7 @@ function useEventsListData(env, runId, options = {}) {
       if (fetchError) {
         setError(fetchError);
       } else {
-        const hydrated = result.data.map(hydrateResourceIO);
-        const key = encryptionKeyRef.current;
-        if (key) {
-          const decrypted = await Promise.all(
-            hydrated.map((ev) => hydrateResourceIOWithKey(ev, key))
-          );
-          setEvents(decrypted);
-        } else {
-          setEvents(hydrated);
-        }
+        setEvents(await hydrateEvents(result.data));
         setCursor(result.hasMore ? result.cursor : void 0);
         setHasMore(Boolean(result.hasMore));
       }
@@ -4604,14 +5026,14 @@ function useEventsListData(env, runId, options = {}) {
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [env, runId, sortOrder]);
+  }, [env, runId, sortOrder, hydrateEvents]);
   reactExports.useEffect(() => {
     if (enabled) fetchInitial();
   }, [fetchInitial, enabled]);
   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(() => {
     });
@@ -4635,16 +5057,8 @@ function useEventsListData(env, runId, options = {}) {
         setError(fetchError);
       } else {
         if (result.data.length > 0) {
-          const hydrated = result.data.map(hydrateResourceIO);
-          const key = encryptionKeyRef.current;
-          if (key) {
-            const decrypted = await Promise.all(
-              hydrated.map((ev) => hydrateResourceIOWithKey(ev, key))
-            );
-            setEvents((prev) => [...prev, ...decrypted]);
-          } else {
-            setEvents((prev) => [...prev, ...hydrated]);
-          }
+          const hydrated = await hydrateEvents(result.data);
+          setEvents((prev) => [...prev, ...hydrated]);
         }
         setCursor(result.hasMore ? result.cursor : void 0);
         setHasMore(Boolean(result.hasMore));
@@ -4654,14 +5068,66 @@ function useEventsListData(env, runId, options = {}) {
     } finally {
       setLoadingMore(false);
     }
-  }, [env, runId, sortOrder, cursor, loadingMore]);
+  }, [env, runId, sortOrder, cursor, loadingMore, hydrateEvents]);
+  const searchByExactId = reactExports.useCallback(
+    async (id, kind, signal) => {
+      if (signal == null ? void 0 : signal.aborted) {
+        throw new DOMException("Aborted", "AbortError");
+      }
+      if (kind === "event") {
+        const { error: fetchError, result } = await unwrapServerActionResult(
+          fetchEvent(env, runId, id, "none")
+        );
+        if (fetchError || (signal == null ? void 0 : signal.aborted)) {
+          return fetchError ? { status: "error", message: fetchError.message } : (() => {
+            throw new DOMException("Aborted", "AbortError");
+          })();
+        }
+        const [event] = await hydrateEvents([result]);
+        return (event == null ? void 0 : event.runId) === runId ? { status: "ok", events: [event] } : { status: "not_found" };
+      }
+      const matched = [];
+      let nextCursor;
+      let pagesFetched = 0;
+      let truncated = false;
+      do {
+        if (signal == null ? void 0 : signal.aborted) {
+          throw new DOMException("Aborted", "AbortError");
+        }
+        const { error: fetchError, result } = await unwrapServerActionResult(
+          fetchEventsByCorrelationId(env, id, {
+            cursor: nextCursor,
+            sortOrder,
+            limit: 100,
+            withData: false,
+            runId
+          })
+        );
+        if (fetchError) {
+          return { status: "error", message: fetchError.message };
+        }
+        if (signal == null ? void 0 : signal.aborted) {
+          throw new DOMException("Aborted", "AbortError");
+        }
+        pagesFetched += 1;
+        const hydrated = await hydrateEvents(result.data);
+        matched.push(...hydrated.filter((event) => event.runId === runId));
+        const hitPageCap = pagesFetched >= MAX_CORRELATION_SEARCH_PAGES;
+        truncated = truncated || hitPageCap && Boolean(result.hasMore && result.cursor);
+        nextCursor = !hitPageCap && result.hasMore && result.cursor ? result.cursor : void 0;
+      } while (nextCursor);
+      return matched.length > 0 ? { status: "ok", events: matched, truncated: truncated || void 0 } : { status: "not_found" };
+    },
+    [env, runId, sortOrder, hydrateEvents]
+  );
   return {
     events,
     loading,
     error,
     hasMore,
     loadingMore,
-    loadMore
+    loadMore,
+    searchByExactId
   };
 }
 const FRAME_HEADER_SIZE = 4;
@@ -4682,6 +5148,9 @@ function detectEncoding(data) {
 function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   const [chunks, setChunks] = reactExports.useState([]);
   const [isLive, setIsLive] = reactExports.useState(false);
+  const [isInitialLoading, setIsInitialLoading] = reactExports.useState(
+    Boolean(streamId && runId)
+  );
   const [error, setError] = reactExports.useState(null);
   const abortControllerRef = reactExports.useRef(null);
   const chunkIdRef = reactExports.useRef(0);
@@ -4710,9 +5179,8 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
           if (!cryptoKey) {
             return { encrypted: true };
           }
-          const payload = frameData.slice(4);
           hydrated = hydrateData(
-            await decrypt(cryptoKey, payload),
+            await decrypt(frameData, cryptoKey),
             revivers
           );
         } else {
@@ -4729,6 +5197,8 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
   reactExports.useEffect(() => {
     setChunks([]);
     setError(null);
+    setIsLive(false);
+    setIsInitialLoading(Boolean(streamId && runId));
     chunkIdRef.current = 0;
     frameCountRef.current = 0;
     serverCursorRef.current = null;
@@ -4737,13 +5207,12 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       pollTimerRef.current = null;
     }
     if (!streamId || !runId) {
-      setIsLive(false);
+      setIsInitialLoading(false);
       return;
     }
     let mounted = true;
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
-    setIsLive(true);
     const revivers = getWebRevivers();
     const parseLegacyLine = (line) => {
       const chunkId = chunkIdRef.current++;
@@ -4865,13 +5334,14 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
     };
     const readStreamData = async () => {
       try {
-        const cryptoKey = encryptionKey ? await importKey(encryptionKey) : void 0;
+        const cryptoKey = encryptionKey ? await deriveRunPayloadKeys(encryptionKey) : void 0;
         const initialChunks = [];
         const result = await fetchAndParse(initialChunks, cryptoKey);
         if (result.encrypted) {
           if (mounted) {
             setError("This stream is encrypted. Click Decrypt to view.");
             setIsLive(false);
+            setIsInitialLoading(false);
           }
           return;
         }
@@ -4879,11 +5349,13 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         serverCursorRef.current = result.cursor;
         if (!mounted || abortController.signal.aborted) return;
         setChunks(initialChunks);
+        setIsInitialLoading(false);
         if (result.done) {
           setIsLive(false);
           return;
         }
         if (isRunActive(runStatusRef.current)) {
+          setIsLive(true);
           const poll = async () => {
             if (!mounted || abortController.signal.aborted) return;
             try {
@@ -4921,6 +5393,7 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
         if (mounted) {
           setError(err instanceof Error ? err.message : String(err));
           setIsLive(false);
+          setIsInitialLoading(false);
         }
       }
     };
@@ -4941,11 +5414,11 @@ function useStreamReader(env, streamId, runId, encryptionKey, runStatus) {
       setIsLive(false);
     }
   }, [runStatus]);
-  return { chunks, isLive, error };
+  return { chunks, isLive, isInitialLoading, error };
 }
 function LiveStatus({ hasError, errorMessage }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -4963,7 +5436,7 @@ function LiveStatus({ hasError, errorMessage }) {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: hasError ? `Error updating data: ${errorMessage}` : `Content updates every ${LIVE_UPDATE_INTERVAL_MS$1 / 1e3} seconds` }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: hasError ? `Error updating data: ${errorMessage}` : `Content updates every ${LIVE_UPDATE_INTERVAL_MS$1 / 1e3} seconds` }) })
   ] }) });
 }
 ({
@@ -4971,7 +5444,6 @@ function LiveStatus({ hasError, errorMessage }) {
 });
 function RunDetailView({
   runId,
-  // TODO: This should open the right sidebar within the trace viewer
   selectedId: _selectedId
 }) {
   var _a;
@@ -5049,29 +5521,16 @@ function RunDetailView({
       if (error2) {
         throw error2;
       }
-      const fullEvent = encryptionKeyRef.current ? await hydrateResourceIOWithKey(result, encryptionKeyRef.current) : hydrateResourceIO(result);
-      if ("eventData" in fullEvent) {
-        return fullEvent.eventData;
-      }
-      return null;
-    },
-    [env]
-  );
-  const handleLoadSidebarEventData = reactExports.useCallback(
-    async (_correlationId, eventId) => {
-      const { error: error2, result } = await unwrapServerActionResult(
-        fetchEvent(env, runId, eventId, "all")
+      const fullEvent = await hydrateResourceIOAsync(
+        result,
+        encryptionKeyRef.current ?? void 0
       );
-      if (error2) {
-        throw error2;
-      }
-      const fullEvent = encryptionKeyRef.current ? await hydrateResourceIOWithKey(result, encryptionKeyRef.current) : hydrateResourceIO(result);
       if ("eventData" in fullEvent) {
         return fullEvent.eventData;
       }
       return null;
     },
-    [env, runId]
+    [env]
   );
   serverConfig.backendId === "local" || serverConfig.backendId === "@workflow/world-local";
   const {
@@ -5080,7 +5539,10 @@ function RunDetailView({
     loading,
     error,
     update,
-    hasEncryptedData
+    hasEncryptedData,
+    loadMoreTraceData,
+    hasMoreTraceData,
+    isLoadingMoreTraceData
   } = useWorkflowTraceViewerData(env, runId, { live: true });
   const run = runData ?? {};
   const [encryptionKey, setEncryptionKey] = reactExports.useState(null);
@@ -5091,36 +5553,22 @@ function RunDetailView({
     loading: eventsListLoading,
     hasMore: hasMoreEventsTab,
     loadingMore: loadingMoreEventsTab,
-    loadMore: loadMoreEventsTab
+    loadMore: loadMoreEventsTab,
+    searchByExactId
   } = useEventsListData(env, runId, {
     sortOrder: eventsSortOrder,
     encryptionKey: encryptionKey ?? void 0,
     enabled: activeTab === "events"
   });
-  const [spanSelection, setSpanSelection] = reactExports.useState(
-    null
-  );
-  const {
-    data: spanDetailData,
-    loading: spanDetailLoading,
-    error: spanDetailError,
-    refresh: refreshSpanDetail
-  } = useWorkflowResourceData(
-    env,
-    (spanSelection == null ? void 0 : spanSelection.resource) ?? "run",
-    (spanSelection == null ? void 0 : spanSelection.resourceId) ?? "",
-    {
-      runId: spanSelection == null ? void 0 : spanSelection.runId,
-      enabled: Boolean(
-        (spanSelection == null ? void 0 : spanSelection.resource) && (spanSelection == null ? void 0 : spanSelection.resourceId) && spanSelection.resource !== "hook"
-      ),
+  const fetchSpanDetail = reactExports.useCallback(
+    (selection) => fetchSpanDetailResource(env, selection, {
       encryptionKey: encryptionKey ?? void 0
-    }
+    }),
+    [env, encryptionKey]
   );
   const [isDecrypting, setIsDecrypting] = reactExports.useState(false);
   const handleDecrypt = reactExports.useCallback(async () => {
     if (encryptionKey) {
-      refreshSpanDetail();
       return;
     }
     setIsDecrypting(true);
@@ -5135,26 +5583,19 @@ function RunDetailView({
         return;
       }
       setEncryptionKey(keyResult);
-      toast.success("Run data decrypted successfully");
     } finally {
       setIsDecrypting(false);
     }
-  }, [encryptionKey, env, runId, refreshSpanDetail]);
-  const handleSpanSelect = reactExports.useCallback((info) => {
-    setSpanSelection(info);
-  }, []);
+  }, [encryptionKey, env, runId]);
   const sidebarData = reactExports.useMemo(
     () => ({
       run,
       events: allEvents ?? [],
-      spanDetailData: spanDetailData ?? null,
-      spanDetailError,
-      spanDetailLoading,
-      onSpanSelect: handleSpanSelect,
+      fetchSpanDetail,
       onStreamClick: handleStreamClick,
       onRunClick: handleRunRefClick,
       onWakeUpSleep: handleWakeUpSleep,
-      onLoadEventData: handleLoadSidebarEventData,
+      onLoadEventData: handleLoadEventData,
       onResolveHook: handleResolveHook,
       encryptionKey: encryptionKey ?? void 0,
       onDecrypt: handleDecrypt,
@@ -5164,14 +5605,11 @@ function RunDetailView({
     [
       run,
       allEvents,
-      spanDetailData,
-      spanDetailError,
-      spanDetailLoading,
-      handleSpanSelect,
+      fetchSpanDetail,
       handleStreamClick,
       handleRunRefClick,
       handleWakeUpSleep,
-      handleLoadSidebarEventData,
+      handleLoadEventData,
       handleResolveHook,
       encryptionKey,
       handleDecrypt,
@@ -5187,6 +5625,7 @@ function RunDetailView({
   const {
     chunks: streamChunks,
     isLive: streamIsLive,
+    isInitialLoading: streamIsInitialLoading,
     error: streamError
   } = useStreamReader(env, selectedStreamId, runId, encryptionKey, run.status);
   const handleCancelClick = () => {
@@ -5199,7 +5638,7 @@ function RunDetailView({
       setShowCancelDialog(false);
       await cancelRun(env, runId);
       await update();
-      toast.success("Run cancelled successfully");
+      toast.success("Run cancelled");
     } catch (err) {
       console.error("Failed to cancel run:", err);
       toast.error("Failed to cancel run", {
@@ -5218,7 +5657,7 @@ function RunDetailView({
       setRerunning(true);
       setShowRerunDialog(false);
       const newRunId = await recreateRun(env, run.runId);
-      toast.success("New run started successfully", {
+      toast.success("New run started", {
         description: `Run ID: ${newRunId}`
       });
       navigate(`/run/${newRunId}`);
@@ -5235,8 +5674,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;
@@ -5336,12 +5775,12 @@ function RunDetailView({
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs", children: run.runId ? run.completedAt ? /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.completedAt }) : "-" : /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "w-[110px] h-[20px]" }) })
             ] }),
             run.expiredAt != null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground cursor-help flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-muted-foreground cursor-help flex items-center gap-1", children: [
                   "Expired",
                   /* @__PURE__ */ jsxRuntimeExports.jsx(CircleQuestionMark, { className: "w-3 h-3" })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "The storage data for this run has expired and is no longer available." }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "The storage data for this run has expired and is no longer available." }) })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RelativeTime, { date: run.expiredAt }) })
             ] })
@@ -5370,12 +5809,16 @@ function RunDetailView({
                 "Streams"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              NewTraceViewer,
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TraceViewer,
               {
                 run,
                 events: allEvents ?? [],
-                sidebarData
+                loading,
+                sidebarData,
+                onLoadMore: loadMoreTraceData,
+                hasMore: hasMoreTraceData,
+                isLoadingMore: isLoadingMoreTraceData
               }
             ) }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "events", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load events list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5393,118 +5836,58 @@ function RunDetailView({
                 onSortOrderChange: setEventsSortOrder,
                 onDecrypt: handleDecrypt,
                 isDecrypting,
-                hasEncryptedData
+                hasEncryptedData,
+                onExactIdSearch: searchByExactId
               }
             ) }) }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "w-64 flex-shrink-0 border rounded-lg overflow-hidden",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-background-100)"
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "streams", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { title: "Failed to load stream data", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative -mx-6 flex h-full min-h-0 overflow-hidden border-t border-gray-alpha-400 bg-background-100", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-[340px] shrink-0 flex-col border-r border-gray-alpha-400 bg-background-100", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: "h-10 min-h-10 border-b border-gray-alpha-400"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1 divide-y divide-gray-400 overflow-y-auto", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col divide-y divide-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-24" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-32" }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center pl-4 pr-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1, { className: "h-3.5 w-20" }) })
+                ] }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4 py-2 text-label-12 text-red-900", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center px-4 text-label-12 text-gray-900", children: "No streams found for this run" }) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedStreamId(streamId),
+                    className: `flex h-10 w-full min-w-0 items-center truncate pl-4 pr-2 text-left text-label-14 transition-colors ${selectedStreamId === streamId ? "bg-gray-100 text-gray-1000 hover:bg-gray-200 active:bg-gray-200" : "bg-transparent text-gray-900 hover:bg-gray-100 hover:text-gray-1000 focus-visible:bg-gray-100 focus-visible:text-gray-1000"}`,
+                    title: streamId,
+                    children: streamId
                   },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: "px-3 py-2 border-b text-xs font-medium",
-                        style: {
-                          borderColor: "var(--ds-gray-300)",
-                          color: "var(--ds-gray-900)"
-                        },
-                        children: [
-                          "Streams (",
-                          streams.length,
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-auto max-h-[calc(100vh-400px)]", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : streamsError ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-xs text-destructive", children: streamsError.message }) : streams.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "p-4 text-xs",
-                        style: { color: "var(--ds-gray-600)" },
-                        children: "No streams found for this run"
-                      }
-                    ) : streams.map((streamId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setSelectedStreamId(streamId),
-                        className: "w-full text-left px-3 py-2 text-xs font-mono truncate hover:bg-accent transition-colors",
-                        style: {
-                          backgroundColor: selectedStreamId === streamId ? "var(--ds-gray-200)" : "transparent",
-                          color: "var(--ds-gray-1000)"
-                        },
-                        title: streamId,
-                        children: streamId
-                      },
-                      streamId
-                    )) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: "h-full flex flex-col items-center justify-center gap-3 rounded-lg border p-4",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Lock,
-                      {
-                        className: "h-6 w-6",
-                        style: { color: "var(--ds-gray-700)" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "text-sm",
-                        style: { color: "var(--ds-gray-900)" },
-                        children: "This stream is encrypted."
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      DecryptButton,
-                      {
-                        onClick: handleDecrypt,
-                        loading: isDecrypting
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  streamId
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden bg-background-100", children: streamsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StreamViewerSkeleton, {}) }) : selectedStreamId ? (streamError == null ? void 0 : streamError.includes("encrypted")) && !encryptionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Lock, { className: "h-8 w-8 text-gray-700" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 font-medium text-gray-1000", children: "Encrypted Stream" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-12 text-gray-900", children: "Decrypt this stream to view its chunks." })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DecryptButton,
+                  {
+                    onClick: handleDecrypt,
+                    loading: isDecrypting
+                  }
+                )
+              ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 StreamViewer,
                 {
                   streamId: selectedStreamId,
                   chunks: streamChunks,
                   isLive: streamIsLive,
+                  isLoading: streamIsInitialLoading,
                   error: (streamError == null ? void 0 : streamError.includes("encrypted")) ? null : streamError
                 }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: "h-full flex items-center justify-center rounded-lg border",
-                  style: {
-                    borderColor: "var(--ds-gray-300)",
-                    backgroundColor: "var(--ds-gray-100)"
-                  },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      className: "text-sm",
-                      style: { color: "var(--ds-gray-600)" },
-                      children: streams.length > 0 ? "Select a stream to view its data" : "No streams available"
-                    }
-                  )
-                }
-              ) })
+              ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-label-14 text-gray-600", children: streams.length > 0 ? "Select a stream to view its data" : "No streams available" }) }) })
             ] }) }) }),
             false
           ]