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

package/build/server/assets/{server-build-BZS28Q46.js → server-build-Ctg6FoI8.js}

@@ -14,7 +14,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var __superGet = (cls, obj, key) => __reflectGet(__getProtoOf(cls), key, obj);
 var _a2, _b, _c, _listeners, _onabort, _reader, _root, _hasMagic, _uflag, _parts, _parent, _parentIndex, _negs, _filledNegs, _options, _toString, _emptyExt, _AST_instances, fillNegs_fn, _AST_static, parseAST_fn, canAdoptWithSpace_fn, canAdopt_fn, canAdoptType_fn, adoptWithSpace_fn, adopt_fn, canUsurpType_fn, canUsurp_fn, usurp_fn, flatten_fn, partsToRegExp_fn, parseGlob_fn, _Minimatch_instances, matchGlobstar_fn, matchGlobStarBodySections_fn, matchOne_fn, _worldPromise, _Run_instances, lazyWorldPromise_get, _encryptionKeyPromise, _resilientStart, getEncryptionKey_fn, pollReturnValue_fn;
-import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, d as withErrorBoundaryProps, M as Meta, L as Links, e as ScrollRestoration, f as Scripts, O as Outlet, u as useNavigate, h as useSearchParams, i as Link$1, j as useRouteError, k as isRouteErrorResponse, l as useLocation, m as useParams } from "./app-CASBD2Jz.js";
+import { a as requireReact, S as ServerRouter, c as createReadableStreamFromReadable, r as reactExports, g as getDefaultExportFromCjs, R as React, b as ReactExports, w as withComponentProps, d as withErrorBoundaryProps, M as Meta, L as Links, e as ScrollRestoration, f as Scripts, O as Outlet, u as useNavigate, h as useSearchParams, i as Link$1, j as useRouteError, k as isRouteErrorResponse, l as useLocation, m as useParams } from "./app-BEgkHdDF.js";
 import require$$0$3, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1 from "crypto";
@@ -48563,6 +48563,91 @@ const z$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   xid,
   xor: xor$1
 }, Symbol.toStringTag, { value: "Module" }));
