@workflow/web 5.0.0-beta.41 → 5.0.0-beta.43

package/build/client/assets/{mermaid-3ZIDBTTL-DchhEfRL.js → mermaid-3ZIDBTTL-gEw-Ch1C.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/zstd-browser-decoder-BTw1glGN.js","assets/index-PFjW8YjQ.js","assets/highlighted-body-B3W2YXNL-DmmWu7VM.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/zstd-browser-decoder-CAEVa0bm.js","assets/index-PFjW8YjQ.js","assets/highlighted-body-B3W2YXNL-Dc1dLaUr.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);
@@ -10110,80 +10110,6 @@ const Lr = /* @__PURE__ */ K$3(() => {
 function kn$1(t, e, n) {
   return e !== "normal" && !(e != null && e.endsWith("px")) && n(`${t} was not resolved to pixel value correctly`, e, Ct$1.WARN), e === "normal" ? 0 : parseInt(e != null ? e : "0", 10);
 }
-const scriptRel = "modulepreload";
-const assetsURL = function(dep) {
-  return "/" + dep;
-};
-const seen = {};
-const __vitePreload = function preload(baseModule, deps, importerUrl) {
-  let promise = Promise.resolve();
-  if (deps && deps.length > 0) {
-    let allSettled2 = function(promises) {
-      return Promise.all(
-        promises.map(
-          (p2) => Promise.resolve(p2).then(
-            (value) => ({ status: "fulfilled", value }),
-            (reason) => ({ status: "rejected", reason })
-          )
-        )
-      );
-    };
-    document.getElementsByTagName("link");
-    const cspNonceMeta = document.querySelector(
-      "meta[property=csp-nonce]"
-    );
-    const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
-    promise = allSettled2(
-      deps.map((dep) => {
-        dep = assetsURL(dep);
-        if (dep in seen) return;
-        seen[dep] = true;
-        const isCss = dep.endsWith(".css");
-        const cssSelector = isCss ? '[rel="stylesheet"]' : "";
-        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
-          return;
-        }
-        const link2 = document.createElement("link");
-        link2.rel = isCss ? "stylesheet" : scriptRel;
-        if (!isCss) {
-          link2.as = "script";
-        }
-        link2.crossOrigin = "";
-        link2.href = dep;
-        if (cspNonce) {
-          link2.setAttribute("nonce", cspNonce);
-        }
-        document.head.appendChild(link2);
-        if (isCss) {
-          return new Promise((res, rej) => {
-            link2.addEventListener("load", res);
-            link2.addEventListener(
-              "error",
-              () => rej(new Error(`Unable to preload CSS for ${dep}`))
-            );
-          });
-        }
-      })
-    );
-  }
-  function handlePreloadError(err) {
-    const e = new Event("vite:preloadError", {
-      cancelable: true
-    });
-    e.payload = err;
-    window.dispatchEvent(e);
-    if (!e.defaultPrevented) {
-      throw err;
-    }
-  }
-  return promise.then((res) => {
-    for (const item of res || []) {
-      if (item.status !== "rejected") continue;
-      handlePreloadError(item.reason);
-    }
-    return baseModule().catch(handlePreloadError);
-  });
-};
 function $constructor(name2, initializer2, params) {
   function init(inst, def) {
     if (!inst._zod) {
@@ -13341,6 +13267,18 @@ function _array(Class, element2, params) {
   });
 }
 // @__NO_SIDE_EFFECTS__
+function _custom(Class, fn2, _params) {
+  const norm = normalizeParams(_params);
+  norm.abort ?? (norm.abort = true);
+  const schema = new Class({
+    type: "custom",
+    check: "custom",
+    fn: fn2,
+    ...norm
+  });
+  return schema;
+}
+// @__NO_SIDE_EFFECTS__
 function _refine(Class, fn2, _params) {
   const schema = new Class({
     type: "custom",
@@ -14847,6 +14785,9 @@ const ZodCustom = /* @__PURE__ */ $constructor("ZodCustom", (inst, def) => {
   ZodType.init(inst, def);
   inst._zod.processJSONSchema = (ctx, json, params) => customProcessor(inst, ctx);
 });
+function custom(fn2, _params) {
+  return /* @__PURE__ */ _custom(ZodCustom, fn2 ?? (() => true), _params);
+}
 function refine(fn2, _params = {}) {
   return /* @__PURE__ */ _refine(ZodCustom, fn2, _params);
 }
@@ -14954,6 +14895,21 @@ const TERMINAL_STEP_EVENT_TYPES = TerminalStepEventTypeSchema.options;
 function isTerminalStepEventType(eventType) {
   return TERMINAL_STEP_EVENT_TYPES.includes(eventType);
 }
+const ENTITY_EVENT_CLASS_BY_TYPE = {
+  step_created: "step_created",
+  step_started: "step_started",
+  step_retrying: "step_retrying",
+  step_completed: "step_terminal",
+  step_failed: "step_terminal",
+  wait_created: "wait_created",
+  wait_completed: "wait_completed",
+  hook_created: "hook_created",
+  hook_disposed: "hook_disposed",
+  run_started: "run_started"
+};
+function entityEventClass(eventType) {
+  return ENTITY_EVENT_CLASS_BY_TYPE[eventType];
+}
 const HookLifecycleEventTypeSchema = EventTypeSchema.extract([
   "hook_created",
   "hook_received",
@@ -15680,6 +15636,19 @@ const RunInputSchema = object({
    */
   environment: string$2().optional()
 });
+const StepDispatchInputSchema = object({
+  /**
+   * The serialized step input, reused verbatim from the direct write. Always
+   * binary: producers only attach `stepInput` when the dehydrated input is a
+   * `Uint8Array` and the run's queue transport preserves bytes (CBOR).
+   * Validated here so a malformed or transport-mangled payload fails the
+   * message parse instead of being silently written into a `step_created` as
+   * non-binary data. `Buffer` is a `Uint8Array` subclass and passes.
+   */
+  input: custom((value) => value instanceof Uint8Array, {
+    message: "stepInput.input must be a Uint8Array"
+  })
+});
 const HookResumeInputSchema = object({
   /** Stable idempotency key minted once per `resumeHook()` call. */
   resumeId: string$2(),
@@ -15713,6 +15682,22 @@ const HookResumeInputSchema = object({
    */
   deploymentId: string$2().optional()
 });
+const HookResumeTimingSchema = object({
+  /** Epoch ms at entry into `resumeHook()` — the start of the TTR window. */
+  resumeRequestedAtMs: number$3(),
+  /** Epoch ms immediately before the queue publish was requested. */
+  queuePublishRequestedAtMs: number$3(),
+  /** Which `resumeHook()` dispatch path ran: `parallel` or `sequential`. */
+  strategy: string$2().optional(),
+  /** Epoch ms the final consumer's queue handler was entered. */
+  consumerStartedAtMs: number$3().optional(),
+  /** Epoch ms this invocation's first replay pass began. */
+  replayStartedAtMs: number$3().optional(),
+  /** Epoch ms replay first encountered a durable step after the resume. */
+  nextStepEncounteredAtMs: number$3().optional(),
+  /** How the consumer initialized replay state: see `ResumeSetupSource`. */
+  setupSource: string$2().optional()
+});
 const WorkflowInvokePayloadSchema = object({
   runId: string$2(),
   traceCarrier: TraceCarrierSchema.optional(),
@@ -15746,7 +15731,28 @@ const WorkflowInvokePayloadSchema = object({
    * fast path. A consumer that understands this field idempotently ensures the
    * `hook_received` event exists (keyed by `resumeId`) before replaying.
    */
-  hookInput: HookResumeInputSchema.optional()
+  hookInput: HookResumeInputSchema.optional(),
+  /**
+   * Resilient step dispatch data, only present alongside `stepId` when the
+   * producer parallelized the `step_created` write with this queue publish. A
+   * consumer that understands this field idempotently ensures the
+   * `step_created` event exists (keyed by `stepId`) before executing the step.
+   */
+  stepInput: StepDispatchInputSchema.optional(),
+  /**
+   * Hook-resume TTR timing. Present on both `resumeHook()` dispatch paths
+   * (unlike `hookInput`, which only rides the parallel fast path), and
+   * forwarded onto a dispatched step message when the resuming invocation
+   * hands the next durable step to another invocation. Purely observational —
+   * see {@link HookResumeTimingSchema}.
+   *
+   * `.catch(undefined)` because this field must never be able to fail the
+   * parse of the invocation payload: a malformed value (a NaN boundary, a
+   * shape change from a future producer) would otherwise throw on every
+   * delivery of that message and burn the run's delivery budget over a
+   * telemetry field. Anything unparseable degrades to "no measurement".
+   */
+  hookResumeTiming: HookResumeTimingSchema.optional().catch(void 0)
 });
 const HealthCheckPayloadSchema = object({
   __healthCheck: literal(true),
@@ -15851,6 +15857,80 @@ object({
 });
 string$2().ulid();
 templateLiteral(["wrun_", ulid()]);
+const scriptRel = "modulepreload";
+const assetsURL = function(dep) {
+  return "/" + dep;
+};
+const seen = {};
+const __vitePreload = function preload(baseModule, deps, importerUrl) {
+  let promise = Promise.resolve();
+  if (deps && deps.length > 0) {
+    let allSettled2 = function(promises) {
+      return Promise.all(
+        promises.map(
+          (p2) => Promise.resolve(p2).then(
+            (value) => ({ status: "fulfilled", value }),
+            (reason) => ({ status: "rejected", reason })
+          )
+        )
+      );
+    };
+    document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector(
+      "meta[property=csp-nonce]"
+    );
+    const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
+    promise = allSettled2(
+      deps.map((dep) => {
+        dep = assetsURL(dep);
+        if (dep in seen) return;
+        seen[dep] = true;
+        const isCss = dep.endsWith(".css");
+        const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+          return;
+        }
+        const link2 = document.createElement("link");
+        link2.rel = isCss ? "stylesheet" : scriptRel;
+        if (!isCss) {
+          link2.as = "script";
+        }
+        link2.crossOrigin = "";
+        link2.href = dep;
+        if (cspNonce) {
+          link2.setAttribute("nonce", cspNonce);
+        }
+        document.head.appendChild(link2);
+        if (isCss) {
+          return new Promise((res, rej) => {
+            link2.addEventListener("load", res);
+            link2.addEventListener(
+              "error",
+              () => rej(new Error(`Unable to preload CSS for ${dep}`))
+            );
+          });
+        }
+      })
+    );
+  }
+  function handlePreloadError(err) {
+    const e = new Event("vite:preloadError", {
+      cancelable: true
+    });
+    e.payload = err;
+    window.dispatchEvent(e);
+    if (!e.defaultPrevented) {
+      throw err;
+    }
+  }
+  return promise.then((res) => {
+    for (const item of res || []) {
+      if (item.status !== "rejected") continue;
+      handlePreloadError(item.reason);
+    }
+    return baseModule().catch(handlePreloadError);
+  });
+};
 const UNDEFINED = -1;
 const HOLE = -2;
 const NAN = -3;
@@ -17442,7 +17522,7 @@ async function hydrateResourceIOAsync(resource, key) {
     return { hydrateDataWithKey: hydrateDataWithKey3, deriveRunPayloadKeys: deriveRunPayloadKeys3 };
   }, true ? void 0 : void 0);
   const { ensureZstdDecoderRegistered } = await __vitePreload(async () => {
-    const { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 } = await import("./zstd-browser-decoder-BTw1glGN.js");
+    const { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 } = await import("./zstd-browser-decoder-CAEVa0bm.js");
     return { ensureZstdDecoderRegistered: ensureZstdDecoderRegistered2 };
   }, true ? __vite__mapDeps([0,1]) : void 0);
   ensureZstdDecoderRegistered();
@@ -18962,23 +19042,17 @@ function Spinner({ size: size2 = 14, color: color2 }) {
     lineW: size2 * 0.24,
     lineH: size2 * 0.08
   };
-  return jsxRuntimeExports.jsxs("span", { style: {
-    display: "inline-flex",
-    position: "relative",
+  return jsxRuntimeExports.jsxs("span", { className: "relative inline-flex", style: {
     width: size2,
     height: size2
-  }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: KEYFRAMES } }), config2.delays.map((delay, i) => jsxRuntimeExports.jsx("span", { style: {
-    position: "absolute",
-    left: "50%",
-    top: "50%",
+  }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: KEYFRAMES } }), config2.delays.map((delay, i) => jsxRuntimeExports.jsx("span", { className: "absolute top-1/2 left-1/2 rounded-[1px] bg-gray-700 [animation-iteration-count:infinite] [animation-name:wf-spinner-fade] [animation-timing-function:linear]", style: {
     width: config2.lineW,
     height: config2.lineH,
     marginLeft: -config2.lineW / 2,
     marginTop: -config2.lineH / 2,
-    borderRadius: 1,
-    backgroundColor: color2 ?? "var(--ds-gray-700)",
+    backgroundColor: color2,
     transform: `rotate(${i * config2.angle}deg) translate(${size2 * 0.36}px)`,
-    animation: `wf-spinner-fade ${config2.duration}ms linear infinite`,
+    animationDuration: `${config2.duration}ms`,
     animationDelay: `${delay}ms`
   } }, delay))] });
 }
@@ -19040,33 +19114,18 @@ function EncryptedInlineLabel() {
       ctx.onDecrypt();
     }, 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",
-    verticalAlign: "middle",
-    marginRight: "3px",
-    marginTop: "-1px"
-  } }), "Encrypted"] });
+  return jsxRuntimeExports.jsxs("span", { className: "text-gray-600 italic", children: [jsxRuntimeExports.jsx(Lock, { className: "-mt-px mr-[3px] inline h-3 w-3 align-middle" }), "Encrypted"] });
 }
 function StreamRefInline({ streamRef }) {
   const onStreamClick = reactExports.useContext(StreamClickContext);
-  const [hovered, setHovered] = reactExports.useState(false);
-  return jsxRuntimeExports.jsxs("button", { type: "button", className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors", style: {
-    backgroundColor: hovered ? "var(--ds-blue-200)" : "var(--ds-blue-100)",
-    color: "var(--ds-blue-900)",
-    border: "1px solid var(--ds-blue-300)"
-  }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: (e) => {
+  return jsxRuntimeExports.jsxs("button", { type: "button", className: "inline-flex cursor-pointer items-center gap-1 rounded border border-blue-300 bg-blue-100 px-1.5 py-0.5 font-mono text-[10px] text-blue-900 underline decoration-transparent transition-colors hover:bg-blue-200", onClick: (e) => {
     e.stopPropagation();
     onStreamClick == null ? void 0 : onStreamClick(streamRef.streamId);
   }, title: `View stream: ${streamRef.streamId}`, children: [jsxRuntimeExports.jsx("span", { children: "📡" }), jsxRuntimeExports.jsx("span", { children: streamRef.streamId })] });
 }
 function RunRefInline({ runRef }) {
   const onRunClick = reactExports.useContext(RunClickContext);
-  const [hovered, setHovered] = reactExports.useState(false);
-  return jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors", style: {
-    backgroundColor: hovered ? "var(--ds-purple-200)" : "var(--ds-purple-100)",
-    color: "var(--ds-purple-900)",
-    border: "1px solid var(--ds-purple-300)"
-  }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onClick: (e) => {
+  return jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center gap-1 rounded border border-purple-300 bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] text-purple-900 underline decoration-transparent transition-colors hover:bg-purple-200", onClick: (e) => {
     e.stopPropagation();
     onRunClick == null ? void 0 : onRunClick(runRef.runId);
   }, title: `View run: ${runRef.runId}`, children: jsxRuntimeExports.jsx("span", { children: runRef.runId }) });
@@ -19074,24 +19133,17 @@ function RunRefInline({ runRef }) {
 function DecodedBytesChunk({ decodedText, source }) {
   const [selectedView, setSelectedView] = reactExports.useState("decoded");
   const parsed = parseChunkData(decodedText);
-  return jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [selectedView === "decoded" ? jsxRuntimeExports.jsx("div", { className: "min-w-0", children: typeof parsed === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: deserializeChunkText(parsed) }) : jsxRuntimeExports.jsx(DataInspector, { data: parsed, expandLevel: 1 }) }) : jsxRuntimeExports.jsx(DecodedBytesInspector, { decodedText, source }), jsxRuntimeExports.jsx("div", { className: "mt-2 flex", children: jsxRuntimeExports.jsxs("div", { className: "inline-flex overflow-hidden rounded border", style: { borderColor: "var(--ds-gray-400)" }, title: `${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`, children: [jsxRuntimeExports.jsx("button", { type: "button", className: "h-5 px-1.5 text-[10px] font-medium", style: {
-    backgroundColor: selectedView === "decoded" ? "var(--ds-gray-200)" : "var(--ds-gray-100)",
-    color: "var(--ds-gray-900)"
-  }, onClick: () => setSelectedView("decoded"), "aria-pressed": selectedView === "decoded", "aria-label": "Show decoded text", children: "Decoded" }), jsxRuntimeExports.jsx("button", { type: "button", className: "h-5 border-l px-1.5 text-[10px] font-medium", style: {
-    borderColor: "var(--ds-gray-400)",
-    backgroundColor: selectedView === "bytes" ? "var(--ds-gray-200)" : "var(--ds-gray-100)",
-    color: "var(--ds-gray-900)"
-  }, onClick: () => setSelectedView("bytes"), "aria-pressed": selectedView === "bytes", "aria-label": "Show raw bytes summary", children: "Bytes" })] }) })] });
+  return jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [selectedView === "decoded" ? jsxRuntimeExports.jsx("div", { className: "min-w-0", children: typeof parsed === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words text-gray-1000", children: deserializeChunkText(parsed) }) : jsxRuntimeExports.jsx(DataInspector, { data: parsed, expandLevel: 1 }) }) : jsxRuntimeExports.jsx(DecodedBytesInspector, { decodedText, source }), jsxRuntimeExports.jsx("div", { className: "mt-2 flex", children: jsxRuntimeExports.jsxs("div", { className: "inline-flex overflow-hidden rounded border border-gray-400", title: `${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`, children: [jsxRuntimeExports.jsx("button", { type: "button", className: cn$4("h-5 px-1.5 font-medium text-[10px] text-gray-900", selectedView === "decoded" ? "bg-gray-200" : "bg-gray-100"), onClick: () => setSelectedView("decoded"), "aria-pressed": selectedView === "decoded", "aria-label": "Show decoded text", children: "Decoded" }), jsxRuntimeExports.jsx("button", { type: "button", className: cn$4("h-5 border-gray-400 border-l px-1.5 font-medium text-[10px] text-gray-900", selectedView === "bytes" ? "bg-gray-200" : "bg-gray-100"), onClick: () => setSelectedView("bytes"), "aria-pressed": selectedView === "bytes", "aria-label": "Show raw bytes summary", children: "Bytes" })] }) })] });
 }
 function DecodedBytesInspector({ decodedText, source }) {
   const [expanded, setExpanded] = reactExports.useState(false);
-  return jsxRuntimeExports.jsxs("div", { className: "font-mono", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "flex max-w-full items-start gap-1 text-left", style: { color: "var(--ds-gray-1000)" }, onClick: () => setExpanded((value) => !value), title: `${source.type} decoded as ${source.encoding.toUpperCase()} text`, children: [jsxRuntimeExports.jsx("span", { className: "select-none", style: { color: "var(--ds-gray-700)" }, children: expanded ? "▼" : "▶" }), jsxRuntimeExports.jsx("span", { className: "min-w-0 break-words", children: source.rawSummary })] }), expanded && jsxRuntimeExports.jsxs("div", { className: "mt-1 pl-5", children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: "decoded: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-green-900)" }, children: JSON.stringify(decodedText) })] })] });
+  return jsxRuntimeExports.jsxs("div", { className: "font-mono", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "flex max-w-full items-start gap-1 text-left text-gray-1000", onClick: () => setExpanded((value) => !value), title: `${source.type} decoded as ${source.encoding.toUpperCase()} text`, children: [jsxRuntimeExports.jsx("span", { className: "select-none text-gray-700", children: expanded ? "▼" : "▶" }), jsxRuntimeExports.jsx("span", { className: "min-w-0 break-words", children: source.rawSummary })] }), expanded && jsxRuntimeExports.jsxs("div", { className: "mt-1 pl-5", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-700", children: "decoded: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words text-green-900", children: JSON.stringify(decodedText) })] })] });
 }
 function BytesDisplayValue({ display }) {
   if (display.decodedFrom) {
     return jsxRuntimeExports.jsx(DecodedBytesChunk, { decodedText: display.text, source: display.decodedFrom });
   }
-  return jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: display.text });
+  return jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words text-gray-1000", children: display.text });
 }
 function formatField(field) {
   return field === "" ? '""' : field;
@@ -19908,9 +19960,7 @@ function ContextCardProvider({ children: children2, portalTarget }) {
     distanceFromLast,
     lastOrigin
   ]);
