@workflow/web 5.0.0-beta.6 → 5.0.0-beta.8

package/build/client/assets/{mermaid-3ZIDBTTL-D3hhpLut.js → mermaid-3ZIDBTTL-TNUP6Q3m.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-DU49MAQV.js","assets/index-Byi8AWfe.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-BZLzBNxn.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-WHMd9MPa.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-DU49MAQV.js");
+      const { decrypt: decrypt2 } = await import("./encryption-C69WMRfh.js");
       return { decrypt: decrypt2 };
     }, true ? __vite__mapDeps([0,1,2]) : void 0);
     const { payload } = decodeFormatPrefix(value);
@@ -15311,6 +15311,10 @@ function _instanceof(cls, params = {}) {
 function date(params) {
   return /* @__PURE__ */ _coercedDate(ZodDate, params);
 }
+object({
+  key: string$2(),
+  value: union([string$2(), _null()])
+});
 const BinarySerializedDataSchema = _instanceof(Uint8Array);
 const LegacySerializedDataSchemaV1 = any();
 const SerializedDataSchema = union([
@@ -15360,6 +15364,7 @@ const StepCompletedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_completed"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     result: SerializedDataSchema
   })
 });
@@ -15367,6 +15372,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 +15382,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 +15393,7 @@ const StepStartedEventSchema = BaseEventSchema.extend({
   eventType: literal("step_started"),
   correlationId: string$2(),
   eventData: object({
+    stepName: string$2().optional(),
     attempt: number$2().optional()
   }).optional()
 });
