@workflow/web 5.0.0-beta.8 → 5.0.0-beta.9

package/build/server/assets/{server-build-fc5Vuxba.js → server-build-Ctg6FoI8.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-BxqFvIap.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-BEgkHdDF.js";
 import require$$0$3, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1 from "crypto";
@@ -50642,7 +50642,14 @@ const buttonVariants$1 = cva([
   "!text-gray-100",
   "bg-gray-1000",
   "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
-  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))] dark-theme:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+  // consuming app), darkened via ancestor theme class without a registered variant.
+  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]",
+  "[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  "[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+  // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+  "focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]",
   // disabled styles
   "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
   "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
@@ -50657,7 +50664,7 @@ const buttonVariants$1 = cva([
     size: {
       default: "h-10 px-4 text-[14px]",
       sm: "h-8 px-3 text-[14px]",
-      xs: "h-6 px-1.5 py-0.5 text-button-12",
+      xs: "h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]",
       icon: "h-8 w-8"
     }
   },
@@ -80530,7 +80537,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-BuIiME1D.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-B4fAdNsB.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 }) })] }) });
@@ -80852,7 +80859,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-TSh7T1Pv.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-C6M7jb0V.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;
@@ -83476,6 +83483,30 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error: error2, isLo
     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"
+  }
+});
+function IconButton({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props });
+}
 const QUERY = "(prefers-reduced-motion: reduce)";
 const useReducedMotion = () => {
   const [reduced, setReduced] = reactExports.useState(() => {
@@ -83506,6 +83537,128 @@ const SleepIcon = () => {
 const StepForwardIcon = () => {
   return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
 };
+const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
+function parseSpanSearchQuery(rawQuery) {
+  var _a3, _b2, _c2;
+  const attributes = [];
+  for (const match2 of rawQuery.matchAll(ATTR_FILTER_REGEX)) {
+    const key = (_b2 = (_a3 = match2.groups) == null ? void 0 : _a3.key) == null ? void 0 : _b2.trim();
+    if (!key)
+      continue;
+    attributes.push({
+      key,
+      value: (((_c2 = match2.groups) == null ? void 0 : _c2.value) ?? "").toLocaleLowerCase()
+    });
+  }
+  const text2 = rawQuery.replace(ATTR_FILTER_REGEX, " ").replace(/\s{2,}/g, " ").trim().toLocaleLowerCase();
+  return { text: text2, attributes };
+}
+function isSpanDimmedBySearch(spanId, result) {
+  return result.isActive && !result.matchedSpanIds.has(spanId);
+}
+function searchSpans(spans, rawQuery) {
+  const query = parseSpanSearchQuery(rawQuery);
+  const isActive = Boolean(query.text || query.attributes.length);
+  const matchingSpans = isActive ? spans.filter((span) => spanMatchesQuery(span, query)) : spans;
+  return {
+    isActive,
+    matchedSpanIds: new Set(matchingSpans.map((span) => span.spanId)),
+    matchingSpans,
+    query
+  };
+}
+function spanMatchesQuery(span, query) {
+  if (query.text && !spanMatchesText(span, query.text)) {
+    return false;
+  }
+  return query.attributes.every(({ key, value }) => spanMatchesAttribute(span, key, value));
+}
+function spanMatchesText(span, text2) {
+  return [
+    span.name,
+    span.spanId,
+    span.resource,
+    span.library.name,
+    span.library.version
+  ].filter((value) => typeof value === "string").some((value) => value.toLocaleLowerCase().includes(text2));
+}
+function spanMatchesAttribute(span, key, expectedValue) {
+  const candidates = getSearchValues(span, key);
+  if (!candidates.length)
+    return false;
+  if (!expectedValue) {
+    return candidates.some((value) => value != null);
+  }
+  return candidates.some((value) => valueToSearchString(value).toLocaleLowerCase().includes(expectedValue));
+}
+function getSearchValues(span, key) {
+  const candidates = [];
+  const normalizedKey = key.toLocaleLowerCase();
+  switch (normalizedKey) {
+    case "id":
+    case "spanid":
+    case "span.id":
+      candidates.push(span.spanId);
+      break;
+    case "name":
+      candidates.push(span.name);
+      break;
+    case "resource":
+      candidates.push(span.resource);
+      break;
+    case "library":
+    case "library.name":
+      candidates.push(span.library.name);
+      break;
+    case "library.version":
+      candidates.push(span.library.version);
+      break;
+    case "status":
+    case "status.code":
+      candidates.push(span.status.code);
+      break;
+  }
+  candidates.push(getOwnProperty(span.attributes, key));
+  candidates.push(getPathValue(span.attributes, key));
+  if (!normalizedKey.startsWith("data.")) {
+    candidates.push(getPathValue(span.attributes.data, key));
+  }
+  return candidates.filter((value) => value !== void 0);
+}
+function getOwnProperty(source, key) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  if (!Object.hasOwn(source, key))
+    return void 0;
+  return source[key];
+}
+function getPathValue(source, path2) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  let current = source;
+  for (const segment2 of path2.split(".")) {
+    if (!segment2)
+      return void 0;
+    current = getOwnProperty(current, segment2);
+    if (current === void 0)
+      return void 0;
+  }
+  return current;
+}
+function valueToSearchString(value) {
+  if (value instanceof Date)
+    return value.toISOString();
+  if (typeof value === "string")
+    return value;
+  if (value == null || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
 function computeRootBounds(spans) {
   let minStart = Number.POSITIVE_INFINITY;
   let maxEnd = Number.NEGATIVE_INFINITY;
@@ -83847,15 +84000,15 @@ function getEventStyle(resource, isErrored) {
     className: cn$4(isErrored ? "text-red-900" : style2.className)
   };
 }
-const EventRow = ({ span, isSelected, onSelectSpan }) => {
+const EventRow = ({ span, isSelected, isDimmed, onSelectSpan }) => {
   const durationMs = getSpanDurationMs(span);
   const isErrored = span.attributes.data.status === "failed";
   const { icon: Icon2, className: tagClassName } = getEventStyle(span.resource, isErrored);
-  return jsxRuntimeExports.jsx("li", { className: cn$4("relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400", ROW_HEIGHT_CLASS), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center 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) }) })] }) }) });
+  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, onSelectSpan }) => {
-  return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible", children: spans.map((span) => {
-    return jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, onSelectSpan }, span.spanId);
+const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
+  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 GUTTER_PX = 1;
@@ -84055,7 +84208,7 @@ function SegmentBar({ segments }) {
     }, children: showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null }, `${seg.status}-${i}`);
   }) });
 }
