@mastra/playground-ui 24.0.2 → 24.1.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @mastra/playground-ui
 
+## 24.1.0-alpha.0
+
+### Minor Changes
+
+- Removed `<Alert>` in favor of `<Notice>`. The two components had significant visual and behavioral overlap; `<Notice>` is now the single banner primitive and supports every previous `<Alert>` use case. ([#15791](https://github.com/mastra-ai/mastra/pull/15791))
+
+  `<Notice>` is also redesigned with a flatter API: `title` and `icon` are now props, each variant ships a default icon, an optional `action` prop renders a button aligned to the title, and a new `note` variant has been added alongside `warning`, `destructive`, `info`, and `success`. Theme tokens (`notice-warning`, `notice-destructive`, `notice-info`, `notice-success`, `notice-note`) replace the previous hardcoded colors.
+
+  **Migration**
+
+  ```tsx
+  // Before
+  <Alert variant="warning">
+    <AlertTitle>Provider not connected</AlertTitle>
+    <AlertDescription as="p">Set the API key environment variable.</AlertDescription>
+  </Alert>
+
+  // After
+  <Notice variant="warning" title="Provider not connected">
+    <Notice.Message>Set the API key environment variable.</Notice.Message>
+  </Notice>
+  ```
+
+### Patch Changes
+
+- Removed the "Avg Score" KPI card from the Metrics dashboard and the avg-score summary from the Scores card. ([#15967](https://github.com/mastra-ai/mastra/pull/15967))
+
 ## 24.0.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3394,7 +3394,7 @@ const sizeClasses$6 = {
   default: `${formElementSizes.default} text-ui-md px-[.85em] `,
   lg: `${formElementSizes.lg} text-ui-lg px-[1em] `
 };
-const variantClasses$4 = {
+const variantClasses$2 = {
   default: "bg-surface3 border-2 border-border1 hover:text-neutral6 hover:bg-surface4 active:bg-surface5 text-neutral5",
   primary: "bg-surface4 border-2 border-border2 hover:text-neutral6 hover:bg-surface5 active:bg-surface6 text-neutral6",
   cta: "bg-accent1/50 hover:bg-accent1/80 text-neutral5 font-semibold",
@@ -3421,7 +3421,7 @@ function resolveVariant(variant) {
 function buttonVariants(options) {
   const variant = resolveVariant(options?.variant || "default");
   const size = options?.size || "default";
-  return cn(sharedStyles, sizeClasses$6[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
+  return cn(sharedStyles, sizeClasses$6[size], variantClasses$2[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -3604,6 +3604,190 @@ 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$5 = {
+  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$5[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$1 = {
+  default: "text-neutral3 bg-surface4",
+  success: "text-accent1 bg-accent1Dark",
+  error: "text-accent2 bg-accent2Dark",
+  info: "text-accent5 bg-accent5Dark",
+  warning: "text-accent6 bg-accent6Dark"
+};
+const iconClasses = {
+  default: "text-neutral3",
+  success: "text-accent1",
+  error: "text-accent2",
+  info: "text-accent5",
+  warning: "text-accent6"
+};
+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 border-border1 shrink-0",
+        transitions.colors,
+        icon ? "pl-2 pr-2.5" : "px-2.5",
+        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses$1[variant],
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { 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 [];
+  }
+  const results = [];
+  function processProperty(property, path, depth) {
+    if (depth > maxDepth) {
+      return;
+    }
+    const type = Array.isArray(property.type) ? property.type.join(" | ") : property.type;
+    results.push({
+      path,
+      label: path,
+      description: property.description ?? property.title,
+      type
+    });
+    if (property.properties) {
+      for (const [key, nestedProperty] of Object.entries(property.properties)) {
+        processProperty(nestedProperty, `${path}.${key}`, depth + 1);
+      }
+    }
+    if (property.items?.properties) {
+      for (const [key, itemProperty] of Object.entries(property.items.properties)) {
+        processProperty(itemProperty, `${path}[].${key}`, depth + 1);
+      }
+    }
+  }
+  for (const [key, property] of Object.entries(schema.properties)) {
+    processProperty(property, key, 1);
+  }
+  return results;
+}
+
+function createVariableAutocomplete(schema) {
+  const variables = flattenSchemaToVariables(schema);
+  return autocomplete.autocompletion({
+    override: [createVariableCompletionSource(variables)],
+    defaultKeymap: true,
+    closeOnBlur: true,
+    icons: false
+  });
+}
+function createVariableCompletionSource(variables) {
+  return (context) => {
+    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);
+    const match = beforeCursor.match(/\{\{([a-zA-Z0-9_.\[\]]*)?$/);
+    if (!match) {
+      return null;
+    }
+    const prefix = match[1] ?? "";
+    const startPos = context.pos - prefix.length;
+    const filteredVariables = prefix ? variables.filter((v) => v.path.toLowerCase().startsWith(prefix.toLowerCase())) : variables;
+    if (filteredVariables.length === 0) {
+      return null;
+    }
+    const completions = filteredVariables.map((variable) => ({
+      label: variable.path,
+      displayLabel: variable.path,
+      detail: variable.type,
+      info: variable.description,
+      apply: (view, completion, from, to) => {
+        const afterCursor = view.state.sliceDoc(to, to + 2);
+        const hasClosingBraces = afterCursor === "}}";
+        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;
+        view.dispatch({
+          changes: { from, to, insert: insertText },
+          selection: { anchor: from + insertText.length }
+        });
+      }
+    }));
+    return {
+      from: startPos,
+      options: completions,
+      validFor: /^[a-zA-Z0-9_.\[\]]*$/
+    };
+  };
+}
+
+const VARIABLE_PATTERN = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
+const variableDecoration = view.Decoration.mark({
+  class: "cm-variable-highlight"
+});
+const variableMatcher = new view.MatchDecorator({
+  regexp: VARIABLE_PATTERN,
+  decoration: () => variableDecoration
+});
+const variableHighlightPlugin = view.ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = variableMatcher.createDeco(view);
+    }
+    update(update) {
+      this.decorations = variableMatcher.updateDeco(update, this.decorations);
+    }
+  },
+  {
+    decorations: (v) => v.decorations
+  }
+);
+const variableHighlight = variableHighlightPlugin;
+
 const AgentIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("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",
@@ -4070,8 +4254,6 @@ const SettingsIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "
   }
 ) });
 
-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 ToolsIcon = (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",
   {
@@ -4763,224 +4945,6 @@ const XGroqIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 
-const variantClasses$3 = {
-  warning: "bg-accent6Darker border-accent6/30 text-accent6",
-  destructive: "bg-accent2Darker border-accent2/30 text-accent2",
-  info: "bg-accent5Darker border-accent5/30 text-accent5"
-};
-const variantIcons = {
-  warning: lucideReact.TriangleAlert,
-  destructive: lucideReact.AlertCircle,
-  info: lucideReact.InfoIcon
-};
-const Alert = ({ children, variant = "destructive", className }) => {
-  const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        variantClasses$3[variant],
-        "p-3 rounded-md border shadow-sm",
-        transitions.all,
-        "animate-in fade-in-0 slide-in-from-top-2 duration-200",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral4", children })
-      ] })
-    }
-  );
-};
-const AlertTitle = ({ children, as: As = "h5" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
-};
-const AlertDescription = ({ children, as: As = "p" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
-};
-
-const sizeClasses$5 = {
-  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$5[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$2 = {
-  default: "text-neutral3 bg-surface4",
-  success: "text-accent1 bg-accent1Dark",
-  error: "text-accent2 bg-accent2Dark",
-  info: "text-accent5 bg-accent5Dark",
-  warning: "text-accent6 bg-accent6Dark"
-};
-const iconClasses = {
-  default: "text-neutral3",
-  success: "text-accent1",
-  error: "text-accent2",
-  info: "text-accent5",
-  warning: "text-accent6"
-};
-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 border-border1 shrink-0",
-        transitions.colors,
-        icon ? "pl-2 pr-2.5" : "px-2.5",
-        variant === "default" && icon ? "bg-surface4 text-neutral5" : variantClasses$2[variant],
-        className
-      ),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClasses[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
-        children
-      ]
-    }
-  );
-};
-
-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 [];
-  }
-  const results = [];
-  function processProperty(property, path, depth) {
-    if (depth > maxDepth) {
-      return;
-    }
-    const type = Array.isArray(property.type) ? property.type.join(" | ") : property.type;
-    results.push({
-      path,
-      label: path,
-      description: property.description ?? property.title,
-      type
-    });
-    if (property.properties) {
-      for (const [key, nestedProperty] of Object.entries(property.properties)) {
-        processProperty(nestedProperty, `${path}.${key}`, depth + 1);
-      }
-    }
-    if (property.items?.properties) {
-      for (const [key, itemProperty] of Object.entries(property.items.properties)) {
-        processProperty(itemProperty, `${path}[].${key}`, depth + 1);
-      }
-    }
-  }
-  for (const [key, property] of Object.entries(schema.properties)) {
-    processProperty(property, key, 1);
-  }
-  return results;
-}
-
-function createVariableAutocomplete(schema) {
-  const variables = flattenSchemaToVariables(schema);
-  return autocomplete.autocompletion({
-    override: [createVariableCompletionSource(variables)],
-    defaultKeymap: true,
-    closeOnBlur: true,
-    icons: false
-  });
-}
-function createVariableCompletionSource(variables) {
-  return (context) => {
-    const beforeCursor = context.state.sliceDoc(Math.max(0, context.pos - 50), context.pos);
-    const match = beforeCursor.match(/\{\{([a-zA-Z0-9_.\[\]]*)?$/);
-    if (!match) {
-      return null;
-    }
-    const prefix = match[1] ?? "";
-    const startPos = context.pos - prefix.length;
-    const filteredVariables = prefix ? variables.filter((v) => v.path.toLowerCase().startsWith(prefix.toLowerCase())) : variables;
-    if (filteredVariables.length === 0) {
-      return null;
-    }
-    const completions = filteredVariables.map((variable) => ({
-      label: variable.path,
-      displayLabel: variable.path,
-      detail: variable.type,
-      info: variable.description,
-      apply: (view, completion, from, to) => {
-        const afterCursor = view.state.sliceDoc(to, to + 2);
-        const hasClosingBraces = afterCursor === "}}";
-        const insertText = hasClosingBraces ? completion.label : `${completion.label}}}`;
-        view.dispatch({
-          changes: { from, to, insert: insertText },
-          selection: { anchor: from + insertText.length }
-        });
-      }
-    }));
-    return {
-      from: startPos,
-      options: completions,
-      validFor: /^[a-zA-Z0-9_.\[\]]*$/
-    };
-  };
-}
-
-const VARIABLE_PATTERN = /\{\{([a-zA-Z_][a-zA-Z0-9_]*(?:\.[a-zA-Z_][a-zA-Z0-9_]*)*)\}\}/g;
-const variableDecoration = view.Decoration.mark({
-  class: "cm-variable-highlight"
-});
-const variableMatcher = new view.MatchDecorator({
-  regexp: VARIABLE_PATTERN,
-  decoration: () => variableDecoration
-});
-const variableHighlightPlugin = view.ViewPlugin.fromClass(
-  class {
-    decorations;
-    constructor(view) {
-      this.decorations = variableMatcher.createDeco(view);
-    }
-    update(update) {
-      this.decorations = variableMatcher.updateDeco(update, this.decorations);
-    }
-  },
-  {
-    decorations: (v) => v.decorations
-  }
-);
-const variableHighlight = variableHighlightPlugin;
-
 const defaultOptions = {
   duration: 5e3,
   cancel: {
@@ -7164,7 +7128,7 @@ const iconSizeMap = {
   lg: "lg",
   default: "default"
 };
-const variantClasses$1 = {
+const variantClasses = {
   default: "bg-surface2 hover:bg-surface4 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
   light: "bg-surface3 hover:bg-surface5 text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
   outline: "bg-transparent hover:bg-surface2 text-neutral3 hover:text-neutral6 disabled:opacity-50 disabled:cursor-not-allowed",
@@ -7184,7 +7148,7 @@ const IconButton = React.forwardRef(
           className: cn(
             baseButtonStyles,
             formElementFocus,
-            variantClasses$1[variant],
+            variantClasses[variant],
             sizeClasses$3[size],
             disabled && "active:scale-100",
             className
@@ -11512,48 +11476,64 @@ function getToPreviousItemFn({ entries, id, update }) {
 }
 
 function NoticeButton(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "md", variant: "ghost", ...props });
-}
-
-function NoticeColumn({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-1 ", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", ...props }) });
 }
 
 function NoticeMessage({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 text-sm ", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-ui-md leading-ui-md", className), children });
 }
 
-const variantClasses = {
-  warning: "bg-[#352f26] ",
-  destructive: "bg-accent2/20",
-  info: "bg-accent5/20",
-  success: "bg-accent1/15"
+const variantConfig = {
+  success: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LightbulbIcon, {}),
+    classes: "bg-notice-success/20 border-notice-success/20 text-notice-success-fg"
+  },
+  destructive: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.OctagonAlertIcon, {}),
+    classes: "bg-notice-destructive/20 border-notice-destructive/20 text-notice-destructive-fg"
+  },
+  warning: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
+    classes: "bg-notice-warning/20 border-notice-warning/20 text-notice-warning-fg"
+  },
+  info: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+    classes: "bg-notice-info/20 border-notice-info/20 text-notice-info-fg"
+  },
+  note: {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileTextIcon, {}),
+    classes: "bg-notice-note border-border1 text-notice-note-fg"
+  }
 };
