@mastra/playground-ui 6.4.1 → 6.5.0-alpha.1

package/dist/index.cjs.js

@@ -64,7 +64,6 @@ const dnd = require('@hello-pangea/dnd');
 const SwitchPrimitives = require('@radix-ui/react-switch');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const format = require('date-fns/format');
-const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -100,7 +99,6 @@ const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(Visually
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
-const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 
 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}
 
@@ -3450,42 +3448,6 @@ const defaultComponents = reactMarkdown.unstable_memoizeMarkdownComponents({
   img: ImageWithFallback
 });
 
-const ErrorAwareText = () => {
-  const part = react.useMessagePart();
-  const text = part.text || "";
-  try {
-    const trimmedText = text.trim();
-    if (trimmedText.startsWith("__ERROR__:")) {
-      const errorMessage = trimmedText.substring("__ERROR__:".length);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
-      ] });
-    } else if (trimmedText.startsWith("Error:")) {
-      const errorMessage = trimmedText.substring("Error:".length).trim();
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(MarkdownText, {});
-  } catch (error) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: String(text) })
-      ] })
-    ] });
-  }
-};
-
 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",
@@ -4278,6 +4240,91 @@ const AgentNetworkCoinIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", {
   ) }) })
 ] });
 
+const variants = {
+  "header-md": "text-header-md leading-header-md",
+  "ui-lg": "text-ui-lg leading-ui-lg",
+  "ui-md": "text-ui-md leading-ui-md",
+  "ui-sm": "text-ui-sm leading-ui-sm",
+  "ui-xs": "text-ui-xs leading-ui-xs"
+};
+const fonts = {
+  mono: "font-mono"
+};
+const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
+};
+
+const variantClasses$3 = {
+  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
+  destructive: "bg-red-900/20 border-sm border-red-200 text-red-200"
+};
+const variantIcons = {
+  warning: lucideReact.TriangleAlert,
+  destructive: lucideReact.AlertCircle
+};
+const Alert$1 = ({ children, variant = "destructive" }) => {
+  const Ico = variantIcons[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(variantClasses$3[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children })
+  ] }) });
+};
+const AlertTitle$1 = ({ children, as: As = "h5" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-md", className: "font-semibold", children });
+};
+const AlertDescription$1 = ({ children, as: As = "p" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
+};
+
+const ErrorAwareText = () => {
+  const part = react.useMessagePart();
+  const text = part.text || "";
+  const metadata = part.metadata || {};
+  if (metadata?.status === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Warning" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription$1, { as: "p", children: text })
+    ] });
+  }
+  if (metadata?.status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription$1, { as: "p", children: text })
+    ] });
+  }
+  try {
+    const trimmedText = text.trim();
+    if (trimmedText.startsWith("__ERROR__:")) {
+      const errorMessage = trimmedText.substring("__ERROR__:".length);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
+        ] })
+      ] });
+    } else if (trimmedText.startsWith("Error:")) {
+      const errorMessage = trimmedText.substring("Error:".length).trim();
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(MarkdownText, {});
+  } catch (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 flex-shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: String(text) })
+      ] })
+    ] });
+  }
+};
+
 function useCopyToClipboard({ text, copyMessage = "Copied to clipboard!" }) {
   const [isCopied, setIsCopied] = React.useState(false);
   const timeoutRef = React.useRef(null);
@@ -4343,12 +4390,12 @@ const SyntaxHighlighter$2 = ({
   const formattedCode = JSON.stringify(data, null, 2);
   const theme = useCodemirrorTheme$2();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("rounded-md bg-surface4 p-1 font-mono relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-[9999]" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: formattedCode, className: "absolute top-2 right-2 z-20" }),
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { value: formattedCode, theme, extensions: [langJson.jsonLanguage] })
   ] });
 };
 
-const variantClasses$3 = {
+const variantClasses$2 = {
   default: "text-icon3",
   success: "text-accent1",
   error: "text-accent2",
@@ -4361,12 +4408,12 @@ const Badge$1 = ({ icon, variant = "default", className, children, ...props }) =
       className: clsx(
         "font-mono bg-surface4 text-ui-sm gap-md h-badge-default inline-flex items-center rounded-md shrink-0",
         icon ? "pl-md pr-1.5" : "px-1.5",
-        icon || variant === "default" ? "text-icon5" : variantClasses$3[variant],
+        icon || variant === "default" ? "text-icon5" : variantClasses$2[variant],
         className
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$3[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: variantClasses$2[variant], children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon }) }),
         children
       ]
     }
@@ -4379,10 +4426,11 @@ const BadgeWrapper = ({
   icon,
   title,
   collapsible = true,
-  extraInfo
+  extraInfo,
+  "data-testid": dataTestId
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -4453,20 +4501,6 @@ DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
 const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 
-const variants = {
-  "header-md": "text-header-md leading-header-md",
-  "ui-lg": "text-ui-lg leading-ui-lg",
-  "ui-md": "text-ui-md leading-ui-md",
-  "ui-sm": "text-ui-sm leading-ui-sm",
-  "ui-xs": "text-ui-xs leading-ui-xs"
-};
-const fonts = {
-  mono: "font-mono"
-};
-const Txt = ({ as: Root = "p", className, variant = "ui-md", font, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root, { className: clsx(variants[variant], font && fonts[font], className), ...props });
-};
-
 const NetworkChoiceMetadata = ({ selectionReason, open, onOpenChange, input }) => {
   let inputSlot = null;
   if (input) {
@@ -4512,7 +4546,7 @@ const NetworkChoiceMetadataDialogTrigger = ({
   ] });
 };
 
-const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
+const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   let argSlot = null;
   try {
     const { __mastraMetadata: _, ...formattedArgs } = typeof args === "object" ? args : JSON.parse(args);
@@ -4521,16 +4555,19 @@ const ToolBadge = ({ toolName, args, result, networkMetadata, toolOutput }) => {
     argSlot = /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap", children: args });
   }
   let resultSlot = typeof result === "string" ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap bg-surface4 p-4 rounded-md", children: result }) : /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlighter$2, { data: result });
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
+      "data-testid": "tool-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }),
       title: toolName,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason || "",
+          input: agentNetworkInput
         }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -5136,7 +5173,7 @@ const sizeClasses = {
   md: "h-button-md gap-md",
   lg: "h-button-lg gap-lg"
 };
-const variantClasses$2 = {
+const variantClasses$1 = {
   default: "bg-surface2 hover:bg-surface4 text-icon3 hover:text-icon6",
   light: "bg-surface3 hover:bg-surface5 text-icon6"
 };
@@ -5147,7 +5184,7 @@ const Button$1 = ({ className, as, size = "md", variant = "default", ...props })
     {
       className: clsx(
         "bg-surface2 border-sm border-border1 px-lg text-ui-md inline-flex items-center justify-center rounded-md border",
-        variantClasses$2[variant],
+        variantClasses$1[variant],
         sizeClasses[size],
         className,
         {
@@ -6106,20 +6143,20 @@ const alertVariants = cva(
     }
   }
 );
-const Alert$1 = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-Alert$1.displayName = "Alert";
-const AlertTitle$1 = React__namespace.forwardRef(
+const Alert = React__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+Alert.displayName = "Alert";
+const AlertTitle = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
 );
-AlertTitle$1.displayName = "AlertTitle";
-const AlertDescription$1 = React__namespace.forwardRef(
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
 );
-AlertDescription$1.displayName = "AlertDescription";
+AlertDescription.displayName = "AlertDescription";
 
-const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "destructive", children: [
+const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { children: error })
+  /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: error })
 ] });
 
 const SubmitButton = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Button$2, { type: "submit", children });
@@ -6901,7 +6938,8 @@ function DynamicForm({
     },
     defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
     formProps: {
-      className
+      className,
+      noValidate: true
     },
     uiComponents: {
       SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
@@ -7694,7 +7732,7 @@ function WorkflowTable({ workflows, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyWorkflowsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search workflows", placeholder: "Search workflows" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -7736,24 +7774,27 @@ const EmptyWorkflowsTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classN
   }
 ) });
 
-const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, networkMetadata }) => {
+const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) => {
   const { data: runs, isLoading: isRunsLoading } = useWorkflowRuns(workflowId, {
     enabled: Boolean(runId) && !isStreaming
   });
   const run = runs?.runs.find((run2) => run2.runId === runId);
   const isLoading = isRunsLoading || !run;
   const snapshot = typeof run?.snapshot === "object" ? run?.snapshot : void 0;
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     BadgeWrapper,
     {
+      "data-testid": "workflow-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }),
       title: workflow.name,
       initialCollapsed: false,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason ?? "",
+          input: agentNetworkInput
         }
       ),
       children: [
@@ -7805,18 +7846,21 @@ const LoadingBadge = () => {
   );
 };
 
-const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
+const AgentBadge = ({ agentId, messages = [], metadata }) => {
+  const selectionReason = metadata?.mode === "network" ? metadata.selectionReason : void 0;
+  const agentNetworkInput = metadata?.mode === "network" ? metadata.agentInput : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
+      "data-testid": "agent-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }),
       title: agentId,
       initialCollapsed: false,
-      extraInfo: networkMetadata && /* @__PURE__ */ jsxRuntime.jsx(
+      extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
         NetworkChoiceMetadataDialogTrigger,
         {
-          selectionReason: networkMetadata?.selectionReason || "",
-          input: networkMetadata?.input
+          selectionReason: selectionReason ?? "",
+          input: agentNetworkInput
         }
       ),
       children: messages.map((message, index) => {
@@ -7835,6 +7879,9 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
             type: "tool-call",
             toolCallId: message.toolCallId,
             addResult: () => {
+            },
+            metadata: {
+              mode: "stream"
             }
           }
         ) }, index);
@@ -7846,30 +7893,25 @@ const AgentBadge = ({ agentId, messages = [], networkMetadata }) => {
 const ToolFallback = ({ toolName, result, args, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(WorkflowRunProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ToolFallbackInner, { toolName, result, args, ...props }) });
 };
-const ToolFallbackInner = ({ toolName, result, args }) => {
-  useWorkflowStream(args.__mastraMetadata?.workflowFullState);
+const ToolFallbackInner = ({ toolName, result, args, metadata, ...props }) => {
+  useWorkflowStream(result);
   const { data: workflow, isLoading } = useWorkflow(toolName);
-  const isAgent = args.__mastraMetadata?.from === "AGENT";
+  const isAgent = metadata?.mode === "network" && metadata.from === "AGENT";
   if (isAgent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      AgentBadge,
-      {
-        agentId: toolName,
-        messages: args?.__mastraMetadata?.messages,
-        networkMetadata: args?.__mastraMetadata?.networkMetadata
-      }
-    );
+    const messages = result?.childMessages ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentBadge, { agentId: toolName, messages, metadata });
   }
   if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(LoadingBadge, {});
   if (workflow) {
+    const isStreaming = metadata?.mode === "stream" || metadata?.mode === "network";
     return /* @__PURE__ */ jsxRuntime.jsx(
       WorkflowBadge,
       {
         workflowId: toolName,
         workflow,
-        isStreaming: args.__mastraMetadata?.isStreaming,
+        isStreaming,
         runId: result?.runId,
-        networkMetadata: args?.__mastraMetadata?.networkMetadata
+        metadata
       }
     );
   }
@@ -7879,8 +7921,8 @@ const ToolFallbackInner = ({ toolName, result, args }) => {
       toolName,
       args,
       result,
-      toolOutput: args?.__mastraMetadata?.toolOutput || [],
-      networkMetadata: args?.__mastraMetadata?.networkMetadata
+      toolOutput: result?.toolOutput || [],
+      metadata
     }
   );
 };
@@ -8445,32 +8487,23 @@ const ProviderLogo = ({ providerId, className = "", size = 20 }) => {
   );
 };
 
-const statusClasses = {
-  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200 rounded-lg px-4 py-2 flex gap-4 items-center",
-  default: ""
-};
-const AssistantMessage = ({ ToolFallback: ToolFallbackCustom, hasModelList }) => {
+const AssistantMessage = ({ hasModelList }) => {
   const data = react.useMessage();
   const messageId = data.id;
   const isToolCallAndOrReasoning = data.content.every(({ type }) => type === "tool-call" || type === "reasoning");
   const modelMetadata = data.metadata?.custom?.modelMetadata;
-  const messageStatus = data.metadata?.custom?.status;
-  const statusClass = statusClasses[messageStatus || "default"];
   const showModelUsed = hasModelList && modelMetadata;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.MessagePrimitive.Root, { className: "max-w-full", "data-message-id": messageId, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("text-icon6 text-ui-lg leading-ui-lg", statusClass), children: [
-      messageStatus === "warning" && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.MessagePrimitive.Parts,
-        {
-          components: {
-            Text: ErrorAwareText,
-            tools: { Fallback: ToolFallbackCustom || ToolFallback },
-            Reasoning
-          }
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon6 text-ui-lg leading-ui-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.MessagePrimitive.Parts,
+      {
+        components: {
+          Text: ErrorAwareText,
+          tools: { Fallback: ToolFallback },
+          Reasoning
         }
-      )
-    ] }),
+      }
+    ) }),
     !isToolCallAndOrReasoning && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-6 pt-4 flex gap-2 items-center", { "pb-1": showModelUsed }), children: [
       showModelUsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ProviderLogo, { providerId: modelMetadata.modelProvider, size: 14 }),
@@ -9067,11 +9100,11 @@ const useThreadInput = () => {
   return React.useContext(ThreadInputContext);
 };
 
-const Thread = ({ ToolFallback, agentName, agentId, hasMemory, hasModelList }) => {
+const Thread = ({ agentName, agentId, hasMemory, hasModelList }) => {
   const areaRef = React.useRef(null);
   useAutoscroll(areaRef, { enabled: true });
   const WrappedAssistantMessage = (props) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, ToolFallback, hasModelList });
