@mastra/playground-ui 27.0.0-alpha.8 → 27.0.0

package/dist/index.cjs.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('./index.css');const jsxRuntime = require('react/jsx-runtime');
-const lucideReact = require('lucide-react');
+const tokens = require('./tokens.cjs.js');
 const React = require('react');
 const TooltipPrimitive = require('@radix-ui/react-tooltip');
-const tokens = require('./tokens.cjs.js');
 const langJson = require('@codemirror/lang-json');
 const langMarkdown = require('@codemirror/lang-markdown');
 const language = require('@codemirror/language');
@@ -17,6 +16,7 @@ const highlight$1 = require('@lezer/highlight');
 const codemirrorThemeDracula = require('@uiw/codemirror-theme-dracula');
 const ReactCodeMirror = require('@uiw/react-codemirror');
 const autocomplete = require('@codemirror/autocomplete');
+const lucideReact = require('lucide-react');
 const sonner = require('sonner');
 const react = require('@mastra/react');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
@@ -26,7 +26,7 @@ const combobox = require('@base-ui/react/combobox');
 const cmdk = require('cmdk');
 const DialogPrimitive = require('@radix-ui/react-dialog');
 const SelectPrimitive = require('@radix-ui/react-select');
-const RadixTabs = require('@radix-ui/react-tabs');
+const tabs = require('@base-ui/react/tabs');
 const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
 const LabelPrimitive = require('@radix-ui/react-label');
@@ -34,7 +34,7 @@ const Markdown = require('react-markdown');
 const remarkGfm = require('remark-gfm');
 const PopoverPrimitive = require('@radix-ui/react-popover');
 const RadioGroupPrimitive = require('@radix-ui/react-radio-group');
-const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+const scrollArea = require('@base-ui/react/scroll-area');
 const useDebounce = require('use-debounce');
 const SliderPrimitive = require('@radix-ui/react-slider');
 const SwitchPrimitives = require('@radix-ui/react-switch');
@@ -79,60 +79,17 @@ const CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(Check
 const CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
 const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
-const RadixTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixTabs);
 const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
 const LabelPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(LabelPrimitive);
 const PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 const RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RadioGroupPrimitive);
-const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 const SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.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 } = config;
-        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 === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.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((param)=>{
-                let [key, value] = param;
-                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);
-    };
-
 /**
  * Concatenates two arrays faster than the array spread operator.
  */