+const RESERVED_ATTRIBUTE_KEY_PREFIX = "$";
+const ATTRIBUTE_KEY_MAX_LENGTH = 256;
+const ATTRIBUTE_VALUE_MAX_BYTES = 256;
+const ATTRIBUTE_MAX_PER_RUN = 64;
+object$1({
+  key: string$3(),
+  value: union([string$3(), _null()])
+});
+class AttributeValidationError extends Error {
+  constructor(message2) {
+    super(message2);
+    this.name = "AttributeValidationError";
+  }
+}
+const valueByteLength = (value) => new TextEncoder().encode(value).length;
+function validateAttributeKey(key, options = {}) {
+  if (typeof key !== "string") {
+    return new AttributeValidationError(`Attribute key must be a string, got ${typeof key}`);
+  }
+  if (key.length === 0) {
+    return new AttributeValidationError("Attribute key must not be empty");
+  }
+  if (key.length > ATTRIBUTE_KEY_MAX_LENGTH) {
+    return new AttributeValidationError(`Attribute key length ${key.length} exceeds limit ${ATTRIBUTE_KEY_MAX_LENGTH}: ${JSON.stringify(key.slice(0, 32))}…`);
+  }
+  if (!options.allowReservedAttributes && key.startsWith(RESERVED_ATTRIBUTE_KEY_PREFIX)) {
+    return new AttributeValidationError(`Attribute key ${JSON.stringify(key)} starts with reserved prefix "${RESERVED_ATTRIBUTE_KEY_PREFIX}" — that namespace is reserved for framework/library code. Set { allowReservedAttributes: true } only if your caller is framework-level.`);
+  }
+  return null;
+}
+function validateAttributeValue(value) {
+  if (value === null)
+    return null;
+  if (typeof value !== "string") {
+    return new AttributeValidationError(`Attribute value must be a string or null, got ${typeof value}`);
+  }
+  const bytes = valueByteLength(value);
+  if (bytes > ATTRIBUTE_VALUE_MAX_BYTES) {
+    return new AttributeValidationError(`Attribute value byte length ${bytes} exceeds limit ${ATTRIBUTE_VALUE_MAX_BYTES}`);
+  }
+  return null;
+}
+function validateAttributeChanges(changes, context = {}) {
+  const seenKeys = /* @__PURE__ */ new Set();
+  const existingKeys = context.existingKeys === void 0 ? void 0 : context.existingKeys instanceof Set ? context.existingKeys : new Set(context.existingKeys);
+  let netAdds = 0;
+  let netDeletes = 0;
+  for (const change of changes) {
+    const keyError = validateAttributeKey(change.key, {
+      allowReservedAttributes: context.allowReservedAttributes
+    });
+    if (keyError)
+      throw keyError;
+    const valueError = validateAttributeValue(change.value);
+    if (valueError)
+      throw valueError;
+    if (seenKeys.has(change.key)) {
+      throw new AttributeValidationError(`Attribute key ${JSON.stringify(change.key)} appears more than once in the same batch`);
+    }
+    seenKeys.add(change.key);
+    if (change.value !== null) {
+      if (existingKeys === void 0 || !existingKeys.has(change.key)) {
+        netAdds += 1;
+      }
+    } else if (existingKeys === void 0 || existingKeys.has(change.key)) {
+      netDeletes += 1;
+    }
+  }
+  const existing = existingKeys === void 0 ? 0 : existingKeys.size;
+  const postMerge = existing + netAdds - netDeletes;
+  if (postMerge > ATTRIBUTE_MAX_PER_RUN) {
+    throw new AttributeValidationError(`Run attribute count would exceed limit ${ATTRIBUTE_MAX_PER_RUN} (post-merge ${postMerge})`);
+  }
+}
+function applyAttributeChanges(existing, changes) {
+  const next2 = { ...existing ?? {} };
+  for (const { key, value } of changes) {
+    if (value === null) {
+      delete next2[key];
+    } else {
+      next2[key] = value;
+    }
+  }
+  return next2;
+}
 const BinarySerializedDataSchema = _instanceof(Uint8Array);
 const LegacySerializedDataSchemaV1 = any();
 const SerializedDataSchema = union([
@@ -48937,7 +49022,7 @@ const WorkflowRunBaseSchema = object$1({
   // Optional in database for backwards compatibility, defaults to 1 (legacy) when reading
   specVersion: number$3().optional(),
   executionContext: record(string$3(), any()).optional(),
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a run_failed event, serialized via the workflow
@@ -48953,6 +49038,24 @@ const WorkflowRunBaseSchema = object$1({
    * without needing to decrypt the full error payload.
    */
   errorCode: string$3().optional(),
+  /**
+   * Plaintext string-string metadata attached to the run via
+   * `experimental_setAttributes()` (or, in the future, materialized
+   * from `attr_set` events). Stored unencrypted alongside other
+   * plaintext fields so observability surfaces can read it without
+   * going through the decryption pipeline.
+   *
+   * Defaults to `{}` after schema parsing so consumers always receive
+   * a record regardless of world. World adapters need not initialize
+   * the field on disk — `world-local` JSON files written before this
+   * field existed, and rows from any other adapter that omits the
+   * column, both read as `{}` after Zod parses them.
+   *
+   * EXPERIMENTAL (MVP): the full Workflow Attributes feature replaces
+   * the direct-mutation MVP path with an event-sourced model — see
+   * the attributes-mvp changelog entry.
+   */
+  attributes: record(string$3(), string$3()).default({}),
   expiredAt: date$2().optional(),
   startedAt: date$2().optional(),
   completedAt: date$2().optional(),
@@ -49054,7 +49157,7 @@ const StepSchema = object$1({
    */
   stepName: string$3(),
   status: StepStatusSchema,
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a step_retrying or step_failed event, serialized
@@ -50492,6 +50595,87 @@ const geistTheme = {
 };
 const inspectorThemeLight = geistTheme;
 const inspectorThemeDark = geistTheme;
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config2) => (props) => {
+  var _config_compoundVariants;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const buttonVariants$1 = cva([
+  "outline-none m-0 border-0 align-baseline no-underline group/trigger",
+  "relative cursor-pointer select-none transform translate-z-0",
+  "inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium",
+  "!text-gray-100",
+  "bg-gray-1000",
+  "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
+  // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+  // consuming app), darkened via ancestor theme class without a registered variant.
+  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]",
+  "[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  "[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+  // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+  "focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]",
+  // disabled styles
+  "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
+  "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
+  "aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100"
+], {
+  variants: {
+    variant: {
+      default: "",
+      secondary: "border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]",
+      ghost: "[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]"
+    },
+    size: {
+      default: "h-10 px-4 text-[14px]",
+      sm: "h-8 px-3 text-[14px]",
+      xs: "h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]",
+      icon: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button$1({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(buttonVariants$1({ variant, size: size2, className })), ...props });
+}
 const STREAM_REF_TYPE = "__workflow_stream_ref__";
 const CLASS_INSTANCE_REF_TYPE = "__workflow_class_instance_ref__";
 const RUN_REF_TYPE = "__workflow_run_ref__";
@@ -50541,16 +50725,10 @@ const RunClickContext = reactExports.createContext(void 0);
 function EncryptedInlineLabel() {
   const ctx = reactExports.useContext(DecryptClickContext);
   if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] cursor-pointer", style: {
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      border: "1px solid var(--ds-gray-400)",
-      fontStyle: "italic",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, disabled: ctx.isDecrypting, onClick: (e) => {
+    return jsxRuntimeExports.jsxs(Button$1, { size: "xs", className: "align-baseline gap-x-1", disabled: ctx.isDecrypting, onClick: (e) => {
       e.stopPropagation();
       ctx.onDecrypt();
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: { display: "inline", flexShrink: 0 } }), jsxRuntimeExports.jsx("span", { children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
+    }, children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] });
   }
   return jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-gray-600)", fontStyle: "italic" }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: {
     display: "inline",
@@ -50796,6 +50974,944 @@ function isDeepEqual(a2, b2, seen = /* @__PURE__ */ new WeakMap()) {
   }
   return true;
 }
+function CopyButton({ copyText, ariaLabel, className }) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const timeoutRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn$4("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-0 p-1 m-0", className), onClick: (e) => {
+    e.stopPropagation();
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    void navigator.clipboard.writeText(copyText).then(() => {
+      setCopied(true);
+      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
+    });
+  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn$4("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn$4("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
+}
+function isStructuredErrorWithStack(value) {
+  return value != null && typeof value === "object" && "stack" in value && typeof value.stack === "string";
+}
+function deriveTitle(message2) {
+  const firstLine = message2.split("\n").find((line) => line.trim().length > 0) ?? message2;
+  return firstLine.trim();
+}
+function ErrorStackBlock({ value }) {
+  const stack = value.stack;
+  const message2 = typeof value.message === "string" ? value.message : void 0;
+  const title = message2 ? deriveTitle(message2) : void 0;
+  const copyText = message2 ? `${message2}
+
+${stack}` : stack;
+  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
+    borderColor: "var(--ds-red-400)",
+    background: "var(--ds-red-100)"
+  }, children: [jsxRuntimeExports.jsx(CopyButton, { copyText, ariaLabel: "Copy error", className: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95" }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
+    color: "var(--ds-red-900)",
+    borderBottom: "1px solid var(--ds-red-400)"
+  }, children: [jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 shrink-0" }), jsxRuntimeExports.jsx("p", {
+    className: "text-xs font-semibold m-0 truncate",
+    // The full multi-line message is in the stack body below; the
+    // header just shows the first line, single-line, with overflow
+    // ellipsised so a long title doesn't push the copy button or
+    // wrap into the framed hint/docs lines.
+    title: message2,
+    children: title
+  })] }), jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
+    color: "var(--ds-red-900)",
+    background: "var(--ds-red-200)"
+  }, children: stack })] });
+}
+const STYLES$1 = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
+function LoadMoreButton({ loading = false, onClick, label = "Load more", loadingLabel = "Loading..." }) {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$1 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick, disabled: loading, className: "wf-load-more", children: [loading && jsxRuntimeExports.jsx(Spinner, { size: 14 }), loading ? loadingLabel : label] })] });
+}
+const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
+function MenuDropdown({ options, value, onChange }) {
+  var _a3, _b2;
+  const [open, setOpen] = reactExports.useState(false);
+  const ref = reactExports.useRef(null);
+  const label = ((_a3 = options.find((o) => o.value === value)) == null ? void 0 : _a3.label) ?? ((_b2 = options[0]) == null ? void 0 : _b2.label) ?? "";
+  reactExports.useEffect(() => {
+    if (!open)
+      return;
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return jsxRuntimeExports.jsxs("div", { ref, style: { position: "relative", flexShrink: 0 }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES } }), jsxRuntimeExports.jsxs("button", { type: "button", className: "wf-menu-btn", onClick: () => setOpen(!open), children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", style: {
+    marginLeft: 16,
+    marginRight: -4,
+    color: "var(--ds-gray-900)"
+  }, children: jsxRuntimeExports.jsx("path", { d: "M4.5 6L8 9.5L11.5 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    right: 0,
+    top: "100%",
+    marginTop: 4,
+    minWidth: 140,
+    padding: 4,
+    borderRadius: 12,
+    background: "var(--ds-background-100)",
+    boxShadow: "var(--ds-shadow-menu, var(--ds-shadow-medium))",
+    zIndex: 2001
+  }, role: "menu", children: options.map((option) => jsxRuntimeExports.jsx("button", { type: "button", role: "menuitem", className: "wf-menu-item", style: {
+    fontWeight: option.value === value ? 500 : 400
+  }, onClick: () => {
+    onChange(option.value);
+    setOpen(false);
+  }, children: option.label }, option.value)) })] });
+}
+function Skeleton$2({ className, style: style2, ...props }) {
+  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
+}
+const TIME_UNITS = [
+  { unit: "year", ms: 31536e6 },
+  { unit: "month", ms: 2628e6 },
+  { unit: "day", ms: 864e5 },
+  { unit: "hour", ms: 36e5 },
+  { unit: "minute", ms: 6e4 },
+  { unit: "second", ms: 1e3 }
+];
+function formatTimeDifference(diff) {
+  let remaining = Math.abs(diff);
+  const result = [];
+  for (const { unit, ms: ms2 } of TIME_UNITS) {
+    const value = Math.floor(remaining / ms2);
+    if (value > 0 || result.length > 0) {
+      result.push(`${value} ${unit}${value !== 1 ? "s" : ""}`);
+      remaining %= ms2;
+    }
+    if (result.length === 3)
+      break;
+  }
+  return result.join(", ");
+}
+function useTimeAgo(date2) {
+  const [timeAgo, setTimeAgo] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    const update = () => {
+      const diff = Date.now() - date2;
+      const formatted = formatTimeDifference(diff);
+      setTimeAgo(formatted ? `${formatted} ago` : "Just now");
+    };
+    update();
+    const timer2 = setInterval(update, 1e3);
+    return () => clearInterval(timer2);
+  }, [date2]);
+  return timeAgo;
+}
+function ZoneDateTimeRow({ date: date2, zone }) {
+  var _a3;
+  const dateObj = new Date(date2);
+  const formattedZone = ((_a3 = new Intl.DateTimeFormat("en-US", {
+    timeZone: zone,
+    timeZoneName: "short"
+  }).formatToParts(dateObj).find((part) => part.type === "timeZoneName")) == null ? void 0 : _a3.value) || zone;
+  const formattedDate = dateObj.toLocaleString("en-US", {
+    timeZone: zone,
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+  const formattedTime = dateObj.toLocaleTimeString("en-US", {
+    timeZone: zone,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  return jsxRuntimeExports.jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  }, children: [jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [jsxRuntimeExports.jsx("div", { style: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 16,
+    padding: "0 6px",
+    backgroundColor: "var(--ds-gray-200)",
+    borderRadius: 3,
+    fontSize: 11,
+    fontFamily: "var(--font-mono, monospace)",
+    fontWeight: 500,
+    color: "var(--ds-gray-900)",
+    whiteSpace: "nowrap"
+  }, children: formattedZone }), jsxRuntimeExports.jsx("span", { style: {
+    fontSize: 13,
+    color: "var(--ds-gray-1000)",
+    whiteSpace: "nowrap"
+  }, children: formattedDate })] }), jsxRuntimeExports.jsx("span", { style: {
+    fontSize: 11,
+    fontFamily: "var(--font-mono, monospace)",
+    fontVariantNumeric: "tabular-nums",
+    color: "var(--ds-gray-900)",
+    whiteSpace: "nowrap"
+  }, children: formattedTime })] });
+}
+function TimestampTooltipContent({ date: date2 }) {
+  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timeAgo = useTimeAgo(date2);
+  return jsxRuntimeExports.jsxs("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    minWidth: 300,
+    padding: "12px 14px"
+  }, children: [jsxRuntimeExports.jsx("span", { style: {
+    fontSize: 13,
+    fontVariantNumeric: "tabular-nums",
+    color: "var(--ds-gray-900)"
+  }, children: timeAgo }), jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: localTimezone })] })] });
+}
+const TOOLTIP_WIDTH = 330;
+const VIEWPORT_PAD = 8;
+function TooltipPortal({ triggerRect, onMouseEnter, onMouseLeave, date: date2 }) {
+  const tooltipRef = reactExports.useRef(null);
+  const [style2, setStyle] = reactExports.useState({
+    position: "fixed",
+    zIndex: 9999,
+    visibility: "hidden"
+  });
+  reactExports.useEffect(() => {
+    const placement = triggerRect.top > 240 ? "above" : "below";
+    const centerX = triggerRect.left + triggerRect.width / 2;
+    const el = tooltipRef.current;
+    const w2 = el ? el.offsetWidth : TOOLTIP_WIDTH;
+    const h2 = el ? el.offsetHeight : 100;
+    let left = centerX - w2 / 2;
+    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - w2 - VIEWPORT_PAD));
+    let top;
+    if (placement === "above") {
+      top = triggerRect.top - h2 - 6;
+      if (top < VIEWPORT_PAD) {
+        top = triggerRect.bottom + 6;
+      }
+    } else {
+      top = triggerRect.bottom + 6;
+      if (top + h2 > window.innerHeight - VIEWPORT_PAD) {
+        top = triggerRect.top - h2 - 6;
+      }
+    }
+    setStyle({
+      position: "fixed",
+      left,
+      top,
+      zIndex: 9999,
+      borderRadius: 10,
+      border: "1px solid var(--ds-gray-alpha-200)",
+      backgroundColor: "var(--ds-background-100)",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
+      visibility: "visible"
+    });
+  }, [triggerRect]);
+  return reactDomExports.createPortal(
+    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip hover zone
+    jsxRuntimeExports.jsx("div", { ref: tooltipRef, onMouseEnter, onMouseLeave, style: style2, children: jsxRuntimeExports.jsx(TimestampTooltipContent, { date: date2 }) }),
+    document.body
+  );
+}
+function TimestampTooltip({ date: date2, children: children2 }) {
+  const [open, setOpen] = reactExports.useState(false);
+  const [triggerRect, setTriggerRect] = reactExports.useState(null);
+  const triggerRef = reactExports.useRef(null);
+  const closeTimer = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    return () => {
+      if (closeTimer.current)
+        clearTimeout(closeTimer.current);
+    };
+  }, []);
+  const ts = date2 == null ? null : typeof date2 === "number" ? date2 : new Date(date2).getTime();
+  if (ts == null || Number.isNaN(ts))
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+  const handleOpen = () => {
+    cancelClose();
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+    setOpen(true);
+  };
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip trigger
+    jsxRuntimeExports.jsxs("span", { ref: triggerRef, onMouseEnter: handleOpen, onMouseLeave: scheduleClose, style: { display: "inline-flex" }, children: [children2, open && triggerRect && jsxRuntimeExports.jsx(TooltipPortal, { triggerRect, onMouseEnter: cancelClose, onMouseLeave: scheduleClose, date: ts })] })
+  );
+}
+const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
+  "step_failed",
+  "step_retrying",
+  "run_failed",
+  "workflow_failed"
+]);
+const BUTTON_RESET_STYLE = {
+  appearance: "none",
+  WebkitAppearance: "none",
+  border: "none",
+  background: "transparent"
+};
+const DOT_PULSE_ANIMATION = "workflow-dot-pulse 1.25s cubic-bezier(0, 0, 0.2, 1) infinite";
+function formatEventTime(date2) {
+  return date2.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }) + "." + date2.getMilliseconds().toString().padStart(3, "0");
+}
+function formatEventType(eventType) {
+  return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function getStatusDotColor(eventType) {
+  if (eventType === "step_failed" || eventType === "run_failed" || eventType === "workflow_failed") {
+    return "var(--ds-red-700)";
+  }
+  if (eventType === "run_cancelled") {
+    return "var(--ds-amber-700)";
+  }
+  if (eventType === "step_retrying") {
+    return "var(--ds-amber-700)";
+  }
+  if (eventType === "step_completed" || eventType === "run_completed" || eventType === "workflow_completed" || eventType === "hook_disposed" || eventType === "wait_completed") {
+    return "var(--ds-green-700)";
+  }
+  if (eventType === "step_started" || eventType === "run_started" || eventType === "workflow_started" || eventType === "hook_received") {
+    return "var(--ds-blue-700)";
+  }
+  return "var(--ds-gray-600)";
+}
+function buildNameMaps(events2, run) {
+  var _a3, _b2;
+  const correlationNameMap = /* @__PURE__ */ new Map();
+  if (events2) {
+    for (const event of events2) {
+      if (event.eventType === "step_created" && event.correlationId) {
+        const stepName = ((_a3 = event.eventData) == null ? void 0 : _a3.stepName) ?? "";
+        const parsed = parseStepName(String(stepName));
+        correlationNameMap.set(event.correlationId, (parsed == null ? void 0 : parsed.shortName) ?? stepName);
+      }
+    }
+  }
+  const workflowName = (run == null ? void 0 : run.workflowName) ? ((_b2 = parseWorkflowName(run.workflowName)) == null ? void 0 : _b2.shortName) ?? run.workflowName : null;
+  return { correlationNameMap, workflowName };
+}
+function buildDurationMap(events2) {
+  const chronological = [...events2].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime());
+  const createdTimes = /* @__PURE__ */ new Map();
+  const firstStartedTimes = /* @__PURE__ */ new Map();
+  const startedTimes = /* @__PURE__ */ new Map();
+  const durations = /* @__PURE__ */ new Map();
+  for (const event of chronological) {
+    const ts = new Date(event.createdAt).getTime();
+    const key = event.correlationId ?? "__run__";
+    const type = event.eventType;
+    if (type === "step_created" || type === "run_created") {
+      if (!createdTimes.has(key)) {
+        createdTimes.set(key, ts);
+      }
+    }
+    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
+      startedTimes.set(key, ts);
+      if (!firstStartedTimes.has(key)) {
+        firstStartedTimes.set(key, ts);
+        if (!createdTimes.has(key)) {
+          createdTimes.set(key, ts);
+        }
+        const createdAt = createdTimes.get(key);
+        const info = durations.get(key) ?? {};
+        if (createdAt !== void 0) {
+          info.queued = ts - createdAt;
+        }
+        durations.set(key, info);
+      }
+    }
+    if (type === "step_completed" || type === "step_failed" || type === "run_completed" || type === "run_failed" || type === "run_cancelled" || type === "workflow_completed" || type === "workflow_failed" || type === "wait_completed" || type === "hook_disposed") {
+      const startedAt = startedTimes.get(key);
+      const info = durations.get(key) ?? {};
+      if (startedAt !== void 0) {
+        info.ran = ts - startedAt;
+      }
+      durations.set(key, info);
+    }
+  }
+  return durations;
+}
+function hasEncryptedValues(data) {
+  if (!data || typeof data !== "object")
+    return false;
+  for (const val of Object.values(data)) {
+    if (isEncryptedMarker(val))
+      return true;
+  }
+  return false;
+}
+function isRunLevel(eventType) {
+  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed";
+}
+const GUTTER_WIDTH = 36;
+const LANE_X = 20;
+const ROOT_LINE_COLOR = "var(--ds-gray-500)";
+function TreeGutter({ isFirst, isLast, isRunLevel: isRun, statusDotColor, pulse = false, hasSelection, showBranch, showLaneLine, isLaneStart, isLaneEnd, continuationOnly = false }) {
+  const dotSize = isRun ? 8 : 6;
+  const dotLeft = isRun ? 5 : 6;
+  const dotOpacity = hasSelection && !showBranch && !isRun ? 0.3 : 1;
+  return jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch", style: {
+    width: GUTTER_WIDTH,
+    minHeight: continuationOnly ? 0 : void 0
+  }, children: [jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    left: 8,
+    top: continuationOnly ? 0 : isFirst ? "50%" : 0,
+    bottom: continuationOnly ? 0 : isLast ? "50%" : 0,
+    width: 2,
+    backgroundColor: ROOT_LINE_COLOR,
+    zIndex: 0
+  } }), !continuationOnly && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: {
+    position: "absolute",
+    left: dotLeft,
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: dotSize,
+    height: dotSize,
+    zIndex: 2
+  }, children: [jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    backgroundColor: "var(--ds-background-100)",
+    zIndex: 0
+  } }), pulse && jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    backgroundColor: statusDotColor,
+    opacity: 0.75 * dotOpacity,
+    animation: DOT_PULSE_ANIMATION,
+    zIndex: 1
+  } }), jsxRuntimeExports.jsx("div", { style: {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    borderRadius: "50%",
+    backgroundColor: statusDotColor,
+    opacity: dotOpacity,
+    transition: "opacity 150ms",
+    zIndex: 2
+  } })] }), showBranch && jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    left: 9,
+    top: "50%",
+    width: GUTTER_WIDTH - 9,
+    height: 2,
+    backgroundColor: ROOT_LINE_COLOR,
+    zIndex: 0
+  } })] }), showLaneLine && jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    left: LANE_X,
+    top: continuationOnly ? 0 : isLaneStart ? "50%" : 0,
+    bottom: continuationOnly ? 0 : isLaneEnd ? "50%" : 0,
+    width: 2,
+    backgroundColor: ROOT_LINE_COLOR,
+    zIndex: 0
+  } })] });
+}
+function CopyableCell({ value, className, style: styleProp }) {
+  const [copied, setCopied] = reactExports.useState(false);
+  const resetCopiedTimeoutRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    return () => {
+      if (resetCopiedTimeoutRef.current !== null) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+    };
+  }, []);
+  const handleCopy = reactExports.useCallback((e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      if (resetCopiedTimeoutRef.current !== null) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+      resetCopiedTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+        resetCopiedTimeoutRef.current = null;
+      }, 1500);
+    });
+  }, [value]);
+  return jsxRuntimeExports.jsxs("div", { className: `group/copy flex items-center gap-1 min-w-0 px-4 ${className ?? ""}`, style: styleProp, children: [jsxRuntimeExports.jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: value || "-" }), value ? jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "flex-shrink-0 opacity-0 group-hover/copy:opacity-100 transition-opacity p-0.5 rounded hover:bg-[var(--ds-gray-alpha-200)]", style: BUTTON_RESET_STYLE, "aria-label": `Copy ${value}`, children: copied ? jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }) : jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3", style: { color: "var(--ds-gray-700)" } }) }) : null] });
+}
+function deepParseJson(value) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
+      try {
+        return deepParseJson(JSON.parse(trimmed));
+      } catch {
+        return value;
+      }
+    }
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map(deepParseJson);
+  }
+  if (value !== null && typeof value === "object") {
+    if (value.constructor !== Object) {
+      return value;
+    }
+    const result = {};
+    for (const [k2, v2] of Object.entries(value)) {
+      result[k2] = deepParseJson(v2);
+    }
+    return result;
+  }
+  return value;
+}
+function extractStructuredError(data, eventType) {
+  if (!eventType || !ERROR_EVENT_TYPES$1.has(eventType))
+    return null;
+  if (data == null || typeof data !== "object")
+    return null;
+  const record2 = data;
+  if (isStructuredErrorWithStack(record2.error))
+    return record2.error;
+  if (isStructuredErrorWithStack(record2))
+    return record2;
+  return null;
+}
+function PayloadBlock({ data, eventType }) {
+  const structuredError = reactExports.useMemo(() => extractStructuredError(data, eventType), [data, eventType]);
+  const [copied, setCopied] = reactExports.useState(false);
+  const resetCopiedTimeoutRef = reactExports.useRef(null);
+  const cleaned = reactExports.useMemo(() => deepParseJson(data), [data]);
+  reactExports.useEffect(() => {
+    return () => {
+      if (resetCopiedTimeoutRef.current !== null) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+    };
+  }, []);
+  const formatted = reactExports.useMemo(() => {
+    try {
+      return JSON.stringify(cleaned, null, 2);
+    } catch {
+      return String(cleaned);
+    }
+  }, [cleaned]);
+  const handleCopy = reactExports.useCallback((e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(formatted).then(() => {
+      setCopied(true);
+      if (resetCopiedTimeoutRef.current !== null) {
+        window.clearTimeout(resetCopiedTimeoutRef.current);
+      }
+      resetCopiedTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+        resetCopiedTimeoutRef.current = null;
+      }, 1500);
+    });
+  }, [formatted]);
+  if (structuredError) {
+    return jsxRuntimeExports.jsx("div", { className: "p-2", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value: structuredError }) });
+  }
+  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
+}
+const SORT_OPTIONS = [
+  { value: "desc", label: "Newest" },
+  { value: "asc", label: "Oldest" }
+];
+function RowsSkeleton() {
+  return jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 16 }, (_2, i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0", style: { height: 40 }, children: [jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch flex items-center", style: { width: GUTTER_WIDTH }, children: [jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    left: 8,
+    top: i === 0 ? "50%" : 0,
+    bottom: 0,
+    width: 2
+  }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-full h-full", style: { borderRadius: 1 } }) }), jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: {
+    width: i % 4 === 0 ? 8 : 6,
+    height: i % 4 === 0 ? 8 : 6,
+    borderRadius: "50%",
+    marginLeft: i % 4 === 0 ? 5 : 6
+  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
+}
+function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected }) {
+  const [isLoading, setIsLoading] = reactExports.useState(false);
+  const [loadedEventData, setLoadedEventData] = reactExports.useState(cachedEventData);
+  const [loadError, setLoadError] = reactExports.useState(null);
+  const [hasAttemptedLoad, setHasAttemptedLoad] = reactExports.useState(cachedEventData !== null);
+  reactExports.useEffect(() => {
+    if (cachedEventData !== null && !encryptionKey && hasEncryptedValues(cachedEventData)) {
+      onEncryptedDataDetected == null ? void 0 : onEncryptedDataDetected();
+    }
+  }, []);
+  const rowGroupKey = isRunLevel(event.eventType) ? "__run__" : event.correlationId ?? void 0;
+  const statusDotColor = getStatusDotColor(event.eventType);
+  const createdAt = new Date(event.createdAt);
+  const hasExistingEventData = "eventData" in event && event.eventData != null;
+  const isRun = isRunLevel(event.eventType);
+  const eventName2 = isRun ? workflowName ?? "-" : event.correlationId ? correlationNameMap.get(event.correlationId) ?? "-" : "-";
+  const durationKey = event.correlationId ?? (isRun ? "__run__" : "");
+  const durationInfo = durationKey ? durationMap.get(durationKey) : void 0;
+  const hasActive = activeGroupKey !== void 0;
+  const isRelated = rowGroupKey !== void 0 && rowGroupKey === activeGroupKey;
+  const isDimmed = hasActive && !isRelated;
+  const isPulsing = hasActive && isRelated;
+  const showBranch = hasActive && isRelated && !isRun;
+  const showLaneLine = selectedGroupRange !== null && index2 >= selectedGroupRange.first && index2 <= selectedGroupRange.last;
+  const isLaneStart = selectedGroupRange !== null && index2 === selectedGroupRange.first;
+  const isLaneEnd = selectedGroupRange !== null && index2 === selectedGroupRange.last;
+  const loadEventDetails = reactExports.useCallback(async () => {
+    if (loadedEventData !== null) {
+      return;
+    }
+    if (cachedEventData !== null) {
+      setLoadedEventData(cachedEventData);
+      setHasAttemptedLoad(true);
+      return;
+    }
+    if (isLoading) {
+      return;
+    }
+    setIsLoading(true);
+    setLoadError(null);
+    try {
+      if (!onLoadEventData) {
+        setLoadError("Event details unavailable");
+        return;
+      }
+      const data = await onLoadEventData(event);
+      if (data !== null && data !== void 0) {
+        setLoadedEventData(data);
+        onCacheEventData(event.eventId, data);
+        if (!encryptionKey && hasEncryptedValues(data)) {
+          onEncryptedDataDetected == null ? void 0 : onEncryptedDataDetected();
+        }
+      }
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : "Failed to load event details");
+    } finally {
+      setIsLoading(false);
+      setHasAttemptedLoad(true);
+    }
+  }, [
+    event,
+    loadedEventData,
+    isLoading,
+    onLoadEventData,
+    onCacheEventData,
+    encryptionKey,
+    onEncryptedDataDetected,
+    cachedEventData
+  ]);
+  reactExports.useEffect(() => {
+    if (!isExpanded || isLoading) {
+      return;
+    }
+    void loadEventDetails();
+  }, []);
+  reactExports.useEffect(() => {
+    if (encryptionKey && hasAttemptedLoad && onLoadEventData) {
+      setLoadedEventData(null);
+      setHasAttemptedLoad(false);
+      onLoadEventData(event).then((data) => {
+        if (data !== null && data !== void 0) {
+          setLoadedEventData(data);
+          onCacheEventData(event.eventId, data);
+        }
+        setHasAttemptedLoad(true);
+      }).catch(() => {
+        setHasAttemptedLoad(true);
+      });
+    }
+  }, [encryptionKey]);
+  const handleRowClick = reactExports.useCallback(() => {
+    onSelectGroup(rowGroupKey === selectedGroupKey ? void 0 : rowGroupKey);
+    onToggleExpand(event.eventId);
+    if (!isExpanded) {
+      void loadEventDetails();
+    }
+  }, [
+    selectedGroupKey,
+    rowGroupKey,
+    onSelectGroup,
+    onToggleExpand,
+    event.eventId,
+    isExpanded,
+    loadEventDetails
+  ]);
+  const mergedEventData = loadedEventData ?? (hasExistingEventData ? event.eventData : null);
+  const displayPayload = isLoading ? loadedEventData : mergedEventData;
+  const contentOpacity = isDimmed ? 0.3 : 1;
+  return jsxRuntimeExports.jsxs("div", { "data-event-id": event.eventId, onMouseEnter: () => onHoverGroup(rowGroupKey), onMouseLeave: () => onHoverGroup(void 0), children: [jsxRuntimeExports.jsxs("div", { role: "button", tabIndex: 0, onClick: handleRowClick, onKeyDown: (e) => {
+    if (e.key === "Enter" || e.key === " ")
+      handleRowClick();
+  }, className: "w-full text-left flex items-center gap-0 text-[13px] hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
+    border: "1px solid var(--ds-gray-400)"
+  }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
+    color: "var(--ds-gray-900)",
+    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+  } }) }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: createdAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(createdAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
+    position: "relative",
+    display: "inline-flex",
+    width: 6,
+    height: 6,
+    flexShrink: 0
+  }, children: [isPulsing && jsxRuntimeExports.jsx("span", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    backgroundColor: statusDotColor,
+    opacity: 0.75,
+    animation: DOT_PULSE_ANIMATION
+  } }), jsxRuntimeExports.jsx("span", { style: {
+    position: "relative",
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    backgroundColor: statusDotColor
+  } })] }), formatEventType(event.eventType)] }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap", style: { flex: "2 1 0%" }, title: eventName2 !== "-" ? eventName2 : void 0, children: eventName2 }), jsxRuntimeExports.jsx(CopyableCell, { value: event.correlationId || "", className: "font-mono", style: { flex: "3 1 0%" } }), jsxRuntimeExports.jsx(CopyableCell, { value: event.eventId, className: "font-mono", style: { flex: "3 1 0%" } })] })] }), isExpanded && jsxRuntimeExports.jsxs("div", { className: "flex", children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst: false, isLast, isRunLevel: isRun, hasSelection: hasActive, showBranch: false, showLaneLine: showLaneLine && !isLaneEnd, isLaneStart: false, isLaneEnd: false, continuationOnly: true }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsxs("div", { className: "flex-1 my-1.5 mr-3 ml-2 py-2 rounded-md border overflow-hidden", style: {
+    borderColor: "var(--ds-gray-alpha-200)",
+    opacity: contentOpacity,
+    transition: "opacity 150ms"
+  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-xs flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-xs", style: {
+    borderColor: "var(--ds-red-400)",
+    backgroundColor: "var(--ds-red-100)",
+    color: "var(--ds-red-900)"
+  }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
+}
+function EventListView({ events: events2, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false }) {
+  const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
+  const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
+  const handleSortOrderChange = reactExports.useCallback((order2) => {
+    if (onSortOrderChange) {
+      onSortOrderChange(order2);
+    } else {
+      setInternalSortOrder(order2);
+    }
+  }, [onSortOrderChange]);
+  const sortedEvents2 = reactExports.useMemo(() => {
+    if (!events2 || events2.length === 0)
+      return [];
+    const dir = effectiveSortOrder === "desc" ? -1 : 1;
+    return [...events2].sort((a2, b2) => dir * (new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime()));
+  }, [events2, effectiveSortOrder]);
+  const hasEncryptedInlineData = reactExports.useMemo(() => {
+    if (!events2)
+      return false;
+    for (const event of events2) {
+      const ed = event.eventData;
+      if (hasEncryptedValues(ed))
+        return true;
+    }
+    return false;
+  }, [events2]);
+  const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] = reactExports.useState(false);
+  const handleEncryptedDataDetected = reactExports.useCallback(() => {
+    setFoundEncryptedInLazyData(true);
+  }, []);
+  const hasEncryptedData = hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
+  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(events2 ?? null, run ?? null), [events2, run]);
+  const durationMap = reactExports.useMemo(() => buildDurationMap(sortedEvents2), [sortedEvents2]);
+  const [selectedGroupKey, setSelectedGroupKey] = reactExports.useState(void 0);
+  const [hoveredGroupKey, setHoveredGroupKey] = reactExports.useState(void 0);
+  const onSelectGroup = reactExports.useCallback((groupKey) => {
+    setSelectedGroupKey(groupKey);
+  }, []);
+  const onHoverGroup = reactExports.useCallback((groupKey) => {
+    setHoveredGroupKey(groupKey);
+  }, []);
+  const activeGroupKey = selectedGroupKey ?? hoveredGroupKey;
+  const [expandedEventIds, setExpandedEventIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
+  const toggleEventExpanded = reactExports.useCallback((eventId) => {
+    setExpandedEventIds((prev) => {
+      const next2 = new Set(prev);
+      if (next2.has(eventId)) {
+        next2.delete(eventId);
+      } else {
+        next2.add(eventId);
+      }
+      return next2;
+    });
+  }, []);
+  const eventDataCacheRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const cacheEventData = reactExports.useCallback((eventId, data) => {
+    eventDataCacheRef.current.set(eventId, data);
+  }, []);
+  const eventGroupKeyMap = reactExports.useMemo(() => {
+    const map2 = /* @__PURE__ */ new Map();
+    for (const ev of sortedEvents2) {
+      const gk = isRunLevel(ev.eventType) ? "__run__" : ev.correlationId ?? "";
+      if (gk)
+        map2.set(ev.eventId, gk);
+    }
+    return map2;
+  }, [sortedEvents2]);
+  reactExports.useEffect(() => {
+    if (selectedGroupKey === void 0)
+      return;
+    setExpandedEventIds((prev) => {
+      if (prev.size === 0)
+        return prev;
+      let changed = false;
+      const next2 = /* @__PURE__ */ new Set();
+      for (const eventId of prev) {
+        if (eventGroupKeyMap.get(eventId) === selectedGroupKey) {
+          next2.add(eventId);
+        } else {
+          changed = true;
+        }
+      }
+      return changed ? next2 : prev;
+    });
+  }, [selectedGroupKey, eventGroupKeyMap]);
+  const selectedGroupRange = reactExports.useMemo(() => {
+    if (!activeGroupKey || activeGroupKey === "__run__")
+      return null;
+    let first = -1;
+    let last = -1;
+    for (let i = 0; i < sortedEvents2.length; i++) {
+      if (sortedEvents2[i].correlationId === activeGroupKey) {
+        if (first === -1)
+          first = i;
+        last = i;
+      }
+    }
+    return first >= 0 ? { first, last } : null;
+  }, [activeGroupKey, sortedEvents2]);
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const virtuosoRef = reactExports.useRef(null);
+  const searchIndex = reactExports.useMemo(() => {
+    const entries = [];
+    for (let i = 0; i < sortedEvents2.length; i++) {
+      const ev = sortedEvents2[i];
+      const isRun = isRunLevel(ev.eventType);
+      const name2 = isRun ? workflowName ?? "" : ev.correlationId ? correlationNameMap.get(ev.correlationId) ?? "" : "";
+      entries.push({
+        fields: [
+          ev.eventId,
+          ev.correlationId ?? "",
+          ev.eventType,
+          formatEventType(ev.eventType),
+          name2
+        ].map((f2) => f2.toLowerCase()),
+        groupKey: ev.correlationId ?? (isRun ? "__run__" : void 0),
+        eventId: ev.eventId,
+        index: i
+      });
+    }
+    return entries;
+  }, [sortedEvents2, correlationNameMap, workflowName]);
+  reactExports.useEffect(() => {
+    var _a3;
+    const q2 = searchQuery.trim().toLowerCase();
+    if (!q2) {
+      setSelectedGroupKey(void 0);
+      return;
+    }
+    let bestMatch = null;
+    let bestScore = 0;
+    for (const entry2 of searchIndex) {
+      for (const field of entry2.fields) {
+        if (field && field.includes(q2)) {
+          const score = q2.length / field.length;
+          if (score > bestScore) {
+            bestScore = score;
+            bestMatch = entry2;
+          }
+        }
+      }
+    }
+    if (bestMatch) {
+      setSelectedGroupKey(bestMatch.groupKey);
+      (_a3 = virtuosoRef.current) == null ? void 0 : _a3.scrollToIndex({
+        index: bestMatch.index,
+        align: "center",
+        behavior: "smooth"
+      });
+    }
+  }, [searchQuery, searchIndex]);
+  const hasHadEventsRef = reactExports.useRef(false);
+  if (sortedEvents2.length > 0) {
+    hasHadEventsRef.current = true;
+  }
+  const isInitialLoad = isLoading && !hasHadEventsRef.current;
+  const isRefetching = isLoading && hasHadEventsRef.current && sortedEvents2.length === 0;
+  if (isInitialLoad) {
+    return jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("div", { style: { padding: 6 }, children: jsxRuntimeExports.jsx(Skeleton$2, { style: { height: 40, borderRadius: 6 } }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 h-10 border-b flex-shrink-0", style: { borderColor: "var(--ds-gray-alpha-200)" }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 40 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 72 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 44 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 92 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 60 } }) })] }), jsxRuntimeExports.jsx(RowsSkeleton, {})] });
+  }
+  if (!isLoading && (!events2 || events2.length === 0)) {
+    return jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: "var(--ds-gray-700)" }, children: "No events found" });
+  }
+  return jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("style", { children: `@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}` }), jsxRuntimeExports.jsxs("div", { style: {
+    padding: 6,
+    backgroundColor: "var(--ds-background-100)",
+    display: "flex",
+    gap: 6
+  }, children: [jsxRuntimeExports.jsxs("label", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    boxShadow: "0 0 0 1px var(--ds-gray-alpha-400)",
+    background: "var(--ds-background-100)",
+    height: 40,
+    flex: 1,
+    minWidth: 0
+  }, children: [jsxRuntimeExports.jsx("div", { style: {
+    width: 40,
+    height: 40,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--ds-gray-800)",
+    flexShrink: 0
+  }, children: jsxRuntimeExports.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsxRuntimeExports.jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntimeExports.jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), jsxRuntimeExports.jsx("input", { type: "search", placeholder: "Search by name, event type, or ID…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
+    marginLeft: -16,
+    paddingInline: 12,
+    fontFamily: "inherit",
+    fontSize: 14,
+    background: "transparent",
+    border: "none",
+    outline: "none",
+    height: 40,
+    width: "100%"
+  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0", style: {
+    borderColor: "var(--ds-gray-alpha-200)",
+    color: "var(--ds-gray-900)",
+    backgroundColor: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Time" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching ? jsxRuntimeExports.jsx(RowsSkeleton, {}) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents2.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
+    if (!hasMoreEvents || isLoadingMoreEvents) {
+      return;
+    }
+    void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
+  }, itemContent: (index2) => {
+    const ev = sortedEvents2[index2];
+    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index: index2, isFirst: index2 === 0, isLast: index2 === sortedEvents2.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected });
+  }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs", style: {
+    borderColor: "var(--ds-gray-alpha-200)",
+    color: "var(--ds-gray-900)",
+    backgroundColor: "var(--ds-background-100)"
+  }, children: [jsxRuntimeExports.jsxs("span", { children: [sortedEvents2.length, " event", sortedEvents2.length !== 1 ? "s" : "", " loaded"] }), hasMoreEvents && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto", children: jsxRuntimeExports.jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents()) }) }) })] })] }) });
+}
 function __insertCSS(code2) {
   if (typeof document == "undefined") return;
   let head = document.head || document.getElementsByTagName("head")[0];
@@ -51885,927 +53001,6 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
-function isStructuredErrorWithStack(value) {
-  return value != null && typeof value === "object" && "stack" in value && typeof value.stack === "string";
-}
-function deriveTitle(message2) {
-  const firstLine = message2.split("\n").find((line) => line.trim().length > 0) ?? message2;
-  return firstLine.trim();
-}
-function ErrorStackBlock({ value }) {
-  const toast2 = useToast();
-  const stack = value.stack;
-  const message2 = typeof value.message === "string" ? value.message : void 0;
-  const title = message2 ? deriveTitle(message2) : void 0;
-  const copyText = message2 ? `${message2}
-
-${stack}` : stack;
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-hidden rounded-md border", style: {
-    borderColor: "var(--ds-red-400)",
-    background: "var(--ds-red-100)"
-  }, children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Copy error", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95", style: {
-    borderColor: "var(--ds-red-400)",
-    background: "var(--ds-red-100)",
-    color: "var(--ds-red-900)"
-  }, onClick: () => {
-    navigator.clipboard.writeText(copyText).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), title && jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 pr-10", style: {
-    color: "var(--ds-red-900)",
-    borderBottom: "1px solid var(--ds-red-400)"
-  }, children: [jsxRuntimeExports.jsx(CircleAlert, { className: "h-4 w-4 shrink-0" }), jsxRuntimeExports.jsx("p", {
-    className: "text-xs font-semibold m-0 truncate",
-    // The full multi-line message is in the stack body below; the
-    // header just shows the first line, single-line, with overflow
-    // ellipsised so a long title doesn't push the copy button or
-    // wrap into the framed hint/docs lines.
-    title: message2,
-    children: title
-  })] }), jsxRuntimeExports.jsx("pre", { className: "px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0", style: {
-    color: "var(--ds-red-900)",
-    background: "var(--ds-red-200)"
-  }, children: stack })] });
-}
-const STYLES$1 = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
-function LoadMoreButton({ loading = false, onClick, label = "Load more", loadingLabel = "Loading..." }) {
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES$1 } }), jsxRuntimeExports.jsxs("button", { type: "button", onClick, disabled: loading, className: "wf-load-more", children: [loading && jsxRuntimeExports.jsx(Spinner, { size: 14 }), loading ? loadingLabel : label] })] });
-}
-const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
-function MenuDropdown({ options, value, onChange }) {
-  var _a3, _b2;
-  const [open, setOpen] = reactExports.useState(false);
-  const ref = reactExports.useRef(null);
-  const label = ((_a3 = options.find((o) => o.value === value)) == null ? void 0 : _a3.label) ?? ((_b2 = options[0]) == null ? void 0 : _b2.label) ?? "";
-  reactExports.useEffect(() => {
-    if (!open)
-      return;
-    function handleClickOutside(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
-  return jsxRuntimeExports.jsxs("div", { ref, style: { position: "relative", flexShrink: 0 }, children: [jsxRuntimeExports.jsx("style", { dangerouslySetInnerHTML: { __html: STYLES } }), jsxRuntimeExports.jsxs("button", { type: "button", className: "wf-menu-btn", onClick: () => setOpen(!open), children: [jsxRuntimeExports.jsx("span", { children: label }), jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", style: {
-    marginLeft: 16,
-    marginRight: -4,
-    color: "var(--ds-gray-900)"
-  }, children: jsxRuntimeExports.jsx("path", { d: "M4.5 6L8 9.5L11.5 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), open && jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    right: 0,
-    top: "100%",
-    marginTop: 4,
-    minWidth: 140,
-    padding: 4,
-    borderRadius: 12,
-    background: "var(--ds-background-100)",
-    boxShadow: "var(--ds-shadow-menu, var(--ds-shadow-medium))",
-    zIndex: 2001
-  }, role: "menu", children: options.map((option) => jsxRuntimeExports.jsx("button", { type: "button", role: "menuitem", className: "wf-menu-item", style: {
-    fontWeight: option.value === value ? 500 : 400
-  }, onClick: () => {
-    onChange(option.value);
-    setOpen(false);
-  }, children: option.label }, option.value)) })] });
-}
-function Skeleton$2({ className, style: style2, ...props }) {
-  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
-}
-const TIME_UNITS = [
-  { unit: "year", ms: 31536e6 },
-  { unit: "month", ms: 2628e6 },
-  { unit: "day", ms: 864e5 },
-  { unit: "hour", ms: 36e5 },
-  { unit: "minute", ms: 6e4 },
-  { unit: "second", ms: 1e3 }
-];
-function formatTimeDifference(diff) {
-  let remaining = Math.abs(diff);
-  const result = [];
-  for (const { unit, ms: ms2 } of TIME_UNITS) {
-    const value = Math.floor(remaining / ms2);
-    if (value > 0 || result.length > 0) {
-      result.push(`${value} ${unit}${value !== 1 ? "s" : ""}`);
-      remaining %= ms2;
-    }
-    if (result.length === 3)
-      break;
-  }
-  return result.join(", ");
-}
-function useTimeAgo(date2) {
-  const [timeAgo, setTimeAgo] = reactExports.useState("");
-  reactExports.useEffect(() => {
-    const update = () => {
-      const diff = Date.now() - date2;
-      const formatted = formatTimeDifference(diff);
-      setTimeAgo(formatted ? `${formatted} ago` : "Just now");
-    };
-    update();
-    const timer2 = setInterval(update, 1e3);
-    return () => clearInterval(timer2);
-  }, [date2]);
-  return timeAgo;
-}
-function ZoneDateTimeRow({ date: date2, zone }) {
-  var _a3;
-  const dateObj = new Date(date2);
-  const formattedZone = ((_a3 = new Intl.DateTimeFormat("en-US", {
-    timeZone: zone,
-    timeZoneName: "short"
-  }).formatToParts(dateObj).find((part) => part.type === "timeZoneName")) == null ? void 0 : _a3.value) || zone;
-  const formattedDate = dateObj.toLocaleString("en-US", {
-    timeZone: zone,
-    year: "numeric",
-    month: "long",
-    day: "numeric"
-  });
-  const formattedTime = dateObj.toLocaleTimeString("en-US", {
-    timeZone: zone,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12
-  }, children: [jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [jsxRuntimeExports.jsx("div", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    height: 16,
-    padding: "0 6px",
-    backgroundColor: "var(--ds-gray-200)",
-    borderRadius: 3,
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontWeight: 500,
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedZone }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    color: "var(--ds-gray-1000)",
-    whiteSpace: "nowrap"
-  }, children: formattedDate })] }), jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 11,
-    fontFamily: "var(--font-mono, monospace)",
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)",
-    whiteSpace: "nowrap"
-  }, children: formattedTime })] });
-}
-function TimestampTooltipContent({ date: date2 }) {
-  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const timeAgo = useTimeAgo(date2);
-  return jsxRuntimeExports.jsxs("div", { style: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 12,
-    minWidth: 300,
-    padding: "12px 14px"
-  }, children: [jsxRuntimeExports.jsx("span", { style: {
-    fontSize: 13,
-    fontVariantNumeric: "tabular-nums",
-    color: "var(--ds-gray-900)"
-  }, children: timeAgo }), jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: "UTC" }), jsxRuntimeExports.jsx(ZoneDateTimeRow, { date: date2, zone: localTimezone })] })] });
-}
-const TOOLTIP_WIDTH = 330;
-const VIEWPORT_PAD = 8;
-function TooltipPortal({ triggerRect, onMouseEnter, onMouseLeave, date: date2 }) {
-  const tooltipRef = reactExports.useRef(null);
-  const [style2, setStyle] = reactExports.useState({
-    position: "fixed",
-    zIndex: 9999,
-    visibility: "hidden"
-  });
-  reactExports.useEffect(() => {
-    const placement = triggerRect.top > 240 ? "above" : "below";
-    const centerX = triggerRect.left + triggerRect.width / 2;
-    const el = tooltipRef.current;
-    const w2 = el ? el.offsetWidth : TOOLTIP_WIDTH;
-    const h2 = el ? el.offsetHeight : 100;
-    let left = centerX - w2 / 2;
-    left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - w2 - VIEWPORT_PAD));
-    let top;
-    if (placement === "above") {
-      top = triggerRect.top - h2 - 6;
-      if (top < VIEWPORT_PAD) {
-        top = triggerRect.bottom + 6;
-      }
-    } else {
-      top = triggerRect.bottom + 6;
-      if (top + h2 > window.innerHeight - VIEWPORT_PAD) {
-        top = triggerRect.top - h2 - 6;
-      }
-    }
-    setStyle({
-      position: "fixed",
-      left,
-      top,
-      zIndex: 9999,
-      borderRadius: 10,
-      border: "1px solid var(--ds-gray-alpha-200)",
-      backgroundColor: "var(--ds-background-100)",
-      boxShadow: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
-      visibility: "visible"
-    });
-  }, [triggerRect]);
-  return reactDomExports.createPortal(
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip hover zone
-    jsxRuntimeExports.jsx("div", { ref: tooltipRef, onMouseEnter, onMouseLeave, style: style2, children: jsxRuntimeExports.jsx(TimestampTooltipContent, { date: date2 }) }),
-    document.body
-  );
-}
-function TimestampTooltip({ date: date2, children: children2 }) {
-  const [open, setOpen] = reactExports.useState(false);
-  const [triggerRect, setTriggerRect] = reactExports.useState(null);
-  const triggerRef = reactExports.useRef(null);
-  const closeTimer = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (closeTimer.current)
-        clearTimeout(closeTimer.current);
-    };
-  }, []);
-  const ts = date2 == null ? null : typeof date2 === "number" ? date2 : new Date(date2).getTime();
-  if (ts == null || Number.isNaN(ts))
-    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
-  const cancelClose = () => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  };
-  const scheduleClose = () => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), 120);
-  };
-  const handleOpen = () => {
-    cancelClose();
-    if (triggerRef.current) {
-      setTriggerRect(triggerRef.current.getBoundingClientRect());
-    }
-    setOpen(true);
-  };
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip trigger
-    jsxRuntimeExports.jsxs("span", { ref: triggerRef, onMouseEnter: handleOpen, onMouseLeave: scheduleClose, style: { display: "inline-flex" }, children: [children2, open && triggerRect && jsxRuntimeExports.jsx(TooltipPortal, { triggerRect, onMouseEnter: cancelClose, onMouseLeave: scheduleClose, date: ts })] })
-  );
-}
-const ERROR_EVENT_TYPES$1 = /* @__PURE__ */ new Set([
-  "step_failed",
-  "step_retrying",
-  "run_failed",
-  "workflow_failed"
-]);
-const BUTTON_RESET_STYLE = {
-  appearance: "none",
-  WebkitAppearance: "none",
-  border: "none",
-  background: "transparent"
-};
-const DOT_PULSE_ANIMATION = "workflow-dot-pulse 1.25s cubic-bezier(0, 0, 0.2, 1) infinite";
-function formatEventTime(date2) {
-  return date2.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false
-  }) + "." + date2.getMilliseconds().toString().padStart(3, "0");
-}
-function formatEventType(eventType) {
-  return eventType.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-}
-function getStatusDotColor(eventType) {
-  if (eventType === "step_failed" || eventType === "run_failed" || eventType === "workflow_failed") {
-    return "var(--ds-red-700)";
-  }
-  if (eventType === "run_cancelled") {
-    return "var(--ds-amber-700)";
-  }
-  if (eventType === "step_retrying") {
-    return "var(--ds-amber-700)";
-  }
-  if (eventType === "step_completed" || eventType === "run_completed" || eventType === "workflow_completed" || eventType === "hook_disposed" || eventType === "wait_completed") {
-    return "var(--ds-green-700)";
-  }
-  if (eventType === "step_started" || eventType === "run_started" || eventType === "workflow_started" || eventType === "hook_received") {
-    return "var(--ds-blue-700)";
-  }
-  return "var(--ds-gray-600)";
-}
-function buildNameMaps(events2, run) {
-  var _a3, _b2;
-  const correlationNameMap = /* @__PURE__ */ new Map();
-  if (events2) {
-    for (const event of events2) {
-      if (event.eventType === "step_created" && event.correlationId) {
-        const stepName = ((_a3 = event.eventData) == null ? void 0 : _a3.stepName) ?? "";
-        const parsed = parseStepName(String(stepName));
-        correlationNameMap.set(event.correlationId, (parsed == null ? void 0 : parsed.shortName) ?? stepName);
-      }
-    }
-  }
-  const workflowName = (run == null ? void 0 : run.workflowName) ? ((_b2 = parseWorkflowName(run.workflowName)) == null ? void 0 : _b2.shortName) ?? run.workflowName : null;
-  return { correlationNameMap, workflowName };
-}
-function buildDurationMap(events2) {
-  const createdTimes = /* @__PURE__ */ new Map();
-  const startedTimes = /* @__PURE__ */ new Map();
-  const durations = /* @__PURE__ */ new Map();
-  for (const event of events2) {
-    const ts = new Date(event.createdAt).getTime();
-    const key = event.correlationId ?? "__run__";
-    const type = event.eventType;
-    if (type === "step_created" || type === "run_created") {
-      createdTimes.set(key, ts);
-    }
-    if (type === "step_started" || type === "run_started" || type === "workflow_started") {
-      startedTimes.set(key, ts);
-      if (!createdTimes.has(key)) {
-        createdTimes.set(key, ts);
-      }
-      const createdAt = createdTimes.get(key);
-      const info = durations.get(key) ?? {};
-      if (createdAt !== void 0) {
-        info.queued = ts - createdAt;
-      }
-      durations.set(key, info);
-    }
-    if (type === "step_completed" || type === "step_failed" || type === "run_completed" || type === "run_failed" || type === "run_cancelled" || type === "workflow_completed" || type === "workflow_failed" || type === "wait_completed" || type === "hook_disposed") {
-      const startedAt = startedTimes.get(key);
-      const info = durations.get(key) ?? {};
-      if (startedAt !== void 0) {
-        info.ran = ts - startedAt;
-      }
-      durations.set(key, info);
-    }
-  }
-  return durations;
-}
-function hasEncryptedValues(data) {
-  if (!data || typeof data !== "object")
-    return false;
-  for (const val of Object.values(data)) {
-    if (isEncryptedMarker(val))
-      return true;
-  }
-  return false;
-}
-function isRunLevel(eventType) {
-  return eventType === "run_created" || eventType === "run_started" || eventType === "run_completed" || eventType === "run_failed" || eventType === "run_cancelled" || eventType === "workflow_started" || eventType === "workflow_completed" || eventType === "workflow_failed";
-}
-const GUTTER_WIDTH = 36;
-const LANE_X = 20;
-const ROOT_LINE_COLOR = "var(--ds-gray-500)";
-function TreeGutter({ isFirst, isLast, isRunLevel: isRun, statusDotColor, pulse = false, hasSelection, showBranch, showLaneLine, isLaneStart, isLaneEnd, continuationOnly = false }) {
-  const dotSize = isRun ? 8 : 6;
-  const dotLeft = isRun ? 5 : 6;
-  const dotOpacity = hasSelection && !showBranch && !isRun ? 0.3 : 1;
-  return jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch", style: {
-    width: GUTTER_WIDTH,
-    minHeight: continuationOnly ? 0 : void 0
-  }, children: [jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    left: 8,
-    top: continuationOnly ? 0 : isFirst ? "50%" : 0,
-    bottom: continuationOnly ? 0 : isLast ? "50%" : 0,
-    width: 2,
-    backgroundColor: ROOT_LINE_COLOR,
-    zIndex: 0
-  } }), !continuationOnly && jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: {
-    position: "absolute",
-    left: dotLeft,
-    top: "50%",
-    transform: "translateY(-50%)",
-    width: dotSize,
-    height: dotSize,
-    zIndex: 2
-  }, children: [jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "50%",
-    backgroundColor: "var(--ds-background-100)",
-    zIndex: 0
-  } }), pulse && jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "50%",
-    backgroundColor: statusDotColor,
-    opacity: 0.75 * dotOpacity,
-    animation: DOT_PULSE_ANIMATION,
-    zIndex: 1
-  } }), jsxRuntimeExports.jsx("div", { style: {
-    position: "relative",
-    width: "100%",
-    height: "100%",
-    borderRadius: "50%",
-    backgroundColor: statusDotColor,
-    opacity: dotOpacity,
-    transition: "opacity 150ms",
-    zIndex: 2
-  } })] }), showBranch && jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    left: 9,
-    top: "50%",
-    width: GUTTER_WIDTH - 9,
-    height: 2,
-    backgroundColor: ROOT_LINE_COLOR,
-    zIndex: 0
-  } })] }), showLaneLine && jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    left: LANE_X,
-    top: continuationOnly ? 0 : isLaneStart ? "50%" : 0,
-    bottom: continuationOnly ? 0 : isLaneEnd ? "50%" : 0,
-    width: 2,
-    backgroundColor: ROOT_LINE_COLOR,
-    zIndex: 0
-  } })] });
-}
-function CopyableCell({ value, className, style: styleProp }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const resetCopiedTimeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (resetCopiedTimeoutRef.current !== null) {
-        window.clearTimeout(resetCopiedTimeoutRef.current);
-      }
-    };
-  }, []);
-  const handleCopy = reactExports.useCallback((e) => {
-    e.stopPropagation();
-    navigator.clipboard.writeText(value).then(() => {
-      setCopied(true);
-      if (resetCopiedTimeoutRef.current !== null) {
-        window.clearTimeout(resetCopiedTimeoutRef.current);
-      }
-      resetCopiedTimeoutRef.current = window.setTimeout(() => {
-        setCopied(false);
-        resetCopiedTimeoutRef.current = null;
-      }, 1500);
-    });
-  }, [value]);
-  return jsxRuntimeExports.jsxs("div", { className: `group/copy flex items-center gap-1 min-w-0 px-4 ${className ?? ""}`, style: styleProp, children: [jsxRuntimeExports.jsx("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: value || "-" }), value ? jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "flex-shrink-0 opacity-0 group-hover/copy:opacity-100 transition-opacity p-0.5 rounded hover:bg-[var(--ds-gray-alpha-200)]", style: BUTTON_RESET_STYLE, "aria-label": `Copy ${value}`, children: copied ? jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }) : jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3", style: { color: "var(--ds-gray-700)" } }) }) : null] });
-}
-function deepParseJson(value) {
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]") || trimmed.startsWith('"') && trimmed.endsWith('"')) {
-      try {
-        return deepParseJson(JSON.parse(trimmed));
-      } catch {
-        return value;
-      }
-    }
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.map(deepParseJson);
-  }
-  if (value !== null && typeof value === "object") {
-    if (value.constructor !== Object) {
-      return value;
-    }
-    const result = {};
-    for (const [k2, v2] of Object.entries(value)) {
-      result[k2] = deepParseJson(v2);
-    }
-    return result;
-  }
-  return value;
-}
-function extractStructuredError(data, eventType) {
-  if (!eventType || !ERROR_EVENT_TYPES$1.has(eventType))
-    return null;
-  if (data == null || typeof data !== "object")
-    return null;
-  const record2 = data;
-  if (isStructuredErrorWithStack(record2.error))
-    return record2.error;
-  if (isStructuredErrorWithStack(record2))
-    return record2;
-  return null;
-}
-function PayloadBlock({ data, eventType }) {
-  const structuredError = reactExports.useMemo(() => extractStructuredError(data, eventType), [data, eventType]);
-  const [copied, setCopied] = reactExports.useState(false);
-  const resetCopiedTimeoutRef = reactExports.useRef(null);
-  const cleaned = reactExports.useMemo(() => deepParseJson(data), [data]);
-  reactExports.useEffect(() => {
-    return () => {
-      if (resetCopiedTimeoutRef.current !== null) {
-        window.clearTimeout(resetCopiedTimeoutRef.current);
-      }
-    };
-  }, []);
-  const formatted = reactExports.useMemo(() => {
-    try {
-      return JSON.stringify(cleaned, null, 2);
-    } catch {
-      return String(cleaned);
-    }
-  }, [cleaned]);
-  const handleCopy = reactExports.useCallback((e) => {
-    e.stopPropagation();
-    navigator.clipboard.writeText(formatted).then(() => {
-      setCopied(true);
-      if (resetCopiedTimeoutRef.current !== null) {
-        window.clearTimeout(resetCopiedTimeoutRef.current);
-      }
-      resetCopiedTimeoutRef.current = window.setTimeout(() => {
-        setCopied(false);
-        resetCopiedTimeoutRef.current = null;
-      }, 1500);
-    });
-  }, [formatted]);
-  if (structuredError) {
-    return jsxRuntimeExports.jsx("div", { className: "p-2", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value: structuredError }) });
-  }
-  return jsxRuntimeExports.jsxs("div", { className: "relative group/payload", children: [jsxRuntimeExports.jsx("div", { className: "overflow-x-auto p-2 text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: jsxRuntimeExports.jsx(DataInspector, { data: cleaned, expandLevel: 2 }) }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleCopy, className: "absolute bottom-2 right-2 opacity-0 group-hover/payload:opacity-100 transition-opacity flex items-center gap-1 px-2 py-1 rounded-md text-xs hover:bg-[var(--ds-gray-alpha-200)]", style: { ...BUTTON_RESET_STYLE, color: "var(--ds-gray-700)" }, "aria-label": "Copy payload", children: copied ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Check, { className: "h-3 w-3", style: { color: "var(--ds-green-700)" } }), jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-green-700)" }, children: "Copied" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Copy, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Copy" })] }) })] });
-}
-const SORT_OPTIONS = [
-  { value: "desc", label: "Newest" },
-  { value: "asc", label: "Oldest" }
-];
-function RowsSkeleton() {
-  return jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 16 }, (_2, i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0", style: { height: 40 }, children: [jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 self-stretch flex items-center", style: { width: GUTTER_WIDTH }, children: [jsxRuntimeExports.jsx("div", { style: {
-    position: "absolute",
-    left: 8,
-    top: i === 0 ? "50%" : 0,
-    bottom: 0,
-    width: 2
-  }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-full h-full", style: { borderRadius: 1 } }) }), jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: {
-    width: i % 4 === 0 ? 8 : 6,
-    height: i % 4 === 0 ? 8 : 6,
-    borderRadius: "50%",
-    marginLeft: i % 4 === 0 ? 5 : 6
-  } })] }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0 flex items-center justify-center", children: jsxRuntimeExports.jsx(Skeleton$2, { className: "w-5 h-5", style: { borderRadius: 4 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "70%" } }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 px-4 flex items-center gap-1.5", style: { flex: "2 1 0%" }, children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "flex-shrink-0", style: { width: 6, height: 6, borderRadius: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }) })] }, i)) });
-}
-function EventRow$1({ event, index: index2, isFirst, isLast, isExpanded, onToggleExpand, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData, onCacheEventData, encryptionKey, onEncryptedDataDetected }) {
-  const [isLoading, setIsLoading] = reactExports.useState(false);
-  const [loadedEventData, setLoadedEventData] = reactExports.useState(cachedEventData);
-  const [loadError, setLoadError] = reactExports.useState(null);
-  const [hasAttemptedLoad, setHasAttemptedLoad] = reactExports.useState(cachedEventData !== null);
-  reactExports.useEffect(() => {
-    if (cachedEventData !== null && !encryptionKey && hasEncryptedValues(cachedEventData)) {
-      onEncryptedDataDetected == null ? void 0 : onEncryptedDataDetected();
-    }
-  }, []);
-  const rowGroupKey = isRunLevel(event.eventType) ? "__run__" : event.correlationId ?? void 0;
-  const statusDotColor = getStatusDotColor(event.eventType);
-  const createdAt = new Date(event.createdAt);
-  const hasExistingEventData = "eventData" in event && event.eventData != null;
-  const isRun = isRunLevel(event.eventType);
-  const eventName2 = isRun ? workflowName ?? "-" : event.correlationId ? correlationNameMap.get(event.correlationId) ?? "-" : "-";
-  const durationKey = event.correlationId ?? (isRun ? "__run__" : "");
-  const durationInfo = durationKey ? durationMap.get(durationKey) : void 0;
-  const hasActive = activeGroupKey !== void 0;
-  const isRelated = rowGroupKey !== void 0 && rowGroupKey === activeGroupKey;
-  const isDimmed = hasActive && !isRelated;
-  const isPulsing = hasActive && isRelated;
-  const showBranch = hasActive && isRelated && !isRun;
-  const showLaneLine = selectedGroupRange !== null && index2 >= selectedGroupRange.first && index2 <= selectedGroupRange.last;
-  const isLaneStart = selectedGroupRange !== null && index2 === selectedGroupRange.first;
-  const isLaneEnd = selectedGroupRange !== null && index2 === selectedGroupRange.last;
-  const loadEventDetails = reactExports.useCallback(async () => {
-    if (loadedEventData !== null) {
-      return;
-    }
-    if (cachedEventData !== null) {
-      setLoadedEventData(cachedEventData);
-      setHasAttemptedLoad(true);
-      return;
-    }
-    if (isLoading) {
-      return;
-    }
-    setIsLoading(true);
-    setLoadError(null);
-    try {
-      if (!onLoadEventData) {
-        setLoadError("Event details unavailable");
-        return;
-      }
-      const data = await onLoadEventData(event);
-      if (data !== null && data !== void 0) {
-        setLoadedEventData(data);
-        onCacheEventData(event.eventId, data);
-        if (!encryptionKey && hasEncryptedValues(data)) {
-          onEncryptedDataDetected == null ? void 0 : onEncryptedDataDetected();
-        }
-      }
-    } catch (err) {
-      setLoadError(err instanceof Error ? err.message : "Failed to load event details");
-    } finally {
-      setIsLoading(false);
-      setHasAttemptedLoad(true);
-    }
-  }, [
-    event,
-    loadedEventData,
-    isLoading,
-    onLoadEventData,
-    onCacheEventData,
-    encryptionKey,
-    onEncryptedDataDetected,
-    cachedEventData
-  ]);
-  reactExports.useEffect(() => {
-    if (!isExpanded || isLoading) {
-      return;
-    }
-    void loadEventDetails();
-  }, []);
-  reactExports.useEffect(() => {
-    if (encryptionKey && hasAttemptedLoad && onLoadEventData) {
-      setLoadedEventData(null);
-      setHasAttemptedLoad(false);
-      onLoadEventData(event).then((data) => {
-        if (data !== null && data !== void 0) {
-          setLoadedEventData(data);
-          onCacheEventData(event.eventId, data);
-        }
-        setHasAttemptedLoad(true);
-      }).catch(() => {
-        setHasAttemptedLoad(true);
-      });
-    }
-  }, [encryptionKey]);
-  const handleRowClick = reactExports.useCallback(() => {
-    onSelectGroup(rowGroupKey === selectedGroupKey ? void 0 : rowGroupKey);
-    onToggleExpand(event.eventId);
-    if (!isExpanded) {
-      void loadEventDetails();
-    }
-  }, [
-    selectedGroupKey,
-    rowGroupKey,
-    onSelectGroup,
-    onToggleExpand,
-    event.eventId,
-    isExpanded,
-    loadEventDetails
-  ]);
-  const mergedEventData = loadedEventData ?? (hasExistingEventData ? event.eventData : null);
-  const displayPayload = isLoading ? loadedEventData : mergedEventData;
-  const contentOpacity = isDimmed ? 0.3 : 1;
-  return jsxRuntimeExports.jsxs("div", { "data-event-id": event.eventId, onMouseEnter: () => onHoverGroup(rowGroupKey), onMouseLeave: () => onHoverGroup(void 0), children: [jsxRuntimeExports.jsxs("div", { role: "button", tabIndex: 0, onClick: handleRowClick, onKeyDown: (e) => {
-    if (e.key === "Enter" || e.key === " ")
-      handleRowClick();
-  }, className: "w-full text-left flex items-center gap-0 text-[13px] hover:bg-[var(--ds-gray-alpha-100)] transition-colors cursor-pointer", style: { minHeight: 40 }, children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst, isLast: isLast && !isExpanded, isRunLevel: isRun, statusDotColor, pulse: isPulsing, hasSelection: hasActive, showBranch, showLaneLine, isLaneStart, isLaneEnd }), jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 min-w-0", style: { opacity: contentOpacity, transition: "opacity 150ms" }, children: [jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center w-5 h-5 flex-shrink-0 rounded", style: {
-    border: "1px solid var(--ds-gray-400)"
-  }, children: jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 transition-transform", style: {
-    color: "var(--ds-gray-900)",
-    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
-  } }) }), jsxRuntimeExports.jsx("div", { className: "tabular-nums min-w-0 px-4", style: { color: "var(--ds-gray-900)", flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(TimestampTooltip, { date: createdAt, children: jsxRuntimeExports.jsx("span", { children: formatEventTime(createdAt) }) }) }), jsxRuntimeExports.jsx("div", { className: "font-medium min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5", style: { color: "var(--ds-gray-900)" }, children: [jsxRuntimeExports.jsxs("span", { style: {
-    position: "relative",
-    display: "inline-flex",
-    width: 6,
-    height: 6,
-    flexShrink: 0
-  }, children: [isPulsing && jsxRuntimeExports.jsx("span", { style: {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "50%",
-    backgroundColor: statusDotColor,
-    opacity: 0.75,
-    animation: DOT_PULSE_ANIMATION
-  } }), jsxRuntimeExports.jsx("span", { style: {
-    position: "relative",
-    width: 6,
-    height: 6,
-    borderRadius: "50%",
-    backgroundColor: statusDotColor
-  } })] }), formatEventType(event.eventType)] }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4 overflow-hidden text-ellipsis whitespace-nowrap", style: { flex: "2 1 0%" }, title: eventName2 !== "-" ? eventName2 : void 0, children: eventName2 }), jsxRuntimeExports.jsx(CopyableCell, { value: event.correlationId || "", className: "font-mono", style: { flex: "3 1 0%" } }), jsxRuntimeExports.jsx(CopyableCell, { value: event.eventId, className: "font-mono", style: { flex: "3 1 0%" } })] })] }), isExpanded && jsxRuntimeExports.jsxs("div", { className: "flex", children: [jsxRuntimeExports.jsx(TreeGutter, { isFirst: false, isLast, isRunLevel: isRun, hasSelection: hasActive, showBranch: false, showLaneLine: showLaneLine && !isLaneEnd, isLaneStart: false, isLaneEnd: false, continuationOnly: true }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsxs("div", { className: "flex-1 my-1.5 mr-3 ml-2 py-2 rounded-md border overflow-hidden", style: {
-    borderColor: "var(--ds-gray-alpha-200)",
-    opacity: contentOpacity,
-    transition: "opacity 150ms"
-  }, children: [((durationInfo == null ? void 0 : durationInfo.queued) !== void 0 || (durationInfo == null ? void 0 : durationInfo.ran) !== void 0) && jsxRuntimeExports.jsxs("div", { className: "px-2 pb-1.5 text-xs flex gap-3", style: { color: "var(--ds-gray-900)" }, children: [durationInfo.queued !== void 0 && durationInfo.queued > 0 && jsxRuntimeExports.jsxs("span", { children: ["Queued for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.queued) })] }), durationInfo.ran !== void 0 && jsxRuntimeExports.jsxs("span", { children: ["Ran for", " ", jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatDuration(durationInfo.ran) })] })] }), displayPayload != null ? jsxRuntimeExports.jsx(PayloadBlock, { data: displayPayload, eventType: event.eventType }) : loadError ? jsxRuntimeExports.jsx("div", { className: "rounded-md border p-3 text-xs", style: {
-    borderColor: "var(--ds-red-400)",
-    backgroundColor: "var(--ds-red-100)",
-    color: "var(--ds-red-900)"
-  }, children: loadError }) : isLoading || loadedEventData === null && !hasAttemptedLoad && event.correlationId ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "75%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "50%" } }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: "60%" } })] }) : jsxRuntimeExports.jsx("div", { className: "p-2 text-xs", style: { color: "var(--ds-gray-900)" }, children: "No data" })] })] })] });
-}
-function EventListView({ events: events2, run, onLoadEventData, hasMoreEvents = false, isLoadingMoreEvents = false, onLoadMoreEvents, encryptionKey, isLoading = false, sortOrder: sortOrderProp, onSortOrderChange, onDecrypt, isDecrypting = false, hasEncryptedData: hasEncryptedDataProp = false }) {
-  const [internalSortOrder, setInternalSortOrder] = reactExports.useState("asc");
-  const effectiveSortOrder = sortOrderProp ?? internalSortOrder;
-  const handleSortOrderChange = reactExports.useCallback((order2) => {
-    if (onSortOrderChange) {
-      onSortOrderChange(order2);
-    } else {
-      setInternalSortOrder(order2);
-    }
-  }, [onSortOrderChange]);
-  const sortedEvents2 = reactExports.useMemo(() => {
-    if (!events2 || events2.length === 0)
-      return [];
-    const dir = effectiveSortOrder === "desc" ? -1 : 1;
-    return [...events2].sort((a2, b2) => dir * (new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime()));
-  }, [events2, effectiveSortOrder]);
-  const hasEncryptedInlineData = reactExports.useMemo(() => {
-    if (!events2)
-      return false;
-    for (const event of events2) {
-      const ed = event.eventData;
-      if (hasEncryptedValues(ed))
-        return true;
-    }
-    return false;
-  }, [events2]);
-  const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] = reactExports.useState(false);
-  const handleEncryptedDataDetected = reactExports.useCallback(() => {
-    setFoundEncryptedInLazyData(true);
-  }, []);
-  const hasEncryptedData = hasEncryptedDataProp || hasEncryptedInlineData || foundEncryptedInLazyData;
-  const { correlationNameMap, workflowName } = reactExports.useMemo(() => buildNameMaps(events2 ?? null, run ?? null), [events2, run]);
-  const durationMap = reactExports.useMemo(() => buildDurationMap(sortedEvents2), [sortedEvents2]);
-  const [selectedGroupKey, setSelectedGroupKey] = reactExports.useState(void 0);
-  const [hoveredGroupKey, setHoveredGroupKey] = reactExports.useState(void 0);
-  const onSelectGroup = reactExports.useCallback((groupKey) => {
-    setSelectedGroupKey(groupKey);
-  }, []);
-  const onHoverGroup = reactExports.useCallback((groupKey) => {
-    setHoveredGroupKey(groupKey);
-  }, []);
-  const activeGroupKey = selectedGroupKey ?? hoveredGroupKey;
-  const [expandedEventIds, setExpandedEventIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
-  const toggleEventExpanded = reactExports.useCallback((eventId) => {
-    setExpandedEventIds((prev) => {
-      const next2 = new Set(prev);
-      if (next2.has(eventId)) {
-        next2.delete(eventId);
-      } else {
-        next2.add(eventId);
-      }
-      return next2;
-    });
-  }, []);
-  const eventDataCacheRef = reactExports.useRef(/* @__PURE__ */ new Map());
-  const cacheEventData = reactExports.useCallback((eventId, data) => {
-    eventDataCacheRef.current.set(eventId, data);
-  }, []);
-  const eventGroupKeyMap = reactExports.useMemo(() => {
-    const map2 = /* @__PURE__ */ new Map();
-    for (const ev of sortedEvents2) {
-      const gk = isRunLevel(ev.eventType) ? "__run__" : ev.correlationId ?? "";
-      if (gk)
-        map2.set(ev.eventId, gk);
-    }
-    return map2;
-  }, [sortedEvents2]);
-  reactExports.useEffect(() => {
-    if (selectedGroupKey === void 0)
-      return;
-    setExpandedEventIds((prev) => {
-      if (prev.size === 0)
-        return prev;
-      let changed = false;
-      const next2 = /* @__PURE__ */ new Set();
-      for (const eventId of prev) {
-        if (eventGroupKeyMap.get(eventId) === selectedGroupKey) {
-          next2.add(eventId);
-        } else {
-          changed = true;
-        }
-      }
-      return changed ? next2 : prev;
-    });
-  }, [selectedGroupKey, eventGroupKeyMap]);
-  const selectedGroupRange = reactExports.useMemo(() => {
-    if (!activeGroupKey || activeGroupKey === "__run__")
-      return null;
-    let first = -1;
-    let last = -1;
-    for (let i = 0; i < sortedEvents2.length; i++) {
-      if (sortedEvents2[i].correlationId === activeGroupKey) {
-        if (first === -1)
-          first = i;
-        last = i;
-      }
-    }
-    return first >= 0 ? { first, last } : null;
-  }, [activeGroupKey, sortedEvents2]);
-  const [searchQuery, setSearchQuery] = reactExports.useState("");
-  const virtuosoRef = reactExports.useRef(null);
-  const searchIndex = reactExports.useMemo(() => {
-    const entries = [];
-    for (let i = 0; i < sortedEvents2.length; i++) {
-      const ev = sortedEvents2[i];
-      const isRun = isRunLevel(ev.eventType);
-      const name2 = isRun ? workflowName ?? "" : ev.correlationId ? correlationNameMap.get(ev.correlationId) ?? "" : "";
-      entries.push({
-        fields: [
-          ev.eventId,
-          ev.correlationId ?? "",
-          ev.eventType,
-          formatEventType(ev.eventType),
-          name2
-        ].map((f2) => f2.toLowerCase()),
-        groupKey: ev.correlationId ?? (isRun ? "__run__" : void 0),
-        eventId: ev.eventId,
-        index: i
-      });
-    }
-    return entries;
-  }, [sortedEvents2, correlationNameMap, workflowName]);
-  reactExports.useEffect(() => {
-    var _a3;
-    const q2 = searchQuery.trim().toLowerCase();
-    if (!q2) {
-      setSelectedGroupKey(void 0);
-      return;
-    }
-    let bestMatch = null;
-    let bestScore = 0;
-    for (const entry2 of searchIndex) {
-      for (const field of entry2.fields) {
-        if (field && field.includes(q2)) {
-          const score = q2.length / field.length;
-          if (score > bestScore) {
-            bestScore = score;
-            bestMatch = entry2;
-          }
-        }
-      }
-    }
-    if (bestMatch) {
-      setSelectedGroupKey(bestMatch.groupKey);
-      (_a3 = virtuosoRef.current) == null ? void 0 : _a3.scrollToIndex({
-        index: bestMatch.index,
-        align: "center",
-        behavior: "smooth"
-      });
-    }
-  }, [searchQuery, searchIndex]);
-  const hasHadEventsRef = reactExports.useRef(false);
-  if (sortedEvents2.length > 0) {
-    hasHadEventsRef.current = true;
-  }
-  const isInitialLoad = isLoading && !hasHadEventsRef.current;
-  const isRefetching = isLoading && hasHadEventsRef.current && sortedEvents2.length === 0;
-  if (isInitialLoad) {
-    return jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("div", { style: { padding: 6 }, children: jsxRuntimeExports.jsx(Skeleton$2, { style: { height: 40, borderRadius: 6 } }) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 h-10 border-b flex-shrink-0", style: { borderColor: "var(--ds-gray-alpha-200)" }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 40 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 72 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 44 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 92 } }) }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3", style: { width: 60 } }) })] }), jsxRuntimeExports.jsx(RowsSkeleton, {})] });
-  }
-  if (!isLoading && (!events2 || events2.length === 0)) {
-    return jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full text-sm", style: { color: "var(--ds-gray-700)" }, children: "No events found" });
-  }
-  return jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [jsxRuntimeExports.jsx("style", { children: `@keyframes workflow-dot-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}` }), jsxRuntimeExports.jsxs("div", { style: {
-    padding: 6,
-    backgroundColor: "var(--ds-background-100)",
-    display: "flex",
-    gap: 6
-  }, children: [jsxRuntimeExports.jsxs("label", { style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 6,
-    boxShadow: "0 0 0 1px var(--ds-gray-alpha-400)",
-    background: "var(--ds-background-100)",
-    height: 40,
-    flex: 1,
-    minWidth: 0
-  }, children: [jsxRuntimeExports.jsx("div", { style: {
-    width: 40,
-    height: 40,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "var(--ds-gray-800)",
-    flexShrink: 0
-  }, children: jsxRuntimeExports.jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [jsxRuntimeExports.jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), jsxRuntimeExports.jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }), jsxRuntimeExports.jsx("input", { type: "search", placeholder: "Search by name, event type, or ID…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: {
-    marginLeft: -16,
-    paddingInline: 12,
-    fontFamily: "inherit",
-    fontSize: 14,
-    background: "transparent",
-    border: "none",
-    outline: "none",
-    height: 40,
-    width: "100%"
-  } })] }), jsxRuntimeExports.jsx(MenuDropdown, { options: SORT_OPTIONS, value: effectiveSortOrder, onChange: handleSortOrderChange }), (hasEncryptedData || encryptionKey) && onDecrypt && jsxRuntimeExports.jsx(DecryptButton, { decrypted: !!encryptionKey, loading: isDecrypting, onClick: onDecrypt })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0 text-[13px] font-medium h-10 border-b flex-shrink-0", style: {
-    borderColor: "var(--ds-gray-alpha-200)",
-    color: "var(--ds-gray-900)",
-    backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", style: { width: GUTTER_WIDTH } }), jsxRuntimeExports.jsx("div", { className: "w-5 flex-shrink-0" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Time" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Event Type" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "2 1 0%" }, children: "Name" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("div", { className: "min-w-0 px-4", style: { flex: "3 1 0%" }, children: "Event ID" })] }), isRefetching ? jsxRuntimeExports.jsx(RowsSkeleton, {}) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: sortedEvents2.length, overscan: 20, defaultItemHeight: 40, endReached: () => {
-    if (!hasMoreEvents || isLoadingMoreEvents) {
-      return;
-    }
-    void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents());
-  }, itemContent: (index2) => {
-    const ev = sortedEvents2[index2];
-    return jsxRuntimeExports.jsx(EventRow$1, { event: ev, index: index2, isFirst: index2 === 0, isLast: index2 === sortedEvents2.length - 1, isExpanded: expandedEventIds.has(ev.eventId), onToggleExpand: toggleEventExpanded, activeGroupKey, selectedGroupKey, selectedGroupRange, correlationNameMap, workflowName, durationMap, onSelectGroup, onHoverGroup, onLoadEventData, cachedEventData: eventDataCacheRef.current.get(ev.eventId) ?? null, onCacheEventData: cacheEventData, encryptionKey, onEncryptedDataDetected: handleEncryptedDataDetected });
-  }, style: { flex: 1, minHeight: 0 } }), jsxRuntimeExports.jsxs("div", { className: "relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs", style: {
-    borderColor: "var(--ds-gray-alpha-200)",
-    color: "var(--ds-gray-900)",
-    backgroundColor: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsxs("span", { children: [sortedEvents2.length, " event", sortedEvents2.length !== 1 ? "s" : "", " loaded"] }), hasMoreEvents && jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto", children: jsxRuntimeExports.jsx(LoadMoreButton, { loading: isLoadingMoreEvents, onClick: () => void (onLoadMoreEvents == null ? void 0 : onLoadMoreEvents()) }) }) })] })] }) });
-}
 function ResolveHookModal({ isOpen, onClose, onSubmit, isSubmitting = false }) {
   var _a3;
   const [jsonInput, setJsonInput] = reactExports.useState("");
@@ -53439,6 +53634,286 @@ function buildTrace(run, events2, now2) {
     knownDurationMs: Math.max(0, knownDurationMs)
   };
 }
+const ELLIPSIS = "...";
+const MIN_START = 3;
+const MIN_END = 3;
+const MIN_KEPT = MIN_START + MIN_END;
+const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function toGraphemes(text2) {
+  if (graphemeSegmenter) {
+    return [...graphemeSegmenter.segment(text2)].map((s2) => s2.segment);
+  }
+  return Array.from(text2);
+}
+function buildCandidate(graphemes, kept) {
+  if (kept <= 0) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: ELLIPSIS,
+      truncated: true
+    };
+  }
+  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
+  const prefixGraphemeCount = kept - suffixGraphemeCount;
+  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
+  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
+  return {
+    prefixText,
+    prefixGraphemeCount,
+    suffixText,
+    suffixGraphemeCount,
+    text: prefixText + ELLIPSIS + suffixText,
+    truncated: true
+  };
+}
+function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
+  const fullText = graphemes.join("");
+  const resolvedFullWidth = fullWidth ?? measure(fullText);
+  if (availableWidth <= 0 || graphemes.length === 0) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
+  }
+  if (resolvedFullWidth <= availableWidth) {
+    return {
+      prefixText: fullText,
+      prefixGraphemeCount: graphemes.length,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: fullText,
+      truncated: false
+    };
+  }
+  let lo2 = 0;
+  let hi = graphemes.length - 1;
+  let best = -1;
+  while (lo2 <= hi) {
+    const mid = lo2 + hi >>> 1;
+    const candidate = buildCandidate(graphemes, mid);
+    if (measure(candidate.text) <= availableWidth) {
+      best = mid;
+      lo2 = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  if (best === -1) {
+    return {
+      prefixText: "",
+      prefixGraphemeCount: 0,
+      suffixText: "",
+      suffixGraphemeCount: 0,
+      text: "",
+      truncated: true
+    };
+  }
+  return buildCandidate(graphemes, best);
+}
+function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
+    return null;
+  }
+  if (selectionStart === 0 && selectionEnd === visibleText.length) {
+    return value;
+  }
+  const ellipsisStart = prefixText.length;
+  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
+  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
+    return null;
+  }
+  const originalGraphemes = toGraphemes(value);
+  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
+  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
+  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
+  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
+}
+function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
+  const visibleText = prefixText + ELLIPSIS + suffixText;
+  const trimmedSelectionText = selectionText.trim();
+  if (!trimmedSelectionText) {
+    return null;
+  }
+  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
+  const trailing = selectionText.slice(selectionText.trimEnd().length);
+  if (trimmedSelectionText === visibleText) {
+    return leading + value + trailing;
+  }
+  if (!trimmedSelectionText.includes(ELLIPSIS)) {
+    return null;
+  }
+  const selectionStart = visibleText.indexOf(trimmedSelectionText);
+  if (selectionStart === -1) {
+    return null;
+  }
+  const selectionEnd = selectionStart + trimmedSelectionText.length;
+  const mappedText = getMiddleTruncateCopyText({
+    prefixText,
+    selectionEnd,
+    selectionStart,
+    suffixText,
+    value
+  });
+  return mappedText === null ? null : leading + mappedText + trailing;
+}
+const useIsomorphicLayoutEffect$2 = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
+function createFullState(value, graphemes) {
+  return {
+    displayText: value,
+    isTruncated: false,
+    prefixGraphemeCount: graphemes.length,
+    prefixText: value,
+    suffixGraphemeCount: 0,
+    suffixText: ""
+  };
+}
+function useMiddleTruncate(value) {
+  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
+  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
+  const ref = reactExports.useRef(null);
+  const measureRef = reactExports.useRef(null);
+  const [state, setState] = reactExports.useState(() => fullState);
+  const rafRef = reactExports.useRef(0);
+  const updateState = reactExports.useCallback((nextState) => {
+    setState((currentState) => {
+      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
+        return currentState;
+      }
+      return nextState;
+    });
+  }, []);
+  const recalculate = reactExports.useCallback(() => {
+    const el = ref.current;
+    const measureEl = measureRef.current;
+    if (!el || !measureEl)
+      return;
+    const available = el.clientWidth;
+    if (available <= 0) {
+      updateState(fullState);
+      return;
+    }
+    const measure = (text2) => {
+      measureEl.textContent = text2;
+      return measureEl.scrollWidth;
+    };
+    const fullWidth = measure(value);
+    if (fullWidth <= available) {
+      updateState(fullState);
+      return;
+    }
+    const result = middleTruncate(graphemes, available, measure, fullWidth);
+    updateState({
+      displayText: result.text,
+      isTruncated: result.truncated,
+      prefixGraphemeCount: result.prefixGraphemeCount,
+      prefixText: result.prefixText,
+      suffixGraphemeCount: result.suffixGraphemeCount,
+      suffixText: result.suffixText
+    });
+  }, [fullState, graphemes, updateState, value]);
+  useIsomorphicLayoutEffect$2(() => {
+    recalculate();
+  }, [recalculate]);
+  reactExports.useEffect(() => {
+    var _a3;
+    const el = ref.current;
+    if (!el)
+      return;
+    const debouncedRecalc = () => {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(recalculate);
+    };
+    const ro2 = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
+    ro2 == null ? void 0 : ro2.observe(el);
+    window.addEventListener("resize", debouncedRecalc);
+    const onFontsLoaded = () => {
+      debouncedRecalc();
+    };
+    const fontSet = "fonts" in document ? document.fonts : null;
+    (_a3 = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a3.call(fontSet, "loadingdone", onFontsLoaded);
+    return () => {
+      var _a4;
+      ro2 == null ? void 0 : ro2.disconnect();
+      window.removeEventListener("resize", debouncedRecalc);
+      cancelAnimationFrame(rafRef.current);
+      (_a4 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a4.call(fontSet, "loadingdone", onFontsLoaded);
+    };
+  }, [recalculate]);
+  return {
+    ref,
+    measureRef,
+    displayText: state.displayText,
+    isTruncated: state.isTruncated,
+    prefixGraphemeCount: state.prefixGraphemeCount,
+    prefixText: state.prefixText,
+    suffixGraphemeCount: state.suffixGraphemeCount,
+    suffixText: state.suffixText
+  };
+}
+function getRangeOffsets(container, range2) {
+  if (!container.contains(range2.startContainer) || !container.contains(range2.endContainer)) {
+    return null;
+  }
+  const startRange = document.createRange();
+  startRange.selectNodeContents(container);
+  startRange.setEnd(range2.startContainer, range2.startOffset);
+  const endRange = document.createRange();
+  endRange.selectNodeContents(container);
+  endRange.setEnd(range2.endContainer, range2.endOffset);
+  return {
+    end: endRange.toString().length,
+    start: startRange.toString().length
+  };
+}
+function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
+  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
+  const visibleRef = reactExports.useRef(null);
+  const handleCopy = reactExports.useCallback((e) => {
+    onCopyProp == null ? void 0 : onCopyProp(e);
+    if (e.defaultPrevented || !isTruncated)
+      return;
+    const selection2 = window.getSelection();
+    if (!selection2 || selection2.rangeCount === 0)
+      return;
+    const selectionText = selection2.toString();
+    if (!selectionText)
+      return;
+    const range2 = selection2.getRangeAt(0);
+    const visibleEl = visibleRef.current;
+    let copyText = null;
+    if (e.currentTarget.contains(range2.startContainer) && e.currentTarget.contains(range2.endContainer) && visibleEl) {
+      const offsets = getRangeOffsets(visibleEl, range2);
+      if (offsets) {
+        copyText = getMiddleTruncateCopyText({
+          prefixText,
+          selectionEnd: offsets.end,
+          selectionStart: offsets.start,
+          suffixText,
+          value
+        });
+      }
+    }
+    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
+      prefixText,
+      selectionText,
+      suffixText,
+      value
+    }));
+    if (copyText === null)
+      return;
+    e.preventDefault();
+    e.clipboardData.setData("text/plain", copyText);
+  }, [onCopyProp, isTruncated, prefixText, suffixText, value]);
+  return jsxRuntimeExports.jsxs("span", { title: isTruncated ? value : void 0, ...props, ref, className: cn$4("relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap", className), onCopy: handleCopy, children: [isTruncated && jsxRuntimeExports.jsx("span", { className: "sr-only select-none", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": isTruncated || void 0, className: "col-start-1 row-start-1 min-w-0 overflow-hidden", ref: visibleRef, children: isTruncated ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { children: prefixText }), jsxRuntimeExports.jsx("span", { children: ELLIPSIS }), jsxRuntimeExports.jsx("span", { children: suffixText })] }) : displayText }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap", ref: measureRef })] });
+}
 const convert = (
   // Note: overloads in JSDoc can’t yet use different `@template`s.
   /**
@@ -80062,7 +80537,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(() => import("./highlighted-body-B3W2YXNL-DtYGrm0G.js").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(() => import("./highlighted-body-B3W2YXNL-B4fAdNsB.js").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 }) })] }) });
@@ -80384,7 +80859,7 @@ var Dt = ({ children: e, className: t, onDownload: o, onError: n }) => {
   }, []), jsxRuntimeExports.jsxs("div", { className: "relative", ref: i, children: [jsxRuntimeExports.jsx("button", { className: f("cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50", t), disabled: c, onClick: () => r2(!s2), title: "Download table", type: "button", children: e != null ? e : jsxRuntimeExports.jsx(Z, { size: 14 }) }), s2 ? jsxRuntimeExports.jsxs("div", { className: "absolute top-full right-0 z-10 mt-1 min-w-[120px] overflow-hidden rounded-md border border-border bg-background shadow-lg", children: [jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("csv"), title: "Download table as CSV", type: "button", children: "CSV" }), jsxRuntimeExports.jsx("button", { className: "w-full px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40", onClick: () => a2("markdown"), title: "Download table as Markdown", type: "button", children: "Markdown" })] }) : null] });
 };
 var Vt = ({ children: e, className: t, showControls: o, ...n }) => jsxRuntimeExports.jsxs("div", { className: "my-4 flex flex-col gap-2 rounded-lg border border-border bg-sidebar p-2", "data-streamdown": "table-wrapper", children: [o ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-1", children: [jsxRuntimeExports.jsx(Ht, {}), jsxRuntimeExports.jsx(Dt, {})] }) : null, jsxRuntimeExports.jsx("div", { className: "border-collapse overflow-x-auto overscroll-y-auto rounded-md border border-border bg-background", children: jsxRuntimeExports.jsx("table", { className: f("w-full divide-y divide-border", t), "data-streamdown": "table", ...n, children: e }) })] });
-var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-D37Y2lwn.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-C6M7jb0V.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
 function ke(e, t) {
   if (!(e != null && e.position || t != null && t.position)) return true;
   if (!(e != null && e.position && (t != null && t.position))) return false;
@@ -80932,6 +81407,14 @@ function parseContent(content2) {
   }
   return [];
 }
+const encryptedPlaceholderPreview = `{
+  "input": "[encrypted]",
+  "result": "[encrypted]"
+}`;
+function EncryptedDataBlock() {
+  const ctx = reactExports.useContext(DecryptClickContext);
+  return jsxRuntimeExports.jsxs("div", { className: "relative min-h-20 overflow-hidden rounded-md border border-gray-alpha-400 bg-background-100", children: [jsxRuntimeExports.jsx("pre", { "aria-hidden": "true", className: "pointer-events-none m-0 select-none p-3 font-mono text-label-12 text-gray-900 blur-[4px]", children: encryptedPlaceholderPreview }), jsxRuntimeExports.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: ctx ? jsxRuntimeExports.jsxs(Button$1, { onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, size: "xs", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] }) : jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-gray-alpha-400 bg-gray-100 px-1.5 py-0.5 text-button-12 font-medium text-gray-700", children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), "Encrypted"] }) })] });
+}
 const serializeForClipboard = (value) => {
   if (typeof value === "string")
     return value;
@@ -80945,31 +81428,31 @@ const serializeForClipboard = (value) => {
   }
 };
 function CopyableDataBlock({ data }) {
-  const toast2 = useToast();
-  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border p-3", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Copy data", title: "Copy", className: "!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border !bg-[var(--ds-background-100)] !text-[var(--ds-gray-800)] transition-transform transition-colors duration-100 hover:!bg-[var(--ds-gray-alpha-200)] active:!scale-95 active:!bg-[var(--ds-gray-alpha-300)]", style: { borderColor: "var(--ds-gray-300)" }, onClick: () => {
-    navigator.clipboard.writeText(serializeForClipboard(data)).then(() => {
-      toast2.success("Copied to clipboard");
-    }).catch(() => {
-      toast2.error("Failed to copy");
-    });
-  }, children: jsxRuntimeExports.jsx(Copy, { size: 12 }) }), jsxRuntimeExports.jsx(DataInspector, { data })] });
+  return jsxRuntimeExports.jsxs("div", { className: "relative overflow-x-auto rounded-md border border-gray-alpha-400 p-3", children: [jsxRuntimeExports.jsx(CopyButton, { copyText: serializeForClipboard(data), ariaLabel: "Copy data", className: "absolute right-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md border border-gray-alpha-400 !bg-background-100 p-0 text-gray-900 transition-transform transition-colors duration-100 hover:bg-gray-200 active:scale-95 active:bg-gray-300" }), jsxRuntimeExports.jsx(DataInspector, { data })] });
 }
-function DetailCard({ summary, children: children2, onToggle, disabled = false, summaryClassName, contentClassName }) {
+function DetailCard({ summary, children: children2, onToggle, disabled = false, defaultOpen = false, variant = "section", trailing, summaryClassName, contentClassName }) {
+  const [open, setOpen] = reactExports.useState(defaultOpen);
+  const handleToggle = (e) => {
+    if (e.target !== e.currentTarget)
+      return;
+    const next2 = e.currentTarget.open;
+    setOpen(next2);
+    onToggle == null ? void 0 : onToggle(next2);
+  };
+  if (variant === "card") {
+    if (disabled) {
+      return jsxRuntimeExports.jsx("div", { className: cn$4("list-none px-3 py-4 bg-background-200 [&::-webkit-details-marker]:hidden", summaryClassName), style: { cursor: "not-allowed", opacity: 0.8 }, children: summary });
+    }
+    return jsxRuntimeExports.jsxs("details", { className: "group/card last:border-b border-gray-alpha-400", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsx("summary", { className: cn$4("list-none cursor-pointer px-3 py-4 border-t border-gray-alpha-400 bg-background-200 hover:bg-gray-100 [&::-webkit-details-marker]:hidden", summaryClassName), children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: cn$4("shrink-0 text-gray-700 group-hover/card:text-gray-1000", open && "rotate-90") }), summary] }) }), jsxRuntimeExports.jsx("div", { className: contentClassName, children: children2 })] });
+  }
+  const rowClasses = "flex h-9 items-center gap-2 px-2 -mx-2 text-heading-14 font-medium my-2";
+  if (trailing) {
+    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("div", { className: cn$4(rowClasses, summaryClassName), children: [jsxRuntimeExports.jsx("div", { className: "isolate relative shrink-0 w-3.5 h-3.5 text-gray-700", children: jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }), jsxRuntimeExports.jsx("div", { className: "shrink-0 pr-1", children: trailing })] }) });
+  }
   if (disabled) {
-    return jsxRuntimeExports.jsx("div", { className: `rounded-md border px-2.5 py-1.5 text-xs ${summaryClassName ?? ""}`, style: {
-      borderColor: "var(--ds-gray-300)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      cursor: "not-allowed",
-      opacity: 0.8
-    }, children: summary });
+    return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsx("div", { className: cn$4(rowClasses, summaryClassName), style: { color: "var(--ds-gray-700)", cursor: "not-allowed" }, children: jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary }) }) });
   }
-  return jsxRuntimeExports.jsxs("details", { className: "group", onToggle: (e) => onToggle == null ? void 0 : onToggle(e.target.open), children: [jsxRuntimeExports.jsx("summary", { className: `cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95 [&::-webkit-details-marker]:hidden ${summaryClassName ?? ""}`, style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-900)",
-    listStyle: "none"
-  }, children: jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "shrink-0 transition-transform group-open:rotate-90" }), summary] }) }), jsxRuntimeExports.jsx("div", { className: `mt-2 ${contentClassName ?? ""}`, children: children2 })] });
+  return jsxRuntimeExports.jsx("section", { className: "-mx-4 border-t px-4 border-gray-alpha-400", children: jsxRuntimeExports.jsxs("details", { className: "group", open, onToggle: handleToggle, children: [jsxRuntimeExports.jsxs("summary", { className: cn$4("group/trigger list-none cursor-pointer rounded hover:bg-gray-alpha-100 [&::-webkit-details-marker]:hidden", rowClasses, summaryClassName), children: [jsxRuntimeExports.jsxs("div", { className: "isolate relative shrink-0 text-gray-700 group-hover/trigger:text-gray-1000 w-3.5 h-3.5", children: [jsxRuntimeExports.jsx(ChevronRight, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-100 group-open:opacity-0" }), jsxRuntimeExports.jsx(ChevronDown, { size: 14, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 group-open:opacity-100" })] }), jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1", children: summary })] }), jsxRuntimeExports.jsx("div", { className: cn$4("mb-3", contentClassName), children: children2 })] }) });
 }
 function TabButton({ active, onClick, children: children2 }) {
   return jsxRuntimeExports.jsx("button", { type: "button", role: "tab", "aria-selected": active, tabIndex: active ? 0 : -1, onClick, className: "px-3 py-1.5 text-[11px] font-medium transition-colors -mb-px", style: {
@@ -81010,23 +81493,10 @@ const conversationTabs = [
 ];
 function ConversationWithTabs({ conversation, args }) {
   const [activeTab, setActiveTab] = reactExports.useState("conversation");
-  return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${conversation.length} messages)`, children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(args) }) }) });
+  return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(TabbedContainer, { tabs: conversationTabs, activeTab, onTabChange: setActiveTab, ariaLabel: "Conversation view", children: activeTab === "conversation" ? jsxRuntimeExports.jsx(ConversationView, { messages: conversation }) : jsxRuntimeExports.jsx("div", { className: "p-3", children: Array.isArray(args) ? args.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(args) }) }) });
 }
 function EncryptedFieldBlock() {
-  const ctx = reactExports.useContext(DecryptClickContext);
-  if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", onClick: ctx.onDecrypt, disabled: ctx.isDecrypting, className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors", style: {
-      borderColor: "var(--ds-gray-400)",
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
-  }
-  return jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)",
-    color: "var(--ds-gray-700)"
-  }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Encrypted" })] });
+  return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
 }
 function ExpiredFieldBlock() {
   return jsxRuntimeExports.jsx("div", { className: "flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs", style: {
@@ -81099,6 +81569,7 @@ const attributeDisplayNames = {
   attempt: "Attempts",
   eventId: "Event ID",
   runId: "Run ID",
+  token: "Token",
   eventType: "Event Type",
   correlationId: "Correlation ID",
   deploymentId: "Deployment ID",
@@ -81152,13 +81623,6 @@ const formatLocalMillisecondTime = (date2) => date2.toLocaleString(void 0, {
   second: "numeric",
   fractionalSecondDigits: 3
 });
-const localMillisecondTime = (value) => {
-  const date2 = parseDateValue(value);
-  if (!date2) {
-    return "-";
-  }
-  return formatLocalMillisecondTime(date2);
-};
 const localMillisecondTimeOrNull = (value) => {
   const date2 = parseDateValue(value);
   if (!date2) {
@@ -81179,7 +81643,7 @@ const attributeToDisplayFn = {
   stepName: (_value) => null,
   // IDs
   runId: (_value) => null,
-  stepId: (_value) => null,
+  stepId: (value) => String(value),
   hookId: (value) => String(value),
   eventId: (value) => String(value),
   // Run/step details
@@ -81204,6 +81668,14 @@ const attributeToDisplayFn = {
   projectId: (_value) => null,
   environment: (_value) => null,
   executionContext: (_value) => null,
+  // Attributes MVP — string-string metadata attached to the run.
+  // Rendered as a JSON block; if empty/missing, hidden by the
+  // hasDisplayContent gate above.
+  attributes: (value) => {
+    if (!hasDisplayContent(value))
+      return null;
+    return JsonBlock(value);
+  },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
@@ -81217,20 +81689,19 @@ const attributeToDisplayFn = {
     if (!hasDisplayContent(value))
       return null;
     if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+      return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     return JsonBlock(value);
   },
   input: (value, context) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (value && typeof value === "object" && "args" in value) {
       const { args, closureVars, thisVal } = value;
-      const argCount2 = Array.isArray(args) ? args.length : 0;
-      const argLabel2 = argCount2 === 1 ? "argument" : "arguments";
       const hasClosureVars = hasDisplayContent(closureVars);
       const hasThisVal = hasDisplayContent(thisVal);
       const hasArgs = hasDisplayContent(args);
@@ -81241,46 +81712,47 @@ const attributeToDisplayFn = {
         }
       }
       if (!hasArgs && !hasClosureVars && !hasThisVal) {
-        return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" });
+        return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
       }
-      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount2} ${argLabel2})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(args) ? args.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "this", children: JsonBlock(thisVal) })] });
+      return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(args) ? args.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(args) }), hasClosureVars && jsxRuntimeExports.jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) }), hasThisVal && jsxRuntimeExports.jsx(DetailCard, { summary: "Context", children: JsonBlock(thisVal) })] });
     }
-    const argCount = Array.isArray(value) ? value.length : 0;
-    const argLabel = argCount === 1 ? "argument" : "arguments";
     if (!hasDisplayContent(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" });
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Input (no data)", disabled: true });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(value) ? value.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: Array.isArray(value) ? value.map((v2, i) => jsxRuntimeExports.jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v2) }, i)) : JsonBlock(value) });
   },
   output: (value) => {
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: JsonBlock(value) });
   },
   error: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
     if (isStructuredErrorWithStack(value)) {
-      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(ErrorStackBlock, { value }) });
     }
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: JsonBlock(value) });
   },
   eventData: (value) => {
-    if (isEncryptedMarker(value))
-      return jsxRuntimeExports.jsx(EncryptedFieldBlock, {});
+    if (isEncryptedMarker(value)) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     if (!hasDisplayContent(value))
       return null;
-    return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", children: JsonBlock(value) });
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: JsonBlock(value) });
   },
   errorCode: (value) => {
     if (typeof value !== "string" || value.length === 0)
@@ -81295,15 +81767,32 @@ const resolvableAttributes = [
   "metadata",
   "eventData"
 ];
+const selfHeaderedAttributes = /* @__PURE__ */ new Set([
+  "input",
+  "output",
+  "error",
+  "eventData"
+]);
 const ExpiredDataMessage = () => jsxRuntimeExports.jsx("div", { className: "text-copy-12 rounded-md border p-4 my-2", style: {
   borderColor: "var(--ds-gray-300)",
   backgroundColor: "var(--ds-gray-100)",
   color: "var(--ds-gray-700)"
 }, children: jsxRuntimeExports.jsx("span", { children: "The data for this run has expired and is no longer available." }) });
+const copyableBasicAttributes = /* @__PURE__ */ new Set([
+  "stepId",
+  "hookId",
+  "eventId",
+  "deploymentId"
+]);
 const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }) => {
-  const isExpandableLoadingTarget = attribute === "input" || attribute === "eventData";
+  const decryptCtx = reactExports.useContext(DecryptClickContext);
+  const isExpandableLoadingTarget = attribute === "input" || attribute === "output" || attribute === "eventData";
   if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-    return jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-9 w-full rounded-md" })] });
+    const label = attribute === "eventData" ? "Event Data" : attribute === "output" ? "Output" : "Input";
+    if (decryptCtx == null ? void 0 : decryptCtx.hasEncryptedData) {
+      return jsxRuntimeExports.jsx(DetailCard, { summary: label, defaultOpen: attribute === "eventData", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
+    }
+    return jsxRuntimeExports.jsx(DetailCard, { summary: label });
   }
   const displayFn = attributeToDisplayFn[attribute];
   if (!displayFn) {
@@ -81316,7 +81805,10 @@ const AttributeBlock = ({ attribute, value, isLoading, inline = false, context }
   if (inline) {
     return jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [jsxRuntimeExports.jsx("span", { className: "text-[11px] font-medium", style: { color: "var(--ds-gray-700)" }, children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-[11px]", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] });
   }
-  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: `my-2 flex flex-col ${attribute === "input" || attribute === "output" || attribute === "error" ? "gap-2 my-3.5" : "gap-0"}`, children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
+  if (selfHeaderedAttributes.has(attribute)) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: displayValue });
+  }
+  return jsxRuntimeExports.jsxs("div", { className: "relative", children: [typeof isLoading === "boolean" && isLoading && jsxRuntimeExports.jsx("div", { className: "absolute top-9 right-4", children: jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: "var(--ds-gray-900)" } }) }), jsxRuntimeExports.jsxs("div", { className: "my-2 flex flex-col gap-0", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), jsxRuntimeExports.jsx("span", { className: "text-xs", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }, attribute)] });
 };
 const AttributePanel = ({ data, moduleSpecifier, isLoading, error: error2, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource }) => {
   const toast2 = useToast();
@@ -81341,14 +81833,16 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error: error2, expir
     const present = Object.keys(displayData).filter((key) => resolvableAttributes.includes(key)).sort(sortByAttributeOrder);
     if (!isLoading)
       return present;
-    const loadingDefaults = ["input"];
+    if (resource === "sleep")
+      return present;
+    const loadingDefaults = ["input", "output"];
     for (const key of loadingDefaults) {
       if (!present.includes(key)) {
         present.push(key);
       }
     }
     return present.sort(sortByAttributeOrder);
-  }, [displayData, isLoading]);
+  }, [displayData, isLoading, resource]);
   const visibleBasicAttributes = basicAttributes.filter((attribute) => {
     const displayFn = attributeToDisplayFn[attribute];
     if (!displayFn)
@@ -81386,23 +81880,27 @@ const AttributePanel = ({ data, moduleSpecifier, isLoading, error: error2, expir
       toast2.error("Failed to copy moduleSpecifier");
     });
   }, []);