-const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, onSelect }) {
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
   var _a3;
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
@@ -84073,7 +84226,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
   }, [onSelect, span.spanId]);
-  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: "group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200", 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", 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 }) }) }) });
+  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;
@@ -84090,7 +84243,7 @@ const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, ri
 function TimelineHeader({ markers: markers2, hoverInfo: hoverInfo2 }) {
   return jsxRuntimeExports.jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m2.position * 100}%` }, children: m2.label }, `${m2.position}-${m2.label}`)), hoverInfo2 && jsxRuntimeExports.jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo2.fraction * 100}%` }, children: hoverInfo2.label })] }) });
 }
-function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, onSelect, hoverFraction, altHeld = false }) {
+function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, searchResult, onSelect, hoverFraction, altHeld = false }) {
   const containerRef = reactExports.useRef(null);
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
   const viewDuration = viewEnd - viewStart;
@@ -84109,7 +84262,7 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, on
   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) => (
     // 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, 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}%` } }) }), 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)) })] });
 }
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
@@ -84159,7 +84312,7 @@ function DetailPanel({ span, rootStart, onClose }) {
   const startMs = getHighResInMs(span.startTime);
   const durationMs = getSpanDurationMs(span);
   const offsetMs = startMs - rootStart;
-  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-1000 hover:bg-gray-alpha-100 transition-colors", onClick: onClose, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
+  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", onClick: onClose, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
 }
 const MIN_VIEWPORT_MS = 1e-3;
 function useAnimatedViewport(initial) {
@@ -84229,7 +84382,7 @@ function useSelectedSpanInfo() {
       spanId: activeSpan.spanId,
       rawEvents
     };
-  }, [activeSpan, sidebar == null ? void 0 : sidebar.events]);
+  }, [activeSpan, sidebar]);
 }
 function NewTraceViewer$1({ trace: trace2 }) {
   return jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace2.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace: trace2 }) });