@@ -3417,6 +3374,185 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+const variants = {
+  // UI text sizes
+  "ui-xs": "text-ui-xs leading-ui-xs",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-smd": "text-ui-smd leading-ui-smd",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  // Header sizes
+  "header-xs": "text-header-xs leading-header-xs",
+  "header-sm": "text-header-sm leading-header-sm",
+  "header-md": "text-header-md leading-header-md",
+  "header-lg": "text-header-lg leading-header-lg",
+  "header-xl": "text-header-xl leading-header-xl"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
+};
+
+const transitions = {
+  // For color changes (background, text, border)
+  colors: "transition-colors duration-normal ease-out-custom",
+  // For transform changes (scale, translate, rotate)
+  transform: "transition-transform duration-normal ease-out-custom",
+  // For all property changes
+  all: "transition-all duration-normal ease-out-custom",
+  // For opacity changes
+  opacity: "transition-opacity duration-normal ease-out-custom",
+  // For shadow changes
+  shadow: "transition-shadow duration-normal ease-out-custom",
+  // For slower transitions (sidebar collapse, etc.)
+  allSlow: "transition-all duration-slow ease-out-custom"
+};
+const hoverEffects = {
+  // Subtle scale effect for buttons and cards
+  scale: "hover:scale-[1.02] active:scale-[0.98]",
+  // Even more subtle scale for active state only
+  scaleSubtle: "active:scale-[0.98]",
+  // Brightness increase
+  brightness: "hover:brightness-110",
+  // Background lift
+  lift: "hover:bg-surface4"
+};
+const focusRing = {
+  // Standard focus ring with glow
+  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+  // Focus ring without glow
+  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
+  // Focus visible only (keyboard navigation)
+  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
+};
+
+const sizeClasses$4 = {
+  sm: "h-avatar-sm w-avatar-sm",
+  md: "h-avatar-md w-avatar-md",
+  lg: "h-avatar-lg w-avatar-lg"
+};
+const Avatar = ({ src, name, size = "sm", interactive = false }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        sizeClasses$4[size],
+        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
+        transitions.all,
+        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
+      ),
+      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
+    }
+  );
+};
+
+const sizes = {
+  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
+  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
+  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
+};
+const Icon = ({ children, className, size = "default", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block", sizes[size], className), ...props, children });
+};
+
+const variantClasses = {
+  default: "text-neutral5 bg-surface4 border-border1",
+  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
+  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
+  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
+  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
+};
+const Badge = ({ icon, variant = "default", className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
+        transitions.colors,
+        icon ? "pl-2 pr-2.5" : "px-2.5",
+        variantClasses[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+const SlashIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
+
+const Breadcrumb = ({ children, label }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-0.5 flex items-center", children }) });
+};
+const Crumb = ({ className, as, isCurrent, action, ...props }) => {
+  const Root = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex h-full shrink-0 items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Root,
+        {
+          "aria-current": isCurrent ? "page" : void 0,
+          className: cn(
+            "text-ui-md leading-ui-md flex items-center gap-2",
+            transitions.colors,
+            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
+            className
+          ),
+          ...props
+        }
+      ),
+      action
+    ] }),
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
+  ] });
+};
+
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.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 } = config;
+        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 === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.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((param)=>{
+                let [key, value] = param;
+                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 TooltipProvider = TooltipPrimitive__namespace.Provider;
 const Tooltip = TooltipPrimitive__namespace.Root;
 const TooltipTrigger = TooltipPrimitive__namespace.Trigger;
@@ -3438,15 +3574,6 @@ const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4,
 ) }));
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 
-const sizes = {
-  sm: "[&>svg]:h-icon-sm [&>svg]:w-icon-sm",
-  default: "[&>svg]:h-icon-default [&>svg]:w-icon-default",
-  lg: "[&>svg]:h-icon-lg [&>svg]:w-icon-lg"
-};
-const Icon = ({ children, className, size = "default", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("block", sizes[size], className), ...props, children });
-};
-
 const formElementSizes = {
   sm: "h-form-sm",
   md: "h-form-md",
@@ -3479,7 +3606,7 @@ const buttonVariants = cva(
         default: "bg-surface3 border border-border1 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
         primary: "bg-surface4 border border-border2 hover:bg-surface5 hover:text-neutral6 active:bg-surface6 text-neutral6",
         cta: "bg-accent1 border border-transparent hover:bg-accent1/90 hover:shadow-glow-accent1 disabled:hover:shadow-none text-surface1 font-medium",
-        ghost: "bg-transparent border border-transparent hover:bg-surface4 hover:text-neutral6 active:bg-surface5 text-neutral4",
+        ghost: "bg-transparent border border-transparent hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral4",
         outline: "bg-transparent border border-border1 hover:bg-surface3 hover:text-neutral6 active:bg-surface4 text-neutral5",
         link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
       },
@@ -3564,189 +3691,6 @@ const ButtonWithTooltip = React.forwardRef(
 );
 ButtonWithTooltip.displayName = "ButtonWithTooltip";
 
-const transitions = {
-  // For color changes (background, text, border)
-  colors: "transition-colors duration-normal ease-out-custom",
-  // For transform changes (scale, translate, rotate)
-  transform: "transition-transform duration-normal ease-out-custom",
-  // For all property changes
-  all: "transition-all duration-normal ease-out-custom",
-  // For opacity changes
-  opacity: "transition-opacity duration-normal ease-out-custom",
-  // For shadow changes
-  shadow: "transition-shadow duration-normal ease-out-custom",
-  // For slower transitions (sidebar collapse, etc.)
-  allSlow: "transition-all duration-slow ease-out-custom"
-};
-const hoverEffects = {
-  // Subtle scale effect for buttons and cards
-  scale: "hover:scale-[1.02] active:scale-[0.98]",
-  // Even more subtle scale for active state only
-  scaleSubtle: "active:scale-[0.98]",
-  // Brightness increase
-  brightness: "hover:brightness-110",
-  // Background lift
-  lift: "hover:bg-surface4"
-};
-const focusRing = {
-  // Standard focus ring with glow
-  default: "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
-  // Focus ring without glow
-  simple: "focus:outline-hidden focus:ring-1 focus:ring-accent1",
-  // Focus visible only (keyboard navigation)
-  visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
-};
-
-const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "min-h-full overflow-hidden", children });
-};
-const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      href,
-      prefetch,
-      to,
-      className: cn(
-        "text-ui-sm flex h-full w-full flex-col justify-center font-medium cursor-pointer",
-        transitions.colors,
-        className
-      ),
-      children
-    }
-  );
-};
-const ThreadList = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-testid": "thread-list", children });
-};
-const ThreadItem = ({ children, isActive, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "li",
-    {
-      className: cn(
-        "border-b border-border1 group flex h-[54px] items-center justify-between gap-2 px-3 py-2",
-        transitions.colors,
-        "hover:bg-surface3",
-        isActive && "bg-accent1Dark",
-        className
-      ),
-      children
-    }
-  );
-};
-const ThreadDeleteButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
-    {
-      variant: "ghost",
-      className: cn(
-        "shrink-0 opacity-0",
-        transitions.all,
-        "group-focus-within:opacity-100 group-hover:opacity-100",
-        "hover:bg-surface4 hover:text-accent2"
-      ),
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-label": "delete thread", className: "text-neutral3 hover:text-accent2 transition-colors" }) })
-    }
-  );
-};
-
-const variants = {
-  // UI text sizes
-  "ui-xs": "text-ui-xs leading-ui-xs",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-smd": "text-ui-smd leading-ui-smd",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  // Header sizes
-  "header-xs": "text-header-xs leading-header-xs",
-  "header-sm": "text-header-sm leading-header-sm",
-  "header-md": "text-header-md leading-header-md",
-  "header-lg": "text-header-lg leading-header-lg",
-  "header-xl": "text-header-xl leading-header-xl"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: cn(variants[variant], font && fonts[font], className), ...props });
-};
-
-const sizeClasses$4 = {
-  sm: "h-avatar-sm w-avatar-sm",
-  md: "h-avatar-md w-avatar-md",
-  lg: "h-avatar-lg w-avatar-lg"
-};
-const Avatar = ({ src, name, size = "sm", interactive = false }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        sizeClasses$4[size],
-        "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
-        transitions.all,
-        interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
-      ),
-      children: src ? /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-center text-neutral4", children: name[0].toUpperCase() })
-    }
-  );
-};
-
-const variantClasses = {
-  default: "text-neutral5 bg-surface4 border-border1",
-  success: "text-notice-success-fg bg-notice-success/20 border-notice-success/20",
-  error: "text-notice-destructive-fg bg-notice-destructive/20 border-notice-destructive/20",
-  info: "text-notice-info-fg bg-notice-info/20 border-notice-info/20",
-  warning: "text-notice-warning-fg bg-notice-warning/20 border-notice-warning/20"
-};
-const Badge = ({ icon, variant = "default", className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "font-mono text-ui-sm gap-1 h-badge-default inline-flex items-center rounded-full border shrink-0",
-        transitions.colors,
-        icon ? "pl-2 pr-2.5" : "px-2.5",
-        variantClasses[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: icon }),
-        children
-      ]
-    }
-  );
-};
-
-const SlashIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.25684 12.6387L10.4003 3.36133H11.7432L6.5997 12.6387H5.25684Z", fill: "currentColor" }) });
-
-const Breadcrumb = ({ children, label }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-0.5 flex items-center", children }) });
-};
-const Crumb = ({ className, as, isCurrent, action, ...props }) => {
-  const Root = as || "span";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex h-full shrink-0 items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Root,
-        {
-          "aria-current": isCurrent ? "page" : void 0,
-          className: cn(
-            "text-ui-md leading-ui-md flex items-center gap-2",
-            transitions.colors,
-            isCurrent ? "text-white" : "text-neutral3 hover:text-neutral5",
-            className
-          ),
-          ...props
-        }
-      ),
-      action
-    ] }),
-    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx("li", { role: "separator", className: "flex h-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("text-neutral2", transitions.colors), children: /* @__PURE__ */ jsxRuntime.jsx(SlashIcon, {}) }) })
-  ] });
-};
-
 function flattenSchemaToVariables(schema, maxDepth = 5) {
   if (!schema?.properties) {
     return [];
@@ -6078,16 +6022,29 @@ CollapsibleContent.displayName = CollapsiblePrimitive__namespace.CollapsibleCont
 const comboboxStyles = {
   /** Root wrapper */
   root: "flex flex-col gap-1.5",
-  /** Trigger — form input look, sized to mirror SelectTrigger. */
+  /** Trigger base — shared layout/typography for all variants. */
   trigger: cn(
-    "inline-flex w-full min-w-32 select-none items-center justify-between gap-1.5 whitespace-nowrap",
-    "rounded-lg border border-border1 bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
+    "inline-flex w-full min-w-32 select-none items-center justify-between gap-1.5 whitespace-nowrap cursor-pointer",
+    "rounded-lg border bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
     "outline-none transition-colors duration-normal ease-out-custom",
-    "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
-    "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
-    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
+    "focus:outline-none focus-visible:outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50"
   ),
+  /** Variant: default — bordered form input look. */
+  triggerDefault: cn(
+    "border-border1",
+    "hover:bg-surface2 hover:text-neutral6 hover:border-border2 active:bg-surface3",
+    "focus-visible:border-border2",
+    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2"
+  ),
+  /** Variant: ghost — borderless, hover-only surface. */
+  triggerGhost: cn(
+    "border-transparent",
+    "hover:bg-surface2 hover:text-neutral6 active:bg-surface3",
+    "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6"
+  ),
+  /** Variant: link — text-only trigger. */
+  triggerLink: cn("border-transparent px-0", "hover:text-neutral6", "data-[popup-open]:text-neutral6"),
   /** Trigger with error state */
   triggerError: "border-accent2 hover:border-accent2 focus-visible:border-accent2",
   /** Chevron icon in trigger */
@@ -6096,7 +6053,7 @@ const comboboxStyles = {
   placeholder: "text-neutral3",
   /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */
   popup: cn(
-    "min-w-(--anchor-width) w-max max-w-[500px] rounded-xl border border-border1 bg-surface3 text-neutral4",
+    "min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4",
     "shadow-dialog",
     "origin-(--transform-origin)",
     "transition-[transform,scale,opacity] duration-150 ease-out",
@@ -6106,9 +6063,9 @@ const comboboxStyles = {
   /** Positioner */
   positioner: "z-50 pointer-events-auto",
   /** Search input container — borderless top section, hairline divider below. */
-  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-2", transitions.colors),
+  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-1.5", transitions.colors),
   /** Search icon */
-  searchIcon: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors),
+  searchIcon: cn("mr-2 h-3.5 w-3.5 shrink-0 text-neutral3", transitions.colors),
   /** Search input */
   searchInput: cn(
     "flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6",
@@ -6117,25 +6074,37 @@ const comboboxStyles = {
     transitions.colors
   ),
   /** Empty state */
-  empty: "not-empty:block hidden py-6 text-center text-ui-smd text-neutral3",
+  empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3",
   /** Options list */
   list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
-  /** Option item base — rounded-lg (8px) sits concentrically inside rounded-xl + p-1. */
+  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
   item: cn(
-    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 py-1.5",
+    "group/item relative flex cursor-pointer select-none items-center gap-2 rounded-md",
+    "pl-2.5 pr-2 py-1.5 min-h-8",
     "text-ui-smd leading-ui-sm text-neutral4",
     "outline-none focus:outline-none focus-visible:outline-none",
     transitions.colors,
-    "data-highlighted:bg-surface4 data-highlighted:text-neutral6"
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
   ),
-  /** Option item with selected state (single select) — quiet emphasis, no accent fill. */
-  itemSelected: "data-selected:text-neutral6",
-  /** Check indicator container */
-  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center",
+  /** Multi-select item — keeps the left checkbox slot, no right indicator. */
+  itemMulti: cn(
+    "relative flex cursor-pointer select-none items-center gap-2.5 rounded-md",
+    "pl-2 pr-2.5 py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  /** Right-aligned slot grouping end content + selection check. */
+  itemRightSlot: "ml-auto flex items-center gap-2 shrink-0",
+  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-accent1",
   /** Check icon (single select) */
-  checkIcon: cn("h-4 w-4 text-neutral6", transitions.opacity),
+  checkIcon: "h-3.5 w-3.5",
   /** Checkbox container (multi select) */
-  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border",
+  checkbox: "flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] border",
   /** Checkbox selected state */
   checkboxSelected: "bg-accent1 border-accent1",
   /** Checkbox unselected state */
@@ -6150,12 +6119,17 @@ const comboboxStyles = {
   optionLabel: "truncate",
   /** Option description */
   optionDescription: "text-ui-sm text-neutral3 truncate",
-  /** Option end slot */
-  optionEnd: "ml-auto",
+  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+  optionEnd: "ml-auto flex items-center shrink-0",
   /** Error message */
   error: "text-ui-sm text-accent2"
 };
 
+const triggerVariantStyles = {
+  default: comboboxStyles.triggerDefault,
+  ghost: comboboxStyles.triggerGhost,
+  link: comboboxStyles.triggerLink
+};
 function Combobox({
   options,
   value,
@@ -6165,6 +6139,7 @@ function Combobox({
   emptyText = "No option found.",
   className,
   disabled = false,
+  variant = "default",
   size = "default",
   open,
   onOpenChange,
@@ -6193,6 +6168,7 @@ function Combobox({
             {
               className: cn(
                 comboboxStyles.trigger,
+                triggerVariantStyles[variant],
                 formElementSizes[size],
                 error && comboboxStyles.triggerError,
                 className
@@ -6212,25 +6188,17 @@ function Combobox({
               /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { className: comboboxStyles.empty, children: emptyText }),
-            /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { className: comboboxStyles.list, children: (option) => /* @__PURE__ */ jsxRuntime.jsxs(
-              combobox.Combobox.Item,
-              {
-                value: option,
-                className: cn(comboboxStyles.item, comboboxStyles.itemSelected),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: comboboxStyles.checkIcon }) }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.optionContent, children: [
-                    option.start,
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.optionText, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
-                      option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
-                    ] }),
-                    option.end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null
-                  ] })
-                ]
-              },
-              option.value
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { className: comboboxStyles.list, children: (option) => /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: comboboxStyles.item, children: [
+              option.start,
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.optionText, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+                option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: comboboxStyles.checkIcon }) }) })
+              ] })
+            ] }, option.value) })
           ] }) }) })
         ]
       }