-  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "mb-3 flex flex-col overflow-hidden rounded-md border", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, children: [orderedBasicAttributes.map((attribute, index2) => {
+  const outerDecryptCtx = reactExports.useContext(DecryptClickContext);
+  const decryptValue = onDecrypt ? {
+    onDecrypt,
+    isDecrypting,
+    hasEncryptedData: outerDecryptCtx == null ? void 0 : outerDecryptCtx.hasEncryptedData
+  } : outerDecryptCtx;
+  return jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: jsxRuntimeExports.jsxs(DecryptClickContext.Provider, { value: decryptValue, children: [visibleBasicAttributes.length > 0 && jsxRuntimeExports.jsxs("div", { className: "flex flex-col overflow-hidden divide-y divide-gray-alpha-400 mb-3", children: [orderedBasicAttributes.map((attribute) => {
     var _a3;
     const displayValue = (_a3 = attributeToDisplayFn[attribute]) == null ? void 0 : _a3.call(attributeToDisplayFn, displayData[attribute]);
     const isModuleSpecifier = attribute === "moduleSpecifier";
+    const isCopyableBasicAttribute = copyableBasicAttributes.has(attribute) && typeof displayValue === "string";
     const moduleSpecifierValue = typeof displayValue === "string" ? displayValue : String(displayValue ?? displayData.moduleSpecifier ?? "");
-    const shouldCapitalizeLabel = attribute !== "workflowCoreVersion";
-    const showResumeAtSkeleton = isLoading && resource === "sleep" && !displayData.resumeAt;
-    const showDivider = index2 < orderedBasicAttributes.length - 1 || showResumeAtSkeleton;
-    return jsxRuntimeExports.jsxs("div", { className: "py-1", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: shouldCapitalizeLabel ? "text-[14px] first-letter:uppercase" : "text-[14px]", style: { color: "var(--ds-gray-700)" }, children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: {
+    return jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between py-2", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900", children: getAttributeDisplayName(attribute) }), isModuleSpecifier ? jsxRuntimeExports.jsx("button", { type: "button", className: "min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono", style: {
       color: "var(--ds-gray-1000)",
       background: "transparent",
       border: "none",
       padding: 0
-    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : jsxRuntimeExports.jsx("span", { className: "min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, children: displayValue })] }), showDivider ? jsxRuntimeExports.jsx("div", { className: "mx-2.5 border-b", style: { borderColor: "var(--ds-gray-300)" } }) : null] }, attribute);
-  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[55%]" })] }) })] }), error2 ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error2.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) })] }) }) }) });
+    }, title: moduleSpecifierValue, onClick: () => handleCopyModuleSpecifier(moduleSpecifierValue), children: moduleSpecifierValue }) : isCopyableBasicAttribute ? jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono", style: {
+      color: "var(--ds-gray-1000)"
+    }, title: displayValue, children: [jsxRuntimeExports.jsx(MiddleTruncate, { value: displayValue, className: "flex-1" }), jsxRuntimeExports.jsx(CopyButton, { copyText: displayValue, ariaLabel: `Copy ${getAttributeDisplayName(attribute)}`, className: "shrink-0 -mr-1" })] }) : jsxRuntimeExports.jsx("span", { className: "text-right text-label-13 font-mono", children: displayValue })] }, attribute);
+  }), isLoading && resource === "sleep" && !displayData.resumeAt && jsxRuntimeExports.jsx("div", { className: "py-1", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[14px] first-letter:uppercase", style: { color: "var(--ds-gray-700)" }, children: "resumeAt" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[55%]" })] }) })] }), error2 ? jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load resource details", details: error2.message, className: "my-4" }) : hasExpired ? jsxRuntimeExports.jsx(ExpiredDataMessage, {}) : resolvedAttributes.length > 0 ? jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resolvedAttributes.map((attribute) => jsxRuntimeExports.jsx(AttributeBlock, { isLoading, attribute, value: displayData[attribute], context: displayContext }, attribute)) }) : null] }) }) });
 };
 const ERROR_EVENT_TYPES = /* @__PURE__ */ new Set(["step_failed", "step_retrying"]);
 const DATA_EVENT_TYPES = /* @__PURE__ */ new Set([
@@ -81451,7 +81949,7 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
     wasExpandedRef.current = true;
     await loadEventData();
   }, [isLoading, loadEventData]);
