@workflow/web 5.0.0-beta.10 → 5.0.0-beta.11

package/build/server/assets/{server-build-ClDPbfo3.js → server-build-D82EKMvZ.js}

@@ -14,7 +14,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
 var _a2, _b, _c, _listeners, _onabort, _reader, _root, _hasMagic, _uflag, _parts, _parent, _parentIndex, _negs, _filledNegs, _options, _toString, _emptyExt, _AST_instances, fillNegs_fn, _AST_static, parseAST_fn, canAdoptWithSpace_fn, canAdopt_fn, canAdoptType_fn, adoptWithSpace_fn, adopt_fn, canUsurpType_fn, canUsurp_fn, usurp_fn, flatten_fn, partsToRegExp_fn, parseGlob_fn, _Minimatch_instances, matchGlobstar_fn, matchGlobStarBodySections_fn, matchOne_fn, _worldPromise, _Run_instances, lazyWorldPromise_get, _encryptionKeyPromise, _resilientStart, getEncryptionKey_fn, pollReturnValue_fn;
-import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, d as withErrorBoundaryProps, M as Meta, L as Links, e as ScrollRestoration, f as Scripts, O as Outlet, u as useNavigate, h as useSearchParams, i as Link$1, j as useRouteError, k as isRouteErrorResponse, l as useLocation, m as useParams } from "./app-Cgrcb-fS.js";
+import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, d as withErrorBoundaryProps, M as Meta, L as Links, e as ScrollRestoration, f as Scripts, O as Outlet, u as useNavigate, h as useSearchParams, i as Link$1, j as useRouteError, k as isRouteErrorResponse, l as useLocation, m as useParams } from "./app-C26OkrrR.js";
 import require$$0$3, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1 from "crypto";
@@ -26078,7 +26078,7 @@ var Anchor$1 = PopperAnchor$1;
 var Content$4 = PopperContent$1;
 var Arrow$3 = PopperArrow$1;
 var PORTAL_NAME$9 = "Portal";
