@workflow/web 5.0.0-beta.23 → 5.0.0-beta.25

package/build/server/assets/{server-build-DAfWosK8.js → server-build-D7EgG_DH.js}

@@ -14,7 +14,11 @@ 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, _d, _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, getEncryptionKeyLazily_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-BgELNM37.js";
+import { createRequire as __wkfCreateRequire } from "node:module";
+if (typeof require === "undefined") {
+  globalThis.require = __wkfCreateRequire(import.meta.url);
+}
+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-e2FYIgWU.js";
 import require$$0$4, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1 from "crypto";
@@ -30043,6 +30047,54 @@ const getDefaultConfig = () => {
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
 };
+const mergeConfigs = (baseConfig, {
+  cacheSize,
+  prefix,
+  experimentalParseClassName,
+  extend: extend2 = {},
+  override = {}
+}) => {
+  overrideProperty(baseConfig, "cacheSize", cacheSize);
+  overrideProperty(baseConfig, "prefix", prefix);
+  overrideProperty(baseConfig, "experimentalParseClassName", experimentalParseClassName);
+  overrideConfigProperties(baseConfig.theme, override.theme);
+  overrideConfigProperties(baseConfig.classGroups, override.classGroups);
+  overrideConfigProperties(baseConfig.conflictingClassGroups, override.conflictingClassGroups);
+  overrideConfigProperties(baseConfig.conflictingClassGroupModifiers, override.conflictingClassGroupModifiers);
+  overrideProperty(baseConfig, "orderSensitiveModifiers", override.orderSensitiveModifiers);
+  mergeConfigProperties(baseConfig.theme, extend2.theme);
+  mergeConfigProperties(baseConfig.classGroups, extend2.classGroups);
+  mergeConfigProperties(baseConfig.conflictingClassGroups, extend2.conflictingClassGroups);
+  mergeConfigProperties(baseConfig.conflictingClassGroupModifiers, extend2.conflictingClassGroupModifiers);
+  mergeArrayProperties(baseConfig, extend2, "orderSensitiveModifiers");
+  return baseConfig;
+};
+const overrideProperty = (baseObject, overrideKey, overrideValue) => {
+  if (overrideValue !== void 0) {
+    baseObject[overrideKey] = overrideValue;
+  }
+};
+const overrideConfigProperties = (baseObject, overrideObject) => {
+  if (overrideObject) {
+    for (const key in overrideObject) {
+      overrideProperty(baseObject, key, overrideObject[key]);
+    }
+  }
+};
+const mergeConfigProperties = (baseObject, mergeObject) => {
+  if (mergeObject) {
+    for (const key in mergeObject) {
+      mergeArrayProperties(baseObject, mergeObject, key);
+    }
+  }
+};
+const mergeArrayProperties = (baseObject, mergeObject, key) => {
+  const mergeValue = mergeObject[key];
+  if (mergeValue !== void 0) {
+    baseObject[key] = baseObject[key] ? baseObject[key].concat(mergeValue) : mergeValue;
+  }
+};
+const extendTailwindMerge = (configExtension, ...createConfig) => typeof configExtension === "function" ? createTailwindMerge(getDefaultConfig, configExtension, ...createConfig) : createTailwindMerge(() => mergeConfigs(getDefaultConfig(), configExtension), ...createConfig);
 const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function parseName(tag, name2) {
   if (typeof name2 !== "string") {
@@ -30707,102 +30759,78 @@ const __iconNode = [
   ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
 ];
 const ZoomOut = createLucideIcon("zoom-out", __iconNode);
-function cn$4(...inputs) {
-  return twMerge(clsx(inputs));
-}
-const MS_IN_SECOND = 1e3;
-const MS_IN_MINUTE = 60 * MS_IN_SECOND;
-const MS_IN_HOUR = 60 * MS_IN_MINUTE;
-const MS_IN_DAY = 24 * MS_IN_HOUR;
-function formatDuration(ms2, compact = false) {
-  if (ms2 === 0) {
-    return "0s";
-  }
-  if (ms2 < MS_IN_SECOND) {
-    const roundedMs2 = Math.round(ms2);
-    return roundedMs2 < MS_IN_SECOND ? `${roundedMs2}ms` : "1s";
-  }
-  const roundedMs = Math.round(ms2 / MS_IN_SECOND) * MS_IN_SECOND;
-  if (roundedMs < MS_IN_MINUTE) {
-    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
-  }
-  if (compact) {
-    if (roundedMs < MS_IN_HOUR) {
-      const m3 = Math.floor(roundedMs / MS_IN_MINUTE);
-      const s2 = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
-      return s2 > 0 ? `${m3}m ${s2}s` : `${m3}m`;
-    }
-    const h2 = Math.floor(roundedMs / MS_IN_HOUR);
-    const m2 = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
-    return m2 > 0 ? `${h2}h ${m2}m` : `${h2}h`;
-  }
-  const days = Math.floor(roundedMs / MS_IN_DAY);
-  const hours = Math.floor(roundedMs % MS_IN_DAY / MS_IN_HOUR);
-  const minutes = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
-  const seconds = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
-  const parts = [];
-  if (days > 0) {
-    parts.push(`${days}d`);
-  }
-  if (hours > 0) {
-    parts.push(`${hours}h`);
-  }
-  if (minutes > 0) {
-    parts.push(`${minutes}m`);
-  }
-  parts.push(`${seconds}s`);
-  return parts.join(" ");
-}
-const preciseSecondsFormatter = new Intl.NumberFormat(void 0, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2
-});
-function formatDurationPrecise(ms2) {
-  if (ms2 === 0) {
-    return "0s";
-  }
-  if (ms2 < MS_IN_SECOND) {
-    const roundedMs = Math.round(ms2);
-    if (roundedMs < MS_IN_SECOND) {
-      return `${roundedMs}ms`;
+const twMergeConfig = {
+  extend: {
+    classGroups: {
+      "text-heading": [
+        {
+          "text-heading": [
+            "72",
+            "64",
+            "56",
+            "48",
+            "40",
+            "32",
+            "24",
+            "20",
+            "16",
+            "14"
+          ]
+        }
+      ],
+      "text-button": [
+        {
+          "text-button": ["16", "14", "12"]
+        }
+      ],
+      "text-label": [
+        {
+          "text-label": [
+            "20",
+            "18",
+            "16",
+            "14",
+            "14-mono",
+            "13",
+            "13-mono",
+            "12",
+            "12-mono"
+          ]
+        }
+      ],
+      "text-copy": [
+        {
+          "text-copy": ["24", "20", "18", "16", "14", "13", "13-mono"]
+        }
+      ],
+      material: [
+        {
+          material: [
+            "base",
+            "small",
+            "medium",
+            "large",
+            "tooltip",
+            "menu",
+            "modal",
+            "fullscreen"
+          ]
+        }
+      ]
+    },
+    // Make each category conflict with itself, so e.g. text-heading-32 overrides text-heading-24
+    conflictingClassGroups: {
+      "text-heading": ["text-heading"],
+      "text-button": ["text-button"],
+      "text-label": ["text-label"],
+      "text-copy": ["text-copy"],
+      material: ["material"]
     }
   }
-  const normalizedMs = Math.round(ms2 / 10) * 10;
-  if (normalizedMs < MS_IN_MINUTE) {
-    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
-  }
-  const days = Math.floor(normalizedMs / MS_IN_DAY);
-  const hours = Math.floor(normalizedMs % MS_IN_DAY / MS_IN_HOUR);
-  const minutes = Math.floor(normalizedMs % MS_IN_HOUR / MS_IN_MINUTE);
-  const seconds = normalizedMs % MS_IN_MINUTE / MS_IN_SECOND;
-  const parts = [];
-  if (days > 0) {
-    parts.push(`${days}d`);
-  }
-  if (hours > 0) {
-    parts.push(`${hours}h`);
-  }
-  if (minutes > 0) {
-    parts.push(`${minutes}m`);
-  }
-  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
-  return parts.join(" ");
-}
-function isDoStreamStep(stepName) {
-  return stepName.endsWith("//doStreamStep");
-}
-function extractConversation(stepInput) {
-  if (!Array.isArray(stepInput) || stepInput.length === 0) {
-    return null;
-  }
-  const firstArg = stepInput[0];
-  if (!Array.isArray(firstArg)) {
-    return null;
-  }
-  if (!firstArg.every((msg) => msg && typeof msg === "object" && "role" in msg)) {
-    return null;
-  }
-  return firstArg;
+};
+const customTwMerge = extendTailwindMerge(twMergeConfig);
+function cn$4(...classes) {
+  return customTwMerge(clsx(...classes));
 }
 function ErrorCard({ title, className, details = "Unknown error" }) {
   const [isExpanded, setIsExpanded] = reactExports.useState(false);
@@ -49884,7 +49912,7 @@ function replaceEncryptedAndExpiredWithMarkers(resource) {
 async function hydrateResourceIOWithKey(resource, key) {
   const { hydrateDataWithKey: hydrateDataWithKey2 } = await Promise.resolve().then(() => serializationFormat);
   const { importKey: importKey2 } = await Promise.resolve().then(() => encryption);
-  const { ensureZstdDecoderRegistered } = await import("./zstd-browser-decoder-eXH_mKQG.js");
+  const { ensureZstdDecoderRegistered } = await import("./zstd-browser-decoder-CcinVfMP.js");
   ensureZstdDecoderRegistered();
   const cryptoKey = await importKey2(key);
   const revivers = getRevivers();
@@ -51026,6 +51054,100 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
+const MS_IN_SECOND = 1e3;
+const MS_IN_MINUTE = 60 * MS_IN_SECOND;
+const MS_IN_HOUR = 60 * MS_IN_MINUTE;
+const MS_IN_DAY = 24 * MS_IN_HOUR;
+function formatDuration(ms2, compact = false) {
+  if (ms2 === 0) {
+    return "0s";
+  }
+  if (ms2 < MS_IN_SECOND) {
+    const roundedMs2 = Math.round(ms2);
+    return roundedMs2 < MS_IN_SECOND ? `${roundedMs2}ms` : "1s";
+  }
+  const roundedMs = Math.round(ms2 / MS_IN_SECOND) * MS_IN_SECOND;
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
+  }
+  if (compact) {
+    if (roundedMs < MS_IN_HOUR) {
+      const m3 = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s2 = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
+      return s2 > 0 ? `${m3}m ${s2}s` : `${m3}m`;
+    }
+    const h2 = Math.floor(roundedMs / MS_IN_HOUR);
+    const m2 = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
+    return m2 > 0 ? `${h2}h ${m2}m` : `${h2}h`;
+  }
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor(roundedMs % MS_IN_DAY / MS_IN_HOUR);
+  const minutes = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
+  const seconds = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
+  const parts = [];
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${seconds}s`);
+  return parts.join(" ");
+}
+const preciseSecondsFormatter = new Intl.NumberFormat(void 0, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+});
+function formatDurationPrecise(ms2) {
+  if (ms2 === 0) {
+    return "0s";
+  }
+  if (ms2 < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms2);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+  const normalizedMs = Math.round(ms2 / 10) * 10;
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor(normalizedMs % MS_IN_DAY / MS_IN_HOUR);
+  const minutes = Math.floor(normalizedMs % MS_IN_HOUR / MS_IN_MINUTE);
+  const seconds = normalizedMs % MS_IN_MINUTE / MS_IN_SECOND;
+  const parts = [];
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  return parts.join(" ");
+}
+function isDoStreamStep(stepName) {
+  return stepName.endsWith("//doStreamStep");
+}
+function extractConversation(stepInput) {
+  if (!Array.isArray(stepInput) || stepInput.length === 0) {
+    return null;
+  }
+  const firstArg = stepInput[0];
+  if (!Array.isArray(firstArg)) {
+    return null;
+  }
+  if (!firstArg.every((msg) => msg && typeof msg === "object" && "role" in msg)) {
+    return null;
+  }
+  return firstArg;
+}
 function CopyButton({ copyText, ariaLabel, className }) {
   const [copied, setCopied] = reactExports.useState(false);
   const timeoutRef = reactExports.useRef(null);
@@ -52777,6 +52899,18 @@ function formatEventTime(date2) {
     hour12: false
   }) + "." + date2.getMilliseconds().toString().padStart(3, "0");
 }
+function parseEventDate(value) {
+  if (value == null)
+    return null;
+  const date2 = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date2.getTime()) ? null : date2;
+}
+function getEffectiveEventDate$1(event) {
+  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+}
+function getEffectiveEventTime(event) {
+  return getEffectiveEventDate$1(event).getTime();
+}
 function formatEventType(eventType) {
   return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
@@ -52817,13 +52951,13 @@ function buildNameMaps(events2, run2) {
   return { correlationNameMap, workflowName };
 }
 function buildDurationMap(events2) {
-  const chronological = [...events2].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime());
+  const chronological = [...events2].sort((a2, b2) => getEffectiveEventTime(a2) - getEffectiveEventTime(b2));
   const createdTimes = /* @__PURE__ */ new Map();
   const firstStartedTimes = /* @__PURE__ */ new Map();
   const startedTimes = /* @__PURE__ */ new Map();
   const durations = /* @__PURE__ */ new Map();
   for (const event of chronological) {
-    const ts = new Date(event.createdAt).getTime();
+    const ts = getEffectiveEventTime(event);
     const key = event.correlationId ?? "__run__";
     const type = event.eventType;
     if (type === "step_created" || type === "run_created") {
@@ -53046,7 +53180,7 @@ const SORT_OPTIONS = [
   { value: "desc", label: "Newest" },
   { value: "asc", label: "Oldest" }
 ];
-function RowsSkeleton() {
+function RowsSkeleton({ showSeparateEventOccurrenceTimestamps = false }) {
   return jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 16 }, (_2, i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0", style: { height: 40 }, children: [jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch flex items-center", style: { width: GUTTER_WIDTH }, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "absolute",
     left: 8,
@@ -53058,9 +53192,9 @@ function RowsSkeleton() {
     height: i % 4 === 0 ? 8 : 6,
     borderRadius: "50%",
     marginLeft: i % 4 === 0 ? 5 : 6
-  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
+  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
 }
-function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false }) {
+function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected, suppressGroupDimming = false, showSeparateEventOccurrenceTimestamps = false }) {
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadedEventData, setLoadedEventData] = reactExports.useState(cachedEventData);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -53073,6 +53207,8 @@ function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggl
   const rowGroupKey = isRunLevel(event.eventType) ? "__run__" : event.correlationId ?? void 0;
   const statusDotColor = getStatusDotColor(event.eventType);
   const createdAt = new Date(event.createdAt);
+  const occurredAt = parseEventDate(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate$1(event);
   const hasExistingEventData = "eventData" in event && event.eventData != null;
   const isRun = isRunLevel(event.eventType);
   const eventName2 = isRun ? workflowName ?? "-" : event.correlationId ? correlationNameMap.get(event.correlationId) ?? "-" : "-";
@@ -53176,7 +53312,7 @@ function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggl
   }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
     color: "var(--ds-gray-900)",
     transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-  } }) }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: createdAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(createdAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
+  } }) }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: occurredAt ? jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(occurredAt) }) }) : "-" }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: displayedCreatedAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(displayedCreatedAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
     position: "relative",
     display: "inline-flex",
     width: 6,
@@ -53205,7 +53341,7 @@ function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggl
     color: "var(--ds-red-900)"
   }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
 }
-function EventListViewInner({ events: events2, run: run2, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch }) {
+function EventListViewInner({ events: events2, run: run2, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false, onExactIdSearch, showSeparateEventOccurrenceTimestamps = false }) {
   const toast2 = useToast();
   const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
   const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
@@ -53231,7 +53367,7 @@ function EventListViewInner({ events: events2, run: run2, onLoadEventData, hasMo
     if (sourceEvents.length === 0)
       return [];
     const dir = effectiveSortOrder === "desc" ? -1 : 1;
-    return [...sourceEvents].sort((a2, b2) => dir * (new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime()));
+    return [...sourceEvents].sort((a2, b2) => dir * (getEffectiveEventTime(a2) - getEffectiveEventTime(b2)));
   }, [events2, effectiveSortOrder, isExactSearchActive, searchResults]);
   const hasEncryptedInlineData = reactExports.useMemo(() => {
     const sourceEvents = isExactSearchActive ? searchResults : events2;
@@ -53459,14 +53595,14 @@ function EventListViewInner({ events: events2, run: run2, onLoadEventData, hasMo
     borderColor: "var(--ds-gray-alpha-200)",
     color: "var(--ds-gray-900)",
     backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Time" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching || searchLoading ? jsxRuntimeExports.jsx(RowsSkeleton, {}) : sortedEvents2.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-sm", style: { color: "var(--ds-gray-700)" }, children: searchNotFound && searchQuery.trim() ? `No events found for ${searchQuery.trim()}` : searchError ? searchError : parsedSearchId && searchQuery.trim() && !onExactIdSearch ? "Exact ID search is unavailable in this view." : "No events found" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents2.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), showSeparateEventOccurrenceTimestamps && jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Occurred" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Created" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching || searchLoading ? jsxRuntimeExports.jsx(RowsSkeleton, { showSeparateEventOccurrenceTimestamps }) : sortedEvents2.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex flex-1 items-center justify-center px-6 text-center text-sm", style: { color: "var(--ds-gray-700)" }, children: searchNotFound && searchQuery.trim() ? `No events found for ${searchQuery.trim()}` : searchError ? searchError : parsedSearchId && searchQuery.trim() && !onExactIdSearch ? "Exact ID search is unavailable in this view." : "No events found" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents2.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
     if (isExactSearchActive || !hasMoreEvents || isLoadingMoreEvents) {
       return;
     }
     void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
   }, itemContent: (index2) => {
     const ev = sortedEvents2[index2];
-    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index: index2, isFirst: index2 === 0, isLast: index2 === sortedEvents2.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive });
+    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index: index2, isFirst: index2 === 0, isLast: index2 === sortedEvents2.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected, suppressGroupDimming: isExactSearchActive, showSeparateEventOccurrenceTimestamps });
   }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs", style: {
     borderColor: "var(--ds-gray-alpha-200)",
     color: "var(--ds-gray-900)",
@@ -53728,6 +53864,22 @@ function HookResolveModalWrapper({ hookActions }) {
   const { selectedHook, closeResolveModal, handleResolve, isResolving } = hookActions;
   return jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: selectedHook !== null, onClose: closeResolveModal, onSubmit: handleResolve, isSubmitting: isResolving });
 }
+const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
+const ROWS = [
+  { id: "r0", name: 62, off: 0, bar: 72 },
+  { id: "r1", name: 78, off: 6, bar: 48 },
+  { id: "r2", name: 50, off: 10, bar: 55 },
+  { id: "r3", name: 84, off: 18, bar: 30 },
+  { id: "r4", name: 45, off: 18, bar: 42 },
+  { id: "r5", name: 66, off: 34, bar: 38 },
+  { id: "r6", name: 55, off: 41, bar: 25 },
+  { id: "r7", name: 40, off: 50, bar: 30 }
+];
+const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
+const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
+function TraceViewerSkeleton() {
+  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id2) => jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5 w-9" }, id2)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton$2, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
+}
 function shouldShowVerticalLine(eventType) {
   if (eventType === "hook_created" || eventType === "hook_received" || eventType === "hook_disposed") {
     return true;
@@ -53783,10 +53935,17 @@ const MARKER_EVENT_TYPES = /* @__PURE__ */ new Set([
   "wait_completed",
   "attr_set"
 ]);
-function convertEventsToSpanEvents(events2, filterTypes = true) {
+const getEventTimestamp = (event) => {
+  const value = (event == null ? void 0 : event.occurredAt) ?? (event == null ? void 0 : event.createdAt);
+  if (!value)
+    return void 0;
+  const date2 = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date2.getTime()) ? void 0 : date2;
+};
+function convertEventsToSpanEvents(events2, filterTypes = true, options = {}) {
   return events2.filter((event) => filterTypes ? MARKER_EVENT_TYPES.has(event.eventType) : true).map((event) => ({
     name: event.eventType,
-    timestamp: dateToOtelTime(event.createdAt),
+    timestamp: dateToOtelTime(options.preferOccurredAt ? getEventTimestamp(event) ?? event.createdAt : event.createdAt),
     attributes: {
       eventId: event.eventId,
       correlationId: event.correlationId,
@@ -53806,9 +53965,9 @@ const waitEventsToWaitEntity = (events2) => {
   return {
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
-    createdAt: startEvent.createdAt,
+    createdAt: getEventTimestamp(startEvent) ?? startEvent.createdAt,
     resumeAt: ((_a3 = startEvent.eventData) == null ? void 0 : _a3.resumeAt) ? new Date(startEvent.eventData.resumeAt) : void 0,
-    completedAt: completedEvent == null ? void 0 : completedEvent.createdAt
+    completedAt: getEventTimestamp(completedEvent)
   };
 };
 function waitToSpan(events2, maxEndTime, fallbackEndTime = maxEndTime) {
@@ -53865,16 +54024,16 @@ const stepEventsToStepEntity = (events2) => {
         status = "running";
         attempt += 1;
         if (!startedAt)
-          startedAt = e.createdAt;
+          startedAt = getEventTimestamp(e) ?? e.createdAt;
         completedAt = void 0;
         break;
       case "step_completed":
         status = "completed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_failed":
         status = "failed";
-        completedAt = e.createdAt;
+        completedAt = getEventTimestamp(e) ?? e.createdAt;
         break;
       case "step_retrying":
         status = "pending";
@@ -53891,8 +54050,8 @@ const stepEventsToStepEntity = (events2) => {
     stepName: ((_a3 = createdEvent == null ? void 0 : createdEvent.eventData) == null ? void 0 : _a3.stepName) ?? "",
     status,
     attempt,
-    createdAt: anchorEvent.createdAt,
-    updatedAt: (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
+    createdAt: getEventTimestamp(anchorEvent) ?? anchorEvent.createdAt,
+    updatedAt: getEventTimestamp(lastEvent) ?? (lastEvent == null ? void 0 : lastEvent.createdAt) ?? anchorEvent.createdAt,
     startedAt,
     completedAt,
     specVersion: anchorEvent.specVersion
@@ -53909,13 +54068,20 @@ function stepToSpan(stepEvents, maxEndTime) {
     data: step
   };
   const resource = "step";
-  const endTime = new Date(step.completedAt ?? maxEndTime);
-  const events2 = convertEventsToSpanEvents(stepEvents, false);
-  const spanStartTime = new Date(step.createdAt);
+  const events2 = convertEventsToSpanEvents(stepEvents, false, {
+    preferOccurredAt: true
+  });
+  const spanStartEvent = stepEvents.find((event) => event.eventType === "step_created") ?? stepEvents[0];
+  const spanStartTime = getEventTimestamp(spanStartEvent) ?? new Date(step.createdAt);
   let activeStartTime = step.startedAt ? new Date(step.startedAt) : void 0;
   const firstStartEvent = stepEvents.find((event) => event.eventType === "step_started");
   if (firstStartEvent) {
-    activeStartTime = new Date(firstStartEvent.createdAt);
+    activeStartTime = getEventTimestamp(firstStartEvent) ?? new Date(firstStartEvent.createdAt);
+  }
+  let endTime = new Date(maxEndTime);
+  if (step.completedAt) {
+    const completedEvent = stepEvents.slice().reverse().find((event) => event.eventType === "step_completed" || event.eventType === "step_failed");
+    endTime = getEventTimestamp(completedEvent) ?? new Date(step.completedAt);
   }
   return {
     spanId: String(step.stepId),
@@ -53937,7 +54103,7 @@ function stepToSpan(stepEvents, maxEndTime) {
   };
 }
 const hookEventsToHookEntity = (events2) => {
-  var _a3, _b2;
+  var _a3;
   const createdEvent = events2.find((event) => event.eventType === "hook_created");
   if (!createdEvent) {
     return null;
@@ -53949,10 +54115,10 @@ const hookEventsToHookEntity = (events2) => {
     hookId: createdEvent.correlationId,
     runId: createdEvent.runId,
     token: (_a3 = createdEvent.eventData) == null ? void 0 : _a3.token,
-    createdAt: createdEvent.createdAt,
+    createdAt: getEventTimestamp(createdEvent) ?? createdEvent.createdAt,
     receivedCount: receivedEvents.length,
-    lastReceivedAt: (lastReceivedEvent == null ? void 0 : lastReceivedEvent.createdAt) || void 0,
-    disposedAt: ((_b2 = disposedEvents.at(-1)) == null ? void 0 : _b2.createdAt) || void 0
+    lastReceivedAt: getEventTimestamp(lastReceivedEvent),
+    disposedAt: getEventTimestamp(disposedEvents.at(-1))
   };
 };
 function hookToSpan(hookEvents, maxEndTime) {
@@ -53985,15 +54151,26 @@ function hookToSpan(hookEvents, maxEndTime) {
 function runToSpan(run2, runEvents, nowTime) {
   var _a3;
   const now2 = nowTime ?? /* @__PURE__ */ new Date();
+  const runCreatedEvent = runEvents.find((event) => event.eventType === "run_created");
+  const runStartedEvent = runEvents.find((event) => event.eventType === "run_started");
+  const terminalEvent = runEvents.slice().reverse().find((event) => event.eventType === "run_completed" || event.eventType === "run_failed" || event.eventType === "run_cancelled");
+  const spanStartTime = getEventTimestamp(runCreatedEvent) ?? new Date(run2.createdAt);
+  const activeStartTime = getEventTimestamp(runStartedEvent) ?? (run2.startedAt ? new Date(run2.startedAt) : void 0);
+  const completedAt = getEventTimestamp(terminalEvent) ?? run2.completedAt ?? void 0;
+  const endTime = completedAt ?? now2;
   const { input: _i, output: _o2, error: _e2, ...runIdentity } = run2;
   const attributes = {
     resource: "run",
-    data: runIdentity
+    data: {
+      ...runIdentity,
+      createdAt: spanStartTime,
+      startedAt: activeStartTime,
+      completedAt
+    }
   };
-  const spanStartTime = new Date(run2.createdAt);
-  const activeStartTime = run2.startedAt ? new Date(run2.startedAt) : void 0;
-  const endTime = run2.completedAt ?? now2;
-  const events2 = convertEventsToSpanEvents(runEvents, false);
+  const events2 = convertEventsToSpanEvents(runEvents, false, {
+    preferOccurredAt: true
+  });
   return {
     spanId: String(run2.runId),
     name: String(((_a3 = parseWorkflowName(run2.workflowName)) == null ? void 0 : _a3.shortName) ?? "?"),
@@ -54063,7 +54240,7 @@ function groupEventsByCorrelation(events2) {
 function computeLatestKnownTime(events2, run2) {
   let latest = new Date(run2.createdAt).getTime();
   for (const event of events2) {
-    const t = new Date(event.createdAt).getTime();
+    const t = (getEventTimestamp(event) ?? new Date(event.createdAt)).getTime();
     if (t > latest)
       latest = t;
   }
@@ -82626,7 +82803,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-CP60Gm_l.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-B7xcG7gl.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 }) })] }) });
@@ -82948,7 +83125,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-PK-HMOJq.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-DQqBhQ9Y.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;
@@ -83647,7 +83824,7 @@ const getModuleSpecifierFromName = (value) => {
   }
   return raw2;
 };
-const parseDateValue = (value) => {
+const parseDateValue$1 = (value) => {
   if (value == null) {
     return null;
   }
@@ -83662,14 +83839,14 @@ const parseDateValue = (value) => {
 };
 const formatLocalMillisecondTime = (date2) => format(date2, "MMM dd HH:mm:ss.SS OO").toUpperCase();
 const localMillisecondTimeOrNull = (value) => {
-  const date2 = parseDateValue(value);
+  const date2 = parseDateValue$1(value);
   if (!date2) {
     return null;
   }
   return formatLocalMillisecondTime(date2);
 };
 const timestampWithTooltipOrNull = (value) => {
-  const date2 = parseDateValue(value);
+  const date2 = parseDateValue$1(value);
   if (!date2)
     return null;
   return jsxRuntimeExports.jsx(TimestampTooltip, { date: date2, children: jsxRuntimeExports.jsx("span", { children: formatLocalMillisecondTime(date2) }) });
@@ -83876,8 +84053,8 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error: error2, expir
       return present;
     if (resource === "sleep")
       return present;
-    const loadingDefaults = ["input", "output"];
-    for (const key of loadingDefaults) {
+    const loadingPlaceholders = ["input", "output"];
+    for (const key of loadingPlaceholders) {
       if (!present.includes(key)) {
         present.push(key);
       }
@@ -83942,7 +84119,23 @@ const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
   "wait_completed",
   "attr_set"
 ]);
-function EventItem({ event, onLoadEventData, encryptionKey }) {
+const parseDateValue = (value) => {
+  if (value == null)
+    return null;
+  const date2 = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date2.getTime()) ? null : date2;
+};
+const getEffectiveEventDate = (event) => parseDateValue(event.occurredAt) ?? new Date(event.createdAt);
+const formatEventTimestamp = (date2) => date2.toLocaleString(void 0, {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  second: "numeric",
+  fractionalSecondDigits: 3,
+  timeZoneName: "short"
+});
+function EventItem({ event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
   const [loadedData, setLoadedData] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const [loadError, setLoadError] = reactExports.useState(null);
@@ -83983,16 +84176,18 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
     void loadEventData({ force: true });
   }, [encryptionKey, loadEventData]);
   const createdAt = new Date(event.createdAt);
-  const createdAtTime = createdAt.toLocaleTimeString(void 0, {
+  const occurredAt = parseDateValue(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps ? createdAt : getEffectiveEventDate(event);
+  const displayedCreatedAtTime = displayedCreatedAt.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "numeric",
     second: "numeric"
   });
   const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: createdAtTime })] }), onToggle: canHaveData ? (open) => {
+  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: displayedCreatedAtTime })] }), onToggle: canHaveData ? (open) => {
     if (open)
       handleExpand();
-  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
+  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [showSeparateEventOccurrenceTimestamps && occurredAt && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Occurred" }), jsxRuntimeExports.jsx(TimestampTooltip, { date: occurredAt, children: jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: formatEventTimestamp(occurredAt) }) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
 }
 function hasOnlyExpiredFields(data, eventType) {
   if (data === null || typeof data !== "object" || Array.isArray(data)) {
@@ -84028,13 +84223,13 @@ function EventDataBlock({ eventType, data }) {
   }
   return jsxRuntimeExports.jsx(CopyableDataBlock, { data });
 }
-function EventsList({ events: events2, isLoading = false, error: error2, onLoadEventData, onStreamClick, onRunClick, encryptionKey }) {
-  const sortedEvents2 = reactExports.useMemo(() => [...events2].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime()), [events2]);
+function EventsList({ events: events2, isLoading = false, error: error2, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps = false }) {
+  const sortedEvents2 = reactExports.useMemo(() => [...events2].sort((a2, b2) => getEffectiveEventDate(a2).getTime() - getEffectiveEventDate(b2).getTime()), [events2]);
   const hasEvents = sortedEvents2.length > 0 && !error2;
   if (!hasEvents && !isLoading) {
     return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", disabled: true });
   }
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents2.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) }) }) });
+  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents2.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey, showSeparateEventOccurrenceTimestamps }, event.eventId)) }) }) }) });
 }
 const SidebarDataContext = reactExports.createContext(null);
 SidebarDataContext.displayName = "SidebarDataContext";
@@ -84052,6 +84247,43 @@ function useSidebarDataOptional() {
   return reactExports.useContext(SidebarDataContext);
 }
 const hasField = (value, key) => key in value;
+const RESOURCES_WITH_FETCHED_DETAIL = /* @__PURE__ */ new Set(["run", "step", "sleep"]);
+function resourceNeedsFetchedDetail(resource) {
+  return resource !== void 0 && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+function deriveSpanDetailView(args) {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } = args;
+  const matchedDetail = spanDetailMatchesSelection(fetchedDetail, resource, resourceId) ? fetchedDetail : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail);
+  if (!resource || !resourceId) {
+    return { status: "idle", displayData, detail: null, error: void 0 };
+  }
+  if (fetchedError) {
+    return {
+      status: "error",
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: "ready",
+      displayData,
+      detail: matchedDetail,
+      error: void 0
+    };
+  }
+  return { status: "loading", displayData, detail: null, error: void 0 };
+}
 function spanDetailMatchesSelection(detail, resource, resourceId) {
   if (!detail || typeof detail !== "object" || !resource || !resourceId) {
     return false;
@@ -84084,16 +84316,88 @@ function mergeSpanDetail(spanData, detail) {
   }
   return merged;
 }
-function isStep(data) {
-  return data !== null && typeof data === "object" && "stepId" in data;
+function deriveSpanSelection(selectedSpan) {
+  if (!selectedSpan)
+    return null;
+  const { resource, data } = selectedSpan;
+  if (resource === "step" && data && typeof data === "object" && "stepId" in data) {
+    const step = data;
+    return { resource: "step", resourceId: step.stepId, runId: step.runId };
+  }
+  if (resource === "run" && data && typeof data === "object" && "runId" in data) {
+    return { resource: "run", resourceId: data.runId };
+  }
+  if (resource === "hook" && data && typeof data === "object" && "hookId" in data) {
+    return { resource: "hook", resourceId: data.hookId };
+  }
+  if (resource === "sleep") {
+    if (!selectedSpan.spanId)
+      return null;
+    const waitData = data;
+    return {
+      resource: "sleep",
+      resourceId: selectedSpan.spanId,
+      runId: waitData == null ? void 0 : waitData.runId
+    };
+  }
+  return null;
 }
-function isWorkflowRun(data) {
-  return data !== null && typeof data === "object" && "runId" in data;
+function useSelectedSpanDetail(selectedSpan, fetchSpanDetail) {
+  const selection2 = reactExports.useMemo(() => deriveSpanSelection(selectedSpan), [selectedSpan]);
+  const resource = selection2 == null ? void 0 : selection2.resource;
+  const resourceId = selection2 == null ? void 0 : selection2.resourceId;
+  const runId = selection2 == null ? void 0 : selection2.runId;
+  const selectionKey = resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+  const [fetched, setFetched] = reactExports.useState({ detail: null, error: null, errorKey: null });
+  const tokenRef = reactExports.useRef(0);
+  const selectionRef = reactExports.useRef(selection2);
+  selectionRef.current = selection2;
+  reactExports.useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection).then((detail) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({ detail, error: null, errorKey: null });
+    }).catch((err) => {
+      if (tokenRef.current !== token)
+        return;
+      setFetched({
+        detail: null,
+        error: err instanceof Error ? err : new Error(String(err)),
+        errorKey: selectionKey
+      });
+    });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+  const view = reactExports.useMemo(() => deriveSpanDetailView({
+    resource,
+    resourceId,
+    inlineData: selectedSpan == null ? void 0 : selectedSpan.data,
+    fetchedDetail: fetched.detail,
+    fetchedError: scopedError
+  }), [resource, resourceId, selectedSpan == null ? void 0 : selectedSpan.data, fetched.detail, scopedError]);
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail,
+    error: view.error
+  };
 }
 function isHook(data) {
   return data !== null && typeof data === "object" && "hookId" in data;
 }
-function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, spanDetailData, spanDetailError, spanDetailLoading, onSpanSelect, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan }) {
+function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, fetchSpanDetail, onWakeUpSleep, onLoadEventData, onResolveHook, encryptionKey, onDecrypt, isDecrypting = false, selectedSpan, showSeparateEventOccurrenceTimestamps = false }) {
   const toast2 = useToast();
   const [stoppingSleep, setStoppingSleep] = reactExports.useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
@@ -84104,41 +84408,8 @@ function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, spanDetailDat
   const data = selectedSpan == null ? void 0 : selectedSpan.data;
   const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
   const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
-  const { resource, resourceId, runId } = reactExports.useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: void 0, resourceId: void 0, runId: void 0 };
-    }
-    const res = selectedSpan.resource;
-    if (res === "step" && isStep(data)) {
-      return { resource: "step", resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === "run" && isWorkflowRun(data)) {
-      return { resource: "run", resourceId: data.runId, runId: void 0 };
-    }
-    if (res === "hook" && isHook(data)) {
-      return { resource: "hook", resourceId: data.hookId, runId: void 0 };
-    }
-    if (res === "sleep") {
-      const waitData = data;
-      return {
-        resource: "sleep",
-        resourceId: selectedSpan.spanId,
-        runId: waitData == null ? void 0 : waitData.runId
-      };
-    }
-    return { resource: void 0, resourceId: void 0, runId: void 0 };
-  }, [selectedSpan, data]);
-  const onSpanSelectRef = reactExports.useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-  reactExports.useEffect(() => {
-    if (resource && resourceId && ["run", "step", "hook", "sleep"].includes(resource)) {
-      onSpanSelectRef.current({
-        resource,
-        resourceId,
-        runId
-      });
-    }
-  }, [resource, resourceId, runId]);
+  const { status, resource, resourceId, displayData, detail: matchedSpanDetailData, error: error2 } = useSelectedSpanDetail(selectedSpan, fetchSpanDetail);
+  const loading = status === "loading";
   const canWakeUp = reactExports.useMemo(() => {
     if (resource !== "sleep" || !rawEvents)
       return false;
@@ -84171,9 +84442,6 @@ function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, spanDetailDat
     run2.status,
     resolvedHookIds
   ]);
-  const error2 = spanDetailError ?? void 0;
-  const loading = spanDetailLoading ?? false;
-  const matchedSpanDetailData = reactExports.useMemo(() => spanDetailMatchesSelection(spanDetailData, resource, resourceId) ? spanDetailData : null, [spanDetailData, resource, resourceId]);
   const hookToken = reactExports.useMemo(() => {
     if (resource !== "hook" || !resourceId)
       return void 0;
@@ -84258,7 +84526,6 @@ function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, spanDetailDat
       setResolvingHook(false);
     }
   }, [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]);
-  const displayData = reactExports.useMemo(() => mergeSpanDetail(data, matchedSpanDetailData), [data, matchedSpanDetailData]);
   const moduleSpecifier = reactExports.useMemo(() => {
     const displayRecord = displayData;
     const displayStepName = displayRecord.stepName;
@@ -84287,7 +84554,7 @@ function EntityDetailPanel({ run: run2, onStreamClick, onRunClick, spanDetailDat
   }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
     background: "var(--ds-gray-1000)",
     color: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run2.expiredAt, isLoading: loading, error: error2 ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
+  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run2.expiredAt, isLoading: loading, error: error2 ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, onStreamClick, onRunClick, encryptionKey, showSeparateEventOccurrenceTimestamps })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
 const MAP_HEIGHT = 56;
 const TIMELINE_PADDING = 8;
@@ -85554,6 +85821,41 @@ 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 } }) })] });
 }
+function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
+  const [entry2, setEntry] = reactExports.useState();
+  const frozen = (entry2 == null ? void 0 : entry2.isIntersecting) && freezeOnceVisible;
+  reactExports.useEffect(() => {
+    const node2 = elementRef == null ? void 0 : elementRef.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || frozen || !node2)
+      return;
+    const updateEntry = ([entry3]) => {
+      setEntry(entry3);
+    };
+    const observer = new IntersectionObserver(updateEntry, {
+      threshold,
+      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
+      rootMargin
+    });
+    observer.observe(node2);
+    return () => observer.disconnect();
+  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
+  return entry2;
+}
+function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
+  const sentinelRef = reactExports.useRef(null);
+  const entry2 = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
+  const loadMoreRef = reactExports.useRef(loadMore);
+  reactExports.useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+  reactExports.useEffect(() => {
+    if ((entry2 == null ? void 0 : entry2.isIntersecting) && hasMore && !isLoadingMore) {
+      loadMoreRef.current();
+    }
+  }, [entry2 == null ? void 0 : entry2.isIntersecting, hasMore, isLoadingMore]);
+  return sentinelRef;
+}
 const 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",
@@ -85597,57 +85899,6 @@ const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 te
 function Kbd({ children: children2, className, variant, size: size2, ...props }) {
   return jsxRuntimeExports.jsx("kbd", { className: cn$4(kbdVariants({ variant, size: size2, className })), ...props, children: children2 });
 }
-const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
-const ROWS = [
-  { id: "r0", name: 62, off: 0, bar: 72 },
-  { id: "r1", name: 78, off: 6, bar: 48 },
-  { id: "r2", name: 50, off: 10, bar: 55 },
-  { id: "r3", name: 84, off: 18, bar: 30 },
-  { id: "r4", name: 45, off: 18, bar: 42 },
-  { id: "r5", name: 66, off: 34, bar: 38 },
-  { id: "r6", name: 55, off: 41, bar: 25 },
-  { id: "r7", name: 40, off: 50, bar: 30 }
-];
-const HEADER_MARKERS = ["m0", "m1", "m2", "m3"];
-const HeaderDivider = () => jsxRuntimeExports.jsx("div", { className: "flex justify-center", children: jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }) });
-function TraceViewerSkeleton() {
-  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading trace", className: "flex flex-col w-full h-full min-h-0 bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading trace…" }), jsxRuntimeExports.jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsxs("div", { className: "h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-3.5 h-3.5 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5 w-40" })] }), jsxRuntimeExports.jsx(HeaderDivider, {}), jsxRuntimeExports.jsx("div", { className: "h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2", children: jsxRuntimeExports.jsx("div", { className: "relative flex-1 flex items-end justify-between", children: HEADER_MARKERS.map((id2) => jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5 w-9" }, id2)) }) })] }), jsxRuntimeExports.jsxs("div", { className: "grid flex-1 min-h-0 overflow-hidden", style: { gridTemplateColumns: COL_TEMPLATE }, children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx("ul", { className: "block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: ROWS.map((row) => jsxRuntimeExports.jsxs("li", { className: "h-10 flex items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "w-4 h-4 shrink-0 rounded-sm" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3.5", style: { width: `${row.name}%` } })] }), jsxRuntimeExports.jsx(Skeleton$2, { className: "ml-2 h-3.5 w-10 shrink-0" })] }, row.id)) }) }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: "h-full w-px bg-gray-alpha-400" }), jsxRuntimeExports.jsx("div", { className: "relative min-h-0", children: ROWS.map((row) => jsxRuntimeExports.jsx("div", { className: "relative h-10", children: jsxRuntimeExports.jsx("div", { className: "absolute inset-x-4 inset-y-0", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]", style: { left: `${row.off}%`, width: `${row.bar}%` } }) }) }, row.id)) })] })] });
-}
-function useIntersectionObserver(elementRef, { threshold = 0, rootRef, rootMargin = "0%", freezeOnceVisible = false } = {}) {
-  const [entry2, setEntry] = reactExports.useState();
-  const frozen = (entry2 == null ? void 0 : entry2.isIntersecting) && freezeOnceVisible;
-  reactExports.useEffect(() => {
-    const node2 = elementRef == null ? void 0 : elementRef.current;
-    const hasIOSupport = !!window.IntersectionObserver;
-    if (!hasIOSupport || frozen || !node2)
-      return;
-    const updateEntry = ([entry3]) => {
-      setEntry(entry3);
-    };
-    const observer = new IntersectionObserver(updateEntry, {
-      threshold,
-      root: (rootRef == null ? void 0 : rootRef.current) ?? null,
-      rootMargin
-    });
-    observer.observe(node2);
-    return () => observer.disconnect();
-  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
-  return entry2;
-}
-function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMargin = "400px" }) {
-  const sentinelRef = reactExports.useRef(null);
-  const entry2 = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
-  const loadMoreRef = reactExports.useRef(loadMore);
-  reactExports.useEffect(() => {
-    loadMoreRef.current = loadMore;
-  }, [loadMore]);
-  reactExports.useEffect(() => {
-    if ((entry2 == null ? void 0 : entry2.isIntersecting) && hasMore && !isLoadingMore) {
-      loadMoreRef.current();
-    }
-  }, [entry2 == null ? void 0 : entry2.isIntersecting, hasMore, isLoadingMore]);
-  return sentinelRef;
-}
 const TooltipProvider = Provider$2;
 const Tooltip$1 = Root3$1;
 const TooltipTrigger$1 = Trigger$4;
@@ -86233,57 +86484,6 @@ const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
     paddingBottom: (spans.length - end) * ROW_HEIGHT_PX
   }, children: spans.slice(start2, end).map((span) => jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId)) });
 };
-const hint$1 = "_hint_1dmsq_3";
-const styles$2 = {
-  hint: hint$1
-};
-const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
-const DISMISSAL_LIMIT = 3;
-const HINT_ROTATION_MS = 8e3;
-function getAltKeyLabel() {
-  if (typeof navigator === "undefined")
-    return "Alt";
-  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
-}
-function readDismissals() {
-  try {
-    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
-    return Number.isNaN(dismissals) ? 0 : dismissals;
-  } catch {
-    return 0;
-  }
-}
-function AltHint() {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
-}
-function NavHint() {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
-}
-function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
-  const [visible, setVisible] = reactExports.useState(false);
-  const [index2, setIndex] = reactExports.useState(0);
-  reactExports.useEffect(() => {
-    setVisible(readDismissals() < DISMISSAL_LIMIT);
-  }, []);
-  reactExports.useEffect(() => {
-    if (reducedMotion)
-      return;
-    const id2 = setInterval(() => {
-      setIndex((i) => i === 0 ? 1 : 0);
-    }, HINT_ROTATION_MS);
-    return () => clearInterval(id2);
-  }, [reducedMotion]);
-  if (!visible || !hasMultipleSpans)
-    return null;
-  const dismiss = () => {
-    try {
-      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
-    } catch {
-    }
-    setVisible(false);
-  };
-  return jsxRuntimeExports.jsxs("div", { className: "group absolute bottom-3 left-1/2 z-10 hidden h-8 max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 text-xs leading-none text-gray-900 md:inline-flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles$2.hint}`, children: index2 === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index2) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X$3, { className: "h-3 w-3" }) })] });
-}
 const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
