@workflow/web 5.0.0-beta.17 → 5.0.0-beta.19

package/build/client/assets/{mermaid-3ZIDBTTL-DQJ4rkIZ.js → mermaid-3ZIDBTTL-CO5WTIpO.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-QKf7Yrcl.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/zstd-browser-decoder-Cf0Zee4U.js","assets/highlighted-body-B3W2YXNL-BDAdDO0w.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -10359,7 +10359,11 @@ const SerializationFormat = {
   /** devalue stringify/parse with TextEncoder/TextDecoder */
   DEVALUE_V1: "devl",
   /** Encrypted payload (inner payload has its own format prefix after decryption) */
-  ENCRYPTED: "encr"
+  ENCRYPTED: "encr",
+  /** Gzip-compressed payload (inner payload has its own format prefix after decompression) */
+  GZIP: "gzip",
+  /** Zstandard-compressed payload (inner payload has its own format prefix after decompression) */
+  ZSTD: "zstd"
 };
 const FORMAT_PREFIX_LENGTH = 4;
 new TextEncoder();
@@ -10405,6 +10409,71 @@ function isEncryptedData(data) {
   const prefix = formatDecoder.decode(data.subarray(0, FORMAT_PREFIX_LENGTH));
   return prefix === SerializationFormat.ENCRYPTED;
 }
+function isCompressedData(data) {
+  if (!(data instanceof Uint8Array) || data.length < FORMAT_PREFIX_LENGTH) {
+    return false;
+  }
+  const prefix = formatDecoder.decode(data.subarray(0, FORMAT_PREFIX_LENGTH));
+  return prefix === SerializationFormat.GZIP || prefix === SerializationFormat.ZSTD;
+}
+function getNodeZlib() {
+  var _a3, _b2;
+  try {
+    return (_b2 = (_a3 = globalThis.process) == null ? void 0 : _a3.getBuiltinModule) == null ? void 0 : _b2.call(_a3, "node:zlib");
+  } catch {
+    return void 0;
+  }
+}
+function decompressSyncIfAvailable(format, payload) {
+  try {
+    const zlib = getNodeZlib();
+    if (format === SerializationFormat.GZIP && (zlib == null ? void 0 : zlib.gunzipSync)) {
+      return new Uint8Array(zlib.gunzipSync(payload));
+    }
+    if (format === SerializationFormat.ZSTD && (zlib == null ? void 0 : zlib.zstdDecompressSync)) {
+      return new Uint8Array(zlib.zstdDecompressSync(payload));
+    }
+  } catch {
+  }
+  return void 0;
+}
+let zstdBrowserDecoder;
+function registerZstdDecoder(decoder2) {
+  zstdBrowserDecoder = decoder2;
+}
+async function decompressAsync(format, payload) {
+  if (format === SerializationFormat.ZSTD) {
+    const sync = decompressSyncIfAvailable(format, payload);
+    if (sync)
+      return sync;
+    if (zstdBrowserDecoder)
+      return zstdBrowserDecoder(payload);
+    throw new Error("zstd-compressed workflow data encountered but no zstd decoder is available. Node.js 22.15+ decodes natively; in the browser register one via registerZstdDecoder (the web o11y package does this).");
+  }
+  const transform2 = new DecompressionStream("gzip");
+  const writer = transform2.writable.getWriter();
+  const writePromise = writer.write(payload).then(() => writer.close());
+  writePromise.catch(() => {
+  });
+  const chunks = [];
+  let total = 0;
+  const reader = transform2.readable.getReader();
+  for (; ; ) {
+    const { done, value } = await reader.read();
+    if (done)
+      break;
+    chunks.push(value);
+    total += value.length;
+  }
+  await writePromise;
+  const out = new Uint8Array(total);
+  let offset2 = 0;
+  for (const chunk of chunks) {
+    out.set(chunk, offset2);
+    offset2 += chunk.length;
+  }
+  return out;
+}
 function hydrateData(value, revivers) {
   if (value instanceof Uint8Array) {
     if (isEncryptedData(value)) {
@@ -10415,6 +10484,13 @@ function hydrateData(value, revivers) {
       const str = new TextDecoder().decode(payload);
       return parse$4(str, revivers);
     }
+    if (format === SerializationFormat.GZIP || format === SerializationFormat.ZSTD) {
+      const inflated = decompressSyncIfAvailable(format, payload);
+      if (inflated === void 0) {
+        return value;
+      }
+      return hydrateData(inflated, revivers);
+    }
     throw new Error(`Unsupported serialization format: ${format}`);
   }
   if (Array.isArray(value)) {
@@ -10423,16 +10499,20 @@ function hydrateData(value, revivers) {
   return value;
 }
 async function hydrateDataWithKey(value, revivers, key) {
-  if (value instanceof Uint8Array && isEncryptedData(value) && key) {
+  let data = value;
+  if (data instanceof Uint8Array && isEncryptedData(data) && key) {
     const { decrypt } = await __vitePreload(async () => {
       const { decrypt: decrypt2 } = await import("./encryption-g14N5vQl.js");
       return { decrypt: decrypt2 };
     }, true ? __vite__mapDeps([0,1,2]) : void 0);
-    const { payload } = decodeFormatPrefix(value);
-    const decrypted = await decrypt(key, payload);
-    return hydrateData(decrypted, revivers);
+    const { payload } = decodeFormatPrefix(data);
+    data = await decrypt(key, payload);
+  }
+  if (data instanceof Uint8Array && isCompressedData(data)) {
+    const { format, payload } = decodeFormatPrefix(data);
+    data = await decompressAsync(format, payload);
   }
-  return hydrateData(value, revivers);
+  return hydrateData(data, revivers);
 }
 const STREAM_ID_PREFIX = "strm_";
 const STREAM_REF_TYPE$1 = "__workflow_stream_ref__";
@@ -10685,10 +10765,12 @@ const serializationFormat = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   hydrateData,
   hydrateDataWithKey,
   hydrateResourceIO: hydrateResourceIO$1,
+  isCompressedData,
   isEncryptedData,
   isExpiredStub,
   isRunRef: isRunRef$1,
   observabilityRevivers,
+  registerZstdDecoder,
   serializedClassToString,
   serializedInstanceToRef,
   serializedRunToRunRef,
@@ -16115,6 +16197,11 @@ async function hydrateResourceIOWithKey(resource, key) {
     const { importKey: importKey2 } = await import("./encryption-g14N5vQl.js");
     return { importKey: importKey2 };
   }, true ? __vite__mapDeps([0,1,2]) : void 0);
+  const { ensureZstdDecoderRegistered } = await __vitePreload(async () => {
+    const { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 } = await import("./zstd-browser-decoder-Cf0Zee4U.js");
+    return { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 };
+  }, true ? __vite__mapDeps([3,2]) : void 0);
+  ensureZstdDecoderRegistered();
   const cryptoKey = await importKey(key);
   const revivers = getRevivers();
   async function decryptField(value, rev, k2) {
@@ -19286,6 +19373,114 @@ function ContextCardTrigger({ content: content2, children: children2, side = "ri
 function Skeleton$1({ className, style: style2, ...props }) {
   return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
 }
+const TIME_UNITS = [
+  { unit: "year", ms: 31536e6 },
+  { unit: "month", ms: 2628e6 },
+  { unit: "day", ms: 864e5 },
+  { unit: "hour", ms: 36e5 },
+  { unit: "minute", ms: 6e4 },
+  { unit: "second", ms: 1e3 }
+];
+function formatTimeDifference(diff) {
+  let remaining = Math.abs(diff);
+  const result = [];
+  for (const { unit, ms } of TIME_UNITS) {
+    const value = Math.floor(remaining / ms);
+    if (value > 0 || result.length > 0) {
+      result.push(`${value} ${unit}${value !== 1 ? "s" : ""}`);
+      remaining %= ms;
+    }
+    if (result.length === 3)
+      break;
+  }
+  return result.join(", ");
+}
+function useTimeAgo(date2) {
+  const [timeAgo, setTimeAgo] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    const updateTimeAgo = () => {
+      const diff = Date.now() - date2;
+      const formattedDiff = formatTimeDifference(diff);
+      setTimeAgo(formattedDiff ? `${formattedDiff} ago` : "Just now");
+    };
+    updateTimeAgo();
+    const timer = setInterval(updateTimeAgo, 1e3);
+    return () => clearInterval(timer);
+  }, [date2]);
+  return timeAgo;
+}
+function useShortTimeAgo(date2) {
+  const [shortTimeAgo, setShortTimeAgo] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (!date2) {
+      setShortTimeAgo("");
+      return;
+    }
+    const updateShortTimeAgo = () => {
+      const diff = Date.now() - date2;
+      const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
+      const hours = Math.floor(diff / (1e3 * 60 * 60));
+      const minutes = Math.floor(diff / (1e3 * 60));
+      if (days > 0) {
+        setShortTimeAgo(`${days} day${days > 1 ? "s" : ""} ago`);
+      } else if (hours > 0) {
+        setShortTimeAgo(`${hours} hour${hours > 1 ? "s" : ""} ago`);
+      } else if (minutes > 0) {
+        setShortTimeAgo(`${minutes} minute${minutes > 1 ? "s" : ""} ago`);
+      } else {
+        setShortTimeAgo("Just now");
+      }
+    };
+    updateShortTimeAgo();
+    const timer = setInterval(updateShortTimeAgo, 6e4);
+    return () => clearInterval(timer);
+  }, [date2]);
+  return shortTimeAgo;
+}
+function ZoneDateTimeRow({ date: date2, zone }) {
+  var _a3;
+  const dateObj = new Date(date2);
+  const formattedZone = ((_a3 = new Intl.DateTimeFormat("en-US", {
+    timeZone: zone,
+    timeZoneName: "short"
+  }).formatToParts(dateObj).find((part) => part.type === "timeZoneName")) == null ? void 0 : _a3.value) || zone;
+  const formattedDate = dateObj.toLocaleString("en-US", {
+    timeZone: zone,
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+  const formattedTime = dateObj.toLocaleTimeString("en-US", {
+    timeZone: zone,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-4 px-1.5 bg-gray-200 rounded-xs", children: jsxRuntimeExports.jsx("span", { className: "text-[12px] font-mono text-gray-900", children: formattedZone }) }), jsxRuntimeExports.jsx("span", { className: "text-[13px] text-gray-1000", children: formattedDate })] }), jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[12px] font-mono text-gray-900", children: formattedTime })] });
+}
+function RelativeTimeContextCardContent({ date: date2 }) {
+  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timeAgo = useTimeAgo(date2);
+  return jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 min-w-[300px]", children: [jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3", children: jsxRuntimeExports.jsx("span", { className: "tabular-nums text-[13px] text-gray-900", children: timeAgo }) }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: localTimezone })] })] });
+}
+function DefaultTimeText({ date: date2 }) {
+  const shortTimeAgo = useShortTimeAgo(date2);
+  return jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: shortTimeAgo });
+}
+function RelativeTimeCard({ date: date2, children: _children, ...props }) {
+  const children2 = _children === void 0 ? jsxRuntimeExports.jsx(DefaultTimeText, { date: date2 }) : _children;
+  if (!date2)
+    return children2;
+  return jsxRuntimeExports.jsx(ContextCardTrigger, { content: jsxRuntimeExports.jsx(RelativeTimeContextCardContent, { date: date2 }), ...props, children: children2 });
+}
+function TimestampTooltip({ date: date2, children: children2, side = "top" }) {
+  const hasProvider = useHasContextCardProvider();
+  const ts = date2 == null ? null : typeof date2 === "number" ? date2 : new Date(date2).getTime();
+  if (ts == null || Number.isNaN(ts))
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
+  const card = jsxRuntimeExports.jsx(RelativeTimeCard, { date: ts, side, asChild: true, children: children2 });
+  return hasProvider ? card : jsxRuntimeExports.jsx(ContextCardProvider, { children: card });
+}
 const convert = (
   // Note: overloads in JSDoc can’t yet use different `@template`s.
   /**
@@ -44048,7 +44243,7 @@ var tn = f("block", "before:content-[counter(line)]", "before:inline-block", "be
 var et = ({ className: e, language: t, style: o, isIncomplete: n, ...s2 }) => jsxRuntimeExports.jsx("div", { className: f("my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2", e), "data-incomplete": n || void 0, "data-language": t, "data-streamdown": "code-block", style: { contentVisibility: "auto", containIntrinsicSize: "auto 200px", ...o }, ...s2 });
 var Se = reactExports.createContext({ code: "" }), de = () => reactExports.useContext(Se);
 var ot = ({ language: e }) => jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center text-muted-foreground text-xs", "data-language": e, "data-streamdown": "code-block-header", children: jsxRuntimeExports.jsx("span", { className: "ml-1 font-mono lowercase", children: e }) });
-var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-QKf7Yrcl.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-BDAdDO0w.js"), true ? __vite__mapDeps([4,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -44869,127 +45064,127 @@ const TraceViewerContext = reactExports.createContext({
 TraceViewerContext.displayName = "TraceViewerContext";
 const useTraceViewer = () => reactExports.useContext(TraceViewerContext);
 reactExports.createContext(null);
-const traceNode = "_traceNode_1fmf2_1";
-const childRow = "_childRow_1fmf2_5";
-const spanNode = "_spanNode_1fmf2_11";
-const huge = "_huge_1fmf2_31";
-const spanName = "_spanName_1fmf2_34";
-const spanSpacer = "_spanSpacer_1fmf2_40";
-const spanDuration = "_spanDuration_1fmf2_44";
-const small = "_small_1fmf2_62";
-const xHover = "_xHover_1fmf2_62";
-const spanNodeEvent = "_spanNodeEvent_1fmf2_118";
-const eventDiamond = "_eventDiamond_1fmf2_124";
-const customEventColor = "_customEventColor_1fmf2_140";
-const hoverInfo = "_hoverInfo_1fmf2_145";
-const eventName = "_eventName_1fmf2_149";
-const eventTimestamp = "_eventTimestamp_1fmf2_153";
-const alignStart = "_alignStart_1fmf2_174";
-const alignEnd = "_alignEnd_1fmf2_178";
-const colorVercel = "_colorVercel_1fmf2_205";
-const color0 = "_color0_1fmf2_213";
-const color1 = "_color1_1fmf2_220";
-const color2 = "_color2_1fmf2_227";
-const color3 = "_color3_1fmf2_234";
-const color4 = "_color4_1fmf2_241";
-const colorHighlight = "_colorHighlight_1fmf2_248";
-const unlit = "_unlit_1fmf2_256";
-const mapContainer = "_mapContainer_1fmf2_262";
-const spanDetailPanel = "_spanDetailPanel_1fmf2_329";
-const spanDetailPanelResizer = "_spanDetailPanelResizer_1fmf2_338";
-const spanDetailPanelTop = "_spanDetailPanelTop_1fmf2_353";
-const spanDetailPanelBody = "_spanDetailPanelBody_1fmf2_362";
-const spanDetailPanelTopInfo = "_spanDetailPanelTopInfo_1fmf2_375";
-const spanNameDetailPanel = "_spanNameDetailPanel_1fmf2_389";
-const spanDetailPanelTruncatedHeading = "_spanDetailPanelTruncatedHeading_1fmf2_395";
-const spanDetailPanelName = "_spanDetailPanelName_1fmf2_405";
-const spanDetailPanelDuration = "_spanDetailPanelDuration_1fmf2_416";
-const spanDetailPanelCorner = "_spanDetailPanelCorner_1fmf2_427";
-const spanDetailPanelCornerInner = "_spanDetailPanelCornerInner_1fmf2_437";
-const spanDetailPanelCloseVerticalRule = "_spanDetailPanelCloseVerticalRule_1fmf2_445";
-const spanDetailPanelClose = "_spanDetailPanelClose_1fmf2_445";
-const spanDetailPanelAttribute = "_spanDetailPanelAttribute_1fmf2_467";
-const spanDetailPanelAttributeKey = "_spanDetailPanelAttributeKey_1fmf2_484";
-const spanDetailPanelAttributeValue = "_spanDetailPanelAttributeValue_1fmf2_492";
-const spanDetailPanelQuickLink = "_spanDetailPanelQuickLink_1fmf2_503";
-const spanDetailPanelQuickLinkLabel = "_spanDetailPanelQuickLinkLabel_1fmf2_506";
-const detailGroup = "_detailGroup_1fmf2_519";
-const expanded = "_expanded_1fmf2_533";
-const collapsed = "_collapsed_1fmf2_534";
-const ancestorGroup = "_ancestorGroup_1fmf2_535";
-const detailHeading = "_detailHeading_1fmf2_539";
-const buttonLink = "_buttonLink_1fmf2_562";
-const note = "_note_1fmf2_581";
-const skeleton = "_skeleton_1fmf2_589";
-const skeletonRounded = "_skeletonRounded_1fmf2_595";
-const detailHeadingIcon = "_detailHeadingIcon_1fmf2_599";
-const infraSpanDescription = "_infraSpanDescription_1fmf2_603";
-const ancestorNode = "_ancestorNode_1fmf2_613";
-const ancestorText = "_ancestorText_1fmf2_629";
-const ancestorName = "_ancestorName_1fmf2_639";
-const ancestorDuration = "_ancestorDuration_1fmf2_644";
-const ancestorLineContainer = "_ancestorLineContainer_1fmf2_649";
-const ancestorLine = "_ancestorLine_1fmf2_649";
-const zoomButtonGroup = "_zoomButtonGroup_1fmf2_701";
-const zoomButton = "_zoomButton_1fmf2_701";
-const divider = "_divider_1fmf2_751";
-const markersContainer = "_markersContainer_1fmf2_758";
-const markers = "_markers_1fmf2_758";
-const marker = "_marker_1fmf2_758";
-const notch = "_notch_1fmf2_792";
-const markerLabel = "_markerLabel_1fmf2_798";
-const markerClockTime = "_markerClockTime_1fmf2_807";
-const eventMarkersContainer = "_eventMarkersContainer_1fmf2_816";
-const eventMarkers = "_eventMarkers_1fmf2_816";
-const eventMarker = "_eventMarker_1fmf2_816";
-const cursorMarkerStickyParent = "_cursorMarkerStickyParent_1fmf2_839";
-const cursorMarkerLabelContainer = "_cursorMarkerLabelContainer_1fmf2_848";
-const cursorMarkerLabel = "_cursorMarkerLabel_1fmf2_848";
-const cursorMarkerContainer = "_cursorMarkerContainer_1fmf2_898";
-const cursorMarker = "_cursorMarker_1fmf2_839";
-const cursorSelection = "_cursorSelection_1fmf2_916";
-const traceViewer = "_traceViewer_1fmf2_966";
-const mapCanvas = "_mapCanvas_1fmf2_972";
-const zoomButtonTraceViewer = "_zoomButtonTraceViewer_1fmf2_988";
-const timeline = "_timeline_1fmf2_1011";
-const searchBar = "_searchBar_1fmf2_1019";
-const searchInput = "_searchInput_1fmf2_1031";
-const searchInputLabel = "_searchInputLabel_1fmf2_1038";
-const searchInputPrefix = "_searchInputPrefix_1fmf2_1063";
-const mapThumb = "_mapThumb_1fmf2_1101";
-const spanDetailPanelTraceViewer = "_spanDetailPanelTraceViewer_1fmf2_1115";
-const traceViewerContent = "_traceViewerContent_1fmf2_1134";
-const inert = "_inert_1fmf2_1144";
-const hidden = "_hidden_1fmf2_1180";
-const mobile = "_mobile_1fmf2_1184";
-const spanRunning = "_spanRunning_1fmf2_1194";
-const spanPending = "_spanPending_1fmf2_1195";
-const spanCompleted = "_spanCompleted_1fmf2_1203";
-const spanCancelled = "_spanCancelled_1fmf2_1211";
-const spanFailed = "_spanFailed_1fmf2_1219";
-const spanPendingStriped = "_spanPendingStriped_1fmf2_1228";
-const hasQueuedTime = "_hasQueuedTime_1fmf2_1242";
-const spanSleep = "_spanSleep_1fmf2_1254";
-const spanHook = "_spanHook_1fmf2_1263";
-const segmentLayer = "_segmentLayer_1fmf2_1275";
-const segment = "_segment_1fmf2_1275";
-const segmentLabel = "_segmentLabel_1fmf2_1291";
-const segmentTag = "_segmentTag_1fmf2_1306";
-const segQueued = "_segQueued_1fmf2_1314";
-const segRunning = "_segRunning_1fmf2_1325";
-const segFailed = "_segFailed_1fmf2_1330";
-const segRetrying = "_segRetrying_1fmf2_1335";
-const segSucceeded = "_segSucceeded_1fmf2_1346";
-const segWaiting = "_segWaiting_1fmf2_1351";
-const segSleeping = "_segSleeping_1fmf2_1362";
-const segReceived = "_segReceived_1fmf2_1367";
-const boundaryMarker = "_boundaryMarker_1fmf2_1372";
-const boundaryLine = "_boundaryLine_1fmf2_1373";
-const hasSegments = "_hasSegments_1fmf2_1395";
-const eventFailed = "_eventFailed_1fmf2_1432";
-const eventRetrying = "_eventRetrying_1fmf2_1441";
-const eventHook = "_eventHook_1fmf2_1450";
-const eventDefault = "_eventDefault_1fmf2_1459";
+const traceNode = "_traceNode_1ytrx_1";
+const childRow = "_childRow_1ytrx_5";
+const spanNode = "_spanNode_1ytrx_11";
+const huge = "_huge_1ytrx_31";
+const spanName = "_spanName_1ytrx_34";
+const spanSpacer = "_spanSpacer_1ytrx_40";
+const spanDuration = "_spanDuration_1ytrx_44";
+const small = "_small_1ytrx_62";
+const xHover = "_xHover_1ytrx_62";
+const spanNodeEvent = "_spanNodeEvent_1ytrx_118";
+const eventDiamond = "_eventDiamond_1ytrx_124";
+const customEventColor = "_customEventColor_1ytrx_140";
+const hoverInfo = "_hoverInfo_1ytrx_145";
+const eventName = "_eventName_1ytrx_149";
+const eventTimestamp = "_eventTimestamp_1ytrx_153";
+const alignStart = "_alignStart_1ytrx_174";
+const alignEnd = "_alignEnd_1ytrx_178";
+const colorVercel = "_colorVercel_1ytrx_205";
+const color0 = "_color0_1ytrx_213";
+const color1 = "_color1_1ytrx_220";
+const color2 = "_color2_1ytrx_227";
+const color3 = "_color3_1ytrx_234";
+const color4 = "_color4_1ytrx_241";
+const colorHighlight = "_colorHighlight_1ytrx_248";
+const unlit = "_unlit_1ytrx_256";
+const mapContainer = "_mapContainer_1ytrx_262";
+const spanDetailPanel = "_spanDetailPanel_1ytrx_329";
+const spanDetailPanelResizer = "_spanDetailPanelResizer_1ytrx_338";
+const spanDetailPanelTop = "_spanDetailPanelTop_1ytrx_353";
+const spanDetailPanelBody = "_spanDetailPanelBody_1ytrx_362";
+const spanDetailPanelTopInfo = "_spanDetailPanelTopInfo_1ytrx_375";
+const spanNameDetailPanel = "_spanNameDetailPanel_1ytrx_389";
+const spanDetailPanelTruncatedHeading = "_spanDetailPanelTruncatedHeading_1ytrx_395";
+const spanDetailPanelName = "_spanDetailPanelName_1ytrx_405";
+const spanDetailPanelDuration = "_spanDetailPanelDuration_1ytrx_416";
+const spanDetailPanelCorner = "_spanDetailPanelCorner_1ytrx_427";
+const spanDetailPanelCornerInner = "_spanDetailPanelCornerInner_1ytrx_437";
+const spanDetailPanelCloseVerticalRule = "_spanDetailPanelCloseVerticalRule_1ytrx_445";
+const spanDetailPanelClose = "_spanDetailPanelClose_1ytrx_445";
+const spanDetailPanelAttribute = "_spanDetailPanelAttribute_1ytrx_467";
+const spanDetailPanelAttributeKey = "_spanDetailPanelAttributeKey_1ytrx_484";
+const spanDetailPanelAttributeValue = "_spanDetailPanelAttributeValue_1ytrx_492";
+const spanDetailPanelQuickLink = "_spanDetailPanelQuickLink_1ytrx_503";
+const spanDetailPanelQuickLinkLabel = "_spanDetailPanelQuickLinkLabel_1ytrx_506";
+const detailGroup = "_detailGroup_1ytrx_519";
+const expanded = "_expanded_1ytrx_533";
+const collapsed = "_collapsed_1ytrx_534";
+const ancestorGroup = "_ancestorGroup_1ytrx_535";
+const detailHeading = "_detailHeading_1ytrx_539";
+const buttonLink = "_buttonLink_1ytrx_562";
+const note = "_note_1ytrx_581";
+const skeleton = "_skeleton_1ytrx_589";
+const skeletonRounded = "_skeletonRounded_1ytrx_595";
+const detailHeadingIcon = "_detailHeadingIcon_1ytrx_599";
+const infraSpanDescription = "_infraSpanDescription_1ytrx_603";
+const ancestorNode = "_ancestorNode_1ytrx_613";
+const ancestorText = "_ancestorText_1ytrx_629";
+const ancestorName = "_ancestorName_1ytrx_639";
+const ancestorDuration = "_ancestorDuration_1ytrx_644";
+const ancestorLineContainer = "_ancestorLineContainer_1ytrx_649";
+const ancestorLine = "_ancestorLine_1ytrx_649";
+const zoomButtonGroup = "_zoomButtonGroup_1ytrx_701";
+const zoomButton = "_zoomButton_1ytrx_701";
+const divider = "_divider_1ytrx_751";
+const markersContainer = "_markersContainer_1ytrx_758";
+const markers = "_markers_1ytrx_758";
+const marker = "_marker_1ytrx_758";
+const notch = "_notch_1ytrx_792";
+const markerLabel = "_markerLabel_1ytrx_798";
+const markerClockTime = "_markerClockTime_1ytrx_807";
+const eventMarkersContainer = "_eventMarkersContainer_1ytrx_816";
+const eventMarkers = "_eventMarkers_1ytrx_816";
+const eventMarker = "_eventMarker_1ytrx_816";
+const cursorMarkerStickyParent = "_cursorMarkerStickyParent_1ytrx_839";
+const cursorMarkerLabelContainer = "_cursorMarkerLabelContainer_1ytrx_848";
+const cursorMarkerLabel = "_cursorMarkerLabel_1ytrx_848";
+const cursorMarkerContainer = "_cursorMarkerContainer_1ytrx_898";
+const cursorMarker = "_cursorMarker_1ytrx_839";
+const cursorSelection = "_cursorSelection_1ytrx_916";
+const traceViewer = "_traceViewer_1ytrx_966";
+const mapCanvas = "_mapCanvas_1ytrx_972";
+const zoomButtonTraceViewer = "_zoomButtonTraceViewer_1ytrx_988";
+const timeline = "_timeline_1ytrx_1011";
+const searchBar = "_searchBar_1ytrx_1019";
+const searchInput = "_searchInput_1ytrx_1031";
+const searchInputLabel = "_searchInputLabel_1ytrx_1038";
+const searchInputPrefix = "_searchInputPrefix_1ytrx_1063";
+const mapThumb = "_mapThumb_1ytrx_1101";
+const spanDetailPanelTraceViewer = "_spanDetailPanelTraceViewer_1ytrx_1115";
+const traceViewerContent = "_traceViewerContent_1ytrx_1134";
+const inert = "_inert_1ytrx_1144";
+const hidden = "_hidden_1ytrx_1180";
+const mobile = "_mobile_1ytrx_1184";
+const spanRunning = "_spanRunning_1ytrx_1194";
+const spanPending = "_spanPending_1ytrx_1195";
+const spanCompleted = "_spanCompleted_1ytrx_1203";
+const spanCancelled = "_spanCancelled_1ytrx_1211";
+const spanFailed = "_spanFailed_1ytrx_1219";
+const spanPendingStriped = "_spanPendingStriped_1ytrx_1228";
+const hasQueuedTime = "_hasQueuedTime_1ytrx_1242";
+const spanSleep = "_spanSleep_1ytrx_1254";
+const spanHook = "_spanHook_1ytrx_1263";
+const segmentLayer = "_segmentLayer_1ytrx_1275";
+const segment = "_segment_1ytrx_1275";
+const segmentLabel = "_segmentLabel_1ytrx_1291";
+const segmentTag = "_segmentTag_1ytrx_1306";
+const segQueued = "_segQueued_1ytrx_1314";
+const segRunning = "_segRunning_1ytrx_1325";
+const segFailed = "_segFailed_1ytrx_1330";
+const segRetrying = "_segRetrying_1ytrx_1335";
+const segSucceeded = "_segSucceeded_1ytrx_1346";
+const segWaiting = "_segWaiting_1ytrx_1351";
+const segSleeping = "_segSleeping_1ytrx_1362";
+const segReceived = "_segReceived_1ytrx_1367";
+const boundaryMarker = "_boundaryMarker_1ytrx_1372";
+const boundaryLine = "_boundaryLine_1ytrx_1373";
+const hasSegments = "_hasSegments_1ytrx_1395";
+const eventFailed = "_eventFailed_1ytrx_1432";
+const eventRetrying = "_eventRetrying_1ytrx_1441";
+const eventHook = "_eventHook_1ytrx_1450";
+const eventDefault = "_eventDefault_1ytrx_1459";
 const styles$1 = {
   traceNode,
   childRow,
@@ -45053,7 +45248,7 @@ const styles$1 = {
   ancestorLineContainer,
   ancestorLine,
   zoomButtonGroup,
-  "zoom-buttons-fade-in": "_zoom-buttons-fade-in_1fmf2_1",
+  "zoom-buttons-fade-in": "_zoom-buttons-fade-in_1ytrx_1",
   zoomButton,
   divider,
   markersContainer,
@@ -45072,7 +45267,7 @@ const styles$1 = {
   cursorMarker,
   cursorSelection,
   traceViewer,
-  "span-skeleton": "_span-skeleton_1fmf2_1",
+  "span-skeleton": "_span-skeleton_1ytrx_1",
   mapCanvas,
   zoomButtonTraceViewer,
   timeline,
@@ -46399,7 +46594,7 @@ function computeStepSegmentsFromSpan(startMs, duration2, events) {
     "step_completed"
   ]);
   if (marks.length === 0) {
-    segments.push({ startFraction: 0, endFraction: 1, status: "running" });
+    segments.push({ startFraction: 0, endFraction: 1, status: "queued" });
     return segments;
   }
   const firstFraction = timeToFraction(marks[0].time, startMs, duration2);
@@ -46424,7 +46619,7 @@ function computeStepSegmentsFromSpan(startMs, duration2, events) {
         });
       } else {
         const nextType = nextMark.type;
-        const attemptStatus = nextType === "step_retrying" || nextType === "step_failed" ? "failed" : nextType === "step_completed" ? "succeeded" : "running";
+        const attemptStatus = nextType === "step_retrying" || nextType === "step_failed" ? "failed" : nextType === "step_completed" ? "succeeded" : "retrying";
         segments.push({
           startFraction: markFrac,
           endFraction: nextFrac,
@@ -46453,35 +46648,16 @@ function computeHookSegmentsFromSpan(startMs, duration2, events) {
   const segments = [];
   if (duration2 <= 0)
     return segments;
-  const sorted = [...events].map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) })).sort((a2, b2) => a2.time - b2.time);
-  const received = sorted.find((e) => e.name === "hook_received");
-  const disposed = sorted.find((e) => e.name === "hook_disposed");
-  if (!received && !disposed) {
-    segments.push({ startFraction: 0, endFraction: 1, status: "waiting" });
-    return segments;
-  }
-  const receivedFrac = received ? timeToFraction(received.time, startMs, duration2) : null;
+  const disposed = sortedEventMarks(events, ["hook_disposed"])[0];
   const disposedFrac = disposed ? timeToFraction(disposed.time, startMs, duration2) : null;
-  if (receivedFrac !== null && receivedFrac > 1e-3) {
+  const waitingEnd = disposedFrac ?? 1;
+  if (waitingEnd > 1e-3) {
     segments.push({
       startFraction: 0,
-      endFraction: receivedFrac,
-      status: "waiting"
-    });
-  } else if (receivedFrac === null && disposedFrac !== null) {
-    segments.push({
-      startFraction: 0,
-      endFraction: disposedFrac,
+      endFraction: waitingEnd,
       status: "waiting"
     });
   }
-  if (receivedFrac !== null) {
-    segments.push({
-      startFraction: receivedFrac,
-      endFraction: disposedFrac ?? 1,
-      status: "received"
-    });
-  }
   if (disposedFrac !== null && disposedFrac < 0.999) {
     segments.push({
       startFraction: disposedFrac,
@@ -46572,6 +46748,33 @@ function computeSpanSegments(span) {
       return [];
   }
 }
+const MARKER_EVENT_NAMES = ["hook_received", "attr_set"];
+function computeSpanMarkers(span) {
+  return sortedEventMarks(span.events, MARKER_EVENT_NAMES).map((mark2) => ({
+    timeMs: mark2.time
+  }));
+}
+function computeOffscreenMarkers(markers2, visibleStartMs, visibleEndMs) {
+  let leftCount = 0;
+  let rightCount = 0;
+  let nearestLeft = Number.NEGATIVE_INFINITY;
+  let nearestRight = Number.POSITIVE_INFINITY;
+  for (const { timeMs } of markers2) {
+    if (timeMs < visibleStartMs) {
+      leftCount++;
+      if (timeMs > nearestLeft)
+        nearestLeft = timeMs;
+    } else if (timeMs > visibleEndMs) {
+      rightCount++;
+      if (timeMs < nearestRight)
+        nearestRight = timeMs;
+    }
+  }
+  return {
+    left: leftCount > 0 ? { count: leftCount, nearestMs: nearestLeft } : null,
+    right: rightCount > 0 ? { count: rightCount, nearestMs: nearestRight } : null
+  };
+}
 const INITIAL_VISIBLE_ROWS = 60;
 function getScrollParent(el) {
   let node2 = (el == null ? void 0 : el.parentElement) ?? null;
@@ -46620,6 +46823,75 @@ function useRowWindow(ref, rowCount, rowHeight, overscan = 12) {
   return range;
 }
 const ROW_HEIGHT_PX = 40;
+function scrollRowIntoView(listEl, index2, rowHeight, opts) {
+  const scroller = listEl ? getScrollParent(listEl) : null;
+  if (!listEl || !scroller)
+    return;
+  const margin = (opts == null ? void 0 : opts.margin) ?? rowHeight;
+  const listOffset = listEl.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+  const rowTop = listOffset + index2 * rowHeight;
+  const rowBottom = rowTop + rowHeight;
+  const viewTop = scroller.scrollTop;
+  const viewBottom = viewTop + scroller.clientHeight;
+  let top = null;
+  if (rowTop < viewTop) {
+    top = rowTop - margin;
+  } else if (rowBottom > viewBottom) {
+    top = rowBottom + margin - scroller.clientHeight;
+  }
+  if (top === null)
+    return;
+  const max2 = scroller.scrollHeight - scroller.clientHeight;
+  scroller.scrollTo({
+    top: Math.max(0, Math.min(top, max2)),
+    behavior: opts == null ? void 0 : opts.behavior
+  });
+}
+function projectMarkers(markers2, visibleStartMs, visibleEndMs) {
+  const visibleDurationMs = visibleEndMs - visibleStartMs;
+  if (visibleDurationMs <= 0)
+    return [];
+  return markers2.flatMap((m2) => {
+    if (m2.timeMs < visibleStartMs || m2.timeMs > visibleEndMs) {
+      return [];
+    }
+    return [
+      {
+        leftPct: (m2.timeMs - visibleStartMs) / visibleDurationMs * 100,
+        timeMs: m2.timeMs
+      }
+    ];
+  });
+}
+const MARKER_MIN_GAP_PX = 16;
+function cullCollidingMarkers(projected, pixelWidth) {
+  const kept = [];
+  let lastKeptPct = Number.NEGATIVE_INFINITY;
+  for (const m2 of projected) {
+    const gapPx = (m2.leftPct - lastKeptPct) / 100 * pixelWidth;
+    if (gapPx < MARKER_MIN_GAP_PX)
+      continue;
+    kept.push(m2);
+    lastKeptPct = m2.leftPct;
+  }
+  return kept;
+}
+function MarkerTick({ className }) {
+  return jsxRuntimeExports.jsx("span", { className: cn$4("block w-[3px] rounded-full bg-gray-1000", className) });
+}
+function MarkerLayer({ markers: markers2 }) {
+  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "pointer-events-auto absolute top-0 bottom-0 z-10 flex w-8 -translate-x-1/2 items-center justify-center", style: { left: `clamp(8px, ${m2.leftPct}%, calc(100% - 8px))` }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: m2.timeMs, children: jsxRuntimeExports.jsx("span", { className: "flex h-6 w-8 items-center justify-center", children: jsxRuntimeExports.jsx(MarkerTick, { className: "h-3" }) }) }) }, m2.timeMs)) });
+}
+function OffscreenMarkerIndicator({ direction, count: count2, targetMs, onReveal }) {
+  const Chevron = direction === "right" ? ArrowRight : ArrowLeft;
+  const label = `${count2} marker${count2 === 1 ? "" : "s"} ${direction === "right" ? "ahead" : "behind"} — click to scroll to ${count2 === 1 ? "it" : "the nearest"}`;
+  const chevron = jsxRuntimeExports.jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: jsxRuntimeExports.jsx(Chevron, { className: "size-3 text-gray-900" }) });
+  const tick = jsxRuntimeExports.jsx(MarkerTick, { className: "h-3.5 shrink-0" });
+  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] }) });
+}
 const runningStripes = "_runningStripes_62ud0_1";
 const styles = {
   runningStripes
@@ -46630,7 +46902,7 @@ const TIMELINE_PADDING_PX = 16;
 const SEGMENT_CLASSES = {
   queued: "bg-gray-400 border border-gray-500",
   retrying: "bg-gray-400 border border-gray-500",
-  waiting: "bg-gray-400 border border-gray-500",
+  waiting: "bg-gray-200 border border-gray-500",
   running: "bg-blue-200 border border-blue-500",
   completed: "bg-blue-200 border border-blue-500",
   failed: "bg-red-200 border border-red-500",
@@ -46711,8 +46983,8 @@ function projectSegments(segments, spanStartMs, spanDurationMs, geometry) {
     ];
   });
 }
-function DurationLabel({ label }) {
-  return jsxRuntimeExports.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100", children: label });
+function DurationLabel({ label, className }) {
+  return jsxRuntimeExports.jsx("span", { className: cn$4("pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100", className), children: label });
 }
 function BoundaryArrow({ direction }) {
   const Icon2 = direction === "right" ? ArrowRight : ArrowLeft;
@@ -46727,15 +46999,18 @@ function LeadInConnector({ leftPct, widthPct, label }) {
     width: `calc(${widthPct}% - 1px)`
   }, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" }), jsxRuntimeExports.jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" }), label ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] });
 }
-function SegmentBar({ segments }) {
+function SegmentBar({ segments, showLabels = true }) {
   return jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
     if (seg.status === "queued") {
       const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
-      const showLeadInLabel = seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
-      return jsxRuntimeExports.jsx(LeadInConnector, { leftPct: seg.leftPct, widthPct: seg.widthPct, label: showLeadInLabel ? leadInLabel : null }, i);
+      const showLeadInLabel = showLabels && seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+      const isFullWidthQueued = segments.length === 1;
+      return jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [jsxRuntimeExports.jsx(LeadInConnector, { leftPct: seg.leftPct, widthPct: seg.widthPct, label: showLeadInLabel ? leadInLabel : null }), isFullWidthQueued ? jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500", style: {
+        left: `calc(${seg.leftPct + seg.widthPct}% - 1.5px)`
+      } }) : null] }, i);
     }
     const label = formatDurationPrecise(seg.fullDurationMs);
-    const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
+    const showLabel = showLabels && seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
     return jsxRuntimeExports.jsxs("div", { className: cn$4("absolute h-full overflow-hidden rounded-[0.25rem]", SEGMENT_CLASSES[seg.status]), style: {
       // 1px gap between adjacent segments, distributed equally.
       left: `calc(${seg.leftPct}% + 0.5px)`,
@@ -46744,31 +47019,7 @@ function SegmentBar({ segments }) {
     }, children: [ACTIVE_SEGMENT_STATUSES.has(seg.status) ? jsxRuntimeExports.jsx(RunningStripes, {}) : null, showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] }, i);
   }) });
 }
-function formatMarkerTime(ms) {
-  const date2 = new Date(ms);
-  return date2.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  }) + "." + date2.getMilliseconds().toString().padStart(3, "0");
-}
-function AttrSetMarkers({ span, viewStart, viewDuration }) {
-  const markers2 = reactExports.useMemo(() => span.events.filter((e) => e.name === "attr_set"), [span.events]);
-  if (markers2.length === 0 || viewDuration <= 0)
-    return null;
-  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: markers2.map((event, index2) => {
-    const timeMs = getHighResInMs(event.timestamp);
-    const frac = (timeMs - viewStart) / viewDuration;
-    if (frac < 0 || frac > 1)
-      return null;
-    return jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx("div", { "aria-label": "Attributes set", className: "absolute top-1/2 z-10 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center", style: { left: `${frac * 100}%` }, children: jsxRuntimeExports.jsx("div", { className: "h-2 w-2 rotate-45 rounded-[1px] border", style: {
-      backgroundColor: "var(--ds-teal-400)",
-      borderColor: "var(--ds-teal-900)"
-    } }) }) }), jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Attributes set · ", formatMarkerTime(timeMs)] })] }, `attr-set-${index2}`);
-  }) });
-}
-const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect, onRevealTime }) {
   var _a3;
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
@@ -46776,6 +47027,10 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const geometry = reactExports.useMemo(() => computeBarGeometry(startMs, endMs, viewStart, viewStart + viewDuration, containerWidth), [startMs, endMs, viewStart, viewDuration, containerWidth]);
   const baseSegments = reactExports.useMemo(() => computeSpanSegments(span), [span]);
   const segments = reactExports.useMemo(() => geometry.mode.kind === "full" ? projectSegments(baseSegments, startMs, totalDurationMs, geometry) : [], [geometry, baseSegments, startMs, totalDurationMs]);
+  const baseMarkers = reactExports.useMemo(() => computeSpanMarkers(span), [span]);
+  const markers2 = reactExports.useMemo(() => geometry.mode.kind === "full" ? cullCollidingMarkers(projectMarkers(baseMarkers, geometry.visibleStartMs, geometry.visibleEndMs), geometry.visiblePixelWidth) : [], [geometry, baseMarkers]);
+  const offscreen = reactExports.useMemo(() => geometry.mode.kind === "full" ? computeOffscreenMarkers(baseMarkers, geometry.visibleStartMs, geometry.visibleEndMs) : { left: null, right: null }, [geometry, baseMarkers]);
+  const hasMarkers = markers2.length > 0 || offscreen.left !== null || offscreen.right !== null;
   const workflowStatus = (_a3 = span.attributes.data) == null ? void 0 : _a3.status;
   const isErrored = span.status.code === 2 || workflowStatus === "failed";
   const colors = getResourceColor(span.resource);
@@ -46786,7 +47041,11 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
   }, [onSelect, span.spanId]);
-  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsxs("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: [jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }), jsxRuntimeExports.jsx(AttrSetMarkers, { span, viewStart, viewDuration })] }) });
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsxs("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: [jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments, showLabels: !hasMarkers }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }), hasMarkers ? jsxRuntimeExports.jsxs("div", { className: "pointer-events-none absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: [markers2.length > 0 ? jsxRuntimeExports.jsx(MarkerLayer, { markers: markers2 }) : null, offscreen.left ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "left", count: offscreen.left.count, targetMs: offscreen.left.nearestMs, onReveal: onRevealTime }) : null, offscreen.right ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "right", count: offscreen.right.count, targetMs: offscreen.right.nearestMs, onReveal: onRevealTime }) : null, showTotalLabel ? jsxRuntimeExports.jsx(DurationLabel, {
+    label: totalLabel,
+    // Shift clear of the left edge indicator so it isn't covered.
+    className: offscreen.left ? "pl-10" : void 0
+  }) : null] }) : null] }) });
 });
 const DELTA_CAP_HEIGHT_PX = 8;
 const DELTA_ROW_OFFSET_PX = 8;
@@ -46802,7 +47061,7 @@ const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, ri
 function TimelineHeader({ markers: markers2, hoverInfo: hoverInfo2 }) {
   return jsxRuntimeExports.jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m2.position * 100}%` }, children: m2.label }, String(m2.value))), hoverInfo2 && jsxRuntimeExports.jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo2.fraction * 100}%` }, children: hoverInfo2.label })] }) });
 }
-function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, searchResult, onSelect, hoverFraction, altHeld = false }) {
+function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, searchResult, onSelect, onRevealTime, hoverFraction, altHeld = false }) {
   const containerRef = reactExports.useRef(null);
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
   const viewDuration = viewEnd - viewStart;
@@ -46822,7 +47081,7 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, se
   return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", style: { minHeight: spans.length * ROW_HEIGHT_PX }, children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, 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(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)) }), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, 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 ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
@@ -49266,126 +49525,128 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  ContextCardProvider as $,
+  RESERVED_ATTRIBUTE_KEY_PREFIX as $,
   Anchor as A,
   Button as B,
   Content as C,
   DEFAULT_PAGE_SIZE as D,
-  Arrow$1 as E,
-  useComposedRefs as F,
-  fetchRun as G,
-  cva as H,
-  Presence as I,
-  createContext2 as J,
+  Root2 as E,
+  Arrow$1 as F,
+  useComposedRefs as G,
+  fetchRun as H,
+  cva as I,
+  Presence as J,
   Ks as K,
   LoaderCircle as L,
-  fetchWorkflowsManifest as M,
-  cn$4 as N,
-  DataInspector as O,
+  createContext2 as M,
+  fetchWorkflowsManifest as N,
+  cn$4 as O,
   Primitive as P,
   Qe as Q,
   R,
   ServerConfigProvider as S,
   Tooltip as T,
-  DecryptClickContext as U,
+  DataInspector as U,
   VISUALLY_HIDDEN_STYLES as V,
-  Button$1 as W,
-  Spinner as X,
-  Lock as Y,
-  RESERVED_ATTRIBUTE_KEY_PREFIX as Z,
-  useHasContextCardProvider as _,
+  DecryptClickContext as W,
+  Button$1 as X,
+  Spinner as Y,
+  Lock as Z,
+  __vitePreload as _,
   TooltipTrigger as a,
-  cancelRun as a$,
-  ContextCardTrigger as a0,
+  hide as a$,
+  ContextCardProvider as a0,
   Skeleton$1 as a1,
   Yr as a2,
   isEncryptedMarker as a3,
-  formatDuration as a4,
-  _r as a5,
-  RunClickContext as a6,
-  StreamClickContext as a7,
-  isExpiredMarker as a8,
-  isDoStreamStep as a9,
-  SidebarDataProvider as aA,
-  hydrateResourceIOWithKey as aB,
-  hydrateResourceIO as aC,
-  fetchHook as aD,
-  fetchStep as aE,
-  fetchStreams as aF,
-  Slot as aG,
-  Slottable as aH,
-  buttonVariants as aI,
-  fetchEvent as aJ,
-  fetchEventsByCorrelationId as aK,
-  isEncryptedData as aL,
-  hydrateData as aM,
-  getWebRevivers as aN,
-  LIVE_UPDATE_INTERVAL_MS as aO,
-  getEncryptionKeyForRun as aP,
-  StreamViewer as aQ,
-  composeRefs as aR,
-  useFloating as aS,
-  offset as aT,
-  shift as aU,
-  limitShift as aV,
-  flip as aW,
-  size as aX,
-  arrow as aY,
-  hide as aZ,
-  autoUpdate as a_,
-  extractConversation as aa,
-  hasEncryptedFields as ab,
-  EVENT_DATA_REF_FIELDS as ac,
-  useSidebarDataOptional as ad,
-  clsx as ae,
-  useRowWindow as af,
-  isSpanDimmedBySearch as ag,
-  ROW_HEIGHT_PX as ah,
-  getSpanDurationMs as ai,
-  formatDurationPrecise as aj,
-  TooltipProvider as ak,
-  ActiveSpanProvider as al,
-  useActiveSpan as am,
-  useSidebarData as an,
-  searchSpans as ao,
-  computeRootBounds as ap,
-  computeTimeMarkers as aq,
-  getHighResInMs as ar,
-  TIMELINE_PADDING_PX as as,
-  Timeline as at,
-  TimelineHeader as au,
-  IconButton as av,
-  Tooltip$1 as aw,
-  TooltipTrigger$1 as ax,
-  TooltipContent$1 as ay,
-  useReducedMotion as az,
+  TimestampTooltip as a4,
+  formatDuration as a5,
+  _r as a6,
+  RunClickContext as a7,
+  StreamClickContext as a8,
+  isExpiredMarker as a9,
+  TooltipTrigger$1 as aA,
+  TooltipContent$1 as aB,
+  SidebarDataProvider as aC,
+  hydrateResourceIOWithKey as aD,
+  hydrateResourceIO as aE,
+  fetchHook as aF,
+  fetchStep as aG,
+  fetchStreams as aH,
+  Slot as aI,
+  Slottable as aJ,
+  buttonVariants as aK,
+  fetchEvent as aL,
+  fetchEventsByCorrelationId as aM,
+  isEncryptedData as aN,
+  hydrateData as aO,
+  getWebRevivers as aP,
+  LIVE_UPDATE_INTERVAL_MS as aQ,
+  getEncryptionKeyForRun as aR,
+  StreamViewer as aS,
+  composeRefs as aT,
+  useFloating as aU,
+  offset as aV,
+  shift as aW,
+  limitShift as aX,
+  flip as aY,
+  size as aZ,
+  arrow as a_,
+  isDoStreamStep as aa,
+  extractConversation as ab,
+  hasEncryptedFields as ac,
+  EVENT_DATA_REF_FIELDS as ad,
+  useSidebarDataOptional as ae,
+  clsx as af,
+  useRowWindow as ag,
+  isSpanDimmedBySearch as ah,
+  ROW_HEIGHT_PX as ai,
+  getSpanDurationMs as aj,
+  formatDurationPrecise as ak,
+  TooltipProvider as al,
+  ActiveSpanProvider as am,
+  useActiveSpan as an,
+  useSidebarData as ao,
+  useReducedMotion as ap,
+  searchSpans as aq,
+  computeRootBounds as ar,
+  computeTimeMarkers as as,
+  getHighResInMs as at,
+  scrollRowIntoView as au,
+  TIMELINE_PADDING_PX as av,
+  Timeline as aw,
+  TimelineHeader as ax,
+  IconButton as ay,
+  Tooltip$1 as az,
   TooltipContent as b,
-  reenqueueRun as b0,
-  wakeUpRun as b1,
-  resumeHook as b2,
-  recreateRun as b3,
+  autoUpdate as b0,
+  cancelRun as b1,
+  reenqueueRun as b2,
+  wakeUpRun as b3,
+  resumeHook as b4,
+  recreateRun as b5,
   createLucideIcon as c,
-  cn as d,
-  Toaster as e,
-  TooltipProvider$1 as f,
-  useToast as g,
-  fetchRuns as h,
-  fetchHooks as i,
-  getPaginationDisplay as j,
-  fetchEvents as k,
-  useCallbackRef as l,
-  useComposedRefs$1 as m,
-  composeEventHandlers as n,
-  useLayoutEffect2 as o,
-  Portal$1 as p,
-  useId as q,
-  runHealthCheck as r,
-  createPopperScope as s,
+  runHealthCheck as d,
+  cn as e,
+  Toaster as f,
+  TooltipProvider$1 as g,
+  useToast as h,
+  fetchRuns as i,
+  fetchHooks as j,
+  getPaginationDisplay as k,
+  fetchEvents as l,
+  useCallbackRef as m,
+  useComposedRefs$1 as n,
+  composeEventHandlers as o,
+  useLayoutEffect2 as p,
+  Portal$1 as q,
+  registerZstdDecoder as r,
+  useId as s,
   toast as t,
   useServerConfig as u,
-  DismissableLayer as v,
-  createContextScope as w,
-  createSlot as x,
-  useControllableState as y,
-  Root2 as z
+  createPopperScope as v,
+  DismissableLayer as w,
+  createContextScope as x,
+  createSlot as y,
+  useControllableState as z
 };