@workflow/web 5.0.0-beta.13 → 5.0.0-beta.15

package/build/client/assets/{mermaid-3ZIDBTTL-BDM4-x6u.js → mermaid-3ZIDBTTL-BMWEihLr.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-B8ZRlnzz.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-g14N5vQl.js","assets/index-B6-SzLmT.js","assets/index-BXZSIDEp.js","assets/highlighted-body-B3W2YXNL-BQ1pmB9V.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);
@@ -6779,6 +6779,41 @@ function formatDuration(ms, compact = false) {
   parts.push(`${seconds}s`);
   return parts.join(" ");
 }
+const preciseSecondsFormatter = new Intl.NumberFormat(void 0, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+});
+function formatDurationPrecise(ms) {
+  if (ms === 0) {
+    return "0s";
+  }
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+  const normalizedMs = Math.round(ms / 10) * 10;
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor(normalizedMs % MS_IN_DAY / MS_IN_HOUR);
+  const minutes = Math.floor(normalizedMs % MS_IN_HOUR / MS_IN_MINUTE);
+  const seconds = normalizedMs % MS_IN_MINUTE / MS_IN_SECOND;
+  const parts = [];
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+  return parts.join(" ");
+}
 function isDoStreamStep(stepName) {
   return stepName.endsWith("//doStreamStep");
 }
@@ -10858,7 +10893,6 @@ function shallowClone(o) {
   return o;
 }
 const propertyKeyTypes = /* @__PURE__ */ new Set(["string", "number", "symbol"]);
-const primitiveTypes = /* @__PURE__ */ new Set(["string", "number", "bigint", "boolean", "symbol", "undefined"]);
 function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -13164,51 +13198,6 @@ function handleReadonlyResult(payload) {
   payload.value = Object.freeze(payload.value);
   return payload;
 }