-var Portal$6 = reactExports.forwardRef((props, forwardedRef) => {
+var Portal$7 = reactExports.forwardRef((props, forwardedRef) => {
   var _a3;
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = reactExports.useState(false);
@@ -26086,7 +26086,7 @@ var Portal$6 = reactExports.forwardRef((props, forwardedRef) => {
   const container = containerProp || mounted && ((_a3 = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a3.body);
   return container ? ReactDOM.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(Primitive$2.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
-Portal$6.displayName = PORTAL_NAME$9;
+Portal$7.displayName = PORTAL_NAME$9;
 function useStateMachine$1(initialState2, machine) {
   return reactExports.useReducer((state, event) => {
     const nextState = machine[state][event];
@@ -26312,7 +26312,7 @@ var PROVIDER_NAME = "TooltipProvider";
 var DEFAULT_DELAY_DURATION = 700;
 var TOOLTIP_OPEN = "tooltip.open";
 var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
-var TooltipProvider = (props) => {
+var TooltipProvider$1 = (props) => {
   const {
     __scopeTooltip,
     delayDuration = DEFAULT_DELAY_DURATION,
@@ -26353,10 +26353,10 @@ var TooltipProvider = (props) => {
     }
   );
 };
-TooltipProvider.displayName = PROVIDER_NAME;
+TooltipProvider$1.displayName = PROVIDER_NAME;
 var TOOLTIP_NAME = "Tooltip";
 var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
-var Tooltip$1 = (props) => {
+var Tooltip$2 = (props) => {
   const {
     __scopeTooltip,
     children: children2,
@@ -26446,9 +26446,9 @@ var Tooltip$1 = (props) => {
     }
   ) });
 };
-Tooltip$1.displayName = TOOLTIP_NAME;
+Tooltip$2.displayName = TOOLTIP_NAME;
 var TRIGGER_NAME$6 = "TooltipTrigger";
-var TooltipTrigger$1 = reactExports.forwardRef(
+var TooltipTrigger$2 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTooltip, ...triggerProps } = props;
     const context = useTooltipContext(TRIGGER_NAME$6, __scopeTooltip);
@@ -26496,13 +26496,19 @@ var TooltipTrigger$1 = reactExports.forwardRef(
     ) });
   }
 );
-TooltipTrigger$1.displayName = TRIGGER_NAME$6;
+TooltipTrigger$2.displayName = TRIGGER_NAME$6;
 var PORTAL_NAME$8 = "TooltipPortal";
 var [PortalProvider$3, usePortalContext$3] = createTooltipContext(PORTAL_NAME$8, {
   forceMount: void 0
 });
+var TooltipPortal$1 = (props) => {
+  const { __scopeTooltip, forceMount, children: children2, container } = props;
+  const context = useTooltipContext(PORTAL_NAME$8, __scopeTooltip);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider$3, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$7, { asChild: true, container, children: children2 }) }) });
+};
+TooltipPortal$1.displayName = PORTAL_NAME$8;
 var CONTENT_NAME$8 = "TooltipContent";
-var TooltipContent$1 = reactExports.forwardRef(
+var TooltipContent$2 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext$3(CONTENT_NAME$8, props.__scopeTooltip);
     const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
@@ -26637,7 +26643,7 @@ var TooltipContentImpl = reactExports.forwardRef(
     );
   }
 );
-TooltipContent$1.displayName = CONTENT_NAME$8;
+TooltipContent$2.displayName = CONTENT_NAME$8;
 var ARROW_NAME$4 = "TooltipArrow";
 var TooltipArrow = reactExports.forwardRef(
   (props, forwardedRef) => {
@@ -26766,9 +26772,12 @@ function getHullPresorted(points) {
     return upperHull.concat(lowerHull);
   }
 }
-var Root3$1 = Tooltip$1;
-var Trigger$4 = TooltipTrigger$1;
-var Content2$4 = TooltipContent$1;
+var Provider$2 = TooltipProvider$1;
+var Root3$1 = Tooltip$2;
+var Trigger$4 = TooltipTrigger$2;
+var Portal$6 = TooltipPortal$1;
+var Content2$4 = TooltipContent$2;
+var Arrow2$1 = TooltipArrow;
 var M$2 = (e, i, s2, u4, m2, a2, l, h2) => {
   let d2 = document.documentElement, w2 = ["light", "dark"];
   function p2(n) {
@@ -80618,7 +80627,7 @@ var tn = f("block", "before:content-[counter(line)]", "before:inline-block", "be
 var et = ({ className: e, language: t, style: o, isIncomplete: n, ...s2 }) => jsxRuntimeExports.jsx("div", { className: f("my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2", e), "data-incomplete": n || void 0, "data-language": t, "data-streamdown": "code-block", style: { contentVisibility: "auto", containIntrinsicSize: "auto 200px", ...o }, ...s2 });
 var Se = reactExports.createContext({ code: "" }), de = () => reactExports.useContext(Se);
 var ot = ({ language: e }) => jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center text-muted-foreground text-xs", "data-language": e, "data-streamdown": "code-block-header", children: jsxRuntimeExports.jsx("span", { className: "ml-1 font-mono lowercase", children: e }) });
-var cn$1 = /\n+$/, dn = reactExports.lazy(() => import("./highlighted-body-B3W2YXNL-BCA9A7WB.js").then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => import("./highlighted-body-B3W2YXNL-2D25w_37.js").then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -80940,7 +80949,7 @@ var Dt = ({ children: e, className: t, onDownload: o, onError: n }) => {
   }, []), jsxRuntimeExports.jsxs("div", { className: "relative", ref: i, children: [jsxRuntimeExports.jsx("button", { className: f("cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", t), disabled: c, onClick: () => r2(!s2), title: "Download table", type: "button", children: e != null ? e : jsxRuntimeExports.jsx(Z, { size: 14 }) }), s2 ? jsxRuntimeExports.jsxs("div", { className: "absolute top-full right-0 z-10 mt-1 min-w-[120px] overflow-hidden rounded-md border border-border bg-background shadow-lg", children: [jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("csv"), title: "Download table as CSV", type: "button", children: "CSV" }), jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("markdown"), title: "Download table as Markdown", type: "button", children: "Markdown" })] }) : null] });
 };
 var Vt = ({ children: e, className: t, showControls: o, ...n }) => jsxRuntimeExports.jsxs("div", { className: "my-4 flex flex-col gap-2 rounded-lg border border-border bg-sidebar p-2", "data-streamdown": "table-wrapper", children: [o ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-1", children: [jsxRuntimeExports.jsx(Ht, {}), jsxRuntimeExports.jsx(Dt, {})] }) : null, jsxRuntimeExports.jsx("div", { className: "border-collapse overflow-x-auto overscroll-y-auto rounded-md border border-border bg-background", children: jsxRuntimeExports.jsx("table", { className: f("w-full divide-y divide-border", t), "data-streamdown": "table", ...n, children: e }) })] });
-var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-CbLetKvR.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-BDYN9XOo.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
 function ke(e, t) {
   if (!(e != null && e.position || t != null && t.position)) return true;
   if (!(e != null && e.position && (t != null && t.position))) return false;
@@ -83585,8 +83594,58 @@ const iconButtonVariants = cva([
     size: "tiny"
   }
 });
-function IconButton({ className, variant, size: size2, type = "button", ...props }) {
-  return jsxRuntimeExports.jsx("button", { type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props });
+const IconButton = reactExports.forwardRef(({ className, variant, size: size2, type = "button", ...props }, ref) => jsxRuntimeExports.jsx("button", { ref, type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props }));
+IconButton.displayName = "IconButton";
+const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
+const ROWS = [
+  { id: "r0", name: 62, off: 0, bar: 72 },
+  { id: "r1", name: 78, off: 6, bar: 48 },
+  { id: "r2", name: 50, off: 10, bar: 55 },
+  { id: "r3", name: 84, off: 18, bar: 30 },
+  { id: "r4", name: 45, off: 18, bar: 42 },
+  { id: "r5", name: 66, off: 34, bar: 38 },
+  { id: "r6", name: 55, off: 41, bar: 25 },
+  { id: "r7", name: 40, off: 50, bar: 30 }
+];
+const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
+const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
+function TraceViewerSkeleton() {
+  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { 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((id2) => jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5 w-9" }, id2)) }) })] }), 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$2, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton$2, { 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$2, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
+}
+function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
+  const [entry2, setEntry] = reactExports.useState();
+  const frozen = (entry2 == null ? void 0 : entry2.isIntersecting) && freezeOnceVisible;
+  reactExports.useEffect(() => {
+    const node2 = elementRef == null ? void 0 : elementRef.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || frozen || !node2)
+      return;
+    const updateEntry = ([entry3]) => {
+      setEntry(entry3);
+    };
+    const observer = new IntersectionObserver(updateEntry, {
+      threshold,
+      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
+      rootMargin
+    });
+    observer.observe(node2);
+    return () => observer.disconnect();
+  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
+  return entry2;
+}
+function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
+  const sentinelRef = reactExports.useRef(null);
+  const entry2 = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
+  const loadMoreRef = reactExports.useRef(loadMore);
+  reactExports.useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  reactExports.useEffect(() => {
+    if ((entry2 == null ? void 0 : entry2.isIntersecting) && hasMore && !isLoadingMore) {
+      loadMoreRef.current();
+    }
+  }, [entry2 == null ? void 0 : entry2.isIntersecting, hasMore, isLoadingMore]);
+  return sentinelRef;
 }
 const QUERY = "(prefers-reduced-motion: reduce)";
 const useReducedMotion = () => {
@@ -83606,6 +83665,9 @@ const useReducedMotion = () => {
   }, []);
   return reduced;
 };
+function Kbd({ children: children2, className }) {
+  return jsxRuntimeExports.jsx("kbd", { className: cn$4("inline-flex h-5 min-w-5 items-center justify-center rounded bg-background-100/20 px-1 text-center font-sans text-xs leading-none", className), children: children2 });
+}
 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" }) });
 };
@@ -84063,6 +84125,54 @@ function computeSpanSegments(span) {
       return [];
   }
 }
+const INITIAL_VISIBLE_ROWS = 60;
+function getScrollParent(el) {
+  let node2 = (el == null ? void 0 : el.parentElement) ?? null;
+  while (node2) {
+    const overflowY = getComputedStyle(node2).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll")
+      return node2;
+    node2 = node2.parentElement;
+  }
+  return null;
+}
+function useRowWindow(ref, rowCount, rowHeight, overscan = 12) {
+  const [range2, setRange] = reactExports.useState(() => ({
+    start: 0,
+    end: Math.min(rowCount, INITIAL_VISIBLE_ROWS)
+  }));
+  reactExports.useEffect(() => {
+    const self2 = ref.current;
+    const el = getScrollParent(self2);
+    if (!self2 || !el)
+      return;
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      const offset2 = self2.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop;
+      const top = el.scrollTop - offset2;
+      const start2 = Math.max(0, Math.floor(top / rowHeight) - overscan);
+      const end = Math.min(rowCount, Math.ceil((top + el.clientHeight) / rowHeight) + overscan);
+      setRange((prev) => prev.start === start2 && prev.end === end ? prev : { start: start2, end });
+    };
+    const onScroll = () => {
+      if (!raf)
+        raf = requestAnimationFrame(measure);
+    };
+    measure();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro2 = new ResizeObserver(measure);
+    ro2.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro2.disconnect();
+      if (raf)
+        cancelAnimationFrame(raf);
+    };
+  }, [ref, rowCount, rowHeight, overscan]);
+  return range2;
+}
+const ROW_HEIGHT_PX = 40;
 const eventStyles = {
   run: { icon: WorkflowIcon, className: "text-blue-900" },
   step: { icon: StepForwardIcon, className: "text-green-900" },
@@ -84088,14 +84198,17 @@ const EventRow = ({ span, isSelected, isDimmed, onSelectSpan }) => {
   return jsxRuntimeExports.jsx("li", { className: cn$4("relative overflow-clip group transition-opacity", ROW_HEIGHT_CLASS, isDimmed && "opacity-35"), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn$4("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon2, { 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 EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
-  return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: spans.map((span) => {
-    return jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId);
-  }) });
+  const listRef = reactExports.useRef(null);
+  const { start: start2, 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-alpha-400 border-b border-gray-alpha-400", style: {
+    paddingTop: start2 * ROW_HEIGHT_PX,
+    paddingBottom: (spans.length - end) * ROW_HEIGHT_PX
+  }, children: spans.slice(start2, 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: children2, className, defaultStartWidth = DEFAULT_START_PX, startHeader, endHeader }) {
+function SplitPane({ children: children2, className, defaultStartWidth = DEFAULT_START_PX, startHeader, endHeader, scrollContainerRef }) {
   const parts = reactExports.Children.toArray(children2);
   if (parts.length !== 2) {
     throw new Error("SplitPane expects exactly two children");
@@ -84114,6 +84227,12 @@ function SplitPane({ children: children2, className, defaultStartWidth = DEFAULT
         cancelAnimationFrame(rafRef.current);
     };
   }, []);
+  const setContainerRef = reactExports.useCallback((node2) => {
+    containerRef.current = node2;
+    if (scrollContainerRef) {
+      scrollContainerRef.current = node2;
+    }
+  }, [scrollContainerRef]);
   const clampPx = reactExports.useCallback((px) => {
     const el = containerRef.current;
     if (!el)
@@ -84179,9 +84298,9 @@ function SplitPane({ children: children2, className, defaultStartWidth = DEFAULT
   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$4("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$4("grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", isDragging && "select-none"), style: { gridTemplateColumns: colTemplate }, children: [start2, gutter, end] })] });
+    return jsxRuntimeExports.jsxs("div", { className: cn$4("flex flex-col h-full min-h-0", className), children: [jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [jsxRuntimeExports.jsx("div", { children: startHeader }), jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), jsxRuntimeExports.jsx("div", { children: endHeader })] }), jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn$4("grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", isDragging && "select-none"), style: { gridTemplateColumns: colTemplate }, children: [start2, gutter, end] })] });
   }
-  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: cn$4("grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto", isDragging && "select-none", className), style: { gridTemplateColumns: colTemplate, height: "100%" }, children: [start2, gutter, end] });
+  return jsxRuntimeExports.jsxs("div", { ref: setContainerRef, className: cn$4("grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto", isDragging && "select-none", className), style: { gridTemplateColumns: colTemplate, height: "100%" }, children: [start2, gutter, end] });
 }
 const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