@@ -6296,7 +6264,7 @@ function MultiCombobox({
             /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { className: comboboxStyles.empty, children: emptyText }),
             /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { className: comboboxStyles.list, children: (option) => {
               const isSelected = value.includes(option.value);
-              return /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: comboboxStyles.item, children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: comboboxStyles.itemMulti, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -6564,44 +6532,91 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 
 const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
-  const [internalTab, setInternalTab] = React.useState(defaultTab);
-  const isControlled = value !== void 0 && onValueChange !== void 0;
-  const currentTab = isControlled ? value : internalTab;
-  const handleTabChange = (newValue) => {
-    const typedValue = newValue;
-    if (isControlled) {
-      onValueChange(typedValue);
-    } else {
-      setInternalTab(typedValue);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
+    {
+      defaultValue: defaultTab,
+      value,
+      onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+      className: cn("overflow-y-auto", className),
+      children
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
+  );
 };
 
-const TabList = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    RadixTabs__namespace.List,
+const tabListVariants = cva("flex items-center relative text-ui-lg", {
+  variants: {
+    variant: {
+      line: "w-max min-w-full border-b border-border1",
+      pill: "w-fit gap-1 rounded-full bg-surface2 p-1",
+      "pill-ghost": "w-fit gap-1 rounded-full p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  }
+});
+const TabList = ({ children, className, variant, sticky }) => {
+  const resolvedVariant = variant ?? "line";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", sticky && "sticky top-0 z-10 bg-surface2"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs.Tabs.List,
     {
-      className: cn("flex items-center relative w-max min-w-full", "text-ui-lg border-b border-border1", className),
-      children
+      "data-variant": resolvedVariant,
+      className: cn("group/tabs-list", tabListVariants({ variant: resolvedVariant }), className),
+      children: [
+        children,
+        resolvedVariant === "line" && /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Indicator,
+          {
+            className: cn(
+              "absolute bottom-0 left-0 bg-neutral3",
+              "w-[var(--active-tab-width)] h-0.5",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateX(var(--active-tab-left))" }
+          }
+        ),
+        (resolvedVariant === "pill" || resolvedVariant === "pill-ghost") && /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Indicator,
+          {
+            className: cn(
+              "absolute top-1/2 left-0 z-0 rounded-full bg-surface4",
+              "w-[var(--active-tab-width)] h-[calc(100%-0.5rem)]",
+              "transition-all duration-200 ease-in-out"
+            ),
+            style: { transform: "translateY(-50%) translateX(var(--active-tab-left))" }
+          }
+        )
+      ]
     }
   ) });
 };
 
 const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixTabs__namespace.Trigger,
+    tabs.Tabs.Tab,
     {
       value,
       disabled,
       className: cn(
-        "py-2 px-5 text-ui-md font-normal text-neutral3 border-b-2 border-transparent",
+        "text-ui-md font-normal text-neutral3",
         "whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none cursor-pointer",
         transitions.colors,
         focusRing.visible,
         "hover:text-neutral4",
-        "data-[state=active]:text-neutral5 data-[state=active]:border-neutral3",
+        "data-[active]:text-neutral5",
         "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:text-neutral3",
+        // Line variant (default) — active state drawn by <Tabs.Indicator> in TabList
+        "group-data-[variant=line]/tabs-list:py-2 group-data-[variant=line]/tabs-list:px-5",
+        "group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent",
+        // Pill variant
+        "group-data-[variant=pill]/tabs-list:relative group-data-[variant=pill]/tabs-list:z-10",
+        "group-data-[variant=pill]/tabs-list:py-1 group-data-[variant=pill]/tabs-list:px-3",
+        "group-data-[variant=pill]/tabs-list:rounded-full",
+        // Pill-ghost variant (pill without list background)
+        "group-data-[variant=pill-ghost]/tabs-list:relative group-data-[variant=pill-ghost]/tabs-list:z-10",
+        "group-data-[variant=pill-ghost]/tabs-list:py-1 group-data-[variant=pill-ghost]/tabs-list:px-3",
+        "group-data-[variant=pill-ghost]/tabs-list:rounded-full",
         className
       ),
       onClick,
@@ -6626,7 +6641,7 @@ const Tab = ({ children, value, onClick, onClose, disabled, className }) => {
 
 const TabContent = ({ children, value, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixTabs__namespace.Content,
+    tabs.Tabs.Panel,
     {
       value,
       className: cn("grid py-3 overflow-y-auto ring-offset-background", focusRing.visible, className),
@@ -6875,13 +6890,13 @@ function Skeleton({ className, ...props }) {
 }
 
 const EntityHeader = ({ icon, title, isLoading, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 w-full overflow-x-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral6 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", className: "bg-surface4 rounded-md p-1", children: icon }),
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-1/3" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title }) })
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 pb-1 w-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-neutral6 flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", children: icon }),
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-32" }) : /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "header-md", as: "h2", className: "truncate font-medium", children: title })
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children })
-  ] });
+    children
+  ] }) });
 };
 
 function FieldBlockColumn({ children, className }) {
@@ -7219,6 +7234,149 @@ function SelectFieldBlock({
   ] });
 }
 