-  reactExports.useEffect(() => {
+  reactExports.useLayoutEffect(() => {
     if (!encryptionKey || !wasExpandedRef.current)
       return;
     loadedDataRef.current = null;
@@ -81459,16 +81957,16 @@ function EventItem({ event, onLoadEventData, encryptionKey }) {
     void loadEventData({ force: true });
   }, [encryptionKey, loadEventData]);
   const createdAt = new Date(event.createdAt);
+  const createdAtTime = createdAt.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  });
   const displayPayload = isLoading ? loadedData : mergedDisplay;
-  return jsxRuntimeExports.jsxs(DetailCard, { summaryClassName: "text-base py-2", summary: jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: "font-medium", style: { color: "var(--ds-gray-1000)" }, children: event.eventType }), " ", "-", " ", jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: localMillisecondTime(createdAt.getTime()) })] }), onToggle: canHaveData ? (open) => {
+  return jsxRuntimeExports.jsxs(DetailCard, { variant: "card", summaryClassName: "px-3 py-2", summary: jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-3", children: [jsxRuntimeExports.jsx("span", { className: "text-gray-1000 text-label-12 font-mono", children: event.eventType }), jsxRuntimeExports.jsx("span", { className: "shrink-0 text-label-13 text-gray-900", children: createdAtTime })] }), onToggle: canHaveData ? (open) => {
     if (open)
       handleExpand();
-  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col divide-y rounded-md border overflow-hidden", style: {
-    borderColor: "var(--ds-gray-300)",
-    backgroundColor: "var(--ds-gray-100)"
-  }, children: [jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.eventId, children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5", style: { borderColor: "var(--ds-gray-300)" }, children: [jsxRuntimeExports.jsx("span", { className: "text-[13px] font-medium", style: { color: "var(--ds-gray-700)" }, children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-[13px] font-mono", style: { color: "var(--ds-gray-1000)" }, title: event.correlationId, children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "mt-2 rounded-md border p-3", style: {
-    borderColor: "var(--ds-gray-300)"
-  }, children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "mt-2", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
+  } : void 0, children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Event ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.eventId })] }), event.correlationId && jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 py-2 px-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-12 text-gray-900", children: "Correlation ID" }), jsxRuntimeExports.jsx("span", { className: "max-w-[70%] truncate text-right text-label-12 font-mono", children: event.correlationId })] })] }), isLoading && jsxRuntimeExports.jsxs("div", { className: "p-3", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-[35%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[90%]" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "mt-2 h-4 w-[75%]" })] }), loadError && jsxRuntimeExports.jsx(ErrorCard, { title: "Failed to load event data", details: loadError, className: "mt-2" }), displayPayload != null && jsxRuntimeExports.jsx("div", { className: "[&>div]:border-none [&>div]:rounded-none", children: jsxRuntimeExports.jsx(EventDataBlock, { eventType: event.eventType, data: displayPayload }) })] });
 }
 function hasOnlyExpiredFields(data, eventType) {
   if (data === null || typeof data !== "object" || Array.isArray(data)) {
@@ -81487,6 +81985,9 @@ function EventDataBlock({ eventType, data }) {
       color: "var(--ds-gray-700)"
     }, children: jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Data expired" }) });
   }
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
+  }
   if (ERROR_EVENT_TYPES.has(eventType) && data != null && typeof data === "object") {
     const record2 = data;
     if (isStructuredErrorWithStack(record2.error)) {
@@ -81500,7 +82001,19 @@ function EventDataBlock({ eventType, data }) {
 }
 function EventsList({ events: events2, isLoading = false, error: error2, onLoadEventData, encryptionKey }) {
   const sortedEvents2 = reactExports.useMemo(() => [...events2].sort((a2, b2) => new Date(a2.createdAt).getTime() - new Date(b2.createdAt).getTime()), [events2]);
-  return jsxRuntimeExports.jsxs("div", { className: "mt-2", style: { color: "var(--ds-gray-1000)" }, children: [jsxRuntimeExports.jsx("h3", { className: "text-label-14 font-medium mt-4 mb-2", style: { color: "var(--ds-gray-1000)" }, children: "Events" }), isLoading ? jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-9 w-full rounded-md" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-9 w-full rounded-md" })] }) : null, !isLoading && !error2 && sortedEvents2.length === 0 && jsxRuntimeExports.jsx("div", { className: "text-sm", children: "No events found" }), sortedEvents2.length > 0 && !error2 ? jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-4", children: sortedEvents2.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) : null] });
+  const hasEvents = sortedEvents2.length > 0 && !error2;
+  if (!hasEvents && !isLoading) {
+    return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", disabled: true });
+  }
+  return jsxRuntimeExports.jsx(DetailCard, { summary: "Events", contentClassName: "mb-0", defaultOpen: true, children: isLoading ? jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: [0, 1, 2].map((i) => jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-3 bg-background-200 px-4 py-2", children: [jsxRuntimeExports.jsx(Skeleton$2, { className: "h-4 w-32 rounded" }), jsxRuntimeExports.jsx(Skeleton$2, { className: "h-3 w-16 rounded" })] }, i)) }) : jsxRuntimeExports.jsx("div", { className: "flex flex-col -mx-4", children: sortedEvents2.map((event) => jsxRuntimeExports.jsx(EventItem, { event, onLoadEventData, encryptionKey }, event.eventId)) }) });
+}
+const SidebarDataContext = reactExports.createContext(null);
+SidebarDataContext.displayName = "SidebarDataContext";
+function SidebarDataProvider({ value, children: children2 }) {
+  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
+}
+function useSidebarDataOptional() {
+  return reactExports.useContext(SidebarDataContext);
 }
 function isStep(data) {
   return data !== null && typeof data === "object" && "stepId" in data;
@@ -81517,6 +82030,8 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
   const [showResolveHookModal, setShowResolveHookModal] = reactExports.useState(false);
   const [resolvingHook, setResolvingHook] = reactExports.useState(false);
   const [resolvedHookIds, setResolvedHookIds] = reactExports.useState(/* @__PURE__ */ new Set());
+  const sidebar = useSidebarDataOptional();
+  const hasEncryptedData = Boolean((sidebar == null ? void 0 : sidebar.hasEncryptedData) && !encryptionKey);
   const data = selectedSpan == null ? void 0 : selectedSpan.data;
   const rawEvents = selectedSpan == null ? void 0 : selectedSpan.rawEvents;
   const rawEventsLength = (rawEvents == null ? void 0 : rawEvents.length) ?? 0;
@@ -81693,7 +82208,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
     return null;
   }
   const hasPendingActions = resource === "sleep" && canWakeUp || resource === "hook" && canResolveHook;
-  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-3 pt-3 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
+  return jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : void 0, children: jsxRuntimeExports.jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-8", children: [hasPendingActions && jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded-lg border p-2", style: {
     borderColor: "var(--ds-gray-300)",
     backgroundColor: "var(--ds-gray-100)"
   }, children: [jsxRuntimeExports.jsx("p", { className: "mb-2 px-1 text-[13px] font-medium uppercase tracking-wide", style: { color: "var(--ds-gray-700)" }, children: "Actions" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [resource === "sleep" && canWakeUp && jsxRuntimeExports.jsxs("button", { type: "button", onClick: handleWakeUp, disabled: stoppingSleep, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", stoppingSleep ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
@@ -81702,7 +82217,7 @@ function EntityDetailPanel({ run, onStreamClick, onRunClick, spanDetailData, spa
   }, children: [jsxRuntimeExports.jsx(Zap, { className: "h-4 w-4" }), stoppingSleep ? "Waking up..." : "Wake Up Sleep"] }), resource === "hook" && canResolveHook && jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setShowResolveHookModal(true), disabled: resolvingHook, className: clsx("flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium", "disabled:opacity-50 disabled:cursor-not-allowed transition-colors", resolvingHook ? "opacity-50 cursor-not-allowed" : "cursor-pointer"), style: {
     background: "var(--ds-gray-1000)",
     color: "var(--ds-background-100)"
-  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error2 ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }) }), resource !== "run" && rawEvents && jsxRuntimeExports.jsx("section", { children: jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, encryptionKey }) })] })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
+  }, children: [jsxRuntimeExports.jsx(Send, { className: "h-4 w-4" }), "Resolve Hook"] })] })] }), jsxRuntimeExports.jsx(AttributePanel, { data: displayData, moduleSpecifier, expiredAt: run.expiredAt, isLoading: loading, error: error2 ?? void 0, onStreamClick, onRunClick, onDecrypt, isDecrypting, resource }), resource !== "run" && rawEvents && jsxRuntimeExports.jsx(EventsList, { events: rawEvents, onLoadEventData, encryptionKey })] }) }), jsxRuntimeExports.jsx(ResolveHookModal, { isOpen: showResolveHookModal, onClose: () => setShowResolveHookModal(false), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] });
 }
 const MAP_HEIGHT = 56;
 const TIMELINE_PADDING = 8;
