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

package/build/client/assets/{highlighted-body-B3W2YXNL-Be0uLJd8.js → highlighted-body-B3W2YXNL-B7T9pqeb.js}

@@ -1,4 +1,4 @@
-import { R, K as Ks, Q as Qe } from "./mermaid-3ZIDBTTL-BSJR0c5A.js";
+import { R, K as Ks, Q as Qe } from "./mermaid-3ZIDBTTL-w46Kr90n.js";
 import { r as reactExports, j as jsxRuntimeExports } from "./index-DQa-BExo.js";
 var L = ({ code: s, language: t, raw: e, className: n, ...d$1 }) => {
   let { shikiTheme: l } = reactExports.useContext(R), o = Ks(), [m, i] = reactExports.useState(e);

package/build/client/assets/{home-Ce97yLJ7.js → home-BIQJMe_Q.js}

@@ -1,6 +1,6 @@
 import { r as reactExports, C as ReactDOM, j as jsxRuntimeExports, z as Link, f as reactDomExports, B as useSearchParams, A as useNavigate, D as useLocation, w as withComponentProps } from "./index-DQa-BExo.js";
-import { R as ResolveHookModal, S as Send, a as Skeleton, u as unwrapOrThrow, W as WorkflowWebAPIError, b as RelativeTime, A as Alert, C as CircleAlert, c as AlertTitle, d as AlertDescription, g as getErrorMessage, e as CopyableText, D as DropdownMenu, f as DropdownMenuTrigger, E as Ellipsis, h as DropdownMenuContent, i as DropdownMenuItem, j as ChevronRight, r as resumeHook, k as createCollection, l as hideOthers, m as ReactRemoveScroll, n as useDirection, o as ChevronDown, p as Check, X, q as useControllableState$1, P as Primitive$1, s as composeEventHandlers$1, t as Presence, v as useSize, w as createContextScope$1, x as cancelRun, y as reenqueueRun, z as parseWorkflowName, B as StatusBadge, Z as Zap, F as CircleX, G as RunActionsDropdownItems, H as unwrapServerActionResult, I as WorkflowGraphViewer, T as Tabs, J as TabsList, K as TabsTrigger, L as TabsContent, M as ErrorBoundary } from "./workflow-graph-viewer-DYhMo9jl.js";
-import { g as useLayoutEffect2, P as Primitive, c as createLucideIcon, h as useToast, d as cn, D as DEFAULT_PAGE_SIZE, i as fetchRuns, j as fetchHooks, k as getPaginationDisplay, T as Tooltip, a as TooltipTrigger, B as Button, b as TooltipContent, l as fetchEvents, m as useCallbackRef, n as useComposedRefs, A as Anchor, o as composeEventHandlers, p as useId, q as createPopperScope, s as DismissableLayer, v as createContextScope, w as createSlot, C as Content$1, x as useControllableState, y as Root2$1, V as VISUALLY_HIDDEN_STYLES, z as Arrow, E as useComposedRefs$1, u as useServerConfig, t as toast, L as LoaderCircle, F as fetchRun, G as cva, H as Presence$1, I as createContext2, J as fetchWorkflowsManifest } from "./mermaid-3ZIDBTTL-BSJR0c5A.js";
+import { R as ResolveHookModal, S as Send, a as Skeleton, u as unwrapOrThrow, W as WorkflowWebAPIError, b as RelativeTime, A as Alert, C as CircleAlert, c as AlertTitle, d as AlertDescription, g as getErrorMessage, e as CopyableText, D as DropdownMenu, f as DropdownMenuTrigger, E as Ellipsis, h as DropdownMenuContent, i as DropdownMenuItem, j as ChevronRight, r as resumeHook, k as createCollection, l as hideOthers, m as ReactRemoveScroll, n as useDirection, o as ChevronDown, p as Check, X, q as useControllableState$1, P as Primitive$1, s as composeEventHandlers$1, t as Presence, v as useSize, w as createContextScope$1, x as cancelRun, y as reenqueueRun, z as parseWorkflowName, B as StatusBadge, Z as Zap, F as CircleX, G as RunActionsDropdownItems, H as unwrapServerActionResult, I as WorkflowGraphViewer, T as Tabs, J as TabsList, K as TabsTrigger, L as TabsContent, M as ErrorBoundary } from "./workflow-graph-viewer-De9JQkZc.js";
+import { g as useLayoutEffect2, P as Primitive, c as createLucideIcon, h as useToast, d as cn, D as DEFAULT_PAGE_SIZE, i as fetchRuns, j as fetchHooks, k as getPaginationDisplay, T as Tooltip, a as TooltipTrigger, B as Button, b as TooltipContent, l as fetchEvents, m as useCallbackRef, n as useComposedRefs, A as Anchor, o as composeEventHandlers, p as useId, q as createPopperScope, s as DismissableLayer, v as createContextScope, w as createSlot, C as Content$1, x as useControllableState, y as Root2$1, V as VISUALLY_HIDDEN_STYLES, z as Arrow, E as useComposedRefs$1, u as useServerConfig, t as toast, L as LoaderCircle, F as fetchRun, G as cva, H as Presence$1, I as createContext2, J as fetchWorkflowsManifest } from "./mermaid-3ZIDBTTL-w46Kr90n.js";
 var PORTAL_NAME$2 = "Portal";
 var Portal$2 = reactExports.forwardRef((props, forwardedRef) => {
   var _a;

package/build/client/assets/{manifest-923d96a0.js → manifest-77894282.js}

@@ -1 +1 @@
-window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-BWsSsWQm.js","imports":["/assets/index-DQa-BExo.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-DdOfCnSG.js","imports":["/assets/index-DQa-BExo.js","/assets/mermaid-3ZIDBTTL-BSJR0c5A.js"],"css":["/assets/root-DXDFWibD.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/home":{"id":"routes/home","parentId":"root","index":true,"hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/home-Ce97yLJ7.js","imports":["/assets/index-DQa-BExo.js","/assets/workflow-graph-viewer-DYhMo9jl.js","/assets/mermaid-3ZIDBTTL-BSJR0c5A.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/run-detail":{"id":"routes/run-detail","parentId":"root","path":"run/:runId","hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/run-detail-JQ32aJru.js","imports":["/assets/index-DQa-BExo.js","/assets/workflow-graph-viewer-DYhMo9jl.js","/assets/mermaid-3ZIDBTTL-BSJR0c5A.js","/assets/encryption-80GMP4r0.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/api.rpc":{"id":"routes/api.rpc","parentId":"root","path":"api/rpc","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.rpc-l0sNRNKZ.js","imports":[],"css":[]},"routes/api.stream.$streamId":{"id":"routes/api.stream.$streamId","parentId":"root","path":"api/stream/:streamId","hasAction":false,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.stream._streamId-l0sNRNKZ.js","imports":[],"css":[]}},"url":"/assets/manifest-923d96a0.js","version":"923d96a0"};
+window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-BWsSsWQm.js","imports":["/assets/index-DQa-BExo.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-sXuXrryl.js","imports":["/assets/index-DQa-BExo.js","/assets/mermaid-3ZIDBTTL-w46Kr90n.js"],"css":["/assets/root-C0Tu5TVN.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/home":{"id":"routes/home","parentId":"root","index":true,"hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/home-BIQJMe_Q.js","imports":["/assets/index-DQa-BExo.js","/assets/workflow-graph-viewer-De9JQkZc.js","/assets/mermaid-3ZIDBTTL-w46Kr90n.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/run-detail":{"id":"routes/run-detail","parentId":"root","path":"run/:runId","hasAction":false,"hasLoader":false,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":false,"module":"/assets/run-detail-7Pj2mQLs.js","imports":["/assets/index-DQa-BExo.js","/assets/workflow-graph-viewer-De9JQkZc.js","/assets/mermaid-3ZIDBTTL-w46Kr90n.js","/assets/encryption-80GMP4r0.js"],"css":["/assets/workflow-graph-viewer-DnlNuQQH.css","/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"]},"routes/api.rpc":{"id":"routes/api.rpc","parentId":"root","path":"api/rpc","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.rpc-l0sNRNKZ.js","imports":[],"css":[]},"routes/api.stream.$streamId":{"id":"routes/api.stream.$streamId","parentId":"root","path":"api/stream/:streamId","hasAction":false,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":false,"hasErrorBoundary":false,"module":"/assets/api.stream._streamId-l0sNRNKZ.js","imports":[],"css":[]}},"url":"/assets/manifest-77894282.js","version":"77894282"};

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

@@ -1,4 +1,4 @@
-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]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/highlighted-body-B3W2YXNL-B7T9pqeb.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);
@@ -6673,6 +6673,28 @@ const createLucideIcon = (iconName, iconNode) => {
   Component.displayName = toPascalCase(iconName);
   return Component;
 };
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
+  ["path", { d: "M19 12H5", key: "x3x0zl" }]
+];
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$3);
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+];
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$2);
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -6695,10 +6717,6 @@ const Lock = createLucideIcon("lock", __iconNode);
 function cn$4(...inputs) {
   return twMerge(clsx(inputs));
 }
