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

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

@@ -1,9 +1,9 @@
-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/encryption-CEh0YXii.js","assets/index-B4xuge0I.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-L1CrwoL_.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);
 var _a2;
-import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, H as React, R as ReactExports, C as ReactDOM, I as getDefaultExportFromCjs } from "./index-DQa-BExo.js";
+import { r as reactExports, j as jsxRuntimeExports, f as reactDomExports, I as React, R as ReactExports, D as ReactDOM, g as getDefaultExportFromCjs } from "./index-BsV8i_Jn.js";
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
     originalEventHandler == null ? void 0 : originalEventHandler(event);
@@ -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) {
@@ -10336,9 +10359,9 @@ 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-80GMP4r0.js");
+      const { decrypt: decrypt2 } = await import("./encryption-CEh0YXii.js");
       return { decrypt: decrypt2 };
-    }, true ? [] : void 0);
+    }, true ? __vite__mapDeps([0,1,2]) : void 0);
     const { payload } = decodeFormatPrefix(value);
     const decrypted = await decrypt(key, payload);
     return hydrateData(decrypted, revivers);
@@ -10418,6 +10441,34 @@ const observabilityRevivers = {
   ReadableStream: streamToStreamRef,
   WritableStream: streamToStreamRef,
   TransformStream: streamToStreamRef,
+  AbortController: (value) => `<AbortController(aborted: ${value.aborted})>`,
+  AbortSignal: (value) => `<AbortSignal(aborted: ${value.aborted})>`,
+  // DOMException needs an explicit reviver: without one, devalue.parse
+  // throws on the `["DOMException", ...]` tag and `hydrateStepIO`'s
+  // try/catch leaves the raw flat-encoded string in the UI. AbortController
+  // synthesizes a DOMException as the default `signal.reason` when abort()
+  // is called with no arg — so any abort that round-trips through a step
+  // boundary surfaces here. Reconstruct as a real DOMException when the
+  // global is available (modern browsers + Node 18+), else fall back to
+  // an Error preserving name/message/stack/cause for display.
+  DOMException: (value) => {
+    const G2 = globalThis;
+    if (typeof G2.DOMException === "function") {
+      const e2 = new G2.DOMException(value.message, value.name);
+      if (value.stack !== void 0)
+        e2.stack = value.stack;
+      if ("cause" in value)
+        e2.cause = value.cause;
+      return e2;
+    }
+    const e = new Error(value.message);
+    e.name = value.name;
+    if (value.stack !== void 0)
+      e.stack = value.stack;
+    if ("cause" in value)
+      e.cause = value.cause;
+    return e;
+  },
   StepFunction: serializedStepFunctionToString,
   WorkflowFunction: (value) => `<workflow:${value.workflowId}>`,
   Instance: serializedInstanceToRef,
@@ -10426,6 +10477,7 @@ const observabilityRevivers = {
 function hydrateStepIO(resource, revivers) {
   let hydratedInput = resource.input;
   let hydratedOutput = resource.output;
+  let hydratedError = resource.error;
   if (resource.input != null) {
     try {
       hydratedInput = hydrateData(resource.input, revivers);
@@ -10438,11 +10490,23 @@ function hydrateStepIO(resource, revivers) {
     } catch {
     }
   }
-  return { ...resource, input: hydratedInput, output: hydratedOutput };
+  if (resource.error != null) {
+    try {
+      hydratedError = hydrateData(resource.error, revivers);
+    } catch {
+    }
+  }
+  return {
+    ...resource,
+    input: hydratedInput,
+    output: hydratedOutput,
+    error: hydratedError
+  };
 }
 function hydrateWorkflowIO(resource, revivers) {
   let hydratedInput = resource.input;
   let hydratedOutput = resource.output;
+  let hydratedError = resource.error;
   if (resource.input != null) {
     try {
       hydratedInput = hydrateData(resource.input, revivers);
@@ -10455,7 +10519,18 @@ function hydrateWorkflowIO(resource, revivers) {
     } catch {
     }
   }
-  return { ...resource, input: hydratedInput, output: hydratedOutput };
+  if (resource.error != null) {
+    try {
+      hydratedError = hydrateData(resource.error, revivers);
+    } catch {
+    }
+  }
+  return {
+    ...resource,
+    input: hydratedInput,
+    output: hydratedOutput,
+    error: hydratedError
+  };
 }
 function hydrateEventData(resource, revivers) {
   if (!resource.eventData)
@@ -10491,6 +10566,12 @@ function hydrateEventData(resource, revivers) {
     } catch {
     }
   }
+  if ("error" in eventData && eventData.error != null) {
+    try {
+      eventData.error = hydrateData(eventData.error, revivers);
+    } catch {
+    }
+  }
   return { ...resource, eventData };
 }
 function hydrateHookMetadata(resource, revivers) {
@@ -15286,16 +15367,18 @@ const StepFailedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_failed"),
   correlationId: string$2(),
   eventData: object({
-    error: any(),
-    stack: string$2().optional()
+    // The thrown value, serialized via the workflow serialization pipeline.
+    // Can be any JavaScript value (string, number, object, Error, etc.)
+    error: SerializedDataSchema
   })
 });
 const StepRetryingEventSchema = BaseEventSchema.extend({
   eventType: literal("step_retrying"),
   correlationId: string$2(),
   eventData: object({
-    error: any(),
-    stack: string$2().optional(),
+    // The thrown value, serialized via the workflow serialization pipeline.
+    // Can be any JavaScript value (string, number, object, Error, etc.)
+    error: SerializedDataSchema,
     retryAfter: date().optional()
   })
 });
@@ -15319,7 +15402,9 @@ const HookCreatedEventSchema = BaseEventSchema.extend({
   correlationId: string$2(),
   eventData: object({
     token: string$2(),
-    metadata: SerializedDataSchema.optional()
+    metadata: SerializedDataSchema.optional(),
+    isWebhook: boolean$2().optional(),
+    isSystem: boolean$2().optional()
   })
 });
 const HookReceivedEventSchema = BaseEventSchema.extend({
@@ -15378,7 +15463,13 @@ const RunCompletedEventSchema = BaseEventSchema.extend({
 const RunFailedEventSchema = BaseEventSchema.extend({
   eventType: literal("run_failed"),
   eventData: object({
-    error: any(),
+    // The thrown value, serialized via the workflow serialization pipeline.
+    // Can be any JavaScript value (string, number, object, Error, etc.)
+    error: SerializedDataSchema,
+    // The high-level error category (USER_ERROR, RUNTIME_ERROR, etc.) used
+    // for routing and classification. Kept as plaintext metadata so
+    // observability tools can filter/categorize without needing to decrypt
+    // the full error payload.
     errorCode: string$2().optional()
   })
 });
@@ -15446,7 +15537,8 @@ object({
   createdAt: date(),
   // Optional in database for backwards compatibility, defaults to 1 (legacy) when reading
   specVersion: number$2().optional(),
-  isWebhook: boolean$2().optional()
+  isWebhook: boolean$2().optional(),
+  isSystem: boolean$2().optional()
 });
 const QueuePrefix = union([
   literal("__wkf_step_"),
@@ -15468,6 +15560,11 @@ const WorkflowInvokePayloadSchema = object({
   requestedAt: date().optional(),
   /** Number of times this message has been re-enqueued due to server errors (5xx) */
   serverErrorRetryCount: number$2().int().optional(),
+  /** Step ID for inline step execution in combined handler. If provided, the flow execution
+   * will jump directly to execute the step with the given ID before doing an event replay. */
+  stepId: string$2().optional(),
+  /** Step name, sent alongside stepId to avoid loading the event log just to resolve the name. */
+  stepName: string$2().optional(),
   /** Run creation data, only present on the first queue delivery from start() */
   runInput: RunInputSchema.optional()
 });
@@ -15488,22 +15585,6 @@ union([
   StepInvokePayloadSchema,
   HealthCheckPayloadSchema
 ]);
-const zodJsonSchema = lazy(() => {
-  return union([
-    string$2(),
-    number$2(),
-    boolean$2(),
-    _null(),
-    array(zodJsonSchema),
-    record(string$2(), zodJsonSchema)
-  ]);
-});
-const StructuredErrorSchema = object({
-  message: string$2(),
-  stack: string$2().optional(),
-  code: string$2().optional()
-  // Populated with RunErrorCode values (USER_ERROR, RUNTIME_ERROR) for run_failed events
-});
 const WorkflowRunStatusSchema = _enum([
   "pending",
   "running",
@@ -15541,7 +15622,20 @@ const WorkflowRunBaseSchema = object({
   executionContext: record(string$2(), any()).optional(),
   input: SerializedDataSchema,
   output: SerializedDataSchema.optional(),
-  error: StructuredErrorSchema.optional(),
+  /**
+   * The thrown value from a run_failed event, serialized via the workflow
+   * serialization pipeline. To display the error to a user, hydrate it via
+   * `hydrateRunError` (with the encryption key if encryption is enabled).
+   * Observability tools cannot view the error without going through the
+   * decryption + hydration pipeline.
+   */
+  error: SerializedDataSchema.optional(),
+  /**
+   * The high-level error category (USER_ERROR, RUNTIME_ERROR, etc.) from a
+   * run_failed event. Kept as plaintext metadata for routing and filtering
+   * without needing to decrypt the full error payload.
+   */
+  errorCode: string$2().optional(),
   expiredAt: date().optional(),
   startedAt: date().optional(),
   completedAt: date().optional(),
@@ -15552,32 +15646,48 @@ discriminatedUnion("status", [
   // Non-final states
   WorkflowRunBaseSchema.extend({
     status: _enum(["pending", "running"]),
-    output: _undefined(),
-    error: _undefined(),
-    completedAt: _undefined()
+    output: _undefined().optional(),
+    error: _undefined().optional(),
+    completedAt: _undefined().optional()
   }),
   // Cancelled state
   WorkflowRunBaseSchema.extend({
     status: literal("cancelled"),
-    output: _undefined(),
-    error: _undefined(),
+    output: _undefined().optional(),
+    error: _undefined().optional(),
     completedAt: date()
   }),
   // Completed state - output can be v1 or v2 format
   WorkflowRunBaseSchema.extend({
     status: literal("completed"),
     output: SerializedDataSchema,
-    error: _undefined(),
+    error: _undefined().optional(),
     completedAt: date()
   }),
   // Failed state
   WorkflowRunBaseSchema.extend({
     status: literal("failed"),
-    output: _undefined(),
-    error: StructuredErrorSchema,
+    output: _undefined().optional(),
+    error: SerializedDataSchema,
     completedAt: date()
   })
 ]);
+const zodJsonSchema = lazy(() => {
+  return union([
+    string$2(),
+    number$2(),
+    boolean$2(),
+    _null(),
+    array(zodJsonSchema),
+    record(string$2(), zodJsonSchema)
+  ]);
+});
+object({
+  message: string$2(),
+  stack: string$2().optional(),
+  code: string$2().optional()
+  // Populated with RunErrorCode values (USER_ERROR, RUNTIME_ERROR) for run_failed events
+});
 const StepStatusSchema = _enum([
   "pending",
   "running",
@@ -15613,11 +15723,16 @@ object({
   input: SerializedDataSchema,
   output: SerializedDataSchema.optional(),
   /**
-   * The error from a step_retrying or step_failed event.
-   * This tracks the most recent error the step encountered, which may
-   * be from a retry attempt (step_retrying) or the final failure (step_failed).
+   * The thrown value from a step_retrying or step_failed event, serialized
+   * via the workflow serialization pipeline. Tracks the most recent error
+   * the step encountered, which may be from a retry attempt (step_retrying)
+   * or the final failure (step_failed).
+   *
+   * To display the error to a user, hydrate it via `hydrateStepError` (with
+   * the encryption key if encryption is enabled). Observability tools cannot
+   * view the error without going through the decryption + hydration pipeline.
    */
-  error: StructuredErrorSchema.optional(),
+  error: SerializedDataSchema.optional(),
   attempt: number$2(),
   /**
    * When the step first started executing. Set by the first step_started event
@@ -15654,6 +15769,21 @@ function base64ToArrayBuffer(base642) {
   }
   return bytes.buffer;
 }
+function makeWebErrorSubclassReviver(name2) {
+  return (value) => {
+    const opts = "cause" in value ? { cause: value.cause } : void 0;
+    const Ctor = globalThis[name2];
+    let error;
+    if (typeof Ctor === "function") {
+      error = new Ctor(value.message, opts);
+    } else {
+      error = Object.assign(new Error(value.message, opts), { name: name2 });
+    }
+    if (value.stack !== void 0)
+      error.stack = value.stack;
+    return error;
+  };
+}
 function getWebRevivers() {
   function reviveArrayBuffer(value) {
     return base64ToArrayBuffer(value);
@@ -15668,10 +15798,83 @@ function getWebRevivers() {
     BigInt64Array: (value) => new BigInt64Array(reviveArrayBuffer(value)),
     BigUint64Array: (value) => new BigUint64Array(reviveArrayBuffer(value)),
     Date: (value) => new Date(value),
+    // Error family. The reducer side (see
+    // `packages/core/src/serialization/reducers/common.ts`) emits a tagged
+    // entry for each built-in Error subclass plus the workflow-specific
+    // `FatalError` / `RetryableError` and `AggregateError`. Without
+    // matching revivers here, `devalue.unflatten` throws "Unknown type X"
+    // — which surfaces in the web o11y UI as "Failed to load resource
+    // details: Unknown type FatalError".
     Error: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const error = new Error(value.message, opts);
+      error.name = value.name;
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      return error;
+    },
+    EvalError: makeWebErrorSubclassReviver("EvalError"),
+    RangeError: makeWebErrorSubclassReviver("RangeError"),
+    ReferenceError: makeWebErrorSubclassReviver("ReferenceError"),
+    SyntaxError: makeWebErrorSubclassReviver("SyntaxError"),
+    TypeError: makeWebErrorSubclassReviver("TypeError"),
+    URIError: makeWebErrorSubclassReviver("URIError"),
+    AggregateError: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const Ctor = globalThis.AggregateError;
+      const error = typeof Ctor === "function" ? new Ctor(value.errors, value.message, opts) : Object.assign(new Error(value.message, opts), {
+        name: "AggregateError",
+        errors: value.errors
+      });
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      return error;
+    },
+    // `FatalError` and `RetryableError` are not built-in browser globals,
+    // so we can't resolve a constructor from globalThis. The web o11y UI
+    // doesn't need `instanceof FatalError` to pass (no user code runs
+    // here) — it just needs `name`, `message`, `stack`, and any extra
+    // enumerable fields to render. Construct a plain `Error` with `name`
+    // set; ObjectInspector reads `constructor.name` for the displayed
+    // class label, but we don't have the real class, so we emit a tagged
+    // Error whose `name` field carries the class identity. This matches
+    // how the existing base `Error` reviver presents unknown subclasses.
+    FatalError: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const error = new Error(value.message, opts);
+      error.name = "FatalError";
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      return error;
+    },
+    RetryableError: (value) => {
+      const opts = "cause" in value ? { cause: value.cause } : void 0;
+      const error = new Error(value.message, opts);
+      error.name = "RetryableError";
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      if (value.retryAfter != null) {
+        error.retryAfter = new Date(value.retryAfter);
+      }
+      return error;
+    },
+    DOMException: (value) => {
+      const G2 = globalThis;
+      if (typeof G2.DOMException === "function") {
+        const e = new G2.DOMException(value.message, value.name);
+        if (value.stack !== void 0)
+          e.stack = value.stack;
+        if ("cause" in value)
+          e.cause = value.cause;
+        return e;
+      }
       const error = new Error(value.message);
       error.name = value.name;
-      error.stack = value.stack;
+      if (value.stack !== void 0)
+        error.stack = value.stack;
+      if ("cause" in value) {
+        error.cause = value.cause;
+      }
       return error;
     },
     Float32Array: (value) => new Float32Array(reviveArrayBuffer(value)),
@@ -15809,9 +16012,9 @@ async function hydrateResourceIOWithKey(resource, key) {
     return { hydrateDataWithKey: hydrateDataWithKey3 };
   }, true ? void 0 : void 0);
   const { importKey } = await __vitePreload(async () => {
-    const { importKey: importKey2 } = await import("./encryption-80GMP4r0.js");
+    const { importKey: importKey2 } = await import("./encryption-CEh0YXii.js");
     return { importKey: importKey2 };
-  }, true ? [] : void 0);
+  }, true ? __vite__mapDeps([0,1,2]) : void 0);
   const cryptoKey = await importKey(key);
   const revivers = getRevivers();
   async function decryptField(value, rev, k2) {
@@ -42941,7 +43144,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-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 }) => {
   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 +45197,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 +45253,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 +45272,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 +45404,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 +45463,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 +45478,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 +45508,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 +45546,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 +45578,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 +45597,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 +48211,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,