+    return /* @__PURE__ */ jsxRuntime.jsx(AssistantMessage, { ...props, hasModelList });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(ThreadWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ThreadPrimitive.Viewport, { ref: areaRef, autoScroll: false, className: "overflow-y-scroll scroll-smooth h-full", children: [
@@ -9447,645 +9480,72 @@ const useAdapters = (agentId) => {
   };
 };
 
-const handleNetworkMessageFromMemory = (content) => {
-  if (content.primitiveType === "workflow") {
-    return {
-      role: "assistant",
-      content: [
-        {
-          type: "tool-call",
-          toolCallId: content.finalResult.runId,
-          toolName: content.primitiveId,
-          result: { runId: content.finalResult.runId },
-          args: {
-            __mastraMetadata: {
-              from: "WORKFLOW",
-              networkMetadata: {
-                selectionReason: content?.selectionReason,
-                input: content?.input
-              }
-            }
-          }
-        }
-      ]
-    };
+const handleFinishReason = (finishReason) => {
+  switch (finishReason) {
+    case "tool-calls":
+      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
   }
-  if (content.primitiveType === "agent") {
-    const badgeMessages = [];
-    let toolCalls = {};
-    const messages = content.finalResult.messages.slice(1);
-    for (const message of messages) {
-      if (typeof message.content === "string") {
-        badgeMessages.push({
-          type: "text",
-          content: message.content
-        });
-        continue;
-      }
-      for (const part of message.content) {
-        if (part.type === "text") {
-          badgeMessages.push({
-            type: "text",
-            content: part.content
-          });
-        } else if (part.type === "tool-result") {
-          badgeMessages.push({
-            type: "tool",
-            toolName: part.toolName,
-            toolOutput: part.result,
-            // tool output
-            toolCallId: part.toolCallId,
-            args: toolCalls?.[part.toolCallId]?.args || {}
-          });
-        } else if (part.type === "tool-call") {
-          toolCalls[part.toolCallId] = part;
-        }
+};
+const convertToAIAttachments = async (attachments) => {
+  const promises = (attachments ?? []).filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
+    const isFileFromURL = attachment.name.startsWith("https://");
+    if (attachment.type === "document") {
+      if (attachment.contentType === "application/pdf") {
+        const pdfText = attachment.content?.[0]?.text || "";
+        return {
+          role: "user",
+          content: [
+            {
+              type: "file",
+              data: isFileFromURL ? attachment.name : `data:application/pdf;base64,${pdfText}`,
+              mimeType: attachment.contentType,
+              filename: attachment.name
+            }
+          ]
+        };
       }
+      return {
+        role: "user",
+        // @ts-expect-error - TODO: fix this type issue somehow
+        content: attachment.content[0]?.text || ""
+      };
     }
     return {
-      role: "assistant",
-      content: [
-        {
-          type: "tool-call",
-          toolCallId: content.finalResult.runId,
-          toolName: content.primitiveId,
-          result: { runId: content.finalResult.runId },
-          args: {
-            __mastraMetadata: {
-              from: "AGENT",
-              networkMetadata: {
-                selectionReason: content?.selectionReason || "",
-                input: content?.input || ""
-              },
-              messages: badgeMessages
-            }
-          }
-        }
-      ]
-    };
-  }
-  if (content.primitiveType === "tool") {
-    return {
-      role: "assistant",
+      role: "user",
       content: [
         {
-          type: "tool-call",
-          toolCallId: content.finalResult.toolCallId,
-          toolName: content.primitiveId,
-          result: content.finalResult.result,
-          args: {
-            ...content?.input,
-            __mastraMetadata: {
-              networkMetadata: {
-                selectionReason: content?.selectionReason || "",
-                input: content?.input || ""
-              }
-            }
-          }
+          type: "image",
+          image: isFileFromURL ? attachment.name : await fileToBase64(attachment.file),
+          mimeType: attachment.file.type
         }
       ]
     };
-  }
-  return { role: "assistant", content: [{ type: "text", text: "Unknown response" }] };
+  });
+  return Promise.all(promises);
 };
-
-const handleStreamChunk = ({ chunk, conversation }) => {
-  switch (chunk.type) {
-    case "tripwire": {
-      return [
-        ...conversation,
-        {
-          role: "assistant",
-          metadata: {
-            custom: {
-              status: "warning"
-            }
-          },
-          content: [
-            {
-              type: "text",
-              text: chunk.payload.tripwireReason
-            }
-          ]
-        }
-      ];
-    }
-    case "start": {
-      const newMessage = {
-        role: "assistant",
-        content: []
-      };
-      return [...conversation, newMessage];
-    }
-    case "text-start":
-    case "text-delta": {
-      const lastMessage = conversation[conversation.length - 1];
-      if (!lastMessage) return conversation;
-      if (lastMessage.role === "assistant" && typeof lastMessage.content !== `string` && (!lastMessage.content || lastMessage.content.length === 0 || lastMessage.content[lastMessage.content.length - 1]?.type !== `text`)) {
-        return [
-          ...conversation.slice(0, -1),
-          {
-            ...lastMessage,
-            content: [...lastMessage.content || [], { type: "text", text: "" }]
-          }
-        ];
-      }
-      if (chunk.type === `text-start`) return conversation;
-      if (typeof lastMessage.content === `string`) {
-        return [
-          ...conversation.slice(0, -1),
-          {
-            ...lastMessage,
-            content: lastMessage.content + chunk.payload.text
-          }
-        ];
+const initializeMessageState = (initialMessages) => {
+  const convertedMessages = initialMessages?.map((message) => {
+    const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
+      type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
+      mimeType: image.contentType,
+      image: image.url
+    }));
+    const formattedParts = (message.parts || []).map((part) => {
+      if (part.type === "reasoning") {
+        return {
+          type: "reasoning",
+          text: part.reasoning || part?.details?.filter((detail) => detail.type === "text")?.map((detail) => detail.text).join(" ")
+        };
       }
-      const lastPart = lastMessage.content?.[lastMessage.content.length - 1];
-      if (!lastPart || lastPart.type !== `text`) return conversation;
-      return [
-        ...conversation.slice(0, -1),
-        {
-          ...lastMessage,
-          content: [...lastMessage.content.slice(0, -1), { ...lastPart, text: lastPart.text + chunk.payload.text }]
-        }
-      ];
-    }
-    case "tool-output": {
-      if (chunk.payload.output?.type.startsWith("workflow-")) {
-        return handleWorkflowChunk({
-          workflowChunk: chunk.payload.output,
-          conversation,
-          entityName: chunk.payload.toolName
-        });
-      }
-      const lastMessage = conversation[conversation.length - 1];
-      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-        const updatedContent = lastMessage.content.map((part) => {
-          if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-            const existingToolOutput = part.args?.__mastraMetadata?.toolOutput || [];
-            return {
-              ...part,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  toolOutput: [...existingToolOutput, chunk?.payload?.output]
-                }
-              }
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      return [...conversation];
-    }
-    case "tool-call": {
-      const lastMessage = conversation[conversation.length - 1];
-      if (lastMessage && lastMessage.role === "assistant") {
-        const updatedMessage = {
-          ...lastMessage,
-          content: Array.isArray(lastMessage.content) ? [
-            ...lastMessage.content,
-            {
-              type: "tool-call",
-              toolCallId: chunk.payload.toolCallId,
-              toolName: chunk.payload.toolName,
-              args: {
-                ...chunk.payload.args,
-                __mastraMetadata: {
-                  ...chunk.payload.args?.__mastraMetadata,
-                  isStreaming: true
-                }
-              }
-            }
-          ] : [
-            ...typeof lastMessage.content === "string" ? [{ type: "text", text: lastMessage.content }] : [],
-            {
-              type: "tool-call",
-              toolCallId: chunk.payload.toolCallId,
-              toolName: chunk.payload.toolName,
-              args: {
-                ...chunk.payload.args,
-                __mastraMetadata: {
-                  ...chunk.payload.args?.__mastraMetadata,
-                  isStreaming: true
-                }
-              }
-            }
-          ]
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      const newMessage = {
-        role: "assistant",
-        content: [
-          {
-            type: "tool-call",
-            toolCallId: chunk.payload.toolCallId,
-            toolName: chunk.payload.toolName,
-            args: {
-              ...chunk.payload.args,
-              __mastraMetadata: {
-                ...chunk.payload.args?.__mastraMetadata,
-                isStreaming: true
-              }
-            }
-          }
-        ]
-      };
-      return [...conversation, newMessage];
-    }
-    case "tool-result": {
-      const lastMessage = conversation[conversation.length - 1];
-      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-        const updatedContent = lastMessage.content.map((part) => {
-          if (typeof part === "object" && part.type === "tool-call" && part.toolCallId === chunk.payload.toolCallId) {
-            return {
-              ...part,
-              result: chunk.payload.result
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      return [...conversation];
-    }
-    case "error": {
-      if (typeof chunk.payload.error === "string") {
-        const errorMessage = {
-          role: "assistant",
-          content: `Error: ${chunk.payload.error}`
-        };
-        return [...conversation, errorMessage];
-      }
-      return [...conversation];
-    }
-    case "finish": {
-      const lastMessage = conversation[conversation.length - 1];
-      handleFinishReason$1(chunk.payload.stepResult.reason);
-      if (lastMessage && lastMessage.role === "assistant") {
-        const updatedMessage = {
-          ...lastMessage,
-          metadata: {
-            custom: {
-              modelMetadata: chunk.payload.metadata.modelMetadata
-            }
-          }
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      return [...conversation];
-    }
-    case "reasoning-delta": {
-      const lastMessage = conversation[conversation.length - 1];
-      if (lastMessage && lastMessage.role === "assistant" && Array.isArray(lastMessage.content)) {
-        const updatedContent = lastMessage.content.map((part) => {
-          if (typeof part === "object" && part.type === "reasoning") {
-            return {
-              ...part,
-              text: part.text + chunk.payload.text
-            };
-          }
-          return part;
-        });
-        const updatedMessage = {
-          ...lastMessage,
-          content: updatedContent
-        };
-        return [...conversation.slice(0, -1), updatedMessage];
-      }
-      const newMessage = {
-        role: "assistant",
-        content: [
-          {
-            type: "reasoning",
-            text: chunk.payload.text
-          }
-        ]
-      };
-      return [...conversation, newMessage];
-    }
-    default:
-      return [...conversation];
-  }
-};
-const handleFinishReason$1 = (finishReason) => {
-  switch (finishReason) {
-    case "tool-calls":
-      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
-  }
-};
-const handleWorkflowChunk = ({
-  workflowChunk,
-  conversation,
-  entityName
-}) => {
-  const lastMessage = conversation[conversation.length - 1];
-  const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-  const newMessage = {
-    ...lastMessage,
-    content: contentArray.map((part) => {
-      if (part.type === "tool-call") {
-        return {
-          ...part,
-          toolName: part?.entityName || entityName,
-          args: {
-            ...part.args,
-            __mastraMetadata: {
-              ...part.args?.__mastraMetadata,
-              workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
-                part.args?.__mastraMetadata?.workflowFullState || {},
-                workflowChunk
-              ),
-              isStreaming: true
-            }
-          }
-        };
-      }
-      return part;
-    })
-  };
-  return [...conversation.slice(0, -1), newMessage];
-};
-const handleAgentChunk = ({
-  agentChunk,
-  conversation,
-  entityName
-}) => {
-  switch (agentChunk.type) {
-    case "tool-result": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const next = {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: [
-                    ...messages.slice(0, -1),
-                    {
-                      ...messages[messages.length - 1],
-                      type: "tool",
-                      toolName: agentChunk.payload.toolName,
-                      args: agentChunk.payload.args,
-                      toolOutput: agentChunk.payload.result
-                    }
-                  ]
-                }
-              }
-            };
-            return next;
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "tool-call": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const next = {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: [
-                    ...messages,
-                    {
-                      type: "tool",
-                      toolCallId: agentChunk.payload.toolCallId,
-                      toolName: agentChunk.payload.toolName,
-                      args: {
-                        ...agentChunk.payload.args,
-                        __mastraMetadata: {
-                          ...agentChunk.payload.args?.__mastraMetadata,
-                          isStreaming: true
-                        }
-                      }
-                    }
-                  ]
-                }
-              }
-            };
-            return next;
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "text-delta": {
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const lastMastraMessage = messages[messages.length - 1];
-            const nextMessages = lastMastraMessage?.type === "text" ? [
-              ...messages.slice(0, -1),
-              { type: "text", content: (lastMastraMessage?.content || "") + agentChunk.payload.text }
-            ] : [...messages, { type: "text", content: agentChunk.payload.text }];
-            return {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: nextMessages
-                }
-              }
-            };
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    case "tool-output": {
-      if (!agentChunk.payload.output.type.startsWith("workflow-")) return [...conversation];
-      const lastMessage = conversation[conversation.length - 1];
-      const contentArray = Array.isArray(lastMessage.content) ? lastMessage.content : [{ type: "text", text: lastMessage.content }];
-      const newMessage = {
-        ...lastMessage,
-        content: contentArray.map((part) => {
-          if (part.type === "tool-call") {
-            const messages = part.args?.__mastraMetadata?.messages || [];
-            const lastMastraMessage = messages[messages.length - 1];
-            const nextMessages = lastMastraMessage?.type === "tool" ? [
-              ...messages.slice(0, -1),
-              {
-                ...lastMastraMessage,
-                args: {
-                  ...agentChunk.payload.args,
-                  __mastraMetadata: {
-                    ...agentChunk.payload.args?.__mastraMetadata,
-                    workflowFullState: react$3.mapWorkflowStreamChunkToWatchResult(
-                      lastMastraMessage.args?.__mastraMetadata?.workflowFullState || {},
-                      agentChunk.payload.output
-                    ),
-                    isStreaming: true
-                  }
-                }
-              }
-            ] : messages;
-            return {
-              ...part,
-              toolName: part?.entityName || entityName,
-              args: {
-                ...part.args,
-                __mastraMetadata: {
-                  ...part.args?.__mastraMetadata,
-                  isStreaming: true,
-                  messages: nextMessages
-                }
-              }
-            };
-          }
-          return part;
-        })
-      };
-      return [...conversation.slice(0, -1), newMessage];
-    }
-    default:
-    case "agent-execution-end":
-      return [...conversation];
-  }
-};
-const createRootToolAssistantMessage = ({
-  chunk,
-  entityName,
-  conversation,
-  runId,
-  from,
-  networkMetadata
-}) => {
-  if (!entityName || !runId) return [...conversation];
-  const newMessage = {
-    role: "assistant",
-    content: [
-      {
-        type: "tool-call",
-        toolCallId: runId,
-        toolName: entityName,
-        args: {
-          ...chunk?.payload?.args,
-          __mastraMetadata: {
-            from,
-            networkMetadata,
-            ...chunk.payload.args?.__mastraMetadata,
-            isStreaming: true
-          }
-        }
-      }
-    ]
-  };
-  return [...conversation, newMessage];
-};
-
-const handleFinishReason = (finishReason) => {
-  switch (finishReason) {
-    case "tool-calls":
-      throw new Error("Stream finished with reason tool-calls, try increasing maxSteps");
-  }
-};
-const convertToAIAttachments = async (attachments) => {
-  const promises = (attachments ?? []).filter((attachment) => attachment.type === "image" || attachment.type === "document").map(async (attachment) => {
-    const isFileFromURL = attachment.name.startsWith("https://");
-    if (attachment.type === "document") {
-      if (attachment.contentType === "application/pdf") {
-        const pdfText = attachment.content?.[0]?.text || "";
-        return {
-          role: "user",
-          content: [
-            {
-              type: "file",
-              data: isFileFromURL ? attachment.name : `data:application/pdf;base64,${pdfText}`,
-              mimeType: attachment.contentType,
-              filename: attachment.name
-            }
-          ]
-        };
-      }
-      return {
-        role: "user",
-        // @ts-expect-error - TODO: fix this type issue somehow
-        content: attachment.content[0]?.text || ""
-      };
-    }
-    return {
-      role: "user",
-      content: [
-        {
-          type: "image",
-          image: isFileFromURL ? attachment.name : await fileToBase64(attachment.file),
-          mimeType: attachment.file.type
-        }
-      ]
-    };
-  });
-  return Promise.all(promises);
-};
-const initializeMessageState = (initialMessages) => {
-  const convertedMessages = initialMessages?.map((message) => {
-    let content;
-    try {
-      content = JSON.parse(message.content);
-      if (content.isNetwork) {
-        return handleNetworkMessageFromMemory(content);
-      }
-    } catch (e) {
-    }
-    const attachmentsAsContentParts = (message.experimental_attachments || []).map((image) => ({
-      type: image.contentType.startsWith(`image/`) ? "image" : image.contentType.startsWith(`audio/`) ? "audio" : "file",
-      mimeType: image.contentType,
-      image: image.url
-    }));
-    const formattedParts = (message.parts || []).map((part) => {
-      if (part.type === "reasoning") {
-        return {
-          type: "reasoning",
-          text: part.reasoning || part?.details?.filter((detail) => detail.type === "text")?.map((detail) => detail.text).join(" ")
-        };
-      }
-      if (part.type === "tool-invocation") {
-        if (part.toolInvocation.state === "result") {
-          return {
-            type: "tool-call",
-            toolCallId: part.toolInvocation.toolCallId,
-            toolName: part.toolInvocation.toolName,
-            args: part.toolInvocation.args,
-            result: part.toolInvocation.result
-          };
+      if (part.type === "tool-invocation") {
+        if (part.toolInvocation.state === "result") {
+          return {
+            type: "tool-call",
+            toolCallId: part.toolInvocation.toolCallId,
+            toolName: part.toolInvocation.toolName,
+            args: part.toolInvocation.args,
+            result: part.toolInvocation.result
+          };
         }
       }
       if (part.type === "file") {
@@ -10113,6 +9573,7 @@ function MastraRuntimeProvider({
   children,
   agentId,
   initialMessages,
+  initialLegacyMessages,
   memory,
   threadId,
   refreshThreadList,
@@ -10120,20 +9581,19 @@ function MastraRuntimeProvider({
   runtimeContext,
   modelVersion
 }) {
-  const initializeMessages = () => memory ? initializeMessageState(initialMessages || []) : [];
   const [isLegacyRunning, setIsLegacyRunning] = React.useState(false);
-  const [legacyMessages, setLegacyMessages] = React.useState(initializeMessages());
+  const [legacyMessages, setLegacyMessages] = React.useState(
+    () => memory ? initializeMessageState(initialLegacyMessages || []) : []
+  );
   const {
-    setMessages,
     messages,
-    generate,
-    stream,
-    network,
+    sendMessage,
     cancelRun,
-    isRunning: isRunningStream
+    isRunning: isRunningStream,
+    setMessages
   } = react$3.useChat({
     agentId,
-    initializeMessages
+    initializeMessages: () => initialMessages || []
   });
   const { refetch: refreshWorkingMemory } = useWorkingMemory();
   const abortControllerRef = React.useRef(null);
@@ -10166,7 +9626,8 @@ function MastraRuntimeProvider({
     topP,
     maxTokens,
     instructions,
-    providerOptions
+    providerOptions,
+    maxSteps
   };
   const baseClient = react$3.useMastraClient();
   const isVNext = modelVersion === "v2";
@@ -10174,9 +9635,7 @@ function MastraRuntimeProvider({
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    if (isVNext) {
-      setMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
-    } else {
+    if (!isVNext) {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
     const controller = new AbortController();
@@ -10189,134 +9648,44 @@ function MastraRuntimeProvider({
     try {
       if (isVNext) {
         if (chatWithNetwork) {
-          let currentEntityId;
-          await network({
-            coreUserMessages: [
-              {
-                role: "user",
-                content: input
-              },
-              ...attachments
-            ],
+          await sendMessage({
+            message: input,
+            mode: "network",
+            coreUserMessages: attachments,
             runtimeContext: runtimeContextInstance,
             threadId,
             modelSettings: modelSettingsArgs,
             signal: controller.signal,
-            onNetworkChunk: (chunk, conversation) => {
-              if (chunk.type.startsWith("agent-execution-event-")) {
-                const agentChunk = chunk.payload;
-                if (!currentEntityId) return conversation;
-                return handleAgentChunk({ agentChunk, conversation, entityName: currentEntityId });
-              } else if (chunk.type === "tool-execution-start") {
-                const { args: argsData } = chunk.payload;
-                const nestedArgs = argsData.args || {};
-                const mastraMetadata = argsData.__mastraMetadata || {};
-                const selectionReason = argsData.selectionReason || "";
-                return handleStreamChunk({
-                  chunk: {
-                    ...chunk,
-                    type: "tool-call",
-                    payload: {
-                      ...chunk.payload,
-                      toolCallId: argsData.toolCallId || "unknown",
-                      toolName: argsData.toolName || "unknown",
-                      args: {
-                        ...nestedArgs,
-                        __mastraMetadata: {
-                          ...mastraMetadata,
-                          networkMetadata: {
-                            selectionReason,
-                            input: nestedArgs
-                          }
-                        }
-                      }
-                    }
-                  },
-                  conversation
-                });
-              } else if (chunk.type === "tool-execution-end") {
-                const next = handleStreamChunk({
-                  chunk: { ...chunk, type: "tool-result" },
-                  conversation
-                });
-                if (chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
-                  refreshWorkingMemory?.();
-                }
-                return next;
-              } else if (chunk.type.startsWith("workflow-execution-event-")) {
-                const workflowChunk = chunk.payload;
-                if (!currentEntityId) return conversation;
-                return handleWorkflowChunk({ workflowChunk, conversation, entityName: currentEntityId });
-              } else if (chunk.type === "workflow-execution-start" || chunk.type === "agent-execution-start") {
-                currentEntityId = chunk.payload?.args?.primitiveId;
-                const runId = chunk.payload.runId;
-                if (!currentEntityId || !runId) return conversation;
-                return createRootToolAssistantMessage({
-                  entityName: currentEntityId,
-                  conversation,
-                  runId,
-                  chunk,
-                  from: chunk.type === "agent-execution-start" ? "AGENT" : "WORKFLOW",
-                  networkMetadata: {
-                    selectionReason: chunk?.payload?.args?.selectionReason || "",
-                    input: chunk?.payload?.args?.prompt
-                  }
-                });
-              } else if (chunk.type === "network-execution-event-step-finish") {
-                return [
-                  ...conversation,
-                  { role: "assistant", content: [{ type: "text", text: chunk?.payload?.result || "" }] }
-                ];
-              } else {
-                return handleStreamChunk({ chunk, conversation });
+            onNetworkChunk: async (chunk) => {
+              if (chunk.type === "tool-execution-end" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
+                refreshWorkingMemory?.();
               }
             }
           });
         } else {
           if (chatWithGenerate) {
-            await generate({
-              coreUserMessages: [
-                {
-                  role: "user",
-                  content: input
-                },
-                ...attachments
-              ],
+            await sendMessage({
+              message: input,
+              mode: "generate",
+              coreUserMessages: attachments,
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              signal: controller.signal,
-              onFinish: ({ messages: messages2, tripwireReason }) => {
-                const next = messages2.length > 0 ? messages2.map((message2) => react$3.toAssistantUIMessage(message2)) : [];
-                if (tripwireReason) {
-                  next.push({
-                    role: "assistant",
-                    content: [{ type: "text", text: tripwireReason }],
-                    metadata: { custom: { status: "warning" } }
-                  });
-                }
-                return next;
-              }
+              signal: controller.signal
             });
             return;
           } else {
-            await stream({
-              coreUserMessages: [
-                {
-                  role: "user",
-                  content: input
-                },
-                ...attachments
-              ],
+            await sendMessage({
+              message: input,
+              mode: "stream",
+              coreUserMessages: attachments,
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
-              onChunk: (chunk, conversation) => {
-                const next = handleStreamChunk({ chunk, conversation });
+              onChunk: async (chunk) => {
                 if (chunk.type === "tool-result" && chunk.payload?.toolName === "updateWorkingMemory" && typeof chunk.payload.result === "object" && "success" in chunk.payload.result && chunk.payload.result?.success) {
                   refreshWorkingMemory?.();
                 }
-                return next;
               },
               signal: controller.signal
             });
@@ -10611,7 +9980,7 @@ function MastraRuntimeProvider({
       if (isVNext) {
         setMessages((currentConversation) => [
           ...currentConversation,
-          { role: "assistant", content: [{ type: "text", text: `${error}` }] }
+          { role: "assistant", parts: [{ type: "text", text: `${error}` }] }
         ]);
       } else {
         setLegacyMessages((currentConversation) => [
@@ -10632,20 +10001,17 @@ function MastraRuntimeProvider({
     }
   };
   const { adapters, isReady } = useAdapters(agentId);
+  const vnextmessages = messages.map(react$3.toAssistantUIMessage);
   const runtime = react.useExternalStoreRuntime({
     isRunning: isLegacyRunning || isRunningStream,
-    messages: isVNext ? messages : legacyMessages,
+    messages: isVNext ? vnextmessages : legacyMessages,
     convertMessage: (x) => x,
     onNew,
     onCancel,
     adapters: isReady ? adapters : void 0
   });
   if (!isReady) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.AssistantRuntimeProvider, { runtime, children: [
-    " ",
-    children,
-    " "
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AssistantRuntimeProvider, { runtime, children });
 }
 
 const defaultSettings = {
@@ -10713,6 +10079,7 @@ const AgentChat = ({
   agentName,
   threadId,
   initialMessages,
+  initialLegacyMessages,
   memory,
   refreshThreadList,
   modelVersion,
@@ -10728,6 +10095,7 @@ const AgentChat = ({
       modelVersion,
       threadId,
       initialMessages,
+      initialLegacyMessages,
       memory,
       refreshThreadList,
       settings,
@@ -10848,7 +10216,7 @@ const TableCaption = React__namespace.forwardRef(
 );
 TableCaption.displayName = "TableCaption";
 
-const Tabs = TabsPrimitive__namespace.Root;
+const Tabs$1 = TabsPrimitive__namespace.Root;
 const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
@@ -10891,12 +10259,12 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
 };
-const TabList = ({ children, className }) => {
+const TabList$1 = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
 };
-const Tab = ({ children, value, onClick }) => {
+const Tab$1 = ({ children, value, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsTrigger,
     {
@@ -10907,7 +10275,7 @@ const Tab = ({ children, value, onClick }) => {
     }
   );
 };
-const TabContent = ({ children, value }) => {
+const TabContent$1 = ({ children, value }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
 };
 
@@ -10932,12 +10300,12 @@ function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }
     return onRefetchCiEvals();
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "live", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "live", children: "Live" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "ci", children: "CI" })
+    /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "live", children: "Live" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "ci", children: "CI" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "live", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "ci", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "live", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "ci", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
   ] });
 }
 function EvalTable({ evals, isCIMode = false, onRefresh }) {
@@ -11486,13 +10854,35 @@ const AgentSettings = ({ modelVersion, hasMemory = false, hasSubAgents = false }
   ] });
 };
 
+const resolveInstructionPart = (part) => {
+  if (typeof part === "string") {
+    return part.trim();
+  }
+  return part.text?.trim() || "";
+};
+const extractPrompt = (instructions) => {
+  if (typeof instructions === "string") {
+    return instructions.trim();
+  }
+  if (typeof instructions === "object" && "content" in instructions) {
+    if (Array.isArray(instructions.content)) {
+      return instructions.content.map(resolveInstructionPart).join("\n\n").trim();
+    }
+    return instructions.content.trim();
+  }
+  if (Array.isArray(instructions)) {
+    return instructions.map(extractPrompt).join("\n\n").trim();
+  }
+  return "";
+};
+
 const NameCell$3 = ({ row }) => {
   const { Link, paths } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsx(
     EntryCell,
     {
       name: /* @__PURE__ */ jsxRuntime.jsx(Link, { className: "w-full space-y-0", href: paths.agentLink(row.original.id), children: row.original.name }),
-      description: row.original.instructions
+      description: extractPrompt(row.original.instructions)
     }
   );
 };
@@ -11587,7 +10977,7 @@ function AgentsTable({ agents, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyAgentsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search agents", placeholder: "Search agents" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(AgentsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -12211,36 +11601,8 @@ function RelationWrapper({ description, children }) {
   ] }) : children;
 }
 
-function EntryListTextCell({ children, isLoading }) {
-  const [randomWidth, setRandomWidth] = React.useState(void 0);
-  React.useEffect(() => {
-    setRandomWidth(Math.floor(Math.random() * (90 - 50 + 1)) + 50);
-  }, []);
-  if (!randomWidth) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
-      style: { width: `${randomWidth}%` }
-    }
-  ) : children });
-}
-function EntryListStatusCell({ status }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
-    status ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
-          "bg-green-600": status === "success",
-          "bg-red-700": status === "failed"
-        })
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
-      "Status: ",
-      status ? status : "not provided"
-    ] })
-  ] });
+function EntryListRoot({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid", children });
 }
 
 function getColumnTemplate(columns) {
@@ -12252,33 +11614,53 @@ function getColumnTemplate(columns) {
   }).join(" ");
 }
 
-function EntryListItem({
-  item,
-  selectedItemId,
-  onClick,
-  children,
-  columns,
-  isLoading
-}) {
-  const isSelected = selectedItemId === item.id;
+function EntryListHeader({ columns }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg px-[1.5rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("grid gap-[1.5rem] text-left uppercase py-[.75rem] text-icon3 text-[0.75rem]"),
+      style: { gridTemplateColumns: getColumnTemplate(columns) },
+      children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
+    }
+  ) });
+}
+
+function EntryListEntries({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid bg-surface3 overflow-y-auto", children });
+}
+
+function EntryListTrim({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-lg border border-border1 overflow-clip"), children });
+}
+
+function EntryListEntry({ entry, isSelected, onClick, children, columns }) {
   const handleClick = () => {
-    return onClick && onClick(item?.id);
+    onClick?.(entry?.id);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "li",
     {
-      className: cn("border-b text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]", {
-        "bg-surface5": isSelected
-      }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      className: cn(
+        "border-t text-[#ccc] border-border1 last:border-b-0 text-[0.875rem]",
+        "[&:last-child>button]:rounded-b-lg",
+        {
+          "bg-surface5": isSelected
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: handleClick,
-          className: cn("grid w-full px-[1.5rem] gap-[2rem] text-left items-center min-h-[3rem]", {
-            "hover:bg-surface5": !isLoading
-          }),
+          className: cn(
+            "grid w-full px-[1.5rem] gap-[1.5rem] text-left items-center min-h-[3rem]",
+            "focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_1px_rgba(24,251,111,.75)]",
+            {
+              // hover effect only not for skeleton and selected
+              "hover:bg-surface4": entry && !isSelected
+            }
+          ),
           style: { gridTemplateColumns: getColumnTemplate(columns) },
-          disabled: isLoading,
+          disabled: !entry,
           children
         }
       )
@@ -12286,178 +11668,180 @@ function EntryListItem({
   );
 }
 
-function EntryList({
-  items: dataItems,
-  selectedItemId,
-  onItemClick,
+function EntryListMessage({ children, message, className, type }) {
+  if (!children && !message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid border-t border-border1", className), children: message ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "p",
+    {
+      className: cn(
+        "text-icon3 text-[0.875rem] text-center grid p-[2rem] justify-center justify-items-center gap-[.5rem]",
+        "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-75",
+        {
+          "[&>svg]:text-red-500": type === "error"
+        }
+      ),
+      children: [
+        type === "error" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+        " ",
+        message
+      ]
+    }
+  ) : children });
+}
+
+function EntryListNextPageLoading({
   isLoading,
-  isLoadingNextPage,
-  total,
-  page,
   hasMore,
-  onNextPage,
-  onPrevPage,
-  perPage,
-  columns,
-  searchTerm,
   setEndOfListElement,
-  errorMsg
+  loadingText = "Loading more data...",
+  noMoreDataText = "No more data to load"
 }) {
-  const loadingItems = Array.from({ length: 3 }).map((_, index) => {
-    return {
-      id: `loading-${index + 1}`,
-      ...(columns || []).reduce(
-        (acc, col) => {
-          acc[col.name] = `...`;
-          return acc;
-        },
-        {}
-      )
-    };
-  });
-  const items = isLoading ? loadingItems : dataItems;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid mb-[3rem]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("sticky top-0 bg-surface4 z-[1] rounded-t-lg border border-border1  px-[1.5rem]"), children: /* @__PURE__ */ jsxRuntime.jsx(
+  if (!setEndOfListElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setEndOfListElement, className: "text-[0.875rem] text-icon3 opacity-50 flex mt-[2rem] justify-center", children: [
+    isLoading && loadingText,
+    !hasMore && !isLoading && noMoreDataText
+  ] });
+}
+
+function EntryListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
+  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex pt-[1.5rem] items-center justify-center text-icon3 text-[0.875rem] gap-[2rem] "), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "Page ",
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
+    ] }),
+    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
-      {
-        className: cn("grid gap-[2rem] text-left uppercase py-[.75rem] text-icon3 text-[0.75rem]"),
-        style: { gridTemplateColumns: getColumnTemplate(columns) },
-        children: columns?.map((col) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label || col.name }, col.name))
-      }
-    ) }),
-    errorMsg && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "p",
       {
         className: cn(
-          "text-[0.875rem] text-center items-center flex justify-center p-[2.5rem] gap-[1rem] text-icon3",
-          "[&>svg]:w-[1.5em]",
-          "[&>svg]:h-[1.5em]",
-          "[&>svg]:text-red-500"
+          "flex gap-[1rem]",
+          "[&>button]:flex [&>button]:items-center [&>button]:gap-[0.5rem] [&>button]:text-icon4 [&>button:hover]:text-icon5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-[0.25rem] [&>button]:px-[0.5rem] [&>button]:rounded-md",
+          "[&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlertIcon, {}),
-          " ",
-          errorMsg || "Something went wrong while fetching the data."
+          typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
+            "Previous"
+          ] }),
+          hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, children: [
+            "Next",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
+          ] })
         ]
       }
-    ) }),
-    !isLoading && !errorMsg && items?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-icon3 text-[0.875rem] text-center h-[3.5rem] items-center flex justify-center", children: searchTerm ? `No results found for "${searchTerm}"` : "No entries found" }) }),
-    !errorMsg && items?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "grid border border-border1 border-t-0 bg-surface3 rounded-xl rounded-t-none overflow-y-auto", children: items.map((item) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          EntryListItem,
-          {
-            item,
-            selectedItemId,
-            onClick: isLoading ? void 0 : onItemClick,
-            columns,
-            isLoading,
-            children: (columns || []).map((col, index) => {
-              const isValidReactElement = React.isValidElement(item?.[col.name]);
-              const key = `${index}-${item.id}`;
-              return isValidReactElement ? /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: item?.[col.name] }, key) : /* @__PURE__ */ jsxRuntime.jsx(EntryListTextCell, { isLoading, children: item?.[col.name] }, key);
-            })
-          },
-          item.id
-        );
-      }) }),
-      setEndOfListElement && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: setEndOfListElement,
-          className: "text-[0.875rem] text-icon3 opacity-50 flex mt-[2rem] justify-center",
-          children: [
-            isLoadingNextPage && "Loading...",
-            !hasMore && !isLoadingNextPage && !isLoading && "No more data to load"
-          ]
-        }
-      ),
-      typeof page === "number" && typeof perPage === "number" && typeof total === "number" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex pt-[1.5rem] items-center justify-center text-icon3 text-[0.875rem] gap-[2rem]"), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          "Page ",
-          page ? page + 1 : "1"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "flex gap-[1rem]",
-              "[&>button]:flex [&>button]:items-center [&>button]:gap-[0.5rem] [&>button]:text-icon4 [&>button:hover]:text-icon5 [&>button]:transition-colors [&>button]:border [&>button]:border-border1 [&>button]:p-[0.25rem] [&>button]:px-[0.5rem] [&>button]:rounded-md",
-              " [&_svg]:w-[1em] [&_svg]:h-[1em] [&_svg]:text-icon3"
-            ),
-            children: [
-              typeof page === "number" && page > 0 && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onPrevPage, disabled: page === 0, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
-                "Previous"
-              ] }),
-              hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onNextPage, disabled: !hasMore, children: [
-                "Next",
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-              ] })
-            ]
-          }
-        )
-      ] })
+    )
+  ] });
+}
+
+function EntryListEntryTextCol({ children, isLoading }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] truncate ", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none" }) : children });
+}
+function EntryListEntryStatusCol({ status }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-center items-center w-full relative"), children: [
+    status ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("w-[0.6rem] h-[0.6rem] rounded-full", {
+          "bg-green-600": status === "success",
+          "bg-red-700": status === "failed"
+        })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon2 text-[0.75rem] leading-none", children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [
+      "Status: ",
+      status ? status : "not provided"
     ] })
   ] });
 }
 