@@ -84239,12 +84392,8 @@ function NewTraceViewerContent({ trace: trace2 }) {
   const sidebar = useSidebarDataOptional();
   const selectedSpan = useSelectedSpanInfo();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
-  const filteredSpans = reactExports.useMemo(() => {
-    const q2 = searchQuery.trim().toLowerCase();
-    if (!q2)
-      return trace2.spans;
-    return trace2.spans.filter((s2) => s2.name.toLowerCase().includes(q2) || s2.resource.toLowerCase().includes(q2));
-  }, [trace2.spans, searchQuery]);
+  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 { viewport, setViewport, animateTo } = useAnimatedViewport({
     start: root2.startTime,
@@ -84266,7 +84415,7 @@ function NewTraceViewerContent({ trace: trace2 }) {
       return prev;
     });
     prevRootRef.current = { start: newStart, end: newEnd };
-  }, [root2.startTime, root2.duration]);
+  }, [root2.startTime, root2.duration, setViewport]);
   const viewDuration = viewport.end - viewport.start;
   const timeMarkers = reactExports.useMemo(() => computeTimeMarkers(viewDuration, viewport.start - root2.startTime), [viewDuration, viewport.start, root2.startTime]);
   const resetZoom = reactExports.useCallback(() => {
@@ -84427,7 +84576,8 @@ function NewTraceViewerContent({ trace: trace2 }) {
         if (e.deltaMode === 1)
           dy *= 16;
         const cursorFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
-        const scaleFactor = Math.pow(2, dy / 200);
+        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
+        const scaleFactor = Math.pow(2, dy / (isMouseWheel ? 200 : 60));
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
@@ -84467,7 +84617,7 @@ function NewTraceViewerContent({ trace: trace2 }) {
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, [root2.startTime, root2.duration]);
+  }, [root2.startTime, root2.duration, setViewport]);
   const selectedSpanName = reactExports.useMemo(() => {
     var _a3, _b2;
     if (!(selectedSpan == null ? void 0 : selectedSpan.data))
@@ -84484,14 +84634,14 @@ function NewTraceViewerContent({ trace: trace2 }) {
     var _a3, _b2;
     if (!activeSpanId)
       return { prevSpanId: null, nextSpanId: null };
-    const i = filteredSpans.findIndex((s2) => s2.spanId === activeSpanId);
+    const i = trace2.spans.findIndex((s2) => s2.spanId === activeSpanId);
     if (i === -1)
       return { prevSpanId: null, nextSpanId: null };
     return {
-      prevSpanId: ((_a3 = filteredSpans[i - 1]) == null ? void 0 : _a3.spanId) ?? null,
-      nextSpanId: ((_b2 = filteredSpans[i + 1]) == null ? void 0 : _b2.spanId) ?? null
+      prevSpanId: ((_a3 = trace2.spans[i - 1]) == null ? void 0 : _a3.spanId) ?? null,
+      nextSpanId: ((_b2 = trace2.spans[i + 1]) == null ? void 0 : _b2.spanId) ?? null
     };
-  }, [activeSpanId, filteredSpans]);
+  }, [activeSpanId, trace2.spans]);
   const handleSelectPrevSpan = reactExports.useCallback(() => {
     if (prevSpanId)
       handleSelectSpan(prevSpanId);
@@ -84506,7 +84656,13 @@ 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), 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: "shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors", children: jsxRuntimeExports.jsx(X$3, { className: "w-3 h-3" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: filteredSpans, activeSpanId, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.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("button", { type: "button", "aria-label": "Navigate to previous span", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, className: "p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed", children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Navigate to next span", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, className: "p-1 rounded text-gray-1000 transition-colors enabled:hover:bg-gray-alpha-100 disabled:opacity-40 disabled:cursor-not-allowed", 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("button", { type: "button", "aria-label": "Close span details", "aria-keyshortcuts": "Escape", className: "p-1 rounded text-gray-1000 hover:bg-gray-alpha-100 transition-colors", 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] });
+  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) => {
+    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] });
 }
 const NewTraceViewer = ({ run, events: events2, sidebarData }) => {
   const traceWithMeta = reactExports.useMemo(() => {
@@ -88430,7 +88586,7 @@ const encryption = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   encrypt: encrypt$1,
   importKey
 }, Symbol.toStringTag, { value: "Module" }));
-const version$1 = "5.0.0-beta.8";
+const version$1 = "5.0.0-beta.9";
 const WorldCacheKey = Symbol.for("@workflow/world//cache");
 const WorldCachePromiseKey = Symbol.for("@workflow/world//cachePromise");
 const GetWorldFnKey$1 = Symbol.for("@workflow/world//getWorldFn");
@@ -88566,12 +88722,15 @@ async function healthCheck(world, endpoint, options) {
 }
 const LOCK_POLL_INTERVAL_MS = 10;
 function createFlushableState() {
-  return {
+  const state = {
     ...withResolvers$1(),
     pendingOps: 0,
     doneResolved: false,
     streamEnded: false
   };
+  state.promise.catch(() => {
+  });
+  return state;
 }
 function isWritableUnlockedNotClosed(writable) {
   if (writable.locked)
@@ -92076,6 +92235,16 @@ async function readBuffer(filePath) {
   const content2 = await promises.readFile(filePath);
   return content2;
 }
+async function readFirstByte(filePath) {
+  const file2 = await promises.open(filePath, "r");
+  try {
+    const byte = Buffer.allocUnsafe(1);
+    const { bytesRead } = await file2.read(byte, 0, 1, 0);
+    return bytesRead === 0 ? void 0 : byte[0];
+  } finally {
+    await file2.close();
+  }
+}
 async function deleteJSON(filePath) {
   try {
     await promises.unlink(filePath);
@@ -117861,40 +118030,50 @@ const monotonicUlid = monotonicFactory(() => Math.random());
 const RunStreamsSchema = object$1({
   streams: array$1(string$3())
 });
+const EOF_MARKER = 1;
+function isEofByte(byte) {
+  return byte === EOF_MARKER;
+}
 function serializeChunk(chunk) {
-  const eofByte = Buffer.from([chunk.eof ? 1 : 0]);
+  const eofByte = Buffer.from([chunk.eof ? EOF_MARKER : 0]);
   return Buffer.concat([eofByte, chunk.chunk]);
 }
 function isEofChunk(serialized) {
-  return serialized[0] === 1;
+  return isEofByte(serialized[0]);
 }
 function deserializeChunk(serialized) {
-  const eof = serialized[0] === 1;
+  const eof = isEofChunk(serialized);
   const chunk = Buffer.from(serialized.subarray(1));
   return { eof, chunk };
 }
+async function listChunkEntries(chunksDir) {
+  try {
+    return await fs$1.readdir(chunksDir);
+  } catch (error2) {
+    if (error2.code === "ENOENT")
+      return [];
+    throw error2;
+  }
+}
+function addChunkFilesByExtension(extMap, entries, sourceExtension, fileExtension = sourceExtension, include = () => true) {
+  for (const entry2 of entries) {
+    if (!entry2.endsWith(sourceExtension))
+      continue;
+    const file2 = entry2.slice(0, -sourceExtension.length);
+    if (include(file2))
+      extMap.set(file2, fileExtension);
+  }
+}
 async function listChunkFilesForStream(chunksDir, name2, tag) {
   assertSafeEntityId("streamName", name2);
-  const listPromises = [
-    listFilesByExtension(chunksDir, ".bin"),
-    listFilesByExtension(chunksDir, ".json")
-  ];
-  if (tag) {
-    listPromises.push(listFilesByExtension(chunksDir, `.${tag}.bin`));
-  }
-  const [binFiles, jsonFiles, ...taggedResults] = await Promise.all(listPromises);
-  const taggedBinFiles = taggedResults[0] ?? [];
+  const entries = await listChunkEntries(chunksDir);
   const extMap = /* @__PURE__ */ new Map();
-  for (const f2 of jsonFiles)
-    extMap.set(f2, ".json");
-  const tagSfx = tag ? `.${tag}` : "";
-  for (const f2 of binFiles) {
-    if (tag && f2.endsWith(tagSfx))
-      continue;
-    extMap.set(f2, ".bin");
+  addChunkFilesByExtension(extMap, entries, ".json");
+  addChunkFilesByExtension(extMap, entries, ".bin", ".bin", tag ? (file2) => !file2.endsWith(`.${tag}`) : void 0);
+  if (tag) {
+    const taggedExtension = `.${tag}.bin`;
+    addChunkFilesByExtension(extMap, entries, taggedExtension);
   }
-  for (const f2 of taggedBinFiles)
-    extMap.set(f2, `.${tag}.bin`);
   const files = [...extMap.keys()].filter((file2) => file2.startsWith(`${name2}-`)).sort();
   return { files, extMap };
 }
@@ -118009,7 +118188,7 @@ function createStreamer$1(basedir, tag) {
           const ext2 = fileExtMap.get(file2) ?? ".bin";
           const filePath = path$3.join(chunksDir, `${file2}${ext2}`);
           if (dataIndex < startIndex) {
-            if (isEofChunk(await readBuffer(filePath))) {
+            if (isEofByte(await readFirstByte(filePath))) {
               streamDone = true;
               break;
             }
@@ -118017,7 +118196,7 @@ function createStreamer$1(basedir, tag) {
             continue;
           }
           if (resultChunks.length >= limit) {
-            if (isEofChunk(await readBuffer(filePath))) {
+            if (isEofByte(await readFirstByte(filePath))) {
               streamDone = true;
             } else {
               dataIndex++;
@@ -118052,7 +118231,7 @@ function createStreamer$1(basedir, tag) {
         let dataCount = 0;
         for (const file2 of chunkFiles) {
           const ext2 = fileExtMap.get(file2) ?? ".bin";
-          if (isEofChunk(await readBuffer(path$3.join(chunksDir, `${file2}${ext2}`)))) {
+          if (isEofByte(await readFirstByte(path$3.join(chunksDir, `${file2}${ext2}`)))) {
             streamDone = true;
             break;
           }
@@ -118113,8 +118292,7 @@ function createStreamer$1(basedir, tag) {
             if (typeof startIndex === "number" && startIndex < 0 && chunkFiles.length > 0) {
               const lastFile = chunkFiles[chunkFiles.length - 1];
               const lastExt = fileExtMap.get(lastFile) ?? ".bin";
-              const lastChunk = deserializeChunk(await readBuffer(path$3.join(chunksDir, `${lastFile}${lastExt}`)));
-              if ((lastChunk == null ? void 0 : lastChunk.eof) === true) {
+              if (isEofByte(await readFirstByte(path$3.join(chunksDir, `${lastFile}${lastExt}`)))) {
                 dataChunkCount--;
               }
             }
@@ -118261,7 +118439,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-CdMzuwNr.js");
+        const { HookSchema: HookSchema2 } = await import("./index-DltGJ3CV.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) {
@@ -118413,8 +118591,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-N0DDbkKZ.js").then((n) => n.t),
-        await import("./token--89oCxEK.js").then((n) => n.t)
+        await import("./token-util-DwTdh-aG.js").then((n) => n.t),
+        await import("./token-BNjLoJXz.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -123585,7 +123763,7 @@ var QueueClient = class {
     setApi(this, new ApiClient({ ...options, region }));
   }
 };
-const version = "5.0.0-beta.7";
+const version = "5.0.0-beta.8";
 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) {
@@ -124743,6 +124921,16 @@ const MAX_CHUNKS_PER_REQUEST = 1e3;
 function getStreamUrl(name2, runId, httpConfig) {
   return new URL(`${httpConfig.baseUrl}/v2/runs/${encodeURIComponent(runId)}/stream/${encodeURIComponent(name2)}`);
 }
+function createStreamRequestError(operation, url2, response2, text2) {
+  const context = [`PUT ${url2.origin}${url2.pathname}`];
+  for (const header of ["x-vercel-id", "x-vercel-error"]) {
+    const value = response2.headers.get(header);
+    if (value) {
+      context.push(`${header}=${value}`);
+    }
+  }
+  return new Error(`Stream ${operation} failed: HTTP ${response2.status} (${context.join("; ")}): ${text2}`);
+}
 function encodeMultiChunks(chunks) {
   const encoder2 = new TextEncoder();
   const binaryChunks = [];
@@ -124782,14 +124970,15 @@ function createStreamer(config2) {
       async write(runId, name2, chunk) {
         const resolvedRunId = await runId;
         const httpConfig = await getHttpConfig(config2);
-        const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+        const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+        const response2 = await fetch(url2, {
           method: "PUT",
           body: chunk,
           headers: httpConfig.headers
         });
         const text2 = await response2.text();
         if (!response2.ok) {
-          throw new Error(`Stream write failed: HTTP ${response2.status}: ${text2}`);
+          throw createStreamRequestError("write", url2, response2, text2);
         }
       },
       async writeMulti(runId, name2, chunks) {
@@ -124801,14 +124990,15 @@ function createStreamer(config2) {
         for (let i = 0; i < chunks.length; i += MAX_CHUNKS_PER_REQUEST) {
           const batch = chunks.slice(i, i + MAX_CHUNKS_PER_REQUEST);
           const body2 = encodeMultiChunks(batch);
-          const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+          const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+          const response2 = await fetch(url2, {
             method: "PUT",
             body: body2,
             headers: httpConfig.headers
           });
           const text2 = await response2.text();
           if (!response2.ok) {
-            throw new Error(`Stream write failed: HTTP ${response2.status}: ${text2}`);
+            throw createStreamRequestError("write", url2, response2, text2);
           }
         }
       },
@@ -124816,13 +125006,14 @@ function createStreamer(config2) {
         const resolvedRunId = await runId;
         const httpConfig = await getHttpConfig(config2);
         httpConfig.headers.set("X-Stream-Done", "true");
-        const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+        const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+        const response2 = await fetch(url2, {
           method: "PUT",
           headers: httpConfig.headers
         });
         const text2 = await response2.text();
         if (!response2.ok) {
-          throw new Error(`Stream close failed: HTTP ${response2.status}: ${text2}`);
+          throw createStreamRequestError("close", url2, response2, text2);
         }
       },
       async get(runId, name2, startIndex) {
@@ -151461,7 +151652,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-ORTTXEp6.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/mermaid-3ZIDBTTL-TNUP6Q3m.js"], "css": ["/assets/root-COvK3yNk.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-Cai0GqMt.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DKqOOMnz.js", "/assets/mermaid-3ZIDBTTL-TNUP6Q3m.js", "/assets/index-Byi8AWfe.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-DNZJxxPM.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DKqOOMnz.js", "/assets/mermaid-3ZIDBTTL-TNUP6Q3m.js", "/assets/encryption-C69WMRfh.js", "/assets/index-Byi8AWfe.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-127f70fe.js", "version": "127f70fe", "sri": void 0 };
+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-3uuTxUQN.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.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-MRChHR_P.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DaYMiBT9.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.js", "/assets/index-Byi8AWfe.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-8qGjUNCj.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DaYMiBT9.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.js", "/assets/encryption-C69WMRfh.js", "/assets/index-Byi8AWfe.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-b100514d.js", "version": "b100514d", "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 };