+const InputGroupSizeContext = React__namespace.createContext("md");
+const inputGroupClassName = cn(
+  "group/input-group relative flex w-full min-w-0 items-stretch",
+  "bg-surface2 border border-border1 text-neutral6",
+  "hover:border-border2",
+  formElementRadius,
+  formElementFocusWithin,
+  transitions.all,
+  "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+  "has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:focus-within:ring-error has-[[aria-invalid=true]]:focus-within:shadow-glow-accent2",
+  "has-[>[data-align=block-start]]:flex-col",
+  "has-[>[data-align=block-end]]:flex-col",
+  "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0",
+  "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0",
+  // In flex-col, flex-1 collapses the input to basis-0. Force flex-none so `h-form-*` applies.
+  "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full",
+  "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full"
+);
+const InputGroup = React__namespace.forwardRef(({ className, size = "md", ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", "data-slot": "input-group", className: cn(inputGroupClassName, className), ...props }) });
+});
+InputGroup.displayName = "InputGroup";
+const inputGroupAddonVariants = cva(
+  cn(
+    "flex items-center justify-center gap-2 text-neutral3 select-none",
+    "group-has-[:disabled]/input-group:opacity-50",
+    "[&>svg:not([class*='size-'])]:size-4"
+  ),
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 pr-1 has-[>button]:pl-1",
+        "inline-end": "order-last pr-3 pl-1 has-[>button]:pr-1",
+        "block-start": "order-first w-full justify-start px-3 pt-2 pb-1 border-b border-border1",
+        "block-end": "order-last w-full justify-start px-3 pb-2 pt-1 border-t border-border1"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+const InputGroupAddon = React__namespace.forwardRef(
+  ({ className, align = "inline-start", onClick, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: cn(inputGroupAddonVariants({ align }), className),
+        onClick: (event) => {
+          const target = event.target;
+          if (!target.closest('button, input, textarea, [role="button"]')) {
+            event.currentTarget.parentElement?.querySelector("[data-slot=input-group-control]")?.focus();
+          }
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+InputGroupAddon.displayName = "InputGroupAddon";
+const inputGroupControlTextSize = {
+  sm: "text-ui-sm",
+  md: "text-ui-md",
+  default: "text-ui-md",
+  lg: "text-ui-lg"
+};
+const InputGroupInput = React__namespace.forwardRef(
+  ({ className, testId, error, type = "text", ...props }, ref) => {
+    const size = React__namespace.useContext(InputGroupSizeContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input-group-control",
+        "data-testid": testId,
+        "aria-invalid": error,
+        className: cn(
+          "flex-1 min-w-0 bg-transparent text-neutral6 px-3 outline-hidden",
+          formElementSizes[size],
+          inputGroupControlTextSize[size],
+          "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+          "focus:placeholder:opacity-70",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputGroupInput.displayName = "InputGroupInput";
+const InputGroupTextarea = React__namespace.forwardRef(
+  ({ className, testId, error, ...props }, ref) => {
+    const size = React__namespace.useContext(InputGroupSizeContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref,
+        "data-slot": "input-group-control",
+        "data-testid": testId,
+        "aria-invalid": error,
+        className: cn(
+          "flex-1 min-w-0 min-h-[60px] resize-y bg-transparent text-neutral6 px-3 py-2 outline-hidden",
+          inputGroupControlTextSize[size],
+          "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
+          "focus:placeholder:opacity-70",
+          "disabled:cursor-not-allowed",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputGroupTextarea.displayName = "InputGroupTextarea";
+const InputGroupText = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-2 text-ui-sm text-neutral3 [&_svg]:pointer-events-none",
+        "[&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+InputGroupText.displayName = "InputGroupText";
+const InputGroupButton = React__namespace.forwardRef(
+  ({ size = "icon-sm", variant = "ghost", type = "button", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button, { ref, type, size, variant, ...props });
+  }
+);
+InputGroupButton.displayName = "InputGroupButton";
+
 const themeClasses = {
   light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
   dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
@@ -7614,6 +7772,122 @@ function PropertyFilterActions({
   ] });
 }
 
+const ButtonsGroupOrientationContext = React__namespace.createContext("horizontal");
+const buttonsGroupVariants = cva(
+  // Elevate the focused child's border above its siblings so it isn't clipped in close-spacing.
+  cn("flex", "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10"),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row items-center",
+        vertical: "flex-col items-stretch"
+      },
+      spacing: {
+        default: "gap-2",
+        close: "gap-0"
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        spacing: "close",
+        // Skip separators when collapsing borders so they stay visible.
+        className: cn(
+          "[&>*:not(:last-child)]:rounded-r-none",
+          "[&>*:not(:first-child)]:rounded-l-none",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-ml-px"
+        )
+      },
+      {
+        orientation: "vertical",
+        spacing: "close",
+        // Children carry `rounded-full` (capsule) which looks awkward when stacked vertically.
+        // Replace the outer corners with a regular `rounded-xl` and flatten the inner ones.
+        className: cn(
+          "[&>*:not(:last-child)]:rounded-b-none",
+          "[&>*:not(:first-child)]:rounded-t-none",
+          "[&>:first-child]:rounded-t-xl",
+          "[&>:last-child]:rounded-b-xl",
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px"
+        )
+      }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      spacing: "default"
+    }
+  }
+);
+const ButtonsGroup = React__namespace.forwardRef(
+  ({ children, className, orientation = "horizontal", spacing = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupOrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "buttons-group",
+        "data-orientation": orientation,
+        className: cn(buttonsGroupVariants({ orientation, spacing }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonsGroup.displayName = "ButtonsGroup";
+const ButtonsGroupSeparator = React__namespace.forwardRef(
+  ({ className, orientation, ...props }, ref) => {
+    const parentOrientation = React__namespace.useContext(ButtonsGroupOrientationContext);
+    const resolved = orientation ?? (parentOrientation === "vertical" ? "horizontal" : "vertical");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": resolved,
+        "data-slot": "buttons-group-separator",
+        className: cn("self-stretch bg-border1", resolved === "vertical" ? "w-px" : "h-px", className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupSeparator.displayName = "ButtonsGroupSeparator";
+const buttonsGroupTextVariants = cva(
+  cn(
+    "inline-flex items-center justify-center bg-surface3 border border-border1 text-neutral5 select-none",
+    "rounded-full gap-[.75em] px-[1em] whitespace-nowrap shrink-0",
+    "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50"
+  ),
+  {
+    variants: {
+      size: {
+        sm: `${formElementSizes.sm} text-ui-sm`,
+        md: `${formElementSizes.md} text-ui-md`,
+        default: `${formElementSizes.default} text-ui-md`,
+        lg: `${formElementSizes.lg} text-ui-lg`
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const ButtonsGroupText = React__namespace.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "buttons-group-text",
+        className: cn(buttonsGroupTextVariants({ size }), className),
+        ...props
+      }
+    );
+  }
+);
+ButtonsGroupText.displayName = "ButtonsGroupText";
+
 const RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref });
 });
@@ -7752,13 +8026,40 @@ function stringifyTokenValue(value) {
   if (Array.isArray(value)) return value.length === 0 ? "Any" : value.join(", ");
   return value;
 }
-const PILL_CLASS = "inline-flex";
-const SHARED_LABEL_OPERATOR_CLASSES = `${formElementSizes.md} border-y-2 border-border1 px-[.75em] text-neutral3 whitespace-nowrap flex items-center`;
-const LABEL_CLASS = `${SHARED_LABEL_OPERATOR_CLASSES} text-ui-md rounded-l-lg border-l-2 border-r-1`;
-const OPERATOR_CLASS = `${SHARED_LABEL_OPERATOR_CLASSES} text-ui-md `;
-const REMOVE_CLASS = "rounded-tl-none rounded-bl-none border-l-transparent";
-const INPUT_CLASS = "rounded-none";
-const VALUE_BUTTON_CLASS = "rounded-none";
+const DEFAULT_LOCKED_TOOLTIP = "This filter is set by the current context and cannot be removed here.";
+function lookupOptionLabel(field, value) {
+  if (field.kind === "pick-multi" && field.options) {
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "Any";
+      return value.map((v) => field.options.find((o) => o.value === v)?.label ?? v).join(", ");
+    }
+    return field.options.find((o) => o.value === value)?.label ?? value;
+  }
+  return stringifyTokenValue(value);
+}
+function LockedTokenPill({ field, value, tooltipContent }) {
+  const display = lookupOptionLabel(field, value);
+  const lockA11yLabel = `${field.label} filter is locked by context`;
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ButtonsGroup,
+      {
+        spacing: "close",
+        "data-locked-field-id": field.id,
+        "data-property-filter-pill": "locked",
+        tabIndex: 0,
+        "aria-label": lockA11yLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: field.label }),
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: "is" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: display }),
+          /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockIcon, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
+  ] }) });
+}
 function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }) {
   const [draft, setDraft] = React.useState(value);
   const inputRef = React.useRef(null);
@@ -7768,9 +8069,9 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
   React.useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
   }, [autoFocus]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PILL_CLASS, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL_CLASS, children: field.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: OPERATOR_CLASS, children: "is" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: "is" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -7779,7 +8080,6 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
         disabled,
         value: draft,
         placeholder: field.placeholder ?? `Enter ${field.label}`,
-        className: INPUT_CLASS,
         onChange: (e) => {
           const next = e.target.value;
           setDraft(next);
@@ -7804,7 +8104,6 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
         type: "button",
         disabled,
         "aria-label": `Remove ${field.label} filter`,
-        className: REMOVE_CLASS,
         size: "md",
         onMouseDown: (e) => e.preventDefault(),
         onClick: onRemove,
@@ -7815,20 +8114,11 @@ function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }
 }
 function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }) {
   const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PILL_CLASS, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL_CLASS, children: field.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: OPERATOR_CLASS, children: "is" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: field.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: "is" }),
     /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          disabled,