-function EntryListToolbar({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("flex justify-between bg-surface4 z-[1] mt-[1rem] mb-[1rem] rounded-lg px-[1.5rem] ", className),
-      children
-    }
-  );
+const EntryList = Object.assign(EntryListRoot, {
+  Header: EntryListHeader,
+  Trim: EntryListTrim,
+  Entries: EntryListEntries,
+  Entry: EntryListEntry,
+  Message: EntryListMessage,
+  NextPageLoading: EntryListNextPageLoading,
+  Pagination: EntryListPagination,
+  EntryText: EntryListEntryTextCol,
+  EntryStatus: EntryListEntryStatusCol
+});
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+function EntryListEntriesSkeleton({ columns, numberOfRows = 3 }) {
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + (columns?.length || 0) + (numberOfRows || 0)) % widths.length;
+    return widths[index];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(EntryListEntries, { children: Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(EntryListEntry, { columns, children: (columns || []).map((col, colIdx) => {
+    const key = `${col.name}-${colIdx}`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "bg-surface4 rounded-md animate-pulse text-transparent h-[1rem] select-none",
+        style: { width: `${getPseudoRandomWidth(rowIdx, colIdx)}` }
+      },
+      key
+    );
+  }) }, rowIdx)) });
 }
 
-function EntryListPageHeader({ title, description, icon, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "grid z-[1] top-0 gap-y-[0.5rem] text-icon4 bg-surface2 py-[3rem]",
-        "3xl:h-full 3xl:content-start 3xl:grid-rows-[auto_1fr] h-full 3xl:overflow-y-auto"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1rem] w", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[.75em] items-center", "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:text-icon4"), children: [
-            icon,
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-icon6 text-[1.25rem]", children: title })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[0.875rem]", children: description })
-        ] }),
-        children
-      ]
-    }
-  );
+function EntryListSkeleton({ columns, numberOfRows }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(EntryList, { children: /* @__PURE__ */ jsxRuntime.jsxs(EntryListTrim, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EntryListHeader, { columns }),
+    /* @__PURE__ */ jsxRuntime.jsx(EntryListEntriesSkeleton, { columns, numberOfRows })
+  ] }) });
 }
 
