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

package/build/client/assets/{mermaid-3ZIDBTTL-DPZjJwuX.js → mermaid-3ZIDBTTL-CeSti4VQ.js}

@@ -1,9 +1,9 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-B7z5c3Mu.js","assets/index-CIZByfnL.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-khW-t_B-.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-DmlmGvFd.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2;
-import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, I as React, R as ReactExports, D as ReactDOM, g as getDefaultExportFromCjs } from "./index-BsV8i_Jn.js";
+import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, I as React, G as ReactDOM, R as ReactExports, g as getDefaultExportFromCjs } from "./index-BXZSIDEp.js";
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -48,19 +48,19 @@ function useComposedRefs$1(...refs) {
 }
 function createContext2(rootComponentName, defaultContext) {
   const Context = reactExports.createContext(defaultContext);
-  const Provider = (props) => {
+  const Provider2 = (props) => {
     const { children: children2, ...context } = props;
     const value = reactExports.useMemo(() => context, Object.values(context));
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Context.Provider, { value, children: children2 });
   };
-  Provider.displayName = rootComponentName + "Provider";
+  Provider2.displayName = rootComponentName + "Provider";
   function useContext2(consumerName) {
     const context = reactExports.useContext(Context);
     if (context) return context;
     if (defaultContext !== void 0) return defaultContext;
     throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
   }
-  return [Provider, useContext2];
+  return [Provider2, useContext2];
 }
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
@@ -68,14 +68,14 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
     const BaseContext = reactExports.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
+    const Provider2 = (props) => {
       var _a3;
       const { scope, children: children2, ...context } = props;
       const Context = ((_a3 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a3[index2]) || BaseContext;
       const value = reactExports.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Context.Provider, { value, children: children2 });
     };
-    Provider.displayName = rootComponentName + "Provider";
+    Provider2.displayName = rootComponentName + "Provider";
     function useContext2(consumerName, scope) {
       var _a3;
       const Context = ((_a3 = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a3[index2]) || BaseContext;
@@ -84,7 +84,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
-    return [Provider, useContext2];
+    return [Provider2, useContext2];
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
@@ -2682,6 +2682,16 @@ var Root2 = Popper;
 var Anchor = PopperAnchor;
 var Content = PopperContent;
 var Arrow$1 = PopperArrow;
+var PORTAL_NAME$1 = "Portal";
+var Portal$1 = reactExports.forwardRef((props, forwardedRef) => {
+  var _a3;
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = reactExports.useState(false);
+  useLayoutEffect2(() => setMounted(true), []);
+  const container = containerProp || mounted && ((_a3 = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a3.body);
+  return container ? ReactDOM.createPortal(/* @__PURE__ */ jsxRuntimeExports.jsx(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+});
+Portal$1.displayName = PORTAL_NAME$1;
 function useStateMachine(initialState2, machine) {
   return reactExports.useReducer((state, event) => {
     const nextState = machine[state][event];
@@ -2907,7 +2917,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,
@@ -2948,10 +2958,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,
@@ -3041,9 +3051,9 @@ var Tooltip$1 = (props) => {
     }
   ) });
 };
-Tooltip$1.displayName = TOOLTIP_NAME;
+Tooltip$2.displayName = TOOLTIP_NAME;
 var TRIGGER_NAME = "TooltipTrigger";
-var TooltipTrigger$1 = reactExports.forwardRef(
+var TooltipTrigger$2 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const { __scopeTooltip, ...triggerProps } = props;
     const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
@@ -3091,13 +3101,19 @@ var TooltipTrigger$1 = reactExports.forwardRef(
     ) });
   }
 );
-TooltipTrigger$1.displayName = TRIGGER_NAME;
+TooltipTrigger$2.displayName = TRIGGER_NAME;
 var PORTAL_NAME = "TooltipPortal";
 var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
   forceMount: void 0
 });
+var TooltipPortal = (props) => {
+  const { __scopeTooltip, forceMount, children: children2, container } = props;
+  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PortalProvider, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { asChild: true, container, children: children2 }) }) });
+};
+TooltipPortal.displayName = PORTAL_NAME;
 var CONTENT_NAME = "TooltipContent";