-const secondsFormatter = new Intl.NumberFormat(void 0, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2
-});
 const MS_IN_SECOND = 1e3;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -6707,23 +6725,28 @@ function formatDuration(ms, compact = false) {
   if (ms === 0) {
     return "0s";
   }
-  if (ms < MS_IN_MINUTE) {
-    return `${secondsFormatter.format(ms / MS_IN_SECOND)}s`;
+  if (ms < MS_IN_SECOND) {
+    const roundedMs2 = Math.round(ms);
+    return roundedMs2 < MS_IN_SECOND ? `${roundedMs2}ms` : "1s";
+  }
+  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
   }
   if (compact) {
-    if (ms < MS_IN_HOUR) {
-      const m3 = Math.floor(ms / MS_IN_MINUTE);
-      const s2 = Math.floor(ms % MS_IN_MINUTE / MS_IN_SECOND);
+    if (roundedMs < MS_IN_HOUR) {
+      const m3 = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s2 = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
       return s2 > 0 ? `${m3}m ${s2}s` : `${m3}m`;
     }
-    const h2 = Math.floor(ms / MS_IN_HOUR);
-    const m2 = Math.floor(ms % MS_IN_HOUR / MS_IN_MINUTE);
+    const h2 = Math.floor(roundedMs / MS_IN_HOUR);
+    const m2 = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
     return m2 > 0 ? `${h2}h ${m2}m` : `${h2}h`;
   }
-  const days = Math.floor(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 = ms % MS_IN_MINUTE / MS_IN_SECOND;
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor(roundedMs % MS_IN_DAY / MS_IN_HOUR);
+  const minutes = Math.floor(roundedMs % MS_IN_HOUR / MS_IN_MINUTE);
+  const seconds = Math.floor(roundedMs % MS_IN_MINUTE / MS_IN_SECOND);
   const parts = [];
   if (days > 0) {
     parts.push(`${days}d`);
@@ -6734,7 +6757,7 @@ function formatDuration(ms, compact = false) {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  parts.push(`${secondsFormatter.format(seconds)}s`);
+  parts.push(`${seconds}s`);
   return parts.join(" ");
 }
 function isDoStreamStep(stepName) {
@@ -42941,7 +42964,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-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 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-B7T9pqeb.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 }) })] }) });
@@ -44994,19 +45017,8 @@ function computeRootBounds(spans) {
   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;
-    }
-  };
+function getSpanDurationMs(span) {
+  return Math.max(0, getHighResInMs(span.endTime) - getHighResInMs(span.startTime));
 }
 const NICE_INTERVALS = [
   1,
@@ -45061,37 +45073,18 @@ function computeTimeMarkers(viewDuration, offset2) {
       continue;
     markers2.push({
       position: Math.min(Math.max(position2, 0), 1),
-      label: formatDuration(Math.abs(t), true)
+      label: formatDuration(Math.abs(t), true),
+      value: t
     });
     if (markers2.length >= MAX_MARKERS)
       break;
   }
   return markers2;
 }