-function SideDialog({
+function getToNextEntryFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsNextItem = currentIndex < entries.length - 1;
+  if (thereIsNextItem) {
+    return () => {
+      const nextItem = entries[currentIndex + 1];
+      update(nextItem.id);
+    };
+  }
+  return void 0;
+}
+function getToPreviousEntryFn({ entries, id, update }) {
+  const currentIndex = entries.findIndex((entry) => entry.id === id);
+  const thereIsPreviousItem = currentIndex > 0;
+  if (thereIsPreviousItem) {
+    return () => {
+      const previousItem = entries[currentIndex - 1];
+      update(previousItem.id);
+    };
+  }
+  return void 0;
+}
+
+function SideDialogRoot({
   dialogTitle,
   dialogDescription,
   isOpen,
   onClose,
   children,
   variant = "default",
-  hasCloseButton = true,
+  level = 1,
   className
 }) {
   const isConfirmation = variant === "confirmation";
   return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-[0.25]") }),
+    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-40") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       DialogPrimitive__namespace.Content,
       {
         className: cn(
-          "fixed top-0 bottom-0 right-0 border-l border-border1 z-50 bg-surface4",
-          "w-[calc(100vw-20rem)] max-w-[50rem]",
-          "3xl:max-w-[60rem]",
-          "4xl:max-w-[50%]",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ",
           {
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4": !isConfirmation,
+            "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
+            "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
+            "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 shadow-[-3rem_0_2rem_0_rgba(0,0,0,0.75)]": !isConfirmation,
             "bg-surface2/70": isConfirmation
           },
           className
@@ -12467,15 +11851,15 @@ function SideDialog({
             /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: dialogTitle }),
             /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: dialogDescription })
           ] }),
-          !isConfirmation && hasCloseButton && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: cn(
-                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute too-0 left-[-3.5rem] bg-surface4 text-icon4 border-l border-b border-border1",
+                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-icon4 border-l border-b border-border2",
                 "hover:surface5 hover:text-icon5"
               ),
               "aria-label": "Close",
-              children: isConfirmation ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12493,125 +11877,97 @@ function SideDialog({
   ] }) });
 }
 
-function SideDialogHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
+      children
+    }
+  );
 }
-
-function SideDialogFooter({ children, onNext, onPrevious, showInnerNav }) {
-  const handleOnNext = () => {
-    onNext?.();
-  };
-  const handleOnPrevious = () => {
-    onPrevious?.();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex items-center justify-end gap-[1rem] px-[1.5rem] py-[1rem] min-h-[4rem] border-t border-border1",
+        `grid overflow-y-auto h-full `,
+        `overflow-x-auto min-w-[min-content]`,
         {
-          "justify-between": showInnerNav
-        }
+          "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
+          "grid place-items-center": isCentered,
+          "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
+          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
+          "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+        },
+        className
       ),
-      children: [
-        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem]"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-            "Close"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            "Next",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}),
-            "Previous"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-      ]
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
     }
   );
 }
-function SideDialogFooterGroup({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-[1rem]", children });
+function devUIStyleRequested(name) {
+  try {
+    const raw = localStorage.getItem("add-dev-style-to-components");
+    if (!raw) return false;
+    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
+    return components.includes(name);
+  } catch (error) {
+    console.error("Error reading or parsing localStorage:", error);
+    return false;
+  }
 }
 
-function SideDialogContent({ children, className, isCentered, isFullHeight, variant }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-[3rem] py-[2rem] overflow-y-scroll", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("grid gap-[2rem] max-w-[50rem] w-full mx-auto pb-[1rem] ", {
-        "items-center justify-center h-full content-center": isCentered,
-        "min-h-full": isFullHeight,
-        "content-start": !isFullHeight && !isCentered
-      }),
-      children
-    }
-  ) });
+function ButtonsGroup({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
+}
+
+function Sections({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-[3rem]", className), children });
+}
+
+function SectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn(`grid gap-[1rem]`, className), children });
+}
+
+function SectionHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cn("grid items-center grid-cols-[1fr_auto]", className), children });
 }
-function SideDialogSection({ children }) {
+
+function SectionHeading({ headingLevel = "h2", children, className }) {
+  const HeadingTag = headingLevel;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    HeadingTag,
     {
       className: cn(
-        "grid text-[0.875rem] text-icon5 gap-[1rem] justify-items-start",
-        "[&>h3]:text-icon3 [&>h3]:text-[1rem] [&>h3]:font-semibold [&>h3]:border-b [&>h3]:border-border1 [&>h3]:pb-[1rem] [&>h3]:pr-[1rem] [&>h3]:inline-flex [&>h3]:gap-[.5rem] [&>h3]:items-center",
-        "[&>h3>svg]:w-[1em] [&>h3>svg]:h-[1em] [&>h3>svg]:text-icon3"
+        "flex items-center gap-[0.5em] text-[0.9375rem] font-bold text-icon4",
+        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+        className
       ),
       children
     }
   );
 }
-function SideDialogKeyValueList({ items, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-[2rem] gap-y-[.5rem] text-[0.875rem] content-start", className), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-icon3", children: [
-      item.key,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-icon4", children: item.value })
-  ] })) });
-}
 
-function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }) {
-  const handleOnNext = () => {
-    onNext?.();
-  };
-  const handleOnPrevious = () => {
-    onPrevious?.();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(`flex justify-between h-[3.5rem] items-center  text-icon5 text-[.875rem] pl-[1.5rem]`, className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-[2rem]", "[&_svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon3"), children: [
-        children,
-        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "|" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex gap-[1rem] items-baseline"
-                // '[&>button]:text-[0.875rem] [&>button]:flex [&>button]:items-center [&>button]:px-[0.5rem] [&>button]:py-[0.8rem] [&>button]:leading-[1]',
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-                  "Previous",
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-                  "Next",
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
-                ] })
-              ]
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
+const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+  Heading: SectionHeading
+});
 
 const useCodemirrorTheme = () => {
   return React.useMemo(
@@ -12629,7 +11985,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
+function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
   const theme = useCodemirrorTheme();
   const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
   const hasMultilineText = React.useMemo(() => {
@@ -12641,22 +11997,19 @@ function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
     }
   }, [codeStr]);
   const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "border border-border1 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border1 last:border-b-0 grid", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1rem] px-[1.5rem] border-b border-border1 grid grid-cols-[1fr_auto]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Section.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+        icon,
+        title
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content" }),
         hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("bg-surface3 p-[1rem] overflow-auto text-icon4 text-[0.875rem] [&>div]:border-none break-all"),