@@ -82933,14 +83448,6 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
     height: MAP_HEIGHT - 4
   } })] });
 });
-const SidebarDataContext = reactExports.createContext(null);
-SidebarDataContext.displayName = "SidebarDataContext";
-function SidebarDataProvider({ value, children: children2 }) {
-  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
-}
-function useSidebarDataOptional() {
-  return reactExports.useContext(SidebarDataContext);
-}
 const ChunkRow = ReactExports.memo(function ChunkRow2({ chunk, index: index2 }) {
   return jsxRuntimeExports.jsx("div", { className: "text-[11px] rounded-md border p-3", style: {
     borderColor: "var(--ds-gray-300)",
@@ -82976,6 +83483,30 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error: error2, isLo
     color: "var(--ds-gray-600)"
   }, 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", { style: { paddingBottom: 8 }, children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2], index: index2 }) }), style: { flex: 1, minHeight: 0 } }) })] });
 }
+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]",
+  "transition-colors duration-150 ease-in-out",
+  "enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40",
+  "focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2"
+], {
+  variants: {
+    variant: {
+      tertiary: "text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000",
+      muted: "text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000"
+    },
+    size: {
+      tiny: "h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4",
+      small: "h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4"
+    }
+  },
+  defaultVariants: {
+    variant: "tertiary",
+    size: "tiny"
+  }
+});
+function IconButton({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props });
+}
 const QUERY = "(prefers-reduced-motion: reduce)";
 const useReducedMotion = () => {
   const [reduced, setReduced] = reactExports.useState(() => {
@@ -82994,27 +83525,6 @@ const useReducedMotion = () => {
   }, []);
   return reduced;
 };
-function CopyButton({ copyText, ariaLabel, className }) {
-  const [copied, setCopied] = reactExports.useState(false);
-  const timeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return jsxRuntimeExports.jsx("button", { type: "button", "aria-label": ariaLabel, className: cn$4("cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0", className), onClick: (e) => {
-    e.stopPropagation();
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    void navigator.clipboard.writeText(copyText).then(() => {
-      setCopied(true);
-      timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
-    });
-  }, children: jsxRuntimeExports.jsxs("div", { className: "relative w-3 h-3", children: [jsxRuntimeExports.jsx("div", { className: cn$4("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"), children: jsxRuntimeExports.jsx(Check, { className: "w-3 h-3" }) }), jsxRuntimeExports.jsx("div", { className: cn$4("absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"), children: jsxRuntimeExports.jsx(Copy, { className: "w-3 h-3" }) })] }) });
-}
 const WorkflowIcon = () => {
   return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", style: { color: "currentColor" }, viewBox: "0 0 16 16", width: "16", children: jsxRuntimeExports.jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) });
 };
@@ -83027,6 +83537,128 @@ const SleepIcon = () => {
 const StepForwardIcon = () => {
   return jsxRuntimeExports.jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: "currentColor" }, children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) });
 };