-function computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart) {
-  const viewDuration = viewEnd - viewStart;
-  if (viewDuration <= 0)
+function computeSpanGaps(spans, viewStart, viewEnd) {
+  const range = viewEnd - viewStart;
+  if (range <= 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);
@@ -45099,8 +45092,8 @@ function computeSpanGaps(spans, compression) {
     const gapMs = startTime - endTime;
     if (gapMs <= 0)
       continue;
-    const leftFrac = compression.toVisual(endTime);
-    const rightFrac = compression.toVisual(startTime);
+    const leftFrac = Math.min(Math.max((endTime - viewStart) / range, 0), 1);
+    const rightFrac = Math.min(Math.max((startTime - viewStart) / range, 0), 1);
     if (rightFrac - leftFrac < 1e-3)
       continue;
     gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
@@ -45231,29 +45224,10 @@ function computeHookSegmentsFromSpan(startMs, duration2, events) {
   }
   return segments;
 }
-function computeSleepSegmentsFromSpan(startMs, duration2, events) {
-  const segments = [];
+function computeSleepSegmentsFromSpan(_startMs, duration2, _events) {
   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;
+    return [];
+  return [{ startFraction: 0, endFraction: 1, status: "sleeping" }];
 }
 function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, attributes) {
   const segments = [];
@@ -45309,8 +45283,7 @@ function computeV1RunSegments(startMs, duration2, activeStartMs, runStatus) {
 }
 function computeSpanSegments(span) {
   const startMs = getHighResInMs(span.startTime);
-  const endMs = getHighResInMs(span.endTime);
-  const duration2 = endMs - startMs;
+  const duration2 = getSpanDurationMs(span);
   const activeStartMs = span.activeStartTime ? getHighResInMs(span.activeStartTime) : void 0;
   switch (span.resource) {
     case "step":
@@ -45325,25 +45298,27 @@ function computeSpanSegments(span) {
       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 } },
+  queued: { className: "bg-gray-500" },
   retrying: {
     className: "box-border bg-gray-500"
   },
-  waiting: { style: { background: HATCHED_BACKGROUND } },
+  waiting: { className: "bg-gray-500" },
   running: { className: "bg-blue-700" },
   failed: { className: "bg-red-700" },
   succeeded: { className: "bg-green-700" },
-  sleeping: { className: "bg-amber-700" },
+  sleeping: { className: "bg-gray-500" },
   received: { className: "bg-blue-700" }
 };
-const FIXED_BAR_WIDTH_PX = 4;
+const BAR_HEIGHT_PX = 24;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
-const ROW_HEIGHT = 34;
+const ROW_HEIGHT = 40;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
+const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 1e-6;
 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: {
@@ -45353,38 +45328,34 @@ const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, ri
     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 }) {
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, 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 totalDurationMs = getSpanDurationMs(span);
+  const leftFracRaw = viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+  const rightFracRaw = viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+  const widthFrac = rightFracRaw - leftFracRaw;
+  const leftPct = leftFracRaw * 100;
   const widthPct = widthFrac * 100;
   const pixelWidth = widthFrac * containerWidth;
-  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+  const visiblePixelWidth = Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+  const isTinyBar = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_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 showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+  const barContent = showBoundaryArrow ? jsxRuntimeExports.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: jsxRuntimeExports.jsx(BoundaryArrow, { className: "size-3 text-gray-900" }) }) : isTinyBar ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem]", style: { background: fallbackColor } }) : segments.length > 0 ? jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full", 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);
@@ -45395,24 +45366,28 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, compression,
       minWidth: 1,
       ...segStyle
     }, children: showSegmentDurationLabel ? renderDurationLabel(segDurationLabel) : null }, `${seg.status}-${i}`);