@@ -86424,11 +86624,11 @@ function OffscreenMarkerIndicator({ direction, count: count2, targetMs, onReveal
   return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": label, title: label, onClick: (e) => {
     e.stopPropagation();
     onReveal == null ? void 0 : onReveal(targetMs);
-  }, className: cn$4("pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 shadow-sm hover:bg-gray-100", direction === "right" ? "right-0 pl-1.5" : "left-0 pr-1.5"), children: direction === "left" ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [chevron, tick] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [tick, chevron] }) });
+  }, className: cn$4("pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 hover:bg-gray-100", direction === "right" ? "right-0 pl-1.5" : "left-0 pr-1.5"), children: direction === "left" ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [chevron, tick] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [tick, chevron] }) });
 }
 const runningStripes = "_runningStripes_1ii0z_1";
 const pendingStripes = "_pendingStripes_1ii0z_2";
-const styles$1 = {
+const styles$2 = {
   runningStripes,
   pendingStripes
 };
@@ -86457,7 +86657,7 @@ const STRIPED_SEGMENT_STATUSES = /* @__PURE__ */ new Set([
   "received"
 ]);
 function AnimatedStripes({ status }) {
-  return jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: status === "pending" ? styles$1.pendingStripes : styles$1.runningStripes });
+  return jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: status === "pending" ? styles$2.pendingStripes : styles$2.runningStripes });
 }
 function computeBarGeometry(startMs, endMs, viewStart, viewEnd, containerWidth) {
   const viewDuration = viewEnd - viewStart;
@@ -86621,6 +86821,57 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
     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}%` } }, String(marker2.value)) : 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}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start2 * ROW_HEIGHT_PX}px)` }, children: spans.slice(start2, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, onRevealTime }, 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 hint$1 = "_hint_1dmsq_3";