-          size: "md",
-          className: VALUE_BUTTON_CLASS,
-          children: stringifyTokenValue(token.value)
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", disabled, size: "md", children: stringifyTokenValue(token.value) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", sideOffset: 8, className: "w-64 p-2", "data-pick-multi-panel": true, children: /* @__PURE__ */ jsxRuntime.jsx(PickMultiPanel, { field, tokens, onChange }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -7837,7 +8127,6 @@ function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled
         type: "button",
         disabled,
         "aria-label": `Remove ${field.label} filter`,
-        className: REMOVE_CLASS,
         size: "md",
         onClick: onRemove,
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
@@ -7850,9 +8139,12 @@ function PropertyFilterApplied({
   tokens,
   onTokensChange,
   disabled,
-  autoFocusFieldId
+  autoFocusFieldId,
+  lockedFieldIds,
+  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP
 }) {
   if (tokens.length === 0) return null;
+  const lockedSet = new Set(lockedFieldIds ?? []);
   const replaceTokenAt = (index, next) => {
     const copy = [...tokens];
     copy[index] = next;
@@ -7864,6 +8156,17 @@ function PropertyFilterApplied({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-wrap", children: tokens.map((token, index) => {
     const field = fields.find((f) => f.id === token.fieldId);
     if (!field) return null;
+    if (lockedSet.has(token.fieldId)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        LockedTokenPill,
+        {
+          field,
+          value: token.value,
+          tooltipContent: lockedTooltipContent
+        },
+        `${token.fieldId}-${index}`
+      );
+    }
     if (field.kind === "text" && typeof token.value === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx(
         TextTokenPill,
@@ -7898,10 +8201,10 @@ function PropertyFilterApplied({
         `${token.fieldId}-${index}`
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PILL_CLASS, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: LABEL_CLASS, children: field.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: OPERATOR_CLASS, children: "is" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2.5 py-1.5 max-w-[20rem] truncate", children: stringifyTokenValue(token.value) }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { spacing: "close", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: field.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: "is" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonsGroupText, { size: "md", children: stringifyTokenValue(token.value) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
@@ -7909,7 +8212,6 @@ function PropertyFilterApplied({
           disabled,
           size: "md",
           "aria-label": `Remove ${field.label} filter`,
-          className: REMOVE_CLASS,
           onClick: () => removeTokenAt(index),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
         }
@@ -7925,8 +8227,14 @@ function PropertyFilterCreator({
   label = "Add Filter",
   disabled,
   size,
-  onStartTextFilter
+  onStartTextFilter,
+  hiddenFieldIds
 }) {
+  const visibleFields = React.useMemo(() => {
+    if (!hiddenFieldIds || hiddenFieldIds.length === 0) return fields;
+    const hidden = new Set(hiddenFieldIds);
+    return fields.filter((f) => !hidden.has(f.id));
+  }, [fields, hiddenFieldIds]);
   const [open, setOpen] = React.useState(false);
   const [fieldId, setFieldId] = React.useState();
   const [textValue, setTextValue] = React.useState("");
@@ -7942,7 +8250,7 @@ function PropertyFilterCreator({
   React.useEffect(() => {
     if (!open) setOpenPickMultiFieldId(void 0);
   }, [open]);
-  const selectedField = React.useMemo(() => fields.find((f) => f.id === fieldId), [fields, fieldId]);
+  const selectedField = React.useMemo(() => visibleFields.find((f) => f.id === fieldId), [visibleFields, fieldId]);
   const singleUseFieldIds = React.useMemo(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const token of tokens) {
@@ -8062,7 +8370,7 @@ function PropertyFilterCreator({
                 else next = current <= 0 ? buttons.length - 1 : current - 1;
                 buttons[next]?.focus();
               },
-              children: fields.length > 0 ? fields.map((f) => {
+              children: visibleFields.length > 0 ? visibleFields.map((f) => {
                 const used = singleUseFieldIds.has(f.id);
                 if (f.kind === "pick-multi") {
                   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8331,30 +8639,34 @@ const useAutoscroll = (ref, { enabled = true }) => {
   }, [enabled, ref]);
 };
 
-function useScrollOverflowAttrs(ref) {
-  React__namespace.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const update = () => {
-      const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
-      el.toggleAttribute("data-overflow-y-start", scrollTop > 0);
-      el.toggleAttribute("data-overflow-y-end", scrollTop + clientHeight < scrollHeight - 1);
-      el.toggleAttribute("data-overflow-x-start", scrollLeft > 0);
-      el.toggleAttribute("data-overflow-x-end", scrollLeft + clientWidth < scrollWidth - 1);
-    };
-    update();
-    el.addEventListener("scroll", update, { passive: true });
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    const inner = el.firstElementChild;
-    if (inner) ro.observe(inner);
-    return () => {
-      el.removeEventListener("scroll", update);
-      ro.disconnect();
-    };
-  }, [ref]);
+function resolveMask(mask, orientation) {
+  if (mask === false) return { top: false, bottom: false, left: false, right: false };
+  const vertical = orientation === "vertical" || orientation === "both";
+  const horizontal = orientation === "horizontal" || orientation === "both";
+  const sides = { top: vertical, bottom: vertical, left: horizontal, right: horizontal };
+  if (mask === true || mask === void 0) return sides;
+  if (mask.y !== void 0) {
+    sides.top = mask.y;
+    sides.bottom = mask.y;
+  }
+  if (mask.x !== void 0) {
+    sides.left = mask.x;
+    sides.right = mask.x;
+  }
+  if (mask.top !== void 0) sides.top = mask.top;
+  if (mask.bottom !== void 0) sides.bottom = mask.bottom;
+  if (mask.left !== void 0) sides.left = mask.left;
+  if (mask.right !== void 0) sides.right = mask.right;
+  return sides;
+}
+function maskClasses(sides) {
+  return cn(
+    sides.top && "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)]",
+    sides.bottom && "data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)]",
+    sides.left && "data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)]",
+    sides.right && "data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]"
+  );
 }
-const MASK_CLASSES = "data-[overflow-y-start]:mask-t-from-[calc(100%-2rem)] data-[overflow-y-end]:mask-b-from-[calc(100%-2rem)] data-[overflow-x-start]:mask-l-from-[calc(100%-2rem)] data-[overflow-x-end]:mask-r-from-[calc(100%-2rem)]";
 const ScrollArea = React__namespace.forwardRef(
   ({
     className,
@@ -8363,46 +8675,58 @@ const ScrollArea = React__namespace.forwardRef(
     maxHeight,
     autoScroll = false,
     orientation = "vertical",
-    showMask = false,
+    mask,
+    showMask,
     ...props
   }, ref) => {
     const areaRef = React__namespace.useRef(null);
     useAutoscroll(areaRef, { enabled: autoScroll });
-    useScrollOverflowAttrs(areaRef);
-    return /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+    const effectiveMask = mask !== void 0 ? mask : showMask;
+    const sides = resolveMask(effectiveMask, orientation);
+    const viewportStyle = {};
+    if (maxHeight) viewportStyle.maxHeight = maxHeight;
+    if (orientation === "vertical") {
+      viewportStyle.overflowX = "hidden";
+      viewportStyle.overflowY = "scroll";
+    } else if (orientation === "horizontal") {
+      viewportStyle.overflowX = "scroll";
+      viewportStyle.overflowY = "hidden";
+    }
+    const contentStyle = orientation === "vertical" ? { minWidth: "0px" } : orientation === "horizontal" ? { minHeight: "0px" } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(scrollArea.ScrollArea.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ScrollAreaPrimitive__namespace.Viewport,
+        scrollArea.ScrollArea.Viewport,
         {
           ref: areaRef,
-          className: cn("h-full w-full rounded-[inherit] [&>div]:block!", showMask && MASK_CLASSES, viewPortClassName),
-          style: maxHeight ? { maxHeight } : void 0,
-          children
+          className: cn("h-full w-full rounded-[inherit]", maskClasses(sides), viewPortClassName),
+          style: viewportStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Content, { style: contentStyle, children })
         }
       ),
       (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" }),
       (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal" }),
-      orientation === "both" && /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      orientation === "both" && /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Corner, {})
     ] });
   }
 );
-ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+ScrollArea.displayName = "ScrollArea";
 const ScrollBar = React__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  scrollArea.ScrollArea.Scrollbar,
   {
     ref,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-all duration-normal ease-out-custom",
-      "opacity-0 hover:opacity-100 data-[state=visible]:opacity-100",
+      "flex touch-none select-none transition-opacity duration-normal ease-out-custom",
+      "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 data-[scrolling]:duration-0",
       orientation === "vertical" && "h-full w-1.5 p-px",
       orientation === "horizontal" && "h-1.5 w-full flex-col p-px",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-neutral4/30 hover:bg-neutral4/60 transition-colors duration-normal" })
   }
 ));
-ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
+ScrollBar.displayName = "ScrollBar";
 
 const searchbarSizeClasses = {
   sm: formElementSizes.sm,
@@ -8699,22 +9023,6 @@ function Truncate({
   ] });
 }
 
-function ButtonsGroup({ children, className, spacing = "default" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        `flex gap-2 items-center`,
-        {
-          "gap-0 [&>*:not(:last-child)]:rounded-r-none [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:-ml-px": spacing === "close"
-        },
-        className
-      ),
-      children
-    }
-  );
-}
-
 function MainContentLayout({
   children,
   className,
@@ -10264,7 +10572,7 @@ function MainSidebarNav({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cn("flex flex-col flex-1 min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { showMask: true, className: "flex-1 min-h-0", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: cn("flex flex-col flex-1 min-h-0", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1 min-h-0", children }) });
 }
 
 function MainSidebarNavSeparator({ className, ...props }) {
@@ -15656,29 +15964,20 @@ const PanelSeparator = () => {
         "group/separator relative w-0 bg-transparent z-10",
         "focus:outline-hidden focus-visible:outline-hidden"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: cn("absolute inset-y-0 -left-1 -right-1", "cursor-col-resize touch-none"), children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          "aria-hidden": true,
           className: cn(
-            "absolute inset-y-0 -left-1 -right-1 flex items-center justify-center",
-            "cursor-col-resize touch-none"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "block h-full w-px bg-border1 pointer-events-none",
-                "transition-[width,background-color] duration-150 ease-out motion-reduce:transition-none",
-                "group-hover/separator:w-0.5 group-hover/separator:bg-surface5",
-                "group-data-[separator='hover']/separator:w-0.5 group-data-[separator='hover']/separator:bg-surface5",
-                "group-data-[separator='active']/separator:w-0.5 group-data-[separator='active']/separator:bg-accent1",
-                "group-focus-visible/separator:w-0.5 group-focus-visible/separator:bg-accent1"
-              )
-            }
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "h-10 w-0.5 bg-surface5 pointer-events-none rounded-full",
+            "transition-all duration-150 ease-out motion-reduce:transition-none",
+            "group-hover/separator:h-12 group-hover/separator:w-1 group-hover/separator:bg-surface5",
+            "group-data-[separator='hover']/separator:h-12 group-data-[separator='hover']/separator:w-1 group-data-[separator='hover']/separator:bg-surface5",
+            "group-data-[separator='active']/separator:h-12 group-data-[separator='active']/separator:w-1 group-data-[separator='active']/separator:bg-accent1",
+            "group-focus-visible/separator:h-12 group-focus-visible/separator:w-1 group-focus-visible/separator:bg-accent1"
           )
         }
-      )
+      ) })
     }
   );
 };
@@ -17694,6 +17993,7 @@ const TRACE_SYNTHETIC_FILTER_FIELD_IDS = ["rootEntityType", "status"];
 const TRACE_ROOT_ENTITY_TYPE_PARAM = "rootEntityType";
 const TRACE_STATUS_PARAM = "status";
 const TRACE_LIST_MODE_PARAM = "listMode";
+const TRACE_ANCHOR_SPAN_ID_PARAM = "anchorSpanId";
 const TRACE_LIST_MODE_VALUES = /* @__PURE__ */ new Set(["traces", "branches"]);
 const TRACE_DATE_PRESET_PARAM = "datePreset";
 const TRACE_DATE_FROM_PARAM = "dateFrom";
@@ -18179,7 +18479,7 @@ function useDrilldown() {
   return { getTracesHref, getLogsHref, getBucketTracesHref };
 }
 
-const formatHierarchicalSpans = (spans) => {
+const formatHierarchicalSpans = (spans, anchorSpanId) => {
   if (!spans || spans.length === 0) {
     return [];
   }
@@ -18207,9 +18507,10 @@ const formatHierarchicalSpans = (spans) => {
     };
     spanMap.set(spanRecord.spanId, uiSpan);
   });
+  const isAnchor = (spanRecord) => anchorSpanId ? spanRecord.spanId === anchorSpanId : spanRecord?.parentSpanId == null;
   spans.forEach((spanRecord) => {
     const uiSpan = spanMap.get(spanRecord.spanId);
-    if (spanRecord?.parentSpanId == null) {
+    if (isAnchor(spanRecord)) {
       if (overallEndDate && uiSpan.endTime && overallEndDate > new Date(uiSpan.endTime)) {
         uiSpan.endTime = overallEndDate.toISOString();
         const overallEndTime = new Date(overallEndDate).getTime();
@@ -18218,7 +18519,7 @@ const formatHierarchicalSpans = (spans) => {
       }
       rootSpans.push(uiSpan);
     } else {
-      const parent = spanMap.get(spanRecord.parentSpanId);
+      const parent = spanRecord.parentSpanId ? spanMap.get(spanRecord.parentSpanId) : void 0;
       if (parent) {
         parent.spans.push(uiSpan);
       } else {
@@ -18931,10 +19232,15 @@ function TracesToolbar({
   filterFields,
   filterTokens,
   onFilterTokensChange,
-  autoFocusFilterFieldId
+  autoFocusFilterFieldId,
+  lockedFieldIds,
+  lockedTooltipContent
 }) {
   const hasActiveFilters = filterTokens.length > 0;
-  const hasNonDefaultFilter = filterTokens.some((token) => isNonDefaultFilter$1(token, filterFields));
+  const lockedSet = new Set(lockedFieldIds ?? []);
+  const editableTokens = filterTokens.filter((t) => !lockedSet.has(t.fieldId));
+  const hasNonDefaultFilter = editableTokens.some((token) => isNonDefaultFilter$1(token, filterFields));
+  const hasEditableFilters = editableTokens.length > 0;
   return (
     // 1fr | auto — pills wrap in the first column; Clear stays pinned to the
     // top of the second column regardless of how many pill rows render.
@@ -18946,10 +19252,12 @@ function TracesToolbar({
           tokens: filterTokens,
           onTokensChange: onFilterTokensChange,
           disabled: isLoading,
-          autoFocusFieldId: autoFocusFilterFieldId
+          autoFocusFieldId: autoFocusFilterFieldId,
+          lockedFieldIds,
+          lockedTooltipContent
         }
       ),
-      hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
+      hasActiveFilters && hasEditableFilters && /* @__PURE__ */ jsxRuntime.jsx(
         PropertyFilterActions,
         {
           disabled: isLoading,
@@ -18994,7 +19302,8 @@ function TraceDataPanelView({
   placement,
   timelineChartWidth = "default",
   LinkComponent,
-  traceHref
+  traceHref,
+  anchorSpanId
 }) {
   const isOnTracePage = placement === "trace-page";
   const [internalCollapsed, setInternalCollapsed] = React.useState(false);
@@ -19023,14 +19332,17 @@ function TraceDataPanelView({
     const el = contentRef.current.querySelector(`[data-span-id="${selectedSpanId}"]`);
     el?.scrollIntoView({ block: "nearest" });
   }, [selectedSpanId]);
-  const hierarchicalSpans = React.useMemo(() => formatHierarchicalSpans(spans ?? []), [spans]);
+  const hierarchicalSpans = React.useMemo(() => formatHierarchicalSpans(spans ?? [], anchorSpanId), [spans, anchorSpanId]);
   const [expandedSpanIds, setExpandedSpanIds] = React.useState([]);
   React.useEffect(() => {
     if (hierarchicalSpans.length > 0) {
       setExpandedSpanIds(getAllSpanIds(hierarchicalSpans));
     }
   }, [hierarchicalSpans]);
-  const rootSpan = React.useMemo(() => spans?.find((s) => s.parentSpanId == null), [spans]);
+  const rootSpan = React.useMemo(
+    () => anchorSpanId ? spans?.find((s) => s.spanId === anchorSpanId) : spans?.find((s) => s.parentSpanId == null),
+    [spans, anchorSpanId]
+  );
   const handleSpanClick = (id) => {
     const newId = selectedSpanId === id ? void 0 : id;
     setSelectedSpanId(newId);
@@ -19195,7 +19507,8 @@ function SpanDataPanelView({
   scoringTabSlot,
   scoringTabBadge,
   feedbackTabSlot,
-  feedbackTabBadge
+  feedbackTabBadge,
+  isAnchor
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPanel, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DataPanel.Header, { children: [
@@ -19230,7 +19543,8 @@ function SpanDataPanelView({
         scoringTabSlot,
         scoringTabBadge,
         feedbackTabSlot,
-        feedbackTabBadge
+        feedbackTabBadge,
+        isAnchor
       }
     )
   ] });
@@ -19244,7 +19558,8 @@ function SpanDataPanelContent({
   scoringTabSlot,
   scoringTabBadge,
   feedbackTabSlot,
-  feedbackTabBadge
+  feedbackTabBadge,
+  isAnchor
 }) {
   const durationMs = span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
   const usage = span.attributes?.usage;
@@ -19252,7 +19567,7 @@ function SpanDataPanelContent({
     isTokenLimitExceeded(span) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "warning", title: "Token Limit Exceeded", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Message, { children: getTokenLimitMessage(span) }) }) }),
     usage && /* @__PURE__ */ jsxRuntime.jsx(SpanTokenUsage, { usage, className: "mb-3" }),
     /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
-      span.parentSpanId == null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      (isAnchor ?? span.parentSpanId == null) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         span.traceId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Trace Id" }),
           /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.ValueWithCopyBtn, { copyTooltip: "Copy Trace Id to clipboard", copyValue: span.traceId, children: span.traceId })
@@ -19604,6 +19919,7 @@ function TracesListView({
   setEndOfListElement,
   filtersApplied,
   featuredTraceId,
+  featuredSpanId,
   onTraceClick,
   groupByThread,
   threadTitles
@@ -19612,7 +19928,7 @@ function TracesListView({
   const items = React.useMemo(() => {
     if (traces.length === 0) return [];
     if (!groupByThread) {
-      return traces.map((trace) => ({ kind: "row", key: trace.traceId, trace }));
+      return traces.map((trace) => ({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace }));
     }
     const { groups, ungrouped } = groupTracesByThread(traces);
     const result = [];
@@ -19639,7 +19955,7 @@ function TracesListView({
         ] })
       });
       for (const trace of group.traces) {
-        result.push({ kind: "row", key: trace.traceId, trace });
+        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
       }
     }
     if (ungrouped.length > 0) {
@@ -19656,7 +19972,7 @@ function TracesListView({
         ] })
       });
       for (const trace of ungrouped) {
-        result.push({ kind: "row", key: trace.traceId, trace });
+        result.push({ kind: "row", key: `${trace.traceId}:${trace.spanId ?? ""}`, trace });
       }
     }
     return result;
@@ -19705,7 +20021,7 @@ function TracesListView({
           return /* @__PURE__ */ jsxRuntime.jsx(TracesDataList.Subheader, { ref: virtualizer.measureElement, "data-index": vi.index, children: item.node }, item.key);
         }
         const trace = item.trace;
-        const isFeatured = trace.traceId === featuredTraceId;
+        const isFeatured = trace.traceId === featuredTraceId && (featuredSpanId == null || trace.spanId === featuredSpanId);
         const displayDate = trace.startedAt ?? trace.createdAt;
         const entityName = trace.entityName || trace.entityId || trace.attributes?.agentId || trace.attributes?.workflowId;
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -19741,6 +20057,23 @@ function TracesListView({
   ] });
 }
 
+const TRACES_LIST_MODE_LABELS = {
+  traces: "Top-level traces only",
+  branches: "All traces, nested too"
+};
+function TracesListModeToggle({ value, onChange, disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "md", variant: "default", disabled, children: [
+      TRACES_LIST_MODE_LABELS[value],
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu.RadioGroup, { value, onValueChange: (v) => onChange(v), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: "traces", children: TRACES_LIST_MODE_LABELS.traces }),
+      /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioItem, { value: "branches", children: TRACES_LIST_MODE_LABELS.branches })
+    ] }) })
+  ] });
+}
+
 function TracesErrorContent({ error, resource, errorTitle }) {
   if (is401UnauthorizedError(error)) return /* @__PURE__ */ jsxRuntime.jsx(SessionExpired, {});
   if (is403ForbiddenError(error)) return /* @__PURE__ */ jsxRuntime.jsx(PermissionDenied, { resource });
@@ -19807,6 +20140,26 @@ const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
   ) });
 };
 