+const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
+function parseSpanSearchQuery(rawQuery) {
+  var _a3, _b2, _c2;
+  const attributes = [];
+  for (const match2 of rawQuery.matchAll(ATTR_FILTER_REGEX)) {
+    const key = (_b2 = (_a3 = match2.groups) == null ? void 0 : _a3.key) == null ? void 0 : _b2.trim();
+    if (!key)
+      continue;
+    attributes.push({
+      key,
+      value: (((_c2 = match2.groups) == null ? void 0 : _c2.value) ?? "").toLocaleLowerCase()
+    });
+  }
+  const text2 = rawQuery.replace(ATTR_FILTER_REGEX, " ").replace(/\s{2,}/g, " ").trim().toLocaleLowerCase();
+  return { text: text2, attributes };
+}
+function isSpanDimmedBySearch(spanId, result) {
+  return result.isActive && !result.matchedSpanIds.has(spanId);
+}
+function searchSpans(spans, rawQuery) {
+  const query = parseSpanSearchQuery(rawQuery);
+  const isActive = Boolean(query.text || query.attributes.length);
+  const matchingSpans = isActive ? spans.filter((span) => spanMatchesQuery(span, query)) : spans;
+  return {
+    isActive,
+    matchedSpanIds: new Set(matchingSpans.map((span) => span.spanId)),
+    matchingSpans,
+    query
+  };
+}
+function spanMatchesQuery(span, query) {
+  if (query.text && !spanMatchesText(span, query.text)) {
+    return false;
+  }
+  return query.attributes.every(({ key, value }) => spanMatchesAttribute(span, key, value));
+}
+function spanMatchesText(span, text2) {
+  return [
+    span.name,
+    span.spanId,
+    span.resource,
+    span.library.name,
+    span.library.version
+  ].filter((value) => typeof value === "string").some((value) => value.toLocaleLowerCase().includes(text2));
+}
+function spanMatchesAttribute(span, key, expectedValue) {
+  const candidates = getSearchValues(span, key);
+  if (!candidates.length)
+    return false;
+  if (!expectedValue) {
+    return candidates.some((value) => value != null);
+  }
+  return candidates.some((value) => valueToSearchString(value).toLocaleLowerCase().includes(expectedValue));
+}
+function getSearchValues(span, key) {
+  const candidates = [];
+  const normalizedKey = key.toLocaleLowerCase();
+  switch (normalizedKey) {
+    case "id":
+    case "spanid":
+    case "span.id":
+      candidates.push(span.spanId);
+      break;
+    case "name":
+      candidates.push(span.name);
+      break;
+    case "resource":
+      candidates.push(span.resource);
+      break;
+    case "library":
+    case "library.name":
+      candidates.push(span.library.name);
+      break;
+    case "library.version":
+      candidates.push(span.library.version);
+      break;
+    case "status":
+    case "status.code":
+      candidates.push(span.status.code);
+      break;
+  }
+  candidates.push(getOwnProperty(span.attributes, key));
+  candidates.push(getPathValue(span.attributes, key));
+  if (!normalizedKey.startsWith("data.")) {
+    candidates.push(getPathValue(span.attributes.data, key));
+  }
+  return candidates.filter((value) => value !== void 0);
+}
+function getOwnProperty(source, key) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  if (!Object.hasOwn(source, key))
+    return void 0;
+  return source[key];
+}
+function getPathValue(source, path2) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  let current = source;
+  for (const segment2 of path2.split(".")) {
+    if (!segment2)
+      return void 0;
+    current = getOwnProperty(current, segment2);
+    if (current === void 0)
+      return void 0;
+  }
+  return current;
+}
+function valueToSearchString(value) {
+  if (value instanceof Date)
+    return value.toISOString();
+  if (typeof value === "string")
+    return value;
+  if (value == null || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
 function computeRootBounds(spans) {
   let minStart = Number.POSITIVE_INFINITY;
   let maxEnd = Number.NEGATIVE_INFINITY;
@@ -83350,286 +83982,6 @@ function computeSpanSegments(span) {
       return [];
   }
 }
-const ELLIPSIS = "...";
-const MIN_START = 3;
-const MIN_END = 3;
-const MIN_KEPT = MIN_START + MIN_END;
-const graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-function toGraphemes(text2) {
-  if (graphemeSegmenter) {
-    return [...graphemeSegmenter.segment(text2)].map((s2) => s2.segment);
-  }
-  return Array.from(text2);
-}
-function buildCandidate(graphemes, kept) {
-  if (kept <= 0) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: ELLIPSIS,
-      truncated: true
-    };
-  }
-  const suffixGraphemeCount = kept >= MIN_KEPT ? Math.max(MIN_END, Math.floor(kept / 2)) : Math.floor(kept / 2);
-  const prefixGraphemeCount = kept - suffixGraphemeCount;
-  const prefixText = graphemes.slice(0, prefixGraphemeCount).join("");
-  const suffixText = suffixGraphemeCount > 0 ? graphemes.slice(-suffixGraphemeCount).join("") : "";
-  return {
-    prefixText,
-    prefixGraphemeCount,
-    suffixText,
-    suffixGraphemeCount,
-    text: prefixText + ELLIPSIS + suffixText,
-    truncated: true
-  };
-}
-function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
-  const fullText = graphemes.join("");
-  const resolvedFullWidth = fullWidth ?? measure(fullText);
-  if (availableWidth <= 0 || graphemes.length === 0) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
-  }
-  if (resolvedFullWidth <= availableWidth) {
-    return {
-      prefixText: fullText,
-      prefixGraphemeCount: graphemes.length,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: fullText,
-      truncated: false
-    };
-  }
-  let lo2 = 0;
-  let hi = graphemes.length - 1;
-  let best = -1;
-  while (lo2 <= hi) {
-    const mid = lo2 + hi >>> 1;
-    const candidate = buildCandidate(graphemes, mid);
-    if (measure(candidate.text) <= availableWidth) {
-      best = mid;
-      lo2 = mid + 1;
-    } else {
-      hi = mid - 1;
-    }
-  }
-  if (best === -1) {
-    return {
-      prefixText: "",
-      prefixGraphemeCount: 0,
-      suffixText: "",
-      suffixGraphemeCount: 0,
-      text: "",
-      truncated: true
-    };
-  }
-  return buildCandidate(graphemes, best);
-}
-function getMiddleTruncateCopyText({ prefixText, selectionEnd, selectionStart, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  if (selectionStart < 0 || selectionEnd > visibleText.length || selectionStart >= selectionEnd) {
-    return null;
-  }
-  if (selectionStart === 0 && selectionEnd === visibleText.length) {
-    return value;
-  }
-  const ellipsisStart = prefixText.length;
-  const ellipsisEnd = ellipsisStart + ELLIPSIS.length;
-  if (selectionStart > ellipsisStart || selectionEnd < ellipsisEnd) {
-    return null;
-  }
-  const originalGraphemes = toGraphemes(value);
-  const selectedPrefixGraphemeCount = toGraphemes(visibleText.slice(0, selectionStart)).length;
-  const selectedSuffixGraphemeCount = toGraphemes(visibleText.slice(ellipsisEnd, selectionEnd)).length;
-  const suffixStart = originalGraphemes.length - toGraphemes(suffixText).length;
-  return originalGraphemes.slice(selectedPrefixGraphemeCount, suffixStart + selectedSuffixGraphemeCount).join("");
-}
-function getMiddleTruncateCopyTextFromSelectionText({ prefixText, selectionText, suffixText, value }) {
-  const visibleText = prefixText + ELLIPSIS + suffixText;
-  const trimmedSelectionText = selectionText.trim();
-  if (!trimmedSelectionText) {
-    return null;
-  }
-  const leading = selectionText.slice(0, selectionText.length - selectionText.trimStart().length);
-  const trailing = selectionText.slice(selectionText.trimEnd().length);
-  if (trimmedSelectionText === visibleText) {
-    return leading + value + trailing;
-  }
-  if (!trimmedSelectionText.includes(ELLIPSIS)) {
-    return null;
-  }
-  const selectionStart = visibleText.indexOf(trimmedSelectionText);
-  if (selectionStart === -1) {
-    return null;
-  }
-  const selectionEnd = selectionStart + trimmedSelectionText.length;
-  const mappedText = getMiddleTruncateCopyText({
-    prefixText,
-    selectionEnd,
-    selectionStart,
-    suffixText,
-    value
-  });
-  return mappedText === null ? null : leading + mappedText + trailing;
-}
-const useIsomorphicLayoutEffect$2 = typeof window === "undefined" ? reactExports.useEffect : reactExports.useLayoutEffect;
-function createFullState(value, graphemes) {
-  return {
-    displayText: value,
-    isTruncated: false,
-    prefixGraphemeCount: graphemes.length,
-    prefixText: value,
-    suffixGraphemeCount: 0,
-    suffixText: ""
-  };
-}
-function useMiddleTruncate(value) {
-  const graphemes = reactExports.useMemo(() => toGraphemes(value), [value]);
-  const fullState = reactExports.useMemo(() => createFullState(value, graphemes), [graphemes, value]);
-  const ref = reactExports.useRef(null);
-  const measureRef = reactExports.useRef(null);
-  const [state, setState] = reactExports.useState(() => fullState);
-  const rafRef = reactExports.useRef(0);
-  const updateState = reactExports.useCallback((nextState) => {
-    setState((currentState) => {
-      if (currentState.displayText === nextState.displayText && currentState.isTruncated === nextState.isTruncated && currentState.prefixText === nextState.prefixText && currentState.prefixGraphemeCount === nextState.prefixGraphemeCount && currentState.suffixText === nextState.suffixText && currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
-        return currentState;
-      }
-      return nextState;
-    });
-  }, []);
-  const recalculate = reactExports.useCallback(() => {
-    const el = ref.current;
-    const measureEl = measureRef.current;
-    if (!el || !measureEl)
-      return;
-    const available = el.clientWidth;
-    if (available <= 0) {
-      updateState(fullState);
-      return;
-    }
-    const measure = (text2) => {
-      measureEl.textContent = text2;
-      return measureEl.scrollWidth;
-    };
-    const fullWidth = measure(value);
-    if (fullWidth <= available) {
-      updateState(fullState);
-      return;
-    }
-    const result = middleTruncate(graphemes, available, measure, fullWidth);
-    updateState({
-      displayText: result.text,
-      isTruncated: result.truncated,
-      prefixGraphemeCount: result.prefixGraphemeCount,
-      prefixText: result.prefixText,
-      suffixGraphemeCount: result.suffixGraphemeCount,
-      suffixText: result.suffixText
-    });
-  }, [fullState, graphemes, updateState, value]);
-  useIsomorphicLayoutEffect$2(() => {
-    recalculate();
-  }, [recalculate]);
-  reactExports.useEffect(() => {
-    var _a3;
-    const el = ref.current;
-    if (!el)
-      return;
-    const debouncedRecalc = () => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(recalculate);
-    };
-    const ro2 = typeof ResizeObserver !== "undefined" ? new ResizeObserver(debouncedRecalc) : null;
-    ro2 == null ? void 0 : ro2.observe(el);
-    window.addEventListener("resize", debouncedRecalc);
-    const onFontsLoaded = () => {
-      debouncedRecalc();
-    };
-    const fontSet = "fonts" in document ? document.fonts : null;
-    (_a3 = fontSet == null ? void 0 : fontSet.addEventListener) == null ? void 0 : _a3.call(fontSet, "loadingdone", onFontsLoaded);
-    return () => {
-      var _a4;
-      ro2 == null ? void 0 : ro2.disconnect();
-      window.removeEventListener("resize", debouncedRecalc);
-      cancelAnimationFrame(rafRef.current);
-      (_a4 = fontSet == null ? void 0 : fontSet.removeEventListener) == null ? void 0 : _a4.call(fontSet, "loadingdone", onFontsLoaded);
-    };
-  }, [recalculate]);
-  return {
-    ref,
-    measureRef,
-    displayText: state.displayText,
-    isTruncated: state.isTruncated,
-    prefixGraphemeCount: state.prefixGraphemeCount,
-    prefixText: state.prefixText,
-    suffixGraphemeCount: state.suffixGraphemeCount,
-    suffixText: state.suffixText
-  };
-}
-function getRangeOffsets(container, range2) {
-  if (!container.contains(range2.startContainer) || !container.contains(range2.endContainer)) {
-    return null;
-  }
-  const startRange = document.createRange();
-  startRange.selectNodeContents(container);
-  startRange.setEnd(range2.startContainer, range2.startOffset);
-  const endRange = document.createRange();
-  endRange.selectNodeContents(container);
-  endRange.setEnd(range2.endContainer, range2.endOffset);
-  return {
-    end: endRange.toString().length,
-    start: startRange.toString().length
-  };
-}
-function MiddleTruncate({ value, className, onCopy: onCopyProp, ...props }) {
-  const { ref, measureRef, displayText, isTruncated, prefixText, suffixText } = useMiddleTruncate(value);
-  const visibleRef = reactExports.useRef(null);
-  const handleCopy = reactExports.useCallback((e) => {
-    onCopyProp == null ? void 0 : onCopyProp(e);
-    if (e.defaultPrevented || !isTruncated)
-      return;
-    const selection2 = window.getSelection();
-    if (!selection2 || selection2.rangeCount === 0)
-      return;
-    const selectionText = selection2.toString();
-    if (!selectionText)
-      return;
-    const range2 = selection2.getRangeAt(0);
-    const visibleEl = visibleRef.current;
-    let copyText = null;
-    if (e.currentTarget.contains(range2.startContainer) && e.currentTarget.contains(range2.endContainer) && visibleEl) {
-      const offsets = getRangeOffsets(visibleEl, range2);
-      if (offsets) {
-        copyText = getMiddleTruncateCopyText({
-          prefixText,
-          selectionEnd: offsets.end,
-          selectionStart: offsets.start,
-          suffixText,
-          value
-        });
-      }
-    }
-    copyText ?? (copyText = getMiddleTruncateCopyTextFromSelectionText({
-      prefixText,
-      selectionText,
-      suffixText,
-      value
-    }));
-    if (copyText === null)
-      return;
-    e.preventDefault();
-    e.clipboardData.setData("text/plain", copyText);
-  }, [onCopyProp, isTruncated, prefixText, suffixText, value]);
-  return jsxRuntimeExports.jsxs("span", { title: isTruncated ? value : void 0, ...props, ref, className: cn$4("relative inline-grid min-w-0 max-w-full overflow-hidden whitespace-nowrap", className), onCopy: handleCopy, children: [isTruncated && jsxRuntimeExports.jsx("span", { className: "sr-only select-none", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none col-start-1 row-start-1 invisible select-none whitespace-nowrap", children: value }), jsxRuntimeExports.jsx("span", { "aria-hidden": isTruncated || void 0, className: "col-start-1 row-start-1 min-w-0 overflow-hidden", ref: visibleRef, children: isTruncated ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { children: prefixText }), jsxRuntimeExports.jsx("span", { children: ELLIPSIS }), jsxRuntimeExports.jsx("span", { children: suffixText })] }) : displayText }), jsxRuntimeExports.jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-0 inline-block invisible select-none whitespace-nowrap", ref: measureRef })] });
-}
 const eventStyles = {
   run: { icon: WorkflowIcon, className: "text-blue-900" },
   step: { icon: StepForwardIcon, className: "text-green-900" },
@@ -83648,15 +84000,15 @@ function getEventStyle(resource, isErrored) {
     className: cn$4(isErrored ? "text-red-900" : style2.className)
   };
 }
