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

package/build/client/assets/{mermaid-3ZIDBTTL-PK-k2mDG.js → mermaid-3ZIDBTTL-3cOa-aZ5.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-C69WMRfh.js","assets/index-Byi8AWfe.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-Cq4feDhL.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/encryption-C69WMRfh.js","assets/index-Byi8AWfe.js","assets/index-BsV8i_Jn.js","assets/highlighted-body-B3W2YXNL-ijzNrESJ.js"])))=>i.map(i=>d[i]);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -15311,6 +15311,10 @@ function _instanceof(cls, params = {}) {
 function date(params) {
   return /* @__PURE__ */ _coercedDate(ZodDate, params);
 }
+object({
+  key: string$2(),
+  value: union([string$2(), _null()])
+});
 const BinarySerializedDataSchema = _instanceof(Uint8Array);
 const LegacySerializedDataSchemaV1 = any();
 const SerializedDataSchema = union([
@@ -15634,7 +15638,7 @@ const WorkflowRunBaseSchema = object({
   // Optional in database for backwards compatibility, defaults to 1 (legacy) when reading
   specVersion: number$2().optional(),
   executionContext: record(string$2(), any()).optional(),
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a run_failed event, serialized via the workflow
@@ -15650,6 +15654,24 @@ const WorkflowRunBaseSchema = object({
    * without needing to decrypt the full error payload.
    */
   errorCode: string$2().optional(),
+  /**
+   * Plaintext string-string metadata attached to the run via
+   * `experimental_setAttributes()` (or, in the future, materialized
+   * from `attr_set` events). Stored unencrypted alongside other
+   * plaintext fields so observability surfaces can read it without
+   * going through the decryption pipeline.
+   *
+   * Defaults to `{}` after schema parsing so consumers always receive
+   * a record regardless of world. World adapters need not initialize
+   * the field on disk — `world-local` JSON files written before this
+   * field existed, and rows from any other adapter that omits the
+   * column, both read as `{}` after Zod parses them.
+   *
+   * EXPERIMENTAL (MVP): the full Workflow Attributes feature replaces
+   * the direct-mutation MVP path with an event-sourced model — see
+   * the attributes-mvp changelog entry.
+   */
+  attributes: record(string$2(), string$2()).default({}),
   expiredAt: date().optional(),
   startedAt: date().optional(),
   completedAt: date().optional(),
@@ -15734,7 +15756,7 @@ object({
    */
   stepName: string$2(),
   status: StepStatusSchema,
-  input: SerializedDataSchema,
+  input: SerializedDataSchema.optional(),
   output: SerializedDataSchema.optional(),
   /**
    * The thrown value from a step_retrying or step_failed event, serialized
@@ -17000,6 +17022,87 @@ const geistTheme = {
 };
 const inspectorThemeLight = geistTheme;
 const inspectorThemeDark = geistTheme;
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config2) => (props) => {
+  var _config_compoundVariants;
+  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config2;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const buttonVariants$1 = cva([
+  "outline-none m-0 border-0 align-baseline no-underline group/trigger",
+  "relative cursor-pointer select-none transform translate-z-0",
+  "inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium",
+  "!text-gray-100",
+  "bg-gray-1000",
+  "transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out",
+  // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+  // consuming app), darkened via ancestor theme class without a registered variant.
+  "hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]",
+  "[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  "[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]",
+  // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+  // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+  "focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]",
+  // disabled styles
+  "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
+  "disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100",
+  "aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100"
+], {
+  variants: {
+    variant: {
+      default: "",
+      secondary: "border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]",
+      ghost: "[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]"
+    },
+    size: {
+      default: "h-10 px-4 text-[14px]",
+      sm: "h-8 px-3 text-[14px]",
+      xs: "h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]",
+      icon: "h-8 w-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button$1({ className, variant, size: size2, type = "button", ...props }) {
+  return jsxRuntimeExports.jsx("button", { type, className: cn$4(buttonVariants$1({ variant, size: size2, className })), ...props });
+}
 const STREAM_REF_TYPE = "__workflow_stream_ref__";
 const CLASS_INSTANCE_REF_TYPE = "__workflow_class_instance_ref__";
 const RUN_REF_TYPE = "__workflow_run_ref__";
@@ -17049,16 +17152,10 @@ const RunClickContext = reactExports.createContext(void 0);
 function EncryptedInlineLabel() {
   const ctx = reactExports.useContext(DecryptClickContext);
   if (ctx) {
-    return jsxRuntimeExports.jsxs("button", { type: "button", className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] cursor-pointer", style: {
-      backgroundColor: "var(--ds-gray-100)",
-      color: "var(--ds-gray-700)",
-      border: "1px solid var(--ds-gray-400)",
-      fontStyle: "italic",
-      opacity: ctx.isDecrypting ? 0.6 : 1
-    }, disabled: ctx.isDecrypting, onClick: (e) => {
+    return jsxRuntimeExports.jsxs(Button$1, { size: "xs", className: "align-baseline gap-x-1", disabled: ctx.isDecrypting, onClick: (e) => {
       e.stopPropagation();
       ctx.onDecrypt();
-    }, title: "Click to decrypt", children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 12 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: { display: "inline", flexShrink: 0 } }), jsxRuntimeExports.jsx("span", { children: ctx.isDecrypting ? "Decrypting…" : "Decrypt" })] });
+    }, children: [ctx.isDecrypting ? jsxRuntimeExports.jsx(Spinner, { size: 10 }) : jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3" }), jsxRuntimeExports.jsx("span", { children: "Decrypt" })] });
   }
   return jsxRuntimeExports.jsxs("span", { style: { color: "var(--ds-gray-600)", fontStyle: "italic" }, children: [jsxRuntimeExports.jsx(Lock, { className: "h-3 w-3", style: {
     display: "inline",
@@ -17304,6 +17401,9 @@ function isDeepEqual(a2, b2, seen2 = /* @__PURE__ */ new WeakMap()) {
   }
   return true;
 }
+function Skeleton$1({ className, style: style2, ...props }) {
+  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
+}
 function __insertCSS(code2) {
   if (typeof document == "undefined") return;
   let head = document.head || document.getElementsByTagName("head")[0];
@@ -18393,9 +18493,6 @@ const ToastContext = reactExports.createContext(defaultAdapter);
 function useToast() {
   return reactExports.useContext(ToastContext);
 }
-function Skeleton$1({ className, style: style2, ...props }) {
-  return jsxRuntimeExports.jsx("div", { ...props, className: cn$4("rounded-md", className), style: { backgroundColor: "var(--ds-gray-200)", ...style2 } });
-}
 const convert = (
   // Note: overloads in JSDoc can’t yet use different `@template`s.
   /**
@@ -43158,7 +43255,7 @@ var tn = f("block", "before:content-[counter(line)]", "before:inline-block", "be
 var et = ({ className: e, language: t, style: o, isIncomplete: n, ...s2 }) => jsxRuntimeExports.jsx("div", { className: f("my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2", e), "data-incomplete": n || void 0, "data-language": t, "data-streamdown": "code-block", style: { contentVisibility: "auto", containIntrinsicSize: "auto 200px", ...o }, ...s2 });
 var Se = reactExports.createContext({ code: "" }), de = () => reactExports.useContext(Se);
 var ot = ({ language: e }) => jsxRuntimeExports.jsx("div", { className: "flex h-8 items-center text-muted-foreground text-xs", "data-language": e, "data-streamdown": "code-block-header", children: jsxRuntimeExports.jsx("span", { className: "ml-1 font-mono lowercase", children: e }) });
-var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-Cq4feDhL.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
+var cn$1 = /\n+$/, dn = reactExports.lazy(() => __vitePreload(() => import("./highlighted-body-B3W2YXNL-ijzNrESJ.js"), true ? __vite__mapDeps([3,2]) : void 0).then((e) => ({ default: e.HighlightedCodeBlockBody }))), rt = ({ code: e, language: t, className: o, children: n, isIncomplete: s2 = false, ...r2 }) => {
   let i = reactExports.useMemo(() => e.replace(cn$1, ""), [e]), c = reactExports.useMemo(() => ({ bg: "transparent", fg: "inherit", tokens: i.split(`
 `).map((a2) => [{ content: a2, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0 }]) }), [i]);
   return jsxRuntimeExports.jsx(Se.Provider, { value: { code: e }, children: jsxRuntimeExports.jsxs(et, { isIncomplete: s2, language: t, children: [jsxRuntimeExports.jsx(ot, { language: t }), n ? jsxRuntimeExports.jsx("div", { className: "pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end", children: jsxRuntimeExports.jsx("div", { className: "pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur", "data-streamdown": "code-block-actions", children: n }) }) : null, jsxRuntimeExports.jsx(reactExports.Suspense, { fallback: jsxRuntimeExports.jsx(Qe, { className: o, language: t, result: c, ...r2 }), children: jsxRuntimeExports.jsx(dn, { className: o, code: i, language: t, raw: c, ...r2 }) })] }) });
@@ -43922,6 +44019,14 @@ var Nt = ({ chart: e, className: t, config: o, fullscreen: n = false, showContro
   let T2 = l || d2;
   return jsxRuntimeExports.jsx("div", { className: f("size-full", t), "data-streamdown": "mermaid", ref: w2, children: jsxRuntimeExports.jsx(So, { className: f(n ? "size-full overflow-hidden" : "overflow-hidden", t), fullscreen: n, maxZoom: 3, minZoom: 0.5, showControls: s2, zoomStep: 0.1, children: jsxRuntimeExports.jsx("div", { "aria-label": "Mermaid chart", className: f("flex justify-center", n ? "size-full items-center" : null), dangerouslySetInnerHTML: { __html: T2 }, role: "img" }) }) });
 };
+const SidebarDataContext = reactExports.createContext(null);
+SidebarDataContext.displayName = "SidebarDataContext";
+function SidebarDataProvider({ value, children: children2 }) {
+  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
+}
+function useSidebarDataOptional() {
+  return reactExports.useContext(SidebarDataContext);
+}
 const MAP_HEIGHT = 56;
 const TIMELINE_PADDING = 8;
 const ROW_PADDING = 2;
@@ -45151,14 +45256,6 @@ reactExports.memo(function MiniMap({ timelineRef, rows, scale }) {
     height: MAP_HEIGHT - 4
   } })] });
 });
-const SidebarDataContext = reactExports.createContext(null);
-SidebarDataContext.displayName = "SidebarDataContext";
-function SidebarDataProvider({ value, children: children2 }) {
-  return jsxRuntimeExports.jsx(SidebarDataContext.Provider, { value, children: children2 });
-}
-function useSidebarDataOptional() {
-  return reactExports.useContext(SidebarDataContext);
-}
 const ChunkRow = ReactExports.memo(function ChunkRow2({ chunk, index: index2 }) {
   return jsxRuntimeExports.jsx("div", { className: "text-[11px] rounded-md border p-3", style: {
     borderColor: "var(--ds-gray-300)",
@@ -45194,6 +45291,128 @@ function StreamViewer({ streamId: _streamId, chunks, isLive, error, isLoading, o
     color: "var(--ds-gray-600)"
   }, children: isLive ? "Waiting for stream data..." : "Stream is empty" }) : jsxRuntimeExports.jsx(Yr, { ref: virtuosoRef, totalCount: chunks.length, overscan: 10, endReached: () => onScrollEnd == null ? void 0 : onScrollEnd(), itemContent: (index2) => jsxRuntimeExports.jsx("div", { style: { paddingBottom: 8 }, children: jsxRuntimeExports.jsx(ChunkRow, { chunk: chunks[index2], index: index2 }) }), style: { flex: 1, minHeight: 0 } }) })] });
 }
+const ATTR_FILTER_REGEX = /(?:^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
+function parseSpanSearchQuery(rawQuery) {
+  var _a3, _b, _c;
+  const attributes = [];
+  for (const match of rawQuery.matchAll(ATTR_FILTER_REGEX)) {
+    const key = (_b = (_a3 = match.groups) == null ? void 0 : _a3.key) == null ? void 0 : _b.trim();
+    if (!key)
+      continue;
+    attributes.push({
+      key,
+      value: (((_c = match.groups) == null ? void 0 : _c.value) ?? "").toLocaleLowerCase()
+    });
+  }
+  const text2 = rawQuery.replace(ATTR_FILTER_REGEX, " ").replace(/\s{2,}/g, " ").trim().toLocaleLowerCase();
+  return { text: text2, attributes };
+}
+function isSpanDimmedBySearch(spanId, result) {
+  return result.isActive && !result.matchedSpanIds.has(spanId);
+}
+function searchSpans(spans, rawQuery) {
+  const query = parseSpanSearchQuery(rawQuery);
+  const isActive = Boolean(query.text || query.attributes.length);
+  const matchingSpans = isActive ? spans.filter((span) => spanMatchesQuery(span, query)) : spans;
+  return {
+    isActive,
+    matchedSpanIds: new Set(matchingSpans.map((span) => span.spanId)),
+    matchingSpans,
+    query
+  };
+}
+function spanMatchesQuery(span, query) {
+  if (query.text && !spanMatchesText(span, query.text)) {
+    return false;
+  }
+  return query.attributes.every(({ key, value }) => spanMatchesAttribute(span, key, value));
+}
+function spanMatchesText(span, text2) {
+  return [
+    span.name,
+    span.spanId,
+    span.resource,
+    span.library.name,
+    span.library.version
+  ].filter((value) => typeof value === "string").some((value) => value.toLocaleLowerCase().includes(text2));
+}
+function spanMatchesAttribute(span, key, expectedValue) {
+  const candidates = getSearchValues(span, key);
+  if (!candidates.length)
+    return false;
+  if (!expectedValue) {
+    return candidates.some((value) => value != null);
+  }
+  return candidates.some((value) => valueToSearchString(value).toLocaleLowerCase().includes(expectedValue));
+}
+function getSearchValues(span, key) {
+  const candidates = [];
+  const normalizedKey = key.toLocaleLowerCase();
+  switch (normalizedKey) {
+    case "id":
+    case "spanid":
+    case "span.id":
+      candidates.push(span.spanId);
+      break;
+    case "name":
+      candidates.push(span.name);
+      break;
+    case "resource":
+      candidates.push(span.resource);
+      break;
+    case "library":
+    case "library.name":
+      candidates.push(span.library.name);
+      break;
+    case "library.version":
+      candidates.push(span.library.version);
+      break;
+    case "status":
+    case "status.code":
+      candidates.push(span.status.code);
+      break;
+  }
+  candidates.push(getOwnProperty(span.attributes, key));
+  candidates.push(getPathValue(span.attributes, key));
+  if (!normalizedKey.startsWith("data.")) {
+    candidates.push(getPathValue(span.attributes.data, key));
+  }
+  return candidates.filter((value) => value !== void 0);
+}
+function getOwnProperty(source, key) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  if (!Object.hasOwn(source, key))
+    return void 0;
+  return source[key];
+}
+function getPathValue(source, path2) {
+  if (!source || typeof source !== "object")
+    return void 0;
+  let current = source;
+  for (const segment2 of path2.split(".")) {
+    if (!segment2)
+      return void 0;
+    current = getOwnProperty(current, segment2);
+    if (current === void 0)
+      return void 0;
+  }
+  return current;
+}
+function valueToSearchString(value) {
+  if (value instanceof Date)
+    return value.toISOString();
+  if (typeof value === "string")
+    return value;
+  if (value == null || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
 function computeRootBounds(spans) {
   let minStart = Number.POSITIVE_INFINITY;
   let maxEnd = Number.NEGATIVE_INFINITY;
@@ -45623,7 +45842,7 @@ function SegmentBar({ segments }) {
     }, children: showLabel ? jsxRuntimeExports.jsx(DurationLabel, { label }) : null }, `${seg.status}-${i}`);
   }) });
 }
-const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, onSelect }) {
+const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect }) {
   var _a3;
   const startMs = getHighResInMs(span.startTime);
   const endMs = getHighResInMs(span.endTime);
@@ -45641,7 +45860,7 @@ const TimelineBar = reactExports.memo(function TimelineBar2({ span, viewStart, v
   const handleClick = reactExports.useCallback(() => {
     onSelect(span.spanId);
   }, [onSelect, span.spanId]);
-  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: "group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200", onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
+  return jsxRuntimeExports.jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn$4("group/timeline-row h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200 transition-opacity", isDimmed && "opacity-35"), onClick: handleClick, children: jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem]", style: getBarPositionStyle(geometry), children: geometry.mode.kind === "arrow" ? jsxRuntimeExports.jsx(BoundaryArrow, { direction: geometry.mode.direction }) : geometry.mode.kind === "tiny" ? jsxRuntimeExports.jsx("div", { className: "h-6 rounded-[0.25rem] border", style: { background: fallbackBg, borderColor: fallbackBorder } }) : segments.length > 0 ? jsxRuntimeExports.jsx(SegmentBar, { segments }) : jsxRuntimeExports.jsx(PlainBar, { bg: fallbackBg, border: fallbackBorder, label: showTotalLabel ? totalLabel : null }) }) }) });
 });
 const DELTA_ROW_HEIGHT_PX = 40;
 const DELTA_CAP_HEIGHT_PX = 8;
@@ -45658,7 +45877,7 @@ const DeltaIndicator = reactExports.memo(function DeltaIndicator2({ leftFrac, ri
 function TimelineHeader({ markers: markers2, hoverInfo: hoverInfo2 }) {
   return jsxRuntimeExports.jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: jsxRuntimeExports.jsxs("div", { className: "relative h-full flex-1", children: [markers2.map((m2) => jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m2.position * 100}%` }, children: m2.label }, `${m2.position}-${m2.label}`)), hoverInfo2 && jsxRuntimeExports.jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo2.fraction * 100}%` }, children: hoverInfo2.label })] }) });
 }
-function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, onSelect, hoverFraction, altHeld = false }) {
+function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, searchResult, onSelect, hoverFraction, altHeld = false }) {
   const containerRef = reactExports.useRef(null);
   const [containerWidth, setContainerWidth] = reactExports.useState(0);
   const viewDuration = viewEnd - viewStart;
@@ -45677,7 +45896,7 @@ function Timeline({ spans, viewStart, viewEnd, markers: markers2, selectedId, on
   return jsxRuntimeExports.jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: markers2.map((marker2) => (
     // Skip the "0s" origin marker since the left edge already implies it.
     Math.abs(marker2.value) > 1e-6 ? jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker2.position * 100}%` } }, `${marker2.position}-${marker2.label}`) : null
-  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
+  )) }), hoverFraction != null && jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: TIMELINE_INSET_STYLE, children: jsxRuntimeExports.jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-500", style: { left: `${hoverFraction * 100}%` } }) }), spans.map((span) => jsxRuntimeExports.jsx(TimelineBar, { span, viewStart, viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, isDimmed: isSpanDimmedBySearch(span.spanId, searchResult), onSelect }, span.spanId)), altHeld && jsxRuntimeExports.jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: TIMELINE_INSET_STYLE, children: gaps.map((gap) => jsxRuntimeExports.jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex)) })] });
 }
 const ActiveSpanContext = reactExports.createContext(null);
 ActiveSpanContext.displayName = "ActiveSpanContext";
@@ -45879,46 +46098,6 @@ function getElementRef(element2) {
   }
   return element2.props.ref || element2.ref;
 }
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config2) => (props) => {
-  var _config_compoundVariants;
-  if ((config2 === null || config2 === void 0 ? void 0 : config2.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config2;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config2 === null || config2 === void 0 ? void 0 : (_config_compoundVariants = config2.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -48264,7 +48443,7 @@ const mermaid3ZIDBTTL = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   Mermaid: Nt
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  StreamClickContext as $,
+  Button$1 as $,
   Anchor as A,
   Button as B,
   Content as C,
@@ -48278,70 +48457,73 @@ export {
   Ks as K,
   LoaderCircle as L,
   Spinner as M,
-  Skeleton$1 as N,
-  DecryptClickContext as O,
+  cn$4 as N,
+  Skeleton$1 as O,
   Primitive as P,
   Qe as Q,
   R,
   ServerConfigProvider as S,
   Tooltip as T,
-  isEncryptedMarker as U,
+  DecryptClickContext as U,
   VISUALLY_HIDDEN_STYLES as V,
-  formatDuration as W,
-  DataInspector as X,
+  isEncryptedMarker as W,
+  formatDuration as X,
   Yr as Y,
-  RunClickContext as Z,
+  DataInspector as Z,
   _r as _,
   TooltipTrigger as a,
-  isExpiredMarker as a0,
-  isDoStreamStep as a1,
-  extractConversation as a2,
-  Lock as a3,
-  EVENT_DATA_REF_FIELDS as a4,
-  clsx as a5,
-  cn$4 as a6,
-  getSpanDurationMs as a7,
-  getHighResInMs as a8,
-  ActiveSpanProvider as a9,
-  offset as aA,
-  shift as aB,
-  limitShift as aC,
-  flip as aD,
-  size as aE,
-  arrow as aF,
-  hide as aG,
-  autoUpdate as aH,
-  cancelRun as aI,
-  reenqueueRun as aJ,
-  wakeUpRun as aK,
-  resumeHook as aL,
-  recreateRun as aM,
-  useActiveSpan as aa,
-  useSidebarDataOptional as ab,
-  computeRootBounds as ac,
-  computeTimeMarkers as ad,
-  TIMELINE_PADDING_PX as ae,
-  Timeline as af,
-  TimelineHeader as ag,
-  SidebarDataProvider as ah,
-  hydrateResourceIOWithKey as ai,
-  hydrateResourceIO as aj,
-  fetchHook as ak,
-  fetchStep as al,
-  hasEncryptedFields as am,
-  fetchStreams as an,
-  Slot as ao,
-  Slottable as ap,
-  buttonVariants as aq,
-  isEncryptedData as ar,
-  hydrateData as as,
-  getWebRevivers as at,
-  LIVE_UPDATE_INTERVAL_MS as au,
-  fetchEvent as av,
-  getEncryptionKeyForRun as aw,
-  StreamViewer as ax,
-  composeRefs as ay,
-  useFloating as az,
+  Lock as a0,
+  RunClickContext as a1,
+  StreamClickContext as a2,
+  isExpiredMarker as a3,
+  isDoStreamStep as a4,
+  extractConversation as a5,
+  hasEncryptedFields as a6,
+  EVENT_DATA_REF_FIELDS as a7,
+  useSidebarDataOptional as a8,
+  clsx as a9,
+  StreamViewer as aA,
+  composeRefs as aB,
+  useFloating as aC,
+  offset as aD,
+  shift as aE,
+  limitShift as aF,
+  flip as aG,
+  size as aH,
+  arrow as aI,
+  hide as aJ,
+  autoUpdate as aK,
+  cancelRun as aL,
+  reenqueueRun as aM,
+  wakeUpRun as aN,
+  resumeHook as aO,
+  recreateRun as aP,
+  isSpanDimmedBySearch as aa,
+  getSpanDurationMs as ab,
+  getHighResInMs as ac,
+  ActiveSpanProvider as ad,
+  useActiveSpan as ae,
+  searchSpans as af,
+  computeRootBounds as ag,
+  computeTimeMarkers as ah,
+  TIMELINE_PADDING_PX as ai,
+  Timeline as aj,
+  TimelineHeader as ak,
+  SidebarDataProvider as al,
+  hydrateResourceIOWithKey as am,
+  hydrateResourceIO as an,
+  fetchHook as ao,
+  fetchStep as ap,
+  fetchStreams as aq,
+  Slot as ar,
+  Slottable as as,
+  buttonVariants as at,
+  isEncryptedData as au,
+  hydrateData as av,
+  getWebRevivers as aw,
+  LIVE_UPDATE_INTERVAL_MS as ax,
+  fetchEvent as ay,
+  getEncryptionKeyForRun as az,
   TooltipContent as b,
   createLucideIcon as c,
   cn as d,

package/build/client/assets/{root-DDT0W3fG.js → root-3uuTxUQN.js}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, w as withComponentProps, x as withErrorBoundaryProps, M as Meta, L as Links, S as ScrollRestoration, y as Scripts, O as Outlet, z as useRouteError, i as isRouteErrorResponse, A as Link, B as useNavigate, C as useSearchParams } from "./index-BsV8i_Jn.js";
-import { c as createLucideIcon, u as useServerConfig, T as Tooltip, a as TooltipTrigger, b as TooltipContent, r as runHealthCheck, t as toast, B as Button, L as LoaderCircle, d as cn, e as Toaster$1, S as ServerConfigProvider, f as TooltipProvider } from "./mermaid-3ZIDBTTL-PK-k2mDG.js";
+import { c as createLucideIcon, u as useServerConfig, T as Tooltip, a as TooltipTrigger, b as TooltipContent, r as runHealthCheck, t as toast, B as Button, L as LoaderCircle, d as cn, e as Toaster$1, S as ServerConfigProvider, f as TooltipProvider } from "./mermaid-3ZIDBTTL-3cOa-aZ5.js";
 var M = (e, i, s, u, m, a, l, h) => {
   let d = document.documentElement, w = ["light", "dark"];
   function p(n) {