+const IMMUTABLE_CACHE_TIME$2 = 1e3 * 60 * 60 * 24 * 30;
+function useBranch({ traceId, spanId, depth }) {
+  const client = react.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["branch", traceId, spanId, depth],
+    queryFn: async () => {
+      if (!traceId || !spanId) {
+        throw new Error("traceId and spanId are required");
+      }
+      return client.getBranch({ traceId, spanId, depth });
+    },
+    enabled: !!traceId && !!spanId,
+    staleTime: (query) => {
+      const data = query.state.data;
+      const isFinished = data?.spans.every((s) => Boolean(s.endedAt));
+      return isFinished ? IMMUTABLE_CACHE_TIME$2 : 0;
+    }
+  });
+}
+
 const IMMUTABLE_CACHE_TIME$1 = 1e3 * 60 * 60 * 24 * 30;
 function useSpanDetail(traceId, spanId) {
   const client = react.useMastraClient();
@@ -19853,6 +20206,37 @@ function useTraceLightSpans(traceId) {
   });
 }
 
+function useTraceOrBranchSpans({
+  traceId,
+  anchorSpanId,
+  listMode,
+  depth
+}) {
+  const isBranches = listMode === "branches";
+  const traceQuery = useTraceLightSpans(isBranches ? null : traceId);
+  const branchQuery = useBranch({
+    traceId: isBranches ? traceId : null,
+    spanId: isBranches ? anchorSpanId : null,
+    depth
+  });
+  if (isBranches) {
+    return {
+      spans: branchQuery.data?.spans,
+      anchorSpanId: anchorSpanId ?? void 0,
+      isLoading: branchQuery.isLoading,
+      isError: branchQuery.isError,
+      error: branchQuery.error
+    };
+  }
+  return {
+    spans: traceQuery.data?.spans,
+    anchorSpanId: void 0,
+    isLoading: traceQuery.isLoading,
+    isError: traceQuery.isError,
+    error: traceQuery.error
+  };
+}
+
 function useTraceSpans(traceId) {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
@@ -19873,7 +20257,7 @@ const fetchTracesFn = async ({
   page,
   perPage,
   filters,
-  listMode = "traces"
+  listMode = "branches"
 }) => {
   const params = {
     pagination: {
@@ -19914,7 +20298,7 @@ function selectUniqueTraces(data) {
   }
   return { spans, threadTitles };
 }
-const useTraces = ({ filters, listMode = "traces" }) => {
+const useTraces = ({ filters, listMode = "branches" }) => {
   const client = react.useMastraClient();
   const { inView: isEndOfListInView, setRef: setEndOfListElement } = useInView();
   const query = reactQuery.useInfiniteQuery({
@@ -20026,13 +20410,17 @@ function useTraceSpanNavigation(lightSpans, featuredSpanId, onSpanChange) {
   return { handlePreviousSpan, handleNextSpan, timelineSpanIds };
 }
 
-function useTraceListNavigation(traces, featuredTraceId, onTraceChange) {
+function useTraceListNavigation(traces, featuredTraceId, featuredSpanId, onTraceChange) {
   const featuredTraceIdx = React.useMemo(
-    () => featuredTraceId ? traces.findIndex((t) => t.traceId === featuredTraceId) : -1,
-    [traces, featuredTraceId]
+    () => featuredTraceId ? traces.findIndex(
+      (t) => t.traceId === featuredTraceId && (featuredSpanId == null || t.spanId === featuredSpanId)
+    ) : -1,
+    [traces, featuredTraceId, featuredSpanId]
   );
-  const handlePreviousTrace = featuredTraceIdx > 0 ? () => onTraceChange(traces[featuredTraceIdx - 1].traceId) : void 0;
-  const handleNextTrace = featuredTraceIdx >= 0 && featuredTraceIdx < traces.length - 1 ? () => onTraceChange(traces[featuredTraceIdx + 1].traceId) : void 0;
+  const passSpanId = featuredSpanId != null;
+  const navigateTo = (row) => onTraceChange(row.traceId, passSpanId ? row.spanId ?? void 0 : void 0);
+  const handlePreviousTrace = featuredTraceIdx > 0 ? () => navigateTo(traces[featuredTraceIdx - 1]) : void 0;
+  const handleNextTrace = featuredTraceIdx >= 0 && featuredTraceIdx < traces.length - 1 ? () => navigateTo(traces[featuredTraceIdx + 1]) : void 0;
   return { featuredTraceIdx, handlePreviousTrace, handleNextTrace };
 }
 
@@ -20051,6 +20439,7 @@ const PRESET_MS$1 = {
 function clearSelectionParams$1(params) {
   params.delete(TRACE_ID_PARAM);
   params.delete(SPAN_ID_PARAM);
+  params.delete(TRACE_ANCHOR_SPAN_ID_PARAM);
   params.delete(TAB_PARAM);
   params.delete(SCORE_ID_PARAM);
 }
@@ -20081,12 +20470,13 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
   datePresetRef.current = datePreset;
   const traceIdParam = searchParams.get(TRACE_ID_PARAM) || void 0;
   const spanIdParam = searchParams.get(SPAN_ID_PARAM) || void 0;
+  const anchorSpanIdParam = searchParams.get(TRACE_ANCHOR_SPAN_ID_PARAM) || void 0;
   const tabParam = searchParams.get(TAB_PARAM);
   const spanTabParam = tabParam === "scoring" ? "scoring" : tabParam === "feedback" ? "feedback" : tabParam === "details" ? "details" : void 0;
   const scoreIdParam = searchParams.get(SCORE_ID_PARAM) || void 0;
   const listMode = React.useMemo(() => {
     const value = searchParams.get(TRACE_LIST_MODE_PARAM);
-    return value && TRACE_LIST_MODE_VALUES.has(value) ? value : "traces";
+    return value && TRACE_LIST_MODE_VALUES.has(value) ? value : "branches";
   }, [searchParams]);
   const selectedEntityOption = React.useMemo(
     () => ROOT_ENTITY_TYPE_OPTIONS.find((option) => option.entityType === searchParams.get(TRACE_ROOT_ENTITY_TYPE_PARAM)),
@@ -20098,7 +20488,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
   }, [searchParams]);
   const filterTokens = React.useMemo(() => getTracePropertyFilterTokens(searchParams), [searchParams]);
   const handleTraceClick = React.useCallback(
-    (traceId) => {
+    (traceId, spanId, anchorSpanId) => {
       setSearchParams(
         (prev) => {
           const next = new URLSearchParams(prev);
@@ -20107,7 +20497,16 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
           } else {
             next.delete(TRACE_ID_PARAM);
           }
-          next.delete(SPAN_ID_PARAM);
+          if (spanId) {
+            next.set(SPAN_ID_PARAM, spanId);
+          } else {
+            next.delete(SPAN_ID_PARAM);
+          }
+          if (anchorSpanId) {
+            next.set(TRACE_ANCHOR_SPAN_ID_PARAM, anchorSpanId);
+          } else {
+            next.delete(TRACE_ANCHOR_SPAN_ID_PARAM);
+          }
           next.delete(TAB_PARAM);
           next.delete(SCORE_ID_PARAM);
           return next;
@@ -20239,6 +20638,24 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     },
     [setSearchParams]
   );
+  const handleListModeChange = React.useCallback(
+    (mode) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          if (mode === "branches") {
+            next.delete(TRACE_LIST_MODE_PARAM);
+          } else {
+            next.set(TRACE_LIST_MODE_PARAM, mode);
+          }
+          clearSelectionParams$1(next);
+          return next;
+        },
+        { replace: true }
+      );
+    },
+    [setSearchParams]
+  );
   const handleRemoveAll = React.useCallback(() => {
     setSearchParams(
       (prev) => {
@@ -20265,6 +20682,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     datePresetRef,
     traceIdParam,
     spanIdParam,
+    anchorSpanIdParam,
     spanTabParam,
     scoreIdParam,
     listMode,
@@ -20277,6 +20695,7 @@ function useTraceUrlState(searchParams, setSearchParams, options) {
     handleSpanClose,
     handleSpanTabChange,
     handleScoreChange,
+    handleListModeChange,
     handleFilterTokensChange,
     handleDateChange,
     handleDatePresetChange,
@@ -21050,6 +21469,10 @@ exports.LineHeights = tokens.LineHeights;
 exports.Shadows = tokens.Shadows;
 exports.Sizes = tokens.Sizes;
 exports.Spacings = tokens.Spacings;
+Object.defineProperty(exports, "ComboboxPrimitive", {
+  enumerable: true,
+  get: () => combobox.Combobox
+});
 exports.AddField = AddField;
 exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentIcon = AgentIcon;
@@ -21070,6 +21493,8 @@ exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
 exports.ButtonsGroup = ButtonsGroup;
+exports.ButtonsGroupSeparator = ButtonsGroupSeparator;
+exports.ButtonsGroupText = ButtonsGroupText;
 exports.CHART_COLORS = CHART_COLORS;
 exports.CONTEXT_FIELD_IDS = CONTEXT_FIELD_IDS;
 exports.Card = Card;
@@ -21190,6 +21615,12 @@ exports.HoverPopover = HoverPopover;
 exports.Icon = Icon;
 exports.InfoIcon = InfoIcon;
 exports.Input = Input;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
 exports.ItemList = ItemList;
 exports.ItemListSkeleton = ItemListSkeleton;
 exports.JSONSchemaForm = JSONSchemaForm;
@@ -21323,6 +21754,7 @@ exports.StackedRunsBars = StackedRunsBars;
 exports.StatusBadge = StatusBadge;
 exports.SubSectionRoot = SubSectionRoot;
 exports.Switch = Switch;
+exports.TRACE_ANCHOR_SPAN_ID_PARAM = TRACE_ANCHOR_SPAN_ID_PARAM;
 exports.TRACE_DATE_FROM_PARAM = TRACE_DATE_FROM_PARAM;
 exports.TRACE_DATE_PRESET_PARAM = TRACE_DATE_PRESET_PARAM;
 exports.TRACE_DATE_PRESET_VALUES = TRACE_DATE_PRESET_VALUES;
@@ -21349,11 +21781,6 @@ exports.Th = Th;
 exports.Thead = Thead;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;
-exports.ThreadDeleteButton = ThreadDeleteButton;
-exports.ThreadItem = ThreadItem;
-exports.ThreadLink = ThreadLink;
-exports.ThreadList = ThreadList;
-exports.Threads = Threads;
 exports.TimePicker = TimePicker;
 exports.TimelineExpandCol = TimelineExpandCol;
 exports.TimelineNameCol = TimelineNameCol;
@@ -21376,6 +21803,7 @@ exports.TraceTimelineSpan = TraceTimelineSpan;
 exports.TracesDataList = TracesDataList;
 exports.TracesErrorContent = TracesErrorContent;
 exports.TracesLayout = TracesLayout;
+exports.TracesListModeToggle = TracesListModeToggle;
 exports.TracesListView = TracesListView;
 exports.TracesToolbar = TracesToolbar;
 exports.TracesVolumeCardView = TracesVolumeCardView;
@@ -21398,6 +21826,7 @@ exports.buildMetricsDimensionalFilter = buildMetricsDimensionalFilter;
 exports.buildTraceListFilters = buildTraceListFilters;
 exports.buildTracesDrilldownUrl = buildTracesDrilldownUrl;
 exports.buttonVariants = buttonVariants;
+exports.buttonsGroupVariants = buttonsGroupVariants;
 exports.clearSavedLogsFilters = clearSavedLogsFilters;
 exports.clearSavedMetricsFilters = clearSavedMetricsFilters;
 exports.clearSavedTraceFilters = clearSavedTraceFilters;
@@ -21494,6 +21923,7 @@ exports.useActiveResourcesKpiMetrics = useActiveResourcesKpiMetrics;
 exports.useActiveThreadsKpiMetrics = useActiveThreadsKpiMetrics;
 exports.useAgentRunsKpiMetrics = useAgentRunsKpiMetrics;
 exports.useAutoscroll = useAutoscroll;
+exports.useBranch = useBranch;
 exports.useCodemirrorTheme = useCodemirrorTheme$3;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useDrilldown = useDrilldown;
@@ -21528,6 +21958,7 @@ exports.useTotalTokensKpiMetrics = useTotalTokensKpiMetrics;
 exports.useTraceFilterPersistence = useTraceFilterPersistence;
 exports.useTraceLightSpans = useTraceLightSpans;
 exports.useTraceListNavigation = useTraceListNavigation;
+exports.useTraceOrBranchSpans = useTraceOrBranchSpans;
 exports.useTraceSpanNavigation = useTraceSpanNavigation;
 exports.useTraceSpans = useTraceSpans;
 exports.useTraceUrlState = useTraceUrlState;