@workflow/web 5.0.0-beta.21 → 5.0.0-beta.22

package/build/server/assets/{server-build-Bho0V9At.js → server-build-CbSfuKyC.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, _d, _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, getEncryptionKeyLazily_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-BKhDtt1l.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-DN3f8amN.js";
 import require$$0$4, { PassThrough } from "node:stream";
 import require$$0 from "util";
 import require$$1 from "crypto";
@@ -25755,7 +25755,7 @@ const arrow = (options, deps) => ({
   options: [options, deps]
 });
 var NAME$2 = "Arrow";
-var Arrow$4 = reactExports.forwardRef((props, forwardedRef) => {
+var Arrow$3 = reactExports.forwardRef((props, forwardedRef) => {
   const { children: children2, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Primitive$2.svg,
@@ -25770,8 +25770,8 @@ var Arrow$4 = reactExports.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$4.displayName = NAME$2;
-var Root$8 = Arrow$4;
+Arrow$3.displayName = NAME$2;
+var Root$8 = Arrow$3;
 function useSize$1(element2) {
   const [size2, setSize] = reactExports.useState(void 0);
   useLayoutEffect2$1(() => {
@@ -26076,7 +26076,7 @@ function getSideAndAlignFromPlacement$1(placement) {
 var Root2$5 = Popper$1;
 var Anchor$1 = PopperAnchor$1;
 var Content$4 = PopperContent$1;
-var Arrow$3 = PopperArrow$1;
+var Arrow$2 = PopperArrow$1;
 var PORTAL_NAME$9 = "Portal";
 var Portal$7 = reactExports.forwardRef((props, forwardedRef) => {
   var _a3;
@@ -26653,7 +26653,7 @@ var TooltipArrow = reactExports.forwardRef(
       ARROW_NAME$4,
       __scopeTooltip
     );
-    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow$3, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow$2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 TooltipArrow.displayName = ARROW_NAME$4;
@@ -26960,44 +26960,44 @@ const getGroupIdForArbitraryProperty = (className) => className.slice(1, -1).ind
 })();
 const createClassMap = (config2) => {
   const {
-    theme: theme3,
+    theme,
     classGroups
   } = config2;
-  return processClassGroups(classGroups, theme3);
+  return processClassGroups(classGroups, theme);
 };
-const processClassGroups = (classGroups, theme3) => {
+const processClassGroups = (classGroups, theme) => {
   const classMap = createClassPartObject();
   for (const classGroupId in classGroups) {
     const group = classGroups[classGroupId];
-    processClassesRecursively(group, classMap, classGroupId, theme3);
+    processClassesRecursively(group, classMap, classGroupId, theme);
   }
   return classMap;
 };
-const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme3) => {
+const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
   const len = classGroup.length;
   for (let i = 0; i < len; i++) {
     const classDefinition = classGroup[i];
-    processClassDefinition(classDefinition, classPartObject, classGroupId, theme3);
+    processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
   }
 };
-const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme3) => {
+const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
   if (typeof classDefinition === "string") {
     processStringDefinition(classDefinition, classPartObject, classGroupId);
     return;
   }
   if (typeof classDefinition === "function") {
-    processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme3);
+    processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
     return;
   }
-  processObjectDefinition(classDefinition, classPartObject, classGroupId, theme3);
+  processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
 };
 const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
   const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
   classPartObjectToEdit.classGroupId = classGroupId;
 };
-const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme3) => {
+const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
   if (isThemeGetter(classDefinition)) {
-    processClassesRecursively(classDefinition(theme3), classPartObject, classGroupId, theme3);
+    processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
     return;
   }
   if (classPartObject.validators === null) {
@@ -27005,12 +27005,12 @@ const processFunctionDefinition = (classDefinition, classPartObject, classGroupI
   }
   classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
 };
-const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme3) => {
+const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
   const entries = Object.entries(classDefinition);
   const len = entries.length;
   for (let i = 0; i < len; i++) {
     const [key, value] = entries[i];
-    processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme3);
+    processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
   }
 };
 const getPart = (classPartObject, path2) => {
@@ -27290,7 +27290,7 @@ const createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
 };
 const fallbackThemeArr = [];
 const fromTheme = (key) => {
-  const themeGetter = (theme3) => theme3[key] || fallbackThemeArr;
+  const themeGetter = (theme) => theme[key] || fallbackThemeArr;
   themeGetter.isThemeGetter = true;
   return themeGetter;
 };
@@ -49103,6 +49103,7 @@ const EventSchema = AllEventsSchema.and(object$1({
   runId: string$3(),
   eventId: string$3(),
   createdAt: date$2(),
+  occurredAt: date$2().optional(),
   specVersion: number$3().optional()
 }));
 const HookSchema = object$1({
@@ -49797,7 +49798,7 @@ function getWebRevivers() {
     URLSearchParams: (value) => new URLSearchParams(value === "." ? "" : value),
     // Web-specific overrides for class instances.
     // Create objects with a dynamically-named constructor so that
-    // react-inspector shows the class name (it reads constructor.name).
+    // the data inspector shows the class name (it reads constructor.name).
     Class: (value) => `<class:${extractClassName(value.classId)}>`,
     Instance: (value) => {
       const runRef = serializedInstanceToRef(value);
@@ -49838,7 +49839,7 @@ function createEncryptedMarker(data) {
   });
   return obj;
 }
-function isEncryptedMarker(value) {
+function isEncryptedMarker$1(value) {
   var _a3;
   return value !== null && typeof value === "object" && ((_a3 = value.constructor) == null ? void 0 : _a3.name) === ENCRYPTED_DISPLAY_NAME;
 }
@@ -49883,12 +49884,12 @@ function replaceEncryptedAndExpiredWithMarkers(resource) {
 async function hydrateResourceIOWithKey(resource, key) {
   const { hydrateDataWithKey: hydrateDataWithKey2 } = await Promise.resolve().then(() => serializationFormat);
   const { importKey: importKey2 } = await Promise.resolve().then(() => encryption);
-  const { ensureZstdDecoderRegistered } = await import("./zstd-browser-decoder-Bmj-2oQU.js");
+  const { ensureZstdDecoderRegistered } = await import("./zstd-browser-decoder-C5Jfor_W.js");
   ensureZstdDecoderRegistered();
   const cryptoKey = await importKey2(key);
   const revivers = getRevivers();
   async function decryptField(value, rev, k2) {
-    if (isEncryptedMarker(value)) {
+    if (isEncryptedMarker$1(value)) {
       const raw2 = value.__encryptedData;
       return hydrateDataWithKey2(raw2, rev, k2);
     }
@@ -49922,7 +49923,7 @@ function hasEncryptedFields(resource) {
     return false;
   const r2 = resource;
   for (const key of ["input", "output", "metadata", "error"]) {
-    if (isEncryptedMarker(r2[key]))
+    if (isEncryptedMarker$1(r2[key]))
       return true;
   }
   if (r2.eventData && typeof r2.eventData === "object") {
@@ -49930,7 +49931,7 @@ function hasEncryptedFields(resource) {
     const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
     const ed = r2.eventData;
     for (const key of refKeys) {
-      if (key in ed && isEncryptedMarker(ed[key]))
+      if (key in ed && isEncryptedMarker$1(ed[key]))
         return true;
     }
   }
@@ -50767,7 +50768,7 @@ const Toaster$1 = /* @__PURE__ */ ReactExports.forwardRef(function Toaster(props
   const { id: id2, invert, position: position2 = "bottom-right", hotkey = [
     "altKey",
     "KeyT"
-  ], expand: expand2, closeButton, className, offset: offset2, mobileOffset, theme: theme3 = "light", richColors, duration: duration2, style: style2, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = "Notifications" } = props;
+  ], expand: expand2, closeButton, className, offset: offset2, mobileOffset, theme = "light", richColors, duration: duration2, style: style2, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, containerAriaLabel = "Notifications" } = props;
   const [toasts, setToasts] = ReactExports.useState([]);
   const filteredToasts = ReactExports.useMemo(() => {
     if (id2) {
@@ -50789,7 +50790,7 @@ const Toaster$1 = /* @__PURE__ */ ReactExports.forwardRef(function Toaster(props
   const [heights, setHeights] = ReactExports.useState([]);
   const [expanded2, setExpanded] = ReactExports.useState(false);
   const [interacting, setInteracting] = ReactExports.useState(false);
-  const [actualTheme, setActualTheme] = ReactExports.useState(theme3 !== "system" ? theme3 : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
+  const [actualTheme, setActualTheme] = ReactExports.useState(theme !== "system" ? theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
   const listRef = ReactExports.useRef(null);
   const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
   const lastFocusedElementRef = ReactExports.useRef(null);
@@ -50840,11 +50841,11 @@ const Toaster$1 = /* @__PURE__ */ ReactExports.forwardRef(function Toaster(props
     toasts
   ]);
   ReactExports.useEffect(() => {
-    if (theme3 !== "system") {
-      setActualTheme(theme3);
+    if (theme !== "system") {
+      setActualTheme(theme);
       return;
     }
-    if (theme3 === "system") {
+    if (theme === "system") {
       if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
         setActualTheme("dark");
       } else {
@@ -50875,7 +50876,7 @@ const Toaster$1 = /* @__PURE__ */ ReactExports.forwardRef(function Toaster(props
       });
     }
   }, [
-    theme3
+    theme
   ]);
   ReactExports.useEffect(() => {
     if (toasts.length <= 1) {
@@ -51127,792 +51128,6 @@ const buttonVariants$1 = cva([
 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 });
 }
-var __create = Object.create;
-var __defProp2 = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf2 = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target2, all2) => {
-  for (var name2 in all2)
-    __defProp2(target2, name2, { get: all2[name2], enumerable: true });
-};
-var __copyProps = (to2, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to2, key) && key !== except)
-        __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to2;
-};
-var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf2(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  __defProp2(target2, "default", { value: mod, enumerable: true }),
-  mod
-));
-var require_is_object = __commonJS({
-  "node_modules/is-object/index.js"(exports$1, module) {
-    module.exports = function isObject2(x2) {
-      return typeof x2 === "object" && x2 !== null;
-    };
-  }
-});
-var require_is_window = __commonJS({
-  "node_modules/is-window/index.js"(exports$1, module) {
-    module.exports = function(obj) {
-      if (obj == null) {
-        return false;
-      }
-      var o = Object(obj);
-      return o === o.window;
-    };
-  }
-});
-var require_is_dom = __commonJS({
-  "node_modules/is-dom/index.js"(exports$1, module) {
-    var isObject2 = require_is_object();
-    var isWindow = require_is_window();
-    function isNode2(val) {
-      if (!isObject2(val) || !isWindow(window) || typeof window.Node !== "function") {
-        return false;
-      }
-      return typeof val.nodeType === "number" && typeof val.nodeName === "string";
-    }
-    module.exports = isNode2;
-  }
-});
-var themes_exports = {};
-__export(themes_exports, {
-  chromeDark: () => theme,
-  chromeLight: () => theme2
-});
-var theme = {
-  BASE_FONT_FAMILY: "Menlo, monospace",
-  BASE_FONT_SIZE: "11px",
-  BASE_LINE_HEIGHT: 1.2,
-  BASE_BACKGROUND_COLOR: "rgb(36, 36, 36)",
-  BASE_COLOR: "rgb(213, 213, 213)",
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  OBJECT_NAME_COLOR: "rgb(227, 110, 236)",
-  OBJECT_VALUE_NULL_COLOR: "rgb(127, 127, 127)",
-  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(127, 127, 127)",
-  OBJECT_VALUE_REGEXP_COLOR: "rgb(233, 63, 59)",
-  OBJECT_VALUE_STRING_COLOR: "rgb(233, 63, 59)",
-  OBJECT_VALUE_SYMBOL_COLOR: "rgb(233, 63, 59)",
-  OBJECT_VALUE_NUMBER_COLOR: "hsl(252, 100%, 75%)",
-  OBJECT_VALUE_BOOLEAN_COLOR: "hsl(252, 100%, 75%)",
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(85, 106, 242)",
-  HTML_TAG_COLOR: "rgb(93, 176, 215)",
-  HTML_TAGNAME_COLOR: "rgb(93, 176, 215)",
-  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
-  HTML_ATTRIBUTE_NAME_COLOR: "rgb(155, 187, 220)",
-  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(242, 151, 102)",
-  HTML_COMMENT_COLOR: "rgb(137, 137, 137)",
-  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
-  ARROW_COLOR: "rgb(145, 145, 145)",
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  ARROW_ANIMATION_DURATION: "0",
-  TREENODE_FONT_FAMILY: "Menlo, monospace",
-  TREENODE_FONT_SIZE: "11px",
-  TREENODE_LINE_HEIGHT: 1.2,
-  TREENODE_PADDING_LEFT: 12,
-  TABLE_BORDER_COLOR: "rgb(85, 85, 85)",
-  TABLE_TH_BACKGROUND_COLOR: "rgb(44, 44, 44)",
-  TABLE_TH_HOVER_COLOR: "rgb(48, 48, 48)",
-  TABLE_SORT_ICON_COLOR: "black",
-  //'rgb(48, 57, 66)',
-  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(51, 139, 255, 0.0980392) 50%, rgba(51, 139, 255, 0.0980392))",
-  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
-};
-var theme2 = {
-  BASE_FONT_FAMILY: "Menlo, monospace",
-  BASE_FONT_SIZE: "11px",
-  BASE_LINE_HEIGHT: 1.2,
-  BASE_BACKGROUND_COLOR: "white",
-  BASE_COLOR: "black",
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  OBJECT_NAME_COLOR: "rgb(136, 19, 145)",
-  OBJECT_VALUE_NULL_COLOR: "rgb(128, 128, 128)",
-  OBJECT_VALUE_UNDEFINED_COLOR: "rgb(128, 128, 128)",
-  OBJECT_VALUE_REGEXP_COLOR: "rgb(196, 26, 22)",
-  OBJECT_VALUE_STRING_COLOR: "rgb(196, 26, 22)",
-  OBJECT_VALUE_SYMBOL_COLOR: "rgb(196, 26, 22)",
-  OBJECT_VALUE_NUMBER_COLOR: "rgb(28, 0, 207)",
-  OBJECT_VALUE_BOOLEAN_COLOR: "rgb(28, 0, 207)",
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "rgb(13, 34, 170)",
-  HTML_TAG_COLOR: "rgb(168, 148, 166)",
-  HTML_TAGNAME_COLOR: "rgb(136, 18, 128)",
-  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
-  HTML_ATTRIBUTE_NAME_COLOR: "rgb(153, 69, 0)",
-  HTML_ATTRIBUTE_VALUE_COLOR: "rgb(26, 26, 166)",
-  HTML_COMMENT_COLOR: "rgb(35, 110, 37)",
-  HTML_DOCTYPE_COLOR: "rgb(192, 192, 192)",
-  ARROW_COLOR: "#6e6e6e",
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  ARROW_ANIMATION_DURATION: "0",
-  TREENODE_FONT_FAMILY: "Menlo, monospace",
-  TREENODE_FONT_SIZE: "11px",
-  TREENODE_LINE_HEIGHT: 1.2,
-  TREENODE_PADDING_LEFT: 12,
-  TABLE_BORDER_COLOR: "#aaa",
-  TABLE_TH_BACKGROUND_COLOR: "#eee",
-  TABLE_TH_HOVER_COLOR: "hsla(0, 0%, 90%, 1)",
-  TABLE_SORT_ICON_COLOR: "#6e6e6e",
-  TABLE_DATA_BACKGROUND_IMAGE: "linear-gradient(to bottom, white, white 50%, rgb(234, 243, 255) 50%, rgb(234, 243, 255))",
-  TABLE_DATA_BACKGROUND_SIZE: "128px 32px"
-};
-var ExpandedPathsContext = reactExports.createContext([{}, () => {
-}]);
-var unselectable = {
-  WebkitTouchCallout: "none",
-  WebkitUserSelect: "none",
-  KhtmlUserSelect: "none",
-  MozUserSelect: "none",
-  msUserSelect: "none",
-  OUserSelect: "none",
-  userSelect: "none"
-};
-var createTheme = (theme3) => ({
-  DOMNodePreview: {
-    htmlOpenTag: {
-      base: {
-        color: theme3.HTML_TAG_COLOR
-      },
-      tagName: {
-        color: theme3.HTML_TAGNAME_COLOR,
-        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
-      },
-      htmlAttributeName: {
-        color: theme3.HTML_ATTRIBUTE_NAME_COLOR
-      },
-      htmlAttributeValue: {
-        color: theme3.HTML_ATTRIBUTE_VALUE_COLOR
-      }
-    },
-    htmlCloseTag: {
-      base: {
-        color: theme3.HTML_TAG_COLOR
-      },
-      offsetLeft: {
-        /* hack: offset placeholder */
-        marginLeft: -theme3.TREENODE_PADDING_LEFT
-      },
-      tagName: {
-        color: theme3.HTML_TAGNAME_COLOR,
-        textTransform: theme3.HTML_TAGNAME_TEXT_TRANSFORM
-      }
-    },
-    htmlComment: {
-      color: theme3.HTML_COMMENT_COLOR
-    },
-    htmlDoctype: {
-      color: theme3.HTML_DOCTYPE_COLOR
-    }
-  },
-  ObjectPreview: {
-    objectDescription: {
-      fontStyle: "italic"
-    },
-    preview: {
-      fontStyle: "italic"
-    },
-    arrayMaxProperties: theme3.OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES,
-    objectMaxProperties: theme3.OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES
-  },
-  ObjectName: {
-    base: {
-      color: theme3.OBJECT_NAME_COLOR
-    },
-    dimmed: {
-      opacity: 0.6
-    }
-  },
-  ObjectValue: {
-    objectValueNull: {
-      color: theme3.OBJECT_VALUE_NULL_COLOR
-    },
-    objectValueUndefined: {
-      color: theme3.OBJECT_VALUE_UNDEFINED_COLOR
-    },
-    objectValueRegExp: {
-      color: theme3.OBJECT_VALUE_REGEXP_COLOR
-    },
-    objectValueString: {
-      color: theme3.OBJECT_VALUE_STRING_COLOR
-    },
-    objectValueSymbol: {
-      color: theme3.OBJECT_VALUE_SYMBOL_COLOR
-    },
-    objectValueNumber: {
-      color: theme3.OBJECT_VALUE_NUMBER_COLOR
-    },
-    objectValueBoolean: {
-      color: theme3.OBJECT_VALUE_BOOLEAN_COLOR
-    },
-    objectValueFunctionPrefix: {
-      color: theme3.OBJECT_VALUE_FUNCTION_PREFIX_COLOR,
-      fontStyle: "italic"
-    },
-    objectValueFunctionName: {
-      fontStyle: "italic"
-    }
-  },
-  TreeView: {
-    treeViewOutline: {
-      padding: 0,
-      margin: 0,
-      listStyleType: "none"
-    }
-  },
-  TreeNode: {
-    treeNodeBase: {
-      color: theme3.BASE_COLOR,
-      backgroundColor: theme3.BASE_BACKGROUND_COLOR,
-      lineHeight: theme3.TREENODE_LINE_HEIGHT,
-      cursor: "default",
-      boxSizing: "border-box",
-      listStyle: "none",
-      fontFamily: theme3.TREENODE_FONT_FAMILY,
-      fontSize: theme3.TREENODE_FONT_SIZE
-    },
-    treeNodePreviewContainer: {},
-    treeNodePlaceholder: {
-      whiteSpace: "pre",
-      fontSize: theme3.ARROW_FONT_SIZE,
-      marginRight: theme3.ARROW_MARGIN_RIGHT,
-      ...unselectable
-    },
-    treeNodeArrow: {
-      base: {
-        color: theme3.ARROW_COLOR,
-        display: "inline-block",
-        // lineHeight: '14px',
-        fontSize: theme3.ARROW_FONT_SIZE,
-        marginRight: theme3.ARROW_MARGIN_RIGHT,
-        ...parseFloat(theme3.ARROW_ANIMATION_DURATION) > 0 ? {
-          transition: `transform ${theme3.ARROW_ANIMATION_DURATION} ease 0s`
-        } : {},
-        ...unselectable
-      },
-      expanded: {
-        WebkitTransform: "rotateZ(90deg)",
-        MozTransform: "rotateZ(90deg)",
-        transform: "rotateZ(90deg)"
-      },
-      collapsed: {
-        WebkitTransform: "rotateZ(0deg)",
-        MozTransform: "rotateZ(0deg)",
-        transform: "rotateZ(0deg)"
-      }
-    },
-    treeNodeChildNodesContainer: {
-      margin: 0,
-      // reset user-agent style
-      paddingLeft: theme3.TREENODE_PADDING_LEFT
-    }
-  },
-  TableInspector: {
-    base: {
-      color: theme3.BASE_COLOR,
-      position: "relative",
-      border: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
-      fontFamily: theme3.BASE_FONT_FAMILY,
-      fontSize: theme3.BASE_FONT_SIZE,
-      lineHeight: "120%",
-      boxSizing: "border-box",
-      cursor: "default"
-    }
-  },
-  TableInspectorHeaderContainer: {
-    base: {
-      top: 0,
-      height: "17px",
-      left: 0,
-      right: 0,
-      overflowX: "hidden"
-    },
-    table: {
-      tableLayout: "fixed",
-      borderSpacing: 0,
-      borderCollapse: "separate",
-      height: "100%",
-      width: "100%",
-      margin: 0
-    }
-  },
-  TableInspectorDataContainer: {
-    tr: {
-      display: "table-row"
-    },
-    td: {
-      boxSizing: "border-box",
-      border: "none",
-      // prevent overrides
-      height: "16px",
-      // /* 0.5 * table.background-size height */
-      verticalAlign: "top",
-      padding: "1px 4px",
-      WebkitUserSelect: "text",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      lineHeight: "14px"
-    },
-    div: {
-      position: "static",
-      top: "17px",
-      bottom: 0,
-      overflowY: "overlay",
-      transform: "translateZ(0)",
-      left: 0,
-      right: 0,
-      overflowX: "hidden"
-    },
-    table: {
-      positon: "static",
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-      borderTop: "0 none transparent",
-      margin: 0,
-      // prevent user agent stylesheet overrides
-      backgroundImage: theme3.TABLE_DATA_BACKGROUND_IMAGE,
-      backgroundSize: theme3.TABLE_DATA_BACKGROUND_SIZE,
-      tableLayout: "fixed",
-      // table
-      borderSpacing: 0,
-      borderCollapse: "separate",
-      // height: '100%',
-      width: "100%",
-      fontSize: theme3.BASE_FONT_SIZE,
-      lineHeight: "120%"
-    }
-  },
-  TableInspectorTH: {
-    base: {
-      position: "relative",
-      // anchor for sort icon container
-      height: "auto",
-      textAlign: "left",
-      backgroundColor: theme3.TABLE_TH_BACKGROUND_COLOR,
-      borderBottom: `1px solid ${theme3.TABLE_BORDER_COLOR}`,
-      fontWeight: "normal",
-      verticalAlign: "middle",
-      padding: "0 4px",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      lineHeight: "14px",
-      ":hover": {
-        backgroundColor: theme3.TABLE_TH_HOVER_COLOR
-      }
-    },
-    div: {
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      // prevent user agent stylesheet overrides
-      fontSize: theme3.BASE_FONT_SIZE,
-      lineHeight: "120%"
-    }
-  },
-  TableInspectorLeftBorder: {
-    none: {
-      borderLeft: "none"
-    },
-    solid: {
-      borderLeft: `1px solid ${theme3.TABLE_BORDER_COLOR}`
-    }
-  },
-  TableInspectorSortIcon: {
-    display: "block",
-    marginRight: 3,
-    // 4,
-    width: 8,
-    height: 7,
-    marginTop: -7,
-    color: theme3.TABLE_SORT_ICON_COLOR,
-    fontSize: 12,
-    // lineHeight: 14
-    ...unselectable
-  }
-});
-var DEFAULT_THEME_NAME = "chromeLight";
-var ThemeContext = reactExports.createContext(createTheme(themes_exports[DEFAULT_THEME_NAME]));
-var useStyles = (baseStylesKey) => {
-  const themeStyles = reactExports.useContext(ThemeContext);
-  return themeStyles[baseStylesKey];
-};
-var themeAcceptor = (WrappedComponent) => {
-  const ThemeAcceptor = ({ theme: theme3 = DEFAULT_THEME_NAME, ...restProps }) => {
-    const themeStyles = reactExports.useMemo(() => {
-      switch (Object.prototype.toString.call(theme3)) {
-        case "[object String]":
-          return createTheme(themes_exports[theme3]);
-        case "[object Object]":
-          return createTheme(theme3);
-        default:
-          return createTheme(themes_exports[DEFAULT_THEME_NAME]);
-      }
-    }, [theme3]);
-    return /* @__PURE__ */ ReactExports.createElement(ThemeContext.Provider, { value: themeStyles }, /* @__PURE__ */ ReactExports.createElement(WrappedComponent, { ...restProps }));
-  };
-  return ThemeAcceptor;
-};
-var Arrow$2 = ({ expanded: expanded2, styles: styles2 }) => /* @__PURE__ */ ReactExports.createElement(
-  "span",
-  {
-    style: {
-      ...styles2.base,
-      ...expanded2 ? styles2.expanded : styles2.collapsed
-    }
-  },
-  "▶"
-);
-var TreeNode = reactExports.memo((props) => {
-  props = {
-    expanded: true,
-    nodeRenderer: ({ name: name2 }) => /* @__PURE__ */ ReactExports.createElement("span", null, name2),
-    onClick: () => {
-    },
-    shouldShowArrow: false,
-    shouldShowPlaceholder: true,
-    ...props
-  };
-  const { expanded: expanded2, onClick, children: children2, nodeRenderer, title, shouldShowArrow, shouldShowPlaceholder: shouldShowPlaceholder2 } = props;
-  const styles2 = useStyles("TreeNode");
-  const NodeRenderer2 = nodeRenderer;
-  return /* @__PURE__ */ ReactExports.createElement("li", { "aria-expanded": expanded2, role: "treeitem", style: styles2.treeNodeBase, title }, /* @__PURE__ */ ReactExports.createElement("div", { style: styles2.treeNodePreviewContainer, onClick }, shouldShowArrow || reactExports.Children.count(children2) > 0 ? /* @__PURE__ */ ReactExports.createElement(Arrow$2, { expanded: expanded2, styles: styles2.treeNodeArrow }) : shouldShowPlaceholder2 && /* @__PURE__ */ ReactExports.createElement("span", { style: styles2.treeNodePlaceholder }, " "), /* @__PURE__ */ ReactExports.createElement(NodeRenderer2, { ...props })), /* @__PURE__ */ ReactExports.createElement("ol", { role: "group", style: styles2.treeNodeChildNodesContainer }, expanded2 ? children2 : void 0));
-});
-var DEFAULT_ROOT_PATH = "$";
-var WILDCARD = "*";
-function hasChildNodes(data, dataIterator) {
-  return !dataIterator(data).next().done;
-}
-var wildcardPathsFromLevel = (level) => {
-  return Array.from(
-    { length: level },
-    (_2, i) => [DEFAULT_ROOT_PATH].concat(Array.from({ length: i }, () => "*")).join(".")
-  );
-};
-var getExpandedPaths = (data, dataIterator, expandPaths, expandLevel, prevExpandedPaths) => {
-  const wildcardPaths = [].concat(wildcardPathsFromLevel(expandLevel)).concat(expandPaths).filter((path2) => typeof path2 === "string");
-  const expandedPaths = [];
-  wildcardPaths.forEach((wildcardPath) => {
-    const keyPaths = wildcardPath.split(".");
-    const populatePaths = (curData, curPath, depth) => {
-      if (depth === keyPaths.length) {
-        expandedPaths.push(curPath);
-        return;
-      }
-      const key = keyPaths[depth];
-      if (depth === 0) {
-        if (hasChildNodes(curData, dataIterator) && (key === DEFAULT_ROOT_PATH || key === WILDCARD)) {
-          populatePaths(curData, DEFAULT_ROOT_PATH, depth + 1);
-        }
-      } else {
-        if (key === WILDCARD) {
-          for (const { name: name2, data: data2 } of dataIterator(curData)) {
-            if (hasChildNodes(data2, dataIterator)) {
-              populatePaths(data2, `${curPath}.${name2}`, depth + 1);
-            }
-          }
-        } else {
-          const value = curData[key];
-          if (hasChildNodes(value, dataIterator)) {
-            populatePaths(value, `${curPath}.${key}`, depth + 1);
-          }
-        }
-      }
-    };
-    populatePaths(data, "", 0);
-  });
-  return expandedPaths.reduce(
-    (obj, path2) => {
-      obj[path2] = true;
-      return obj;
-    },
-    { ...prevExpandedPaths }
-  );
-};
-var ConnectedTreeNode = reactExports.memo((props) => {
-  const { data, dataIterator, path: path2, depth, nodeRenderer } = props;
-  const [expandedPaths, setExpandedPaths] = reactExports.useContext(ExpandedPathsContext);
-  const nodeHasChildNodes = hasChildNodes(data, dataIterator);
-  const expanded2 = !!expandedPaths[path2];
-  const handleClick = reactExports.useCallback(
-    () => nodeHasChildNodes && setExpandedPaths((prevExpandedPaths) => ({
-      ...prevExpandedPaths,
-      [path2]: !expanded2
-    })),
-    [nodeHasChildNodes, setExpandedPaths, path2, expanded2]
-  );
-  return /* @__PURE__ */ ReactExports.createElement(
-    TreeNode,
-    {
-      expanded: expanded2,
-      onClick: handleClick,
-      shouldShowArrow: nodeHasChildNodes,
-      shouldShowPlaceholder: depth > 0,
-      nodeRenderer,
-      ...props
-    },
-    // only render if the node is expanded
-    expanded2 ? [...dataIterator(data)].map(({ name: name2, data: data2, ...renderNodeProps }) => {
-      return /* @__PURE__ */ ReactExports.createElement(
-        ConnectedTreeNode,
-        {
-          name: name2,
-          data: data2,
-          depth: depth + 1,
-          path: `${path2}.${name2}`,
-          key: name2,
-          dataIterator,
-          nodeRenderer,
-          ...renderNodeProps
-        }
-      );
-    }) : null
-  );
-});
-var TreeView = reactExports.memo(({ name: name2, data, dataIterator, nodeRenderer, expandPaths, expandLevel }) => {
-  const styles2 = useStyles("TreeView");
-  const stateAndSetter = reactExports.useState({});
-  const [, setExpandedPaths] = stateAndSetter;
-  reactExports.useLayoutEffect(
-    () => setExpandedPaths(
-      (prevExpandedPaths) => getExpandedPaths(data, dataIterator, expandPaths, expandLevel, prevExpandedPaths)
-    ),
-    [data, dataIterator, expandPaths, expandLevel]
-  );
-  return /* @__PURE__ */ ReactExports.createElement(ExpandedPathsContext.Provider, { value: stateAndSetter }, /* @__PURE__ */ ReactExports.createElement("ol", { role: "tree", style: styles2.treeViewOutline }, /* @__PURE__ */ ReactExports.createElement(
-    ConnectedTreeNode,
-    {
-      name: name2,
-      data,
-      dataIterator,
-      depth: 0,
-      path: DEFAULT_ROOT_PATH,
-      nodeRenderer
-    }
-  )));
-});
-var ObjectName = ({ name: name2, dimmed = false, styles: styles2 = {} }) => {
-  const themeStyles = useStyles("ObjectName");
-  const appliedStyles = {
-    ...themeStyles.base,
-    ...dimmed ? themeStyles["dimmed"] : {},
-    ...styles2
-  };
-  return /* @__PURE__ */ ReactExports.createElement("span", { style: appliedStyles }, name2);
-};
-var ObjectValue = ({ object: object2, styles: styles2 }) => {
-  const themeStyles = useStyles("ObjectValue");
-  const mkStyle = (key) => ({ ...themeStyles[key], ...styles2 });
-  switch (typeof object2) {
-    case "bigint":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueNumber") }, String(object2), "n");
-    case "number":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueNumber") }, String(object2));
-    case "string":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueString") }, '"', object2, '"');
-    case "boolean":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueBoolean") }, String(object2));
-    case "undefined":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueUndefined") }, "undefined");
-    case "object":
-      if (object2 === null) {
-        return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueNull") }, "null");
-      }
-      if (object2 instanceof Date) {
-        return /* @__PURE__ */ ReactExports.createElement("span", null, object2.toString());
-      }
-      if (object2 instanceof RegExp) {
-        return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueRegExp") }, object2.toString());
-      }
-      if (Array.isArray(object2)) {
-        return /* @__PURE__ */ ReactExports.createElement("span", null, `Array(${object2.length})`);
-      }
-      if (!object2.constructor) {
-        return /* @__PURE__ */ ReactExports.createElement("span", null, "Object");
-      }
-      if (typeof object2.constructor.isBuffer === "function" && object2.constructor.isBuffer(object2)) {
-        return /* @__PURE__ */ ReactExports.createElement("span", null, `Buffer[${object2.length}]`);
-      }
-      return /* @__PURE__ */ ReactExports.createElement("span", null, object2.constructor.name);
-    case "function":
-      return /* @__PURE__ */ ReactExports.createElement("span", null, /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueFunctionPrefix") }, "ƒ "), /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueFunctionName") }, object2.name, "()"));
-    case "symbol":
-      return /* @__PURE__ */ ReactExports.createElement("span", { style: mkStyle("objectValueSymbol") }, object2.toString());
-    default:
-      return /* @__PURE__ */ ReactExports.createElement("span", null);
-  }
-};
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
-var propertyIsEnumerable = Object.prototype.propertyIsEnumerable;
-function getPropertyValue(object2, propertyName) {
-  const propertyDescriptor = Object.getOwnPropertyDescriptor(object2, propertyName);
-  if (propertyDescriptor.get) {
-    try {
-      return propertyDescriptor.get();
-    } catch {
-      return propertyDescriptor.get;
-    }
-  }
-  return object2[propertyName];
-}
-function intersperse(arr, sep2) {
-  if (arr.length === 0) {
-    return [];
-  }
-  return arr.slice(1).reduce((xs, x2) => xs.concat([sep2, x2]), [arr[0]]);
-}
-var ObjectPreview = ({ data }) => {
-  const styles2 = useStyles("ObjectPreview");
-  const object2 = data;
-  if (typeof object2 !== "object" || object2 === null || object2 instanceof Date || object2 instanceof RegExp) {
-    return /* @__PURE__ */ ReactExports.createElement(ObjectValue, { object: object2 });
-  }
-  if (Array.isArray(object2)) {
-    const maxProperties = styles2.arrayMaxProperties;
-    const previewArray = object2.slice(0, maxProperties).map((element2, index2) => /* @__PURE__ */ ReactExports.createElement(ObjectValue, { key: index2, object: element2 }));
-    if (object2.length > maxProperties) {
-      previewArray.push(/* @__PURE__ */ ReactExports.createElement("span", { key: "ellipsis" }, "…"));
-    }
-    const arrayLength = object2.length;
-    return /* @__PURE__ */ ReactExports.createElement(ReactExports.Fragment, null, /* @__PURE__ */ ReactExports.createElement("span", { style: styles2.objectDescription }, arrayLength === 0 ? `` : `(${arrayLength}) `), /* @__PURE__ */ ReactExports.createElement("span", { style: styles2.preview }, "[", intersperse(previewArray, ", "), "]"));
-  } else {
-    const maxProperties = styles2.objectMaxProperties;
-    const propertyNodes = [];
-    for (const propertyName in object2) {
-      if (hasOwnProperty$1.call(object2, propertyName)) {
-        let ellipsis;
-        if (propertyNodes.length === maxProperties - 1 && Object.keys(object2).length > maxProperties) {
-          ellipsis = /* @__PURE__ */ ReactExports.createElement("span", { key: "ellipsis" }, "…");
-        }
-        const propertyValue2 = getPropertyValue(object2, propertyName);
-        propertyNodes.push(
-          /* @__PURE__ */ ReactExports.createElement("span", { key: propertyName }, /* @__PURE__ */ ReactExports.createElement(ObjectName, { name: propertyName || `""` }), ": ", /* @__PURE__ */ ReactExports.createElement(ObjectValue, { object: propertyValue2 }), ellipsis)
-        );
-        if (ellipsis) break;
-      }
-    }
-    const objectConstructorName = object2.constructor ? object2.constructor.name : "Object";
-    return /* @__PURE__ */ ReactExports.createElement(ReactExports.Fragment, null, /* @__PURE__ */ ReactExports.createElement("span", { style: styles2.objectDescription }, objectConstructorName === "Object" ? "" : `${objectConstructorName} `), /* @__PURE__ */ ReactExports.createElement("span", { style: styles2.preview }, "{", intersperse(propertyNodes, ", "), "}"));
-  }
-};
-var ObjectRootLabel = ({ name: name2, data }) => {
-  if (typeof name2 === "string") {
-    return /* @__PURE__ */ ReactExports.createElement("span", null, /* @__PURE__ */ ReactExports.createElement(ObjectName, { name: name2 }), /* @__PURE__ */ ReactExports.createElement("span", null, ": "), /* @__PURE__ */ ReactExports.createElement(ObjectPreview, { data }));
-  } else {
-    return /* @__PURE__ */ ReactExports.createElement(ObjectPreview, { data });
-  }
-};
-var ObjectLabel = ({ name: name2, data, isNonenumerable = false }) => {
-  const object2 = data;
-  return /* @__PURE__ */ ReactExports.createElement("span", null, typeof name2 === "string" ? /* @__PURE__ */ ReactExports.createElement(ObjectName, { name: name2, dimmed: isNonenumerable }) : /* @__PURE__ */ ReactExports.createElement(ObjectPreview, { data: name2 }), /* @__PURE__ */ ReactExports.createElement("span", null, ": "), /* @__PURE__ */ ReactExports.createElement(ObjectValue, { object: object2 }));
-};
-var createIterator = (showNonenumerable, sortObjectKeys) => {
-  const objectIterator = function* (data) {
-    const shouldIterate = typeof data === "object" && data !== null || typeof data === "function";
-    if (!shouldIterate) return;
-    const dataIsArray = Array.isArray(data);
-    if (!dataIsArray && data[Symbol.iterator]) {
-      let i = 0;
-      for (const entry2 of data) {
-        if (Array.isArray(entry2) && entry2.length === 2) {
-          const [k2, v2] = entry2;
-          yield {
-            name: k2,
-            data: v2
-          };
-        } else {
-          yield {
-            name: i.toString(),
-            data: entry2
-          };
-        }
-        i++;
-      }
-    } else {
-      const keys2 = Object.getOwnPropertyNames(data);
-      if (sortObjectKeys === true && !dataIsArray) {
-        keys2.sort();
-      } else if (typeof sortObjectKeys === "function") {
-        keys2.sort(sortObjectKeys);
-      }
-      for (const propertyName of keys2) {
-        if (propertyIsEnumerable.call(data, propertyName)) {
-          const propertyValue2 = getPropertyValue(data, propertyName);
-          yield {
-            name: propertyName || `""`,
-            data: propertyValue2
-          };
-        } else if (showNonenumerable) {
-          let propertyValue2;
-          try {
-            propertyValue2 = getPropertyValue(data, propertyName);
-          } catch (e) {
-          }
-          if (propertyValue2 !== void 0) {
-            yield {
-              name: propertyName,
-              data: propertyValue2,
-              isNonenumerable: true
-            };
-          }
-        }
-      }
-      if (showNonenumerable && data !== Object.prototype) {
-        yield {
-          name: "__proto__",
-          data: Object.getPrototypeOf(data),
-          isNonenumerable: true
-        };
-      }
-    }
-  };
-  return objectIterator;
-};
-var defaultNodeRenderer = ({ depth, name: name2, data, isNonenumerable }) => depth === 0 ? /* @__PURE__ */ ReactExports.createElement(ObjectRootLabel, { name: name2, data }) : /* @__PURE__ */ ReactExports.createElement(ObjectLabel, { name: name2, data, isNonenumerable });
-var ObjectInspector = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
-  const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
-  const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
-  return /* @__PURE__ */ ReactExports.createElement(TreeView, { nodeRenderer: renderer, dataIterator, ...treeViewProps });
-};
-var themedObjectInspector = themeAcceptor(ObjectInspector);
-__toESM(require_is_dom());
-const useDarkMode = () => {
-  const [isDark, setIsDark] = reactExports.useState(() => {
-    if (typeof document === "undefined")
-      return false;
-    return document.documentElement.classList.contains("dark");
-  });
-  reactExports.useEffect(() => {
-    if (typeof document === "undefined")
-      return;
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"]
-    });
-    return () => observer.disconnect();
-  }, []);
-  return isDark;
-};
 function summarizeArrayBufferView(value) {
   const ta2 = value;
   const name2 = ta2.constructor.name;
@@ -51935,64 +51150,92 @@ function formatArrayBufferViewForDisplay(value) {
     return { text: summarizeArrayBufferView(value) };
   }
 }
-const inspectorThemeExtendedLight = {
-  OBJECT_VALUE_DATE_COLOR: "var(--ds-pink-900)"
-};
-const inspectorThemeExtendedDark = {
-  OBJECT_VALUE_DATE_COLOR: "var(--ds-pink-900)"
-};
-const shared = {
-  BASE_FONT_SIZE: "11px",
-  BASE_LINE_HEIGHT: 1.4,
-  BASE_BACKGROUND_COLOR: "transparent",
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
-  HTML_TAGNAME_TEXT_TRANSFORM: "lowercase",
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  TREENODE_FONT_FAMILY: "var(--font-mono)",
-  TREENODE_FONT_SIZE: "11px",
-  TREENODE_LINE_HEIGHT: 1.4,
-  TREENODE_PADDING_LEFT: 12,
-  TABLE_DATA_BACKGROUND_IMAGE: "none",
-  TABLE_DATA_BACKGROUND_SIZE: "0"
-};
-const geistTheme = {
-  ...shared,
-  // Base text
-  BASE_COLOR: "var(--ds-gray-1000)",
-  // Property names — default foreground (matches JSON key color in Geist Shiki)
-  OBJECT_NAME_COLOR: "var(--ds-gray-1000)",
-  // Strings & symbols — green
-  OBJECT_VALUE_STRING_COLOR: "var(--ds-green-900)",
-  OBJECT_VALUE_SYMBOL_COLOR: "var(--ds-green-900)",
-  // Numbers & booleans — green (Geist JSON tokens)
-  OBJECT_VALUE_NUMBER_COLOR: "var(--ds-green-900)",
-  OBJECT_VALUE_BOOLEAN_COLOR: "var(--ds-green-900)",
-  // null — muted foreground
-  OBJECT_VALUE_NULL_COLOR: "var(--ds-gray-900)",
-  // undefined — muted foreground
-  OBJECT_VALUE_UNDEFINED_COLOR: "var(--ds-gray-900)",
-  // RegExp — purple
-  OBJECT_VALUE_REGEXP_COLOR: "var(--ds-purple-900)",
-  // Functions — purple
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: "var(--ds-purple-900)",
-  // HTML (rarely used here, kept consistent with the palette)
-  HTML_TAG_COLOR: "var(--ds-gray-900)",
-  HTML_TAGNAME_COLOR: "var(--ds-blue-900)",
-  HTML_ATTRIBUTE_NAME_COLOR: "var(--ds-amber-900)",
-  HTML_ATTRIBUTE_VALUE_COLOR: "var(--ds-green-900)",
-  HTML_COMMENT_COLOR: "var(--ds-gray-700)",
-  HTML_DOCTYPE_COLOR: "var(--ds-gray-700)",
-  // Structural
-  ARROW_COLOR: "var(--ds-gray-700)",
-  TABLE_BORDER_COLOR: "var(--ds-gray-300)",
-  TABLE_TH_BACKGROUND_COLOR: "var(--ds-gray-100)",
-  TABLE_TH_HOVER_COLOR: "var(--ds-gray-200)",
-  TABLE_SORT_ICON_COLOR: "var(--ds-gray-700)"
-};
-const inspectorThemeLight = geistTheme;
-const inspectorThemeDark = geistTheme;
+const CLS = {
+  container: "wf-json-view",
+  child: "wf-json-child",
+  childFields: "wf-json-child-fields",
+  label: "wf-json-label",
+  clickableLabel: "wf-json-clickable-label",
+  punctuation: "wf-json-punctuation",
+  className: "wf-json-classname",
+  expandIcon: "wf-json-expand-icon",
+  collapseIcon: "wf-json-collapse-icon",
+  collapsedContent: "wf-json-collapsed-content",
+  string: "wf-json-string",
+  number: "wf-json-number",
+  boolean: "wf-json-boolean",
+  null: "wf-json-null",
+  undefined: "wf-json-undefined",
+  date: "wf-json-date",
+  regexp: "wf-json-regexp"
+};
+const JSON_VIEW_STYLES = `
+.${CLS.container} {
+  display: inline;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--ds-gray-1000);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.${CLS.container} > .${CLS.child} > ul { padding-left: 0ch; }
+.${CLS.container} > .${CLS.child} { padding-left: 1.5ch; }
+.${CLS.child} { display: block; margin: 0; padding: 0 0 0 2ch; }
+.${CLS.child}:hover:not(:has(.${CLS.child}:hover)):not(:has(.${CLS.child} ~ .${CLS.child})) {
+  background-color: var(--ds-gray-alpha-100);
+  border-radius: 4px;
+}
+.${CLS.childFields} { margin: 0; padding: 0; list-style: none; }
+.${CLS.label}, .${CLS.clickableLabel} {
+  color: var(--ds-pink-900);
+  font-weight: 400;
+  margin-right: 1ch;
+}
+.${CLS.clickableLabel} { cursor: pointer; }
+.${CLS.punctuation} { color: var(--ds-gray-1000); }
+.${CLS.className} { font-style: italic; color: var(--ds-gray-900); margin-right: 1ch; }
+.${CLS.string} { color: var(--ds-green-900); }
+.${CLS.number} { color: var(--ds-blue-900); }
+.${CLS.boolean} { color: var(--ds-amber-900); }
+.${CLS.null}, .${CLS.undefined} { color: var(--ds-gray-900); }
+.${CLS.date} { color: var(--ds-pink-900); }
+.${CLS.regexp} { color: var(--ds-purple-900); }
+.${CLS.container} > .${CLS.child} > .${CLS.expandIcon},
+.${CLS.container} > .${CLS.child} > .${CLS.collapseIcon} { margin-left: -1.5ch; }
+.${CLS.expandIcon}, .${CLS.collapseIcon} {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  vertical-align: baseline;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 0ch;
+  margin-left: -1.5ch;
+  color: var(--ds-gray-500);
+  user-select: none;
+  outline: none;
+}
+.${CLS.expandIcon}::after {
+  content: '\\25B8';
+  margin-right: 0.5ch;
+  transform: translateY(-0.5px);
+  display: block;
+}
+.${CLS.collapseIcon}::after { content: '\\25BE'; margin-right: 0.5ch; }
+.${CLS.expandIcon}:hover, .${CLS.collapseIcon}:hover,
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.expandIcon},
+.${CLS.child}:has(> .${CLS.clickableLabel}:hover) > .${CLS.collapseIcon} {
+  color: var(--ds-gray-1000);
+}
+.${CLS.collapsedContent} { color: var(--ds-gray-900); }
+.${CLS.collapsedContent}::after { content: '...'; }
+`;
 const KEYFRAMES = `@keyframes wf-spinner-fade{0%{opacity:1}100%{opacity:.15}}`;
 function Spinner({ size: size2 = 14, color: color5 }) {
   const config2 = size2 <= 12 ? {
@@ -52090,6 +51333,10 @@ function isBytesDisplay(value) {
 function isClassInstanceRef(value) {
   return value !== null && typeof value === "object" && "__type" in value && value.__type === CLASS_INSTANCE_REF_TYPE;
 }
+function isEncryptedMarker(value) {
+  var _a3;
+  return value !== null && typeof value === "object" && ((_a3 = value.constructor) == null ? void 0 : _a3.name) === ENCRYPTED_DISPLAY_NAME;
+}
 const StreamClickContext = reactExports.createContext(void 0);
 const DecryptClickContext = reactExports.createContext(void 0);
 const RunClickContext = reactExports.createContext(void 0);
@@ -52132,7 +51379,6 @@ function RunRefInline({ runRef }) {
     onRunClick == null ? void 0 : onRunClick(runRef.runId);
   }, title: `View run: ${runRef.runId}`, children: jsxRuntimeExports.jsx("span", { children: runRef.runId }) });
 }
-const ExtendedThemeContext = reactExports.createContext(inspectorThemeExtendedLight);
 function DecodedBytesChunk({ decodedText, source }) {
   const [selectedView, setSelectedView] = reactExports.useState("decoded");
   const parsed = parseChunkData(decodedText);
@@ -52149,45 +51395,204 @@ function DecodedBytesInspector({ decodedText, source }) {
   const [expanded2, setExpanded] = reactExports.useState(false);
   return jsxRuntimeExports.jsxs("div", { className: "font-mono", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "flex max-w-full items-start gap-1 text-left", style: { color: "var(--ds-gray-1000)" }, onClick: () => setExpanded((value) => !value), title: `${source.type} decoded as ${source.encoding.toUpperCase()} text`, children: [jsxRuntimeExports.jsx("span", { className: "select-none", style: { color: "var(--ds-gray-700)" }, children: expanded2 ? "▼" : "▶" }), jsxRuntimeExports.jsx("span", { className: "min-w-0 break-words", children: source.rawSummary })] }), expanded2 && jsxRuntimeExports.jsxs("div", { className: "mt-1 pl-5", children: [jsxRuntimeExports.jsx("span", { style: { color: "var(--ds-gray-700)" }, children: "decoded: " }), jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-green-900)" }, children: JSON.stringify(decodedText) })] })] });
 }
-function BytesDisplayLabel({ name: name2, display }) {
-  return jsxRuntimeExports.jsxs("div", { className: "inline-block min-w-0 align-top", children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), display.decodedFrom ? jsxRuntimeExports.jsx(DecodedBytesChunk, { decodedText: display.text, source: display.decodedFrom }) : jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: display.text })] });
+function BytesDisplayValue({ display }) {
+  if (display.decodedFrom) {
+    return jsxRuntimeExports.jsx(DecodedBytesChunk, { decodedText: display.text, source: display.decodedFrom });
+  }
+  return jsxRuntimeExports.jsx("span", { className: "whitespace-pre-wrap break-words", style: { color: "var(--ds-gray-1000)" }, children: display.text });
+}
+function formatField(field) {
+  return field === "" ? '""' : field;
 }
-function NodeRenderer$1({ depth, name: name2, data, isNonenumerable }) {
+function describeContainer(value) {
   var _a3;
-  const extendedTheme = reactExports.useContext(ExtendedThemeContext);
-  if (isBytesDisplay(data)) {
-    return jsxRuntimeExports.jsx(BytesDisplayLabel, { name: name2, display: data });
+  if (Array.isArray(value)) {
+    return {
+      entries: value.map((item) => [void 0, item]),
+      open: "[",
+      close: "]"
+    };
   }
-  if (data !== null && typeof data === "object" && ((_a3 = data.constructor) == null ? void 0 : _a3.name) === ENCRYPTED_DISPLAY_NAME) {
-    const label = jsxRuntimeExports.jsx(EncryptedInlineLabel, {});
-    if (depth === 0) {
-      return label;
-    }
-    return jsxRuntimeExports.jsxs("span", { children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), label] });
+  if (value instanceof Map) {
+    return {
+      entries: Array.from(value.entries(), ([key, val]) => [
+        String(key),
+        val
+      ]),
+      open: "{",
+      close: "}",
+      prefix: "Map"
+    };
   }
-  if (isStreamRef(data)) {
-    return jsxRuntimeExports.jsxs("span", { children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), jsxRuntimeExports.jsx(StreamRefInline, { streamRef: data })] });
+  if (value instanceof Set) {
+    return {
+      entries: Array.from(value.values(), (item) => [void 0, item]),
+      open: "[",
+      close: "]",
+      prefix: "Set"
+    };
   }
-  if (isRunRef(data)) {
-    return jsxRuntimeExports.jsxs("span", { children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), jsxRuntimeExports.jsx(RunRefInline, { runRef: data })] });
+  if (value !== null && typeof value === "object") {
+    const name2 = (_a3 = value.constructor) == null ? void 0 : _a3.name;
+    return {
+      entries: Object.entries(value),
+      open: "{",
+      close: "}",
+      prefix: name2 && name2 !== "Object" ? name2 : void 0
+    };
   }
-  if (isClassInstanceRef(data)) {
-    if (depth === 0) {
-      return jsxRuntimeExports.jsx(ObjectRootLabel, { name: data.className, data: data.data });
+  return null;
+}
+function describePrimitive(value) {
+  if (value === null)
+    return { text: "null", cls: CLS.null };
+  if (value === void 0)
+    return { text: "undefined", cls: CLS.undefined };
+  if (typeof value === "string" || value instanceof String) {
+    return { text: `"${String(value)}"`, cls: CLS.string };
+  }
+  if (typeof value === "boolean" || value instanceof Boolean) {
+    return { text: String(value), cls: CLS.boolean };
+  }
+  if (typeof value === "number" || value instanceof Number) {
+    return { text: String(value), cls: CLS.number };
+  }
+  if (typeof value === "bigint") {
+    return { text: `${value.toString()}n`, cls: CLS.number };
+  }
+  return { text: String(value), cls: CLS.punctuation };
+}
+function Label$2({ field, clickable }) {
+  if (field === void 0)
+    return null;
+  return jsxRuntimeExports.jsx("span", { className: clickable ? CLS.clickableLabel : CLS.label, children: `${formatField(field)}:` });
+}
+function Comma({ isLast }) {
+  if (isLast)
+    return null;
+  return jsxRuntimeExports.jsx("span", { className: CLS.punctuation, children: "," });
+}
+function LeafRow({ field, isLast, children: children2 }) {
+  return jsxRuntimeExports.jsxs("div", { className: CLS.child, role: "treeitem", tabIndex: -1, children: [jsxRuntimeExports.jsx(Label$2, { field }), children2, jsxRuntimeExports.jsx(Comma, { isLast })] });
+}
+function PrimitiveValue({ field, value, isLast }) {
+  const { text: text2, cls } = describePrimitive(value);
+  return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx("span", { className: cls, children: text2 }) });
+}
+function EmptyContainer({ field, prefix, open, close, isLast }) {
+  return jsxRuntimeExports.jsxs("div", { className: CLS.child, role: "treeitem", tabIndex: -1, children: [jsxRuntimeExports.jsx(Label$2, { field }), prefix ? jsxRuntimeExports.jsx("span", { className: CLS.className, children: prefix }) : null, jsxRuntimeExports.jsx("span", { className: CLS.punctuation, children: open }), jsxRuntimeExports.jsx("span", { className: CLS.punctuation, children: close }), jsxRuntimeExports.jsx(Comma, { isLast })] });
+}
+function focusExpander(button, outerRef) {
+  var _a3;
+  const previous2 = (_a3 = outerRef.current) == null ? void 0 : _a3.querySelector('[data-json-expander][tabindex="0"]');
+  if (previous2)
+    previous2.tabIndex = -1;
+  button.tabIndex = 0;
+  button.focus();
+}
+function moveExpanderFocus(outerRef, direction) {
+  const root2 = outerRef.current;
+  if (!root2)
+    return;
+  const buttons = root2.querySelectorAll("[data-json-expander]");
+  let current = -1;
+  for (let i = 0; i < buttons.length; i += 1) {
+    if (buttons[i].tabIndex === 0) {
+      current = i;
+      break;
     }
-    return jsxRuntimeExports.jsxs("span", { children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), jsxRuntimeExports.jsxs("span", { style: { fontStyle: "italic" }, children: [data.className, " "] }), jsxRuntimeExports.jsx(ObjectValue, { object: data.data })] });
   }
-  if (data instanceof Date) {
-    const dateStr = data.toISOString();
-    if (depth === 0) {
-      return jsxRuntimeExports.jsx("span", { style: { color: extendedTheme.OBJECT_VALUE_DATE_COLOR }, children: dateStr });
+  if (current < 0)
+    return;
+  const next2 = (current + direction + buttons.length) % buttons.length;
+  buttons[current].tabIndex = -1;
+  buttons[next2].tabIndex = 0;
+  buttons[next2].focus();
+}
+function ExpandableContainer({ field, entries, open, close, prefix, ctx, isLast }) {
+  const { level, shouldExpand, outerRef } = ctx;
+  const [expanded2, setExpanded] = reactExports.useState(() => shouldExpand(level));
+  const rowRef = reactExports.useRef(null);
+  const contentsId = reactExports.useId();
+  if (entries.length === 0) {
+    return jsxRuntimeExports.jsx(EmptyContainer, { field, prefix, open, close, isLast });
+  }
+  const toggle = () => {
+    setExpanded((value) => !value);
+    if (rowRef.current)
+      focusExpander(rowRef.current, outerRef);
+  };
+  const onClick = (event) => {
+    if (event.target.closest('[role="treeitem"]') !== event.currentTarget) {
+      return;
+    }
+    toggle();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      setExpanded(true);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      setExpanded(false);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveExpanderFocus(outerRef, -1);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveExpanderFocus(outerRef, 1);
     }
-    return jsxRuntimeExports.jsxs("span", { children: [name2 != null && jsxRuntimeExports.jsx(ObjectName, { name: name2 }), name2 != null && jsxRuntimeExports.jsx("span", { children: ": " }), jsxRuntimeExports.jsx("span", { style: { color: extendedTheme.OBJECT_VALUE_DATE_COLOR }, children: dateStr })] });
+  };
+  const lastIndex = entries.length - 1;
+  return (
+    // The treeitem row is the focusable, keyboard-operable control (roving
+    // tabindex + arrow keys); the disclosure marker below is purely decorative.
+    jsxRuntimeExports.jsxs("div", { className: CLS.child, role: "treeitem", "aria-expanded": expanded2, "aria-controls": expanded2 ? contentsId : void 0, "data-json-expander": true, ref: rowRef, tabIndex: level === 0 ? 0 : -1, onClick, onKeyDown, children: [jsxRuntimeExports.jsx("span", { className: expanded2 ? CLS.collapseIcon : CLS.expandIcon, "aria-hidden": "true" }), field !== void 0 && jsxRuntimeExports.jsx("span", { className: CLS.clickableLabel, children: `${formatField(field)}:` }), prefix ? jsxRuntimeExports.jsx("span", { className: CLS.className, children: prefix }) : null, jsxRuntimeExports.jsx("span", { className: CLS.punctuation, children: open }), expanded2 ? (
+      // biome-ignore lint/a11y/useSemanticElements: ARIA tree group is the correct role here
+      jsxRuntimeExports.jsx("ul", { id: contentsId, className: CLS.childFields, role: "group", children: entries.map(([childField, childValue], index2) => jsxRuntimeExports.jsx(DataRender, { field: childField, value: childValue, isLast: index2 === lastIndex, ctx: { ...ctx, level: level + 1 } }, childField ?? index2)) })
+    ) : jsxRuntimeExports.jsx("span", { className: CLS.collapsedContent, "aria-hidden": "true" }), jsxRuntimeExports.jsx("span", { className: CLS.punctuation, children: close }), jsxRuntimeExports.jsx(Comma, { isLast })] })
+  );
+}
+function DataRender({ field, value, isLast, ctx }) {
+  if (isBytesDisplay(value)) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx(BytesDisplayValue, { display: value }) });
+  }
+  if (isEncryptedMarker(value)) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx(EncryptedInlineLabel, {}) });
+  }
+  if (isStreamRef(value)) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx(StreamRefInline, { streamRef: value }) });
+  }
+  if (isRunRef(value)) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx(RunRefInline, { runRef: value }) });
+  }
+  if (value instanceof Date) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx("span", { className: CLS.date, children: value.toISOString() }) });
   }
