@workflow/web 5.0.0-beta.2 → 5.0.0-beta.3

package/build/client/assets/{mermaid-3ZIDBTTL-B9v3aKRl.js → mermaid-3ZIDBTTL-BSJR0c5A.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/highlighted-body-B3W2YXNL-DPWdt39H.js","assets/index-DQa-BExo.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/highlighted-body-B3W2YXNL-Be0uLJd8.js","assets/index-DQa-BExo.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);
@@ -6695,7 +6695,8 @@ const Lock = createLucideIcon("lock", __iconNode);
 function cn$4(...inputs) {
   return twMerge(clsx(inputs));
 }
-const durationFormatter = new Intl.NumberFormat(void 0, {
+const secondsFormatter = new Intl.NumberFormat(void 0, {
+  minimumFractionDigits: 2,
   maximumFractionDigits: 2
 });
 const MS_IN_SECOND = 1e3;
@@ -6704,13 +6705,10 @@ const MS_IN_HOUR = 60 * MS_IN_MINUTE;
 const MS_IN_DAY = 24 * MS_IN_HOUR;
 function formatDuration(ms, compact = false) {
   if (ms === 0) {
-    return "0";
-  }
-  if (ms < MS_IN_SECOND) {
-    return `${durationFormatter.format(ms)}ms`;
+    return "0s";
   }
   if (ms < MS_IN_MINUTE) {
-    return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
+    return `${secondsFormatter.format(ms / MS_IN_SECOND)}s`;
   }
   if (compact) {
     if (ms < MS_IN_HOUR) {
@@ -6725,7 +6723,7 @@ function formatDuration(ms, compact = false) {
   const days = Math.floor(ms / MS_IN_DAY);
   const hours = Math.floor(ms % MS_IN_DAY / MS_IN_HOUR);
   const minutes = Math.floor(ms % MS_IN_HOUR / MS_IN_MINUTE);
-  const seconds = Math.floor(ms % MS_IN_MINUTE / MS_IN_SECOND);
+  const seconds = ms % MS_IN_MINUTE / MS_IN_SECOND;
   const parts = [];
   if (days > 0) {
     parts.push(`${days}d`);
@@ -6736,9 +6734,7 @@ function formatDuration(ms, compact = false) {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  if (hours <= 1 && (seconds > 0 || parts.length === 0)) {
-    parts.push(`${seconds}s`);
-  }
+  parts.push(`${secondsFormatter.format(seconds)}s`);
   return parts.join(" ");
 }
 function isDoStreamStep(stepName) {
@@ -16707,13 +16703,33 @@ const useDarkMode = () => {
   }, []);
   return isDark;
 };
+function summarizeArrayBufferView(value) {
+  const ta = value;
+  const name2 = ta.constructor.name;
+  const preview = Array.from({ length: Math.min(ta.length, 8) }, (_2, i) => ta[i]);
+  const suffix = ta.length > 8 ? ", …" : "";
+  return `${name2}(${ta.length}) [${preview.join(", ")}${suffix}]`;
+}
+function formatArrayBufferViewForDisplay(value) {
+  try {
+    const text2 = new TextDecoder("utf-8", { fatal: true }).decode(value);
+    return {
+      text: text2,
+      decodedFrom: {
+        type: value.constructor.name,
+        encoding: "utf-8",
+        rawSummary: summarizeArrayBufferView(value)
+      }
+    };
+  } catch {
+    return { text: summarizeArrayBufferView(value) };
+  }
+}
 const inspectorThemeExtendedLight = {
-  OBJECT_VALUE_DATE_COLOR: "#a21caf"
-  // fuchsia-700
+  OBJECT_VALUE_DATE_COLOR: "var(--ds-pink-900)"
 };
 const inspectorThemeExtendedDark = {
-  OBJECT_VALUE_DATE_COLOR: "#e879f9"
-  // fuchsia-400
+  OBJECT_VALUE_DATE_COLOR: "var(--ds-pink-900)"
 };
 const shared = {
   BASE_FONT_SIZE: "11px",
@@ -16731,85 +16747,64 @@ const shared = {
   TABLE_DATA_BACKGROUND_IMAGE: "none",
   TABLE_DATA_BACKGROUND_SIZE: "0"
 };
-const inspectorThemeLight = {
+const geistTheme = {
   ...shared,
   // Base text
   BASE_COLOR: "var(--ds-gray-1000)",
-  // Property names — unstyled, same as base foreground (Node: no style)
-  OBJECT_NAME_COLOR: "var(--ds-gray-900)",
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: "#16a34a",
-  // green-600
-  OBJECT_VALUE_SYMBOL_COLOR: "#16a34a",
-  // Numbers & booleans — yellow/amber (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: "#b45309",
-  // amber-700 (readable on white)
-  OBJECT_VALUE_BOOLEAN_COLOR: "#b45309",
-  // null — bold foreground (Node: 'bold')
+  // Property names — default foreground (matches JSON key color in Geist Shiki)
+  OBJECT_NAME_COLOR: "var(--ds-gray-1000)",
+  // Strings & symbols — green
+  OBJECT_VALUE_STRING_COLOR: "var(--ds-green-900)",
+  OBJECT_VALUE_SYMBOL_COLOR: "var(--ds-green-900)",
+  // Numbers & booleans — green (Geist JSON tokens)
+  OBJECT_VALUE_NUMBER_COLOR: "var(--ds-green-900)",
+  OBJECT_VALUE_BOOLEAN_COLOR: "var(--ds-green-900)",
+  // null — muted foreground
   OBJECT_VALUE_NULL_COLOR: "var(--ds-gray-900)",
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: "var(--ds-gray-500)",
-  // RegExp — red (Node regexp base uses green/red/yellow palette)
-  OBJECT_VALUE_REGEXP_COLOR: "#dc2626",
-  // red-600
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#0891b2",
-  // cyan-600
-  // HTML (less relevant for data inspection, but reasonable defaults)
-  HTML_TAG_COLOR: "var(--ds-gray-500)",
-  HTML_TAGNAME_COLOR: "#0891b2",
-  HTML_ATTRIBUTE_NAME_COLOR: "#b45309",
-  HTML_ATTRIBUTE_VALUE_COLOR: "#16a34a",
-  HTML_COMMENT_COLOR: "var(--ds-gray-400)",
-  HTML_DOCTYPE_COLOR: "var(--ds-gray-400)",
+  // undefined — muted foreground
+  OBJECT_VALUE_UNDEFINED_COLOR: "var(--ds-gray-900)",
+  // RegExp — purple
+  OBJECT_VALUE_REGEXP_COLOR: "var(--ds-purple-900)",
+  // Functions — purple
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "var(--ds-purple-900)",
+  // HTML (rarely used here, kept consistent with the palette)
+  HTML_TAG_COLOR: "var(--ds-gray-900)",
+  HTML_TAGNAME_COLOR: "var(--ds-blue-900)",
+  HTML_ATTRIBUTE_NAME_COLOR: "var(--ds-amber-900)",
+  HTML_ATTRIBUTE_VALUE_COLOR: "var(--ds-green-900)",
+  HTML_COMMENT_COLOR: "var(--ds-gray-700)",
+  HTML_DOCTYPE_COLOR: "var(--ds-gray-700)",
   // Structural
-  ARROW_COLOR: "var(--ds-gray-500)",
+  ARROW_COLOR: "var(--ds-gray-700)",
   TABLE_BORDER_COLOR: "var(--ds-gray-300)",
   TABLE_TH_BACKGROUND_COLOR: "var(--ds-gray-100)",
   TABLE_TH_HOVER_COLOR: "var(--ds-gray-200)",
-  TABLE_SORT_ICON_COLOR: "var(--ds-gray-500)"
-};
-const inspectorThemeDark = {
-  ...shared,
-  // Base text
-  BASE_COLOR: "var(--ds-gray-1000)",
-  // Property names — white/light foreground (Node: unstyled = white in dark terminal)
-  OBJECT_NAME_COLOR: "var(--ds-gray-900)",
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: "#4ade80",
-  // green-400
-  OBJECT_VALUE_SYMBOL_COLOR: "#4ade80",
-  // Numbers & booleans — yellow (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: "#facc15",
-  // yellow-400
-  OBJECT_VALUE_BOOLEAN_COLOR: "#facc15",
-  // null — bold foreground / white (Node: 'bold')
-  OBJECT_VALUE_NULL_COLOR: "var(--ds-gray-1000)",
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: "var(--ds-gray-500)",
-  // RegExp — red (Node regexp palette)
-  OBJECT_VALUE_REGEXP_COLOR: "#f87171",
-  // red-400
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "#22d3ee",
-  // cyan-400
-  // HTML
-  HTML_TAG_COLOR: "var(--ds-gray-500)",
-  HTML_TAGNAME_COLOR: "#22d3ee",
-  HTML_ATTRIBUTE_NAME_COLOR: "#facc15",
-  HTML_ATTRIBUTE_VALUE_COLOR: "#4ade80",
-  HTML_COMMENT_COLOR: "var(--ds-gray-500)",
-  HTML_DOCTYPE_COLOR: "var(--ds-gray-500)",
-  // Structural
-  ARROW_COLOR: "var(--ds-gray-500)",
-  TABLE_BORDER_COLOR: "var(--ds-gray-300)",
-  TABLE_TH_BACKGROUND_COLOR: "var(--ds-gray-100)",
-  TABLE_TH_HOVER_COLOR: "var(--ds-gray-200)",
-  TABLE_SORT_ICON_COLOR: "var(--ds-gray-500)"
+  TABLE_SORT_ICON_COLOR: "var(--ds-gray-700)"
 };
+const inspectorThemeLight = geistTheme;
+const inspectorThemeDark = geistTheme;
 const STREAM_REF_TYPE = "__workflow_stream_ref__";
 const CLASS_INSTANCE_REF_TYPE = "__workflow_class_instance_ref__";
 const RUN_REF_TYPE = "__workflow_run_ref__";
+const BYTES_DISPLAY_TYPE = "__workflow_bytes_display__";
+function deserializeChunkText(text2) {
+  try {
+    const parsed = JSON.parse(text2);
+    if (typeof parsed === "string") {
+      return parsed;
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return text2;
+  }
+}
+function parseChunkData(text2) {
+  try {
+    return JSON.parse(text2);
+  } catch {
+    return text2;
+  }
+}
 function isStreamRef(value) {
   if (value === null || typeof value !== "object")
     return false;
@@ -16822,6 +16817,12 @@ function isRunRef(value) {
   const desc = Object.getOwnPropertyDescriptor(value, "__type");
   return (desc == null ? void 0 : desc.value) === RUN_REF_TYPE;
 }
+function isBytesDisplay(value) {
+  if (value === null || typeof value !== "object")
+    return false;
+  const desc = Object.getOwnPropertyDescriptor(value, "__type");
+  return (desc == null ? void 0 : desc.value) === BYTES_DISPLAY_TYPE;
+}
 function isClassInstanceRef(value) {
   return value !== null && typeof value === "object" && "__type" in value && value.__type === CLASS_INSTANCE_REF_TYPE;
 }
@@ -16874,9 +16875,31 @@ function RunRefInline({ runRef }) {
   }, title: `View run: ${runRef.runId}`, children: jsxRuntimeExports.jsx("span", { children: runRef.runId }) });
 }
 const ExtendedThemeContext = reactExports.createContext(inspectorThemeExtendedLight);
+function DecodedBytesChunk({ decodedText, source }) {
+  const [selectedView, setSelectedView] = reactExports.useState("decoded");
+  const parsed = parseChunkData(decodedText);
+  return jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [selectedView === "decoded" ? jsxRuntimeExports.jsx("div", { className: "min-w-0", children: typeof parsed === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: deserializeChunkText(parsed) }) : jsxRuntimeExports.jsx(DataInspector, { data: parsed, expandLevel: 1 }) }) : jsxRuntimeExports.jsx(DecodedBytesInspector, { decodedText, source }), jsxRuntimeExports.jsx("div", { className: "mt-2 flex", children: jsxRuntimeExports.jsxs("div", { className: "inline-flex overflow-hidden rounded border", style: { borderColor: "var(--ds-gray-400)" }, title: `${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`, children: [jsxRuntimeExports.jsx("button", { type: "button", className: "h-5 px-1.5 text-[10px] font-medium", style: {
+    backgroundColor: selectedView === "decoded" ? "var(--ds-gray-200)" : "var(--ds-gray-100)",
+    color: "var(--ds-gray-900)"
+  }, onClick: () => setSelectedView("decoded"), "aria-pressed": selectedView === "decoded", "aria-label": "Show decoded text", children: "Decoded" }), jsxRuntimeExports.jsx("button", { type: "button", className: "h-5 border-l px-1.5 text-[10px] font-medium", style: {
+    borderColor: "var(--ds-gray-400)",
+    backgroundColor: selectedView === "bytes" ? "var(--ds-gray-200)" : "var(--ds-gray-100)",
+    color: "var(--ds-gray-900)"
+  }, onClick: () => setSelectedView("bytes"), "aria-pressed": selectedView === "bytes", "aria-label": "Show raw bytes summary", children: "Bytes" })] }) })] });
+}
+function DecodedBytesInspector({ decodedText, source }) {
+  const [expanded2, setExpanded] = reactExports.useState(false);
+  return jsxRuntimeExports.jsxs("div", { className: "font-mono", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "flex max-w-full items-start gap-1 text-left", style: { color: "var(--ds-gray-1000)" }, onClick: () => setExpanded((value) => !value), title: `${source.type} decoded as ${source.encoding.toUpperCase()} text`, children: [jsxRuntimeExports.jsx("span", { className: "select-none", style: { color: "var(--ds-gray-700)" }, children: expanded2 ? "▼" : "▶" }), jsxRuntimeExports.jsx("span", { className: "min-w-0 break-words", children: source.rawSummary })] }), expanded2 && jsxRuntimeExports.jsxs("div", { className: "mt-1 pl-5", children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: "decoded: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-green-900)" }, children: JSON.stringify(decodedText) })] })] });
+}
+function BytesDisplayLabel({ name: name2, display }) {
+  return jsxRuntimeExports.jsxs("div", { className: "inline-block min-w-0 align-top", children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), display.decodedFrom ? jsxRuntimeExports.jsx(DecodedBytesChunk, { decodedText: display.text, source: display.decodedFrom }) : jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: display.text })] });
+}
 function NodeRenderer({ depth, name: name2, data, isNonenumerable }) {
   var _a3;
   const extendedTheme = reactExports.useContext(ExtendedThemeContext);
+  if (isBytesDisplay(data)) {
+    return jsxRuntimeExports.jsx(BytesDisplayLabel, { name: name2, display: data });
+  }
   if (data !== null && typeof data === "object" && ((_a3 = data.constructor) == null ? void 0 : _a3.name) === ENCRYPTED_DISPLAY_NAME) {
     const label = jsxRuntimeExports.jsx(EncryptedInlineLabel, {});
     if (depth === 0) {
@@ -16915,13 +16938,41 @@ function makeOpaqueRef(ref) {
   }
   return opaque;
 }
+function makeBytesDisplay(display) {
+  const opaque = /* @__PURE__ */ Object.create(null);
+  Object.defineProperty(opaque, "__type", {
+    value: BYTES_DISPLAY_TYPE,
+    enumerable: false
+  });
+  Object.defineProperty(opaque, "text", {
+    value: display.text,
+    enumerable: false
+  });
+  Object.defineProperty(opaque, "decodedFrom", {
+    value: display.decodedFrom,
+    enumerable: false
+  });
+  return opaque;
+}
 function collapseRefs(data) {
   if (data === null || typeof data !== "object")
     return data;
+  if (ArrayBuffer.isView(data) && !(data instanceof DataView)) {
+    return makeBytesDisplay(formatArrayBufferViewForDisplay(data));
+  }
   if (isRunRef(data) || isStreamRef(data))
     return makeOpaqueRef(data);
   if (Array.isArray(data))
     return data.map(collapseRefs);
+  if (data instanceof Map) {
+    return new Map(Array.from(data.entries(), ([key, value]) => [
+      collapseRefs(key),
+      collapseRefs(value)
+    ]));
+  }
+  if (data instanceof Set) {
+    return new Set(Array.from(data.values(), collapseRefs));
+  }
   const proto2 = Object.getPrototypeOf(data);
   if (proto2 !== Object.prototype && proto2 !== null)
     return data;
@@ -16971,9 +17022,16 @@ function useStableInspectorData(next2) {
 function isObjectLike(value) {
   return typeof value === "object" && value !== null;
 }
+function isSameBytesDisplay(a2, b2) {
+  var _a3, _b, _c, _d, _e2, _f;
+  return a2.text === b2.text && ((_a3 = a2.decodedFrom) == null ? void 0 : _a3.type) === ((_b = b2.decodedFrom) == null ? void 0 : _b.type) && ((_c = a2.decodedFrom) == null ? void 0 : _c.encoding) === ((_d = b2.decodedFrom) == null ? void 0 : _d.encoding) && ((_e2 = a2.decodedFrom) == null ? void 0 : _e2.rawSummary) === ((_f = b2.decodedFrom) == null ? void 0 : _f.rawSummary);
+}
 function isDeepEqual(a2, b2, seen2 = /* @__PURE__ */ new WeakMap()) {
   if (Object.is(a2, b2))
     return true;
+  if (isBytesDisplay(a2) || isBytesDisplay(b2)) {
+    return isBytesDisplay(a2) && isBytesDisplay(b2) && isSameBytesDisplay(a2, b2);
+  }
   if (a2 instanceof Date && b2 instanceof Date) {
     return a2.getTime() === b2.getTime();
   }
@@ -42883,7 +42941,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-DPWdt39H.js"), true ? __vite__mapDeps([0,1]) : 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-Be0uLJd8.js"), true ? __vite__mapDeps([0,1]) : 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 }) })] }) });
@@ -43647,27 +43705,11 @@ var Nt = ({ chart: e, className: t, config: o, fullscreen: n = false, showContro
   let T2 = l || d2;
   return jsxRuntimeExports.jsx("div", { className: f("size-full", t), "data-streamdown": "mermaid", ref: w2, children: jsxRuntimeExports.jsx(So, { className: f(n ? "size-full overflow-hidden" : "overflow-hidden", t), fullscreen: n, maxZoom: 3, minZoom: 0.5, showControls: s2, zoomStep: 0.1, children: jsxRuntimeExports.jsx("div", { "aria-label": "Mermaid chart", className: f("flex justify-center", n ? "size-full items-center" : null), dangerouslySetInnerHTML: { __html: T2 }, role: "img" }) }) });
 };
-const SEARCH_HEIGHT = 40;
-const SEARCH_GAP = 8;
 const MAP_HEIGHT = 56;
 const TIMELINE_PADDING = 8;
 const ROW_PADDING = 2;
-const ROW_HEIGHT = 24;
+const ROW_HEIGHT$1 = 24;
 const MARKER_HEIGHT = 24;
-const MARKER_NOTCH_HEIGHT = 8;
-const detectScrollbarWidth = () => {
-  if (!("document" in globalThis))
-    return 0;
-  const size2 = 400;
-  const container = document.createElement("div");
-  container.style.width = `${size2}px`;
-  container.style.height = `${size2}px`;
-  container.style.overflow = "scroll";
-  document.body.appendChild(container);
-  const scrollbarWidth = size2 - container.scrollWidth;
-  container.remove();
-  return scrollbarWidth;
-};
 const initialState = {
   root: {
     startTime: 0,
@@ -43697,301 +43739,14 @@ const initialState = {
   withPanel: false,
   isMobile: false
 };
-const getMinScale = (state) => {
-  return (state.timelineWidth - state.scrollbarWidth) / state.root.duration;
-};
 const TraceViewerContext = reactExports.createContext({
   state: initialState,
   dispatch: () => {
   }
 });
 TraceViewerContext.displayName = "TraceViewerContext";
-const reducer = (state, action) => {
-  var _a3;
-  switch (action.type) {
-    case "setRoot":
-      state.scrollSnapshotRef.current = void 0;
-      state.memoCacheRef.current.clear();
-      return reducer({
-        ...state,
-        root: action.root,
-        spanMap: action.spanMap,
-        resourceMap: Object.fromEntries(action.resources.map(({ name: name2, attributes }) => [name2, attributes]))
-      }, {
-        type: "detectBaseScale"
-      });
-    case "setSize": {
-      const lowerHeight = action.height - MAP_HEIGHT - SEARCH_HEIGHT - 3 * SEARCH_GAP;
-      const isMobile = state.withPanel && action.width <= 768;
-      let newState = {
-        ...state,
-        width: action.width,
-        height: action.height,
-        timelineWidth: action.width - Number(Boolean(state.selected && state.withPanel && !isMobile)) * state.panelWidth,
-        timelineHeight: lowerHeight,
-        panelHeight: lowerHeight,
-        isMobile
-      };
-      if (newState.width !== state.width) {
-        newState = reducer(newState, {
-          type: "detectBaseScale"
-        });
-      }
-      return newState;
-    }
-    case "setPanelWidth": {
-      const panelWidth = Math.max(240, Math.min(action.width, state.width - 240));
-      const timelineWidth = state.withPanel && state.selected && !state.isMobile ? state.width - panelWidth : state.width;
-      return reducer({
-        ...state,
-        timelineWidth,
-        panelWidth
-      }, {
-        type: "detectBaseScale"
-      });
-    }
-    case "setFilter":
-      return {
-        ...state,
-        filter: action.filter
-      };
-    case "deselect":
-      return reducer({
-        ...state,
-        selected: null,
-        timelineWidth: state.width
-      }, {
-        type: "detectBaseScale"
-      });
-    case "select": {
-      const node2 = state.spanMap[action.id];
-      if (!node2) {
-        return state;
-      }
-      return reducer({
-        ...state,
-        selected: node2,
-        timelineWidth: state.width - (state.withPanel && !state.isMobile ? state.panelWidth : 0)
-      }, {
-        type: "detectBaseScale"
-      });
-    }
-    case "escape": {
-      if (state.selected) {
-        return reducer(state, {
-          type: "deselect"
-        });
-      }
-      return reducer(state, {
-        type: "resetScale"
-      });
-    }
-    case "toggleSelection": {
-      let newState = state;
-      if (state.selected) {
-        newState = reducer(newState, {
-          type: "deselect"
-        });
-      }
-      if (((_a3 = state.selected) == null ? void 0 : _a3.span.spanId) === action.id) {
-        return newState;
-      }
-      return reducer(newState, {
-        type: "select",
-        id: action.id
-      });
-    }
-    case "detectBaseScale": {
-      const baseScale = (state.timelineWidth - state.scrollbarWidth) / state.root.duration;
-      return reducer({
-        ...state,
-        baseScale,
-        scale: baseScale * state.scaleRatio
-      }, {
-        type: "minScale"
-      });
-    }
-    case "setScale":
-      return {
-        ...state,
-        scaleRatio: action.scale,
-        scale: state.baseScale * action.scale
-      };
-    case "resetScale":
-      return reducer(state, {
-        type: "scaleToRange",
-        t1: state.root.startTime,
-        t2: state.root.endTime
-      });
-    case "scaleToNode": {
-      const node2 = state.spanMap[action.id];
-      if (!node2) {
-        return state;
-      }
-      return reducer(reducer(state, {
-        type: "setScale",
-        scale: (state.width - state.scrollbarWidth - (state.withPanel && !state.isMobile ? state.panelWidth : 0)) / node2.duration / state.baseScale
-      }), {
-        type: "setScrollSnapshot",
-        anchorT: node2.startTime - state.root.startTime,
-        anchorX: 0
-      });
-    }
-    case "scaleToRange": {
-      const duration2 = Math.abs(action.t1 - action.t2);
-      return reducer(reducer(state, {
-        type: "setScale",
-        scale: (state.width - state.scrollbarWidth - (state.selected && state.withPanel ? state.panelWidth : 0)) / duration2 / state.baseScale
-      }), {
-        type: "setScrollSnapshot",
-        anchorT: Math.min(action.t1, action.t2) - state.root.startTime,
-        anchorX: 0
-      });
-    }
-    case "adjustScaleRatio": {
-      let { scaleRatio } = state;
-      switch (action.direction) {
-        case -1:
-          scaleRatio *= 0.8;
-          break;
-        case 1:
-          scaleRatio *= 1.25;
-          break;
-        default:
-          scaleRatio = 1;
-          break;
-      }
-      const $timeline = state.timelineRef.current;
-      if (!$timeline) {
-        console.warn("timelineRef is null");
-        return state;
-      }
-      const { clientWidth, scrollLeft } = $timeline;
-      return reducer(reducer({
-        ...state,
-        scaleRatio,
-        scale: state.baseScale * scaleRatio
-      }, {
-        type: "minScale"
-      }), {
-        type: "setScrollSnapshot",
-        anchorT: (scrollLeft + clientWidth * 0.5) / state.scale,
-        anchorX: clientWidth * 0.5
-      });
-    }
-    case "trackpadScale": {
-      const minScaleRatio = getMinScale(state) / state.baseScale;
-      const scaleRatio = Math.max(minScaleRatio, state.scaleRatio * (1 + 0.2 * Math.sign(action.delta) * Math.sqrt(Math.abs(action.delta))));
-      return reducer({
-        ...state,
-        scaleRatio,
-        scale: state.baseScale * scaleRatio
-      }, {
-        type: "setScrollSnapshot",
-        anchorT: action.anchorT,
-        anchorX: action.anchorX
-      });
-    }
-    case "minScale": {
-      const minScale = getMinScale(state);
-      if (state.scale >= minScale)
-        return state;
-      return {
-        ...state,
-        scale: minScale,
-        scaleRatio: minScale / state.baseScale
-      };
-    }
-    case "setScrollSnapshot": {
-      const $timeline = state.timelineRef.current;
-      if (!$timeline)
-        return state;
-      const { anchorT, anchorX } = action;
-      const scrollLeft = anchorT * state.scale - anchorX;
-      const { scrollTop } = $timeline;
-      const startRow = (scrollTop - MARKER_HEIGHT - TIMELINE_PADDING) / (ROW_HEIGHT + ROW_PADDING);
-      const endRow = startRow + Math.ceil(state.timelineHeight / (ROW_HEIGHT + ROW_PADDING));
-      state.scrollSnapshotRef.current = {
-        anchorT,
-        anchorX,
-        scrollLeft,
-        scrollTop,
-        startTime: state.root.startTime + scrollLeft / state.scale,
-        endTime: state.root.startTime + (scrollLeft + state.timelineWidth) / state.scale,
-        startRow,
-        endRow,
-        scale: state.scale
-      };
-      return state;
-    }
-    case "setWithPanel": {
-      if (state.withPanel === action.withPanel)
-        return state;
-      const timelineWidth = action.withPanel && state.selected && !state.isMobile ? state.width - state.panelWidth : state.width;
-      return reducer({
-        ...state,
-        withPanel: action.withPanel,
-        timelineWidth
-      }, {
-        type: "detectBaseScale"
-      });
-    }
-    case "forceRender":
-      state.memoCacheRef.current.set("", {});
-      return {
-        ...state
-      };
-    case "updateRoot":
-      state.memoCacheRef.current.set("", {});
-      return reducer({
-        ...state,
-        root: action.root,
-        spanMap: action.spanMap,
-        resourceMap: Object.fromEntries(action.resources.map(({ name: name2, attributes }) => [name2, attributes]))
-      }, {
-        type: "detectBaseScale"
-      });
-  }
-};
-function TraceViewerContextProvider({ getQuickLinks, withPanel = false, children: children2, customSpanClassNameFunc, customSpanEventClassNameFunc, customPanelComponent = null }) {
-  const timelineRef = reactExports.useRef(null);
-  const scrollSnapshotRef = reactExports.useRef(void 0);
-  const getQuickLinksRef = reactExports.useRef(getQuickLinks);
-  getQuickLinksRef.current = getQuickLinks;
-  const memoCacheRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const quickLinksCache = reactExports.useRef(/* @__PURE__ */ new Map());
-  const [state, dispatch] = reactExports.useReducer(reducer, initialState, (initial) => {
-    return {
-      ...initial,
-      scrollbarWidth: detectScrollbarWidth(),
-      timelineRef,
-      scrollSnapshotRef,
-      customSpanClassNameFunc,
-      customSpanEventClassNameFunc,
-      memoCacheRef,
-      withPanel,
-      getQuickLinks: (span) => {
-        var _a3;
-        const cacheKey = span.spanId;
-        const existing = quickLinksCache.current.get(cacheKey);
-        if (existing)
-          return existing;
-        const value2 = ((_a3 = getQuickLinksRef.current) == null ? void 0 : _a3.call(getQuickLinksRef, span)) || [];
-        quickLinksCache.current.set(cacheKey, value2);
-        return value2;
-      }
-    };
-  });
-  reactExports.useEffect(() => dispatch({
-    type: "setWithPanel",
-    withPanel
-  }), [withPanel]);
-  const value = reactExports.useMemo(() => ({ state, dispatch }), [state, dispatch]);
-  return jsxRuntimeExports.jsx(CustomPanelContext.Provider, { value: customPanelComponent, children: jsxRuntimeExports.jsx(TraceViewerContext.Provider, { value, children: children2 }) });
-}
 const useTraceViewer = () => reactExports.useContext(TraceViewerContext);
-const CustomPanelContext = reactExports.createContext(null);
-const useCustomPanelComponent = () => reactExports.useContext(CustomPanelContext);
+reactExports.createContext(null);
 const traceNode = "_traceNode_1fmf2_1";
 const childRow = "_childRow_1fmf2_5";
 const spanNode = "_spanNode_1fmf2_11";
@@ -44241,27 +43996,6 @@ const styles = {
 function getHighResInMs([seconds, nanoseconds]) {
   return seconds * 1e3 + nanoseconds / 1e6;
 }
-function getMsInHighRes(ms) {
-  return [Math.floor(ms / 1e3), ms % 1e3 * 1e3];
-}
-const formatDurationForTimeline = (ms) => formatDuration(ms, true);
-const timeSelectionFormatter = new Intl.NumberFormat(void 0, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2
-});
-function formatTimeSelection(ms) {
-  if (ms >= 1e3) {
-    return `${timeSelectionFormatter.format(ms / 1e3)}s`;
-  }
-  return `${timeSelectionFormatter.format(ms)}ms`;
-}
-function formatWallClockTime(epochMs) {
-  const d2 = new Date(epochMs);
-  const h2 = String(d2.getHours()).padStart(2, "0");
-  const m2 = String(d2.getMinutes()).padStart(2, "0");
-  const s2 = String(d2.getSeconds()).padStart(2, "0");
-  return `${h2}:${m2}:${s2}`;
-}
 const SEGMENT_CLASS_MAP = {
   queued: "segQueued",
   running: "segRunning",
@@ -44272,13 +44006,13 @@ const SEGMENT_CLASS_MAP = {
   sleeping: "segSleeping",
   received: "segReceived"
 };
-function clampFraction(value) {
+function clampFraction$1(value) {
   return Math.max(0, Math.min(1, value));
 }
-function timeToFraction(time2, spanStart, spanDuration2) {
+function timeToFraction$1(time2, spanStart, spanDuration2) {
   if (spanDuration2 <= 0)
     return 0;
-  return clampFraction((time2 - spanStart) / spanDuration2);
+  return clampFraction$1((time2 - spanStart) / spanDuration2);
 }
 function sortedEvents(events) {
   return [...events].sort((a2, b2) => a2.timestamp - b2.timestamp);
@@ -44300,7 +44034,7 @@ function computeStepSegments(node2) {
     return segments;
   }
   const firstMark = marks[0];
-  const firstFraction = timeToFraction(firstMark.time, startTime, duration2);
+  const firstFraction = timeToFraction$1(firstMark.time, startTime, duration2);
   if (firstFraction > 1e-3) {
     segments.push({
       startFraction: 0,
@@ -44310,9 +44044,9 @@ function computeStepSegments(node2) {
   }
   for (let i = 0; i < marks.length; i++) {
     const mark2 = marks[i];
-    const markFraction = timeToFraction(mark2.time, startTime, duration2);
+    const markFraction = timeToFraction$1(mark2.time, startTime, duration2);
     const nextMark = marks[i + 1];
-    const nextFraction = nextMark ? timeToFraction(nextMark.time, startTime, duration2) : 1;
+    const nextFraction = nextMark ? timeToFraction$1(nextMark.time, startTime, duration2) : 1;
     if (mark2.type === "step_started") {
       const isLastMark = i === marks.length - 1;
       if (isLastMark) {
@@ -44360,8 +44094,8 @@ function computeHookSegments(node2) {
     segments.push({ startFraction: 0, endFraction: 1, status: "waiting" });
     return segments;
   }
-  const receivedFraction = receivedEvent ? timeToFraction(receivedEvent.timestamp, startTime, duration2) : null;
-  const disposedFraction = disposedEvent ? timeToFraction(disposedEvent.timestamp, startTime, duration2) : null;
+  const receivedFraction = receivedEvent ? timeToFraction$1(receivedEvent.timestamp, startTime, duration2) : null;
+  const disposedFraction = disposedEvent ? timeToFraction$1(disposedEvent.timestamp, startTime, duration2) : null;
   if (receivedFraction !== null && receivedFraction > 1e-3) {
     segments.push({
       startFraction: 0,
@@ -44403,7 +44137,7 @@ function computeSleepSegments(node2) {
     segments.push({ startFraction: 0, endFraction: 1, status: "sleeping" });
     return segments;
   }
-  const completedFraction = timeToFraction(completedEvent.timestamp, startTime, duration2);
+  const completedFraction = timeToFraction$1(completedEvent.timestamp, startTime, duration2);
   if (completedFraction > 1e-3) {
     segments.push({
       startFraction: 0,
@@ -44429,13 +44163,13 @@ function computeRunSegments(node2) {
   if (!hasRunCreated) {
     const runData = (_a3 = node2.span.attributes) == null ? void 0 : _a3.data;
     const runStatus = runData == null ? void 0 : runData.status;
-    return computeV1RunSegments(startTime, duration2, activeStartTime, runStatus);
+    return computeV1RunSegments$1(startTime, duration2, activeStartTime, runStatus);
   }
   const failedEvent = events.find((e) => e.event.name === "run_failed");
   const completedEvent = events.find((e) => e.event.name === "run_completed");
   let cursor = 0;
   if (activeStartTime && activeStartTime > startTime) {
-    const queuedFraction = timeToFraction(activeStartTime, startTime, duration2);
+    const queuedFraction = timeToFraction$1(activeStartTime, startTime, duration2);
     if (queuedFraction > 1e-3) {
       segments.push({
         startFraction: 0,
@@ -44446,7 +44180,7 @@ function computeRunSegments(node2) {
     }
   }
   if (failedEvent) {
-    const failedFraction = timeToFraction(failedEvent.timestamp, startTime, duration2);
+    const failedFraction = timeToFraction$1(failedEvent.timestamp, startTime, duration2);
     if (failedFraction > cursor + 1e-3) {
       segments.push({
         startFraction: cursor,
@@ -44460,7 +44194,7 @@ function computeRunSegments(node2) {
       status: "failed"
     });
   } else if (completedEvent) {
-    const completedFraction = timeToFraction(completedEvent.timestamp, startTime, duration2);
+    const completedFraction = timeToFraction$1(completedEvent.timestamp, startTime, duration2);
     if (completedFraction > cursor + 1e-3) {
       segments.push({
         startFraction: cursor,
@@ -44482,11 +44216,11 @@ function computeRunSegments(node2) {
   }
   return segments;
 }
-function computeV1RunSegments(startTime, duration2, activeStartTime, runStatus) {
+function computeV1RunSegments$1(startTime, duration2, activeStartTime, runStatus) {
   const segments = [];
   let cursor = 0;
   if (activeStartTime && activeStartTime > startTime) {
-    const queuedFraction = timeToFraction(activeStartTime, startTime, duration2);
+    const queuedFraction = timeToFraction$1(activeStartTime, startTime, duration2);
     if (queuedFraction > 1e-3) {
       segments.push({
         startFraction: 0,
@@ -44539,7 +44273,7 @@ function computeBoundaries(node2, relevantEventNames) {
   for (const e of events) {
     if (!relevantEventNames.includes(e.event.name))
       continue;
-    const fraction = timeToFraction(e.timestamp, startTime, duration2);
+    const fraction = timeToFraction$1(e.timestamp, startTime, duration2);
     if (fraction < 0.01 || fraction > 0.99)
       continue;
     boundaries.push({
@@ -44710,17 +44444,17 @@ function computeIsNearRightSide(node2, root2, scrollSnapshotRef, isHovered) {
 }
 function computeDefaultLayout(node2, root2, scale, scrollSnapshotRef) {
   const left = (node2.startTime - root2.startTime) * scale;
-  let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node2.row;
+  let top = MARKER_HEIGHT + (ROW_HEIGHT$1 + ROW_PADDING) * node2.row;
   const actualWidth = node2.duration * scale;
   const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
-  let height = ROW_HEIGHT;
+  let height = ROW_HEIGHT$1;
   const isHuge = computeIsHuge(actualWidth);
   const isSmall = computeIsSmall(actualWidth);
   const isHovered = computeIsHovered(node2, isHuge);
   const isExpanded = isHovered || Boolean(node2.isSelected);
   if (isSmall && !isExpanded) {
     height *= 0.4;
-    top += (ROW_HEIGHT - height) * 0.5;
+    top += (ROW_HEIGHT$1 - height) * 0.5;
   }
   const isNearRightSide = computeIsNearRightSide(node2, root2, scrollSnapshotRef, isExpanded);
   return {
@@ -44809,7 +44543,7 @@ function getTerminalTimestamp(resourceType, node2) {
       return void 0;
   }
 }
-const SpanNodes = reactExports.memo(function SpanNodes2({ root: root2, scale, spans, isLive = false, scrollSnapshotRef, cache, customSpanClassNameFunc, customSpanEventClassNameFunc }) {
+reactExports.memo(function SpanNodes({ root: root2, scale, spans, isLive = false, scrollSnapshotRef, cache, customSpanClassNameFunc, customSpanEventClassNameFunc }) {
   return spans.map((x2) => jsxRuntimeExports.jsx(SpanComponent, { cacheKey: cache.get(x2.span.spanId), customSpanEventClassNameFunc, customSpanClassNameFunc, node: x2, root: root2, scale, traceIsLive: isLive, scrollSnapshotRef }, x2.span.spanId));
 });
 function getSpanStyle(layout, node2, root2, scale) {
@@ -44886,8 +44620,8 @@ const SpanComponent = reactExports.memo(function SpanComponent2({ node: node2, r
     layout.isSmall = liveActualWidth < 64;
     layout.isHuge = liveActualWidth >= 500;
     if (!layout.isSmall) {
-      layout.height = ROW_HEIGHT;
-      layout.top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * segmentNode.row;
+      layout.height = ROW_HEIGHT$1;
+      layout.top = MARKER_HEIGHT + (ROW_HEIGHT$1 + ROW_PADDING) * segmentNode.row;
     }
   }
   reactExports.useEffect(() => {
@@ -44962,7 +44696,7 @@ const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ even
     }
   }
   const left = (event.timestamp - root2.startTime) * scale;
-  const top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node2.row;
+  const top = MARKER_HEIGHT + (ROW_HEIGHT$1 + ROW_PADDING) * node2.row;
   const isLeftAligned = node2.duration <= 0 || (event.timestamp - node2.startTime) / node2.duration < 0.5;
   const customClassName = customSpanEventClassNameFunc ? customSpanEventClassNameFunc(event) : "";
   return jsxRuntimeExports.jsxs("div", { title: phaseDuration ? `${displayLabel} ${timestamp}
@@ -44975,10 +44709,6 @@ const colorTokenMap = {
   "gray-700": "var(--ds-gray-700)",
   "gray-900": "var(--ds-gray-900)"
 };
-function IconCross({ size: size2 = 16, color: color5 = "gray-700" }) {
-  const style2 = { color: colorTokenMap[color5] || color5 };
-  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", style: style2, "aria-hidden": true, children: [jsxRuntimeExports.jsx("title", { children: "Cross" }), jsxRuntimeExports.jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] });
-}
 function IconChevronDown({ size: size2 = 16 }) {
   return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
 }
@@ -44994,102 +44724,9 @@ function Link(props) {
   }
   return jsxRuntimeExports.jsx("a", { className, href, ...rest, children: children2 });
 }
-function ButtonLink(props) {
-  const { className, children: children2, size: _size, ...rest } = props;
-  return jsxRuntimeExports.jsx("a", { ...rest, className: clsx(styles.buttonLink, className), children: children2 });
-}
-function Note({ children: children2, className }) {
-  return jsxRuntimeExports.jsx("div", { className: clsx(styles.note, className), children: children2 });
-}
 function Skeleton({ width, height, rounded }) {
   return jsxRuntimeExports.jsx("span", { className: clsx(styles.skeleton, rounded && styles.skeletonRounded), style: { width, height }, "aria-hidden": true });
 }
-const percentage = (n) => `${(100 * n).toFixed(3)}%`;
-const sortWord = (a2, b2) => {
-  if (a2 < b2) {
-    return -1;
-  } else if (a2 > b2) {
-    return 1;
-  }
-  return 0;
-};
-const getGroupedAttributes = (attributes) => {
-  const groups = {};
-  for (const [key, value] of Object.entries(attributes)) {
-    const dotIndex = key.indexOf(".");
-    let prefix = "";
-    let suffix = "";
-    if (dotIndex !== -1) {
-      prefix = key.substring(0, dotIndex);
-      suffix = key.substring(dotIndex + 1);
-    } else {
-      suffix = key;
-    }
-    let group = groups[prefix];
-    if (!group) {
-      group = {
-        prefix,
-        attributes: []
-      };
-      groups[prefix] = group;
-    }
-    group.attributes.push({
-      key,
-      suffix,
-      value: String(value)
-    });
-  }
-  const result = Array.from(Object.values(groups)).sort((a2, b2) => sortWord(a2.prefix, b2.prefix));
-  for (const group of result) {
-    group.attributes.sort((a2, b2) => sortWord(a2.suffix, b2.suffix));
-  }
-  return result;
-};
-const getAncestors = (_root, start) => {
-  const result = [];
-  if (!start)
-    return result;
-  for (let node2 = start; "parent" in node2; node2 = node2.parent) {
-    result.unshift(node2);
-  }
-  return result;
-};
-const SpanDetailPanelBody = () => {
-  var _a3;
-  const { state: { root: root2, selected, resourceMap, getQuickLinks }, dispatch } = useTraceViewer();
-  const ancestors = reactExports.useMemo(() => getAncestors(root2, selected), [root2, selected]);
-  const attributeGroups = reactExports.useMemo(() => getGroupedAttributes((selected == null ? void 0 : selected.span.attributes) ?? {}), [selected]);
-  const resourceAttributeGroups = reactExports.useMemo(() => {
-    const resourceName = selected == null ? void 0 : selected.span.resource;
-    if (!resourceName)
-      return [];
-    const resourceAttributes = resourceMap[resourceName];
-    if (!resourceAttributes)
-      return [];
-    return getGroupedAttributes(resourceAttributes);
-  }, [resourceMap, selected]);
-  if (!selected)
-    return null;
-  const { span } = selected;
-  const isEntrySpan = detectIsEntrySpan(selected);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [selected.isVercel ? jsxRuntimeExports.jsx(InfraSpanDescription, { node: selected }) : null, selected.isInstrumentationHint ? jsxRuntimeExports.jsx(InstrumentationHint, {}) : null, !selected.isInstrumentationHint && ancestors.length ? jsxRuntimeExports.jsx(DetailGroup, { className: styles.ancestorGroup, name: "Location", children: ancestors.map((node2) => jsxRuntimeExports.jsxs("button", { className: styles.ancestorNode, onClick: () => dispatch({
-    type: "select",
-    id: node2.span.spanId
-  }), type: "button", children: [jsxRuntimeExports.jsxs("div", { className: styles.ancestorText, children: [jsxRuntimeExports.jsx("span", { className: styles.ancestorName, children: node2.label || node2.span.name }), jsxRuntimeExports.jsx("span", { className: styles.ancestorDuration, children: formatDuration(node2.duration) })] }), jsxRuntimeExports.jsx("span", { "aria-hidden": true, className: styles.ancestorLineContainer, children: jsxRuntimeExports.jsx("span", { className: clsx(styles.ancestorLine, getSpanColorClassName(node2)), style: {
-    left: percentage((node2.startTime - root2.startTime) / root2.duration),
-    width: percentage(node2.duration / root2.duration)
-  } }) })] }, `${selected.span.spanId}.${node2.span.spanId}`)) }) : null, isEntrySpan ? jsxRuntimeExports.jsx(EntrySpanLinks, { getQuickLinks, span: selected.span }) : null, ((_a3 = selected.events) == null ? void 0 : _a3.length) ? jsxRuntimeExports.jsx(DetailGroup, { name: "Events", children: selected.events.map((event) => jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [jsxRuntimeExports.jsxs("dl", { className: styles.spanDetailPanelAttribute, children: [jsxRuntimeExports.jsx("dt", { className: styles.spanDetailPanelAttributeKey, children: event.event.name }), jsxRuntimeExports.jsx("dd", { className: styles.spanDetailPanelAttributeValue, children: formatDuration(event.timestamp - root2.startTime) })] }), Object.entries(event.event.attributes).map(([key, value]) => jsxRuntimeExports.jsx(DetailLine, { name: `${event.event.name}.${key}`, value }, key))] }, event.key)) }) : null, attributeGroups.length ? jsxRuntimeExports.jsx(DetailGroup, { name: "Attributes", children: attributeGroups.map((group) => jsxRuntimeExports.jsx(reactExports.Fragment, { children: group.attributes.map(({ key, value }) => jsxRuntimeExports.jsx(DetailLine, { name: key, value }, key)) }, group.prefix)) }) : null, resourceAttributeGroups.length ? jsxRuntimeExports.jsx(DetailGroup, { name: "Resource", children: resourceAttributeGroups.map((group) => jsxRuntimeExports.jsx(reactExports.Fragment, { children: group.attributes.map(({ key, value }) => jsxRuntimeExports.jsx(DetailLine, { name: key, value }, key)) }, group.prefix)) }) : null, selected.isInstrumentationHint ? null : jsxRuntimeExports.jsxs(DetailGroup, { name: "Library", children: [jsxRuntimeExports.jsx(DetailLine, { name: "name", value: span.library.name }), span.library.version ? jsxRuntimeExports.jsx(DetailLine, { name: "version", value: span.library.version }) : null] })] });
-};
-function SpanDetailPanel({ attached = false }) {
-  const { state: { selected, isMobile }, dispatch } = useTraceViewer();
-  const customPanelComponent = useCustomPanelComponent();
-  if (!selected)
-    return null;
-  const { span } = selected;
-  return jsxRuntimeExports.jsxs("div", { className: clsx(styles.spanDetailPanel, isMobile && styles.mobile), children: [attached && !isMobile ? jsxRuntimeExports.jsx(PanelResizer, {}) : null, jsxRuntimeExports.jsx("div", { className: styles.spanDetailPanelTop, children: jsxRuntimeExports.jsxs("div", { className: styles.spanDetailPanelTopInfo, children: [jsxRuntimeExports.jsx("span", { className: styles.spanDetailPanelName, title: span.name, children: span.name }), jsxRuntimeExports.jsxs("div", { className: styles.spanDetailPanelCorner, children: [selected.isInstrumentationHint ? null : jsxRuntimeExports.jsx("span", { className: styles.spanDetailPanelDuration, children: formatDuration(selected.duration) }), jsxRuntimeExports.jsx("div", { className: styles.spanDetailPanelCloseVerticalRule }), jsxRuntimeExports.jsx("button", { "aria-label": "Close Span Details", className: styles.spanDetailPanelClose, onClick: () => dispatch({
-    type: "deselect"
-  }), type: "button", children: jsxRuntimeExports.jsx(IconCross, { color: "gray-700", size: 20 }) })] })] }) }), jsxRuntimeExports.jsx("div", { className: clsx("flex gap-3", styles.spanDetailPanelBody), children: customPanelComponent || jsxRuntimeExports.jsx(SpanDetailPanelBody, {}) })] });
-}
 const EXPANDED_STORAGE_KEY_PREFIX = "vc-trace-span-exp:";
 function DetailGroup({ name: name2, className = "", children: children2 }) {
   const [isExpanded, setIsExpanded] = reactExports.useState(() => {
@@ -45106,77 +44743,7 @@ function DetailGroup({ name: name2, className = "", children: children2 }) {
   }, [name2]);
   return jsxRuntimeExports.jsxs("div", { className: clsx(styles.detailGroup, isExpanded ? styles.expanded : styles.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
 }
-const CommonHttpVerbs = /* @__PURE__ */ new Set([
-  "OPTIONS",
-  "HEAD",
-  "GET",
-  "PUT",
-  "POST",
-  "DELETE"
-]);
-const KnownSpans = {
-  "Resolve Deployment": `How long it took Vercel's routing layer to retrieve details for the deployment.`,
-  "Resolve Cache": `How long it took Vercel's routing layer to check for a cached function invocation.`,
-  "Resolve Route": `How long it took Vercel's routing layer to resolve routing rules, including redirects and rewrites.`,
-  "Invoke Middleware": `How long it took this middleware to start and run user code.`,
-  "Invoke Function": `How long it took this Vercel Function to start and run user code.`,
-  waitUntil: `How long it took to run user code inside of waitUntil.`,
-  "Start VM": `How long it took to start the Virtual Machine which contains the Vercel Function.`,
-  "Spawn Node.js": `How long it took the Virtual Machine to start the Node.js runtime.`,
-  "Spawn Python": `How long it took the Virtual Machine to start the Python runtime.`,
-  "Init User Code": `How long it took to import the user code and run any globally-scoped code.`
-};
-const ColdStartSpanNames = /* @__PURE__ */ new Set([
-  "Start VM",
-  "Spawn Node.js",
-  "Spawn Python",
-  "Init User Code"
-]);
-const getRegion = (node2) => {
-  if (!node2 || !("span" in node2)) {
-    return null;
-  }
-  const attr = node2.span.attributes;
-  const region = attr["vercel.region"] || attr["vercel.function.region"];
-  if (region)
-    return String(region);
-  return null;
-};
-const getNote = (node2) => {
-  const { name: name2 } = node2.span;
-  const region = getRegion(node2);
-  const parentRegion = getRegion(node2.parent);
-  if (node2.span.attributes["vercel.middleware.internal"] === "true") {
-    return "The Vercel Toolbar created this middleware.";
-  } else if (ColdStartSpanNames.has(name2) || name2 === "Invoke Function" && node2.children.some((x2) => ColdStartSpanNames.has(x2.span.name))) {
-    return "This function encountered a cold start.";
-  } else if (region && parentRegion && region !== parentRegion) {
-    return "This request was routed across regions.";
-  }
-  return null;
-};
-const detectIsEntrySpan = (node2) => {
-  if (!node2.isVercel)
-    return false;
-  const { name: name2 } = node2.span;
-  const spaceIndex = name2.indexOf(" ");
-  if (spaceIndex === -1)
-    return false;
-  const firstWord = name2.substring(0, spaceIndex);
-  return CommonHttpVerbs.has(firstWord);
-};
-function InfraSpanDescription({ node: node2 }) {
-  const { name: name2 } = node2.span;
-  let description = KnownSpans[name2];
-  if (!description && detectIsEntrySpan(node2)) {
-    description = `How long it took for Vercel to process the request and send the response.`;
-  }
-  if (!description)
-    return null;
-  const note2 = getNote(node2);
-  return jsxRuntimeExports.jsx(DetailGroup, { name: "What is this?", children: jsxRuntimeExports.jsxs("div", { className: styles.infraSpanDescription, children: [jsxRuntimeExports.jsx("span", { children: description }), note2 ? jsxRuntimeExports.jsx(Note, { children: note2 }) : note2] }) });
-}
-const EntrySpanLinks = reactExports.memo(function EntrySpanLinks2({ getQuickLinks, span }) {
+reactExports.memo(function EntrySpanLinks({ getQuickLinks, span }) {
   const links = getQuickLinks(span);
   if (!links.length)
     return null;
@@ -45200,70 +44767,6 @@ function EntrySpanLink({ name: name2, link: linkPromise }) {
   const link2 = usePromise(linkPromise);
   return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles.spanDetailPanelAttribute, styles.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles.spanDetailPanelAttributeValue, styles.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton, { height: 18, rounded: true, width: 18 })] }) })] });
 }
-function InstrumentationHint() {
-  return jsxRuntimeExports.jsx(DetailGroup, { name: "What is this?", children: jsxRuntimeExports.jsxs("div", { className: styles.infraSpanDescription, children: [jsxRuntimeExports.jsx("span", { children: `You can visualize your application's spans alongside Vercel's spans in this viewer.` }), jsxRuntimeExports.jsx(ButtonLink, { href: "https://vercel.com/docs/session-tracing#adding-custom-spans", size: "small", target: "_blank", children: "Get Started" })] }) });
-}
-function DetailLine({ name: name2, value }) {
-  return jsxRuntimeExports.jsxs("dl", { className: styles.spanDetailPanelAttribute, children: [jsxRuntimeExports.jsx("dt", { className: styles.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("dd", { className: styles.spanDetailPanelAttributeValue, title: String(value), children: String(value) })] });
-}
-function PanelResizer() {
-  const { state: { panelWidth }, dispatch } = useTraceViewer();
-  const gestureRef = reactExports.useRef({
-    start: {
-      x: 0,
-      width: panelWidth
-    },
-    x: 0,
-    width: panelWidth,
-    isHeld: false
-  });
-  gestureRef.current.width = panelWidth;
-  const onPointerDown = reactExports.useCallback((event) => {
-    if (event.pointerType !== "mouse")
-      return;
-    event.preventDefault();
-    const g2 = gestureRef.current;
-    g2.start.x = event.clientX;
-    g2.x = event.clientX;
-    g2.start.width = g2.width;
-    g2.isHeld = true;
-  }, []);
-  const onDoubleClick = reactExports.useCallback(() => {
-    dispatch({
-      type: "setPanelWidth",
-      width: initialState.panelWidth
-    });
-  }, [dispatch]);
-  reactExports.useEffect(() => {
-    let nextFrame = 0;
-    const onFrame = () => {
-      const g2 = gestureRef.current;
-      const width = g2.start.width + g2.start.x - g2.x;
-      dispatch({
-        type: "setPanelWidth",
-        width
-      });
-    };
-    const onPointerMove = (event) => {
-      if (!gestureRef.current.isHeld)
-        return;
-      event.preventDefault();
-      gestureRef.current.x = event.clientX;
-      cancelAnimationFrame(nextFrame);
-      nextFrame = requestAnimationFrame(onFrame);
-    };
-    const onPointerUp = () => {
-      gestureRef.current.isHeld = false;
-    };
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp);
-    return () => {
-      window.removeEventListener("pointermove", onPointerMove);
-      window.removeEventListener("pointerup", onPointerUp);
-    };
-  }, [dispatch]);
-  return jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: styles.spanDetailPanelResizer, onDoubleClick, onPointerDown });
-}
 function useImmediateStyle(ref) {
   const styleRef = reactExports.useRef({});
   const setStyle = reactExports.useCallback((propertyName, value) => {
@@ -45298,7 +44801,7 @@ const useDpi = () => {
   return dpi;
 };
 const padding = TIMELINE_PADDING;
-const MiniMap = reactExports.memo(function MiniMap2({ timelineRef, rows, scale }) {
+reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
   const { state: { root: root2, baseScale, timelineWidth, width: fullWidth, scrollbarWidth } } = useTraceViewer();
   const mapWidth = fullWidth + TIMELINE_PADDING * 2;
   const dpi = useDpi();
@@ -45431,30 +44934,19 @@ const MiniMap = reactExports.memo(function MiniMap2({ timelineRef, rows, scale }
     height: MAP_HEIGHT - 4
   } })] });
 });
-function deserializeChunkText(text2) {
-  try {
-    const parsed = JSON.parse(text2);
-    if (typeof parsed === "string") {
-      return parsed;
-    }
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return text2;
-  }
+const SidebarDataContext = reactExports.createContext(null);
+SidebarDataContext.displayName = "SidebarDataContext";
+function SidebarDataProvider({ value, children: children2 }) {
+  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
 }
-function parseChunkData(text2) {
-  try {
-    return JSON.parse(text2);
-  } catch {
-    return text2;
-  }
+function useSidebarDataOptional() {
+  return reactExports.useContext(SidebarDataContext);
 }
 const ChunkRow = ReactExports.memo(function ChunkRow2({ chunk, index: index2 }) {
-  const parsed = parseChunkData(chunk.text);
-  return jsxRuntimeExports.jsxs("div", { className: "text-[11px] rounded-md border p-3", style: {
+  return jsxRuntimeExports.jsx("div", { className: "text-[11px] rounded-md border p-3", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsxs("span", { className: "select-none mr-2", style: { color: "var(--ds-gray-500)" }, children: ["[", index2, "]"] }), typeof parsed === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: deserializeChunkText(parsed) }) : jsxRuntimeExports.jsx(DataInspector, { data: parsed, expandLevel: 1 })] });
+  }, children: jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [jsxRuntimeExports.jsxs("span", { className: "select-none pt-px", style: { color: "var(--ds-gray-500)" }, children: ["[", index2, "]"] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1", children: typeof chunk.value === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: chunk.value }) : jsxRuntimeExports.jsx(DataInspector, { data: chunk.value, expandLevel: 1 }) })] }) });
 });
 function StreamSkeleton() {
   return jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 animate-in fade-in", children: [jsxRuntimeExports.jsx(Skeleton$1, { style: { width: 120, height: 16, borderRadius: 4 } }), [1, 2, 3, 4].map((i) => jsxRuntimeExports.jsx(Skeleton$1, { style: { height: 56, borderRadius: 6 } }, i))] });
@@ -45485,6 +44977,501 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error, isLoading, o
     color: "var(--ds-gray-600)"
   }, children: isLive ? "Waiting for stream data..." : "Stream is empty" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: chunks.length, overscan: 10, endReached: () => onScrollEnd == null ? void 0 : onScrollEnd(), itemContent: (index2) => jsxRuntimeExports.jsx("div", { style: { paddingBottom: 8 }, children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2], index: index2 }) }), style: { flex: 1, minHeight: 0 } }) })] });
 }
+function computeRootBounds(spans) {
+  let minStart = Number.POSITIVE_INFINITY;
+  let maxEnd = Number.NEGATIVE_INFINITY;
+  for (const span of spans) {
+    const s2 = getHighResInMs(span.startTime);
+    const e = getHighResInMs(span.endTime);
+    if (s2 < minStart)
+      minStart = s2;
+    if (e > maxEnd)
+      maxEnd = e;
+  }
+  if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {
+    return { startTime: 0, endTime: 1, duration: 1 };
+  }
+  const duration2 = Math.max(maxEnd - minStart, 1);
+  return { startTime: minStart, endTime: maxEnd, duration: duration2 };
+}
+function buildTimeCompression(_spans, viewStart, viewEnd) {
+  const range = viewEnd - viewStart;
+  return {
+    isCompressed: false,
+    toVisual(time2) {
+      if (range <= 0)
+        return 0;
+      return Math.min(Math.max((time2 - viewStart) / range, 0), 1);
+    },
+    fromVisual(fraction) {
+      return viewStart + fraction * range;
+    }
+  };
+}
+const NICE_INTERVALS = [
+  1,
+  2,
+  5,
+  10,
+  20,
+  50,
+  100,
+  200,
+  500,
+  1e3,
+  2e3,
+  5e3,
+  1e4,
+  2e4,
+  5e4,
+  1e5,
+  2e5,
+  5e5,
+  1e6,
+  2e6,
+  5e6,
+  1e7,
+  2e7,
+  5e7,
+  1e8,
+  2e8,
+  5e8,
+  1e9,
+  2e9,
+  5e9
+];
+const MAX_MARKERS = 8;
+function pickInterval(viewDuration, maxTicks) {
+  for (const interval of NICE_INTERVALS) {
+    if (viewDuration / interval <= maxTicks)
+      return interval;
+  }
+  return NICE_INTERVALS[NICE_INTERVALS.length - 1];
+}
+function computeTimeMarkers(viewDuration, offset2) {
+  if (viewDuration <= 0)
+    return [];
+  const maxTicks = 6;
+  const interval = pickInterval(viewDuration, maxTicks);
+  const firstTick = Math.ceil(offset2 / interval) * interval;
+  const markers2 = [];
+  for (let t = firstTick; t <= offset2 + viewDuration; t += interval) {
+    const position2 = (t - offset2) / viewDuration;
+    if (position2 < -0.01 || position2 > 1.01)
+      continue;
+    markers2.push({
+      position: Math.min(Math.max(position2, 0), 1),
+      label: formatDuration(Math.abs(t), true)
+    });
+    if (markers2.length >= MAX_MARKERS)
+      break;
+  }
+  return markers2;
+}
+function computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart) {
+  const viewDuration = viewEnd - viewStart;
+  if (viewDuration <= 0)
+    return [];
+  const maxTicks = 6;
+  const interval = pickInterval(viewDuration, maxTicks);
+  const offset2 = viewStart - rootStart;
+  const firstTick = Math.ceil(offset2 / interval) * interval;
+  const markers2 = [];
+  for (let t = firstTick; t <= offset2 + viewDuration; t += interval) {
+    const absTime = rootStart + t;
+    const position2 = compression.toVisual(absTime);
+    if (position2 < -0.01 || position2 > 1.01)
+      continue;
+    markers2.push({
+      position: Math.min(Math.max(position2, 0), 1),
+      label: formatDuration(Math.abs(t), true)
+    });
+    if (markers2.length >= MAX_MARKERS)
+      break;
+  }
+  return markers2;
+}
+function computeSpanGaps(spans, compression) {
+  const gaps = [];
+  for (let i = 0; i < spans.length - 1; i++) {
+    const endTime = getHighResInMs(spans[i].endTime);
+    const startTime = getHighResInMs(spans[i + 1].startTime);
+    const gapMs = startTime - endTime;
+    if (gapMs <= 0)
+      continue;
+    const leftFrac = compression.toVisual(endTime);
+    const rightFrac = compression.toVisual(startTime);
+    if (rightFrac - leftFrac < 1e-3)
+      continue;
+    gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
+  }
+  return gaps;
+}
+const RESOURCE_COLORS = {
+  run: { bar: "var(--ds-blue-700)", errorBar: "var(--ds-red-700)" },
+  step: { bar: "var(--ds-green-700)", errorBar: "var(--ds-red-700)" },
+  hook: { bar: "var(--ds-amber-700)", errorBar: "var(--ds-red-700)" },
+  sleep: { bar: "var(--ds-purple-700)", errorBar: "var(--ds-red-700)" },
+  default: { bar: "var(--ds-gray-500)", errorBar: "var(--ds-red-700)" }
+};
+function getResourceColor(resource) {
+  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+}
+function clampFraction(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function timeToFraction(time2, spanStart, spanDuration2) {
+  if (spanDuration2 <= 0)
+    return 0;
+  return clampFraction((time2 - spanStart) / spanDuration2);
+}
+function sortedEventMarks(events, relevantNames) {
+  return events.filter((e) => relevantNames.includes(e.name)).map((e) => ({ time: getHighResInMs(e.timestamp), type: e.name })).sort((a2, b2) => a2.time - b2.time);
+}
+function computeStepSegmentsFromSpan(startMs, duration2, events) {
+  const segments = [];
+  if (duration2 <= 0)
+    return segments;
+  const marks = sortedEventMarks(events, [
+    "step_started",
+    "step_retrying",
+    "step_failed",
+    "step_completed"
+  ]);
+  if (marks.length === 0) {
+    segments.push({ startFraction: 0, endFraction: 1, status: "running" });
+    return segments;
+  }
+  const firstFraction = timeToFraction(marks[0].time, startMs, duration2);
+  if (firstFraction > 1e-3) {
+    segments.push({
+      startFraction: 0,
+      endFraction: firstFraction,
+      status: "queued"
+    });
+  }
+  for (let i = 0; i < marks.length; i++) {
+    const mark2 = marks[i];
+    const markFrac = timeToFraction(mark2.time, startMs, duration2);
+    const nextMark = marks[i + 1];
+    const nextFrac = nextMark ? timeToFraction(nextMark.time, startMs, duration2) : 1;
+    if (mark2.type === "step_started") {
+      if (i === marks.length - 1) {
+        segments.push({
+          startFraction: markFrac,
+          endFraction: 1,
+          status: "succeeded"
+        });
+      } else {
+        const nextType = nextMark.type;
+        const attemptStatus = nextType === "step_retrying" || nextType === "step_failed" ? "failed" : nextType === "step_completed" ? "succeeded" : "running";
+        segments.push({
+          startFraction: markFrac,
+          endFraction: nextFrac,
+          status: attemptStatus
+        });
+      }
+    } else if (mark2.type === "step_retrying") {
+      segments.push({
+        startFraction: markFrac,
+        endFraction: nextFrac,
+        status: "retrying"
+      });
+    } else if (mark2.type === "step_failed") {
+      if (markFrac < 0.999) {
+        segments.push({
+          startFraction: markFrac,
+          endFraction: 1,
+          status: "failed"
+        });
+      }
+    }
+  }
+  return segments;
+}
+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 disposedFrac = disposed ? timeToFraction(disposed.time, startMs, duration2) : null;
+  if (receivedFrac !== null && receivedFrac > 1e-3) {
+    segments.push({
+      startFraction: 0,
+      endFraction: receivedFrac,
+      status: "waiting"
+    });
+  } else if (receivedFrac === null && disposedFrac !== null) {
+    segments.push({
+      startFraction: 0,
+      endFraction: disposedFrac,
+      status: "waiting"
+    });
+  }
+  if (receivedFrac !== null) {
+    segments.push({
+      startFraction: receivedFrac,
+      endFraction: disposedFrac ?? 1,
+      status: "received"
+    });
+  }
+  if (disposedFrac !== null && disposedFrac < 0.999) {
+    segments.push({
+      startFraction: disposedFrac,
+      endFraction: 1,
+      status: "succeeded"
+    });
+  }
+  return segments;
+}
+function computeSleepSegmentsFromSpan(startMs, duration2, events) {
+  const segments = [];
+  if (duration2 <= 0)
+    return segments;
+  const completedTime = events.filter((e) => e.name === "wait_completed").map((e) => getHighResInMs(e.timestamp)).sort((a2, b2) => a2 - b2)[0];
+  if (completedTime === void 0) {
+    segments.push({ startFraction: 0, endFraction: 1, status: "sleeping" });
+    return segments;
+  }
+  const completedFrac = timeToFraction(completedTime, startMs, duration2);
+  if (completedFrac > 1e-3) {
+    segments.push({
+      startFraction: 0,
+      endFraction: completedFrac,
+      status: "sleeping"
+    });
+  }
+  segments.push({
+    startFraction: completedFrac,
+    endFraction: 1,
+    status: "succeeded"
+  });
+  return segments;
+}
+function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, attributes) {
+  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 hasRunCreated = sorted.some((e) => e.name === "run_created");
+  if (!hasRunCreated) {
+    const runData = attributes == null ? void 0 : attributes.data;
+    const runStatus = runData == null ? void 0 : runData.status;
+    return computeV1RunSegments(startMs, duration2, activeStartMs, runStatus);
+  }
+  const failedEvent = sorted.find((e) => e.name === "run_failed");
+  let cursor = 0;
+  if (activeStartMs !== void 0 && activeStartMs > startMs) {
+    const queuedFrac = timeToFraction(activeStartMs, startMs, duration2);
+    if (queuedFrac > 1e-3) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFrac,
+        status: "queued"
+      });
+      cursor = queuedFrac;
+    }
+  }
+  segments.push({
+    startFraction: cursor,
+    endFraction: 1,
+    status: failedEvent ? "failed" : "running"
+  });
+  return segments;
+}
+function computeV1RunSegments(startMs, duration2, activeStartMs, runStatus) {
+  const segments = [];
+  let cursor = 0;
+  if (activeStartMs !== void 0 && activeStartMs > startMs) {
+    const queuedFrac = timeToFraction(activeStartMs, startMs, duration2);
+    if (queuedFrac > 1e-3) {
+      segments.push({
+        startFraction: 0,
+        endFraction: queuedFrac,
+        status: "queued"
+      });
+      cursor = queuedFrac;
+    }
+  }
+  segments.push({
+    startFraction: cursor,
+    endFraction: 1,
+    status: runStatus === "failed" ? "failed" : "running"
+  });
+  return segments;
+}
+function computeSpanSegments(span) {
+  const startMs = getHighResInMs(span.startTime);
+  const endMs = getHighResInMs(span.endTime);
+  const duration2 = endMs - startMs;
+  const activeStartMs = span.activeStartTime ? getHighResInMs(span.activeStartTime) : void 0;
+  switch (span.resource) {
+    case "step":
+      return computeStepSegmentsFromSpan(startMs, duration2, span.events);
+    case "hook":
+      return computeHookSegmentsFromSpan(startMs, duration2, span.events);
+    case "sleep":
+      return computeSleepSegmentsFromSpan(startMs, duration2, span.events);
+    case "run":
+      return computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, span.events, span.attributes);
+    default:
+      return [];
+  }
+}
+const QUEUED_BACKGROUND = "radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)";
+const HATCHED_BACKGROUND = "repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)";
+const SEGMENT_CONFIG = {
+  queued: { style: { background: QUEUED_BACKGROUND } },
+  retrying: {
+    className: "box-border bg-gray-500"
+  },
+  waiting: { style: { background: HATCHED_BACKGROUND } },
+  running: { className: "bg-blue-700" },
+  failed: { className: "bg-red-700" },
+  succeeded: { className: "bg-green-700" },
+  sleeping: { className: "bg-amber-700" },
+  received: { className: "bg-blue-700" }
+};
+const FIXED_BAR_WIDTH_PX = 4;
+const SEGMENT_GAP_PX = 1;
+const ROW_HEIGHT = 34;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, rightFrac, label, rowIndex }) {
+  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+  return jsxRuntimeExports.jsxs("div", { className: "absolute pointer-events-none", style: {
+    left: `${leftFrac * 100}%`,
+    width: `${(rightFrac - leftFrac) * 100}%`,
+    top: centerY - END_CAP_HEIGHT / 2,
+    height: END_CAP_HEIGHT
+  }, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), jsxRuntimeExports.jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), jsxRuntimeExports.jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), jsxRuntimeExports.jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] });
+});
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, compression, containerWidth, isSelected, onClick }) {
+  var _a3;
+  const startTime = getHighResInMs(span.startTime);
+  const endTime = getHighResInMs(span.endTime);
+  const totalDurationMs = endTime - startTime;
+  const leftFrac = compression.toVisual(startTime);
+  const rightFrac = compression.toVisual(endTime);
+  const widthFrac = rightFrac - leftFrac;
+  const leftPct = leftFrac * 100;
+  const widthPct = widthFrac * 100;
+  const pixelWidth = widthFrac * containerWidth;
+  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const [isRowHovered, setIsRowHovered] = reactExports.useState(false);
+  const segments = reactExports.useMemo(() => computeSpanSegments(span), [span]);
+  const finalSegment = segments[segments.length - 1];
+  const workflowStatus = (_a3 = span.attributes.data) == null ? void 0 : _a3.status;
+  const isErrored = span.status.code === 2 || workflowStatus === "failed";
+  const colors = getResourceColor(span.resource);
+  const fallbackColor = isErrored ? colors.errorBar ?? "var(--ds-red-700)" : colors.bar;
+  const compressedSegmentStatus = isErrored ? "failed" : span.resource === "hook" ? "received" : finalSegment == null ? void 0 : finalSegment.status;
+  const compressedSegmentStyle = compressedSegmentStatus === "queued" ? { background: "var(--ds-gray-500)" } : compressedSegmentStatus ? SEGMENT_CONFIG[compressedSegmentStatus].style : void 0;
+  const compressedSegmentClassName = compressedSegmentStatus ? SEGMENT_CONFIG[compressedSegmentStatus].className : void 0;
+  const hasCompressedStatus = Boolean(compressedSegmentClassName || compressedSegmentStyle);
+  const renderDurationLabel = (label) => 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-white tabular-nums", style: { textShadow: "0 1px 1px rgba(0, 0, 0, 0.45)" }, children: label });
+  const getMinDurationLabelWidthPx = (label) => Math.max(40, label.length * 6 + 12);
+  const totalDurationLabel = formatDuration(totalDurationMs);
+  const showBarDurationLabel = isRowHovered && pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
+  const barContent = isCompressed ? jsxRuntimeExports.jsx("div", { className: cn$4("relative h-4 rounded-[0.25rem] top-[3px]", compressedSegmentClassName), style: {
+    width: "100%",
+    background: hasCompressedStatus ? void 0 : fallbackColor,
+    ...compressedSegmentStyle
+  }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null }) : segments.length > 0 ? jsxRuntimeExports.jsx("div", { className: "relative w-full h-4 top-[3px]", children: segments.map((seg, i) => {
+    const segPixelWidth = (seg.endFraction - seg.startFraction) * pixelWidth;
+    const segDurationLabel = formatDuration((seg.endFraction - seg.startFraction) * totalDurationMs);
+    const showSegmentDurationLabel = isRowHovered && segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
+    const segStyle = seg.status === "queued" && segPixelWidth < 20 ? { background: "var(--ds-gray-500)" } : SEGMENT_CONFIG[seg.status].style;
+    return jsxRuntimeExports.jsx("div", { className: cn$4("absolute h-full rounded-[0.25rem]", SEGMENT_CONFIG[seg.status].className), style: {
+      left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
+      width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+      minWidth: 1,
+      ...segStyle
+    }, children: showSegmentDurationLabel ? renderDurationLabel(segDurationLabel) : null }, `${seg.status}-${i}`);
+  }) }) : jsxRuntimeExports.jsx("div", { className: "relative h-4 rounded-[0.25rem] top-[3px]", style: {
+    width: "100%",
+    minWidth: 4,
+    background: fallbackColor
+  }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null });
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200"), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1.5 h-[22px] rounded-sm", style: {
+    left: isCompressed ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))` : `${leftPct}%`,
+    width: isCompressed ? `${FIXED_BAR_WIDTH_PX}px` : `max(${widthPct}%, 4px)`
+  }, children: barContent }) });
+});
+function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo: hoverInfo2 }) {
+  const viewEnd = viewStart + viewDuration;
+  const markers2 = reactExports.useMemo(() => compression.isCompressed ? computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart) : computeTimeMarkers(viewDuration, viewStart - rootStart), [compression, viewStart, viewEnd, viewDuration, rootStart]);
+  return jsxRuntimeExports.jsxs("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1", children: [jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2, i) => 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 }, i)), 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 })] }), isZoomed && jsxRuntimeExports.jsx("button", { type: "button", className: "absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600", onClick: onResetZoom, children: "Reset zoom" })] });
+}
+function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld = false }) {
+  const containerRef = reactExports.useRef(null);
+  const [containerWidth, setContainerWidth] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const ro2 = new ResizeObserver(([entry]) => {
+      setContainerWidth(entry.contentRect.width);
+    });
+    ro2.observe(el);
+    return () => ro2.disconnect();
+  }, []);
+  const gaps = reactExports.useMemo(() => computeSpanGaps(spans, compression), [spans, compression]);
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative py-2", children: [hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10", style: { left: `${hoverFraction * 100}%` } }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, compression, containerWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-0 pointer-events-none", 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";
+function ActiveSpanProvider({ spans, children: children2 }) {
+  var _a3;
+  const [activeSpanId, setActiveSpanId] = reactExports.useState(((_a3 = spans[0]) == null ? void 0 : _a3.spanId) ?? null);
+  reactExports.useEffect(() => {
+    setActiveSpanId((currentSpanId) => {
+      if (spans.length === 0) {
+        return null;
+      }
+      if (currentSpanId) {
+        const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
+        if (hasCurrentSpan) {
+          return currentSpanId;
+        }
+      }
+      return spans[0].spanId;
+    });
+  }, [spans]);
+  const activeSpan = reactExports.useMemo(() => {
+    if (!activeSpanId) {
+      return null;
+    }
+    return spans.find((span) => span.spanId === activeSpanId) ?? null;
+  }, [activeSpanId, spans]);
+  const setActiveSpan = reactExports.useCallback((spanId) => {
+    setActiveSpanId(spanId);
+  }, []);
+  const clearActiveSpan = reactExports.useCallback(() => {
+    setActiveSpanId(null);
+  }, []);
+  const value = reactExports.useMemo(() => ({
+    activeSpanId,
+    activeSpan,
+    setActiveSpan,
+    clearActiveSpan
+  }), [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]);
+  return jsxRuntimeExports.jsx(ActiveSpanContext.Provider, { value, children: children2 });
+}
+const useActiveSpan = () => {
+  const context = reactExports.useContext(ActiveSpanContext);
+  if (!context) {
+    throw new Error("useActiveSpan must be used within ActiveSpanProvider");
+  }
+  return context;
+};
 const DEFAULT_PAGE_SIZE = 10;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -48061,58 +48048,47 @@ export {
   Lock as a3,
   EVENT_DATA_REF_FIELDS as a4,
   clsx as a5,
-  useTraceViewer as a6,
-  styles as a7,
-  formatDurationForTimeline as a8,
-  formatWallClockTime as a9,
-  hydrateData as aA,
-  getWebRevivers as aB,
-  LIVE_UPDATE_INTERVAL_MS as aC,
-  fetchEvent as aD,
-  getEncryptionKeyForRun as aE,
-  StreamViewer as aF,
-  cn$4 as aG,
-  composeRefs as aH,
-  useFloating as aI,
-  offset as aJ,
-  shift as aK,
-  limitShift as aL,
-  flip as aM,
-  size as aN,
-  arrow as aO,
-  hide as aP,
-  autoUpdate as aQ,
-  cancelRun as aR,
-  reenqueueRun as aS,
-  wakeUpRun as aT,
-  resumeHook as aU,
-  recreateRun as aV,
-  useImmediateStyle as aa,
-  TIMELINE_PADDING as ab,
-  formatTimeSelection as ac,
-  MARKER_HEIGHT as ad,
-  ROW_HEIGHT as ae,
-  ROW_PADDING as af,
-  SEARCH_HEIGHT as ag,
-  getHighResInMs as ah,
-  getMsInHighRes as ai,
-  MARKER_NOTCH_HEIGHT as aj,
-  MAP_HEIGHT as ak,
-  SEARCH_GAP as al,
-  MiniMap as am,
-  SpanNodes as an,
-  SpanDetailPanel as ao,
-  TraceViewerContextProvider as ap,
-  hydrateResourceIOWithKey as aq,
-  hydrateResourceIO as ar,
-  fetchHook as as,
-  fetchStep as at,
-  hasEncryptedFields as au,
-  fetchStreams as av,
-  Slot as aw,
-  Slottable as ax,
-  buttonVariants as ay,
-  isEncryptedData as az,
+  cn$4 as a6,
+  getHighResInMs as a7,
+  ActiveSpanProvider as a8,
+  useActiveSpan as a9,
+  limitShift as aA,
+  flip as aB,
+  size as aC,
+  arrow as aD,
+  hide as aE,
+  autoUpdate as aF,
+  cancelRun as aG,
+  reenqueueRun as aH,
+  wakeUpRun as aI,
+  resumeHook as aJ,
+  recreateRun as aK,
+  useSidebarDataOptional as aa,
+  computeRootBounds as ab,
+  buildTimeCompression as ac,
+  Timeline as ad,
+  TimelineHeader as ae,
+  SidebarDataProvider as af,
+  hydrateResourceIOWithKey as ag,
+  hydrateResourceIO as ah,
+  fetchHook as ai,
+  fetchStep as aj,
+  hasEncryptedFields as ak,
+  fetchStreams as al,
+  Slot as am,
+  Slottable as an,
+  buttonVariants as ao,
+  isEncryptedData as ap,
+  hydrateData as aq,
+  getWebRevivers as ar,
+  LIVE_UPDATE_INTERVAL_MS as as,
+  fetchEvent as at,
+  getEncryptionKeyForRun as au,
+  StreamViewer as av,
+  composeRefs as aw,
+  useFloating as ax,
+  offset as ay,
+  shift as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,