-const EventRow = ({ span, isSelected, onSelectSpan }) => {
+const EventRow = ({ span, isSelected, isDimmed, onSelectSpan }) => {
   const durationMs = getSpanDurationMs(span);
   const isErrored = span.attributes.data.status === "failed";
   const { icon: Icon2, className: tagClassName } = getEventStyle(span.resource, isErrored);
-  return jsxRuntimeExports.jsx("li", { className: cn$4("relative overflow-clip group after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-gray-alpha-400", ROW_HEIGHT_CLASS), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center px-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn$4("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 text-label-14", children: jsxRuntimeExports.jsx(MiddleTruncate, { value: span.name }) })] }), jsxRuntimeExports.jsx("div", { className: "ml-2 shrink-0", children: jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDuration(durationMs) }) })] }) }) });
+  return jsxRuntimeExports.jsx("li", { className: cn$4("relative overflow-clip group transition-opacity", ROW_HEIGHT_CLASS, isDimmed && "opacity-35"), role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: jsxRuntimeExports.jsx("div", { className: "h-full hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200", children: jsxRuntimeExports.jsxs("div", { className: "flex h-full min-w-0 items-center pl-4 pr-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [jsxRuntimeExports.jsx("span", { className: cn$4("shrink-0", tagClassName), children: jsxRuntimeExports.jsx(Icon2, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("span", { className: "min-w-0 text-label-14", children: jsxRuntimeExports.jsx(MiddleTruncate, { value: span.name }) })] }), jsxRuntimeExports.jsx("div", { className: "ml-2 shrink-0", children: jsxRuntimeExports.jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDuration(durationMs) }) })] }) }) });
 };
-const EventList = ({ spans, activeSpanId, onSelectSpan }) => {
-  return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible", children: spans.map((span) => {
-    return jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, onSelectSpan }, span.spanId);
+const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
+  return jsxRuntimeExports.jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible divide-y divide-gray-alpha-400 border-b border-gray-alpha-400", children: spans.map((span) => {
+    return jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId);
   }) });
 };
 const GUTTER_PX = 1;
@@ -83856,7 +84208,7 @@ function SegmentBar({ segments }) {
     }, children: showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null }, `${seg.status}-${i}`);
   }) });
 }
-const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, onSelect }) {
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
   var _a3;
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
@@ -83874,7 +84226,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
   }, [onSelect, span.spanId]);
-  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: "group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200", onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
+  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.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 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 }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
 });
 const DELTA_ROW_HEIGHT_PX = 40;
 const DELTA_CAP_HEIGHT_PX = 8;
@@ -83891,7 +84243,7 @@ const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, ri
 function TimelineHeader({ markers: markers2, hoverInfo: hoverInfo2 }) {
   return jsxRuntimeExports.jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m2.position * 100}%` }, children: m2.label }, `${m2.position}-${m2.label}`)), hoverInfo2 && jsxRuntimeExports.jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo2.fraction * 100}%` }, children: hoverInfo2.label })] }) });
 }
-function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, onSelect, hoverFraction, altHeld = false }) {
+function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, searchResult, onSelect, hoverFraction, altHeld = false }) {
   const containerRef = reactExports.useRef(null);
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
   const viewDuration = viewEnd - viewStart;
@@ -83910,7 +84262,7 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, on
   return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, `${marker2.position}-${marker2.label}`) : null
-  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
 }
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
@@ -83960,7 +84312,7 @@ function DetailPanel({ span, rootStart, onClose }) {
   const startMs = getHighResInMs(span.startTime);
   const durationMs = getSpanDurationMs(span);
   const offsetMs = startMs - rootStart;
-  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors", onClick: onClose, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
+  return jsxRuntimeExports.jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", onClick: onClose, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] }), jsxRuntimeExports.jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: jsxRuntimeExports.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Resource" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Duration" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Offset" }), jsxRuntimeExports.jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), jsxRuntimeExports.jsx("dt", { className: "text-gray-900", children: "Status" }), jsxRuntimeExports.jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? "Error" : "OK" })] }) })] });
 }
 const MIN_VIEWPORT_MS = 1e-3;
 function useAnimatedViewport(initial) {
@@ -84030,7 +84382,7 @@ function useSelectedSpanInfo() {
       spanId: activeSpan.spanId,
       rawEvents
     };
-  }, [activeSpan, sidebar == null ? void 0 : sidebar.events]);
+  }, [activeSpan, sidebar]);
 }
 function NewTraceViewer$1({ trace: trace2 }) {
   return jsxRuntimeExports.jsx(ActiveSpanProvider, { spans: trace2.spans, children: jsxRuntimeExports.jsx(NewTraceViewerContent, { trace: trace2 }) });
@@ -84040,12 +84392,8 @@ function NewTraceViewerContent({ trace: trace2 }) {
   const sidebar = useSidebarDataOptional();
   const selectedSpan = useSelectedSpanInfo();
   const [searchQuery, setSearchQuery] = reactExports.useState("");
-  const filteredSpans = reactExports.useMemo(() => {
-    const q2 = searchQuery.trim().toLowerCase();
-    if (!q2)
-      return trace2.spans;
-    return trace2.spans.filter((s2) => s2.name.toLowerCase().includes(q2) || s2.resource.toLowerCase().includes(q2));
-  }, [trace2.spans, searchQuery]);
+  const deferredSearchQuery = reactExports.useDeferredValue(searchQuery);
+  const searchResult = reactExports.useMemo(() => searchSpans(trace2.spans, deferredSearchQuery), [trace2.spans, deferredSearchQuery]);
   const root2 = reactExports.useMemo(() => computeRootBounds(trace2.spans), [trace2.spans]);
   const { viewport, setViewport, animateTo } = useAnimatedViewport({
     start: root2.startTime,
@@ -84067,7 +84415,7 @@ function NewTraceViewerContent({ trace: trace2 }) {
       return prev;
     });
     prevRootRef.current = { start: newStart, end: newEnd };
-  }, [root2.startTime, root2.duration]);
+  }, [root2.startTime, root2.duration, setViewport]);
   const viewDuration = viewport.end - viewport.start;
   const timeMarkers = reactExports.useMemo(() => computeTimeMarkers(viewDuration, viewport.start - root2.startTime), [viewDuration, viewport.start, root2.startTime]);
   const resetZoom = reactExports.useCallback(() => {
@@ -84146,13 +84494,25 @@ function NewTraceViewerContent({ trace: trace2 }) {
   ]);
   const [altHeld, setAltHeld] = reactExports.useState(false);
   reactExports.useEffect(() => {
+    const handleSidebarNavKey = (e) => {
+      const target2 = e.target;
+      if (target2 instanceof HTMLInputElement || target2 instanceof HTMLTextAreaElement || (target2 == null ? void 0 : target2.isContentEditable)) {
+        return;
+      }
+      const targetId = e.key === "k" ? prevSpanIdRef.current : nextSpanIdRef.current;
+      if (targetId) {
+        e.preventDefault();
+        handleSelectSpanRef.current(targetId);
+      }
+    };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         clearActiveSpan();
-      }
-      if (e.key === "Alt") {
+      } else if (e.key === "Alt") {
         e.preventDefault();
         setAltHeld(true);
+      } else if (e.key === "j" || e.key === "k") {
+        handleSidebarNavKey(e);
       }
     };
     const onKeyUp = (e) => {
@@ -84216,7 +84576,8 @@ function NewTraceViewerContent({ trace: trace2 }) {
         if (e.deltaMode === 1)
           dy *= 16;
         const cursorFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
-        const scaleFactor = Math.pow(2, dy / 200);
+        const isMouseWheel = e.deltaMode === 1 || Math.abs(e.deltaY) >= 50;
+        const scaleFactor = Math.pow(2, dy / (isMouseWheel ? 200 : 60));
         setViewport((prev) => {
           const prevDuration = prev.end - prev.start;
           const cursorTime = prev.start + cursorFraction * prevDuration;
@@ -84256,7 +84617,7 @@ function NewTraceViewerContent({ trace: trace2 }) {
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, [root2.startTime, root2.duration]);
+  }, [root2.startTime, root2.duration, setViewport]);
   const selectedSpanName = reactExports.useMemo(() => {
     var _a3, _b2;
     if (!(selectedSpan == null ? void 0 : selectedSpan.data))
@@ -84269,17 +84630,39 @@ function NewTraceViewerContent({ trace: trace2 }) {
     const workflowName = data.workflowName;
     return (stepName ? (_a3 = parseStepName(stepName)) == null ? void 0 : _a3.shortName : void 0) ?? (workflowName ? (_b2 = parseWorkflowName(workflowName)) == null ? void 0 : _b2.shortName : void 0) ?? stepName ?? workflowName ?? data.hookId ?? "Details";
   }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.resource]);
-  const selectedResource = selectedSpan == null ? void 0 : selectedSpan.resource;
-  const selectedResourceId = reactExports.useMemo(() => {
-    if (!(selectedSpan == null ? void 0 : selectedSpan.data))
-      return void 0;
-    const data = selectedSpan.data;
-    if (selectedSpan.resource === "hook") {
-      return data.hookId ?? selectedSpan.spanId;
+  const { prevSpanId, nextSpanId } = reactExports.useMemo(() => {
+    var _a3, _b2;
+    if (!activeSpanId)
+      return { prevSpanId: null, nextSpanId: null };
+    const i = trace2.spans.findIndex((s2) => s2.spanId === activeSpanId);
+    if (i === -1)
+      return { prevSpanId: null, nextSpanId: null };
+    return {
+      prevSpanId: ((_a3 = trace2.spans[i - 1]) == null ? void 0 : _a3.spanId) ?? null,
+      nextSpanId: ((_b2 = trace2.spans[i + 1]) == null ? void 0 : _b2.spanId) ?? null
+    };
+  }, [activeSpanId, trace2.spans]);
+  const handleSelectPrevSpan = reactExports.useCallback(() => {
+    if (prevSpanId)
+      handleSelectSpan(prevSpanId);
+  }, [prevSpanId, handleSelectSpan]);
+  const handleSelectNextSpan = reactExports.useCallback(() => {
+    if (nextSpanId)
+      handleSelectSpan(nextSpanId);
+  }, [nextSpanId, handleSelectSpan]);
+  const prevSpanIdRef = reactExports.useRef(prevSpanId);
+  const nextSpanIdRef = reactExports.useRef(nextSpanId);
+  const handleSelectSpanRef = reactExports.useRef(handleSelectSpan);
+  prevSpanIdRef.current = prevSpanId;
+  nextSpanIdRef.current = nextSpanId;
+  handleSelectSpanRef.current = handleSelectSpan;
+  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
+    if (e.key === "Escape" && searchQuery) {
+      e.preventDefault();
+      e.stopPropagation();
+      setSearchQuery("");
     }
-    return data.stepId ?? data.runId ?? data.hookId ?? selectedSpan.spanId;
-  }, [selectedSpan == null ? void 0 : selectedSpan.data, selectedSpan == null ? void 0 : selectedSpan.resource, selectedSpan == null ? void 0 : selectedSpan.spanId]);
-  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]", children: [jsxRuntimeExports.jsxs("div", { id: "trace-parent", className: "grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100", children: [jsxRuntimeExports.jsxs(SplitPane, { startHeader: jsxRuntimeExports.jsxs("div", { className: "bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5", children: [jsxRuntimeExports.jsx(Search, { className: "w-3.5 h-3.5 shrink-0 text-gray-800" }), jsxRuntimeExports.jsx("input", { id: "trace-viewer-search", name: "trace-viewer-search", type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", onClick: () => setSearchQuery(""), className: "shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors", children: jsxRuntimeExports.jsx(X$3, { className: "w-3 h-3" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: filteredSpans, activeSpanId, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-4 pt-4 pb-3", children: jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("span", { className: "text-[15px] font-semibold text-gray-1000 truncate block", children: selectedSpanName }), selectedResourceId && jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-2", children: [selectedResource && jsxRuntimeExports.jsx("span", { className: `inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${selectedResource === "step" ? "bg-green-200 text-green-900" : selectedResource === "run" ? "bg-blue-200 text-blue-900" : "bg-gray-200 text-gray-900"}`, children: selectedResource.charAt(0).toUpperCase() + selectedResource.slice(1) }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0", title: selectedResourceId, children: [jsxRuntimeExports.jsx("span", { className: "truncate", children: selectedResourceId }), jsxRuntimeExports.jsx(CopyButton, { copyText: selectedResourceId, ariaLabel: "Copy ID", className: "shrink-0" })] })] })] }), jsxRuntimeExports.jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary$1, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : activeSpan ? jsxRuntimeExports.jsx(DetailPanel, { span: activeSpan, rootStart: root2.startTime, onClose: clearActiveSpan }) : null] });
+  }, placeholder: "Search spans...", "aria-label": "Search spans", className: "flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none" }), searchQuery && jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => setSearchQuery(""), className: "-mr-2 hidden h-full max-w-full shrink-0 cursor-pointer items-center rounded-r-md border-0 bg-transparent px-2.5 font-inherit text-base text-gray-900 no-underline transition-colors duration-150 ease-in hover:text-gray-1000 focus-visible:-outline-offset-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] min-[961px]:flex", children: jsxRuntimeExports.jsx("kbd", { className: "inline-flex h-5 min-h-5 min-w-5 items-center justify-center rounded border border-gray-alpha-400 bg-background-100 px-1 font-sans text-[13px] font-medium leading-[1.7em] text-gray-900", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsx("div", { className: "block overflow-visible", children: jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }) }), jsxRuntimeExports.jsx("div", { ref: timelineRef, className: "block min-h-0 overflow-visible relative", onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: jsxRuntimeExports.jsx(Timeline, { spans: trace2.spans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, searchResult, onSelect: handleSelectSpan, hoverFraction, altHeld }) })] }), jsxRuntimeExports.jsxs("div", { className: "absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400", children: [jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomOut, "aria-label": "Zoom out", children: jsxRuntimeExports.jsx(ZoomOut, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: resetZoom, "aria-label": "Reset zoom", children: jsxRuntimeExports.jsx(RotateCcw, { className: "w-3.5 h-3.5" }) }), jsxRuntimeExports.jsx(IconButton, { variant: "muted", size: "small", onClick: zoomIn, "aria-label": "Zoom in", children: jsxRuntimeExports.jsx(ZoomIn, { className: "w-4 h-4" }) })] })] }), activeSpan && sidebar ? jsxRuntimeExports.jsxs("aside", { className: "flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3", children: [jsxRuntimeExports.jsx("span", { className: "text-label-14 font-medium text-gray-1000 truncate block", children: selectedSpanName }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate to previous span", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate to next span", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }), jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "w-px h-4 bg-gray-alpha-400 mx-1" }), jsxRuntimeExports.jsx(IconButton, { "aria-label": "Close span details", "aria-keyshortcuts": "Escape", onClick: clearActiveSpan, children: jsxRuntimeExports.jsx(X$3, { className: "w-4 h-4" }) })] })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: jsxRuntimeExports.jsx(ErrorBoundary$1, { children: jsxRuntimeExports.jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan }) }) })] }) : activeSpan ? jsxRuntimeExports.jsx(DetailPanel, { span: activeSpan, rootStart: root2.startTime, onClose: clearActiveSpan }) : null] });
 }
 const NewTraceViewer = ({ run, events: events2, sidebarData }) => {
   const traceWithMeta = reactExports.useMemo(() => {
@@ -84613,46 +84996,6 @@ function getElementRef$2(element2) {
   }
   return element2.props.ref || element2.ref;
 }
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config2) => (props) => {
-  var _config_compoundVariants;
-  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config2;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -88243,7 +88586,7 @@ const encryption = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   encrypt: encrypt$1,
   importKey
 }, Symbol.toStringTag, { value: "Module" }));
-const version$1 = "5.0.0-beta.7";
+const version$1 = "5.0.0-beta.9";
 const WorldCacheKey = Symbol.for("@workflow/world//cache");
 const WorldCachePromiseKey = Symbol.for("@workflow/world//cachePromise");
 const GetWorldFnKey$1 = Symbol.for("@workflow/world//getWorldFn");