-  }) }) : jsxRuntimeExports.jsx("div", { className: "relative h-4 rounded-[0.25rem] top-[3px]", style: {
+  }) }) : jsxRuntimeExports.jsx("div", { className: "relative h-6 rounded-[0.25rem]", 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 }) });
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200"), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: {
+    left: TIMELINE_PADDING_PX,
+    right: TIMELINE_PADDING_PX
+  }, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 -translate-y-1/2", style: {
+    left: showBoundaryArrow ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))` : isTinyBar ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))` : `${leftPct}%`,
+    width: showBoundaryArrow ? `${TINY_BAR_BOX_SIZE_PX}px` : isTinyBar ? `${TINY_BAR_WIDTH_PX}px` : `max(${widthPct}%, 4px)`,
+    height: BAR_HEIGHT_PX
+  }, 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 TimelineHeader({ markers: markers2, hoverInfo: hoverInfo2 }) {
+  return jsxRuntimeExports.jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m2.position * 100}%` }, children: m2.label }, `${m2.position}-${m2.label}`)), hoverInfo2 && jsxRuntimeExports.jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo2.fraction * 100}%` }, children: hoverInfo2.label })] }) });
 }
-function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld = false }) {
+function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, onSelect, hoverFraction, altHeld = false }) {
   const containerRef = reactExports.useRef(null);
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
+  const viewDuration = viewEnd - viewStart;
+  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
   reactExports.useEffect(() => {
     const el = containerRef.current;
     if (!el)
@@ -45423,8 +45398,17 @@ function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, alt
     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 gaps = reactExports.useMemo(() => computeSpanGaps(spans, viewStart, viewEnd), [spans, viewStart, viewEnd]);
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+    left: TIMELINE_PADDING_PX,
+    right: TIMELINE_PADDING_PX
+  }, children: markers2.map((marker2) => Math.abs(marker2.value) > ORIGIN_MARKER_EPSILON ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, `${marker2.position}-${marker2.label}`) : null) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: {
+    left: TIMELINE_PADDING_PX,
+    right: TIMELINE_PADDING_PX
+  }, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+    left: TIMELINE_PADDING_PX,
+    right: TIMELINE_PADDING_PX
+  }, 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";
@@ -45433,16 +45417,14 @@ function ActiveSpanProvider({ spans, children: children2 }) {
   const [activeSpanId, setActiveSpanId] = reactExports.useState(((_a3 = spans[0]) == null ? void 0 : _a3.spanId) ?? null);
   reactExports.useEffect(() => {
     setActiveSpanId((currentSpanId) => {
-      if (spans.length === 0) {
+      if (!currentSpanId) {
         return null;
       }
-      if (currentSpanId) {
-        const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
-        if (hasCurrentSpan) {
-          return currentSpanId;
-        }
+      const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
+      if (hasCurrentSpan) {
+        return currentSpanId;
       }
-      return spans[0].spanId;
+      return null;
     });
   }, [spans]);
   const activeSpan = reactExports.useMemo(() => {
@@ -48049,46 +48031,48 @@ export {
   EVENT_DATA_REF_FIELDS as a4,
   clsx as a5,
   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,
+  getSpanDurationMs as a7,
+  getHighResInMs as a8,
+  ActiveSpanProvider as a9,
+  offset as aA,
+  shift as aB,
+  limitShift as aC,
+  flip as aD,
+  size as aE,
+  arrow as aF,
+  hide as aG,
+  autoUpdate as aH,
+  cancelRun as aI,
+  reenqueueRun as aJ,
+  wakeUpRun as aK,
+  resumeHook as aL,
+  recreateRun as aM,
+  useActiveSpan as aa,
+  useSidebarDataOptional as ab,
+  computeRootBounds as ac,
+  computeTimeMarkers as ad,
+  TIMELINE_PADDING_PX as ae,
+  Timeline as af,
+  TimelineHeader as ag,
+  SidebarDataProvider as ah,
+  hydrateResourceIOWithKey as ai,
+  hydrateResourceIO as aj,
+  fetchHook as ak,
+  fetchStep as al,
+  hasEncryptedFields as am,
+  fetchStreams as an,
+  Slot as ao,
+  Slottable as ap,
+  buttonVariants as aq,
+  isEncryptedData as ar,
+  hydrateData as as,
+  getWebRevivers as at,
+  LIVE_UPDATE_INTERVAL_MS as au,
+  fetchEvent as av,
+  getEncryptionKeyForRun as aw,
+  StreamViewer as ax,
+  composeRefs as ay,
+  useFloating as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,