@@ -84309,11 +84428,10 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   }, [onSelect, span.spanId]);
   return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
 });
-const DELTA_ROW_HEIGHT_PX = 40;
 const DELTA_CAP_HEIGHT_PX = 8;
 const DELTA_ROW_OFFSET_PX = 8;
 const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, rightFrac, label, rowIndex }) {
-  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * DELTA_ROW_HEIGHT_PX;
+  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * ROW_HEIGHT_PX;
   return jsxRuntimeExports.jsxs("div", { className: "absolute pointer-events-none", style: {
     left: `${leftFrac * 100}%`,
     width: `${(rightFrac - leftFrac) * 100}%`,
@@ -84329,6 +84447,7 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
   const viewDuration = viewEnd - viewStart;
   const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
+  const { start: start2, end } = useRowWindow(containerRef, spans.length, ROW_HEIGHT_PX);
   reactExports.useEffect(() => {
     const el = containerRef.current;
     if (!el)
@@ -84340,16 +84459,20 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
     return () => ro2.disconnect();
   }, []);
   const gaps = reactExports.useMemo(() => computeSpanGaps(spans, viewStart, viewEnd), [spans, viewStart, viewEnd]);
-  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", style: { minHeight: spans.length * ROW_HEIGHT_PX }, children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, `${marker2.position}-${marker2.label}`) : null
-  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start2 * ROW_HEIGHT_PX}px)` }, children: spans.slice(start2, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)) }), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
 }
+const TooltipProvider = Provider$2;
+const Tooltip$1 = Root3$1;
+const TooltipTrigger$1 = Trigger$4;
+const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal$6, { children: jsxRuntimeExports.jsxs(Content2$4, { ref, sideOffset, className: cn$4("z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none", className), ...props, children: [children2, showArrow ? jsxRuntimeExports.jsx(Arrow2$1, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
+TooltipContent$1.displayName = Content2$4.displayName;
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
 function ActiveSpanProvider({ spans, children: children2 }) {
-  var _a3;
-  const [activeSpanId, setActiveSpanId] = reactExports.useState(((_a3 = spans[0]) == null ? void 0 : _a3.spanId) ?? null);
+  const [activeSpanId, setActiveSpanId] = reactExports.useState(null);
   reactExports.useEffect(() => {
     setActiveSpanId((currentSpanId) => {
       if (!currentSpanId) {
@@ -84465,10 +84588,10 @@ function useSelectedSpanInfo() {
     };
   }, [activeSpan, sidebar]);
 }
-function NewTraceViewer$1({ trace: trace2 }) {
-  return jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace2.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace: trace2 }) });
+function NewTraceViewer$1({ trace: trace2, onLoadMore, hasMore, isLoadingMore }) {
+  return jsxRuntimeExports.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace2.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace: trace2, onLoadMore, hasMore, isLoadingMore }) }) });
 }
-function NewTraceViewerContent({ trace: trace2 }) {
+function NewTraceViewerContent({ trace: trace2, onLoadMore, hasMore, isLoadingMore }) {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
   const sidebar = useSidebarDataOptional();
   const selectedSpan = useSelectedSpanInfo();
@@ -84476,6 +84599,15 @@ function NewTraceViewerContent({ trace: trace2 }) {
   const deferredSearchQuery = reactExports.useDeferredValue(searchQuery);
   const searchResult = reactExports.useMemo(() => searchSpans(trace2.spans, deferredSearchQuery), [trace2.spans, deferredSearchQuery]);
   const root2 = reactExports.useMemo(() => computeRootBounds(trace2.spans), [trace2.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: root2.startTime,
     end: root2.startTime + root2.duration
@@ -84737,15 +84869,15 @@ function NewTraceViewerContent({ trace: trace2 }) {
   prevSpanIdRef.current = prevSpanId;
   nextSpanIdRef.current = nextSpanId;
   handleSelectSpanRef.current = handleSelectSpan;
-  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 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) => {
+  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, { scrollContainerRef, startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
     if (e.key === "Escape" && searchQuery) {
       e.preventDefault();
       e.stopPropagation();
       setSearchQuery("");
     }
-  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx("kbd", { className: "inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, 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: trace2.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && 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.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate to previous span", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate to next span", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }), 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: clearActiveSpan, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary$1, { 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: root2.startTime, onClose: clearActiveSpan }) : null] });
+  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx("kbd", { className: "inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace2.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && 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.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { 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: clearActiveSpan, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary$1, { 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: root2.startTime, onClose: clearActiveSpan }) : null] });
 }
-const NewTraceViewer = ({ run, events: events2, sidebarData }) => {
+const NewTraceViewer = ({ run, events: events2, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const traceWithMeta = reactExports.useMemo(() => {
     if (!(run == null ? void 0 : run.runId)) {
       return void 0;
@@ -84753,10 +84885,10 @@ const NewTraceViewer = ({ run, events: events2, sidebarData }) => {
     return buildTrace(run, events2, /* @__PURE__ */ new Date());
   }, [run, events2]);
   const trace2 = traceWithMeta;
-  if (!trace2) {
-    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 (!trace2 || loading && events2.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: trace2 }) }) });
+  return jsxRuntimeExports.jsx(SidebarDataProvider, { value: sidebarData, children: jsxRuntimeExports.jsx("div", { className: "relative w-full h-full flex", children: jsxRuntimeExports.jsx(NewTraceViewer$1, { trace: trace2, onLoadMore, hasMore, isLoadingMore }) }) });
 };
 function analyzeEvents(events2) {
   if (!events2 || events2.length === 0) {
@@ -88729,7 +88861,7 @@ const encryption = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   encrypt: encrypt$1,
   importKey
 }, Symbol.toStringTag, { value: "Module" }));
-const version$1 = "5.0.0-beta.10";
+const version$1 = "5.0.0-beta.11";
 const WorldCacheKey = Symbol.for("@workflow/world//cache");
 const WorldCachePromiseKey = Symbol.for("@workflow/world//cachePromise");
 const GetWorldFnKey$1 = Symbol.for("@workflow/world//getWorldFn");
@@ -89064,6 +89196,7 @@ const STABLE_ULID = Symbol.for("WORKFLOW_STABLE_ULID");
 const STREAM_NAME_SYMBOL = Symbol.for("WORKFLOW_STREAM_NAME");
 const STREAM_TYPE_SYMBOL = Symbol.for("WORKFLOW_STREAM_TYPE");
 const STREAM_SERVER_RUN_ID_SYMBOL = Symbol.for("WORKFLOW_STREAM_SERVER_RUN_ID");
+const STREAM_SERVER_DEPLOYMENT_ID_SYMBOL = Symbol.for("WORKFLOW_STREAM_SERVER_DEPLOYMENT_ID");
 const BODY_INIT_SYMBOL = Symbol.for("BODY_INIT");
 const WEBHOOK_RESPONSE_WRITABLE = Symbol.for("WEBHOOK_RESPONSE_WRITABLE");
 const WORKFLOW_CLASS_REGISTRY = Symbol.for("workflow-class-registry");
@@ -91322,7 +91455,15 @@ function getExternalReducers(global2 = globalThis, ops, runId, cryptoKey) {
       const existingName = value[STREAM_NAME_SYMBOL];
       const existingRunId = value[STREAM_SERVER_RUN_ID_SYMBOL];
       if (typeof existingName === "string" && typeof existingRunId === "string") {
-        return { name: existingName, runId: existingRunId };
+        const descriptor = {
+          name: existingName,
+          runId: existingRunId
+        };
+        const existingDeploymentId = value[STREAM_SERVER_DEPLOYMENT_ID_SYMBOL];
+        if (typeof existingDeploymentId === "string") {
+          descriptor.deploymentId = existingDeploymentId;
+        }
+        return descriptor;
       }
       const streamId = (global2[STABLE_ULID] || defaultUlid)();
       const name2 = `strm_${streamId}`;
@@ -91375,6 +91516,10 @@ function getWorkflowReducers(global2 = globalThis) {
       const foreignRunId = value[STREAM_SERVER_RUN_ID_SYMBOL];
       if (typeof foreignRunId === "string")
         s2.runId = foreignRunId;
+      const foreignDeploymentId = value[STREAM_SERVER_DEPLOYMENT_ID_SYMBOL];
+      if (typeof foreignDeploymentId === "string") {
+        s2.deploymentId = foreignDeploymentId;
+      }
       return s2;
     },
     // AbortController/AbortSignal in workflow context — just read symbols (handles).
@@ -91444,6 +91589,10 @@ function getStepReducers(global2 = globalThis, ops, runId, cryptoKey) {
       const s2 = { name: name2 };
       if (typeof foreignRunId === "string")
         s2.runId = foreignRunId;
+      const foreignDeploymentId = value[STREAM_SERVER_DEPLOYMENT_ID_SYMBOL];
+      if (typeof foreignDeploymentId === "string") {
+        s2.deploymentId = foreignDeploymentId;
+      }
       return s2;
     },
     AbortController: (value) => {
@@ -91577,6 +91726,13 @@ function getCommonRevivers(global2 = globalThis) {
     ...getCommonRevivers$1(global2)
   };
 }
+async function getForwardedWritableEncryptionKey(runId, deploymentId) {
+  const world = await getWorldLazy();
+  if (!world.getEncryptionKeyForRun)
+    return void 0;
+  const rawKey = deploymentId ? await world.getEncryptionKeyForRun(runId, { deploymentId }) : await world.getEncryptionKeyForRun(await world.runs.get(runId));
+  return rawKey ? await importKey(rawKey, ["encrypt"]) : void 0;
+}
 function getExternalRevivers(global2 = globalThis, ops, runId, cryptoKey) {
   return {
     ...getCommonRevivers(global2),
@@ -91639,12 +91795,7 @@ function getExternalRevivers(global2 = globalThis, ops, runId, cryptoKey) {
     },
     WritableStream: (value) => {
       const targetRunId = typeof value.runId === "string" ? value.runId : runId;
-      const targetKey = targetRunId === runId ? cryptoKey : (async () => {
-        var _a3;
-        const world = await getWorldLazy();
-        const rawKey = await ((_a3 = world.getEncryptionKeyForRun) == null ? void 0 : _a3.call(world, targetRunId));
-        return rawKey ? await importKey(rawKey, ["encrypt"]) : void 0;
-      })();
+      const targetKey = targetRunId === runId ? cryptoKey : getForwardedWritableEncryptionKey(targetRunId, value.deploymentId);
       const serialize2 = getSerializeStream(getExternalReducers(global2, ops, targetRunId, targetKey), targetKey);
       const serverWritable = new WorkflowServerWritableStream(targetRunId, value.name);
       const state = createFlushableState();
@@ -91660,6 +91811,12 @@ function getExternalRevivers(global2 = globalThis, ops, runId, cryptoKey) {
         value: targetRunId,
         writable: false
       });
+      if (typeof value.deploymentId === "string") {
+        Object.defineProperty(serialize2.writable, STREAM_SERVER_DEPLOYMENT_ID_SYMBOL, {
+          value: value.deploymentId,
+          writable: false
+        });
+      }
       return serialize2.writable;
     },
     AbortController: (value) => reviveAbortController(value, ops, runId),
@@ -91730,6 +91887,12 @@ function getWorkflowRevivers(global2 = globalThis) {
           writable: false
         };
       }
+      if (typeof value.deploymentId === "string") {
+        descriptor[STREAM_SERVER_DEPLOYMENT_ID_SYMBOL] = {
+          value: value.deploymentId,
+          writable: false
+        };
+      }
       return Object.create(global2.WritableStream.prototype, descriptor);
     },
     // AbortController/AbortSignal revived inside the workflow VM. Use the
@@ -91759,7 +91922,7 @@ function getWorkflowRevivers(global2 = globalThis) {
     }
   };
 }
-function getStepRevivers(global2 = globalThis, ops, runId, cryptoKey) {
+function getStepRevivers(global2 = globalThis, ops, runId, cryptoKey, deploymentId) {
   return {
     ...getCommonRevivers(global2),
     // StepFunction reviver for step context - returns raw step function
@@ -91875,7 +92038,7 @@ function getStepRevivers(global2 = globalThis, ops, runId, cryptoKey) {
         pollReadableLock(userReadable, state);
         return userReadable;
       } else {
-        const transform2 = getDeserializeStream(getStepRevivers(global2, ops, runId, cryptoKey), cryptoKey);
+        const transform2 = getDeserializeStream(getStepRevivers(global2, ops, runId, cryptoKey, deploymentId), cryptoKey);
         const state = createFlushableState();
         ops.push(state.promise);
         flushablePipe(readable2, transform2.writable, state).catch(() => {
@@ -91886,12 +92049,8 @@ function getStepRevivers(global2 = globalThis, ops, runId, cryptoKey) {
     },
     WritableStream: (value) => {
       const targetRunId = typeof value.runId === "string" ? value.runId : runId;
-      const targetKey = targetRunId === runId ? cryptoKey : (async () => {
-        var _a3;
-        const world = await getWorldLazy();
-        const rawKey = await ((_a3 = world.getEncryptionKeyForRun) == null ? void 0 : _a3.call(world, targetRunId));
-        return rawKey ? await importKey(rawKey, ["encrypt"]) : void 0;
-      })();
+      const targetDeploymentId = typeof value.deploymentId === "string" ? value.deploymentId : targetRunId === runId ? deploymentId : void 0;
+      const targetKey = targetRunId === runId ? cryptoKey : getForwardedWritableEncryptionKey(targetRunId, targetDeploymentId);
       const serialize2 = getSerializeStream(getStepReducers(global2, ops, targetRunId, targetKey), targetKey);
       const serverWritable = new WorkflowServerWritableStream(targetRunId, value.name);
       const state = createFlushableState();
@@ -91907,6 +92066,12 @@ function getStepRevivers(global2 = globalThis, ops, runId, cryptoKey) {
         value: targetRunId,
         writable: false
       });
+      if (targetDeploymentId) {
+        Object.defineProperty(serialize2.writable, STREAM_SERVER_DEPLOYMENT_ID_SYMBOL, {
+          value: targetDeploymentId,
+          writable: false
+        });
+      }
       return serialize2.writable;
     },
     AbortController: (value) => reviveAbortController(value, ops, runId),
@@ -91966,11 +92131,11 @@ async function dehydrateStepArguments(value, _runId, key, global2 = globalThis,
     throw new SerializationError(message2, { hint: hint2, cause });
   }
 }
-async function hydrateStepArguments(value, runId, key, ops = [], global2 = globalThis, extraRevivers = {}) {
+async function hydrateStepArguments(value, runId, key, ops = [], global2 = globalThis, extraRevivers = {}, deploymentId) {
   return deserialize$1(value, key, {
     global: global2,
     extraRevivers: {
-      ...getStreamAndRequestRevivers(getStepRevivers(global2, ops, runId, key)),
+      ...getStreamAndRequestRevivers(getStepRevivers(global2, ops, runId, key, deploymentId)),
       ...extraRevivers
     }
   });
@@ -118649,7 +118814,7 @@ function createLocalWorld(args) {
         const basedir = mergedConfig.dataDir;
         const hooksDir = path$3.join(basedir, "hooks");
         const taggedHookFiles = await listTaggedFiles(hooksDir, tag);
-        const { HookSchema: HookSchema2 } = await import("./index-VP-TIWDS.js");
+        const { HookSchema: HookSchema2 } = await import("./index-C6jZ_bJo.js");
         await Promise.all(taggedHookFiles.map(async (hookFile) => {
           const hook = await readJSON(path$3.join(hooksDir, hookFile), HookSchema2);
           if (hook == null ? void 0 : hook.token) {
@@ -118801,8 +118966,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-Bmrakd6M.js").then((n) => n.t),
-        await import("./token-BxPrGSQ5.js").then((n) => n.t)
+        await import("./token-util-CdvUIKt6.js").then((n) => n.t),
+        await import("./token-Bjcyh98U.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -123973,7 +124138,7 @@ var QueueClient = class {
     setApi(this, new ApiClient({ ...options, region }));
   }
 };
-const version = "5.0.0-beta.9";
+const version = "5.0.0-beta.10";
 const HTTP_DEBUG_ENABLED = typeof process !== "undefined" && typeof process.env.DEBUG === "string" && (process.env.DEBUG.includes("workflow:") || process.env.DEBUG === "*");
 function httpLog(method, endpoint, status, ms2) {
   if (HTTP_DEBUG_ENABLED) {
@@ -123981,6 +124146,9 @@ function httpLog(method, endpoint, status, ms2) {
   }
 }
 const REQUEST_TIMEOUT_MS = 6e4;
+const IDEMPOTENT_METHODS = /* @__PURE__ */ new Set(["GET", "HEAD"]);
+const MAX_BODY_PARSE_RETRIES = 2;
+const BODY_PARSE_RETRY_BASE_MS = 100;
 const getWorkflowServerUrlOverride = () => process.env.VERCEL_WORKFLOW_SERVER_URL || "";
 const DEFAULT_RESOLVE_DATA_OPTION = "all";
 function deserializeError(obj) {
@@ -124070,101 +124238,116 @@ async function makeRequest({ endpoint, options = {}, config: config2 = {}, schem
       ...RpcService("workflow-server")
     });
     headers2.set("Accept", "application/cbor");
-    headers2.set("X-Request-Time", Date.now().toString());
     let body2;
     if (data !== void 0) {
       headers2.set("Content-Type", "application/cbor");
       body2 = encode(data);
     }
-    const timeoutSignal = AbortSignal.timeout(REQUEST_TIMEOUT_MS);
-    const signal = options.signal ? AbortSignal.any([options.signal, timeoutSignal]) : timeoutSignal;
-    const request2 = new Request(url2, {
-      ...options,
-      body: body2,
-      headers: headers2,
-      signal
-    });
-    const fetchStart = Date.now();
-    let response2;
-    try {
-      response2 = await fetch(request2, {
-        dispatcher: getDispatcher()
+    const canRetryBody = IDEMPOTENT_METHODS.has(method.toUpperCase());
+    let parseResult;
+    for (let attempt = 0; ; attempt++) {
+      headers2.set("X-Request-Time", Date.now().toString());
+      const timeoutSignal = AbortSignal.timeout(REQUEST_TIMEOUT_MS);
+      const signal = options.signal ? AbortSignal.any([options.signal, timeoutSignal]) : timeoutSignal;
+      const request2 = new Request(url2, {
+        ...options,
+        body: body2,
+        headers: headers2,
+        signal
       });
-    } catch (error2) {
-      const elapsed = Date.now() - fetchStart;
-      if (error2 instanceof Error && (error2.name === "TimeoutError" || error2.name === "AbortError")) {
-        const timeoutError = new WorkflowWorldError(`${method} ${endpoint} timed out after ${elapsed}ms`, { url: url2, cause: error2 });
-        span == null ? void 0 : span.setAttributes({ ...ErrorType("TIMEOUT") });
-        (_a3 = span == null ? void 0 : span.recordException) == null ? void 0 : _a3.call(span, timeoutError);
-        throw timeoutError;
-      }
-      throw error2;
-    }
-    const fetchMs = Date.now() - fetchStart;
-    httpLog(method, endpoint, response2.status, fetchMs);
-    span == null ? void 0 : span.setAttributes({
-      ...HttpResponseStatusCode(response2.status)
-    });
-    if (!response2.ok) {
-      const errorData = await parseResponseBody(response2).then((r2) => r2.data).catch(() => ({}));
-      if (process.env.DEBUG) {
-        const stringifiedHeaders = Array.from(headers2.entries()).filter(([key]) => key.toLowerCase() !== "authorization").map(([key, value]) => `-H "${key}: ${value}"`).join(" ");
-        console.error(`Failed to fetch, reproduce with:
-curl -X ${request2.method} ${stringifiedHeaders} "${url2}"`);
-      }
-      let retryAfter;
-      const retryAfterHeader = response2.headers.get("Retry-After");
-      if (retryAfterHeader) {
-        const parsed = parseInt(retryAfterHeader, 10);
-        if (!Number.isNaN(parsed)) {
-          retryAfter = parsed;
-        }
-      }
-      const defaultMessage = errorData.message || `${request2.method} ${endpoint} -> HTTP ${response2.status}: ${response2.statusText}`;
-      const throwWithTrace = (error2) => {
-        var _a4;
-        span == null ? void 0 : span.setAttributes({
-          ...ErrorType(errorData.code || `HTTP ${response2.status}`)
+      const fetchStart = Date.now();
+      let response2;
+      try {
+        response2 = await fetch(request2, {
+          dispatcher: getDispatcher()
         });
-        (_a4 = span == null ? void 0 : span.recordException) == null ? void 0 : _a4.call(span, error2);
+      } catch (error2) {
+        const elapsed = Date.now() - fetchStart;
+        if (error2 instanceof Error && (error2.name === "TimeoutError" || error2.name === "AbortError")) {
+          const timeoutError = new WorkflowWorldError(`${method} ${endpoint} timed out after ${elapsed}ms`, { url: url2, cause: error2 });
+          span == null ? void 0 : span.setAttributes({ ...ErrorType("TIMEOUT") });
+          (_a3 = span == null ? void 0 : span.recordException) == null ? void 0 : _a3.call(span, timeoutError);
+          throw timeoutError;
+        }
         throw error2;
-      };
-      if (response2.status === 409) {
-        throwWithTrace(new EntityConflictError(defaultMessage));
-      }
-      if (response2.status === 410) {
-        throwWithTrace(new RunExpiredError(defaultMessage));
       }
-      if (response2.status === 425) {
-        throwWithTrace(new TooEarlyError(defaultMessage, { retryAfter }));
-      }
-      if (response2.status === 429) {
-        throwWithTrace(new ThrottleError(defaultMessage, { retryAfter }));
+      const fetchMs = Date.now() - fetchStart;
+      httpLog(method, endpoint, response2.status, fetchMs);
+      span == null ? void 0 : span.setAttributes({
+        ...HttpResponseStatusCode(response2.status)
+      });
+      if (!response2.ok) {
+        const errorData = await parseResponseBody(response2).then((r2) => r2.data).catch(() => ({}));
+        if (process.env.DEBUG) {
+          const stringifiedHeaders = Array.from(headers2.entries()).filter(([key]) => key.toLowerCase() !== "authorization").map(([key, value]) => `-H "${key}: ${value}"`).join(" ");
+          console.error(`Failed to fetch, reproduce with:
+curl -X ${request2.method} ${stringifiedHeaders} "${url2}"`);
+        }
+        let retryAfter;
+        const retryAfterHeader = response2.headers.get("Retry-After");
+        if (retryAfterHeader) {
+          const parsed = parseInt(retryAfterHeader, 10);
+          if (!Number.isNaN(parsed)) {
+            retryAfter = parsed;
+          }
+        }
+        const defaultMessage = errorData.message || `${request2.method} ${endpoint} -> HTTP ${response2.status}: ${response2.statusText}`;
+        const throwWithTrace = (error2) => {
+          var _a4;
+          span == null ? void 0 : span.setAttributes({
+            ...ErrorType(errorData.code || `HTTP ${response2.status}`)
+          });
+          (_a4 = span == null ? void 0 : span.recordException) == null ? void 0 : _a4.call(span, error2);
+          throw error2;
+        };
+        if (response2.status === 409) {
+          throwWithTrace(new EntityConflictError(defaultMessage));
+        }
+        if (response2.status === 410) {
+          throwWithTrace(new RunExpiredError(defaultMessage));
+        }
+        if (response2.status === 425) {
+          throwWithTrace(new TooEarlyError(defaultMessage, { retryAfter }));
+        }
+        if (response2.status === 429) {
+          throwWithTrace(new ThrottleError(defaultMessage, { retryAfter }));
+        }
+        throwWithTrace(new WorkflowWorldError(defaultMessage, {
+          url: url2,
+          status: response2.status,
+          code: errorData.code,
+          retryAfter
+        }));
       }
-      throwWithTrace(new WorkflowWorldError(defaultMessage, {
-        url: url2,
-        status: response2.status,
-        code: errorData.code,
-        retryAfter
-      }));
-    }
-    onResponse == null ? void 0 : onResponse(response2);
-    let parseResult;
-    try {
-      parseResult = await trace("world.parse", async (parseSpan) => {
-        const result2 = await parseResponseBody(response2);
-        const contentType = response2.headers.get("Content-Type") || "";
-        const isCbor = contentType.includes("application/cbor");
-        parseSpan == null ? void 0 : parseSpan.setAttributes({
-          ...WorldParseFormat(isCbor ? "cbor" : "json")
+      onResponse == null ? void 0 : onResponse(response2);
+      try {
+        parseResult = await trace("world.parse", async (parseSpan) => {
+          const result2 = await parseResponseBody(response2);
+          const contentType = response2.headers.get("Content-Type") || "";
+          const isCbor = contentType.includes("application/cbor");
+          parseSpan == null ? void 0 : parseSpan.setAttributes({
+            ...WorldParseFormat(isCbor ? "cbor" : "json")
+          });
+          return result2;
         });
-        return result2;
-      });
-    } catch (error2) {
-      const contentType = response2.headers.get("Content-Type") || "unknown";
-      throw new WorkflowWorldError(`Failed to parse response body for ${request2.method} ${endpoint} (Content-Type: ${contentType}):
+        break;
+      } catch (error2) {
+        if (canRetryBody && attempt < MAX_BODY_PARSE_RETRIES) {
+          const backoffMs = BODY_PARSE_RETRY_BASE_MS * 2 ** attempt;
+          span == null ? void 0 : span.setAttributes({
+            ...ErrorType("PARSE_ERROR_RETRYING")
+          });
+          if (HTTP_DEBUG_ENABLED) {
+            console.debug(`[workflow:world-vercel:http] ${method} ${endpoint} body parse failed (attempt ${attempt + 1}/${MAX_BODY_PARSE_RETRIES + 1}); retrying in ${backoffMs}ms: ${error2}`);
+          }
+          await new Promise((resolve2) => setTimeout(resolve2, backoffMs));
+          continue;
+        }
+        const contentType = response2.headers.get("Content-Type") || "unknown";
+        throw new WorkflowWorldError(`Failed to parse response body for ${method} ${endpoint} (Content-Type: ${contentType}):
 
 ${error2}`, { url: url2, code: "PARSE_ERROR", cause: error2 });
+      }
     }
     const result = await trace("world.validate", async () => {
       const validationResult = schema.safeParse(parseResult.data);
@@ -129538,7 +129721,7 @@ function LayoutContent({
   }, [resource, id2, runId, stepId, hookId, navigate]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
     className: "min-h-screen flex flex-col",
-    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, {
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider$1, {
       delayDuration: 0,
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: "sticky top-0 z-50 bg-background border-b px-6 py-4",
@@ -135351,6 +135534,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(env2, runId, options = {}) {
   const { live = false } = options;
   const [run, setRun] = reactExports.useState(null);
@@ -135459,6 +135643,12 @@ function useWorkflowTraceViewerData(env2, runId, options = {}) {
     eventsHasMore,
     eventsCursor
   ]);
+  reactExports.useEffect(() => {
+    if (events2.length >= AUTO_LOAD_MAX_EVENTS) {
+      return;
+    }
+    loadMoreTraceData();
+  }, [events2.length, loadMoreTraceData]);
   const pollRun = reactExports.useCallback(async () => {
     if (run == null ? void 0 : run.completedAt) {
       return false;
@@ -136416,7 +136606,7 @@ var SelectIcon = reactExports.forwardRef(
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME$4 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$6, { asChild: true, ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$7, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME$4;
 var CONTENT_NAME$4 = "SelectContent";
@@ -148959,7 +149149,7 @@ var [PortalProvider$1, usePortalContext$1] = createDialogContext$1(PORTAL_NAME$3
 var DialogPortal$1 = (props) => {
   const { __scopeDialog, forceMount, children: children2, container } = props;
   const context = useDialogContext$1(PORTAL_NAME$3, __scopeDialog);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider$1, { scope: __scopeDialog, forceMount, children: reactExports.Children.map(children2, (child) => /* @__PURE__ */ jsxRuntimeExports.jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$6, { asChild: true, container, children: child }) })) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider$1, { scope: __scopeDialog, forceMount, children: reactExports.Children.map(children2, (child) => /* @__PURE__ */ jsxRuntimeExports.jsx(Presence$1, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$7, { asChild: true, container, children: child }) })) });
 };
 DialogPortal$1.displayName = PORTAL_NAME$3;
 var OVERLAY_NAME$2 = "DialogOverlay";
@@ -151326,7 +151516,10 @@ function RunDetailView({
     loading,
     error: error2,
     update,
-    hasEncryptedData
+    hasEncryptedData,
+    loadMoreTraceData,
+    hasMoreTraceData,
+    isLoadingMoreTraceData
   } = useWorkflowTraceViewerData(env2, runId, { live: true });
   const run = runData ?? {};
   const [encryptionKey, setEncryptionKey] = reactExports.useState(null);
@@ -151621,7 +151814,11 @@ function RunDetailView({
               {
                 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$1, { title: "Failed to load events list", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -151935,7 +152132,7 @@ const route4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   __proto__: null,
   loader
 }, Symbol.toStringTag, { value: "Module" }));
-const serverManifest = { "entry": { "module": "/assets/entry.client-DtOpLtMQ.js", "imports": ["/assets/index-BsV8i_Jn.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-DJKbeamD.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/mermaid-3ZIDBTTL-DPZjJwuX.js"], "css": ["/assets/root-BYtlAgHl.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-DKDz-tU-.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DjlqbXVx.js", "/assets/mermaid-3ZIDBTTL-DPZjJwuX.js", "/assets/index-CIZByfnL.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-ekQSEj_z.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DjlqbXVx.js", "/assets/mermaid-3ZIDBTTL-DPZjJwuX.js", "/assets/encryption-B7z5c3Mu.js", "/assets/index-CIZByfnL.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-a33ce94a.js", "version": "a33ce94a", "sri": void 0 };
+const serverManifest = { "entry": { "module": "/assets/entry.client-DOJDY_4b.js", "imports": ["/assets/index-BXZSIDEp.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-CtIBMIdD.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/mermaid-3ZIDBTTL-Cg06pRM9.js"], "css": ["/assets/root-D_G0HW97.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-D68s49Hb.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-D4OsX_TE.js", "/assets/mermaid-3ZIDBTTL-Cg06pRM9.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-B1sCKjMc.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-D4OsX_TE.js", "/assets/mermaid-3ZIDBTTL-Cg06pRM9.js", "/assets/encryption-g14N5vQl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-f3e412ee.js", "version": "f3e412ee", "sri": void 0 };
 const assetsBuildDirectory = "build/client";
 const basename = "/";
 const future = { "unstable_optimizeDeps": false, "unstable_subResourceIntegrity": false, "unstable_trailingSlashAwareDataRequests": false, "unstable_previewServerPrerendering": false, "v8_middleware": false, "v8_splitRouteModules": false, "v8_viteEnvironmentApi": false };