@@ -88379,12 +88722,15 @@ async function healthCheck(world, endpoint, options) {
 }
 const LOCK_POLL_INTERVAL_MS = 10;
 function createFlushableState() {
-  return {
+  const state = {
     ...withResolvers$1(),
     pendingOps: 0,
     doneResolved: false,
     streamEnded: false
   };
+  state.promise.catch(() => {
+  });
+  return state;
 }
 function isWritableUnlockedNotClosed(writable) {
   if (writable.locked)
@@ -91730,7 +92076,7 @@ function truncateForError(value) {
 }
 class UnsafeEntityIdError extends WorkflowWorldError {
   constructor(kind, value) {
-    super(`Unsafe ${kind} "${truncateForError(value)}": must not be empty, start with ".", or contain path separators or null bytes`);
+    super(`Unsafe ${kind} "${truncateForError(value)}": must not be empty, contain ".", "/", "\\", or null bytes`);
     this.name = "UnsafeEntityIdError";
   }
   static is(value) {
@@ -91738,7 +92084,7 @@ class UnsafeEntityIdError extends WorkflowWorldError {
   }
 }
 function assertSafeEntityId(kind, value) {
-  if (value.length === 0 || value.startsWith(".") || value.includes("/") || value.includes("\\") || value.includes("\0")) {
+  if (value.length === 0 || value.startsWith(".") || value.includes("/") || value.includes("\\") || value.includes("\0") || value.includes(".")) {
     throw new UnsafeEntityIdError(kind, value);
   }
 }
@@ -91889,6 +92235,16 @@ async function readBuffer(filePath) {
   const content2 = await promises.readFile(filePath);
   return content2;
 }
+async function readFirstByte(filePath) {
+  const file2 = await promises.open(filePath, "r");
+  try {
+    const byte = Buffer.allocUnsafe(1);
+    const { bytesRead } = await file2.read(byte, 0, 1, 0);
+    return bytesRead === 0 ? void 0 : byte[0];
+  } finally {
+    await file2.close();
+  }
+}
 async function deleteJSON(filePath) {
   try {
     await promises.unlink(filePath);
@@ -116833,7 +117189,8 @@ async function handleLegacyEvent(basedir, runId, data, currentRun, params) {
         output: void 0,
         error: void 0,
         completedAt: now2,
-        updatedAt: now2
+        updatedAt: now2,
+        attributes: currentRun.attributes
       };
       const runPath = resolveWithinBase(basedir, "runs", `${runId}.json`);
       await writeJSON(runPath, run, { overwrite: true });
@@ -116863,6 +117220,102 @@ async function handleLegacyEvent(basedir, runId, data, currentRun, params) {
       throw new Error(`Event type '${data.eventType}' not supported for legacy runs (specVersion: ${currentRun.specVersion || "undefined"}). Please upgrade 'workflow' package.`);
   }
 }
+const runFileLocks = /* @__PURE__ */ new Map();
+function withRunFileLock(key, fn2) {
+  const prev = runFileLocks.get(key);
+  const taskBox = {};
+  const task = (async () => {
+    if (prev)
+      await prev.catch(() => void 0);
+    try {
+      return await fn2();
+    } finally {
+      if (runFileLocks.get(key) === taskBox.task) {
+        runFileLocks.delete(key);
+      }
+    }
+  })();
+  taskBox.task = task;
+  runFileLocks.set(key, task);
+  return task;
+}
+function createRunsStorage(basedir, tag) {
+  return {
+    get: (async (id2, params) => {
+      assertSafeEntityId("runId", id2);
+      const run = await readJSONWithFallback(basedir, "runs", id2, WorkflowRunSchema, tag);
+      if (!run) {
+        throw new WorkflowRunNotFoundError(id2);
+      }
+      const resolveData = (params == null ? void 0 : params.resolveData) ?? DEFAULT_RESOLVE_DATA_OPTION$1;
+      return filterRunData$1(run, resolveData);
+    }),
+    list: (async (params) => {
+      var _a3, _b2, _c2;
+      const resolveData = (params == null ? void 0 : params.resolveData) ?? DEFAULT_RESOLVE_DATA_OPTION$1;
+      const result = await paginatedFileSystemQuery({
+        directory: path$3.join(basedir, "runs"),
+        schema: WorkflowRunSchema,
+        fileIdFilter: params == null ? void 0 : params.fileIdFilter,
+        filter: (run) => {
+          if ((params == null ? void 0 : params.workflowName) && run.workflowName !== params.workflowName) {
+            return false;
+          }
+          if ((params == null ? void 0 : params.status) && run.status !== params.status) {
+            return false;
+          }
+          return true;
+        },
+        sortOrder: ((_a3 = params == null ? void 0 : params.pagination) == null ? void 0 : _a3.sortOrder) ?? "desc",
+        limit: (_b2 = params == null ? void 0 : params.pagination) == null ? void 0 : _b2.limit,
+        cursor: (_c2 = params == null ? void 0 : params.pagination) == null ? void 0 : _c2.cursor,
+        getCreatedAt: getObjectCreatedAt("wrun"),
+        getId: (run) => run.runId
+      });
+      if (resolveData === "none") {
+        return {
+          ...result,
+          data: result.data.map((run) => ({
+            ...run,
+            input: void 0,
+            output: void 0
+          }))
+        };
+      }
+      return result;
+    }),
+    experimentalSetAttributes: async (runId, changes, options) => {
+      assertSafeEntityId("runId", runId);
+      return withRunFileLock(runId, async () => {
+        const run = await readJSONWithFallback(basedir, "runs", runId, WorkflowRunSchema, tag);
+        if (!run) {
+          throw new WorkflowRunNotFoundError(runId);
+        }
+        try {
+          validateAttributeChanges(changes, {
+            existingKeys: Object.keys(run.attributes ?? {}),
+            allowReservedAttributes: options == null ? void 0 : options.allowReservedAttributes
+          });
+        } catch (err) {
+          if (err instanceof AttributeValidationError) {
+            throw err;
+          }
+          throw err;
+        }
+        const nextAttributes = applyAttributeChanges(run.attributes, changes);
+        const updatedRun = {
+          ...run,
+          attributes: nextAttributes,
+          updatedAt: /* @__PURE__ */ new Date()
+        };
+        await writeJSON(taggedPath(basedir, "runs", runId, tag), updatedRun, {
+          overwrite: true
+        });
+        return { attributes: nextAttributes };
+      });
+    }
+  };
+}
 const stepLocks = /* @__PURE__ */ new Map();
 const HookTokenClaimSchema = object$1({
   runId: string$3()
@@ -116906,13 +117359,26 @@ async function deleteAllWaitsForRun(basedir, runId) {
     }
   }
 }
+async function writeRunUnderLifecycleLock(basedir, runId, tag, proposed) {
+  return withRunFileLock(runId, async () => {
+    const fresh = await readJSON(taggedPath(basedir, "runs", runId, tag), WorkflowRunSchema);
+    const next2 = {
+      ...proposed,
+      attributes: (fresh == null ? void 0 : fresh.attributes) ?? proposed.attributes
+    };
+    await writeJSON(taggedPath(basedir, "runs", runId, tag), next2, {
+      overwrite: true
+    });
+    return next2;
+  });
+}
 function createEventsStorage(basedir, tag) {
   return {
     async create(runId, data, params) {
       if (runId != null && runId !== "") {
         assertSafeEntityId("runId", runId);
       }
-      if ("correlationId" in data && typeof data.correlationId === "string" && data.correlationId.length > 0) {
+      if ("correlationId" in data && typeof data.correlationId === "string") {
         assertSafeEntityId("correlationId", data.correlationId);
       }
       const isStepEvent2 = data.eventType === "step_created" || data.eventType === "step_started" || data.eventType === "step_completed" || data.eventType === "step_failed" || data.eventType === "step_retrying";
@@ -116960,6 +117426,7 @@ function createEventsStorage(basedir, tag) {
                 error: void 0,
                 startedAt: void 0,
                 completedAt: void 0,
+                attributes: {},
                 createdAt: now2,
                 updatedAt: now2
               };
@@ -117090,6 +117557,7 @@ function createEventsStorage(basedir, tag) {
             error: void 0,
             startedAt: void 0,
             completedAt: void 0,
+            attributes: {},
             createdAt: now2,
             updatedAt: now2
           };
@@ -117103,7 +117571,7 @@ function createEventsStorage(basedir, tag) {
             if (currentRun.status === "running") {
               return { run: currentRun };
             }
-            run = {
+            run = await writeRunUnderLifecycleLock(basedir, effectiveRunId, tag, {
               runId: currentRun.runId,
               deploymentId: currentRun.deploymentId,
               workflowName: currentRun.workflowName,
@@ -117117,14 +117585,14 @@ function createEventsStorage(basedir, tag) {
               error: void 0,
               completedAt: void 0,
               startedAt: currentRun.startedAt ?? now2,
-              updatedAt: now2
-            };
-            await writeJSON(taggedPath(basedir, "runs", effectiveRunId, tag), run, { overwrite: true });
+              updatedAt: now2,
+              attributes: currentRun.attributes
+            });
           }
         } else if (data.eventType === "run_completed" && "eventData" in data) {
           const completedData = data.eventData;
           if (currentRun) {
-            run = {
+            run = await writeRunUnderLifecycleLock(basedir, effectiveRunId, tag, {
               runId: currentRun.runId,
               deploymentId: currentRun.deploymentId,
               workflowName: currentRun.workflowName,
@@ -117138,9 +117606,9 @@ function createEventsStorage(basedir, tag) {
               output: completedData.output,
               error: void 0,
               completedAt: now2,
-              updatedAt: now2
-            };
-            await writeJSON(taggedPath(basedir, "runs", effectiveRunId, tag), run, { overwrite: true });
+              updatedAt: now2,
+              attributes: currentRun.attributes
+            });
             await Promise.all([
               deleteAllHooksForRun(basedir, effectiveRunId),
               deleteAllWaitsForRun(basedir, effectiveRunId)
@@ -117149,7 +117617,7 @@ function createEventsStorage(basedir, tag) {
         } else if (data.eventType === "run_failed" && "eventData" in data) {
           const failedData = data.eventData;
           if (currentRun) {
-            run = {
+            run = await writeRunUnderLifecycleLock(basedir, effectiveRunId, tag, {
               runId: currentRun.runId,
               deploymentId: currentRun.deploymentId,
               workflowName: currentRun.workflowName,
@@ -117164,9 +117632,9 @@ function createEventsStorage(basedir, tag) {
               error: failedData.error,
               errorCode: failedData.errorCode,
               completedAt: now2,
-              updatedAt: now2
-            };
-            await writeJSON(taggedPath(basedir, "runs", effectiveRunId, tag), run, { overwrite: true });
+              updatedAt: now2,
+              attributes: currentRun.attributes
+            });
             await Promise.all([
               deleteAllHooksForRun(basedir, effectiveRunId),
               deleteAllWaitsForRun(basedir, effectiveRunId)
@@ -117174,7 +117642,7 @@ function createEventsStorage(basedir, tag) {
           }
         } else if (data.eventType === "run_cancelled") {
           if (currentRun) {
-            run = {
+            run = await writeRunUnderLifecycleLock(basedir, effectiveRunId, tag, {
               runId: currentRun.runId,
               deploymentId: currentRun.deploymentId,
               workflowName: currentRun.workflowName,
@@ -117188,9 +117656,9 @@ function createEventsStorage(basedir, tag) {
               output: void 0,
               error: void 0,
               completedAt: now2,
-              updatedAt: now2
-            };
-            await writeJSON(taggedPath(basedir, "runs", effectiveRunId, tag), run, { overwrite: true });
+              updatedAt: now2,
+              attributes: currentRun.attributes
+            });
             await Promise.all([
               deleteAllHooksForRun(basedir, effectiveRunId),
               deleteAllWaitsForRun(basedir, effectiveRunId)
@@ -117505,53 +117973,6 @@ function createEventsStorage(basedir, tag) {
     }
   };
 }
-function createRunsStorage(basedir, tag) {
-  return {
-    get: (async (id2, params) => {
-      assertSafeEntityId("runId", id2);
-      const run = await readJSONWithFallback(basedir, "runs", id2, WorkflowRunSchema, tag);
-      if (!run) {
-        throw new WorkflowRunNotFoundError(id2);
-      }
-      const resolveData = (params == null ? void 0 : params.resolveData) ?? DEFAULT_RESOLVE_DATA_OPTION$1;
-      return filterRunData$1(run, resolveData);
-    }),
-    list: (async (params) => {
-      var _a3, _b2, _c2;
-      const resolveData = (params == null ? void 0 : params.resolveData) ?? DEFAULT_RESOLVE_DATA_OPTION$1;
-      const result = await paginatedFileSystemQuery({
-        directory: path$3.join(basedir, "runs"),
-        schema: WorkflowRunSchema,
-        fileIdFilter: params == null ? void 0 : params.fileIdFilter,
-        filter: (run) => {
-          if ((params == null ? void 0 : params.workflowName) && run.workflowName !== params.workflowName) {
-            return false;
-          }
-          if ((params == null ? void 0 : params.status) && run.status !== params.status) {
-            return false;
-          }
-          return true;
-        },
-        sortOrder: ((_a3 = params == null ? void 0 : params.pagination) == null ? void 0 : _a3.sortOrder) ?? "desc",
-        limit: (_b2 = params == null ? void 0 : params.pagination) == null ? void 0 : _b2.limit,
-        cursor: (_c2 = params == null ? void 0 : params.pagination) == null ? void 0 : _c2.cursor,
-        getCreatedAt: getObjectCreatedAt("wrun"),
-        getId: (run) => run.runId
-      });
-      if (resolveData === "none") {
-        return {
-          ...result,
-          data: result.data.map((run) => ({
-            ...run,
-            input: void 0,
-            output: void 0
-          }))
-        };
-      }
-      return result;
-    })
-  };
-}
 function createStepsStorage(basedir, tag) {
   return {
     get: (async (runId, stepId, params) => {
@@ -117609,40 +118030,50 @@ const monotonicUlid = monotonicFactory(() => Math.random());
 const RunStreamsSchema = object$1({
   streams: array$1(string$3())
 });
+const EOF_MARKER = 1;
+function isEofByte(byte) {
+  return byte === EOF_MARKER;
+}
 function serializeChunk(chunk) {
-  const eofByte = Buffer.from([chunk.eof ? 1 : 0]);
+  const eofByte = Buffer.from([chunk.eof ? EOF_MARKER : 0]);
   return Buffer.concat([eofByte, chunk.chunk]);
 }
 function isEofChunk(serialized) {
-  return serialized[0] === 1;
+  return isEofByte(serialized[0]);
 }
 function deserializeChunk(serialized) {
-  const eof = serialized[0] === 1;
+  const eof = isEofChunk(serialized);
   const chunk = Buffer.from(serialized.subarray(1));
   return { eof, chunk };
 }
+async function listChunkEntries(chunksDir) {
+  try {
+    return await fs$1.readdir(chunksDir);
+  } catch (error2) {
+    if (error2.code === "ENOENT")
+      return [];
+    throw error2;
+  }
+}
+function addChunkFilesByExtension(extMap, entries, sourceExtension, fileExtension = sourceExtension, include = () => true) {
+  for (const entry2 of entries) {
+    if (!entry2.endsWith(sourceExtension))
+      continue;
+    const file2 = entry2.slice(0, -sourceExtension.length);
+    if (include(file2))
+      extMap.set(file2, fileExtension);
+  }
+}
 async function listChunkFilesForStream(chunksDir, name2, tag) {
   assertSafeEntityId("streamName", name2);
-  const listPromises = [
-    listFilesByExtension(chunksDir, ".bin"),
-    listFilesByExtension(chunksDir, ".json")
-  ];
-  if (tag) {
-    listPromises.push(listFilesByExtension(chunksDir, `.${tag}.bin`));
-  }
-  const [binFiles, jsonFiles, ...taggedResults] = await Promise.all(listPromises);
-  const taggedBinFiles = taggedResults[0] ?? [];
+  const entries = await listChunkEntries(chunksDir);
   const extMap = /* @__PURE__ */ new Map();
-  for (const f2 of jsonFiles)
-    extMap.set(f2, ".json");
-  const tagSfx = tag ? `.${tag}` : "";
-  for (const f2 of binFiles) {
-    if (tag && f2.endsWith(tagSfx))
-      continue;
-    extMap.set(f2, ".bin");
+  addChunkFilesByExtension(extMap, entries, ".json");
+  addChunkFilesByExtension(extMap, entries, ".bin", ".bin", tag ? (file2) => !file2.endsWith(`.${tag}`) : void 0);
+  if (tag) {
+    const taggedExtension = `.${tag}.bin`;
+    addChunkFilesByExtension(extMap, entries, taggedExtension);
   }
-  for (const f2 of taggedBinFiles)
-    extMap.set(f2, `.${tag}.bin`);
   const files = [...extMap.keys()].filter((file2) => file2.startsWith(`${name2}-`)).sort();
   return { files, extMap };
 }
@@ -117757,7 +118188,7 @@ function createStreamer$1(basedir, tag) {
           const ext2 = fileExtMap.get(file2) ?? ".bin";
           const filePath = path$3.join(chunksDir, `${file2}${ext2}`);
           if (dataIndex < startIndex) {
-            if (isEofChunk(await readBuffer(filePath))) {
+            if (isEofByte(await readFirstByte(filePath))) {
               streamDone = true;
               break;
             }
@@ -117765,7 +118196,7 @@ function createStreamer$1(basedir, tag) {
             continue;
           }
           if (resultChunks.length >= limit) {
-            if (isEofChunk(await readBuffer(filePath))) {
+            if (isEofByte(await readFirstByte(filePath))) {
               streamDone = true;
             } else {
               dataIndex++;
@@ -117800,7 +118231,7 @@ function createStreamer$1(basedir, tag) {
         let dataCount = 0;
         for (const file2 of chunkFiles) {
           const ext2 = fileExtMap.get(file2) ?? ".bin";
-          if (isEofChunk(await readBuffer(path$3.join(chunksDir, `${file2}${ext2}`)))) {
+          if (isEofByte(await readFirstByte(path$3.join(chunksDir, `${file2}${ext2}`)))) {
             streamDone = true;
             break;
           }
@@ -117861,8 +118292,7 @@ function createStreamer$1(basedir, tag) {
             if (typeof startIndex === "number" && startIndex < 0 && chunkFiles.length > 0) {
               const lastFile = chunkFiles[chunkFiles.length - 1];
               const lastExt = fileExtMap.get(lastFile) ?? ".bin";
-              const lastChunk = deserializeChunk(await readBuffer(path$3.join(chunksDir, `${lastFile}${lastExt}`)));
-              if ((lastChunk == null ? void 0 : lastChunk.eof) === true) {
+              if (isEofByte(await readFirstByte(path$3.join(chunksDir, `${lastFile}${lastExt}`)))) {
                 dataChunkCount--;
               }
             }
@@ -118009,7 +118439,7 @@ function createLocalWorld(args) {
         const basedir = mergedConfig.dataDir;
         const hooksDir = path$3.join(basedir, "hooks");
         const taggedHookFiles = await listTaggedFiles(hooksDir, tag);
-        const { HookSchema: HookSchema2 } = await import("./index-B_Gtun0B.js");
+        const { HookSchema: HookSchema2 } = await import("./index-DltGJ3CV.js");
         await Promise.all(taggedHookFiles.map(async (hookFile) => {
           const hook = await readJSON(path$3.join(hooksDir, hookFile), HookSchema2);
           if (hook == null ? void 0 : hook.token) {
@@ -118161,8 +118591,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-CHxt50WW.js").then((n) => n.t),
-        await import("./token-98GkKm4t.js").then((n) => n.t)
+        await import("./token-util-DwTdh-aG.js").then((n) => n.t),
+        await import("./token-BNjLoJXz.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -123333,7 +123763,7 @@ var QueueClient = class {
     setApi(this, new ApiClient({ ...options, region }));
   }
 };
-const version = "5.0.0-beta.6";
+const version = "5.0.0-beta.8";
 const HTTP_DEBUG_ENABLED = typeof process !== "undefined" && typeof process.env.DEBUG === "string" && (process.env.DEBUG.includes("workflow:") || process.env.DEBUG === "*");
 function httpLog(method, endpoint, status, ms2) {
   if (HTTP_DEBUG_ENABLED) {
@@ -124003,6 +124433,26 @@ async function cancelWorkflowRunV1(id2, params, config2) {
     throw error2;
   }
 }
+const ExperimentalSetAttributesResponseSchema = object$1({
+  attributes: record(string$3(), string$3())
+});
+async function experimentalSetAttributes(runId, changes, options, config2) {
+  try {
+    const response2 = await makeRequest({
+      endpoint: `/v2/runs/${encodeURIComponent(runId)}/attributes`,
+      options: { method: "POST" },
+      data: (options == null ? void 0 : options.allowReservedAttributes) ? { changes, allowReservedAttributes: true } : { changes },
+      config: config2,
+      schema: ExperimentalSetAttributesResponseSchema
+    });
+    return { attributes: response2.attributes };
+  } catch (error2) {
+    if (error2 instanceof WorkflowWorldError && error2.status === 404) {
+      throw new WorkflowRunNotFoundError(runId);
+    }
+    throw error2;
+  }
+}
 const StepWireSchema = StepSchema.omit({
   error: true
 }).extend({
@@ -124441,7 +124891,8 @@ function createStorage(config2) {
     // Storage interface with namespaced methods
     runs: {
       get: ((id2, params) => getWorkflowRun(id2, params, config2)),
-      list: ((params) => listWorkflowRuns(params, config2))
+      list: ((params) => listWorkflowRuns(params, config2)),
+      experimentalSetAttributes: (runId, changes, options) => experimentalSetAttributes(runId, changes, options, config2)
     },
     steps: {
       get: ((runId, stepId, params) => getStep(runId, stepId, params, config2)),
@@ -124470,6 +124921,16 @@ const MAX_CHUNKS_PER_REQUEST = 1e3;
 function getStreamUrl(name2, runId, httpConfig) {
   return new URL(`${httpConfig.baseUrl}/v2/runs/${encodeURIComponent(runId)}/stream/${encodeURIComponent(name2)}`);
 }
+function createStreamRequestError(operation, url2, response2, text2) {
+  const context = [`PUT ${url2.origin}${url2.pathname}`];
+  for (const header of ["x-vercel-id", "x-vercel-error"]) {
+    const value = response2.headers.get(header);
+    if (value) {
+      context.push(`${header}=${value}`);
+    }
+  }
+  return new Error(`Stream ${operation} failed: HTTP ${response2.status} (${context.join("; ")}): ${text2}`);
+}
 function encodeMultiChunks(chunks) {
   const encoder2 = new TextEncoder();
   const binaryChunks = [];
@@ -124509,14 +124970,15 @@ function createStreamer(config2) {
       async write(runId, name2, chunk) {
         const resolvedRunId = await runId;
         const httpConfig = await getHttpConfig(config2);
-        const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+        const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+        const response2 = await fetch(url2, {
           method: "PUT",
           body: chunk,
           headers: httpConfig.headers
         });
         const text2 = await response2.text();
         if (!response2.ok) {
-          throw new Error(`Stream write failed: HTTP ${response2.status}: ${text2}`);
+          throw createStreamRequestError("write", url2, response2, text2);
         }
       },
       async writeMulti(runId, name2, chunks) {
@@ -124528,14 +124990,15 @@ function createStreamer(config2) {
         for (let i = 0; i < chunks.length; i += MAX_CHUNKS_PER_REQUEST) {
           const batch = chunks.slice(i, i + MAX_CHUNKS_PER_REQUEST);
           const body2 = encodeMultiChunks(batch);
-          const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+          const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+          const response2 = await fetch(url2, {
             method: "PUT",
             body: body2,
             headers: httpConfig.headers
           });
           const text2 = await response2.text();
           if (!response2.ok) {
-            throw new Error(`Stream write failed: HTTP ${response2.status}: ${text2}`);
+            throw createStreamRequestError("write", url2, response2, text2);
           }
         }
       },
@@ -124543,13 +125006,14 @@ function createStreamer(config2) {
         const resolvedRunId = await runId;
         const httpConfig = await getHttpConfig(config2);
         httpConfig.headers.set("X-Stream-Done", "true");
-        const response2 = await fetch(getStreamUrl(name2, resolvedRunId, httpConfig), {
+        const url2 = getStreamUrl(name2, resolvedRunId, httpConfig);
+        const response2 = await fetch(url2, {
           method: "PUT",
           headers: httpConfig.headers
         });
         const text2 = await response2.text();
         if (!response2.ok) {
-          throw new Error(`Stream close failed: HTTP ${response2.status}: ${text2}`);
+          throw createStreamRequestError("close", url2, response2, text2);
         }
       },
       async get(runId, name2, startIndex) {
@@ -151188,7 +151652,7 @@ const route4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   __proto__: null,
   loader
 }, Symbol.toStringTag, { value: "Module" }));
-const serverManifest = { "entry": { "module": "/assets/entry.client-DtOpLtMQ.js", "imports": ["/assets/index-BsV8i_Jn.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-DDT0W3fG.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/mermaid-3ZIDBTTL-PK-k2mDG.js"], "css": ["/assets/root-B527kgKt.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-B-DWbULo.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-CVUKAMV1.js", "/assets/mermaid-3ZIDBTTL-PK-k2mDG.js", "/assets/index-Byi8AWfe.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-COyTZwjr.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-CVUKAMV1.js", "/assets/mermaid-3ZIDBTTL-PK-k2mDG.js", "/assets/encryption-C69WMRfh.js", "/assets/index-Byi8AWfe.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-21016363.js", "version": "21016363", "sri": void 0 };
+const serverManifest = { "entry": { "module": "/assets/entry.client-DtOpLtMQ.js", "imports": ["/assets/index-BsV8i_Jn.js"], "css": [] }, "routes": { "root": { "id": "root", "parentId": void 0, "path": "", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": true, "module": "/assets/root-3uuTxUQN.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.js"], "css": ["/assets/root-BYtlAgHl.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/home": { "id": "routes/home", "parentId": "root", "path": void 0, "index": true, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/home-MRChHR_P.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DaYMiBT9.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.js", "/assets/index-Byi8AWfe.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/run-detail": { "id": "routes/run-detail", "parentId": "root", "path": "run/:runId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": true, "hasErrorBoundary": false, "module": "/assets/run-detail-8qGjUNCj.js", "imports": ["/assets/index-BsV8i_Jn.js", "/assets/workflow-graph-viewer-DaYMiBT9.js", "/assets/mermaid-3ZIDBTTL-3cOa-aZ5.js", "/assets/encryption-C69WMRfh.js", "/assets/index-Byi8AWfe.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DKxHcEOp.css"], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.rpc": { "id": "routes/api.rpc", "parentId": "root", "path": "api/rpc", "index": void 0, "caseSensitive": void 0, "hasAction": true, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.rpc-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 }, "routes/api.stream.$streamId": { "id": "routes/api.stream.$streamId", "parentId": "root", "path": "api/stream/:streamId", "index": void 0, "caseSensitive": void 0, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasClientMiddleware": false, "hasDefaultExport": false, "hasErrorBoundary": false, "module": "/assets/api.stream._streamId-l0sNRNKZ.js", "imports": [], "css": [], "clientActionModule": void 0, "clientLoaderModule": void 0, "clientMiddlewareModule": void 0, "hydrateFallbackModule": void 0 } }, "url": "/assets/manifest-b100514d.js", "version": "b100514d", "sri": void 0 };
 const assetsBuildDirectory = "build/client";
 const basename = "/";
 const future = { "unstable_optimizeDeps": false, "unstable_subResourceIntegrity": false, "unstable_trailingSlashAwareDataRequests": false, "unstable_previewServerPrerendering": false, "v8_middleware": false, "v8_splitRouteModules": false, "v8_viteEnvironmentApi": false };
@@ -151257,47 +151721,56 @@ const serverBuild = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   ssr
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  requireTokenUtil as A,
+  ATTRIBUTE_KEY_MAX_LENGTH as A,
   BaseEventSchema as B,
-  requireTokenError as C,
+  ulidToDate as C,
   DEFAULT_TIMESTAMP_THRESHOLD_FUTURE_MS as D,
   EVENT_DATA_REF_FIELDS as E,
-  serverBuild as F,
+  validateAttributeChanges as F,
+  validateAttributeKey as G,
   HookSchema as H,
-  Ks as K,
+  validateAttributeValue as I,
+  validateUlidTimestamp as J,
+  R as K,
   LegacySerializedDataSchemaV1 as L,
   MessageId as M,
   Nt as N,
+  Ks as O,
   PaginatedResponseSchema as P,
   QueuePayloadSchema as Q,
-  RunInputSchema as R,
+  RESERVED_ATTRIBUTE_KEY_PREFIX as R,
   SPEC_VERSION_CURRENT as S,
+  jsxRuntimeExports as T,
+  Qe as U,
   ValidQueueName as V,
   WaitSchema as W,
-  DEFAULT_TIMESTAMP_THRESHOLD_PAST_MS as a,
-  EventSchema as b,
-  EventTypeSchema as c,
-  HealthCheckPayloadSchema as d,
-  QueuePrefix as e,
-  SPEC_VERSION_LEGACY as f,
-  SPEC_VERSION_SUPPORTS_CBOR_QUEUE_TRANSPORT as g,
-  SPEC_VERSION_SUPPORTS_EVENT_SOURCING as h,
-  SerializedDataSchema as i,
-  StepInvokePayloadSchema as j,
-  StepSchema as k,
-  StepStatusSchema as l,
-  WaitStatusSchema as m,
-  WorkflowInvokePayloadSchema as n,
-  WorkflowRunBaseSchema as o,
-  WorkflowRunSchema as p,
-  WorkflowRunStatusSchema as q,
-  isLegacySpecVersion as r,
-  reenqueueActiveRuns as s,
-  requiresNewerWorld as t,
-  stripEventDataRefs as u,
-  ulidToDate as v,
-  validateUlidTimestamp as w,
-  R as x,
-  jsxRuntimeExports as y,
-  Qe as z
+  requireTokenUtil as X,
+  requireTokenError as Y,
+  serverBuild as Z,
+  ATTRIBUTE_MAX_PER_RUN as a,
+  ATTRIBUTE_VALUE_MAX_BYTES as b,
+  AttributeValidationError as c,
+  DEFAULT_TIMESTAMP_THRESHOLD_PAST_MS as d,
+  EventSchema as e,
+  EventTypeSchema as f,
+  HealthCheckPayloadSchema as g,
+  QueuePrefix as h,
+  RunInputSchema as i,
+  SPEC_VERSION_LEGACY as j,
+  SPEC_VERSION_SUPPORTS_CBOR_QUEUE_TRANSPORT as k,
+  SPEC_VERSION_SUPPORTS_EVENT_SOURCING as l,
+  SerializedDataSchema as m,
+  StepInvokePayloadSchema as n,
+  StepSchema as o,
+  StepStatusSchema as p,
+  WaitStatusSchema as q,
+  WorkflowInvokePayloadSchema as r,
+  WorkflowRunBaseSchema as s,
+  WorkflowRunSchema as t,
+  WorkflowRunStatusSchema as u,
+  applyAttributeChanges as v,
+  isLegacySpecVersion as w,
+  reenqueueActiveRuns as x,
+  requiresNewerWorld as y,
+  stripEventDataRefs as z
 };