-  if (depth === 0) {
-    return jsxRuntimeExports.jsx(ObjectRootLabel, { name: name2, data });
+  if (value instanceof RegExp) {
+    return jsxRuntimeExports.jsx(LeafRow, { field, isLast, children: jsxRuntimeExports.jsx("span", { className: CLS.regexp, children: value.toString() }) });
   }
-  return jsxRuntimeExports.jsx(ObjectLabel, { name: name2, data, isNonenumerable });
+  if (isClassInstanceRef(value)) {
+    return jsxRuntimeExports.jsx(ClassInstanceNode, { field, instance: value, isLast, ctx });
+  }
+  const container = describeContainer(value);
+  if (container) {
+    return jsxRuntimeExports.jsx(ExpandableContainer, { field, entries: container.entries, open: container.open, close: container.close, prefix: container.prefix, ctx, isLast });
+  }
+  return jsxRuntimeExports.jsx(PrimitiveValue, { field, value, isLast, ctx });
+}
+function ClassInstanceNode({ field, instance, isLast, ctx }) {
+  const container = describeContainer(instance.data);
+  if (container) {
+    return jsxRuntimeExports.jsx(ExpandableContainer, { field, entries: container.entries, open: container.open, close: container.close, prefix: instance.className, ctx, isLast });
+  }
+  const { text: text2, cls } = describePrimitive(instance.data);
+  return jsxRuntimeExports.jsxs(LeafRow, { field, isLast, children: [jsxRuntimeExports.jsx("span", { className: CLS.className, children: instance.className }), jsxRuntimeExports.jsx("span", { className: cls, children: text2 })] });
+}
+function JsonTree({ data, name: name2, expandLevel }) {
+  const outerRef = reactExports.useRef(null);
+  const shouldExpand = reactExports.useMemo(() => (level) => level < expandLevel, [expandLevel]);
+  return jsxRuntimeExports.jsx("div", { ref: outerRef, className: CLS.container, role: "tree", "aria-label": "JSON view", children: jsxRuntimeExports.jsx(DataRender, { field: name2, value: data, isLast: true, ctx: { level: 0, shouldExpand, outerRef } }) });
 }
 function makeOpaqueRef(ref) {
   const opaque = /* @__PURE__ */ Object.create(null);
@@ -52243,32 +51648,17 @@ function collapseRefs(data) {
 function DataInspector({ data, expandLevel = 2, name: name2, onStreamClick, onRunClick, onDecrypt, isDecrypting = false }) {
   const collapsedData = reactExports.useMemo(() => collapseRefs(data), [data]);
   const stableData = useStableInspectorData(collapsedData);
-  const [initialExpandLevel, setInitialExpandLevel] = reactExports.useState(expandLevel);
-  const isDark = useDarkMode();
-  const extendedTheme = isDark ? inspectorThemeExtendedDark : inspectorThemeExtendedLight;
-  reactExports.useEffect(() => {
-    setInitialExpandLevel(0);
-  }, []);
-  const content2 = jsxRuntimeExports.jsx(ExtendedThemeContext.Provider, { value: extendedTheme, children: jsxRuntimeExports.jsx(themedObjectInspector, {
-    data: stableData,
-    name: name2,
-    // @ts-expect-error react-inspector accepts theme objects at runtime despite
-    // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
-    theme: isDark ? inspectorThemeDark : inspectorThemeLight,
-    expandLevel: initialExpandLevel,
-    nodeRenderer: NodeRenderer$1
-  }) });
-  let wrapped = content2;
+  let content2 = jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { href: "wf-json-view", precedence: "default", children: JSON_VIEW_STYLES }), jsxRuntimeExports.jsx(JsonTree, { data: stableData, name: name2, expandLevel })] });
   if (onStreamClick) {
-    wrapped = jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: wrapped });
+    content2 = jsxRuntimeExports.jsx(StreamClickContext.Provider, { value: onStreamClick, children: content2 });
   }
   if (onRunClick) {
-    wrapped = jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: wrapped });
+    content2 = jsxRuntimeExports.jsx(RunClickContext.Provider, { value: onRunClick, children: content2 });
   }
   if (onDecrypt) {
-    wrapped = jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: { onDecrypt, isDecrypting }, children: wrapped });
+    content2 = jsxRuntimeExports.jsx(DecryptClickContext.Provider, { value: { onDecrypt, isDecrypting }, children: content2 });
   }