-        children: codeStr && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: simplified ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] py-[1rem] font-mono break-all mx-[1.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping], theme, value: finalCodeStr }) })
-      }
-    )
-  ] }) });
+    codeStr && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/20 p-[1rem] overflow-hidden rounded-xl border border-white/10 text-icon4 text-[0.875rem] break-all", children: simplified ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping], theme, value: finalCodeStr }) })
+  ] });
 }
 function containsInnerNewline(obj) {
   if (typeof obj === "string") {
@@ -12689,6 +12042,69 @@ function SideDialogHeading({ children, className, as = "h1" }) {
   );
 }
 
+function SideDialogContent({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-[1.5rem] pl-[2.25rem] overflow-y-scroll grid gap-[1.5rem] content-start", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-[1.5rem] mb-[2rem] "), children }) });
+}
+
+function SideDialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+}
+
+function SideDialogTop({ children, withTopSeparator, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        `flex h-[3.5rem] items-center text-icon5 text-[.875rem] pl-[1.5rem] relative gap-[1rem]`,
+        '[&:after]:content-[""] [&:after]:absolute [&:after]:left-[1.5rem] [&:after]:right-[1.5rem] [&:after]:bottom-0 [&:after]:border-b [&:after]:border-border1',
+        {
+          '[&:before]:content-[""] [&:before]:absolute [&:before]:left-[1.5rem] [&:before]:right-[1.5rem] [&:before]:top-0 [&:before]:border-t [&:before]:border-border1': withTopSeparator
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function SideDialogNav({ onNext, onPrevious, className }) {
+  const handleOnNext = () => {
+    onNext?.();
+  };
+  const handleOnPrevious = () => {
+    onPrevious?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[1rem]",
+        "[&_svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon3",
+        className
+      ),
+      children: (onNext || onPrevious) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem] items-baseline"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+          "Previous",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+          "Next",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
+        ] })
+      ] })
+    }
+  );
+}
+
+const SideDialog = Object.assign(SideDialogRoot, {
+  Top: SideDialogTop,
+  Header: SideDialogHeader,
+  Heading: SideDialogHeading,
+  Content: SideDialogContent,
+  CodeSection: SideDialogCodeSection,
+  Nav: SideDialogNav
+});
+
 function EntityMainHeader({
   title,
   description,
@@ -12723,26 +12139,36 @@ function EntityMainHeader({
 }
 
 function PageHeader({ title, description, icon, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "header",
-    {
-      className: cn(
-        "grid gap-[.5rem] pt-[2rem] pb-[2rem]",
-        "[&>h1]:text-icon6 [&>h1]:text-[1.25rem] [&>h1]:font-normal [&>h1]:flex [&>h1]:items-center [&>h1]:gap-[0.5rem]",
-        "[&_svg]:w-[1.4rem] [&_svg]:h-[1.4rem] [&_svg]:text-icon3",
-        "[&>p]:text-icon4 [&>p]:text-[0.875rem] [&>p]:m-0",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h1", { children: [
+  const titleIsLoading = title === "loading";
+  const descriptionIsLoading = description === "loading";
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("grid gap-[.5rem] pt-[2rem] pb-[2rem]", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h1",
+      {
+        className: cn(
+          "text-icon6 text-[1.25rem] font-normal flex items-center gap-[0.5rem]",
+          "[&>svg]:w-[1.4rem] [&>svg]:h-[1.4rem] [&>svg]:text-icon3",
+          {
+            "bg-surface4 w-[15rem] max-w-[50%] rounded-md animate-pulse": titleIsLoading
+          }
+        ),
+        children: titleIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           icon && icon,
           " ",
           title
-        ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: description })
-      ]
-    }
-  );
+        ] })
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn("text-icon4 text-[0.875rem] m-0", {
+          "bg-surface4 w-[40rem] max-w-[80%] rounded-md animate-pulse": descriptionIsLoading
+        }),
+        children: descriptionIsLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) : description
+      }
+    )
+  ] });
 }
 
 function DatePicker({ className, classNames, showOutsideDays = true, ...props }) {
@@ -13053,67 +12479,357 @@ const DateTimePickerContent = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          TimePicker,
+          TimePicker,
+          {
+            onValueChange: handleTimeStrChange,
+            className: "m-4 mt-0 w-auto",
+            defaultValue: value ? dateFns.formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-[0.5rem] m-4 mt-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "primary",
+              tabIndex: 0,
+              onClick: () => {
+                dateInputValueIsValid ? handleApply() : handleCancel();
+              },
+              children: newValueDefined ? `Apply` : `Cancel`
+            }
+          ),
+          newValueDefined && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", tabIndex: 0, onClick: handleClear, children: "Clear" })
+        ] })
+      ]
+    }
+  );
+};
+const DefaultTrigger = React__namespace.forwardRef(
+  ({ value, placeholder, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" }),
+      value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PP p") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
+    ] });
+  }
+);
+
+function TextAndIcon({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "flex items-center gap-[0.5em] text-icon4 text-[0.875rem]",
+        "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50 [&_svg]:flex-shrink-0",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function getShortId(id) {
+  if (!id) return void 0;
+  return id.slice(0, 8);
+}
+
+function Notification({ children, className, isVisible, autoDismiss = true, dismissTime = 5e3 }) {
+  const [localIsVisible, setLocalIsVisible] = React.useState(isVisible);
+  React.useEffect(() => {
+    if (autoDismiss && isVisible) {
+      const timer = setTimeout(() => {
+        setLocalIsVisible(false);
+      }, dismissTime);
+      return () => clearTimeout(timer);
+    }
+  }, [autoDismiss, isVisible, dismissTime]);
+  React.useEffect(() => {
+    setLocalIsVisible(isVisible);
+  }, [isVisible]);
+  if (!localIsVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[1fr_auto] gap-[0.5rem] rounded-l bg-white/5 p-[1.5rem] py-[1rem] text-[0.875rem] text-icon3 items-center",
+        "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[0.5rem] items-center", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
+        ] })
+      ]
+    }
+  );
+}
+
+function MainSidebarNavSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "min-h-[1.3rem] relative",
+        '[&:after]:content-[""] [&:after]:block [&:after]:absolute [&:after]:h-[0px] [&:after]:border-border1 [&:after]:border-t [&:after]:top-[48%] [&:after]:left-[0.75rem] [&:after]:right-[0.75rem]',
+        className
+      )
+    }
+  );
+}
+
+function MainSidebarRoot({ children, className }) {
+  const { state, toggleSidebar } = useMainSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full px-[1rem] pb-[1rem] relative overflow-y-auto",
+        {
+          "lg:min-w-[13rem] xl:min-w-[14rem] 2xl:min-w-[15rem] 3xl:min-w-[16rem] 4xl:min-w-[17rem]": !isCollapsed
+        },
+        className
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: toggleSidebar,
+            className: cn(
+              "inline-flex  w-auto items-center text-icon3 h-[2rem] px-[0.75rem] rounded-md",
+              "hover:bg-surface4",
+              "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-icon3",
+              {
+                "ml-auto": !isCollapsed
+              }
+            ),
+            "aria-label": "Toggle sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            onValueChange: handleTimeStrChange,
-            className: "m-4 mt-0 w-auto",
-            defaultValue: value ? dateFns.formatDate(new Date(value), "hh:mm a") : defaultTimeStrValue
+            onClick: toggleSidebar,
+            className: cn("w-[.75rem] h-full right-0 top-0 absolute opacity-10", {
+              "cursor-w-resize": !isCollapsed,
+              "cursor-e-resize": isCollapsed
+            }),
+            "aria-label": "Toggle sidebar"
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-[0.5rem] m-4 mt-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "primary",
-              tabIndex: 0,
-              onClick: () => {
-                dateInputValueIsValid ? handleApply() : handleCancel();
-              },
-              children: newValueDefined ? `Apply` : `Cancel`
-            }
-          ),
-          newValueDefined && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", tabIndex: 0, onClick: handleClear, children: "Clear" })
-        ] })
+        )
       ]
     }
   );
-};
-const DefaultTrigger = React__namespace.forwardRef(
-  ({ value, placeholder, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Button, { ref, variant: "outline", className: cn("justify-start", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4" }),
-      value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white", children: dateFns.format(value, "PP p") }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray", children: placeholder ?? "Pick a date" })
-    ] });
-  }
-);
+}
 
-function TextAndIcon({ children, className }) {
+function MainSidebarBottom({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-auto", className), children });
+}
+
+function MainSidebarNav({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("", className), children });
+}
+
+function MainSidebarNavSection({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("grid items-start content-center relative", className), children });
+}
+
+function MainSidebarNavLink({
+  link,
+  state = "default",
+  children,
+  isActive,
+  className
+}) {
+  const { Link } = useLinkComponent();
+  const isDefaultState = state === "default";
+  const isFeatured = link?.variant === "featured";
+  const linkParams = link?.url?.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+    "li",
     {
       className: cn(
-        "flex items-center gap-[0.5em] text-icon4 text-[0.875rem]",
-        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50 [&_svg]:flex-shrink-0",
+        "flex ",
+        "[&>a]:flex [&>a]:items-center [&>a]:min-h-[2rem] [&>a]:gap-[10px] [&>a]:text-[0.8125rem] [&>a]:text-icon3 [&>a]:py-[6px] [&>a]:px-[0.75rem] [&>a]:w-full [&>a]:rounded-lg [&>a]:justify-center",
+        "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-icon3/60",
+        "[&>a:hover]:bg-surface4 [&>a:hover]:text-icon5 [&>a:hover_svg]:text-icon3",
+        {
+          "[&>a]:text-icon5 [&>a]:bg-surface3": isActive,
+          "[&_svg]:text-icon5": isActive,
+          "[&>a]:justify-start ": isDefaultState,
+          "[&_svg]:text-icon3": !isDefaultState,
+          "[&>a]:rounded-md [&>a]:my-[0.5rem] [&>a]:bg-accent1/75 [&>a:hover]:bg-accent1/85 [&>a]:text-black [&>a:hover]:text-black": isFeatured,
+          "[&_svg]:text-black/75": isFeatured
+        },
         className
       ),
-      children
+      children: link ? /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, children: [
+        isDefaultState ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: link.icon && link.icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: link.icon && link.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.name })
+        ] }),
+        isDefaultState ? link.name : /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: link.name }),
+        " ",
+        children
+      ] }) : children
     }
   );
 }
 
-function getShortId(id) {
-  if (!id) return void 0;
-  return id.slice(0, 8);
+function MainSidebarNavHeader({ children, className, state = "default" }) {
+  const isDefaultState = state === "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-[auto_1fr] items-center min-h-[2.8rem] ", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "header",
+      {
+        className: cn("text-[0.6875rem] uppercase text-icon3/75 tracking-widest", {
+          "pl-[0.75rem]": isDefaultState
+        }),
+        children: isDefaultState ? children : /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {})
+  ] });
+}
+
+function MainSidebarNavList({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("grid gap-[0.25rem] items-start content-center ", className), children });
+}
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const MainSidebarContext = React.createContext(null);
+function useMainSidebar() {
+  const context = React.useContext(MainSidebarContext);
+  if (!context) {
+    throw new Error("useMainSidebar must be used within a MainSidebarProvider.");
+  }
+  return context;
+}
+function stateInitializer() {
+  const storedState = window.localStorage.getItem(SIDEBAR_COOKIE_NAME);
+  return storedState === "collapsed" ? "collapsed" : "default";
+}
+const setLocalStorage = (value) => {
+  window.localStorage.setItem(SIDEBAR_COOKIE_NAME, value.toString());
+};
+function MainSidebarProvider({ children }) {
+  const [state, setState] = React.useState(stateInitializer);
+  const toggleSidebar = React.useCallback(() => {
+    setLocalStorage(state === "default" ? "collapsed" : "default");
+    setState(state === "default" ? "collapsed" : "default");
+  }, [state]);
+  const contextValue = React.useMemo(
+    () => ({
+      state,
+      toggleSidebar
+    }),
+    [state, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MainSidebarContext.Provider, { value: contextValue, children });
+}
+
+const MainSidebar = Object.assign(MainSidebarRoot, {
+  Bottom: MainSidebarBottom,
+  Nav: MainSidebarNav,
+  NavSection: MainSidebarNavSection,
+  NavLink: MainSidebarNavLink,
+  NavHeader: MainSidebarNavHeader,
+  NavList: MainSidebarNavList,
+  NavSeparator: MainSidebarNavSeparator
+});
+
+const scoresListColumns = [
+  { name: "date", label: "Date", size: "4.5rem" },
+  { name: "time", label: "Time", size: "6.5rem" },
+  { name: "input", label: "Input", size: "1fr" },
+  { name: "entityId", label: "Entity", size: "10rem" },
+  { name: "score", label: "Score", size: "3rem" }
+];
+function ScoresList({
+  scores,
+  pagination,
+  onScoreClick,
+  onPageChange,
+  errorMsg,
+  selectedScoreId
+}) {
+  if (!scores) {
+    return null;
+  }
+  const scoresHasMore = pagination?.hasMore;
+  const handleNextPage = () => {
+    if (scoresHasMore) {
+      onPageChange?.(pagination.page + 1);
+    }
+  };
+  const handlePrevPage = () => {
+    if (pagination?.page && pagination.page > 0) {
+      onPageChange?.(pagination.page - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: scoresListColumns }),
+      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scores.map((score) => {
+        const createdAtDate = new Date(score.createdAt);
+        const isTodayDate = dateFns.isToday(createdAtDate);
+        const entry = {
+          id: score.id,
+          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+          input: JSON.stringify(score?.input),
+          entityId: score.entityId,
+          score: score.score
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedScoreId === score.id,
+            columns: scoresListColumns,
+            onClick: onScoreClick,
+            children: scoresListColumns.map((col, index) => {
+              const key = `${index}-${score.id}`;
+              return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EntryList.Pagination,
+      {
+        currentPage: pagination?.page || 0,
+        onNextPage: handleNextPage,
+        onPrevPage: handlePrevPage,
+        hasMore: scoresHasMore
+      }
+    )
+  ] });
 }
 
 function ScoreDialog({
-  scorer,
   score,
+  scorerName,
   isOpen,
   onClose,
   onNext,
   onPrevious,
-  computeTraceLink
+  computeTraceLink,
+  dialogLevel = 1,
+  usageContext = "scorerPage"
 }) {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13123,77 +12839,144 @@ function ScoreDialog({
       dialogDescription: "View and analyze score details",
       isOpen,
       onClose,
-      className: cn("w-[calc(100vw-20rem)] max-w-[80%]", "3xl:max-w-[65%]", "4xl:max-w-[55%]"),
+      level: dialogLevel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+          usageContext === "scorerPage" && /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
             " ",
-            scorer?.config?.name
+            scorerName
+          ] }),
+          usageContext === "aiSpanDialog" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+              " ",
+              getShortId(score?.traceId)
+            ] }),
+            score?.spanId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              "›",
+              /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+                getShortId(score?.spanId)
+              ] })
+            ] })
           ] }),
           "›",
           /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-            score?.id
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-          score?.traceId && /* @__PURE__ */ jsxRuntime.jsx(
-            KeyValueList,
-            {
-              data: [
-                {
-                  label: "Trace ID",
-                  value: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }),
-                  key: "traceId"
-                },
-                ...score?.spanId ? [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalculatorIcon, {}),
+            getShortId(score?.id)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalculatorIcon, {}),
+              " Score"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+              " ",
+              score?.id
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              KeyValueList,
+              {
+                data: [
+                  ...usageContext === "aiSpanDialog" ? [
+                    {
+                      label: "Scorer",
+                      value: score?.scorer?.name || "-",
+                      key: "scorer-name"
+                    }
+                  ] : [],
                   {
-                    label: "Span ID",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }),
-                    key: "spanId"
-                  }
-                ] : []
-              ],
-              LinkComponent: Link
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
-              codeStr: score?.reason,
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(score?.input || null, null, 2) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(score?.output || null, null, 2) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Preprocess Prompt",
-              codeStr: score?.preprocessPrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Analyze Prompt", codeStr: score?.analyzePrompt || "null", simplified: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Score Prompt",
-              codeStr: score?.generateScorePrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Reason Prompt",
-              codeStr: score?.generateReasonPrompt || "null",
-              simplified: true
-            }
-          )
-        ] }) })
+                    label: "Created at",
+                    value: score?.createdAt ? format.format(new Date(score?.createdAt), "MMM d, h:mm:ss aaa") : "n/a",
+                    key: "date"
+                  },
+                  ...usageContext !== "aiSpanDialog" ? [
+                    {
+                      label: "Trace ID",
+                      value: score?.traceId ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }) : "n/a",
+                      key: "traceId"
+                    },
+                    {
+                      label: "Span ID",
+                      value: score?.traceId && score?.spanId ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }) : "n/a",
+                      key: "spanId"
+                    }
+                  ] : []
+                ],
+                LinkComponent: Link
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
+                codeStr: score?.reason || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Input",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+                codeStr: JSON.stringify(score?.input || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Output",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+                codeStr: JSON.stringify(score?.output || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Preprocess Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.preprocessPrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Analyze Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.analyzePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Score Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.generateScorePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Reason Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.generateReasonPrompt || "null",
+                simplified: true
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -13334,7 +13117,7 @@ function ScorersTable({ scorers, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyScorersTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.scorer.config.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search scorers", placeholder: "Search scorers" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ScorersTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -13370,26 +13153,16 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classNam
   }
 ) });
 