-var TooltipContent$1 = reactExports.forwardRef(
+var TooltipContent$2 = reactExports.forwardRef(
   (props, forwardedRef) => {
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
     const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
@@ -3232,7 +3248,7 @@ var TooltipContentImpl = reactExports.forwardRef(
     );
   }
 );
-TooltipContent$1.displayName = CONTENT_NAME;
+TooltipContent$2.displayName = CONTENT_NAME;
 var ARROW_NAME = "TooltipArrow";
 var TooltipArrow = reactExports.forwardRef(
   (props, forwardedRef) => {
@@ -3361,9 +3377,12 @@ function getHullPresorted(points) {
     return upperHull.concat(lowerHull);
   }
 }
-var Root3 = Tooltip$1;
-var Trigger = TooltipTrigger$1;
-var Content2 = TooltipContent$1;
+var Provider = TooltipProvider$1;
+var Root3 = Tooltip$2;
+var Trigger = TooltipTrigger$2;
+var Portal = TooltipPortal;
+var Content2 = TooltipContent$2;
+var Arrow2 = TooltipArrow;
 function r(e) {
   var t, f2, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -10359,7 +10378,7 @@ function hydrateData(value, revivers) {
 async function hydrateDataWithKey(value, revivers, key) {
   if (value instanceof Uint8Array && isEncryptedData(value) && key) {
     const { decrypt } = await __vitePreload(async () => {
-      const { decrypt: decrypt2 } = await import("./encryption-B7z5c3Mu.js");
+      const { decrypt: decrypt2 } = await import("./encryption-g14N5vQl.js");
       return { decrypt: decrypt2 };
     }, true ? __vite__mapDeps([0,1,2]) : void 0);
     const { payload } = decodeFormatPrefix(value);
@@ -15576,6 +15595,11 @@ const WorkflowInvokePayloadSchema = object({
   runId: string$2(),
   traceCarrier: TraceCarrierSchema.optional(),
   requestedAt: date().optional(),
+  /** Consecutive replay divergences in this recovery chain and latest position. */
+  replayDivergence: object({
+    eventId: string$2(),
+    count: number$2().int().positive()
+  }).optional(),
   /** Number of times this message has been re-enqueued due to server errors (5xx) */
   serverErrorRetryCount: number$2().int().optional(),
   /** Step ID for inline step execution in combined handler. If provided, the flow execution
@@ -15837,7 +15861,8 @@ function getWebRevivers() {
     // Error family. The reducer side (see
     // `packages/core/src/serialization/reducers/common.ts`) emits a tagged
     // entry for each built-in Error subclass plus the workflow-specific
-    // `FatalError` / `RetryableError` and `AggregateError`. Without
+    // `FatalError` / `RetryableError` / `HookConflictError` /
+    // `RuntimeDecryptionError` and `AggregateError`. Without
     // matching revivers here, `devalue.unflatten` throws "Unknown type X"
     // — which surfaces in the web o11y UI as "Failed to load resource
     // details: Unknown type FatalError".
@@ -15883,6 +15908,18 @@ function getWebRevivers() {
         error.stack = value.stack;
       return error;
     },
+    HookConflictError: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const error = new Error(value.message, opts);
+      error.name = "HookConflictError";
+      error.token = value.token;
+      if (value.conflictingRunId !== void 0) {
+        error.conflictingRunId = value.conflictingRunId;
+      }
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      return error;
+    },
     RetryableError: (value) => {
       const opts = "cause" in value ? { cause: value.cause } : void 0;
       const error = new Error(value.message, opts);
@@ -15894,6 +15931,17 @@ function getWebRevivers() {
       }
       return error;
     },
+    RuntimeDecryptionError: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const error = new Error(value.message, opts);
+      error.name = "RuntimeDecryptionError";
+      if (value.context !== void 0) {
+        error.context = value.context;
+      }
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      return error;
+    },
     DOMException: (value) => {
       const G2 = globalThis;
       if (typeof G2.DOMException === "function") {
@@ -16048,7 +16096,7 @@ async function hydrateResourceIOWithKey(resource, key) {
     return { hydrateDataWithKey: hydrateDataWithKey3 };
   }, true ? void 0 : void 0);
   const { importKey } = await __vitePreload(async () => {
-    const { importKey: importKey2 } = await import("./encryption-B7z5c3Mu.js");
+    const { importKey: importKey2 } = await import("./encryption-g14N5vQl.js");
     return { importKey: importKey2 };
   }, true ? __vite__mapDeps([0,1,2]) : void 0);
   const cryptoKey = await importKey(key);
@@ -43255,7 +43303,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(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-khW-t_B-.js"), true ? __vite__mapDeps([3,2]) : void 0).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(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-DmlmGvFd.js"), true ? __vite__mapDeps([3,2]) : void 0).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 }) })] }) });
@@ -45291,6 +45339,29 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error, isLoading, o
     color: "var(--ds-gray-600)"
   }, children: isLive ? "Waiting for stream data..." : "Stream is empty" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: chunks.length, overscan: 10, endReached: () => onScrollEnd == null ? void 0 : onScrollEnd(), itemContent: (index2) => jsxRuntimeExports.jsx("div", { style: { paddingBottom: 8 }, children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2], index: index2 }) }), style: { flex: 1, minHeight: 0 } }) })] });
 }
+const iconButtonVariants = cva([
+  "m-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]",
+  "transition-colors duration-150 ease-in-out",
+  "enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40",
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2"
+], {
+  variants: {
+    variant: {
+      tertiary: "text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000",
+      muted: "text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000"
+    },
+    size: {
+      tiny: "h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4",
+      small: "h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4"
+    }
+  },
+  defaultVariants: {
+    variant: "tertiary",
+    size: "tiny"
+  }
+});
+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 ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
 function parseSpanSearchQuery(rawQuery) {
   var _a3, _b, _c;
@@ -45736,6 +45807,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 [range, 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 start = Math.max(0, Math.floor(top / rowHeight) - overscan);
+      const end = Math.min(rowCount, Math.ceil((top + el.clientHeight) / rowHeight) + overscan);
+      setRange((prev) => prev.start === start && prev.end === end ? prev : { start, 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 range;
+}
+const ROW_HEIGHT_PX = 40;
 const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
 const TIMELINE_PADDING_PX = 16;
@@ -45862,11 +45981,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}%`,
@@ -45882,6 +46000,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, end } = useRowWindow(containerRef, spans.length, ROW_HEIGHT_PX);
   reactExports.useEffect(() => {
     const el = containerRef.current;
     if (!el)
@@ -45893,16 +46012,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(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, 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;
+const Tooltip$1 = Root3;
+const TooltipTrigger$1 = Trigger;
+const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(Content2, { 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, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
+TooltipContent$1.displayName = Content2.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) {
@@ -48450,111 +48573,119 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  Button$1 as $,
+  _r as $,
   Anchor as A,
   Button as B,
   Content as C,
   DEFAULT_PAGE_SIZE as D,
-  useComposedRefs as E,
-  fetchRun as F,
-  cva as G,
-  Presence as H,
-  createContext2 as I,
-  fetchWorkflowsManifest as J,
+  Arrow$1 as E,
+  useComposedRefs as F,
+  fetchRun as G,
+  cva as H,
+  Presence as I,
+  createContext2 as J,
   Ks as K,
   LoaderCircle as L,
-  Spinner as M,
-  cn$4 as N,
-  Skeleton$1 as O,
+  fetchWorkflowsManifest as M,
+  Spinner as N,
+  cn$4 as O,
   Primitive as P,
   Qe as Q,
   R,
   ServerConfigProvider as S,
   Tooltip as T,
-  DecryptClickContext as U,
+  Skeleton$1 as U,
   VISUALLY_HIDDEN_STYLES as V,
-  isEncryptedMarker as W,
-  formatDuration as X,
+  DecryptClickContext as W,
+  isEncryptedMarker as X,
   Yr as Y,
-  DataInspector as Z,
-  _r as _,
+  formatDuration as Z,
+  DataInspector as _,
   TooltipTrigger as a,
-  Lock as a0,
-  RunClickContext as a1,
-  StreamClickContext as a2,
-  isExpiredMarker as a3,
-  isDoStreamStep as a4,
-  extractConversation as a5,
-  hasEncryptedFields as a6,
-  EVENT_DATA_REF_FIELDS as a7,
-  useSidebarDataOptional as a8,
-  clsx as a9,
-  getEncryptionKeyForRun as aA,
-  StreamViewer as aB,
-  composeRefs as aC,
-  useFloating as aD,
-  offset as aE,
-  shift as aF,
-  limitShift as aG,
-  flip as aH,
-  size as aI,
-  arrow as aJ,
-  hide as aK,
-  autoUpdate as aL,
-  cancelRun as aM,
-  reenqueueRun as aN,
-  wakeUpRun as aO,
-  resumeHook as aP,
-  recreateRun as aQ,
-  isSpanDimmedBySearch as aa,
-  getSpanDurationMs as ab,
-  getHighResInMs as ac,
-  ActiveSpanProvider as ad,
-  useActiveSpan as ae,
-  searchSpans as af,
-  computeRootBounds as ag,
-  computeTimeMarkers as ah,
-  TIMELINE_PADDING_PX as ai,
-  Timeline as aj,
-  TimelineHeader as ak,
-  SidebarDataProvider as al,
-  hydrateResourceIOWithKey as am,
-  hydrateResourceIO as an,
-  fetchHook as ao,
-  fetchStep as ap,
-  fetchStreams as aq,
-  Slot as ar,
-  Slottable as as,
-  buttonVariants as at,
-  fetchEvent as au,
-  fetchEventsByCorrelationId as av,
-  isEncryptedData as aw,
-  hydrateData as ax,
-  getWebRevivers as ay,
-  LIVE_UPDATE_INTERVAL_MS as az,
+  Button$1 as a0,
+  Lock as a1,
+  RunClickContext as a2,
+  StreamClickContext as a3,
+  isExpiredMarker as a4,
+  isDoStreamStep as a5,
+  extractConversation as a6,
+  hasEncryptedFields as a7,
+  EVENT_DATA_REF_FIELDS as a8,
+  useSidebarDataOptional as a9,
+  Slottable as aA,
+  buttonVariants as aB,
+  fetchEvent as aC,
+  fetchEventsByCorrelationId as aD,
+  isEncryptedData as aE,
+  hydrateData as aF,
+  getWebRevivers as aG,
+  LIVE_UPDATE_INTERVAL_MS as aH,
+  getEncryptionKeyForRun as aI,
+  StreamViewer as aJ,
+  composeRefs as aK,
+  useFloating as aL,
+  offset as aM,
+  shift as aN,
+  limitShift as aO,
+  flip as aP,
+  size as aQ,
+  arrow as aR,
+  hide as aS,
+  autoUpdate as aT,
+  cancelRun as aU,
+  reenqueueRun as aV,
+  wakeUpRun as aW,
+  resumeHook as aX,
+  recreateRun as aY,
+  clsx as aa,
+  useRowWindow as ab,
+  isSpanDimmedBySearch as ac,
+  ROW_HEIGHT_PX as ad,
+  getSpanDurationMs as ae,
+  getHighResInMs as af,
+  IconButton as ag,
+  TooltipProvider as ah,
+  ActiveSpanProvider as ai,
+  useActiveSpan as aj,
+  searchSpans as ak,
+  computeRootBounds as al,
+  computeTimeMarkers as am,
+  TIMELINE_PADDING_PX as an,
+  Timeline as ao,
+  TimelineHeader as ap,
+  Tooltip$1 as aq,
+  TooltipTrigger$1 as ar,
+  TooltipContent$1 as as,
+  SidebarDataProvider as at,
+  hydrateResourceIOWithKey as au,
+  hydrateResourceIO as av,
+  fetchHook as aw,
+  fetchStep as ax,
+  fetchStreams as ay,
+  Slot as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,
   Toaster as e,
-  TooltipProvider as f,
-  useLayoutEffect2 as g,
-  useToast as h,
-  fetchRuns as i,
-  fetchHooks as j,
-  getPaginationDisplay as k,
-  fetchEvents as l,
-  useCallbackRef as m,
-  useComposedRefs$1 as n,
-  composeEventHandlers as o,
-  useId as p,
-  createPopperScope as q,
+  TooltipProvider$1 as f,
+  useToast as g,
+  fetchRuns as h,
+  fetchHooks as i,
+  getPaginationDisplay as j,
+  fetchEvents as k,
+  useCallbackRef as l,
+  useComposedRefs$1 as m,
+  composeEventHandlers as n,
+  useLayoutEffect2 as o,
+  Portal$1 as p,
+  useId as q,
   runHealthCheck as r,
-  DismissableLayer as s,
+  createPopperScope as s,
   toast as t,
   useServerConfig as u,
-  createContextScope as v,
-  createSlot as w,
-  useControllableState as x,
-  Root2 as y,
-  Arrow$1 as z
+  DismissableLayer as v,
+  createContextScope as w,
+  createSlot as x,
+  useControllableState as y,
+  Root2 as z
 };

package/build/client/assets/{root-DJKbeamD.js → root-8wYQKqnE.js}

@@ -1,5 +1,5 @@
-import { r as reactExports, j as jsxRuntimeExports, w as withComponentProps, x as withErrorBoundaryProps, M as Meta, L as Links, S as ScrollRestoration, y as Scripts, O as Outlet, z as useRouteError, i as isRouteErrorResponse, A as Link, B as useNavigate, C as useSearchParams } from "./index-BsV8i_Jn.js";
-import { c as createLucideIcon, u as useServerConfig, T as Tooltip, a as TooltipTrigger, b as TooltipContent, r as runHealthCheck, t as toast, B as Button, L as LoaderCircle, d as cn, e as Toaster$1, S as ServerConfigProvider, f as TooltipProvider } from "./mermaid-3ZIDBTTL-DPZjJwuX.js";
+import { r as reactExports, j as jsxRuntimeExports, w as withComponentProps, x as withErrorBoundaryProps, M as Meta, L as Links, S as ScrollRestoration, y as Scripts, O as Outlet, z as useRouteError, i as isRouteErrorResponse, A as Link, B as useNavigate, C as useSearchParams } from "./index-BXZSIDEp.js";
+import { c as createLucideIcon, u as useServerConfig, T as Tooltip, a as TooltipTrigger, b as TooltipContent, r as runHealthCheck, t as toast, B as Button, L as LoaderCircle, d as cn, e as Toaster$1, S as ServerConfigProvider, f as TooltipProvider } from "./mermaid-3ZIDBTTL-CeSti4VQ.js";
 var M = (e, i, s, u, m, a, l, h) => {
   let d = document.documentElement, w = ["light", "dark"];
   function p(n) {