@workflow/web 5.0.0-beta.5 → 5.0.0-beta.7

package/build/client/assets/{encryption-CEh0YXii.js → encryption-C69WMRfh.js}

@@ -1,16 +1,22 @@
-import { W as WorkflowRuntimeError } from "./index-B4xuge0I.js";
+import { W as WorkflowRuntimeError } from "./index-Byi8AWfe.js";
 import "./index-BsV8i_Jn.js";
 const NONCE_LENGTH = 12;
 const TAG_LENGTH = 128;
 const KEY_LENGTH = 32;
-async function importKey(raw) {
+async function importKey(raw, usages = ["encrypt", "decrypt"]) {
   if (raw.byteLength !== KEY_LENGTH) {
     throw new WorkflowRuntimeError(`Encryption key must be exactly ${KEY_LENGTH} bytes, got ${raw.byteLength}`);
   }
-  return globalThis.crypto.subtle.importKey("raw", raw, "AES-GCM", false, [
-    "encrypt",
-    "decrypt"
-  ]);
+  return globalThis.crypto.subtle.importKey(
+    "raw",
+    raw,
+    "AES-GCM",
+    false,
+    // `KeyUsage` is a DOM-lib type that's not in scope under `es2022`.
+    // The `ReadonlyArray<'encrypt' | 'decrypt'>` parameter type matches
+    // a strict subset of `KeyUsage[]`, so this cast is sound.
+    usages
+  );
 }
 async function decrypt(key, data) {
   const minLength = NONCE_LENGTH + TAG_LENGTH / 8;

package/build/client/assets/{highlighted-body-B3W2YXNL-L1CrwoL_.js → highlighted-body-B3W2YXNL-Cq4feDhL.js}

@@ -1,4 +1,4 @@
-import { R, K as Ks, Q as Qe } from "./mermaid-3ZIDBTTL-BQLU7GUr.js";
+import { R, K as Ks, Q as Qe } from "./mermaid-3ZIDBTTL-PK-k2mDG.js";
 import { r as reactExports, j as jsxRuntimeExports } from "./index-BsV8i_Jn.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-B6UmDDP6.js → home-B-DWbULo.js}

@@ -1,7 +1,7 @@
 import { r as reactExports, D as ReactDOM, j as jsxRuntimeExports, A as Link, f as reactDomExports, C as useSearchParams, B as useNavigate, G as useLocation, w as withComponentProps } from "./index-BsV8i_Jn.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-yqeN-U_2.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-BQLU7GUr.js";
-import "./index-B4xuge0I.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-CVUKAMV1.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-PK-k2mDG.js";
+import "./index-Byi8AWfe.js";
 var PORTAL_NAME$2 = "Portal";
 var Portal$2 = reactExports.forwardRef((props, forwardedRef) => {
   var _a;

package/build/client/assets/{index-B4xuge0I.js → index-Byi8AWfe.js}

@@ -162,6 +162,9 @@ function buildFramedDetails(hint, slug) {
     out.push({ label: "docs", value: `${BASE_URL}/${slug}` });
   return out;
 }
+const ERROR_SLUGS = {
+  HOOK_CONFLICT: "hook-conflict"
+};
 class WorkflowError extends Error {
   constructor(message, options) {
     const msgDocs = appendFramedDetails(message, buildFramedDetails(void 0, options == null ? void 0 : options.slug));
@@ -190,6 +193,25 @@ class WorkflowRuntimeError extends WorkflowError {
     return isError(value) && value.name === "WorkflowRuntimeError";
   }
 }
+class HookConflictError extends WorkflowError {
+  constructor(token, conflictingRunId) {
+    super(`Hook token "${token}" is already in use by another workflow${conflictingRunId ? ` (run "${conflictingRunId}")` : ""}`, {
+      slug: ERROR_SLUGS.HOOK_CONFLICT
+    });
+    __publicField(this, "token");
+    // TODO: Make this required once all persisted hook_conflict events and World
+    // implementations always include the active hook owner's run ID.
+    __publicField(this, "conflictingRunId");
+    this.name = "HookConflictError";
+    this.token = token;
+    if (conflictingRunId !== void 0) {
+      this.conflictingRunId = conflictingRunId;
+    }
+  }
+  static is(value) {
+    return isError(value) && value.name === "HookConflictError";
+  }
+}
 class FatalError extends Error {
   constructor(message) {
     super(message);
@@ -225,6 +247,7 @@ class RetryableError extends Error {
 const VERCEL_403_ERROR_MESSAGE = "Your current vercel account does not have access to this resource. Use `vercel login` or `vercel switch` to ensure you are linked to the right account.";
 const FATAL_ERROR_KEY = Symbol.for("@workflow/errors//FatalError");
 const RETRYABLE_ERROR_KEY = Symbol.for("@workflow/errors//RetryableError");
+const HOOK_CONFLICT_ERROR_KEY = Symbol.for("@workflow/errors//HookConflictError");
 if (typeof globalThis !== "undefined") {
   if (!Object.hasOwn(globalThis, FATAL_ERROR_KEY)) {
     Object.defineProperty(globalThis, FATAL_ERROR_KEY, {
@@ -242,6 +265,14 @@ if (typeof globalThis !== "undefined") {
       configurable: false
     });
   }
+  if (!Object.hasOwn(globalThis, HOOK_CONFLICT_ERROR_KEY)) {
+    Object.defineProperty(globalThis, HOOK_CONFLICT_ERROR_KEY, {
+      value: HookConflictError,
+      writable: false,
+      enumerable: false,
+      configurable: false
+    });
+  }
 }
 export {
   VERCEL_403_ERROR_MESSAGE as V,

package/build/client/assets/{manifest-e4c1c787.js → manifest-21016363.js}

@@ -1 +1 @@
-window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-DtOpLtMQ.js","imports":["/assets/index-BsV8i_Jn.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-Yk3JVwUh.js","imports":["/assets/index-BsV8i_Jn.js","/assets/mermaid-3ZIDBTTL-BQLU7GUr.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-B6UmDDP6.js","imports":["/assets/index-BsV8i_Jn.js","/assets/workflow-graph-viewer-yqeN-U_2.js","/assets/mermaid-3ZIDBTTL-BQLU7GUr.js","/assets/index-B4xuge0I.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-DMUaWXhb.js","imports":["/assets/index-BsV8i_Jn.js","/assets/workflow-graph-viewer-yqeN-U_2.js","/assets/mermaid-3ZIDBTTL-BQLU7GUr.js","/assets/encryption-CEh0YXii.js","/assets/index-B4xuge0I.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-e4c1c787.js","version":"e4c1c787"};
+window.__reactRouterManifest={"entry":{"module":"/assets/entry.client-DtOpLtMQ.js","imports":["/assets/index-BsV8i_Jn.js"],"css":[]},"routes":{"root":{"id":"root","path":"","hasAction":true,"hasLoader":true,"hasClientAction":false,"hasClientLoader":false,"hasClientMiddleware":false,"hasDefaultExport":true,"hasErrorBoundary":true,"module":"/assets/root-DDT0W3fG.js","imports":["/assets/index-BsV8i_Jn.js","/assets/mermaid-3ZIDBTTL-PK-k2mDG.js"],"css":["/assets/root-B527kgKt.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-B-DWbULo.js","imports":["/assets/index-BsV8i_Jn.js","/assets/workflow-graph-viewer-CVUKAMV1.js","/assets/mermaid-3ZIDBTTL-PK-k2mDG.js","/assets/index-Byi8AWfe.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-COyTZwjr.js","imports":["/assets/index-BsV8i_Jn.js","/assets/workflow-graph-viewer-CVUKAMV1.js","/assets/mermaid-3ZIDBTTL-PK-k2mDG.js","/assets/encryption-C69WMRfh.js","/assets/index-Byi8AWfe.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-21016363.js","version":"21016363"};

package/build/client/assets/{mermaid-3ZIDBTTL-BQLU7GUr.js → mermaid-3ZIDBTTL-PK-k2mDG.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-CEh0YXii.js","assets/index-B4xuge0I.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-L1CrwoL_.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-C69WMRfh.js","assets/index-Byi8AWfe.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-Cq4feDhL.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -10359,7 +10359,7 @@ function hydrateData(value, revivers) {
 async function hydrateDataWithKey(value, revivers, key) {
   if (value instanceof Uint8Array && isEncryptedData(value) && key) {
     const { decrypt } = await __vitePreload(async () => {
-      const { decrypt: decrypt2 } = await import("./encryption-CEh0YXii.js");
+      const { decrypt: decrypt2 } = await import("./encryption-C69WMRfh.js");
       return { decrypt: decrypt2 };
     }, true ? __vite__mapDeps([0,1,2]) : void 0);
     const { payload } = decodeFormatPrefix(value);
@@ -15360,6 +15360,7 @@ const StepCompletedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_completed"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     result: SerializedDataSchema
   })
 });
@@ -15367,6 +15368,7 @@ const StepFailedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_failed"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     // The thrown value, serialized via the workflow serialization pipeline.
     // Can be any JavaScript value (string, number, object, Error, etc.)
     error: SerializedDataSchema
@@ -15376,6 +15378,7 @@ const StepRetryingEventSchema = BaseEventSchema.extend({
   eventType: literal("step_retrying"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     // The thrown value, serialized via the workflow serialization pipeline.
     // Can be any JavaScript value (string, number, object, Error, etc.)
     error: SerializedDataSchema,
@@ -15386,6 +15389,7 @@ const StepStartedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_started"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     attempt: number$2().optional()
   }).optional()
 });
@@ -15411,18 +15415,25 @@ const HookReceivedEventSchema = BaseEventSchema.extend({
   eventType: literal("hook_received"),
   correlationId: string$2(),
   eventData: object({
+    token: string$2().optional(),
     payload: SerializedDataSchema
   })
 });
 const HookDisposedEventSchema = BaseEventSchema.extend({
   eventType: literal("hook_disposed"),
-  correlationId: string$2()
+  correlationId: string$2(),
+  eventData: object({
+    token: string$2().optional()
+  }).optional()
 });
 const HookConflictEventSchema = BaseEventSchema.extend({
   eventType: literal("hook_conflict"),
   correlationId: string$2(),
   eventData: object({
-    token: string$2()
+    token: string$2(),
+    // TODO: Make this required once all persisted hook_conflict events and
+    // remote World implementations always include the active hook owner's run ID.
+    conflictingRunId: string$2().optional()
   })
 });
 const WaitCreatedEventSchema = BaseEventSchema.extend({
@@ -15434,7 +15445,10 @@ const WaitCreatedEventSchema = BaseEventSchema.extend({
 });
 const WaitCompletedEventSchema = BaseEventSchema.extend({
   eventType: literal("wait_completed"),
-  correlationId: string$2()
+  correlationId: string$2(),
+  eventData: object({
+    resumeAt: date().optional()
+  }).optional()
 });
 const RunCreatedEventSchema = BaseEventSchema.extend({
   eventType: literal("run_created"),
@@ -15686,7 +15700,7 @@ object({
   message: string$2(),
   stack: string$2().optional(),
   code: string$2().optional()
-  // Populated with RunErrorCode values (USER_ERROR, RUNTIME_ERROR) for run_failed events
+  // Populated with RunErrorCode values (USER_ERROR, RUNTIME_ERROR, etc.) for run_failed events
 });
 const StepStatusSchema = _enum([
   "pending",
@@ -16012,7 +16026,7 @@ async function hydrateResourceIOWithKey(resource, key) {
     return { hydrateDataWithKey: hydrateDataWithKey3 };
   }, true ? void 0 : void 0);
   const { importKey } = await __vitePreload(async () => {
-    const { importKey: importKey2 } = await import("./encryption-CEh0YXii.js");
+    const { importKey: importKey2 } = await import("./encryption-C69WMRfh.js");
     return { importKey: importKey2 };
   }, true ? __vite__mapDeps([0,1,2]) : void 0);
   const cryptoKey = await importKey(key);
@@ -43144,7 +43158,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-L1CrwoL_.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-Cq4feDhL.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   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 }) })] }) });
@@ -43911,7 +43925,7 @@ var Nt = ({ chart: e, className: t, config: o, fullscreen: n = false, showContro
 const MAP_HEIGHT = 56;
 const TIMELINE_PADDING = 8;
 const ROW_PADDING = 2;
-const ROW_HEIGHT$1 = 24;
+const ROW_HEIGHT = 24;
 const MARKER_HEIGHT = 24;
 const initialState = {
   root: {
@@ -44647,17 +44661,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$1 + ROW_PADDING) * node2.row;
+  let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node2.row;
   const actualWidth = node2.duration * scale;
   const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
-  let height = ROW_HEIGHT$1;
+  let height = ROW_HEIGHT;
   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$1 - height) * 0.5;
+    top += (ROW_HEIGHT - height) * 0.5;
   }
   const isNearRightSide = computeIsNearRightSide(node2, root2, scrollSnapshotRef, isExpanded);
   return {
@@ -44823,8 +44837,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$1;
-      layout.top = MARKER_HEIGHT + (ROW_HEIGHT$1 + ROW_PADDING) * segmentNode.row;
+      layout.height = ROW_HEIGHT;
+      layout.top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * segmentNode.row;
     }
   }
   reactExports.useEffect(() => {
@@ -44899,7 +44913,7 @@ const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ even
     }
   }
   const left = (event.timestamp - root2.startTime) * scale;
-  const top = MARKER_HEIGHT + (ROW_HEIGHT$1 + ROW_PADDING) * node2.row;
+  const top = MARKER_HEIGHT + (ROW_HEIGHT + 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}
@@ -45281,11 +45295,36 @@ function computeSpanGaps(spans, viewStart, viewEnd) {
   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)" }
+  run: {
+    bg: "var(--ds-blue-200)",
+    border: "var(--ds-blue-500)",
+    errorBg: "var(--ds-red-200)",
+    errorBorder: "var(--ds-red-500)"
+  },
+  step: {
+    bg: "var(--ds-green-200)",
+    border: "var(--ds-green-500)",
+    errorBg: "var(--ds-red-200)",
+    errorBorder: "var(--ds-red-500)"
+  },
+  hook: {
+    bg: "var(--ds-amber-200)",
+    border: "var(--ds-amber-500)",
+    errorBg: "var(--ds-red-200)",
+    errorBorder: "var(--ds-red-500)"
+  },
+  sleep: {
+    bg: "var(--ds-purple-200)",
+    border: "var(--ds-purple-500)",
+    errorBg: "var(--ds-red-200)",
+    errorBorder: "var(--ds-red-500)"
+  },
+  default: {
+    bg: "var(--ds-gray-200)",
+    border: "var(--ds-gray-500)",
+    errorBg: "var(--ds-red-200)",
+    errorBorder: "var(--ds-red-500)"
+  }
 };
 function getResourceColor(resource) {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
@@ -45478,87 +45517,143 @@ function computeSpanSegments(span) {
       return [];
   }
 }
-const SEGMENT_CONFIG = {
-  queued: { className: "bg-gray-500" },
-  retrying: {
-    className: "box-border bg-gray-500"
-  },
-  waiting: { className: "bg-gray-500" },
-  running: { className: "bg-blue-700" },
-  failed: { className: "bg-red-700" },
-  succeeded: { className: "bg-green-700" },
-  sleeping: { className: "bg-gray-500" },
-  received: { className: "bg-blue-700" }
-};
-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 = 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: {
-    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, viewStart, viewDuration, containerWidth, isSelected, onClick }) {
+const SEGMENT_CLASSES = {
+  queued: "bg-gray-400 border border-gray-500",
+  retrying: "bg-gray-400 border border-gray-500",
+  waiting: "bg-gray-400 border border-gray-500",
+  running: "bg-blue-200 border border-blue-500",
+  failed: "bg-red-200 border border-red-500",
+  succeeded: "bg-green-200 border border-green-500",
+  sleeping: "bg-gray-400 border border-gray-500",
+  received: "bg-blue-200 border border-blue-500"
+};
+const TIMELINE_INSET_STYLE = {
+  left: TIMELINE_PADDING_PX,
+  right: TIMELINE_PADDING_PX
+};
+function computeBarGeometry(startMs, endMs, viewStart, viewEnd, containerWidth) {
+  const viewDuration = viewEnd - viewStart;
+  const visibleStartMs = Math.max(startMs, viewStart);
+  const visibleEndMs = Math.min(endMs, viewEnd);
+  const visibleDurationMs = Math.max(0, visibleEndMs - visibleStartMs);
+  const widthFrac = viewDuration > 0 ? visibleDurationMs / viewDuration : 0;
+  const visiblePixelWidth = widthFrac * containerWidth;
+  const isTiny = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
+  const extendsOffLeft = startMs < viewStart;
+  const extendsOffRight = endMs > viewEnd;
+  const mode = isTiny && (extendsOffLeft || extendsOffRight) ? { kind: "arrow", direction: extendsOffRight ? "right" : "left" } : isTiny ? { kind: "tiny" } : { kind: "full" };
+  return {
+    mode,
+    leftPct: viewDuration > 0 ? (visibleStartMs - viewStart) / viewDuration * 100 : 0,
+    widthPct: widthFrac * 100,
+    visibleStartMs,
+    visibleEndMs,
+    visiblePixelWidth
+  };
+}
+function getBarPositionStyle(geometry) {
+  switch (geometry.mode.kind) {
+    case "arrow":
+      return {
+        left: geometry.mode.direction === "right" ? `calc(100% - ${TINY_BAR_BOX_SIZE_PX}px)` : "0px",
+        width: `${TINY_BAR_BOX_SIZE_PX}px`
+      };
+    case "tiny":
+      return {
+        left: `min(${geometry.leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`,
+        width: `${TINY_BAR_WIDTH_PX}px`
+      };
+    case "full":
+      return {
+        left: `${geometry.leftPct}%`,
+        width: `max(${geometry.widthPct}%, 4px)`
+      };
+  }
+}
+function projectSegments(segments, spanStartMs, spanDurationMs, geometry) {
+  const visibleDurationMs = geometry.visibleEndMs - geometry.visibleStartMs;
+  if (visibleDurationMs <= 0)
+    return [];
+  return segments.flatMap((seg) => {
+    const segStartMs = spanStartMs + seg.startFraction * spanDurationMs;
+    const segEndMs = spanStartMs + seg.endFraction * spanDurationMs;
+    const startMs = Math.max(segStartMs, geometry.visibleStartMs);
+    const endMs = Math.min(segEndMs, geometry.visibleEndMs);
+    if (endMs <= startMs)
+      return [];
+    const widthFrac = (endMs - startMs) / visibleDurationMs;
+    return [
+      {
+        status: seg.status,
+        leftPct: (startMs - geometry.visibleStartMs) / visibleDurationMs * 100,
+        widthPct: widthFrac * 100,
+        pixelWidth: widthFrac * geometry.visiblePixelWidth,
+        fullDurationMs: (seg.endFraction - seg.startFraction) * spanDurationMs
+      }
+    ];
+  });
+}
+function DurationLabel({ label }) {
+  return jsxRuntimeExports.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-gray-1000 tabular-nums opacity-0 group-hover/timeline-row:opacity-100", children: label });
+}
+function BoundaryArrow({ direction }) {
+  const Icon2 = direction === "right" ? ArrowRight : ArrowLeft;
+  return jsxRuntimeExports.jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: jsxRuntimeExports.jsx(Icon2, { className: "size-3 text-gray-900" }) });
+}
+function PlainBar({ bg, border, label }) {
+  return jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full min-w-1 rounded-[0.25rem] border", style: { background: bg, borderColor: border }, children: label ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null });
+}
+function SegmentBar({ segments }) {
+  return jsxRuntimeExports.jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
+    const label = formatDuration(seg.fullDurationMs);
+    const showLabel = seg.pixelWidth >= Math.max(40, label.length * 6 + 12);
+    const isNarrowQueued = seg.status === "queued" && seg.pixelWidth < 20;
+    const overrideBg = isNarrowQueued ? "var(--ds-gray-400)" : void 0;
+    const overrideBorder = isNarrowQueued ? "var(--ds-gray-500)" : void 0;
+    return jsxRuntimeExports.jsx("div", { className: cn$4("absolute h-full rounded-[0.25rem]", SEGMENT_CLASSES[seg.status]), style: {
+      // 1px gap between adjacent segments, distributed equally.
+      left: `calc(${seg.leftPct}% + 0.5px)`,
+      width: `calc(${seg.widthPct}% - 1px)`,
+      minWidth: 1,
+      background: overrideBg,
+      borderColor: overrideBorder
+    }, children: showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null }, `${seg.status}-${i}`);
+  }) });
+}
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, onSelect }) {
   var _a3;
-  const startTime = getHighResInMs(span.startTime);
-  const endTime = getHighResInMs(span.endTime);
+  const startMs = getHighResInMs(span.startTime);
+  const endMs = getHighResInMs(span.endTime);
   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 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 geometry = reactExports.useMemo(() => computeBarGeometry(startMs, endMs, viewStart, viewStart + viewDuration, containerWidth), [startMs, endMs, viewStart, viewDuration, containerWidth]);
+  const baseSegments = reactExports.useMemo(() => computeSpanSegments(span), [span]);
+  const segments = reactExports.useMemo(() => geometry.mode.kind === "full" ? projectSegments(baseSegments, startMs, totalDurationMs, geometry) : [], [geometry, baseSegments, startMs, totalDurationMs]);
   const 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 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 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);
-    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-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-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 }) }) });
+  const fallbackBg = isErrored ? colors.errorBg ?? "var(--ds-red-200)" : colors.bg;
+  const fallbackBorder = isErrored ? colors.errorBorder ?? "var(--ds-red-500)" : colors.border;
+  const totalLabel = formatDuration(totalDurationMs);
+  const showTotalLabel = geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);
+  const handleClick = reactExports.useCallback(() => {
+    onSelect(span.spanId);
+  }, [onSelect, span.spanId]);
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: "group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200", onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
+});
+const DELTA_ROW_HEIGHT_PX = 40;
+const DELTA_CAP_HEIGHT_PX = 8;
+const DELTA_ROW_OFFSET_PX = 8;
+const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, rightFrac, label, rowIndex }) {
+  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * DELTA_ROW_HEIGHT_PX;
+  return jsxRuntimeExports.jsxs("div", { className: "absolute pointer-events-none", style: {
+    left: `${leftFrac * 100}%`,
+    width: `${(rightFrac - leftFrac) * 100}%`,
+    top: centerY - DELTA_CAP_HEIGHT_PX / 2,
+    height: DELTA_CAP_HEIGHT_PX
+  }, 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 })] });
 });
 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 })] }) });
@@ -45579,16 +45674,10 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, on
     return () => ro2.disconnect();
   }, []);
   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)) })] });
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
+    // Skip the "0s" origin marker since the left edge already implies it.
+    Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, `${marker2.position}-${marker2.label}`) : null
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
 }
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";