-  return jsxRuntimeExports.jsxs(ContextCardContext.Provider, { value: contextValue, children: [children2, isMounted ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: "w-full h-full inset-0 fixed pointer-events-none z-[100000]", ref, children: jsxRuntimeExports.jsx("div", { className: "min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", style: {
-    opacity: visible ? 1 : 0
-  }, children: jsxRuntimeExports.jsxs("div", { className: cn$4("absolute bg-background-100 bg-clip-padding rounded-[6px] overflow-visible pointer-events-none z-[1000000] shadow-[var(--ds-shadow-tooltip),0_0_0_1px_var(--ds-background-100)] w-fit [--context-card-tip-stroke:#DBDBDB] dark-theme:[--context-card-tip-stroke:#252525]", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), "data-skip-transition": skipTransition, style: {
+  return jsxRuntimeExports.jsxs(ContextCardContext.Provider, { value: contextValue, children: [children2, isMounted ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: "w-full h-full inset-0 fixed pointer-events-none z-[100000]", ref, children: jsxRuntimeExports.jsx("div", { className: cn$4("min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", visible ? "opacity-100" : "opacity-0"), children: jsxRuntimeExports.jsxs("div", { className: cn$4("absolute bg-background-100 bg-clip-padding rounded-[6px] overflow-visible pointer-events-none z-[1000000] shadow-[var(--ds-shadow-tooltip),0_0_0_1px_var(--ds-background-100)] w-fit [--context-card-tip-stroke:#DBDBDB] dark-theme:[--context-card-tip-stroke:#252525]", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), "data-skip-transition": skipTransition, style: {
     transform: `translate(${activeBounds.x}px,${activeBounds.y}px)`,
     width: activeBounds.width,
     height: activeBounds.height
@@ -19919,18 +19969,13 @@ function ContextCardProvider({ children: children2, portalTarget }) {
     "right-full -translate-y-1/2 rotate-90 -mr-[3.5px]": activeBounds.side === "right",
     "bottom-full -translate-x-1/2 rotate-180": activeBounds.side === "bottom",
     "left-full -translate-y-1/2 rotate-[270deg] -ml-[3.5px]": activeBounds.side === "left"
-  }, skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), style: {
+  }, skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), style: {
     ...activeBounds.side === "top" || activeBounds.side === "bottom" ? {
       left: `calc(50% + ${activeBounds.arrowOffset.x}px)`
     } : {
       top: `calc(50% + ${activeBounds.arrowOffset.y}px)`
     }
-  }, "data-skip-transition": skipTransition, "data-side": activeBounds.side, children: jsxRuntimeExports.jsxs("svg", { width: "14", height: "7", viewBox: "0 0 14 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("g", { clipPath: "url(#context-card-tip-clip)", children: jsxRuntimeExports.jsx("path", { d: "M15 -0.5V0.5H12.9834L12.8184 0.508789C12.4377 0.550822 12.0853 0.738056 11.8359 1.03418L8.53027 4.95996C7.73114 5.90893 6.26886 5.90892 5.46973 4.95996L2.16406 1.03418C1.87905 0.695733 1.45907 0.5 1.0166 0.5H-1V-0.5H15Z", fill: "var(--ds-background-100)", style: {
-    fill: "var(--ds-background-100)",
-    fillOpacity: 1,
-    stroke: "var(--context-card-tip-stroke)",
-    strokeOpacity: 1
-  } }) }), jsxRuntimeExports.jsx("defs", { children: jsxRuntimeExports.jsx("clipPath", { id: "context-card-tip-clip", children: jsxRuntimeExports.jsx("rect", { width: "14", height: "7", fill: "white", style: { fill: "white", fillOpacity: 1 } }) }) })] }) }), jsxRuntimeExports.jsx("div", { ref: portalRef })] }) }) }), resolvedPortalTarget ?? document.body) : null] });
+  }, "data-skip-transition": skipTransition, "data-side": activeBounds.side, children: jsxRuntimeExports.jsxs("svg", { width: "14", height: "7", viewBox: "0 0 14 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [jsxRuntimeExports.jsx("g", { clipPath: "url(#context-card-tip-clip)", children: jsxRuntimeExports.jsx("path", { d: "M15 -0.5V0.5H12.9834L12.8184 0.508789C12.4377 0.550822 12.0853 0.738056 11.8359 1.03418L8.53027 4.95996C7.73114 5.90893 6.26886 5.90892 5.46973 4.95996L2.16406 1.03418C1.87905 0.695733 1.45907 0.5 1.0166 0.5H-1V-0.5H15Z", fill: "var(--ds-background-100)", className: "fill-background-100 stroke-[var(--context-card-tip-stroke)]" }) }), jsxRuntimeExports.jsx("defs", { children: jsxRuntimeExports.jsx("clipPath", { id: "context-card-tip-clip", children: jsxRuntimeExports.jsx("rect", { width: "14", height: "7", fill: "white", className: "fill-background-100" }) }) })] }) }), jsxRuntimeExports.jsx("div", { ref: portalRef })] }) }) }), resolvedPortalTarget ?? document.body) : null] });
 }
 function ContextCardTrigger({ content: content2, children: children2, side = "right", align = "center", sideOffset = 16, alignOffset = 0, ignoreCardPointerEvents = false, noPadding, asChild, className, hide: hide2, inactiveTimeoutMs = INACTIVE_TIMEOUT_MS }) {
   const triggerRef = reactExports.useRef(null);
@@ -20165,15 +20210,15 @@ function ContextCardTrigger({ content: content2, children: children2, side = "ri
     }
   }
   const Comp = asChild ? Root : "div";
-  return jsxRuntimeExports.jsxs(Comp, { className: cn$4("inline-flex cursor-pointer flex-[0_1_auto] overflow-hidden", className), onMouseEnter, onMouseLeave, onClick: handleClick, ref: triggerRef, children: [jsxRuntimeExports.jsx(Slottable, { children: children2 }), (portalRef == null ? void 0 : portalRef.current) && (localHover || persisting) ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: cn$4("absolute top-0 p-3 left-0 max-w-max transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition && "!transition-none"), ref: contentRef, style: {
-    ...noPadding ? { padding: 0 } : {},
-    pointerEvents: rootVisible && visible && !ignoreCardPointerEvents ? "all" : "none"
-  }, children: jsxRuntimeExports.jsx("div", { className: cn$4("min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-250 ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none"), ref: contentMeasureRef, style: {
-    opacity: Number(visible)
-  }, children: content2 }) }, id), portalRef.current) : null] });
+  return jsxRuntimeExports.jsxs(Comp, { className: cn$4("inline-flex cursor-pointer flex-[0_1_auto] overflow-hidden", className), onMouseEnter, onMouseLeave, onClick: handleClick, ref: triggerRef, children: [jsxRuntimeExports.jsx(Slottable, { children: children2 }), (portalRef == null ? void 0 : portalRef.current) && (localHover || persisting) ? reactDomExports.createPortal(jsxRuntimeExports.jsx("div", { className: cn$4("absolute top-0 p-3 left-0 max-w-max transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition && "!transition-none", noPadding && "p-0", rootVisible && visible && !ignoreCardPointerEvents ? "pointer-events-auto" : "pointer-events-none"), ref: contentRef, children: jsxRuntimeExports.jsx("div", { className: cn$4("min-w-max transition-all duration-150 ease-[easing-function:cubic-bezier(0.3,_0.57,_0.07,_0.95)] will-change-[transform,width,height] motion-reduce:!transition-none", skipTransition ? "!transition-none" : "transition-[transform,width,height] duration-[250ms] ease-[easing-function:cubic-bezier(0.29,0.31,0.05,0.96)] will-change-[transform,width,height] motion-reduce:!transition-none", visible ? "opacity-100" : "opacity-0"), ref: contentMeasureRef, children: content2 }) }, id), portalRef.current) : null] });
 }
+const TooltipProvider = Provider;
+const Tooltip$1 = Root3;
+const TooltipTrigger$1 = Trigger;
+const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(Content2, { ref, sideOffset, className: cn$4("z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none", className), ...props, children: [children2, showArrow ? jsxRuntimeExports.jsx(Arrow2, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
+TooltipContent$1.displayName = Content2.displayName;
 function Skeleton({ className, style: style2, ...props }) {
-  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
+  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md bg-gray-200", className), style: style2 });
 }
 const TIME_UNITS = [
   { unit: "year", ms: 31536e6 },
@@ -45068,7 +45113,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-DmmWu7VM.js"), true ? __vite__mapDeps([2,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-Dc1dLaUr.js"), true ? __vite__mapDeps([2,1]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -45848,13 +45893,13 @@ function useSidebarDataOptional() {
   return reactExports.useContext(SidebarDataContext);
 }
 const STREAM_SKELETON_ROWS = [
-  { id: "stream-skeleton-row-1", width: "72%" },
-  { id: "stream-skeleton-row-2", width: "58%" },
-  { id: "stream-skeleton-row-3", width: "80%" },
-  { id: "stream-skeleton-row-4", width: "64%" }
+  { id: "stream-skeleton-row-1", widthClassName: "w-[72%]" },
+  { id: "stream-skeleton-row-2", widthClassName: "w-[58%]" },
+  { id: "stream-skeleton-row-3", widthClassName: "w-4/5" },
+  { id: "stream-skeleton-row-4", widthClassName: "w-[64%]" }
 ];
 function StreamViewerSkeleton() {
-  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading stream", className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading stream…" }), jsxRuntimeExports.jsx("div", { className: "flex h-10 min-h-10 items-center border-b border-gray-alpha-400 px-3", children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-10" }) }), jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: STREAM_SKELETON_ROWS.map((row) => jsxRuntimeExports.jsxs("div", { className: "flex h-10 items-center gap-2 border-b border-gray-alpha-400 px-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: "h-3", style: { width: row.width } }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-sm" })] }, row.id)) })] });
+  return jsxRuntimeExports.jsxs("output", { "aria-busy": "true", "aria-label": "Loading stream", className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background-100", children: [jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Loading stream…" }), jsxRuntimeExports.jsx("div", { className: "flex h-10 min-h-10 items-center border-b border-gray-alpha-400 px-3", children: jsxRuntimeExports.jsx(Skeleton, { className: "h-3 w-10" }) }), jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: STREAM_SKELETON_ROWS.map((row) => jsxRuntimeExports.jsxs("div", { className: "flex h-10 items-center gap-2 border-b border-gray-alpha-400 px-3", children: [jsxRuntimeExports.jsx(Skeleton, { className: `h-3 ${row.widthClassName}` }), jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-4 shrink-0 rounded-sm" })] }, row.id)) })] });
 }
 const ChunkRow = ReactExports.memo(function ChunkRow2({ chunk }) {
   return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-start gap-1 border-b border-gray-alpha-400 px-3 py-2", children: [jsxRuntimeExports.jsx("div", { className: "min-w-0 flex-1", children: typeof chunk.value === "string" ? jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words text-label-12 font-mono text-gray-1000", children: chunk.value }) : jsxRuntimeExports.jsx(DataInspector, { data: chunk.value, expandLevel: 1 }) }), jsxRuntimeExports.jsx(CopyButton, { copyText: serializeForClipboard(chunk.value), ariaLabel: "Copy chunk", className: "shrink-0 -mr-1 [&>div]:h-4 [&>div]:w-4 [&_svg]:h-4 [&_svg]:w-4" })] });
@@ -45875,7 +45920,7 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error, isLoading, o
   if (isLoading && chunks.length === 0) {
     return jsxRuntimeExports.jsx(StreamViewerSkeleton, {});
   }
-  return jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden bg-background-100", children: [jsxRuntimeExports.jsx("div", { className: "flex h-10 min-h-10 items-center gap-1.5 border-b border-gray-alpha-400 px-3", children: isLive && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-green-600" }), jsxRuntimeExports.jsx("span", { className: "text-label-12 text-green-700", children: "Live" })] }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: error ? jsxRuntimeExports.jsxs("div", { className: "border-b border-red-400 bg-red-100 px-3 py-2 text-label-12 text-red-900", children: [jsxRuntimeExports.jsx("div", { children: "Error reading stream:" }), jsxRuntimeExports.jsx("div", { children: error })] }) : chunks.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center border-b border-gray-alpha-400 bg-background-200 px-3 text-label-12 text-gray-900", children: isLive ? "Waiting for stream data..." : "Stream is empty" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: chunks.length, overscan: 10, endReached: () => onScrollEnd == null ? void 0 : onScrollEnd(), itemContent: (index2) => jsxRuntimeExports.jsx("div", { className: "w-full", children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2] }) }), style: { flex: 1, minHeight: 0 } }) })] });
+  return jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden bg-background-100", children: [jsxRuntimeExports.jsx("div", { className: "flex h-10 min-h-10 items-center gap-1.5 border-b border-gray-alpha-400 px-3", children: isLive && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-green-600" }), jsxRuntimeExports.jsx("span", { className: "text-label-12 text-green-700", children: "Live" })] }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: error ? jsxRuntimeExports.jsxs("div", { className: "border-b border-red-400 bg-red-100 px-3 py-2 text-label-12 text-red-900", children: [jsxRuntimeExports.jsx("div", { children: "Error reading stream:" }), jsxRuntimeExports.jsx("div", { children: error })] }) : chunks.length === 0 ? jsxRuntimeExports.jsx("div", { className: "flex h-10 items-center border-b border-gray-alpha-400 bg-background-200 px-3 text-label-12 text-gray-900", children: isLive ? "Waiting for stream data..." : "Stream is empty" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: chunks.length, overscan: 10, endReached: () => onScrollEnd == null ? void 0 : onScrollEnd(), itemContent: (index2) => jsxRuntimeExports.jsx("div", { className: "w-full", children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2] }) }), className: "min-h-0 flex-1" }) })] });
 }
 const iconButtonVariants = cva([
   "m-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]",
@@ -45900,11 +45945,6 @@ const iconButtonVariants = cva([
 });
 const IconButton = reactExports.forwardRef(({ className, variant, size: size2, type = "button", ...props }, ref) => jsxRuntimeExports.jsx("button", { ref, type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props }));
 IconButton.displayName = "IconButton";
-const TooltipProvider = Provider;
-const Tooltip$1 = Root3;
-const TooltipTrigger$1 = Trigger;
-const TooltipContent$1 = reactExports.forwardRef(({ className, sideOffset = 8, showArrow = true, children: children2, ...props }, ref) => jsxRuntimeExports.jsx(Portal, { children: jsxRuntimeExports.jsxs(Content2, { ref, sideOffset, className: cn$4("z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none", className), ...props, children: [children2, showArrow ? jsxRuntimeExports.jsx(Arrow2, { width: 11, height: 5, className: "fill-gray-1000" }) : null] }) }));
-TooltipContent$1.displayName = Content2.displayName;
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
 function ActiveSpanProvider({ spans, children: children2 }) {
@@ -46225,41 +46265,31 @@ function computeSpanDelta(anchor, hovered, viewStart, viewEnd) {
     hoveredOffscreen: hoveredStart > viewEnd ? "right" : hoveredEnd < viewStart ? "left" : null
   };
 }
-const RESOURCE_COLORS = {
+const RESOURCE_CLASS_NAMES = {
   run: {
-    bg: "var(--ds-blue-200)",
-    border: "var(--ds-blue-500)",
-    errorBg: "var(--ds-red-200)",
-    errorBorder: "var(--ds-red-500)"
+    className: "border-blue-500 bg-blue-200",
+    errorClassName: "border-red-500 bg-red-200"
   },
   step: {
-    bg: "var(--ds-green-200)",
-    border: "var(--ds-green-500)",
-    errorBg: "var(--ds-red-200)",
-    errorBorder: "var(--ds-red-500)"
+    className: "border-green-500 bg-green-200",
+    errorClassName: "border-red-500 bg-red-200"
   },
   // Passive spans (hooks) stay gray — matches event-list icons and the minimap.
   hook: {
-    bg: "var(--ds-gray-200)",
-    border: "var(--ds-gray-500)",
-    errorBg: "var(--ds-red-200)",
-    errorBorder: "var(--ds-red-500)"
+    className: "border-gray-500 bg-gray-200",
+    errorClassName: "border-red-500 bg-red-200"
   },
   sleep: {
-    bg: "var(--ds-purple-200)",
-    border: "var(--ds-purple-500)",
-    errorBg: "var(--ds-red-200)",
-    errorBorder: "var(--ds-red-500)"
+    className: "border-purple-500 bg-purple-200",
+    errorClassName: "border-red-500 bg-red-200"
   },
   default: {
-    bg: "var(--ds-gray-200)",
-    border: "var(--ds-gray-500)",
-    errorBg: "var(--ds-red-200)",
-    errorBorder: "var(--ds-red-500)"
+    className: "border-gray-500 bg-gray-200",
+    errorClassName: "border-red-500 bg-red-200"
   }
 };
-function getResourceColor(resource) {
-  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+function getResourceClassNames(resource) {
+  return RESOURCE_CLASS_NAMES[resource] ?? RESOURCE_CLASS_NAMES.default;
 }
 function clampFraction(value) {
   return Math.max(0, Math.min(1, value));
@@ -46604,10 +46634,6 @@ const SEGMENT_CLASSES = {
   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
-};
 const STRIPED_SEGMENT_STATUSES = /* @__PURE__ */ new Set([
   "pending",
   "running",
@@ -46688,8 +46714,8 @@ 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 PlainBar({ className, label }) {
+  return jsxRuntimeExports.jsx("div", { className: cn$4("relative h-6 w-full min-w-1 rounded-[0.25rem] border", className), 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: {
@@ -46709,11 +46735,10 @@ function SegmentBar({ segments, showLabels = true }) {
     }
     const label = formatDurationPrecise(seg.fullDurationMs);
     const showLabel = showLabels && seg.pixelWidth >= Math.max(40, estimateLabelWidthPx(label));
-    return jsxRuntimeExports.jsxs("div", { className: cn$4("absolute h-full overflow-hidden rounded-[0.25rem]", SEGMENT_CLASSES[seg.status]), style: {
+    return jsxRuntimeExports.jsxs("div", { className: cn$4("absolute h-full min-w-px 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
+      width: `calc(${seg.widthPct}% - 1px)`
     }, children: [STRIPED_SEGMENT_STATUSES.has(seg.status) ? jsxRuntimeExports.jsx(AnimatedStripes, { status: seg.status }) : null, showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null] }, i);
   }) });
 }
@@ -46729,15 +46754,14 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const offscreen = reactExports.useMemo(() => geometry.mode.kind === "full" ? computeOffscreenMarkers(baseMarkers, geometry.visibleStartMs, geometry.visibleEndMs) : { left: null, right: null }, [geometry, baseMarkers]);
   const hasMarkers = markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
   const isErrored = isSpanErrored(span);
-  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 colors = getResourceClassNames(span.resource);
+  const fallbackClassName = isErrored ? colors.errorClassName ?? "border-red-500 bg-red-200" : colors.className;
   const totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel = geometry.visiblePixelWidth >= Math.max(40, estimateLabelWidthPx(totalLabel));
   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: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsxs("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 overflow-hidden rounded-[0.25rem]", 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, showLabels: !hasMarkers }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }), hasMarkers ? jsxRuntimeExports.jsxs("div", { className: "pointer-events-none absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: [markers.length > 0 ? jsxRuntimeExports.jsx(MarkerLayer, { markers }) : null, offscreen.left ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "left", count: offscreen.left.count, targetMs: offscreen.left.nearestMs, onReveal: onRevealTime }) : null, offscreen.right ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "right", count: offscreen.right.count, targetMs: offscreen.right.nearestMs, onReveal: onRevealTime }) : null, showTotalLabel ? jsxRuntimeExports.jsx(DurationLabel, {
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsxs("div", { className: "absolute inset-x-4 inset-y-0", children: [jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: cn$4("h-6 rounded-[0.25rem] border", fallbackClassName) }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments, showLabels: !hasMarkers }) : jsxRuntimeExports.jsx(PlainBar, { className: fallbackClassName, label: showTotalLabel ? totalLabel : null }) }), hasMarkers ? jsxRuntimeExports.jsxs("div", { className: "pointer-events-none absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: [markers.length > 0 ? jsxRuntimeExports.jsx(MarkerLayer, { markers }) : null, offscreen.left ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "left", count: offscreen.left.count, targetMs: offscreen.left.nearestMs, onReveal: onRevealTime }) : null, offscreen.right ? jsxRuntimeExports.jsx(OffscreenMarkerIndicator, { direction: "right", count: offscreen.right.count, targetMs: offscreen.right.nearestMs, onReveal: onRevealTime }) : null, showTotalLabel ? jsxRuntimeExports.jsx(DurationLabel, {
     label: totalLabel,
     // Shift clear of the left edge indicator so it isn't covered.
     className: offscreen.left ? "pl-10" : void 0
@@ -46758,9 +46782,8 @@ const DeltaMeasureLine = reactExports.memo(function DeltaMeasureLine2({ delta, a
   const label = formatDurationPrecise(delta.deltaMs);
   const labelWidthPx = estimateLabelWidthPx(label);
   const labelPlacement = endX - startX >= labelWidthPx ? { left: (startX + endX) / 2, translate: "-translate-x-1/2" } : endX + 4 + labelWidthPx <= timelineWidth ? { left: endX + 4, translate: "" } : { left: startX - 4, translate: "-translate-x-full" };
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "absolute h-px bg-amber-800", style: {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "absolute h-px w-1 bg-amber-800", style: {
     left: Math.min(anchorX, guideX),
-    width: MEASURE_GUIDE_OUTSET_PX,
     top: anchorCenterY
   } }), jsxRuntimeExports.jsx("div", { className: "absolute w-px bg-amber-800", style: {
     left: guideX,
@@ -46810,10 +46833,10 @@ function Timeline({ spans, viewStart, viewEnd, markers, selectedId, searchResult
     const delta = computeSpanDelta(anchorSpan, hoveredSpan, viewStart, viewEnd);
     return delta ? { delta, anchorRowIndex: anchorIndex, hoveredRowIndex: hover.rowIndex } : null;
   }, [altHeld, anchorIndex, hover, spans, viewStart, viewEnd]);
-  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", style: { minHeight: spans.length * ROW_HEIGHT_PX }, children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers.map((marker) => (
+  return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", style: { minHeight: spans.length * ROW_HEIGHT_PX }, children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-4 inset-y-0", children: markers.map((marker) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker.position * 100}%` } }, String(marker.value)) : null
-  )) }), hover != 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: `${hover.fraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, onRevealTime }, span.spanId)) }), altHeld && anchorIndex < 0 && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gapMeasurements.map((gap) => jsxRuntimeExports.jsx(DeltaMeasureLine, { ...gap, timelineWidth }, gap.anchorRowIndex)) }), measurement && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none z-20", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx(DeltaMeasureLine, { ...measurement, timelineWidth }) })] });
+  )) }), hover != null && jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute inset-x-4 inset-y-0 z-10", children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hover.fraction * 100}%` } }) }), jsxRuntimeExports.jsx("div", { style: { transform: `translateY(${start * ROW_HEIGHT_PX}px)` }, children: spans.slice(start, end).map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect, onRevealTime }, span.spanId)) }), altHeld && anchorIndex < 0 && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-4 inset-y-0", children: gapMeasurements.map((gap) => jsxRuntimeExports.jsx(DeltaMeasureLine, { ...gap, timelineWidth }, gap.anchorRowIndex)) }), measurement && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-4 inset-y-0 z-20", children: jsxRuntimeExports.jsx(DeltaMeasureLine, { ...measurement, timelineWidth }) })] });
 }
 const CANVAS_PAD_Y_PX = 6;
 const MIN_LINE_HEIGHT_PX = 1.5;
@@ -49501,7 +49524,7 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  CollapsibleRoot as $,
+  CopyableDataBlock as $,
   Anchor as A,
   Button as B,
   Check as C,
@@ -49526,108 +49549,109 @@ export {
   VISUALLY_HIDDEN_STYLES as V,
   createContext2 as W,
   fetchWorkflowsManifest as X,
-  cn$4 as Y,
-  CopyableDataBlock as Z,
+  entityEventClass as Y,
+  cn$4 as Z,
   __vitePreload as _,
   TooltipTrigger as a,
-  apiBase as a$,
-  CollapsibleTrigger as a0,
-  CollapsibleContent as a1,
-  CopyButton as a2,
-  RESERVED_ATTRIBUTE_KEY_PREFIX as a3,
-  Spinner as a4,
-  ContextCardProvider as a5,
-  Skeleton as a6,
-  DecryptClickContext as a7,
-  Yr as a8,
-  isEncryptedMarker$1 as a9,
-  useRowWindow as aA,
-  isSpanDimmedBySearch as aB,
-  ROW_HEIGHT_PX as aC,
-  getSpanDurationMs as aD,
-  isSpanErrored as aE,
-  formatDurationPrecise as aF,
-  TooltipProvider as aG,
-  ActiveSpanProvider as aH,
-  useReducedMotion as aI,
-  searchSpans as aJ,
-  computeRootBounds as aK,
-  computeTimeMarkers as aL,
-  clampViewportToRoot as aM,
-  getHighResInMs as aN,
-  scrollRowIntoView as aO,
-  TIMELINE_PADDING_PX as aP,
-  Minimap as aQ,
-  Timeline as aR,
-  TimelineHeader as aS,
-  wheelZoomScaleFactor as aT,
-  wheelDeltaToPixels as aU,
-  SidebarDataProvider as aV,
-  fetchHook as aW,
-  hydrateResourceIOAsync as aX,
-  fetchStep as aY,
-  hydrateResourceIO as aZ,
-  fetchStreams as a_,
-  TimestampTooltip as aa,
-  formatDuration as ab,
-  DataInspector as ac,
-  _r as ad,
-  isHookLifecycleEventType as ae,
-  isTerminalStepEventType as af,
-  isWaitEventType as ag,
-  isStepEventType as ah,
-  RunClickContext as ai,
-  StreamClickContext as aj,
-  Collapsible as ak,
-  isExpiredMarker as al,
-  isDoStreamStep as am,
-  extractConversation as an,
-  EncryptedDataBlock as ao,
-  getEventDataRefFields as ap,
-  hasEncryptedFields as aq,
-  useSidebarDataOptional as ar,
-  isTerminalWorkflowRunStatus as as,
-  clsx as at,
-  useActiveSpan as au,
-  useSidebarData as av,
-  Tooltip$1 as aw,
-  TooltipTrigger$1 as ax,
-  IconButton as ay,
-  TooltipContent$1 as az,
+  fetchStreams as a$,
+  CollapsibleRoot as a0,
+  CollapsibleTrigger as a1,
+  CollapsibleContent as a2,
+  CopyButton as a3,
+  RESERVED_ATTRIBUTE_KEY_PREFIX as a4,
+  Spinner as a5,
+  TooltipProvider as a6,
+  Tooltip$1 as a7,
+  TooltipTrigger$1 as a8,
+  TooltipContent$1 as a9,
+  useSidebarData as aA,
+  IconButton as aB,
+  useRowWindow as aC,
+  isSpanDimmedBySearch as aD,
+  ROW_HEIGHT_PX as aE,
+  getSpanDurationMs as aF,
+  isSpanErrored as aG,
+  formatDurationPrecise as aH,
+  ActiveSpanProvider as aI,
+  useReducedMotion as aJ,
+  searchSpans as aK,
+  computeRootBounds as aL,
+  computeTimeMarkers as aM,
+  clampViewportToRoot as aN,
+  getHighResInMs as aO,
+  scrollRowIntoView as aP,
+  TIMELINE_PADDING_PX as aQ,
+  Minimap as aR,
+  Timeline as aS,
+  TimelineHeader as aT,
+  wheelZoomScaleFactor as aU,
+  wheelDeltaToPixels as aV,
+  SidebarDataProvider as aW,
+  fetchHook as aX,
+  hydrateResourceIOAsync as aY,
+  fetchStep as aZ,
+  hydrateResourceIO as a_,
+  ContextCardProvider as aa,
+  Skeleton as ab,
+  DecryptClickContext as ac,
+  Yr as ad,
+  isEncryptedMarker$1 as ae,
+  TimestampTooltip as af,
+  formatDuration as ag,
+  DataInspector as ah,
+  _r as ai,
+  isHookLifecycleEventType as aj,
+  isTerminalStepEventType as ak,
+  isWaitEventType as al,
+  isStepEventType as am,
+  RunClickContext as an,
+  StreamClickContext as ao,
+  Collapsible as ap,
+  isExpiredMarker as aq,
+  isDoStreamStep as ar,
+  extractConversation as as,
+  EncryptedDataBlock as at,
+  getEventDataRefFields as au,
+  hasEncryptedFields as av,
+  useSidebarDataOptional as aw,
+  isTerminalWorkflowRunStatus as ax,
+  clsx as ay,
+  useActiveSpan as az,
   TooltipContent as b,
-  Slot as b0,
-  Slottable as b1,
-  buttonVariants as b2,
-  fetchEvent as b3,
-  fetchEventsByCorrelationId as b4,
-  isEncryptedData as b5,
-  hydrateData as b6,
-  decrypt as b7,
-  deriveRunPayloadKeys as b8,
-  getWebRevivers as b9,
-  LIVE_UPDATE_INTERVAL_MS as ba,
-  getEncryptionKeyForRun as bb,
-  StreamViewerSkeleton as bc,
-  Lock as bd,
-  StreamViewer as be,
-  composeRefs as bf,
-  useFloating as bg,
-  offset as bh,
-  shift as bi,
-  limitShift as bj,
-  flip as bk,
-  size as bl,
-  arrow as bm,
-  hide as bn,
-  autoUpdate as bo,
-  VERCEL_403_ERROR_MESSAGE as bp,
-  bulkCancelRuns as bq,
-  reenqueueRun as br,
-  wakeUpRun as bs,
-  resumeHook as bt,
-  fetchHookToken as bu,
-  cancelRun as bv,
-  recreateRun as bw,
+  apiBase as b0,
+  Slot as b1,
+  Slottable as b2,
+  buttonVariants as b3,
+  fetchEvent as b4,
+  fetchEventsByCorrelationId as b5,
+  isEncryptedData as b6,
+  hydrateData as b7,
+  decrypt as b8,
+  deriveRunPayloadKeys as b9,
+  getWebRevivers as ba,
+  LIVE_UPDATE_INTERVAL_MS as bb,
+  getEncryptionKeyForRun as bc,
+  StreamViewerSkeleton as bd,
+  Lock as be,
+  StreamViewer as bf,
+  composeRefs as bg,
+  useFloating as bh,
+  offset as bi,
+  shift as bj,
+  limitShift as bk,
+  flip as bl,
+  size as bm,
+  arrow as bn,
+  hide as bo,
+  autoUpdate as bp,
+  VERCEL_403_ERROR_MESSAGE as bq,
+  bulkCancelRuns as br,
+  reenqueueRun as bs,
+  wakeUpRun as bt,
+  resumeHook as bu,
+  fetchHookToken as bv,
+  cancelRun as bw,
+  recreateRun as bx,
   createLucideIcon as c,
   runHealthCheck as d,
   cn as e,