-const variantClasses$1 = {
-  warning: "bg-yellow-900/20 border-sm border-yellow-200 text-yellow-200",
-  destructive: "bg-red-900/20 border-sm border-red-200 text-red-200"
-};
-const variantIcons = {
-  warning: lucideReact.TriangleAlert,
-  destructive: lucideReact.AlertCircle
-};
-const Alert = ({ children, variant = "destructive" }) => {
-  const Ico = variantIcons[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(variantClasses$1[variant], "p-2 rounded-md"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(Ico, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { 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 useTraceSpanScores = ({ traceId = "", spanId = "", page }) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["trace-span-scores", traceId, spanId, page],
+    queryFn: () => client.getScoresBySpan({ traceId, spanId, page: page || 0, perPage: 10 }),
+    enabled: !!traceId && !!spanId,
+    refetchInterval: 3e3,
+    gcTime: 0,
+    staleTime: 0
+  });
 };
 
 const AgentMetadataModelSwitcher = ({
@@ -13398,6 +13171,8 @@ const AgentMetadataModelSwitcher = ({
   updateModel,
   apiUrl = "/api/agents/providers"
 }) => {
+  const [originalProvider] = React.useState(defaultProvider);
+  const [originalModel] = React.useState(defaultModel);
   const [selectedModel, setSelectedModel] = React.useState(defaultModel);
   const [showModelSuggestions, setShowModelSuggestions] = React.useState(false);
   const [selectedProvider, setSelectedProvider] = React.useState(defaultProvider || "");
@@ -13528,15 +13303,15 @@ const AgentMetadataModelSwitcher = ({
       if (modelInputRef.current === document.activeElement || providerInputRef.current === document.activeElement || showProviderSuggestions || showModelSuggestions) {
         return;
       }
-      const providerChanged = currentModelProvider && currentModelProvider !== defaultProvider;
+      const providerChanged = currentModelProvider && currentModelProvider !== originalProvider;
       const modelEmpty = !selectedModel || selectedModel === "";
       if (providerChanged && modelEmpty) {
-        setSelectedProvider(cleanProviderId(defaultProvider));
-        setSelectedModel(defaultModel);
-        if (defaultProvider && defaultModel) {
+        setSelectedProvider(cleanProviderId(originalProvider));
+        setSelectedModel(originalModel);
+        if (originalProvider && originalModel) {
           updateModel({
-            provider: defaultProvider,
-            modelId: defaultModel
+            provider: originalProvider,
+            modelId: originalModel
           }).catch((error) => {
             console.error("Failed to reset model:", error);
           });
@@ -13551,8 +13326,8 @@ const AgentMetadataModelSwitcher = ({
     registerResetFn,
     currentModelProvider,
     selectedModel,
-    defaultProvider,
-    defaultModel,
+    originalProvider,
+    originalModel,
     updateModel,
     showProviderSuggestions,
     showModelSuggestions
@@ -13563,6 +13338,27 @@ const AgentMetadataModelSwitcher = ({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Loading providers..." })
     ] });
   }
+  const handleReset = async () => {
+    setSelectedProvider(cleanProviderId(originalProvider));
+    setSelectedModel(originalModel);
+    setProviderSearch("");
+    setModelSearch("");
+    setIsSearchingProvider(false);
+    setIsSearchingModel(false);
+    setShowProviderSuggestions(false);
+    setShowModelSuggestions(false);
+    try {
+      setLoading(true);
+      await updateModel({
+        provider: originalProvider,
+        modelId: originalModel
+      });
+    } catch (error) {
+      console.error("Failed to reset model:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col xl:flex-row items-stretch xl:items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13615,6 +13411,7 @@ const AgentMetadataModelSwitcher = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
+                  "aria-label": "Search providers",
                   spellCheck: "false",
                   ref: providerInputRef,
                   className: `w-full ${!isSearchingProvider && currentModelProvider ? "pl-8 pr-8" : ""}`,
@@ -13653,20 +13450,6 @@ const AgentMetadataModelSwitcher = ({
                             handleProviderSelect(provider);
                           }
                           break;
-                        case "Tab":
-                          if (!e.shiftKey) {
-                            e.preventDefault();
-                            if (highlightedProviderIndex >= 0 && highlightedProviderIndex < filteredProviders2.length) {
-                              const provider = filteredProviders2[highlightedProviderIndex];
-                              handleProviderSelect(provider);
-                            } else {
-                              setShowProviderSuggestions(false);
-                              setIsSearchingProvider(false);
-                              setProviderSearch("");
-                              setHighlightedProviderIndex(-1);
-                            }
-                          }
-                          break;
                         case "Escape":
                           e.preventDefault();
                           setIsSearchingProvider(false);
@@ -13675,8 +13458,6 @@ const AgentMetadataModelSwitcher = ({
                           setShowProviderSuggestions(false);
                           break;
                       }
-                    } else if (e.key === "Tab") {
-                      return;
                     }
                   },
                   onFocus: () => {
@@ -13768,6 +13549,7 @@ const AgentMetadataModelSwitcher = ({
             /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
+                "aria-label": "Search models",
                 spellCheck: "false",
                 ref: modelInputRef,
                 className: "w-full xl:w-3/5",
@@ -13820,7 +13602,6 @@ const AgentMetadataModelSwitcher = ({
                       }, 0);
                       break;
                     case "Enter":
-                    case "Tab":
                       e.preventDefault();
                       if (highlightedModelIndex >= 0 && highlightedModelIndex < filteredModels.length) {
                         const model = filteredModels[highlightedModelIndex];
@@ -13905,14 +13686,26 @@ const AgentMetadataModelSwitcher = ({
             )
           ]
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button$1,
+        {
+          variant: "light",
+          size: "md",
+          onClick: handleReset,
+          disabled: loading,
+          className: "flex items-center gap-1.5 text-xs whitespace-nowrap !border-0",
+          title: "Reset to original model",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "w-3.5 h-3.5" })
+        }
       )
     ] }),
     (() => {
       const currentProvider = providers.find((p) => p.id === currentModelProvider);
       if (currentProvider && !currentProvider.connected) {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Provider not connected" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Provider not connected" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription$1, { as: "p", children: [
             "Set the",
             " ",
             /* @__PURE__ */ jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/50 rounded", children: Array.isArray(currentProvider.envVar) ? currentProvider.envVar.join(", ") : currentProvider.envVar }),
@@ -14053,7 +13846,7 @@ const AgentMetadataNetworkList = ({ agents }) => {
   if (agents.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No agents" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), "data-testid": "agent-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
 const AgentMetadata = ({
   agentId,
@@ -14086,7 +13879,7 @@ const AgentMetadata = ({
       {
         title: "Model",
         hint: modelVersion === "v2" ? void 0 : {
-          link: "https://mastra.ai/en/reference/agents/migration-guide",
+          link: "https://mastra.ai/guides/migrations/vnext-to-standard-apis",
           title: "You are using a legacy v1 model",
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { fontSize: 14, className: "mb-0.5" })
         },
@@ -14109,9 +13902,12 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/agent-memory",
           title: "Agent Memory documentation"
         },
-        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Memory not enabled" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription, { as: "p", children: [
+        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Memory is enabled" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "On" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Memory not enabled" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription$1, { as: "p", children: [
             "Thread messages will not be stored. To activate memory, see the",
             " ",
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -14171,14 +13967,14 @@ const AgentMetadataToolList = ({ tools, agentId }) => {
   if (tools.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No tools" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentToolLink(agentId, tool.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentToolLink(agentId, tool.id), "data-testid": "tool-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
 };
 const AgentMetadataWorkflowList = ({ workflows }) => {
   const { Link, paths } = useLinkComponent();
   if (workflows.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No workflows" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(workflow.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(workflow.id), "data-testid": "workflow-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
 };
 const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const { Link, paths } = useLinkComponent();
@@ -14196,7 +13992,7 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   if (scorerList.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No Scorers" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
 const AgentMetadataPrompt = ({ prompt }) => {
@@ -14491,7 +14287,7 @@ function ToolTable({ tools, agents, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -16194,12 +15990,51 @@ function TreePositionMark({ isLastChild, hasChildren = false }) {
         'after:content-[""] after:absolute after:left-0 after:top-0 after:bottom-0 after:w-[0px] after:border-r-[0.5px] after:border-white after:border-dashed',
         'before:content-[""] before:absolute before:left-0  before:top-[50%] before:w-full before:h-[0px] before:border-b-[0.5px] before:border-white before:border-dashed',
         {
-          "after:bottom-[50%]": isLastChild
-        }
-      ),
-      children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-[1px] top-[50%] bottom-0 w-[0px]  border-r-[0.5px] border-white border-dashed" })
+          "after:bottom-[50%]": isLastChild
+        }
+      ),
+      children: hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-[1px] top-[50%] bottom-0 w-[0px]  border-r-[0.5px] border-white border-dashed" })
+    }
+  );
+}
+
+function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, isLoading }) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-[0.875rem] gap-[1rem] bg-surface3/50 rounded-md p-[1.5rem] justify-center text-icon3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("grid items-start content-start gap-y-[2px] overflow-hidden", "xl:gap-x-[1rem] xl:py-[1rem]", {
+        "xl:grid-cols-[3fr_auto]": !overallEndTime,
+        "xl:grid-cols-[3fr_2fr]": overallEndTime
+      }),
+      children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
+        TraceTimelineSpan,
+        {
+          span,
+          onSpanClick,
+          selectedSpanId,
+          overallLatency,
+          overallStartTime,
+          overallEndTime
+        },
+        span.id
+      ))
     }
-  );
+  ) });
 }
 
 function TraceTimelineLegend({ spans = [] }) {
@@ -16215,65 +16050,6 @@ function TraceTimelineLegend({ spans = [] }) {
   }) });
 }
 
-function TraceTimeline({
-  spans = [],
-  hierarchicalSpans = [],
-  onSpanClick,
-  selectedSpanId,
-  isLoading,
-  className
-}) {
-  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
-  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
-  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
-        " Timeline"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center text-[0.875rem] gap-[1rem] bg-surface3/50 rounded-md p-[1.5rem] mr-[1.5rem] justify-center text-icon3 mt-[.5rem]",
-          "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-          " Loading Trace Timeline ..."
-        ]
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "grid items-start content-start gap-y-[2px] bg-surface2 rounded-lg overflow-hidden pl-[1.5rem] py-[1.5rem]",
-          "xl:gap-x-[1rem] xl:py-[1rem]",
-          {
-            "xl:grid-cols-[3fr_auto]": !overallEndTime,
-            "xl:grid-cols-[3fr_2fr]": overallEndTime
-          }
-        ),
-        children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
-          TraceTimelineSpan,
-          {
-            span,
-            onSpanClick,
-            selectedSpanId,
-            overallLatency,
-            overallStartTime,
-            overallEndTime
-          },
-          span.id
-        ))
-      }
-    )
-  ] });
-}
-
 function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   if (!traceUsage && !spanUsage) {
     console.warn("No usage data available");
@@ -16386,12 +16162,11 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CoinsIcon, {})
     }
   };
-  let tokenPresentations = {};
-  if (hasV5Format) {
-    tokenPresentations = { ...commonTokenPresentations, ...v5TokenPresentations };
-  } else {
-    tokenPresentations = { ...commonTokenPresentations, ...legacyTokenPresentations };
-  }
+  let tokenPresentations = {
+    ...commonTokenPresentations,
+    ...v5TokenPresentations,
+    ...legacyTokenPresentations
+  };
   let usageKeyOrder = [];
   if (hasV5Format) {
     usageKeyOrder = ["totalTokens", "inputTokens", "outputTokens", "reasoningTokens", "cachedInputTokens"];
@@ -16399,55 +16174,42 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
   }
   const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-[1.5rem] flex-wrap", className), children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "grid gap-[1.5rem]",
-        {
-          "xl:grid-cols-3": usageAsArray.length === 3,
-          "xl:grid-cols-2": usageAsArray.length === 2
-        },
-        className
-      ),
-      children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("bg-white/5 p-[1rem] px-[1.25rem] rounded-lg text-[0.875rem]", {
-            "min-h-[5.5rem]": traceUsage
-          }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
-                  "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
-                ),
-                children: [
-                  tokenPresentations?.[key]?.icon,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-[1rem]", children: value })
-                ]
-              }
+      className: cn("bg-white/5 p-[.75rem] px-[1rem] rounded-lg text-[0.875rem] flex-grow", {
+        "min-h-[5.5rem]": traceUsage
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
+              "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
             ),
-            tokensByProviderValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem] ", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "dl",
-              {
-                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("dt", { children: provider }),
-                  /* @__PURE__ */ jsxRuntime.jsx("dd", { children: providerTokens?.[key] })
-                ]
-              },
-              provider
-            )) })
-          ]
-        },
-        key
-      ))
-    }
-  );
+            children: [
+              tokenPresentations?.[key]?.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-[1rem]", children: value })
+            ]
+          }
+        ),
+        tokensByProviderValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "dl",
+          {
+            className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("dt", { children: provider }),
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { children: providerTokens?.[key] })
+            ]
+          },
+          provider
+        )) })
+      ]
+    },
+    key
+  )) });
 }
 
 function useTraceInfo(trace) {
@@ -16530,253 +16292,199 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   return baseInfo;
 }
 
-const ScoreTable = ({ scores, onItemClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Type" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Scorer" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Score" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Created At" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: scores.map((score) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { onClick: () => onItemClick(score.scorerName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { children: score.type }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: score.scorerName }),
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: score.score }),
-      /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(score.createdAt) })
-    ] }, score.scoreId)) })
-  ] });
+const TabsRoot = ({
+  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(
+    TabsPrimitive__namespace.Root,
+    {
+      value: currentTab,
+      onValueChange: handleTabChange,
+      className: cn("grid gap-[3rem] overflow-y-auto", className),
+      children
+    }
+  );
 };
 
-function SpanDetails({ span, onScorerTriggered }) {
-  if (!span) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) }),
-    span?.links?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
-        " Scores"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ScoreTable,
+const TabList = ({ children, variant = "default", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      className: cn(
+        "flex items-center",
         {
-          scores: span?.links,
-          onItemClick: (scorerName) => onScorerTriggered(scorerName, span.traceId, span.spanId)
-        }
-      ) })
-    ] })
-  ] });
-}
+          // variant: default
+          "text-[0.9375rem]": variant === "default",
+          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
+          // variant: buttons
+          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
+          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
+        },
+        className
+      ),
+      children
+    }
+  ) });
+};
 