+const styles$1 = {
+  hint: hint$1
+};
+const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
+const DISMISSAL_LIMIT = 3;
+const HINT_ROTATION_MS = 8e3;
+function getAltKeyLabel() {
+  if (typeof navigator === "undefined")
+    return "Alt";
+  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
+}
+function readDismissals() {
+  try {
+    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
+    return Number.isNaN(dismissals) ? 0 : dismissals;
+  } catch {
+    return 0;
+  }
+}
+function AltHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
+}
+function NavHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
+}
+function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
+  const [visible, setVisible] = reactExports.useState(false);
+  const [index2, setIndex] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    setVisible(readDismissals() < DISMISSAL_LIMIT);
+  }, []);
+  reactExports.useEffect(() => {
+    if (reducedMotion)
+      return;
+    const id2 = setInterval(() => {
+      setIndex((i) => i === 0 ? 1 : 0);
+    }, HINT_ROTATION_MS);
+    return () => clearInterval(id2);
+  }, [reducedMotion]);
+  if (!visible || !hasMultipleSpans)
+    return null;
+  const dismiss = () => {
+    try {
+      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
+    } catch {
+    }
+    setVisible(false);
+  };
+  return jsxRuntimeExports.jsxs("div", { className: "group absolute bottom-3 left-1/2 z-10 hidden h-8 max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 text-xs leading-none text-gray-900 md:inline-flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles$1.hint}`, children: index2 === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index2) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X$3, { className: "h-3 w-3" }) })] });
+}
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
 function ActiveSpanProvider({ spans, children: children2 }) {
@@ -87074,7 +87325,7 @@ function NewTraceViewerContent({ trace: trace2, onLoadMore, hasMore, isLoadingMo
       e.stopPropagation();
       setSearchQuery("");
     }
-  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace2.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, 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 }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace2.spans.length > 1, reducedMotion })] });
+  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace2.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, onRevealTime: handleRevealTime, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: handleClearActiveSpan, 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, fetchSpanDetail: sidebar.fetchSpanDetail, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan, showSeparateEventOccurrenceTimestamps: sidebar.showSeparateEventOccurrenceTimestamps }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace2.spans.length > 1, reducedMotion })] });
 }
 const NewTraceViewer = ({ run: run2, events: events2, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace2 = reactExports.useMemo(() => {
@@ -90771,7 +91022,7 @@ async function deserializeTraceCarrier(traceCarrier) {
 }
 const OtelApi = once$1(async () => {
   try {
-    return await import("./index-meg9qk8y.js");
+    return await import("./index-Dq5jTBN4.js");
   } catch {
     runtimeLogger.info("OpenTelemetry not available, tracing will be disabled");
     return null;
@@ -90870,10 +91121,11 @@ function matchesDebugNamespace(namespace2, patternList) {
   }
   return enabled;
 }
-function createLogger(namespace2) {
+function createLogger(namespace2, options = {}) {
   const build = (parentMetadata) => {
+    const getDebugNamespace = (level) => options.debugNamespace ?? `workflow:${namespace2}:${level}`;
     const logger = (level) => {
-      const debugNamespace = `workflow:${namespace2}:${level}`;
+      const debugNamespace = getDebugNamespace(level);
       return (message2, metadata) => {
         const hasParent = Object.keys(parentMetadata).length > 0;
         const hasCallSite = metadata && Object.keys(metadata).length > 0;
@@ -90908,7 +91160,14 @@ function createLogger(namespace2) {
   };
   return build({});
 }
+createLogger("step");
 const runtimeLogger = createLogger("runtime");
+createLogger("webhook");
+createLogger("events");
+createLogger("adapter");
+createLogger("build", {
+  debugNamespace: "workflow:build"
+});
 const NONCE_LENGTH = 12;
 const TAG_LENGTH = 128;
 const KEY_LENGTH = 32;
@@ -90979,7 +91238,7 @@ const encryption = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   encrypt: encrypt$1,
   importKey
 }, Symbol.toStringTag, { value: "Module" }));
-const version$1 = "5.0.0-beta.23";
+const version$1 = "5.0.0-beta.25";
 const WorldCacheKey = Symbol.for("@workflow/world//cache");
 const WorldCachePromiseKey = Symbol.for("@workflow/world//cachePromise");
 const GetWorldFnKey$1 = Symbol.for("@workflow/world//getWorldFn");
@@ -92593,7 +92852,16 @@ function createReconnectingFramedStream(runId, name2, startIndex) {
 }
 const STREAM_FLUSH_INTERVAL_MS = 10;
 class WorkflowServerWritableStream extends WritableStream {
-  constructor(runId, name2) {
+  /**
+   * @param runReadyBarrier Turbo mode only: a promise that resolves once the
+   * backgrounded `run_started` has landed. When the step body runs
+   * optimistically (before `run_started` is durable), the first chunk write to
+   * a brand-new stream would otherwise reach the World before the run exists
+   * and be rejected as run-not-found. Awaiting this once before the first
+   * flush/close orders the write after the run's creation. `undefined` outside
+   * turbo and on the await path, where the run was already durable.
+   */
+  constructor(runId, name2, runReadyBarrier) {
     if (typeof runId !== "string") {
       throw new WorkflowRuntimeError(`"runId" must be a string, got "${typeof runId}"`);
     }
@@ -92601,6 +92869,16 @@ class WorkflowServerWritableStream extends WritableStream {
       throw new WorkflowRuntimeError(`"name" is required, got "${name2}"`);
     }
     const worldPromise = getWorldLazy();
+    let pendingRunReady = runReadyBarrier;
+    const ensureRunReady = async () => {
+      if (pendingRunReady) {
+        try {
+          await pendingRunReady;
+        } catch {
+        }
+        pendingRunReady = void 0;
+      }
+    };
     let buffer2 = [];
     let flushTimer = null;
     let flushPromise = null;
@@ -92612,6 +92890,7 @@ class WorkflowServerWritableStream extends WritableStream {
       }
       if (buffer2.length === 0)
         return;
+      await ensureRunReady();
       const chunksToFlush = buffer2.slice();
       const world = await worldPromise;
       if (resolvedFlushIntervalMs === void 0) {
@@ -92661,6 +92940,7 @@ class WorkflowServerWritableStream extends WritableStream {
           flushPromise = null;
         }
         await flush();
+        await ensureRunReady();
         const world = await worldPromise;
         await world.streams.close(runId, name2);
       },
@@ -92776,7 +93056,7 @@ function attachAbortListenerOnce(signal, streamName, runId, cryptoKey, ops) {
     })());
   }, { once: true });
 }
-function getExternalReducers(global2 = globalThis, ops, runId, cryptoKey, framedByteStreams = false) {
+function getExternalReducers(global2 = globalThis, ops, runId, cryptoKey, framedByteStreams = false, runReadyBarrier) {
   return {
     ...getAllBaseReducers(global2),
     ReadableStream: (value) => {
@@ -92790,7 +93070,7 @@ function getExternalReducers(global2 = globalThis, ops, runId, cryptoKey, framed
       const streamId = (global2[STABLE_ULID] || defaultUlid)();
       const name2 = `strm_${streamId}`;
       const type = getStreamType(value);
-      const writable = new WorkflowServerWritableStream(runId, name2);
+      const writable = new WorkflowServerWritableStream(runId, name2, runReadyBarrier);
       if (type === "bytes") {
         if (framedByteStreams) {
           ops.push(value.pipeThrough(getByteFramingStream()).pipeTo(writable));
@@ -92798,7 +93078,7 @@ function getExternalReducers(global2 = globalThis, ops, runId, cryptoKey, framed
           ops.push(value.pipeTo(writable));
         }
       } else {
-        ops.push(value.pipeThrough(getSerializeStream(getExternalReducers(global2, ops, runId, cryptoKey, framedByteStreams), cryptoKey)).pipeTo(writable));
+        ops.push(value.pipeThrough(getSerializeStream(getExternalReducers(global2, ops, runId, cryptoKey, framedByteStreams, runReadyBarrier), cryptoKey)).pipeTo(writable));
       }
       const s2 = { name: name2 };
       if (type)
@@ -92908,7 +93188,7 @@ function getWorkflowReducers(global2 = globalThis) {
     }
   };
 }
-function getStepReducers(global2 = globalThis, ops, runId, cryptoKey, framedByteStreams = false) {
+function getStepReducers(global2 = globalThis, ops, runId, cryptoKey, framedByteStreams = false, runReadyBarrier) {
   return {
     ...getAllBaseReducers(global2),
     ReadableStream: (value) => {
@@ -92927,7 +93207,7 @@ function getStepReducers(global2 = globalThis, ops, runId, cryptoKey, framedByte
         name2 = `strm_${streamId}`;
         type = getStreamType(value);
         framing = type === "bytes" && framedByteStreams ? "framed-v1" : framing;
-        const writable = new WorkflowServerWritableStream(runId, name2);
+        const writable = new WorkflowServerWritableStream(runId, name2, runReadyBarrier);
         if (type === "bytes") {
           if (framing === "framed-v1") {
             ops.push(value.pipeThrough(getByteFramingStream()).pipeTo(writable));
@@ -92935,7 +93215,7 @@ function getStepReducers(global2 = globalThis, ops, runId, cryptoKey, framedByte
             ops.push(value.pipeTo(writable));
           }
         } else {
-          ops.push(value.pipeThrough(getSerializeStream(getStepReducers(global2, ops, runId, cryptoKey, framedByteStreams), cryptoKey)).pipeTo(writable));
+          ops.push(value.pipeThrough(getSerializeStream(getStepReducers(global2, ops, runId, cryptoKey, framedByteStreams, runReadyBarrier), cryptoKey)).pipeTo(writable));
         }
       }
       const s2 = { name: name2 };
@@ -93541,16 +93821,16 @@ async function hydrateStepArguments(value, runId, key, ops = [], global2 = globa
   await recordCompression(compressionStats, "deserialize");
   return result;
 }
-async function dehydrateStepReturnValue(value, runId, key, ops = [], global2 = globalThis, v1Compat = false, framedByteStreams = false, compression = false) {
+async function dehydrateStepReturnValue(value, runId, key, ops = [], global2 = globalThis, v1Compat = false, framedByteStreams = false, compression = false, runReadyBarrier) {
   if (v1Compat) {
-    const str = stringify$2(value, getStepReducers(global2, ops, runId, key, framedByteStreams));
+    const str = stringify$2(value, getStepReducers(global2, ops, runId, key, framedByteStreams, runReadyBarrier));
     return revive(str);
   }
   try {
     const compressionStats = {};
     const result = await serialize(value, key, {
       global: global2,
-      extraReducers: getStreamAndRequestReducers(getStepReducers(global2, ops, runId, key, framedByteStreams)),
+      extraReducers: getStreamAndRequestReducers(getStepReducers(global2, ops, runId, key, framedByteStreams, runReadyBarrier)),
       compression,
       compressionStats
     });
@@ -93909,6 +94189,9 @@ function stripTag(fileId) {
 function hasTag(fileId, tag) {
   return fileId.endsWith(`.${tag}`);
 }
+function isUntagged(fileId) {
+  return !TAG_PATTERN.test(fileId);
+}
 function taggedPath(basedir, entityDir, fileId, tag) {
   assertSafeEntityId("fileId", fileId);
   if (tag !== void 0)
@@ -94335,7 +94618,7 @@ async function initDataDir(dataDir) {
 let otelApiPromise$1 = null;
 async function getOtelApi$1() {
   if (!otelApiPromise$1) {
-    otelApiPromise$1 = import("./index-meg9qk8y.js").catch(() => null);
+    otelApiPromise$1 = import("./index-Dq5jTBN4.js").catch(() => null);
   }
   return otelApiPromise$1;
 }
@@ -120147,34 +120430,54 @@ function createQueue$2(config2) {
         await semaphore.acquire();
       }
       const MAX_LOCAL_SAFETY_LIMIT = 256;
+      let delivery = 0;
       try {
-        for (let attempt = 0; attempt < MAX_LOCAL_SAFETY_LIMIT; attempt++) {
+        for (let loop = 0; loop < MAX_LOCAL_SAFETY_LIMIT; loop++) {
           const headers2 = {
             ...opts == null ? void 0 : opts.headers,
             "content-type": "application/json",
             "x-vqs-queue-name": queueName,
             "x-vqs-message-id": messageId,
-            "x-vqs-message-attempt": String(attempt + 1)
+            "x-vqs-message-attempt": String(delivery + 1)
           };
           const directHandler = directHandlers.get(prefix);
           let response2;
-          if (directHandler) {
-            const req = new Request(`http://localhost/.well-known/workflow/v1/${pathname}`, {
-              method: "POST",
-              headers: headers2,
-              body: body2
-            });
-            response2 = await directHandler(req);
-          } else {
-            const baseUrl = await resolveBaseUrl$1(config2);
-            response2 = await fetch(`${baseUrl}/.well-known/workflow/v1/${pathname}`, {
-              method: "POST",
-              duplex: "half",
-              dispatcher: httpAgent,
-              headers: headers2,
-              body: body2
+          try {
+            if (directHandler) {
+              const req = new Request(`http://localhost/.well-known/workflow/v1/${pathname}`, {
+                method: "POST",
+                headers: headers2,
+                body: body2
+              });
+              response2 = await directHandler(req);
+            } else {
+              const baseUrl = await resolveBaseUrl$1(config2);
+              response2 = await fetch(`${baseUrl}/.well-known/workflow/v1/${pathname}`, {
+                method: "POST",
+                duplex: "half",
+                dispatcher: httpAgent,
+                headers: headers2,
+                body: body2
+              });
+            }
+          } catch (err) {
+            const name2 = err == null ? void 0 : err.name;
+            if (closeSignal.aborted || name2 === "AbortError" || name2 === "ResponseAborted") {
+              return;
+            }
+            if (isDetachedArrayBufferQueueError(err))
+              throw err;
+            console.error(`[world-local] Queue delivery failed at the transport (loop ${loop + 1}), retrying`, {
+              queueName,
+              messageId,
+              ...runId && { runId },
+              ...stepId && { stepId },
+              error: String(err)
             });
+            await setTimeout$1(5e3, void 0, { signal: closeSignal });
+            continue;
           }
+          delivery++;
           const text2 = await response2.text();
           if (response2.ok) {
             try {
@@ -120192,7 +120495,7 @@ function createQueue$2(config2) {
             }
             return;
           }
-          console.error(`[world-local] Queue message failed (attempt ${attempt + 1}, HTTP ${response2.status})`, {
+          console.error(`[world-local] Queue message failed (attempt ${delivery}, HTTP ${response2.status})`, {
             queueName,
             messageId,
             ...runId && { runId },
@@ -121903,13 +122206,14 @@ function createLocalWorld(args) {
       if (!recoverActiveRuns) {
         return;
       }
-      const recoveryRuns = tag ? {
+      const fileIdFilter = tag ? (fileId) => hasTag(fileId, tag) : isUntagged;
+      const recoveryRuns = {
         ...storage.runs,
         list: ((params) => storage.runs.list({
           ...params,
-          fileIdFilter: (fileId) => hasTag(fileId, tag)
+          fileIdFilter
         }))
-      } : storage.runs;
+      };
       await reenqueueActiveRuns(recoveryRuns, queue.queue, "world-local");
     },
     async close() {
@@ -121920,7 +122224,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-D7poz6vJ.js");
+        const { HookSchema: HookSchema2 } = await import("./index-BELZxbAO.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) {
@@ -122073,8 +122377,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-M95T0pVo.js").then((n) => n.t),
-        await import("./token-BCYgRbLT.js").then((n) => n.t)
+        await import("./token-util-CCeU4-vR.js").then((n) => n.t),
+        await import("./token-guLCf66r.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -122638,32 +122942,63 @@ function requireDist() {
 }
 var distExports = requireDist();
 let _dispatcher;
+let _eventsDispatcher;
+let _streamDispatcher;
+const BASE_AGENT_OPTIONS = {
+  connections: 8,
+  keepAliveTimeout: 1e4,
+  // HTTP/1.1 pipelining is disabled (pipelining: 1) because it causes
+  // head-of-line blocking that deadlocks the webhook respondWith mechanism.
+  pipelining: 1
+};
+const DEFAULT_AGENT_OPTIONS = {
+  ...BASE_AGENT_OPTIONS,
+  allowH2: false
+};
+const EVENTS_AGENT_OPTIONS = {
+  ...BASE_AGENT_OPTIONS,
+  allowH2: true
+};
+const RETRY_AGENT_OPTIONS = {
+  // Observe Retry-After header if received
+  retryAfter: true
+  // By default, we observe re-try headers, and also separately
+  // re-try on these status codes: 429 / 500 / 502 / 503 / 504.
+  // TODO: We might want to let 429s pass through, so that we can do
+  // runtime retry-after handling through the queue.
+};
+const STREAM_RETRY_OPTIONS = {
+  retryAfter: true,
+  methods: ["PUT"],
+  statusCodes: [429]
+};
 function getDispatcher(config2) {
   return (config2 == null ? void 0 : config2.dispatcher) ?? getDefaultDispatcher();
 }
+function getEventsDispatcher(config2) {
+  return (config2 == null ? void 0 : config2.dispatcher) ?? getDefaultEventsDispatcher();
+}
+function getStreamDispatcher(config2) {
+  return (config2 == null ? void 0 : config2.dispatcher) ?? getDefaultStreamDispatcher();
+}
 function getDefaultDispatcher() {
   if (!_dispatcher) {
-    _dispatcher = new undiciExports.RetryAgent(new undiciExports.Agent({
-      connections: 8,
-      keepAliveTimeout: 1e4,
-      // H2 is specifically incompatible with SvelteKit on Vercel prod. Everything else
-      // runs fine.
-      // TODO: Investigate/fix the failure on SvelteKit so we can re-enable H2.
-      allowH2: false,
-      // HTTP/1.1 pipelining is disabled (pipelining: 1) because it causes
-      // head-of-line blocking that deadlocks the webhook respondWith mechanism.
-      pipelining: 1
-    }), {
-      // Observe Retry-After header if received
-      retryAfter: true
-      // By default, we observe re-try headers, and also separately
-      // re-try on these status codes: 429 / 500 / 502 / 503 / 504.
-      // TODO: We might want to let 429s pass through, so that we can do
-      // runtime retry-after handling through the queue.
-    });
+    _dispatcher = new undiciExports.RetryAgent(new undiciExports.Agent(DEFAULT_AGENT_OPTIONS), RETRY_AGENT_OPTIONS);
   }
   return _dispatcher;
 }
+function getDefaultEventsDispatcher() {
+  if (!_eventsDispatcher) {
+    _eventsDispatcher = new undiciExports.RetryAgent(new undiciExports.Agent(EVENTS_AGENT_OPTIONS), RETRY_AGENT_OPTIONS);
+  }
+  return _eventsDispatcher;
+}
+function getDefaultStreamDispatcher() {
+  if (!_streamDispatcher) {
+    _streamDispatcher = new undiciExports.RetryAgent(new undiciExports.Agent(EVENTS_AGENT_OPTIONS), STREAM_RETRY_OPTIONS);
+  }
+  return _streamDispatcher;
+}
 const KEY_BYTES = 32;
 async function deriveRunKey(deploymentKey, projectId, runId) {
   if (deploymentKey.length !== KEY_BYTES) {
@@ -122760,7 +123095,7 @@ function createGetEncryptionKeyForRun(projectId, teamId, token, dispatcher2) {
 let otelApiPromise = null;
 async function getOtelApi() {
   if (!otelApiPromise) {
-    otelApiPromise = import("./index-meg9qk8y.js").catch(() => null);
+    otelApiPromise = import("./index-Dq5jTBN4.js").catch(() => null);
   }
   return otelApiPromise;
 }
@@ -127423,7 +127758,7 @@ var QueueClient = class {
     setApi(this, new ApiClient({ ...options, region }));
   }
 };
-const version = "5.0.0-beta.20";
+const version = "5.0.0-beta.21";
 const HTTP_DEBUG_ENABLED = typeof process !== "undefined" && typeof process.env.DEBUG === "string" && (process.env.DEBUG.includes("workflow:") || process.env.DEBUG === "*");
 function httpLog(method, endpoint, response2, ms2) {
   if (HTTP_DEBUG_ENABLED) {
@@ -128007,7 +128342,7 @@ async function fetchV4(url2, init2, config2) {
     headers: init2.headers,
     body: init2.body,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- undici dispatcher type doesn't match @types/node's RequestInit
-    dispatcher: getDispatcher(config2)
+    dispatcher: getEventsDispatcher(config2)
   });
 }
 function headersToRecord(headers2) {
@@ -128840,7 +129175,9 @@ function createStreamer(config2) {
         const response2 = await fetch(url2, {
           method: "PUT",
           body: chunk,
-          headers: httpConfig.headers
+          headers: httpConfig.headers,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- undici dispatcher type doesn't match @types/node's RequestInit
+          dispatcher: getStreamDispatcher(config2)
         });
         const text2 = await response2.text();
         if (!response2.ok) {
@@ -128860,7 +129197,9 @@ function createStreamer(config2) {
           const response2 = await fetch(url2, {
             method: "PUT",
             body: body2,
-            headers: httpConfig.headers
+            headers: httpConfig.headers,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- undici dispatcher type doesn't match @types/node's RequestInit
+            dispatcher: getStreamDispatcher(config2)
           });
           const text2 = await response2.text();
           if (!response2.ok) {
@@ -128875,7 +129214,9 @@ function createStreamer(config2) {
         const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
         const response2 = await fetch(url2, {
           method: "PUT",
-          headers: httpConfig.headers
+          headers: httpConfig.headers,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- undici dispatcher type doesn't match @types/node's RequestInit
+          dispatcher: getStreamDispatcher(config2)
         });
         const text2 = await response2.text();
         if (!response2.ok) {
@@ -129045,7 +129386,7 @@ const getWorld = async () => {
 const GetWorldFnKey = Symbol.for("@workflow/world//getWorldFn");
 globalThis[GetWorldFnKey] ?? (globalThis[GetWorldFnKey] = getWorld);
 function waitUntil(promise2) {
-  void import("./index-B8YoYr9f.js").then((n) => n.i).then(({ waitUntil: waitUntil2 }) => {
+  void import("./index-DIXsjgfZ.js").then((n) => n.i).then(({ waitUntil: waitUntil2 }) => {
     waitUntil2(promise2);
   });
 }
@@ -137374,130 +137715,48 @@ async function fetchResourceWithCorrelationId(env2, resource, resourceId, option
   }
   return { data: resourceData, correlationId };
 }
-function useWorkflowResourceData(env2, resource, resourceId, options = {}) {
-  const { refreshInterval = 0, runId, enabled = true, encryptionKey } = options;
-  const [data, setData] = reactExports.useState(
-    null
-  );
-  const [loading, setLoading] = reactExports.useState(enabled);
-  const [error2, setError] = reactExports.useState(null);
-  const hydrate = reactExports.useCallback(
-    async (resource2) => encryptionKey ? hydrateResourceIOWithKey(resource2, encryptionKey) : hydrateResourceIO(resource2),
-    [encryptionKey]
-  );
-  const prevSelectionRef = reactExports.useRef("");
-  const fetchData = reactExports.useCallback(async () => {
-    if (!enabled) {
-      setLoading(false);
-      return;
-    }
-    const selectionKey = `${resource}:${resourceId}`;
-    if (selectionKey !== prevSelectionRef.current) {
-      setData(null);
-      prevSelectionRef.current = selectionKey;
-    }
-    setError(null);
-    setLoading(true);
-    if (resource === "hook") {
-      try {
-        const { error: error22, result } = await unwrapServerActionResult(
-          fetchHook$1(env2, resourceId, "all")
-        );
-        if (error22) {
-          setError(error22);
-          return;
-        }
-        try {
-          setData(await hydrate(result));
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
-    }
-    if (resource === "sleep") {
-      try {
-        if (!runId) {
-          setError(new Error("runId is required for loading sleep details"));
-          return;
-        }
-        const { error: error22, result } = await unwrapServerActionResult(
-          fetchEvents$1(env2, runId, {
-            sortOrder: "asc",
-            limit: 1e3,
-            withData: true
-          })
-        );
-        if (error22) {
-          setError(error22);
-          return;
-        }
-        try {
-          const allEvents = result.data.map(
-            hydrateResourceIO
-          );
-          const waitEvents = await Promise.all(
-            allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
-          );
-          const data2 = waitEventsToWaitEntity(waitEvents);
-          if (data2 === null) {
-            setError(
-              new Error(
-                `Failed to load ${resource} details: missing required event data`
-              )
-            );
-            return;
-          }
-          setData(data2);
-        } catch (hydrateError) {
-          setError(
-            hydrateError instanceof Error ? hydrateError : new Error(String(hydrateError))
-          );
-        }
-      } finally {
-        setLoading(false);
-      }
-      return;
+async function fetchSpanDetailResource(env2, selection2, options = {}) {
+  const { resource, resourceId, runId } = selection2;
+  const { encryptionKey } = options;
+  const hydrate = async (value) => encryptionKey ? hydrateResourceIOWithKey(value, encryptionKey) : hydrateResourceIO(value);
+  if (resource === "hook") {
+    const result = await unwrapOrThrow(fetchHook$1(env2, resourceId, "all"));
+    return hydrate(result);
+  }
+  if (resource === "sleep") {
+    if (!runId) {
+      throw new WorkflowWebAPIError(
+        "runId is required for loading sleep details",
+        { layer: "client" }
+      );
     }
-    try {
-      const { data: resourceData } = await fetchResourceWithCorrelationId(
-        env2,
-        resource,
-        resourceId,
-        { runId }
+    const result = await unwrapOrThrow(
+      fetchEvents$1(env2, runId, { sortOrder: "asc", limit: 1e3, withData: true })
+    );
+    const allEvents = result.data.map(
+      hydrateResourceIO
+    );
+    const waitEvents = await Promise.all(
+      allEvents.filter((e) => e.correlationId === resourceId).map(hydrate)
+    );
+    const data2 = waitEventsToWaitEntity(waitEvents);
+    if (data2 === null) {
+      throw new WorkflowWebAPIError(
+        `Failed to load ${resource} details: missing required event data`,
+        { layer: "client" }
       );
-      setData(await hydrate(resourceData));
-    } catch (error22) {
-      if (error22 instanceof Error) {
-        setError(error22);
-      } else {
-        setError(new Error(String(error22)));
-      }
-      return;
-    } finally {
-      setLoading(false);
     }
-  }, [env2, resource, resourceId, runId, enabled, hydrate]);
-  reactExports.useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  reactExports.useEffect(() => {
-    if (!refreshInterval || refreshInterval <= 0) {
-      return;
+    return data2;
+  }
+  const { data } = await fetchResourceWithCorrelationId(
+    env2,
+    resource,
+    resourceId,
+    {
+      runId
     }
-    const interval2 = setInterval(fetchData, refreshInterval);
-    return () => clearInterval(interval2);
-  }, [refreshInterval, fetchData]);
-  return {
-    data,
-    loading,
-    error: error2,
-    refresh: fetchData
-  };
+  );
+  return hydrate(data);
 }
 function mergeById(prev, next2, idKey) {
   const combined = [...prev, ...next2];
@@ -153539,30 +153798,15 @@ function RunDetailView({
     encryptionKey: encryptionKey ?? void 0,
     enabled: activeTab === "events"
   });
-  const [spanSelection, setSpanSelection] = reactExports.useState(
-    null
-  );
-  const {
-    data: spanDetailData,
-    loading: spanDetailLoading,
-    error: spanDetailError,
-    refresh: refreshSpanDetail
-  } = useWorkflowResourceData(
-    env2,
-    (spanSelection == null ? void 0 : spanSelection.resource) ?? "run",
-    (spanSelection == null ? void 0 : spanSelection.resourceId) ?? "",
-    {
-      runId: spanSelection == null ? void 0 : spanSelection.runId,
-      enabled: Boolean(
-        (spanSelection == null ? void 0 : spanSelection.resource) && (spanSelection == null ? void 0 : spanSelection.resourceId) && spanSelection.resource !== "hook"
-      ),
+  const fetchSpanDetail = reactExports.useCallback(
+    (selection2) => fetchSpanDetailResource(env2, selection2, {
       encryptionKey: encryptionKey ?? void 0
-    }
+    }),
+    [env2, encryptionKey]
   );
   const [isDecrypting, setIsDecrypting] = reactExports.useState(false);
   const handleDecrypt = reactExports.useCallback(async () => {
     if (encryptionKey) {
-      refreshSpanDetail();
       return;
     }
     setIsDecrypting(true);
@@ -153580,18 +153824,12 @@ function RunDetailView({
     } finally {
       setIsDecrypting(false);
     }
-  }, [encryptionKey, env2, runId, refreshSpanDetail]);
-  const handleSpanSelect = reactExports.useCallback((info) => {
-    setSpanSelection(info);
-  }, []);
+  }, [encryptionKey, env2, runId]);
   const sidebarData = reactExports.useMemo(
     () => ({
       run: run2,
       events: allEvents ?? [],
-      spanDetailData: spanDetailData ?? null,
-      spanDetailError,
-      spanDetailLoading,
-      onSpanSelect: handleSpanSelect,
+      fetchSpanDetail,
       onStreamClick: handleStreamClick,
       onRunClick: handleRunRefClick,
       onWakeUpSleep: handleWakeUpSleep,
@@ -153605,10 +153843,7 @@ function RunDetailView({
     [
       run2,
       allEvents,
-      spanDetailData,
-      spanDetailError,
-      spanDetailLoading,
-      handleSpanSelect,
+      fetchSpanDetail,
       handleStreamClick,
       handleRunRefClick,
       handleWakeUpSleep,
@@ -154134,7 +154369,7 @@ const route4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   __proto__: null,
   loader
 }, Symbol.toStringTag, { value: "Module" }));
-const serverManifest = { "entry": { "module": "/assets/entry.client-DOJDY_4b.js", "imports": ["/assets/index-BXZSIDEp.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-BlFmfRST.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js"], "css": ["/assets/root-61NXpLSs.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-Dz43xne_.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-BlDVZ5AU.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-C34zz02I.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-BlDVZ5AU.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js", "/assets/encryption-g14N5vQl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/run-detail-CWoGxu_0.css", "/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-608c3c54.js", "version": "608c3c54", "sri": void 0 };
+const serverManifest = { "entry": { "module": "/assets/entry.client-DOJDY_4b.js", "imports": ["/assets/index-BXZSIDEp.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-BsPxYsbK.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/mermaid-3ZIDBTTL-Cg-Mp5Kj.js"], "css": ["/assets/root-F_dqJDC7.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-BNApVOct.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-CcCwLmnF.js", "/assets/mermaid-3ZIDBTTL-Cg-Mp5Kj.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-sr7StYc6.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-CcCwLmnF.js", "/assets/mermaid-3ZIDBTTL-Cg-Mp5Kj.js", "/assets/encryption-g14N5vQl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/run-detail-CWoGxu_0.css", "/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-379f050f.js", "version": "379f050f", "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 };