-const $ZodTemplateLiteral = /* @__PURE__ */ $constructor("$ZodTemplateLiteral", (inst, def) => {
-  $ZodType.init(inst, def);
-  const regexParts = [];
-  for (const part of def.parts) {
-    if (typeof part === "object" && part !== null) {
-      if (!part._zod.pattern) {
-        throw new Error(`Invalid template literal part, no pattern found: ${[...part._zod.traits].shift()}`);
-      }
-      const source = part._zod.pattern instanceof RegExp ? part._zod.pattern.source : part._zod.pattern;
-      if (!source)
-        throw new Error(`Invalid template literal part: ${part._zod.traits}`);
-      const start = source.startsWith("^") ? 1 : 0;
-      const end = source.endsWith("$") ? source.length - 1 : source.length;
-      regexParts.push(source.slice(start, end));
-    } else if (part === null || primitiveTypes.has(typeof part)) {
-      regexParts.push(escapeRegex(`${part}`));
-    } else {
-      throw new Error(`Invalid template literal part: ${part}`);
-    }
-  }
-  inst._zod.pattern = new RegExp(`^${regexParts.join("")}$`);
-  inst._zod.parse = (payload, _ctx) => {
-    if (typeof payload.value !== "string") {
-      payload.issues.push({
-        input: payload.value,
-        inst,
-        expected: "string",
-        code: "invalid_type"
-      });
-      return payload;
-    }
-    inst._zod.pattern.lastIndex = 0;
-    if (!inst._zod.pattern.test(payload.value)) {
-      payload.issues.push({
-        input: payload.value,
-        inst,
-        code: "invalid_format",
-        format: def.format ?? "template_literal",
-        pattern: inst._zod.pattern.source
-      });
-      return payload;
-    }
-    return payload;
-  };
-});
 const $ZodLazy = /* @__PURE__ */ $constructor("$ZodLazy", (inst, def) => {
   $ZodType.init(inst, def);
   defineLazy(inst._zod, "innerType", () => def.getter());
@@ -14361,14 +14350,6 @@ const literalProcessor = (schema, ctx, json, _params) => {
     json.enum = vals;
   }
 };
-const templateLiteralProcessor = (schema, _ctx, json, _params) => {
-  const _json = json;
-  const pattern = schema._zod.pattern;
-  if (!pattern)
-    throw new Error("Pattern not found in template literal");
-  _json.type = "string";
-  _json.pattern = pattern.source;
-};
 const customProcessor = (_schema, ctx, _json, _params) => {
   if (ctx.unrepresentable === "throw") {
     throw new Error("Custom types cannot be represented in JSON Schema");
@@ -15282,18 +15263,6 @@ function readonly(innerType) {
     innerType
   });
 }
-const ZodTemplateLiteral = /* @__PURE__ */ $constructor("ZodTemplateLiteral", (inst, def) => {
-  $ZodTemplateLiteral.init(inst, def);
-  ZodType.init(inst, def);
-  inst._zod.processJSONSchema = (ctx, json, params) => templateLiteralProcessor(inst, ctx, json);
-});
-function templateLiteral(parts, params) {
-  return new ZodTemplateLiteral({
-    type: "template_literal",
-    parts,
-    ...normalizeParams(params)
-  });
-}
 const ZodLazy = /* @__PURE__ */ $constructor("ZodLazy", (inst, def) => {
   $ZodLazy.init(inst, def);
   ZodType.init(inst, def);
@@ -15342,10 +15311,11 @@ function _instanceof(cls, params = {}) {
 function date(params) {
   return /* @__PURE__ */ _coercedDate(ZodDate, params);
 }
-object({
+const AttributeChangeSchema = object({
   key: string$2(),
   value: union([string$2(), _null()])
 });
+const AttributeChangesSchema = array(AttributeChangeSchema);
 const BinarySerializedDataSchema = _instanceof(Uint8Array);
 const LegacySerializedDataSchemaV1 = any();
 const SerializedDataSchema = union([
@@ -15370,6 +15340,8 @@ const EventTypeSchema = _enum([
   "run_completed",
   "run_failed",
   "run_cancelled",
+  // Run attribute events
+  "attr_set",
   // Step lifecycle events
   "step_created",
   "step_completed",
@@ -15485,13 +15457,34 @@ const WaitCompletedEventSchema = BaseEventSchema.extend({
     resumeAt: date().optional()
   }).optional()
 });
+const AttributeWriterSchema = discriminatedUnion("type", [
+  object({
+    type: literal("workflow")
+  }),
+  object({
+    type: literal("step"),
+    stepId: string$2(),
+    attempt: number$2()
+  })
+]);
+const AttrSetEventSchema = BaseEventSchema.extend({
+  eventType: literal("attr_set"),
+  correlationId: string$2().optional(),
+  eventData: object({
+    changes: AttributeChangesSchema,
+    writer: AttributeWriterSchema,
+    allowReservedAttributes: literal(true).optional()
+  })
+});
 const RunCreatedEventSchema = BaseEventSchema.extend({
   eventType: literal("run_created"),
   eventData: object({
     deploymentId: string$2(),
     workflowName: string$2(),
     input: SerializedDataSchema,
-    executionContext: record(string$2(), any()).optional()
+    executionContext: record(string$2(), any()).optional(),
+    attributes: record(string$2(), string$2()).optional(),
+    allowReservedAttributes: literal(true).optional()
   })
 });
 const RunStartedEventSchema = BaseEventSchema.extend({
@@ -15500,7 +15493,9 @@ const RunStartedEventSchema = BaseEventSchema.extend({
     input: SerializedDataSchema.optional(),
     deploymentId: string$2().optional(),
     workflowName: string$2().optional(),
-    executionContext: record(string$2(), any()).optional()
+    executionContext: record(string$2(), any()).optional(),
+    attributes: record(string$2(), string$2()).optional(),
+    allowReservedAttributes: literal(true).optional()
   }).optional()
 });
 const RunCompletedEventSchema = BaseEventSchema.extend({
@@ -15532,6 +15527,7 @@ discriminatedUnion("eventType", [
   RunCompletedEventSchema,
   RunFailedEventSchema,
   RunCancelledEventSchema,
+  AttrSetEventSchema,
   // Step lifecycle events
   StepCreatedEventSchema,
   StepCompletedEventSchema,
@@ -15553,6 +15549,7 @@ const AllEventsSchema = discriminatedUnion("eventType", [
   RunCompletedEventSchema,
   RunFailedEventSchema,
   RunCancelledEventSchema,
+  AttrSetEventSchema,
   // Step lifecycle events
   StepCreatedEventSchema,
   StepCompletedEventSchema,
@@ -15589,11 +15586,9 @@ object({
   isWebhook: boolean$2().optional(),
   isSystem: boolean$2().optional()
 });
-const QueuePrefix = union([
-  literal("__wkf_step_"),
-  literal("__wkf_workflow_")
-]);
-templateLiteral([QueuePrefix, string$2()]);
+string$2().regex(/^__(?:[a-z][a-z0-9]*_)?wkf_(?:workflow|step)_$/, "Must match __wkf_{workflow|step}_ or __{namespace}_wkf_{workflow|step}_");
+string$2().regex(/^__(?:[a-z][a-z0-9]*_)?wkf_(?:workflow|step)_.+$/, "Must be a valid queue name with a recognized prefix");
+string$2().regex(/^[a-z][a-z0-9]*$/, "Must be lowercase alphanumeric, starting with a letter");
 string$2().brand().describe("A stored queue message ID");
 const TraceCarrierSchema = record(string$2(), string$2());
 const RunInputSchema = object({
@@ -15601,7 +15596,9 @@ const RunInputSchema = object({
   deploymentId: string$2(),
   workflowName: string$2(),
   specVersion: number$2(),
-  executionContext: record(string$2(), any()).optional()
+  executionContext: record(string$2(), any()).optional(),
+  /** Initial plaintext run attributes, for resilient run creation. */
+  attributes: record(string$2(), string$2()).optional()
 });
 const WorkflowInvokePayloadSchema = object({
   runId: string$2(),
@@ -43315,7 +43312,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-B8ZRlnzz.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-BQ1pmB9V.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 }) })] }) });
@@ -44257,7 +44254,7 @@ const eventFailed = "_eventFailed_1fmf2_1432";
 const eventRetrying = "_eventRetrying_1fmf2_1441";
 const eventHook = "_eventHook_1fmf2_1450";
 const eventDefault = "_eventDefault_1fmf2_1459";
-const styles = {
+const styles$1 = {
   traceNode,
   childRow,
   spanNode,
@@ -44727,15 +44724,15 @@ const SEGMENT_LABELS = {
 function SegmentLayer({ segments, spanDuration: spanDuration2 }) {
   if (segments.length === 0)
     return null;
-  return jsxRuntimeExports.jsx("div", { className: styles.segmentLayer, children: segments.map((seg, i) => {
-    const className = styles[SEGMENT_CLASS_MAP[seg.status]];
+  return jsxRuntimeExports.jsx("div", { className: styles$1.segmentLayer, children: segments.map((seg, i) => {
+    const className = styles$1[SEGMENT_CLASS_MAP[seg.status]];
     const segDuration = (seg.endFraction - seg.startFraction) * spanDuration2;
     const label = SEGMENT_LABELS[seg.status];
     const style2 = {
       left: `${seg.startFraction * 100}%`,
       width: `${(seg.endFraction - seg.startFraction) * 100}%`
     };
-    return jsxRuntimeExports.jsx("div", { className: `${styles.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
+    return jsxRuntimeExports.jsx("div", { className: `${styles$1.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
   }) });
 }
 function getSegmentTags(segments, spanDuration2) {
@@ -44764,7 +44761,7 @@ function TextContent({ node: node2, layout, durationMs, segmentTags }) {
     return null;
   }
   const showTags = segmentTags && segmentTags.length > 0 && (layout.isHovered || layout.width > 200);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles.spanDuration, children: duration2 }) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles$1.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles$1.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles$1.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles$1.spanDuration, children: duration2 }) : null] });
 }
 function DefaultContent({ node: node2, layout }) {
   return jsxRuntimeExports.jsx(TextContent, { node: node2, layout });
@@ -44887,8 +44884,8 @@ function getSpanLayout(resourceType, node2, root2, scale, scrollSnapshotRef) {
 }
 const getSpanColorClassName = (node2) => {
   if (node2.isVercel)
-    return String(styles.colorVercel);
-  return String(styles[`color${node2.resourceIndex % 5}`]);
+    return String(styles$1.colorVercel);
+  return String(styles$1[`color${node2.resourceIndex % 5}`]);
 };
 function getTerminalTimestamp(resourceType, node2) {
   const events = node2.events;
@@ -45031,7 +45028,7 @@ const SpanComponent = reactExports.memo(function SpanComponent2({ node: node2, r
     return () => cancelAnimationFrame(rafId);
   }, [isLive, canonicalStartTime, scale]);
   const renderNode = segmentNode;
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles.spanNode, layout.isHuge && styles.huge, layout.isSmall && styles.small, layout.isExpanded && styles.xHover, node2.isHighlighted ? styles.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles.unlit, customClassName, hasSegments2 && styles.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles$1.spanNode, layout.isHuge && styles$1.huge, layout.isSmall && styles$1.small, layout.isExpanded && styles$1.xHover, node2.isHighlighted ? styles$1.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$1.unlit, customClassName, hasSegments2 && styles$1.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
 });
 const BOUNDARY_LABELS = {
   step_started: "Started",
@@ -45089,17 +45086,17 @@ const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ even
   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}
-${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles.spanNodeEvent, customClassName, asBoundary && styles.boundaryMarker, node2.isHighlighted ? styles.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles.unlit), "data-hovered": event.isHovered, ref, style: {
+${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles$1.spanNodeEvent, customClassName, asBoundary && styles$1.boundaryMarker, node2.isHighlighted ? styles$1.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$1.unlit), "data-hovered": event.isHovered, ref, style: {
     left,
     top
-  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles.hoverInfo, isLeftAligned ? styles.alignStart : styles.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles.eventDiamond })] });
+  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles$1.hoverInfo, isLeftAligned ? styles$1.alignStart : styles$1.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$1.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles$1.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles$1.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles$1.eventDiamond })] });
 });
 const colorTokenMap = {
   "gray-700": "var(--ds-gray-700)",
   "gray-900": "var(--ds-gray-900)"
 };
 function IconChevronDown({ size: size2 = 16 }) {
-  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
+  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles$1.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
 }
 function IconExternalSmall({ size: size2 = 16, color: color5 = "gray-900" }) {
   const style2 = { color: colorTokenMap[color5] || color5 };
@@ -45114,7 +45111,7 @@ function Link(props) {
   return jsxRuntimeExports.jsx("a", { className, href, ...rest, children: children2 });
 }
 function Skeleton({ width, height, rounded }) {
-  return jsxRuntimeExports.jsx("span", { className: clsx(styles.skeleton, rounded && styles.skeletonRounded), style: { width, height }, "aria-hidden": true });
+  return jsxRuntimeExports.jsx("span", { className: clsx(styles$1.skeleton, rounded && styles$1.skeletonRounded), style: { width, height }, "aria-hidden": true });
 }
 const EXPANDED_STORAGE_KEY_PREFIX = "vc-trace-span-exp:";
 function DetailGroup({ name: name2, className = "", children: children2 }) {
@@ -45130,7 +45127,7 @@ function DetailGroup({ name: name2, className = "", children: children2 }) {
       return willBeExpanded;
     });
   }, [name2]);
-  return jsxRuntimeExports.jsxs("div", { className: clsx(styles.detailGroup, isExpanded ? styles.expanded : styles.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
+  return jsxRuntimeExports.jsxs("div", { className: clsx(styles$1.detailGroup, isExpanded ? styles$1.expanded : styles$1.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles$1.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
 }
 reactExports.memo(function EntrySpanLinks({ getQuickLinks, span }) {
   const links = getQuickLinks(span);
@@ -45154,7 +45151,7 @@ function usePromise(promise) {
 }
 function EntrySpanLink({ name: name2, link: linkPromise }) {
   const link2 = usePromise(linkPromise);
-  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles.spanDetailPanelAttribute, styles.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles.spanDetailPanelAttributeValue, styles.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton, { height: 18, rounded: true, width: 18 })] }) })] });
+  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles$1.spanDetailPanelAttribute, styles$1.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles$1.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles$1.spanDetailPanelAttributeValue, styles$1.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton, { height: 18, rounded: true, width: 18 })] }) })] });
 }
 function useImmediateStyle(ref) {
   const styleRef = reactExports.useRef({});
@@ -45313,10 +45310,10 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
       $timeline.removeEventListener("scroll", onScroll);
     };
   }, [timelineRef, thumbRatio, setThumbStyle]);