-function NoticeRoot({ children, variant, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function NoticeRoot({ variant, title, icon, action, children, className }) {
+  const { icon: defaultIcon, classes } = variantConfig[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex items-center gap-3 px-4 pr-3 py-3 rounded-lg  text-neutral4/80",
+        "relative @container flex flex-col gap-4 rounded-2xl border p-3",
         "animate-in fade-in-0 slide-in-from-top-2 duration-200",
-        "[>svg]:w-[1em] [&>dvg]:h-[1em] [&>svg]:opacity-50 [&>svg]:text-neutral4",
-        variantClasses[variant],
+        classes,
         className
       ),
-      children
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-4 items-center gap-2 [&>svg]:size-4", children: [
+          icon ?? defaultIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm font-medium uppercase tracking-wide leading-none", children: title })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-2 hidden @md:block", children: action }),
+        (children || action) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
+          children,
+          action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-start @md:hidden", children: action })
+        ] })
+      ]
     }
   );
 }
 
-function NoticeTitle({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 text-sm font-semibold", className), children });
-}
-
 const Notice = Object.assign(NoticeRoot, {
   Message: NoticeMessage,
-  Button: NoticeButton,
-  Title: NoticeTitle,
-  Column: NoticeColumn
+  Button: NoticeButton
 });
 
 const TreeContext = React__namespace.createContext(null);
@@ -15493,16 +15473,7 @@ function ScoresCardView({ data, isLoading, isError }) {
     }));
   }, [data?.scorerNames]);
   return /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MetricsCard.TopBar, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }),