-  return wrapped;
+  return content2;
 }
 function useStableInspectorData(next2) {
   const previousRef = reactExports.useRef(next2);
@@ -53471,7 +52861,7 @@ function hasEncryptedValues(data) {
   if (!data || typeof data !== "object")
     return false;
   for (const val of Object.values(data)) {
-    if (isEncryptedMarker(val))
+    if (isEncryptedMarker$1(val))
       return true;
   }
   return false;
@@ -83236,7 +82626,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-Bbohhhvu.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-Bn21Jt9E.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 }) })] }) });
@@ -83558,7 +82948,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-GUOonG4P.js").then((e) => ({ default: e.Mermaid }))), Kn = /language-([^\s]+)/;
+var Jn = reactExports.lazy(() => import("./mermaid-3ZIDBTTL-BDx4F1TF.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;
@@ -84194,6 +83584,7 @@ const attributeOrder = [
   "projectId",
   "environment",
   "executionContext",
+  "occurredAt",
   "createdAt",
   "startedAt",
   "updatedAt",
@@ -84229,6 +83620,7 @@ const attributeDisplayNames = {
   deploymentId: "Deployment ID",
   specVersion: "Spec Version",
   workflowCoreVersion: "@workflow/core version",
+  occurredAt: "Occurred",
   createdAt: "Created",
   startedAt: "Started",
   updatedAt: "Updated",
@@ -84323,6 +83715,7 @@ const attributeToDisplayFn = {
     return jsxRuntimeExports.jsx(RunAttributesCard, { attributes: value });
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  occurredAt: timestampWithTooltipOrNull,
   createdAt: timestampWithTooltipOrNull,
   startedAt: timestampWithTooltipOrNull,
   updatedAt: (_value) => null,
@@ -84334,14 +83727,14 @@ const attributeToDisplayFn = {
   metadata: (value) => {
     if (!hasDisplayContent(value))
       return null;
-    if (isEncryptedMarker(value))
+    if (isEncryptedMarker$1(value))
       return jsxRuntimeExports.jsx(EncryptedDataBlock, {});
     if (isExpiredMarker(value))
       return jsxRuntimeExports.jsx(ExpiredFieldBlock, {});
     return JsonBlock(value);
   },
   input: (value, context) => {
-    if (isEncryptedMarker(value)) {
+    if (isEncryptedMarker$1(value)) {
       return jsxRuntimeExports.jsx(DetailCard, { summary: "Input", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
@@ -84368,7 +83761,7 @@ const attributeToDisplayFn = {
     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)) {
+    if (isEncryptedMarker$1(value)) {
       return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (!hasDisplayContent(value))
@@ -84378,7 +83771,7 @@ const attributeToDisplayFn = {
     return jsxRuntimeExports.jsx(DetailCard, { summary: "Output", children: JsonBlock(value) });
   },
   error: (value) => {
-    if (isEncryptedMarker(value)) {
+    if (isEncryptedMarker$1(value)) {
       return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
@@ -84391,7 +83784,7 @@ const attributeToDisplayFn = {
     return jsxRuntimeExports.jsx(DetailCard, { summary: "Error", defaultOpen: true, children: JsonBlock(value) });
   },
   eventData: (value) => {
-    if (isEncryptedMarker(value)) {
+    if (isEncryptedMarker$1(value)) {
       return jsxRuntimeExports.jsx(DetailCard, { summary: "Event Data", defaultOpen: true, children: jsxRuntimeExports.jsx(EncryptedFieldBlock, {}) });
     }
     if (isExpiredMarker(value))
@@ -85059,7 +84452,7 @@ const eventFailed = "_eventFailed_1ytrx_1432";
 const eventRetrying = "_eventRetrying_1ytrx_1441";
 const eventHook = "_eventHook_1ytrx_1450";
 const eventDefault = "_eventDefault_1ytrx_1459";
-const styles$2 = {
+const styles$3 = {
   traceNode,
   childRow,
   spanNode,
@@ -85529,15 +84922,15 @@ const SEGMENT_LABELS = {
 function SegmentLayer({ segments, spanDuration: spanDuration2 }) {
   if (segments.length === 0)
     return null;
-  return jsxRuntimeExports.jsx("div", { className: styles$2.segmentLayer, children: segments.map((seg, i) => {
-    const className = styles$2[SEGMENT_CLASS_MAP[seg.status]];
+  return jsxRuntimeExports.jsx("div", { className: styles$3.segmentLayer, children: segments.map((seg, i) => {
+    const className = styles$3[SEGMENT_CLASS_MAP[seg.status]];
     const segDuration = (seg.endFraction - seg.startFraction) * spanDuration2;
     const label = SEGMENT_LABELS[seg.status];
     const style2 = {
       left: `${seg.startFraction * 100}%`,
       width: `${(seg.endFraction - seg.startFraction) * 100}%`
     };
-    return jsxRuntimeExports.jsx("div", { className: `${styles$2.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
+    return jsxRuntimeExports.jsx("div", { className: `${styles$3.segment} ${String(className)}`, style: style2, title: label ? `${label} ${formatDuration(segDuration)}` : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`);
   }) });
 }
 function getSegmentTags(segments, spanDuration2) {
@@ -85566,7 +84959,7 @@ function TextContent({ node: node2, layout, durationMs, segmentTags }) {
     return null;
   }
   const showTags = segmentTags && segmentTags.length > 0 && (layout.isHovered || layout.width > 200);
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles$2.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles$2.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles$2.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles$2.spanDuration, children: duration2 }) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("span", { className: styles$3.spanName, children: [node2.label || node2.span.name, showTags ? segmentTags.map((tag, i) => jsxRuntimeExports.jsxs("span", { className: styles$3.segmentTag, children: [" · ", tag.label, " ", tag.duration] }, i)) : null] }), layout.isHuge ? jsxRuntimeExports.jsx("span", { className: styles$3.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? jsxRuntimeExports.jsx("span", { className: styles$3.spanDuration, children: duration2 }) : null] });
 }
 function DefaultContent({ node: node2, layout }) {
   return jsxRuntimeExports.jsx(TextContent, { node: node2, layout });
@@ -85689,8 +85082,8 @@ function getSpanLayout(resourceType, node2, root2, scale, scrollSnapshotRef) {
 }
 const getSpanColorClassName = (node2) => {
   if (node2.isVercel)
-    return String(styles$2.colorVercel);
-  return String(styles$2[`color${node2.resourceIndex % 5}`]);
+    return String(styles$3.colorVercel);
+  return String(styles$3[`color${node2.resourceIndex % 5}`]);
 };
 function getTerminalTimestamp(resourceType, node2) {
   const events2 = node2.events;
@@ -85833,7 +85226,7 @@ const SpanComponent = reactExports.memo(function SpanComponent2({ node: node2, r
     return () => cancelAnimationFrame(rafId);
   }, [isLive, canonicalStartTime, scale]);
   const renderNode = segmentNode;
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles$2.spanNode, layout.isHuge && styles$2.huge, layout.isSmall && styles$2.small, layout.isExpanded && styles$2.xHover, node2.isHighlighted ? styles$2.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$2.unlit, customClassName, hasSegments2 && styles$2.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("button", { "aria-label": `${span.name} - ${duration2}`, className: clsx(styles$3.spanNode, layout.isHuge && styles$3.huge, layout.isSmall && styles$3.small, layout.isExpanded && styles$3.xHover, node2.isHighlighted ? styles$3.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$3.unlit, customClassName, hasSegments2 && styles$3.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root2.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node2.isSelected ? "" : void 0, ref, style: getSpanStyle(layout, segmentNode, root2, scale), type: "button", children: jsxRuntimeExports.jsx(SpanContent, { durationMs, resourceType, node: renderNode, layout }) }), segmentNode.events && !layout.isSmall ? segmentNode.events.map((x2) => jsxRuntimeExports.jsx(SpanEventComponent, { customSpanEventClassNameFunc, event: x2, node: segmentNode, root: root2, scale, asBoundary: isWorkflowSpan }, x2.key)) : null] });
 });
 const BOUNDARY_LABELS = {
   step_started: "Started",
@@ -85892,17 +85285,17 @@ const SpanEventComponent = reactExports.memo(function SpanEventComponent2({ even
   const isLeftAligned = node2.duration <= 0 || (event.timestamp - node2.startTime) / node2.duration < 0.5;
   const customClassName = customSpanEventClassNameFunc ? customSpanEventClassNameFunc(event) : "";
   return jsxRuntimeExports.jsxs("div", { title: phaseDuration ? `${displayLabel} ${timestamp}
-${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles$2.spanNodeEvent, customClassName, asBoundary && styles$2.boundaryMarker, node2.isHighlighted ? styles$2.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$2.unlit), "data-hovered": event.isHovered, ref, style: {
+${phaseLabel} ${phaseDuration}` : `${displayLabel} ${timestamp}`, className: clsx(styles$3.spanNodeEvent, customClassName, asBoundary && styles$3.boundaryMarker, node2.isHighlighted ? styles$3.colorHighlight : getSpanColorClassName(node2), node2.isHighlighted === false && styles$3.unlit), "data-hovered": event.isHovered, ref, style: {
     left,
     top
-  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles$2.hoverInfo, isLeftAligned ? styles$2.alignStart : styles$2.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$2.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles$2.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$2.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles$2.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$2.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles$2.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles$2.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles$2.eventDiamond })] });
+  }, children: [jsxRuntimeExports.jsx("div", { className: clsx(styles$3.hoverInfo, isLeftAligned ? styles$3.alignStart : styles$3.alignEnd), children: asBoundary ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$3.eventName, children: displayLabel }), jsxRuntimeExports.jsx("span", { className: styles$3.eventTimestamp, children: timestamp }), phaseDuration ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$3.eventName, children: phaseLabel }), jsxRuntimeExports.jsx("span", { className: styles$3.eventTimestamp, children: phaseDuration })] }) : null] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: styles$3.eventName, children: name2 }), jsxRuntimeExports.jsx("span", { className: styles$3.eventTimestamp, children: timestamp })] }) }), asBoundary ? jsxRuntimeExports.jsx("div", { className: styles$3.boundaryLine }) : jsxRuntimeExports.jsx("div", { className: styles$3.eventDiamond })] });
 });
 const colorTokenMap = {
   "gray-700": "var(--ds-gray-700)",
   "gray-900": "var(--ds-gray-900)"
 };
 function IconChevronDown({ size: size2 = 16 }) {
-  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles$2.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
+  return jsxRuntimeExports.jsxs("svg", { width: size2, height: size2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, className: styles$3.detailHeadingIcon, children: [jsxRuntimeExports.jsx("title", { children: "Chevron Down" }), jsxRuntimeExports.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] });
 }
 function IconExternalSmall({ size: size2 = 16, color: color5 = "gray-900" }) {
   const style2 = { color: colorTokenMap[color5] || color5 };
@@ -85917,7 +85310,7 @@ function Link(props) {
   return jsxRuntimeExports.jsx("a", { className, href, ...rest, children: children2 });
 }
 function Skeleton$1({ width, height, rounded }) {
-  return jsxRuntimeExports.jsx("span", { className: clsx(styles$2.skeleton, rounded && styles$2.skeletonRounded), style: { width, height }, "aria-hidden": true });
+  return jsxRuntimeExports.jsx("span", { className: clsx(styles$3.skeleton, rounded && styles$3.skeletonRounded), style: { width, height }, "aria-hidden": true });
 }
 const EXPANDED_STORAGE_KEY_PREFIX = "vc-trace-span-exp:";
 function DetailGroup({ name: name2, className = "", children: children2 }) {
@@ -85933,7 +85326,7 @@ function DetailGroup({ name: name2, className = "", children: children2 }) {
       return willBeExpanded;
     });
   }, [name2]);
-  return jsxRuntimeExports.jsxs("div", { className: clsx(styles$2.detailGroup, isExpanded ? styles$2.expanded : styles$2.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles$2.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
+  return jsxRuntimeExports.jsxs("div", { className: clsx(styles$3.detailGroup, isExpanded ? styles$3.expanded : styles$3.collapsed, className), children: [jsxRuntimeExports.jsxs("button", { className: styles$3.detailHeading, onClick: toggleExpanded, type: "button", children: [jsxRuntimeExports.jsx("span", { children: name2 }), jsxRuntimeExports.jsx(IconChevronDown, {})] }), isExpanded ? children2 : null] });
 }
 reactExports.memo(function EntrySpanLinks({ getQuickLinks, span }) {
   const links = getQuickLinks(span);
@@ -85957,7 +85350,7 @@ function usePromise(promise2) {
 }
 function EntrySpanLink({ name: name2, link: linkPromise }) {
   const link2 = usePromise(linkPromise);
-  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles$2.spanDetailPanelAttribute, styles$2.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles$2.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles$2.spanDetailPanelAttributeValue, styles$2.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton$1, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton$1, { height: 18, rounded: true, width: 18 })] }) })] });
+  return jsxRuntimeExports.jsxs(Link, { as: link2 ? void 0 : "span", className: clsx(styles$3.spanDetailPanelAttribute, styles$3.spanDetailPanelQuickLink), href: (link2 == null ? void 0 : link2.href) || "", children: [jsxRuntimeExports.jsx("span", { className: styles$3.spanDetailPanelAttributeKey, children: name2 }), jsxRuntimeExports.jsx("span", { className: clsx(styles$3.spanDetailPanelAttributeValue, styles$3.spanDetailPanelQuickLinkLabel), children: link2 ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [link2.label, link2.icon || jsxRuntimeExports.jsx(IconExternalSmall, { color: "gray-900" })] }) : jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Skeleton$1, { height: 18, width: 32 + name2.length * 8 }), jsxRuntimeExports.jsx(Skeleton$1, { height: 18, rounded: true, width: 18 })] }) })] });
 }
 function useImmediateStyle(ref) {
   const styleRef = reactExports.useRef({});
@@ -86116,10 +85509,10 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
       $timeline.removeEventListener("scroll", onScroll);
     };
   }, [timelineRef, thumbRatio, setThumbStyle]);