-  return jsxRuntimeExports.jsxs("div", { className: styles.mapContainer, ref: containerRef, style: {
+  return jsxRuntimeExports.jsxs("div", { className: styles$1.mapContainer, ref: containerRef, style: {
     width: thumbWidth > 0 ? mapWidth : "100%",
     height: MAP_HEIGHT
-  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles.mapThumb, ref: thumbRef, style: {
+  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles$1.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles$1.mapThumb, ref: thumbRef, style: {
     transform: thumbStyle.transform,
     width: thumbWidth > 0 ? thumbWidth : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
     top: 2,
@@ -45757,15 +45754,22 @@ function computeSleepSegmentsFromSpan(_startMs, duration2, _events) {
     return [];
   return [{ startFraction: 0, endFraction: 1, status: "sleeping" }];
 }
+function runSegmentStatus(runStatus) {
+  if (runStatus === "failed")
+    return "failed";
+  if (runStatus === "running" || runStatus === "pending")
+    return "running";
+  return "completed";
+}
 function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, attributes) {
   const segments = [];
   if (duration2 <= 0)
     return segments;
   const sorted = [...events].map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) })).sort((a2, b2) => a2.time - b2.time);
+  const runData = attributes == null ? void 0 : attributes.data;
+  const runStatus = runData == null ? void 0 : runData.status;
   const hasRunCreated = sorted.some((e) => e.name === "run_created");
   if (!hasRunCreated) {
-    const runData = attributes == null ? void 0 : attributes.data;
-    const runStatus = runData == null ? void 0 : runData.status;
     return computeV1RunSegments(startMs, duration2, activeStartMs, runStatus);
   }
   const failedEvent = sorted.find((e) => e.name === "run_failed");
@@ -45784,7 +45788,7 @@ function computeRunSegmentsFromSpan(startMs, duration2, activeStartMs, events, a
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? "failed" : "running"
+    status: failedEvent ? "failed" : runSegmentStatus(runStatus)
   });
   return segments;
 }
@@ -45805,7 +45809,7 @@ function computeV1RunSegments(startMs, duration2, activeStartMs, runStatus) {
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === "failed" ? "failed" : "running"
+    status: runSegmentStatus(runStatus)
   });
   return segments;
 }