-      hasData && /* @__PURE__ */ jsxRuntime.jsx(
-        MetricsCard.Summary,
-        {
-          value: data?.avgScore != null ? `avg ${data.avgScore}` : "—",
-          label: "Across all scorers"
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TopBar, { children: /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.TitleAndDescription, { title: "Scores", description: "Evaluation scorer performance." }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Loading, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Error, { message: "Failed to load scores data" }) : /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.Content, { children: !hasData ? /* @__PURE__ */ jsxRuntime.jsx(MetricsCard.NoData, { message: "No scores data yet" }) : /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: "over-time", className: "overflow-visible", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "over-time", children: "Over Time" }),
@@ -15665,41 +15636,6 @@ function useAgentRunsKpiMetrics() {
   });
 }
 
-function useAvgScoreKpiMetrics() {
-  const client = react.useMastraClient();
-  const { datePreset, customRange, timestamp } = useMetricsFilters();
-  return reactQuery.useQuery({
-    queryKey: ["metrics", "avg-score-kpi", datePreset, customRange],
-    queryFn: async () => {
-      const scorersMap = await client.listScorers();
-      const scorerIds = Object.keys(scorersMap ?? {});
-      if (scorerIds.length === 0) {
-        return { value: null, previousValue: null, changePercent: null };
-      }
-      const filters = {
-        timestamp: { start: timestamp.start, end: timestamp.end }
-      };
-      const results = await Promise.all(
-        scorerIds.map(async (scorerId) => {
-          const [avg2, count] = await Promise.all([
-            client.getScoreAggregate({ scorerId, aggregation: "avg", filters }),
-            client.getScoreAggregate({ scorerId, aggregation: "count", filters })
-          ]);
-          return { avg: avg2.value ?? 0, count: count.value ?? 0 };
-        })
-      );
-      const withData = results.filter((r) => r.count > 0);
-      if (withData.length === 0) {
-        return { value: null, previousValue: null, changePercent: null };
-      }
-      const totalCount = withData.reduce((sum, r) => sum + r.count, 0);
-      const weightedSum = withData.reduce((sum, r) => sum + r.avg * r.count, 0);
-      const avg = weightedSum / totalCount;
-      return { value: Math.round(avg * 100) / 100, previousValue: null, changePercent: null };
-    }
-  });
-}
-
 function useModelCostKpiMetrics() {
   const client = react.useMastraClient();
   const { datePreset, customRange, timestamp } = useMetricsFilters();
@@ -17035,10 +16971,7 @@ function SpanDataPanelContent({
   const durationMs = span.startedAt && span.endedAt ? new Date(span.endedAt).getTime() - new Date(span.startedAt).getTime() : null;
   const usage = span.attributes?.usage;
   const detailsBody = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isTokenLimitExceeded(span) && /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", className: "mb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Token Limit Exceeded" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { as: "p", children: getTokenLimitMessage(span) })
-    ] }),
+    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: [
@@ -19300,10 +19233,7 @@ exports.AgentCoinIcon = AgentCoinIcon;
 exports.AgentIcon = AgentIcon;
 exports.AgentNetworkCoinIcon = AgentNetworkCoinIcon;
 exports.AiIcon = AiIcon;
-exports.Alert = Alert;
-exports.AlertDescription = AlertDescription;
 exports.AlertDialog = AlertDialog;
-exports.AlertTitle = AlertTitle;
 exports.AmazonIcon = AmazonIcon;
 exports.AnthropicChatIcon = AnthropicChatIcon;
 exports.AnthropicMessagesIcon = AnthropicMessagesIcon;
@@ -19719,7 +19649,6 @@ exports.transitions = transitions;
 exports.truncateString = truncateString;
 exports.useAgentRunsKpiMetrics = useAgentRunsKpiMetrics;
 exports.useAutoscroll = useAutoscroll;
-exports.useAvgScoreKpiMetrics = useAvgScoreKpiMetrics;
 exports.useCodemirrorTheme = useCodemirrorTheme$3;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useEntityNames = useEntityNames;