-const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
-const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-const DropdownMenuTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { ref, className: cn("cursor-pointer focus-visible:rounded", className), ...props, children }));
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive__namespace.Trigger.displayName;
-const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto -rotate-90" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.SubContent,
-  {
-    ref,
-    className: cn(
-      "popover-background data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] overflow-auto overflow-x-hidden rounded-none p-1",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-const DropdownMenuContent = React__namespace.forwardRef(({ className, container, sideOffset = 4, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuPrimitive__namespace.Content,
+const Tab = ({ children, value, onClick, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
+};
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
     {
-      ref,
-      sideOffset,
-      className: clsx(
-        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-surface2 text-icon3 border-sm border-border1 z-50 min-w-[8rem] overflow-auto rounded-md p-1 shadow-md",
+      value,
+      className: cn(
+        "grid overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
         className
       ),
-      ...props
+      children
     }
-  ) });
+  );
+};
+
+const Tabs = Object.assign(TabsRoot, {
+  List: TabList,
+  Tab,
+  Content: TabContent
 });
-DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-const DropdownMenuItem = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "focus:text-accent-foreground relative flex cursor-default cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-[0.8125rem] transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:truncate",
-      inset && "pl-8",
-      className
-    ),
-    ...props
+
+function SpanDetails({ span }) {
+  if (!span) {
+    return null;
   }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default cursor-pointer select-none items-center gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Input",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+        codeStr: JSON.stringify(span.input || null, null, 2)
+      }
     ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-sm border-border1 flex h-4 w-4 items-center justify-center rounded-sm", children: checked && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.RadioItem,
-  {
-    ref,
-    className: cn(
-      "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Output",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+        codeStr: JSON.stringify(span.output || null, null, 2)
+      }
     ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Separator,
-  {
-    ref,
-    className: cn("popover-dividers-bg -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-const DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-function Dropdown({
-  open,
-  onOpenChange,
-  children,
-  modal
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, { modal, open, onOpenChange, children });
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Metadata",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+        codeStr: JSON.stringify(span.metadata || null, null, 2)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Attributes",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+        codeStr: JSON.stringify(span.attributes || null, null, 2)
+      }
+    )
+  ] });
 }
-Dropdown.Trigger = DropdownMenuTrigger;
-Dropdown.Content = DropdownMenuContent;
-Dropdown.Group = DropdownMenuGroup;
-Dropdown.Portal = DropdownMenuPortal;
-Dropdown.Item = DropdownMenuItem;
-Dropdown.CheckboxItem = DropdownMenuCheckboxItem;
-Dropdown.RadioItem = DropdownMenuRadioItem;
-Dropdown.Label = DropdownMenuLabel;
-Dropdown.Separator = DropdownMenuSeparator;
-Dropdown.Shortcut = DropdownMenuShortcut;
-Dropdown.Sub = DropdownMenuSub;
-Dropdown.SubContent = DropdownMenuSubContent;
-Dropdown.SubTrigger = DropdownMenuSubTrigger;
-Dropdown.RadioGroup = DropdownMenuRadioGroup;
-
-const useTriggerScorer = (onScorerTriggered) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useMutation({
-    mutationFn: async ({ scorerName, traceId, spanId }) => {
-      const response = await client.score({
-        scorerName,
-        targets: [{ traceId, spanId }]
-      });
-      return response;
-    },
-    onSuccess: (_, variables) => {
-      sonner.toast.success("Scorer triggered successfully");
-      onScorerTriggered(variables.scorerName, variables.traceId, variables.spanId);
-    },
-    onError: () => {
-      sonner.toast.error("Error triggering scorer");
-    }
-  });
-};
 