@@ -45874,6 +45878,10 @@ function useRowWindow(ref, rowCount, rowHeight, overscan = 12) {
   return range;
 }
 const ROW_HEIGHT_PX = 40;
+const runningStripes = "_runningStripes_62ud0_1";
+const styles = {
+  runningStripes
+};
 const TINY_BAR_BOX_SIZE_PX = 24;
 const TINY_BAR_WIDTH_PX = 4;
 const TIMELINE_PADDING_PX = 16;
@@ -45882,6 +45890,7 @@ const SEGMENT_CLASSES = {
   retrying: "bg-gray-400 border border-gray-500",
   waiting: "bg-gray-400 border border-gray-500",
   running: "bg-blue-200 border border-blue-500",
+  completed: "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",
@@ -45891,6 +45900,13 @@ const TIMELINE_INSET_STYLE = {
   left: TIMELINE_PADDING_PX,
   right: TIMELINE_PADDING_PX
 };
+const ACTIVE_SEGMENT_STATUSES = /* @__PURE__ */ new Set([
+  "running",
+  "received"
+]);
+function RunningStripes() {
+  return jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: styles.runningStripes });
+}
 function computeBarGeometry(startMs, endMs, viewStart, viewEnd, containerWidth) {
   const viewDuration = viewEnd - viewStart;
   const visibleStartMs = Math.max(startMs, viewStart);
@@ -45963,21 +45979,27 @@ function BoundaryArrow({ direction }) {
 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 LeadInConnector({ leftPct, widthPct, label }) {
+  return jsxRuntimeExports.jsxs("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: {
+    left: `calc(${leftPct}% + 0.5px)`,
+    width: `calc(${widthPct}% - 1px)`
+  }, children: [jsxRuntimeExports.jsx("div", { className: "absolute left-0 top-1/2 h-4 w-px -translate-y-1/2 bg-gray-500" }), jsxRuntimeExports.jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gray-500" }), 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);
+    if (seg.status === "queued") {
+      const leadInLabel = formatDurationPrecise(seg.fullDurationMs);
+      const showLeadInLabel = seg.pixelWidth >= Math.max(40, leadInLabel.length * 6 + 12);
+      return jsxRuntimeExports.jsx(LeadInConnector, { leftPct: seg.leftPct, widthPct: seg.widthPct, label: showLeadInLabel ? leadInLabel : null }, i);
+    }
+    const label = formatDurationPrecise(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: {
+    return jsxRuntimeExports.jsxs("div", { className: cn$4("absolute h-full overflow-hidden 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 }, i);
+      minWidth: 1
+    }, children: [ACTIVE_SEGMENT_STATUSES.has(seg.status) ? jsxRuntimeExports.jsx(RunningStripes, {}) : null, showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] }, i);
   }) });
 }
 const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
@@ -45993,7 +46015,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const colors = getResourceColor(span.resource);
   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 totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel = geometry.visiblePixelWidth >= Math.max(40, totalLabel.length * 6 + 12);
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
@@ -48631,58 +48653,59 @@ export {
   hasEncryptedFields as a7,
   EVENT_DATA_REF_FIELDS as a8,
   useSidebarDataOptional as a9,
-  Slot as aA,
-  Slottable as aB,
-  buttonVariants as aC,
-  fetchEvent as aD,
-  fetchEventsByCorrelationId as aE,
-  isEncryptedData as aF,
-  hydrateData as aG,
-  getWebRevivers as aH,
-  LIVE_UPDATE_INTERVAL_MS as aI,
-  getEncryptionKeyForRun as aJ,
-  StreamViewer as aK,
-  composeRefs as aL,
-  useFloating as aM,
-  offset as aN,
-  shift as aO,
-  limitShift as aP,
-  flip as aQ,
-  size as aR,
-  arrow as aS,
-  hide as aT,
-  autoUpdate as aU,
-  cancelRun as aV,
-  reenqueueRun as aW,
-  wakeUpRun as aX,
-  resumeHook as aY,
-  recreateRun as aZ,
+  fetchStreams as aA,
+  Slot as aB,
+  Slottable as aC,
+  buttonVariants as aD,
+  fetchEvent as aE,
+  fetchEventsByCorrelationId as aF,
+  isEncryptedData as aG,
+  hydrateData as aH,
+  getWebRevivers as aI,
+  LIVE_UPDATE_INTERVAL_MS as aJ,
+  getEncryptionKeyForRun as aK,
+  StreamViewer as aL,
+  composeRefs as aM,
+  useFloating as aN,
+  offset as aO,
+  shift as aP,
+  limitShift as aQ,
+  flip as aR,
+  size as aS,
+  arrow as aT,
+  hide as aU,
+  autoUpdate as aV,
+  cancelRun as aW,
+  reenqueueRun as aX,
+  wakeUpRun as aY,
+  resumeHook as aZ,
+  recreateRun as a_,
   clsx as aa,
   useRowWindow as ab,
   isSpanDimmedBySearch as ac,
   ROW_HEIGHT_PX as ad,
   getSpanDurationMs as ae,
-  TooltipProvider as af,
-  ActiveSpanProvider as ag,
-  useActiveSpan as ah,
-  useSidebarData as ai,
-  searchSpans as aj,
-  computeRootBounds as ak,
-  computeTimeMarkers as al,
-  getHighResInMs as am,
-  TIMELINE_PADDING_PX as an,
-  Timeline as ao,
-  TimelineHeader as ap,
-  IconButton as aq,
-  Tooltip$1 as ar,
-  TooltipTrigger$1 as as,
-  TooltipContent$1 as at,
-  SidebarDataProvider as au,
-  hydrateResourceIOWithKey as av,
-  hydrateResourceIO as aw,
-  fetchHook as ax,
-  fetchStep as ay,
-  fetchStreams as az,
+  formatDurationPrecise as af,
+  TooltipProvider as ag,
+  ActiveSpanProvider as ah,
+  useActiveSpan as ai,
+  useSidebarData as aj,
+  searchSpans as ak,
+  computeRootBounds as al,
+  computeTimeMarkers as am,
+  getHighResInMs as an,
+  TIMELINE_PADDING_PX as ao,
+  Timeline as ap,
+  TimelineHeader as aq,
+  IconButton as ar,
+  Tooltip$1 as as,
+  TooltipTrigger$1 as at,
+  TooltipContent$1 as au,
+  SidebarDataProvider as av,
+  hydrateResourceIOWithKey as aw,
+  hydrateResourceIO as ax,
+  fetchHook as ay,
+  fetchStep as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,