@@ -15411,12 +15419,16 @@ 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"),
@@ -15437,7 +15449,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"),
@@ -15623,7 +15638,7 @@ const WorkflowRunBaseSchema = object({
   // Optional in database for backwards compatibility, defaults to 1 (legacy) when reading
   specVersion: number$2().optional(),
   executionContext: record(string$2(), any()).optional(),
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a run_failed event, serialized via the workflow
@@ -15639,6 +15654,24 @@ const WorkflowRunBaseSchema = object({
    * without needing to decrypt the full error payload.
    */
   errorCode: string$2().optional(),
+  /**
+   * Plaintext string-string metadata attached to the run via
+   * `experimental_setAttributes()` (or, in the future, materialized
+   * from `attr_set` events). Stored unencrypted alongside other
+   * plaintext fields so observability surfaces can read it without
+   * going through the decryption pipeline.
+   *
+   * Defaults to `{}` after schema parsing so consumers always receive
+   * a record regardless of world. World adapters need not initialize
+   * the field on disk — `world-local` JSON files written before this
+   * field existed, and rows from any other adapter that omits the
+   * column, both read as `{}` after Zod parses them.
+   *
+   * EXPERIMENTAL (MVP): the full Workflow Attributes feature replaces
+   * the direct-mutation MVP path with an event-sourced model — see
+   * the attributes-mvp changelog entry.
+   */
+  attributes: record(string$2(), string$2()).default({}),
   expiredAt: date().optional(),
   startedAt: date().optional(),
   completedAt: date().optional(),
@@ -15689,7 +15722,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",
@@ -15723,7 +15756,7 @@ object({
    */
   stepName: string$2(),
   status: StepStatusSchema,
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a step_retrying or step_failed event, serialized
@@ -16015,7 +16048,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-DU49MAQV.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);
@@ -16989,6 +17022,80 @@ const geistTheme = {
 };
 const inspectorThemeLight = geistTheme;
 const inspectorThemeDark = geistTheme;
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config2) => (props) => {
+  var _config_compoundVariants;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const buttonVariants$1 = cva([
+  "outline-none m-0 border-0 align-baseline no-underline group/trigger",
+  "relative cursor-pointer select-none transform translate-z-0",
+  "inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium",
+  "!text-gray-100",
+  "bg-gray-1000",
+  "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
+  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))] dark-theme:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // disabled styles
+  "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
+  "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
+  "aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100"
+], {
+  variants: {
+    variant: {
+      default: "",
+      secondary: "border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]",
+      ghost: "[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]"
+    },
+    size: {
+      default: "h-10 px-4 text-[14px]",
+      sm: "h-8 px-3 text-[14px]",
+      xs: "h-6 px-1.5 py-0.5 text-button-12",
+      icon: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button$1({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(buttonVariants$1({ variant, size: size2, className })), ...props });
+}
 const STREAM_REF_TYPE = "__workflow_stream_ref__";
 const CLASS_INSTANCE_REF_TYPE = "__workflow_class_instance_ref__";
 const RUN_REF_TYPE = "__workflow_run_ref__";
@@ -17038,16 +17145,10 @@ const RunClickContext = reactExports.createContext(void 0);
 function EncryptedInlineLabel() {
   const ctx = reactExports.useContext(DecryptClickContext);
   if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] cursor-pointer", style: {
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      border: "1px solid var(--ds-gray-400)",
-      fontStyle: "italic",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, disabled: ctx.isDecrypting, onClick: (e) => {
+    return jsxRuntimeExports.jsxs(Button$1, { size: "xs", className: "align-baseline gap-x-1", disabled: ctx.isDecrypting, onClick: (e) => {
       e.stopPropagation();
       ctx.onDecrypt();
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: { display: "inline", flexShrink: 0 } }), jsxRuntimeExports.jsx("span", { children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
+    }, children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] });
   }
   return jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-gray-600)", fontStyle: "italic" }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: {
     display: "inline",
@@ -17293,6 +17394,9 @@ function isDeepEqual(a2, b2, seen2 = /* @__PURE__ */ new WeakMap()) {
   }
   return true;
 }
+function Skeleton$1({ className, style: style2, ...props }) {
+  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
+}
 function __insertCSS(code2) {
   if (typeof document == "undefined") return;
   let head = document.head || document.getElementsByTagName("head")[0];
@@ -18382,9 +18486,6 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
-function Skeleton$1({ className, style: style2, ...props }) {
-  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
-}
 const convert = (
   // Note: overloads in JSDoc can’t yet use different `@template`s.
   /**
@@ -43147,7 +43248,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-BZLzBNxn.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-WHMd9MPa.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,10 +44012,18 @@ var Nt = ({ chart: e, className: t, config: o, fullscreen: n = false, showContro
   let T2 = l || d2;
   return jsxRuntimeExports.jsx("div", { className: f("size-full", t), "data-streamdown": "mermaid", ref: w2, children: jsxRuntimeExports.jsx(So, { className: f(n ? "size-full overflow-hidden" : "overflow-hidden", t), fullscreen: n, maxZoom: 3, minZoom: 0.5, showControls: s2, zoomStep: 0.1, children: jsxRuntimeExports.jsx("div", { "aria-label": "Mermaid chart", className: f("flex justify-center", n ? "size-full items-center" : null), dangerouslySetInnerHTML: { __html: T2 }, role: "img" }) }) });
 };
+const SidebarDataContext = reactExports.createContext(null);
+SidebarDataContext.displayName = "SidebarDataContext";
+function SidebarDataProvider({ value, children: children2 }) {
+  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
+}
+function useSidebarDataOptional() {
+  return reactExports.useContext(SidebarDataContext);
+}
 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: {
@@ -44650,17 +44759,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 {
@@ -44826,8 +44935,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(() => {
@@ -44902,7 +45011,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}
@@ -45140,14 +45249,6 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
     height: MAP_HEIGHT - 4
   } })] });
 });
-const SidebarDataContext = reactExports.createContext(null);
-SidebarDataContext.displayName = "SidebarDataContext";
-function SidebarDataProvider({ value, children: children2 }) {
-  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
-}
-function useSidebarDataOptional() {
-  return reactExports.useContext(SidebarDataContext);
-}
 const ChunkRow = ReactExports.memo(function ChunkRow2({ chunk, index: index2 }) {
   return jsxRuntimeExports.jsx("div", { className: "text-[11px] rounded-md border p-3", style: {
     borderColor: "var(--ds-gray-300)",
@@ -45284,11 +45385,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;
@@ -45481,87 +45607,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 })] }) });
@@ -45582,16 +45764,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";
@@ -45793,46 +45969,6 @@ function getElementRef(element2) {
   }
   return element2.props.ref || element2.ref;
 }
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config2) => (props) => {
-  var _config_compoundVariants;
-  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config2;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -48178,7 +48314,7 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  StreamClickContext as $,
+  Button$1 as $,
   Anchor as A,
   Button as B,
   Content as C,
@@ -48192,70 +48328,71 @@ export {
   Ks as K,
   LoaderCircle as L,
   Spinner as M,
-  Skeleton$1 as N,
-  DecryptClickContext as O,
+  cn$4 as N,
+  Skeleton$1 as O,
   Primitive as P,
   Qe as Q,
   R,
   ServerConfigProvider as S,
   Tooltip as T,
-  isEncryptedMarker as U,
+  DecryptClickContext as U,
   VISUALLY_HIDDEN_STYLES as V,
-  formatDuration as W,
-  DataInspector as X,
+  isEncryptedMarker as W,
+  formatDuration as X,
   Yr as Y,
-  RunClickContext as Z,
+  DataInspector as Z,
   _r as _,
   TooltipTrigger as a,
-  isExpiredMarker as a0,
-  isDoStreamStep as a1,
-  extractConversation as a2,
-  Lock as a3,
-  EVENT_DATA_REF_FIELDS as a4,
-  clsx as a5,
-  cn$4 as a6,
-  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,
+  Lock as a0,
+  RunClickContext as a1,
+  StreamClickContext as a2,
+  isExpiredMarker as a3,
+  isDoStreamStep as a4,
+  extractConversation as a5,
+  hasEncryptedFields as a6,
+  EVENT_DATA_REF_FIELDS as a7,
+  useSidebarDataOptional as a8,
+  clsx as a9,
+  useFloating as aA,
+  offset as aB,
+  shift as aC,
+  limitShift as aD,
+  flip as aE,
+  size as aF,
+  arrow as aG,
+  hide as aH,
+  autoUpdate as aI,
+  cancelRun as aJ,
+  reenqueueRun as aK,
+  wakeUpRun as aL,
+  resumeHook as aM,
+  recreateRun as aN,
+  getSpanDurationMs as aa,
+  getHighResInMs as ab,
+  ActiveSpanProvider as ac,
+  useActiveSpan as ad,
+  computeRootBounds as ae,
+  computeTimeMarkers as af,
+  TIMELINE_PADDING_PX as ag,
+  Timeline as ah,
+  TimelineHeader as ai,
+  SidebarDataProvider as aj,
+  hydrateResourceIOWithKey as ak,
+  hydrateResourceIO as al,
+  fetchHook as am,
+  fetchStep as an,
+  fetchStreams as ao,
+  Slot as ap,
+  Slottable as aq,
+  buttonVariants as ar,
+  isEncryptedData as as,
+  hydrateData as at,
+  getWebRevivers as au,
+  LIVE_UPDATE_INTERVAL_MS as av,
+  fetchEvent as aw,
+  getEncryptionKeyForRun as ax,
+  StreamViewer as ay,
+  composeRefs as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,