-  return jsxRuntimeExports.jsxs("div", { className: styles$2.mapContainer, ref: containerRef, style: {
+  return jsxRuntimeExports.jsxs("div", { className: styles$3.mapContainer, ref: containerRef, style: {
     width: thumbWidth > 0 ? mapWidth : "100%",
     height: MAP_HEIGHT
-  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles$2.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles$2.mapThumb, ref: thumbRef, style: {
+  }, children: [jsxRuntimeExports.jsx("canvas", { className: styles$3.mapCanvas, height: MAP_HEIGHT * dpi, ref: canvasRef, style: { width: mapWidth, height: MAP_HEIGHT }, width: mapWidth * dpi }), jsxRuntimeExports.jsx("div", { className: styles$3.mapThumb, ref: thumbRef, style: {
     transform: thumbStyle.transform,
     width: thumbWidth > 0 ? thumbWidth : `calc(100% - ${TIMELINE_PADDING * 2}px)`,
     top: 2,
@@ -86184,6 +85577,26 @@ const iconButtonVariants = cva([
 });
 const IconButton = reactExports.forwardRef(({ className, variant, size: size2, type = "button", ...props }, ref) => jsxRuntimeExports.jsx("button", { ref, type, className: cn$4(iconButtonVariants({ variant, size: size2, className })), ...props }));
 IconButton.displayName = "IconButton";
+const kbdVariants = cva("inline-flex items-center justify-center rounded px-1 text-center font-sans", {
+  variants: {
+    variant: {
+      subtle: "bg-background-100/20",
+      outline: "border border-gray-alpha-400 bg-background-100 font-medium text-gray-900"
+    },
+    size: {
+      default: "h-5 min-w-5 text-xs leading-none",
+      compact: "h-4 min-h-4 min-w-4 text-[11px] leading-none",
+      search: "h-5 min-h-5 min-w-5 text-[13px] leading-[1.7em]"
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "default"
+  }
+});
+function Kbd({ children: children2, className, variant, size: size2, ...props }) {
+  return jsxRuntimeExports.jsx("kbd", { className: cn$4(kbdVariants({ variant, size: size2, className })), ...props, children: children2 });
+}
 const COL_TEMPLATE = "340px 1px minmax(50px, 1fr)";
 const ROWS = [
   { id: "r0", name: 62, off: 0, bar: 72 },
@@ -86235,9 +85648,6 @@ function useLoadMoreOnScroll(loadMore, { hasMore, isLoadingMore, rootRef, rootMa
   }, [entry2 == null ? void 0 : entry2.isIntersecting, hasMore, isLoadingMore]);
   return sentinelRef;
 }
-function Kbd({ children: children2, className }) {
-  return jsxRuntimeExports.jsx("kbd", { className: cn$4("inline-flex h-5 min-w-5 items-center justify-center rounded bg-background-100/20 px-1 text-center font-sans text-xs leading-none", className), children: children2 });
-}
 const TooltipProvider = Provider$2;
 const Tooltip$1 = Root3$1;
 const TooltipTrigger$1 = Trigger$4;
@@ -86823,6 +86233,57 @@ const EventList = ({ spans, activeSpanId, searchResult, onSelectSpan }) => {
     paddingBottom: (spans.length - end) * ROW_HEIGHT_PX
   }, children: spans.slice(start2, end).map((span) => jsxRuntimeExports.jsx(EventRow, { span, isSelected: span.spanId === activeSpanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelectSpan }, span.spanId)) });
 };
+const hint$1 = "_hint_1dmsq_3";
+const styles$2 = {
+  hint: hint$1
+};
+const DISMISSALS_KEY = "workflow-step-shortcut-helper-dismissals";
+const DISMISSAL_LIMIT = 3;
+const HINT_ROTATION_MS = 8e3;
+function getAltKeyLabel() {
+  if (typeof navigator === "undefined")
+    return "Alt";
+  return navigator.platform.toLowerCase().includes("mac") ? "Option" : "Alt";
+}
+function readDismissals() {
+  try {
+    const dismissals = Number.parseInt(window.localStorage.getItem(DISMISSALS_KEY) ?? "0", 10);
+    return Number.isNaN(dismissals) ? 0 : dismissals;
+  } catch {
+    return 0;
+  }
+}
+function AltHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Hold", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mx-1", children: getAltKeyLabel() }), "to see delta between spans"] });
+}
+function NavHint() {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: ["Use", jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "ml-1", children: "J" }), jsxRuntimeExports.jsx("span", { className: "mx-1", children: "/" }), jsxRuntimeExports.jsx(Kbd, { variant: "outline", size: "compact", className: "mr-1", children: "K" }), "to move between spans"] });
+}
+function TraceShortcutHelper({ hasMultipleSpans, reducedMotion }) {
+  const [visible, setVisible] = reactExports.useState(false);
+  const [index2, setIndex] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    setVisible(readDismissals() < DISMISSAL_LIMIT);
+  }, []);
+  reactExports.useEffect(() => {
+    if (reducedMotion)
+      return;
+    const id2 = setInterval(() => {
+      setIndex((i) => i === 0 ? 1 : 0);
+    }, HINT_ROTATION_MS);
+    return () => clearInterval(id2);
+  }, [reducedMotion]);
+  if (!visible || !hasMultipleSpans)
+    return null;
+  const dismiss = () => {
+    try {
+      window.localStorage.setItem(DISMISSALS_KEY, String(readDismissals() + 1));
+    } catch {
+    }
+    setVisible(false);
+  };
+  return jsxRuntimeExports.jsxs("div", { className: "group absolute bottom-3 left-1/2 z-10 hidden h-8 max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 text-xs leading-none text-muted-foreground md:inline-flex", children: [jsxRuntimeExports.jsx("span", { "aria-live": "polite", "aria-atomic": "true", className: "inline-flex items-center whitespace-nowrap", children: reducedMotion ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx("span", { className: `inline-flex items-center ${styles$2.hint}`, children: index2 === 0 ? jsxRuntimeExports.jsx(AltHint, {}) : jsxRuntimeExports.jsx(NavHint, {}) }, index2) }), jsxRuntimeExports.jsx("button", { type: "button", className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none", onClick: dismiss, "aria-label": "Dismiss trace shortcuts helper", children: jsxRuntimeExports.jsx(X$3, { className: "h-3 w-3" }) })] });
+}
 const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
@@ -87461,7 +86922,6 @@ function NewTraceViewerContent({ trace: trace2, onLoadMore, hasMore, isLoadingMo
       if (e.key === "Escape") {
         handleClearActiveSpan();
       } else if (e.key === "Alt") {
-        e.preventDefault();
         setAltHeld(true);
       } else if (e.key === "j" || e.key === "k") {
         handleSidebarNavKey(e);
@@ -87608,13 +87068,13 @@ function NewTraceViewerContent({ trace: trace2, onLoadMore, hasMore, isLoadingMo
   prevSpanIdRef.current = prevSpanId;
   nextSpanIdRef.current = nextSpanId;
   navigateToSpanRef.current = navigateToSpan;
-  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,360px,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, { scrollContainerRef, 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) => {
+  return jsxRuntimeExports.jsxs("div", { "data-pane": "pane-root", "data-has-detail": activeSpan ? "" : void 0, className: "relative grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,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, { scrollContainerRef, 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("");
     }
-  }, 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.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), 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, onRevealTime: handleRevealTime, 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 ? 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.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), 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: handleClearActiveSpan, 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 }) }) })] }) : 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, { variant: "outline", size: "search", children: "Esc" }) })] }), endHeader: jsxRuntimeExports.jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo2 }), children: [jsxRuntimeExports.jsxs("div", { className: "block overflow-visible", children: [jsxRuntimeExports.jsx(EventList, { spans: trace2.spans, activeSpanId, searchResult, onSelectSpan: handleSelectSpan }), jsxRuntimeExports.jsx("div", { ref: loadMoreSentinelRef, className: "flex justify-center", children: isLoadingMore ? jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-sm text-gray-800", children: [jsxRuntimeExports.jsx(Spinner, { size: 14 }), jsxRuntimeExports.jsx("span", { children: "Loading spans…" })] }) : null })] }), 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, onRevealTime: handleRevealTime, 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 ? 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.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate up", "aria-keyshortcuts": "K", onClick: handleSelectPrevSpan, disabled: !prevSpanId, children: jsxRuntimeExports.jsx(ChevronUp, { className: "w-4 h-4" }) }) }), prevSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate up", jsxRuntimeExports.jsx(Kbd, { children: "K" })] }) : null] }), jsxRuntimeExports.jsxs(Tooltip$1, { children: [jsxRuntimeExports.jsx(TooltipTrigger$1, { asChild: true, children: jsxRuntimeExports.jsx(IconButton, { "aria-label": "Navigate down", "aria-keyshortcuts": "J", onClick: handleSelectNextSpan, disabled: !nextSpanId, children: jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4" }) }) }), nextSpanId ? jsxRuntimeExports.jsxs(TooltipContent$1, { children: ["Navigate down", jsxRuntimeExports.jsx(Kbd, { children: "J" })] }) : null] }), 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: handleClearActiveSpan, 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 }) }) })] }) : null, jsxRuntimeExports.jsx(TraceShortcutHelper, { hasMultipleSpans: trace2.spans.length > 1, reducedMotion })] });
 }
 const NewTraceViewer = ({ run: run2, events: events2, sidebarData, onLoadMore, hasMore, isLoadingMore, loading = false }) => {
   const trace2 = reactExports.useMemo(() => {
@@ -90343,8 +89803,8 @@ function SegmentedControl({
   );
 }
 function ThemePicker() {
-  const { theme: theme3, setTheme } = z$4();
-  const currentTheme = theme3 || "system";
+  const { theme, setTheme } = z$4();
+  const currentTheme = theme || "system";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SegmentedControl,
     {
@@ -90375,11 +89835,11 @@ function DocsLink$1() {
   ) });
 }
 const Toaster2 = ({ ...props }) => {
-  const { theme: theme3 = "system" } = z$4();
+  const { theme = "system" } = z$4();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Toaster$1,
     {
-      theme: theme3,
+      theme,
       className: "toaster group",
       toastOptions: {
         classNames: {
@@ -91182,9 +90642,9 @@ function renderStructuredFields(framing, metadata) {
   if (errorCode && errorCode !== errorName) {
     lines.push(`  ${kvKey("code")} ${dim(errorCode)}`);
   }
-  const hint$1 = pickString(metadata, "hint");
-  if (hint$1) {
-    lines.push(`  ${hint(hint$1)}`);
+  const hint$12 = pickString(metadata, "hint");
+  if (hint$12) {
+    lines.push(`  ${hint(hint$12)}`);
   }
   const passThrough = Object.entries(metadata).filter(([k2, v2]) => !wellKnown.has(k2) && !redundant.has(k2) && v2 !== void 0 && v2 !== null).sort(([a2], [b2]) => a2.localeCompare(b2));
   for (const [k2, v2] of passThrough) {
@@ -91519,7 +90979,7 @@ const encryption = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   encrypt: encrypt$1,
   importKey
 }, Symbol.toStringTag, { value: "Module" }));
-const version$1 = "5.0.0-beta.21";
+const version$1 = "5.0.0-beta.22";
 const WorldCacheKey = Symbol.for("@workflow/world//cache");
 const WorldCachePromiseKey = Symbol.for("@workflow/world//cachePromise");
 const GetWorldFnKey$1 = Symbol.for("@workflow/world//getWorldFn");
@@ -93041,14 +92501,6 @@ function createReconnectingFramedStream(runId, name2, startIndex) {
     reader = stream.getReader();
   }
   async function reconnect() {
-    reconnectCount++;
-    totalReconnectCount++;
-    if (reconnectCount > FRAMED_STREAM_MAX_RECONNECTS) {
-      throw new Error(`Stream "${name2}" exceeded maximum reconnection attempts (${FRAMED_STREAM_MAX_RECONNECTS})`);
-    }
-    if (totalReconnectCount > FRAMED_STREAM_MAX_TOTAL_RECONNECTS) {
-      throw new Error(`Stream "${name2}" exceeded maximum total reconnection attempts (${FRAMED_STREAM_MAX_TOTAL_RECONNECTS})`);
-    }
     if (reader) {
       await reader.cancel().catch(() => {
       });
@@ -93057,7 +92509,21 @@ function createReconnectingFramedStream(runId, name2, startIndex) {
     currentStartIndex += consumedFrames;
     consumedFrames = 0;
     buffer2 = new Uint8Array(0);
-    await connect2();
+    for (; ; ) {
+      reconnectCount++;
+      totalReconnectCount++;
+      if (reconnectCount > FRAMED_STREAM_MAX_RECONNECTS) {
+        throw new Error(`Stream "${name2}" exceeded maximum reconnection attempts (${FRAMED_STREAM_MAX_RECONNECTS})`);
+      }
+      if (totalReconnectCount > FRAMED_STREAM_MAX_TOTAL_RECONNECTS) {
+        throw new Error(`Stream "${name2}" exceeded maximum total reconnection attempts (${FRAMED_STREAM_MAX_TOTAL_RECONNECTS})`);
+      }
+      try {
+        await connect2();
+        return;
+      } catch {
+      }
+    }
   }
   return new ReadableStream({
     pull: async (controller) => {
@@ -100551,7 +100017,7 @@ function requireUtil$4() {
     return normalizedMethodRecordsBase[method.toLowerCase()] ?? method;
   }
   const esIteratorPrototype = Object.getPrototypeOf(Object.getPrototypeOf([][Symbol.iterator]()));
-  function createIterator2(name2, kInternalIterator, keyIndex = 0, valueIndex = 1) {
+  function createIterator(name2, kInternalIterator, keyIndex = 0, valueIndex = 1) {
     var _target, _kind, _index;
     class FastIterableIterator {
       /**
@@ -100624,7 +100090,7 @@ function requireUtil$4() {
     };
   }
   function iteratorMixin(name2, object2, kInternalIterator, keyIndex = 0, valueIndex = 1) {
-    const makeIterator = createIterator2(name2, kInternalIterator, keyIndex, valueIndex);
+    const makeIterator = createIterator(name2, kInternalIterator, keyIndex, valueIndex);
     const properties2 = {
       keys: {
         writable: true,
@@ -100970,7 +100436,7 @@ function requireUtil$4() {
     sameOrigin,
     normalizeMethod,
     iteratorMixin,
-    createIterator: createIterator2,
+    createIterator,
     isValidHeaderName,
     isValidHeaderValue,
     isErrorLike,
@@ -122454,7 +121920,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-CCVnYBh5.js");
+        const { HookSchema: HookSchema2 } = await import("./index-BAzmSj9V.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) {
@@ -122494,25 +121960,25 @@ var hasRequiredGetContext;
 function requireGetContext() {
   if (hasRequiredGetContext) return getContext_1;
   hasRequiredGetContext = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var get_context_exports = {};
-  __export2(get_context_exports, {
+  __export(get_context_exports, {
     SYMBOL_FOR_REQ_CONTEXT: () => SYMBOL_FOR_REQ_CONTEXT,
     getContext: () => getContext
   });
@@ -122530,25 +121996,25 @@ var hasRequiredTokenError;
 function requireTokenError() {
   if (hasRequiredTokenError) return tokenError;
   hasRequiredTokenError = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var token_error_exports = {};
-  __export2(token_error_exports, {
+  __export(token_error_exports, {
     VercelOidcTokenError: () => VercelOidcTokenError
   });
   tokenError = __toCommonJS(token_error_exports);
@@ -122572,25 +122038,25 @@ var hasRequiredGetVercelOidcToken;
 function requireGetVercelOidcToken() {
   if (hasRequiredGetVercelOidcToken) return getVercelOidcToken_1;
   hasRequiredGetVercelOidcToken = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var get_vercel_oidc_token_exports = {};
-  __export2(get_vercel_oidc_token_exports, {
+  __export(get_vercel_oidc_token_exports, {
     getVercelOidcToken: () => getVercelOidcToken,
     getVercelOidcTokenSync: () => getVercelOidcTokenSync
   });
@@ -122607,8 +122073,8 @@ function requireGetVercelOidcToken() {
     }
     try {
       const [{ getTokenPayload, isExpired }, { refreshToken }] = await Promise.all([
-        await import("./token-util-YVFsN8wA.js").then((n) => n.t),
-        await import("./token-DWlFlsmX.js").then((n) => n.t)
+        await import("./token-util-6H5PWMXy.js").then((n) => n.t),
+        await import("./token-D-3FNfzy.js").then((n) => n.t)
       ]);
       if (!token || isExpired(getTokenPayload(token), options == null ? void 0 : options.expirationBufferMs)) {
         await refreshToken(options);
@@ -122644,25 +122110,25 @@ var hasRequiredAuthErrors;
 function requireAuthErrors() {
   if (hasRequiredAuthErrors) return authErrors;
   hasRequiredAuthErrors = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var auth_errors_exports = {};
-  __export2(auth_errors_exports, {
+  __export(auth_errors_exports, {
     AccessTokenMissingError: () => AccessTokenMissingError,
     RefreshAccessTokenFailedError: () => RefreshAccessTokenFailedError
   });
@@ -122688,42 +122154,42 @@ var hasRequiredTokenIo;
 function requireTokenIo() {
   if (hasRequiredTokenIo) return tokenIo;
   hasRequiredTokenIo = 1;
-  var __create2 = Object.create;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __getProtoOf3 = Object.getPrototypeOf;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __create = Object.create;
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf2 = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toESM2 = (mod, isNodeMode, target2) => (target2 = mod != null ? __create2(__getProtoOf3(mod)) : {}, __copyProps2(
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf2(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    !mod || !mod.__esModule ? __defProp3(target2, "default", { value: mod, enumerable: true }) : target2,
+    !mod || !mod.__esModule ? __defProp2(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var token_io_exports = {};
-  __export2(token_io_exports, {
+  __export(token_io_exports, {
     findRootDir: () => findRootDir,
     getUserDataDir: () => getUserDataDir
   });
   tokenIo = __toCommonJS(token_io_exports);
-  var import_path2 = __toESM2(path__default);
-  var import_fs2 = __toESM2(fs__default);
-  var import_os2 = __toESM2(require$$2$4);
+  var import_path2 = __toESM(path__default);
+  var import_fs2 = __toESM(fs__default);
+  var import_os2 = __toESM(require$$2$4);
   var import_token_error = requireTokenError();
   function findRootDir() {
     try {
@@ -122767,42 +122233,42 @@ var hasRequiredAuthConfig;
 function requireAuthConfig() {
   if (hasRequiredAuthConfig) return authConfig;
   hasRequiredAuthConfig = 1;
-  var __create2 = Object.create;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __getProtoOf3 = Object.getPrototypeOf;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __create = Object.create;
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf2 = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toESM2 = (mod, isNodeMode, target2) => (target2 = mod != null ? __create2(__getProtoOf3(mod)) : {}, __copyProps2(
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf2(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    !mod || !mod.__esModule ? __defProp3(target2, "default", { value: mod, enumerable: true }) : target2,
+    !mod || !mod.__esModule ? __defProp2(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var auth_config_exports = {};
-  __export2(auth_config_exports, {
+  __export(auth_config_exports, {
     isValidAccessToken: () => isValidAccessToken,
     readAuthConfig: () => readAuthConfig,
     writeAuthConfig: () => writeAuthConfig
   });
   authConfig = __toCommonJS(auth_config_exports);
-  var fs2 = __toESM2(fs__default);
-  var path2 = __toESM2(path__default);
+  var fs2 = __toESM(fs__default);
+  var path2 = __toESM(path__default);
   var import_token_util = requireTokenUtil();
   function getAuthConfigPath() {
     const dataDir = (0, import_token_util.getVercelDataDir)();
@@ -122852,25 +122318,25 @@ var hasRequiredOauth;
 function requireOauth() {
   if (hasRequiredOauth) return oauth;
   hasRequiredOauth = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var oauth_exports = {};
-  __export2(oauth_exports, {
+  __export(oauth_exports, {
     processTokenResponse: () => processTokenResponse,
     refreshTokenRequest: () => refreshTokenRequest
   });
@@ -122941,35 +122407,35 @@ var hasRequiredTokenUtil;
 function requireTokenUtil() {
   if (hasRequiredTokenUtil) return tokenUtil;
   hasRequiredTokenUtil = 1;
-  var __create2 = Object.create;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __getProtoOf3 = Object.getPrototypeOf;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __create = Object.create;
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf2 = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toESM2 = (mod, isNodeMode, target2) => (target2 = mod != null ? __create2(__getProtoOf3(mod)) : {}, __copyProps2(
+  var __toESM = (mod, isNodeMode, target2) => (target2 = mod != null ? __create(__getProtoOf2(mod)) : {}, __copyProps(
     // If the importer is in node compatibility mode or this is not an ESM
     // file that has been converted to a CommonJS file using a Babel-
     // compatible transform (i.e. "__esModule" has not been set), then set
     // "default" to the CommonJS "module.exports" for node compatibility.
-    !mod || !mod.__esModule ? __defProp3(target2, "default", { value: mod, enumerable: true }) : target2,
+    !mod || !mod.__esModule ? __defProp2(target2, "default", { value: mod, enumerable: true }) : target2,
     mod
   ));
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var token_util_exports = {};
-  __export2(token_util_exports, {
+  __export(token_util_exports, {
     assertVercelOidcTokenResponse: () => assertVercelOidcTokenResponse,
     findProjectInfo: () => findProjectInfo,
     getTokenPayload: () => getTokenPayload,
@@ -122981,8 +122447,8 @@ function requireTokenUtil() {
     saveToken: () => saveToken
   });
   tokenUtil = __toCommonJS(token_util_exports);
-  var path2 = __toESM2(path__default);
-  var fs2 = __toESM2(fs__default);
+  var path2 = __toESM(path__default);
+  var fs2 = __toESM(fs__default);
   var import_token_error = requireTokenError();
   var import_token_io = requireTokenIo();
   var import_auth_config = requireAuthConfig();
@@ -123137,25 +122603,25 @@ var hasRequiredDist;
 function requireDist() {
   if (hasRequiredDist) return dist;
   hasRequiredDist = 1;
-  var __defProp3 = Object.defineProperty;
-  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames2 = Object.getOwnPropertyNames;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __export2 = (target2, all2) => {
+  var __defProp2 = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target2, all2) => {
     for (var name2 in all2)
-      __defProp3(target2, name2, { get: all2[name2], enumerable: true });
+      __defProp2(target2, name2, { get: all2[name2], enumerable: true });
   };
-  var __copyProps2 = (to2, from, except, desc) => {
+  var __copyProps = (to2, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames2(from))
-        if (!__hasOwnProp2.call(to2, key) && key !== except)
-          __defProp3(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to2, key) && key !== except)
+          __defProp2(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
     }
     return to2;
   };
-  var __toCommonJS = (mod) => __copyProps2(__defProp3({}, "__esModule", { value: true }), mod);
+  var __toCommonJS = (mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod);
   var src_exports = {};
-  __export2(src_exports, {
+  __export(src_exports, {
     AccessTokenMissingError: () => import_auth_errors.AccessTokenMissingError,
     RefreshAccessTokenFailedError: () => import_auth_errors.RefreshAccessTokenFailedError,
     getContext: () => import_get_context.getContext,
@@ -127957,7 +127423,7 @@ var QueueClient = class {
     setApi(this, new ApiClient({ ...options, region }));
   }
 };
-const version = "5.0.0-beta.19";
+const version = "5.0.0-beta.20";
 const HTTP_DEBUG_ENABLED = typeof process !== "undefined" && typeof process.env.DEBUG === "string" && (process.env.DEBUG.includes("workflow:") || process.env.DEBUG === "*");
 function httpLog(method, endpoint, response2, ms2) {
   if (HTTP_DEBUG_ENABLED) {
@@ -128565,6 +128031,8 @@ function buildPostFrameMeta(input) {
     meta2.correlationId = input.correlationId;
   if (input.vercelId !== void 0)
     meta2.vercelId = input.vercelId;
+  if (input.occurredAt !== void 0)
+    meta2.occurredAt = input.occurredAt;
   if (input.remoteRefBehavior !== void 0) {
     meta2.remoteRefBehavior = input.remoteRefBehavior;
   }
@@ -128602,6 +128070,8 @@ function buildPostFrameMeta(input) {
   }
   if (input.sinceCursor !== void 0)
     meta2.sinceCursor = input.sinceCursor;
+  if (input.skipPreload !== void 0)
+    meta2.skipPreload = input.skipPreload;
   return meta2;
 }
 function throwForErrorResponse(statusCode, responseHeaders, errorBody, opName, url2) {
@@ -129095,6 +128565,9 @@ function buildEventFromV4(decoded, payloadBody, resolveData) {
     runId: decoded.runId,
     eventType: decoded.eventType,
     createdAt: decoded.createdAt instanceof Date ? decoded.createdAt : new Date(decoded.createdAt),
+    ...decoded.occurredAt !== void 0 ? {
+      occurredAt: decoded.occurredAt instanceof Date ? decoded.occurredAt : new Date(decoded.occurredAt)
+    } : {},
     ...decoded.correlationId ? { correlationId: decoded.correlationId } : {},
     eventData,
     ...decoded.specVersion !== void 0 ? { specVersion: decoded.specVersion } : {}
@@ -129176,6 +128649,7 @@ async function createWorkflowRunEventInner(id2, data, params, config2) {
     specVersion: data.specVersion ?? 2,
     ...data.correlationId ? { correlationId: data.correlationId } : {},
     ...(params == null ? void 0 : params.requestId) ? { vercelId: params.requestId } : {},
+    occurredAt: (params == null ? void 0 : params.occurredAt) ?? /* @__PURE__ */ new Date(),
     // Opt-in inline-delta: forward the cursor the runtime held before
     // this write so the server can return the authoritative event-log
     // delta on the response (events/cursor/hasMore), letting the inline
@@ -129183,6 +128657,11 @@ async function createWorkflowRunEventInner(id2, data, params, config2) {
     // step_completed/step_failed; older servers ignore it and the runtime
     // falls back to events.list.
     ...(params == null ? void 0 : params.sinceCursor) ? { sinceCursor: params.sinceCursor } : {},
+    // Run-started preload opt-out: turbo backgrounds run_started as a write
+    // barrier only and never reads the preloaded log, so tell the server to
+    // skip the list+resolve. The server only acts on it for run_started;
+    // older servers ignore it and simply preload as before.
+    ...(params == null ? void 0 : params.skipPreload) ? { skipPreload: true } : {},
     remoteRefBehavior,
     payload,
     ...meta2
@@ -129305,6 +128784,9 @@ const MAX_CHUNKS_PER_REQUEST = 1e3;
 function getStreamUrl(name2, runId, httpConfig) {
   return new URL(`${httpConfig.baseUrl}/v2/runs/${encodeURIComponent(runId)}/stream/${encodeURIComponent(name2)}`);
 }
+function getStreamReadUrl(name2, runId, httpConfig) {
+  return new URL(`${httpConfig.baseUrl}/v3/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"]) {
@@ -129402,7 +128884,7 @@ function createStreamer(config2) {
       },
       async get(runId, name2, startIndex) {
         const httpConfig = await getHttpConfig(config2);
-        const url2 = getStreamUrl(name2, runId, httpConfig);
+        const url2 = getStreamReadUrl(name2, runId, httpConfig);
         if (typeof startIndex === "number") {
           url2.searchParams.set("startIndex", String(startIndex));
         }
@@ -139952,7 +139434,7 @@ var SelectArrow = reactExports.forwardRef(
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow$3, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Arrow$2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
 SelectArrow.displayName = ARROW_NAME;
@@ -154158,7 +153640,7 @@ function RunDetailView({
       setShowCancelDialog(false);
       await cancelRun(env2, runId);
       await update();
-      toast.success("Run cancelled successfully");
+      toast.success("Run cancelled");
     } catch (err) {
       console.error("Failed to cancel run:", err);
       toast.error("Failed to cancel run", {
@@ -154177,7 +153659,7 @@ function RunDetailView({
       setRerunning(true);
       setShowRerunDialog(false);
       const newRunId = await recreateRun(env2, run2.runId);
-      toast.success("New run started successfully", {
+      toast.success("New run started", {
         description: `Run ID: ${newRunId}`
       });
       navigate(`/run/${newRunId}`);
@@ -154329,7 +153811,7 @@ function RunDetailView({
                 "Streams"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$1, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "trace", className: "mt-0 flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary$1, { title: "Failed to load trace viewer", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative h-full -mx-6 bg-background-100 border-t border-gray-alpha-400 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               NewTraceViewer,
               {
                 run: run2,
@@ -154652,7 +154134,7 @@ const route4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProper
   __proto__: null,
   loader
 }, Symbol.toStringTag, { value: "Module" }));
-const serverManifest = { "entry": { "module": "/assets/entry.client-DOJDY_4b.js", "imports": ["/assets/index-BXZSIDEp.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--Sg25-Lb.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/mermaid-3ZIDBTTL-DndzaIEl.js"], "css": ["/assets/root-1hd8ZXAx.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-QPEXVb.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-j7J3_oSH.js", "/assets/mermaid-3ZIDBTTL-DndzaIEl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-Djwnox1v.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-j7J3_oSH.js", "/assets/mermaid-3ZIDBTTL-DndzaIEl.js", "/assets/encryption-g14N5vQl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-225d97da.js", "version": "225d97da", "sri": void 0 };
+const serverManifest = { "entry": { "module": "/assets/entry.client-DOJDY_4b.js", "imports": ["/assets/index-BXZSIDEp.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-BlFmfRST.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js"], "css": ["/assets/root-61NXpLSs.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-Dz43xne_.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-BlDVZ5AU.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-T4JlTgHs.js", "imports": ["/assets/index-BXZSIDEp.js", "/assets/workflow-graph-viewer-BlDVZ5AU.js", "/assets/mermaid-3ZIDBTTL-C_xy8SxZ.js", "/assets/encryption-g14N5vQl.js", "/assets/index-B6-SzLmT.js"], "css": ["/assets/run-detail-CWoGxu_0.css", "/assets/workflow-graph-viewer-DnlNuQQH.css", "/assets/mermaid-3ZIDBTTL-DDxQhcP4.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-3f730581.js", "version": "3f730581", "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 };