-const ScorersDropdown = ({ trace, spanId, onScorerTriggered, entityType }) => {
-  const { data: scorers = {}, isLoading } = useScorers();
-  const { mutate: triggerScorer, isPending } = useTriggerScorer(onScorerTriggered);
-  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
-    id: key,
-    name: scorer.scorer.config.name,
-    description: scorer.scorer.config.description,
-    isRegistered: scorer.isRegistered,
-    type: scorer.scorer.config.type
-  })).filter((scorer) => scorer.isRegistered);
-  if (entityType !== "Agent" || spanId) {
-    scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
+function SpanTabs({
+  trace,
+  span,
+  spanScoresData,
+  onSpanScoresPageChange,
+  isLoadingSpanScoresData,
+  spanInfo = [],
+  defaultActiveTab = "details",
+  initialScoreId,
+  computeTraceLink
+}) {
+  const { Link } = useLinkComponent();
+  let entityType;
+  if (span?.attributes?.agentId) {
+    entityType = "Agent";
+  } else if (span?.attributes?.workflowId) {
+    entityType = "Workflow";
   }
-  const isWaiting = isPending || isLoading;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { variant: "light", disabled: isWaiting, children: [
-      isWaiting ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}) }),
-      "Run scorer",
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: defaultActiveTab, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Tabs.List, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tab, { value: "scores", children: [
+        "Scoring ",
+        spanScoresData?.pagination && `(${spanScoresData.pagination.total || 0})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+      span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }),
+      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
+      /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(
-      Dropdown.Item,
-      {
-        onClick: () => triggerScorer({ scorerName: scorer.name, traceId: trace.traceId, spanId }),
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: scorer.name })
-      },
-      scorer.id
-    )) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "scores", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+          " Scoring"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SpanScoring, { traceId: trace?.traceId, spanId: span?.spanId, entityType })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+          " Scores"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SpanScoreList,
+          {
+            scoresData: spanScoresData,
+            onPageChange: onSpanScoresPageChange,
+            isLoadingScoresData: isLoadingSpanScoresData,
+            initialScoreId,
+            traceId: trace?.traceId,
+            spanId: span?.spanId,
+            computeTraceLink
+          }
+        )
+      ] })
+    ] }) })
   ] });
-};
+}
 
 function SpanDialog({
   trace,
   span,
+  spanScoresData,
+  onSpanScoresPageChange,
+  isLoadingSpanScoresData,
   isOpen,
   onClose,
   onNext,
   onPrevious,
   onViewToggle,
   spanInfo = [],
-  onScorerTriggered
+  defaultActiveTab = "details",
+  initialScoreId,
+  computeTraceLink
 }) {
-  const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SideDialog,
     {
@@ -16784,43 +16492,53 @@ function SpanDialog({
       dialogDescription: "View and analyze span details",
       isOpen,
       onClose,
-      hasCloseButton: true,
-      className: cn("w-[calc(100vw-25rem)] max-w-[65%]", "3xl:max-w-[50%]", "4xl:max-w-[40%]"),
+      level: 2,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+            " ",
+            getShortId(span?.traceId)
+          ] }),
+          "›",
+          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+            getShortId(span?.spanId)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "ml-auto mr-[2rem]", onClick: onViewToggle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelTopIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Switch to dialog view" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
               " ",
-              getShortId(span?.traceId)
+              span?.name
             ] }),
-            "›",
             /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-              getShortId(span?.spanId)
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+              " ",
+              span?.spanId
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelTopIcon, {}) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-                " ",
-                span?.name
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-                " ",
-                span?.spanId
-              ] })
-            ] }),
-            span?.traceId && span?.spanId && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ScorersDropdown, { trace, spanId: span?.spanId, onScorerTriggered }) })
           ] }),
-          span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span, onScorerTriggered })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SpanTabs,
+            {
+              trace,
+              span,
+              spanScoresData,
+              onSpanScoresPageChange,
+              isLoadingSpanScoresData,
+              spanInfo,
+              defaultActiveTab,
+              initialScoreId,
+              computeTraceLink
+            }
+          )
         ] })
       ]
     }
@@ -16838,15 +16556,30 @@ function TraceDialog({
   isLoadingSpans,
   computeAgentsLink,
   computeWorkflowsLink,
-  onScorerTriggered,
-  initialSpanId
+  computeTraceLink,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
 }) {
-  const { Link } = useLinkComponent();
+  const { Link, navigate } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = React.useState(Boolean(initialSpanId));
   const [selectedSpanId, setSelectedSpanId] = React.useState(initialSpanId);
   const [combinedView, setCombinedView] = React.useState(false);
+  const [spanDialogDefaultTab, setSpanDialogDefaultTab] = React.useState(initialSpanTab || "details");
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
   const traceInfo = useTraceInfo(traceDetails);
+  const [spanScoresPage, setSpanScoresPage] = React.useState(0);
+  React.useEffect(() => {
+    if (initialSpanId) {
+      setSelectedSpanId(initialSpanId);
+      setDialogIsOpen(true);
+    }
+  }, [initialSpanId]);
+  React.useEffect(() => {
+    if (spanScoresPage > 0) {
+      setSpanScoresPage(0);
+    }
+  }, [selectedSpanId]);
   const hierarchicalSpans = React.useMemo(() => {
     return formatHierarchicalSpans(traceSpans);
   }, [traceSpans]);
@@ -16864,39 +16597,38 @@ function TraceDialog({
     };
     return flattenSpans(hierarchicalSpans);
   }, [hierarchicalSpans]);
+  const { data: spanScoresData, isLoading: isLoadingSpanScoresData } = useTraceSpanScores({
+    traceId,
+    spanId: selectedSpanId || flatSpans?.[0]?.id,
+    page: spanScoresPage
+  });
   const handleSpanClick = (id) => {
     setSelectedSpanId(id);
+    setSpanDialogDefaultTab("details");
     setDialogIsOpen(true);
   };
-  const toNextSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    const nextItem = flatSpans[currentIndex + 1];
-    if (nextItem) {
-      setSelectedSpanId(nextItem.id);
+  const handleToScoring = () => {
+    setSelectedSpanId(hierarchicalSpans[0]?.id);
+    setSpanDialogDefaultTab("scores");
+    if (traceId) {
+      navigate(`${computeTraceLink(traceId, hierarchicalSpans?.[0]?.id)}&tab=scores`);
     }
   };
-  const toPreviousSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    const previousItem = flatSpans[currentIndex - 1];
-    if (previousItem) {
-      setSelectedSpanId(previousItem.id);
+  const handleToLastScore = () => {
+    setSelectedSpanId(hierarchicalSpans[0]?.id);
+    setSpanDialogDefaultTab("scores");
+    if (traceId) {
+      navigate(
+        `${computeTraceLink(
+          traceId,
+          hierarchicalSpans?.[0]?.id
+        )}&tab=scores&scoreId=${spanScoresData?.scores?.[0]?.id}`
+      );
     }
   };
-  const thereIsNextSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    return currentIndex < flatSpans.length - 1;
-  };
-  const thereIsPreviousSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    return currentIndex > 0;
-  };
   const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
-  let entityType;
-  if (traceDetails?.attributes?.agentId) {
-    entityType = "Agent";
-  } else if (traceDetails?.attributes?.workflowId) {
-    entityType = "Workflow";
-  }
+  const toNextSpan = getToNextEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
+  const toPreviousSpan = getToPreviousEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       SideDialog,
@@ -16905,111 +16637,100 @@ function TraceDialog({
         dialogDescription: "View and analyze trace details",
         isOpen,
         onClose,
-        hasCloseButton: !dialogIsOpen || combinedView,
-        className: cn("w-[calc(100vw-20rem)] max-w-[80%]", "3xl:max-w-[65%]", "4xl:max-w-[55%]"),
+        level: 1,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-            " ",
-            getShortId(traceId)
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+              " ",
+              getShortId(traceId)
+            ] }),
+            "|",
+            /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: cn("pt-[1.5rem] pl-[2.5rem] grid-rows-[auto_1fr] grid h-full overflow-y-auto", {
-                "grid-rows-[auto_1fr_1fr]": selectedSpan && combinedView
+              className: cn("overflow-y-auto", {
+                "grid grid-rows-[2fr_3fr]": Boolean(selectedSpan && combinedView)
               }),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "pr-[2.5rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-                    " ",
-                    traceDetails?.name
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-                    " ",
-                    traceId
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
-                  traceDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ScorersDropdown,
-                    {
-                      trace: traceDetails,
-                      spanId: selectedSpanId,
-                      onScorerTriggered,
-                      entityType
-                    }
-                  ) }),
-                  traceDetails?.metadata?.usage && /* @__PURE__ */ jsxRuntime.jsx(
-                    TraceSpanUsage,
-                    {
-                      traceUsage: traceDetails?.metadata?.usage,
-                      traceSpans,
-                      className: "mt-[2rem] pr-[1.5rem]"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: traceInfo, LinkComponent: Link, className: "mt-[2rem]" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TraceTimeline,
-                    {
-                      hierarchicalSpans,
-                      spans: traceSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      isLoading: isLoadingSpans,
-                      className: "pr-[2.5rem] pt-[2.5rem]"
-                    }
-                  ),
-                  traceDetails?.links?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
-                      " Scores"
+                /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                      " ",
+                      traceDetails?.name
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ScoreTable,
-                      {
-                        scores: traceDetails?.links,
-                        onItemClick: (scorerName) => onScorerTriggered(scorerName, traceDetails.traceId, selectedSpanId)
-                      }
-                    ) })
-                  ] })
-                ] }),
-                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-[.5rem] pt-[1rem] border-b border-border1 pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      SideDialogTop,
-                      {
-                        onNext: thereIsNextSpan() ? toNextSpan : void 0,
-                        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
-                        showInnerNav: true,
-                        className: "pl-0",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-                            " ",
-                            getShortId(traceId)
+                    /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+                      " ",
+                      traceId
+                    ] })
+                  ] }),
+                  traceDetails && /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid xl:grid-cols-[3fr_2fr] gap-[1rem] items-start", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: traceInfo, LinkComponent: Link }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 p-[1.5rem] rounded-lg grid gap-[1rem]", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[1rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
+                          " Evaluate trace"
+                        ] }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "w-full", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleToScoring, children: [
+                            "Scoring ",
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+                            " "
                           ] }),
-                          "›",
-                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-                            " ",
-                            getShortId(selectedSpanId)
+                          spanScoresData?.scores?.[0] && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleToLastScore, children: [
+                            "Last score: ",
+                            /* @__PURE__ */ jsxRuntime.jsx("b", { children: spanScoresData?.scores?.[0]?.score })
                           ] })
                         ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[1rem]", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: () => setCombinedView(false), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}) }) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Section.Header, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
+                          " Timeline"
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans: traceSpans })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TraceTimeline,
+                        {
+                          hierarchicalSpans,
+                          onSpanClick: handleSpanClick,
+                          selectedSpanId,
+                          isLoading: isLoadingSpans
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] relative overflow-y-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { withTopSeparator: true, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+                      " ",
+                      getShortId(selectedSpanId)
+                    ] }),
+                    "|",
+                    /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext: toNextSpan, onPrevious: toPreviousSpan }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "ml-auto mr-[2rem]", onClick: () => setCombinedView(false), children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}),
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Switch to dialog view" })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-full overflow-y-auto grid gap-[2rem] grid-cols-[20rem_1fr]"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[2rem] gap-[2rem]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { as: "h2", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
                         " ",
                         selectedSpan?.name
-                      ] }) }),
+                      ] }),
                       selectedSpan?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(
                         TraceSpanUsage,
                         {
@@ -17019,7 +16740,20 @@ function TraceDialog({
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span: selectedSpan, onScorerTriggered }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2rem] pt-[2rem] h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      SpanTabs,
+                      {
+                        trace: traceDetails,
+                        span: selectedSpan,
+                        spanScoresData,
+                        onSpanScoresPageChange: setSpanScoresPage,
+                        isLoadingSpanScoresData,
+                        spanInfo: selectedSpanInfo,
+                        defaultActiveTab: spanDialogDefaultTab,
+                        initialScoreId,
+                        computeTraceLink
+                      }
+                    ) })
                   ] })
                 ] })
               ]
@@ -17033,16 +16767,22 @@ function TraceDialog({
       {
         trace: traceDetails,
         span: selectedSpan,
+        spanScoresData,
+        onSpanScoresPageChange: setSpanScoresPage,
+        isLoadingSpanScoresData,
         isOpen: Boolean(dialogIsOpen && selectedSpanId && !combinedView),
         onClose: () => {
+          navigate(computeTraceLink(traceId || ""));
           setDialogIsOpen(false);
           setSelectedSpanId(void 0);
         },
-        onNext: thereIsNextSpan() ? toNextSpan : void 0,
-        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
+        onNext: toNextSpan,
+        onPrevious: toPreviousSpan,
         onViewToggle: () => setCombinedView(!combinedView),
         spanInfo: selectedSpanInfo,
-        onScorerTriggered
+        defaultActiveTab: spanDialogDefaultTab,
+        initialScoreId,
+        computeTraceLink
       }
     )
   ] });
@@ -17111,61 +16851,262 @@ function TracesTools({
   ] });
 }
 
-function MainContentLayout({
-  children,
-  className,
-  style
+const tracesListColumns = [
+  { name: "shortId", label: "ID", size: "6rem" },
+  { name: "date", label: "Date", size: "4.5rem" },
+  { name: "time", label: "Time", size: "6.5rem" },
+  { name: "name", label: "Name", size: "1fr" },
+  { name: "entityId", label: "Entity", size: "10rem" },
+  { name: "status", label: "Status", size: "3rem" }
+];
+function TracesList({
+  traces,
+  selectedTraceId,
+  onTraceClick,
+  errorMsg,
+  setEndOfListElement,
+  filtersApplied,
+  isFetchingNextPage,
+  hasNextPage
 }) {
-  const devStyleRequested = devUIStyleRequested("MainContentLayout");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "main",
-    {
-      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
-      children
-    }
-  );
+  if (!traces) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: tracesListColumns }),
+      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: traces.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: traces.map((trace) => {
+        const createdAtDate = new Date(trace.createdAt);
+        const isTodayDate = dateFns.isToday(createdAtDate);
+        const entry = {
+          id: trace.traceId,
+          shortId: getShortId(trace?.traceId) || "n/a",
+          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+          name: trace?.name,
+          entityId: trace?.attributes?.agentId || trace?.attributes?.workflowId,
+          status: trace?.attributes?.status
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedTraceId === trace.traceId,
+            columns: tracesListColumns,
+            onClick: onTraceClick,
+            children: tracesListColumns.map((col, index) => {
+              const key = `${index}-${trace.traceId}`;
+              return col.name === "status" ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryStatus, { status: entry?.[col.name] }, key) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+        EntryList.Message,
+        {
+          message: filtersApplied ? "No traces found for applied filters" : "No traces found yet"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EntryList.NextPageLoading,
+      {
+        setEndOfListElement,
+        loadingText: "Loading more traces...",
+        noMoreDataText: "All traces loaded",
+        isLoading: isFetchingNextPage,
+        hasMore: hasNextPage
+      }
+    )
+  ] });
 }
-function MainContentContent({
-  children,
-  className,
-  isCentered = false,
-  isDivided = false,
-  hasLeftServiceColumn = false,
-  style
+
+const traceScoresListColumns = [
+  { name: "shortId", label: "ID", size: "1fr" },
+  { name: "date", label: "Date", size: "1fr" },
+  { name: "time", label: "Time", size: "1fr" },
+  { name: "score", label: "Score", size: "1fr" },
+  { name: "scorer", label: "Scorer", size: "1fr" }
+];
+function SpanScoreList({
+  scoresData,
+  isLoadingScoresData,
+  traceId,
+  spanId,
+  initialScoreId,
+  onPageChange,
+  computeTraceLink
 }) {
-  const devStyleRequested = devUIStyleRequested("MainContentContent");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        `grid overflow-y-auto h-full `,
-        `overflow-x-auto min-w-[min-content]`,
+  const { navigate } = useLinkComponent();
+  const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
+  const [selectedScore, setSelectedScore] = React.useState();
+  React.useEffect(() => {
+    if (initialScoreId) {
+      handleOnScore(initialScoreId);
+    }
+  }, [initialScoreId]);
+  const handleOnScore = (scoreId) => {
+    const score = scoresData?.scores?.find((s) => s?.id === scoreId);
+    setSelectedScore(score);
+    setDialogIsOpen(true);
+  };
+  if (isLoadingScoresData) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EntryListSkeleton, { columns: traceScoresListColumns });
+  }
+  const updateSelectedScore = (scoreId) => {
+    const score = scoresData?.scores?.find((s) => s?.id === scoreId);
+    setSelectedScore(score);
+  };
+  const toNextScore = getToNextEntryFn({
+    entries: scoresData?.scores || [],
+    id: selectedScore?.id,
+    update: updateSelectedScore
+  });
+  const toPreviousScore = getToPreviousEntryFn({
+    entries: scoresData?.scores || [],
+    id: selectedScore?.id,
+    update: updateSelectedScore
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: traceScoresListColumns }),
+        scoresData?.scores && scoresData.scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scoresData?.scores?.map((score) => {
+          const createdAtDate = new Date(score.createdAt);
+          const isTodayDate = dateFns.isToday(createdAtDate);
+          const entry = {
+            id: score?.id,
+            shortId: getShortId(score?.id) || "n/a",
+            date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+            time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+            score: score?.score,
+            scorer: score?.scorer?.name
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            EntryList.Entry,
+            {
+              columns: traceScoresListColumns,
+              onClick: () => handleOnScore(score.id),
+              entry,
+              children: traceScoresListColumns.map((col) => {
+                const key = `col-${col.name}`;
+                return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+              })
+            },
+            score.id
+          );
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores found", type: "info" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EntryList.Pagination,
         {
-          "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
-          "grid place-items-center": isCentered,
-          "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
-          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
-          "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+          currentPage: scoresData?.pagination?.page || 0,
+          hasMore: scoresData?.pagination?.hasMore,
+          onNextPage: () => onPageChange && onPageChange((scoresData?.pagination?.page || 0) + 1),
+          onPrevPage: () => onPageChange && onPageChange((scoresData?.pagination?.page || 0) - 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScoreDialog,
+      {
+        scorerName: selectedScore?.scorer?.name || "",
+        score: selectedScore,
+        isOpen: dialogIsOpen,
+        onClose: () => {
+          if (traceId) {
+            navigate(`${computeTraceLink(traceId, spanId)}&tab=scores`);
+          }
+          setDialogIsOpen(false);
         },
-        className
-      ),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
-      children
-    }
-  );
+        dialogLevel: 3,
+        onNext: toNextScore,
+        onPrevious: toPreviousScore,
+        computeTraceLink: (traceId2, spanId2) => `/observability?traceId=${traceId2}${spanId2 ? `&spanId=${spanId2}` : ""}`,
+        usageContext: "aiSpanDialog"
+      }
+    )
+  ] });
 }
-function devUIStyleRequested(name) {
-  try {
-    const raw = localStorage.getItem("add-dev-style-to-components");
-    if (!raw) return false;
-    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
-    return components.includes(name);
-  } catch (error) {
-    console.error("Error reading or parsing localStorage:", error);
-    return false;
+
+const useTriggerScorer = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({ scorerName, traceId, spanId }) => {
+      const response = await client.score({
+        scorerName,
+        targets: [{ traceId, spanId }]
+      });
+      return response;
+    }
+  });
+};
+
+const SpanScoring = ({ traceId, spanId, entityType }) => {
+  const { data: scorers = {}, isLoading } = useScorers();
+  const [selectedScorer, setSelectedScorer] = React.useState(null);
+  const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
+  const [notificationIsVisible, setNotificationIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (isSuccess) {
+      setNotificationIsVisible(true);
+    }
+  }, [isSuccess]);
+  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
+    id: key,
+    name: scorer.scorer.config.name,
+    description: scorer.scorer.config.description,
+    isRegistered: scorer.isRegistered,
+    type: scorer.scorer.config.type
+  })).filter((scorer) => scorer.isRegistered);
+  if (entityType !== "Agent" || spanId) {
+    scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
   }
-}
+  const isWaiting = isPending || isLoading;
+  const handleStartScoring = () => {
+    if (selectedScorer) {
+      setNotificationIsVisible(false);
+      triggerScorer({
+        scorerName: selectedScorer,
+        traceId: traceId || "",
+        spanId
+      });
+    }
+  };
+  const handleScorerChange = (val) => {
+    setSelectedScorer(val);
+    setNotificationIsVisible(false);
+  };
+  const selectedScorerDescription = scorerList.find((s) => s.name === selectedScorer)?.description || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3fr_1fr] gap-[1rem] items-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[0.5rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectField,
+          {
+            name: "select-scorer",
+            placeholder: "Select a scorer...",
+            options: scorerList.map((scorer) => ({ label: scorer.name, value: scorer.name })),
+            onValueChange: handleScorerChange,
+            value: selectedScorer || "",
+            className: "min-w-[20rem]",
+            disabled: isWaiting
+          }
+        ),
+        selectedScorerDescription && /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { className: "text-icon3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+          " ",
+          selectedScorerDescription
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: !selectedScorer || isWaiting, onClick: handleStartScoring, children: isPending ? "Starting..." : "Start Scoring" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Notification, { isVisible: notificationIsVisible, className: "mt-[1rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+      " Scorer triggered! When finished successfully, it will appear in the list below. It could take a moment."
+    ] })
+  ] });
+};
 
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-sm flex items-center", children }) });
@@ -17772,7 +17713,7 @@ function MCPTable({ mcpServers, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyMCPTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search MCP servers", placeholder: "Search MCP servers" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MCPTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -17880,15 +17821,16 @@ exports.AgentSettingsContext = AgentSettingsContext;
 exports.AgentSettingsProvider = AgentSettingsProvider;
 exports.AgentsTable = AgentsTable;
 exports.AiIcon = AiIcon;
-exports.Alert = Alert;
-exports.AlertDescription = AlertDescription;
+exports.Alert = Alert$1;
+exports.AlertDescription = AlertDescription$1;
 exports.AlertDialog = AlertDialog;
-exports.AlertTitle = AlertTitle;
+exports.AlertTitle = AlertTitle$1;
 exports.ApiIcon = ApiIcon;
 exports.Badge = Badge$1;
 exports.BranchIcon = BranchIcon;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
+exports.ButtonsGroup = ButtonsGroup;
 exports.Cell = Cell;
 exports.ChatThreads = ChatThreads;
 exports.CheckIcon = CheckIcon;
@@ -17921,11 +17863,7 @@ exports.EntityName = EntityName;
 exports.Entry = Entry;
 exports.EntryCell = EntryCell;
 exports.EntryList = EntryList;
-exports.EntryListItem = EntryListItem;
-exports.EntryListPageHeader = EntryListPageHeader;
-exports.EntryListStatusCell = EntryListStatusCell;
-exports.EntryListTextCell = EntryListTextCell;
-exports.EntryListToolbar = EntryListToolbar;
+exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
 exports.EvaluatorCoinIcon = EvaluatorCoinIcon;
 exports.FiltersIcon = FiltersIcon;
@@ -17951,12 +17889,15 @@ exports.LogsIcon = LogsIcon;
 exports.MCPTable = MCPTable;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
+exports.MainSidebar = MainSidebar;
+exports.MainSidebarProvider = MainSidebarProvider;
 exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
 exports.MemorySearch = MemorySearch;
 exports.ModelResetProvider = ModelResetProvider;
+exports.Notification = Notification;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PageHeader = PageHeader;
 exports.PlaygroundQueryClient = PlaygroundQueryClient;
@@ -17972,27 +17913,24 @@ exports.RuntimeContextWrapper = RuntimeContextWrapper;
 exports.ScoreDialog = ScoreDialog;
 exports.ScoreIcon = ScoreIcon;
 exports.ScorersTable = ScorersTable;
+exports.ScoresList = ScoresList;
 exports.ScoresTools = ScoresTools;
 exports.SearchField = SearchField;
 exports.Searchbar = Searchbar;
 exports.SearchbarWrapper = SearchbarWrapper;
+exports.Section = Section;
+exports.Sections = Sections;
 exports.SelectField = SelectField;
 exports.SettingsIcon = SettingsIcon;
 exports.SideDialog = SideDialog;
-exports.SideDialogCodeSection = SideDialogCodeSection;
-exports.SideDialogContent = SideDialogContent;
-exports.SideDialogFooter = SideDialogFooter;
-exports.SideDialogFooterGroup = SideDialogFooterGroup;
-exports.SideDialogHeader = SideDialogHeader;
-exports.SideDialogHeading = SideDialogHeading;
-exports.SideDialogKeyValueList = SideDialogKeyValueList;
-exports.SideDialogSection = SideDialogSection;
-exports.SideDialogTop = SideDialogTop;
 exports.SlashIcon = SlashIcon;
 exports.SliderField = SliderField;
-exports.Tab = Tab;
-exports.TabContent = TabContent;
-exports.TabList = TabList;
+exports.SpanScoreList = SpanScoreList;
+exports.SpanScoring = SpanScoring;
+exports.SpanTabs = SpanTabs;
+exports.Tab = Tab$1;
+exports.TabContent = TabContent$1;
+exports.TabList = TabList$1;
 exports.Table = Table$1;
 exports.Tbody = Tbody;
 exports.TemplateFailure = TemplateFailure;
@@ -18016,11 +17954,16 @@ exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolFallback = ToolFallback;
 exports.ToolTable = ToolTable;
 exports.ToolsIcon = ToolsIcon;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
 exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
 exports.TraceTimeline = TraceTimeline;
 exports.TraceTimelineLegend = TraceTimelineLegend;
 exports.TraceTimelineSpan = TraceTimelineSpan;
+exports.TracesList = TracesList;
 exports.TracesTools = TracesTools;
 exports.TracesView = TracesView;
 exports.TracesViewSkeleton = TracesViewSkeleton;
@@ -18043,6 +17986,7 @@ exports.WorkingMemoryProvider = WorkingMemoryProvider;
 exports.allowedAiSpanAttributes = allowedAiSpanAttributes;
 exports.cleanString = cleanString;
 exports.convertWorkflowRunStateToStreamResult = convertWorkflowRunStateToStreamResult;
+exports.extractPrompt = extractPrompt;
 exports.formatDuration = formatDuration;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatOtelTimestamp = formatOtelTimestamp;
@@ -18050,15 +17994,21 @@ exports.formatOtelTimestamp2 = formatOtelTimestamp2;
 exports.getColumnTemplate = getColumnTemplate;
 exports.getShortId = getShortId;
 exports.getSpanTypeUi = getSpanTypeUi;
+exports.getToNextEntryFn = getToNextEntryFn;
+exports.getToPreviousEntryFn = getToPreviousEntryFn;
 exports.parseError = parseError;
 exports.providerMapToIcon = providerMapToIcon;
+exports.scoresListColumns = scoresListColumns;
 exports.spanTypePrefixes = spanTypePrefixes;
+exports.traceScoresListColumns = traceScoresListColumns;
+exports.tracesListColumns = tracesListColumns;
 exports.transformKey = transformKey;
 exports.useAgentSettings = useAgentSettings;
 exports.useCurrentRun = useCurrentRun;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
 exports.useMCPServerTools = useMCPServerTools;
+exports.useMainSidebar = useMainSidebar;
 exports.useModelReset = useModelReset;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
@@ -18068,6 +18018,7 @@ exports.useScoresByEntityId = useScoresByEntityId;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useThreadInput = useThreadInput;
+exports.useTraceSpanScores = useTraceSpanScores;
 exports.useWorkflow = useWorkflow;
 exports.useWorkflowRuns = useWorkflowRuns;
 exports.useWorkingMemory = useWorkingMemory;