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

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMessagePart, useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, useComposer, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, TriangleAlert, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, XIcon, ChevronsRightIcon, ArrowUpIcon, ArrowDownIcon, AlignLeftIcon, AlignJustifyIcon, CircleAlertIcon, GaugeIcon, HashIcon, Info, RotateCcw, GripVertical, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ListTreeIcon, ArrowRightToLineIcon, CoinsIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, PanelTopIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
+import { CheckIcon as CheckIcon$1, CopyIcon, AlertCircle, TriangleAlert, Check, Copy, ChevronUpIcon, X, Share2, Braces, Loader2, Network, ChevronDown, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleCheck, CircleX, Minus, Plus, Maximize, Workflow, AlertCircleIcon, ChevronDownIcon, CirclePause, CalendarIcon, Brackets, PlusIcon, TrashIcon, Circle, StopCircle, SearchIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, FileText, CircleXIcon, Link, CloudUpload, Mic, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, TriangleAlertIcon, ChevronRightIcon, ArrowLeftIcon, ArrowRightIcon, ChevronsRightIcon, AlignLeftIcon, AlignJustifyIcon, ArrowUpIcon, ArrowDownIcon, CircleAlertIcon, XIcon, PanelRightIcon, GaugeIcon, EyeIcon, ChevronsLeftRightEllipsisIcon, CalculatorIcon, HashIcon, FileInputIcon, FileOutputIcon, ReceiptText, Info, RotateCcw, GripVertical, AlertTriangleIcon, NetworkIcon, WorkflowIcon as WorkflowIcon$1, PackageIcon, GitBranchIcon, PackageOpenIcon, OctagonXIcon, FrownIcon, ChevronUp, ChevronsLeftRight, TimerIcon, ChevronsLeftRightIcon, ChevronFirstIcon, ChevronLastIcon, ArrowRightToLineIcon, CoinsIcon, BracesIcon, CircleGaugeIcon, PanelTopIcon, ListTreeIcon, PanelLeftIcon, CircleSlash, Clock as Clock$1 } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, createContext, useContext, Fragment as Fragment$1, useId } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -64,7 +64,6 @@ import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { format as format$1 } from 'date-fns/format';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 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}
 
@@ -4392,10 +4391,11 @@ const BadgeWrapper = ({
   icon,
   title,
   collapsible = true,
-  extraInfo
+  extraInfo,
+  "data-testid": dataTestId
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mb-4", "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -4525,6 +4525,7 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   return /* @__PURE__ */ jsx(
     BadgeWrapper,
     {
+      "data-testid": "tool-badge",
       icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }),
       title: toolName,
       extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsx(
@@ -6902,7 +6903,8 @@ function DynamicForm({
     },
     defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
     formProps: {
-      className
+      className,
+      noValidate: true
     },
     uiComponents: {
       SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
@@ -7695,7 +7697,7 @@ function WorkflowTable({ workflows, isLoading }) {
     return /* @__PURE__ */ jsx(EmptyWorkflowsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search workflows", placeholder: "Search workflows" }) }),
     isLoading ? /* @__PURE__ */ jsx(WorkflowTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -7749,6 +7751,7 @@ const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) =
   return /* @__PURE__ */ jsxs(
     BadgeWrapper,
     {
+      "data-testid": "workflow-badge",
       icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }),
       title: workflow.name,
       initialCollapsed: false,
@@ -7814,6 +7817,7 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
   return /* @__PURE__ */ jsx(
     BadgeWrapper,
     {
+      "data-testid": "agent-badge",
       icon: /* @__PURE__ */ jsx(AgentIcon, { className: "text-accent1" }),
       title: agentId,
       initialCollapsed: false,
@@ -9547,13 +9551,11 @@ function MastraRuntimeProvider({
     () => memory ? initializeMessageState(initialLegacyMessages || []) : []
   );
   const {
-    setMessages,
     messages,
-    generate,
-    stream,
-    network,
+    sendMessage,
     cancelRun,
-    isRunning: isRunningStream
+    isRunning: isRunningStream,
+    setMessages
   } = useChat({
     agentId,
     initializeMessages: () => initialMessages || []
@@ -9598,9 +9600,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", parts: [{ type: "text", text: input }] }]);
-    } else {
+    if (!isVNext) {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
     const controller = new AbortController();
@@ -9613,14 +9613,10 @@ function MastraRuntimeProvider({
     try {
       if (isVNext) {
         if (chatWithNetwork) {
-          await network({
-            coreUserMessages: [
-              {
-                role: "user",
-                content: input
-              },
-              ...attachments
-            ],
+          await sendMessage({
+            message: input,
+            mode: "network",
+            coreUserMessages: attachments,
             runtimeContext: runtimeContextInstance,
             threadId,
             modelSettings: modelSettingsArgs,
@@ -9633,14 +9629,10 @@ function MastraRuntimeProvider({
           });
         } else {
           if (chatWithGenerate) {
-            await generate({
-              coreUserMessages: [
-                {
-                  role: "user",
-                  content: input
-                },
-                ...attachments
-              ],
+            await sendMessage({
+              message: input,
+              mode: "generate",
+              coreUserMessages: attachments,
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
@@ -9648,14 +9640,10 @@ function MastraRuntimeProvider({
             });
             return;
           } else {
-            await stream({
-              coreUserMessages: [
-                {
-                  role: "user",
-                  content: input
-                },
-                ...attachments
-              ],
+            await sendMessage({
+              message: input,
+              mode: "stream",
+              coreUserMessages: attachments,
               runtimeContext: runtimeContextInstance,
               threadId,
               modelSettings: modelSettingsArgs,
@@ -10193,7 +10181,7 @@ const TableCaption = React.forwardRef(
 );
 TableCaption.displayName = "TableCaption";
 
-const Tabs = TabsPrimitive.Root;
+const Tabs$1 = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
@@ -10236,12 +10224,12 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+  return /* @__PURE__ */ jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
 };
-const TabList = ({ children, className }) => {
+const TabList$1 = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ 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__ */ jsx(
     TabsTrigger,
     {
@@ -10252,7 +10240,7 @@ const Tab = ({ children, value, onClick }) => {
     }
   );
 };
-const TabContent = ({ children, value }) => {
+const TabContent$1 = ({ children, value }) => {
   return /* @__PURE__ */ jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
 };
 
@@ -10277,12 +10265,12 @@ function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }
     return onRefetchCiEvals();
   }
   return /* @__PURE__ */ jsxs(PlaygroundTabs, { defaultTab: "live", children: [
-    /* @__PURE__ */ jsxs(TabList, { children: [
-      /* @__PURE__ */ jsx(Tab, { value: "live", children: "Live" }),
-      /* @__PURE__ */ jsx(Tab, { value: "ci", children: "CI" })
+    /* @__PURE__ */ jsxs(TabList$1, { children: [
+      /* @__PURE__ */ jsx(Tab$1, { value: "live", children: "Live" }),
+      /* @__PURE__ */ jsx(Tab$1, { value: "ci", children: "CI" })
     ] }),
-    /* @__PURE__ */ jsx(TabContent, { value: "live", children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
-    /* @__PURE__ */ jsx(TabContent, { value: "ci", children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
+    /* @__PURE__ */ jsx(TabContent$1, { value: "live", children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+    /* @__PURE__ */ jsx(TabContent$1, { value: "ci", children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
   ] });
 }
 function EvalTable({ evals, isCIMode = false, onRefresh }) {
@@ -10954,7 +10942,7 @@ function AgentsTable({ agents, isLoading }) {
     return /* @__PURE__ */ jsx(EmptyAgentsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search agents", placeholder: "Search agents" }) }),
     isLoading ? /* @__PURE__ */ jsx(AgentsTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -11579,7 +11567,7 @@ function RelationWrapper({ description, children }) {
 }
 
 function EntryListRoot({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "grid mb-[3rem]", children });
+  return /* @__PURE__ */ jsx("div", { className: "grid", children });
 }
 
 function getColumnTemplate(columns) {
@@ -11796,30 +11784,29 @@ function getToPreviousEntryFn({ entries, id, update }) {
   return void 0;
 }
 
-function SideDialog({
+function SideDialogRoot({
   dialogTitle,
   dialogDescription,
   isOpen,
   onClose,
   children,
   variant = "default",
-  hasCloseButton = true,
+  level = 1,
   className
 }) {
   const isConfirmation = variant === "confirmation";
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-    !isConfirmation && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-[0.25]") }),
+    !isConfirmation && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-40") }),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.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
@@ -11829,15 +11816,15 @@ function SideDialog({
             /* @__PURE__ */ jsx(DialogPrimitive.Title, { children: dialogTitle }),
             /* @__PURE__ */ jsx(DialogPrimitive.Description, { children: dialogDescription })
           ] }),
-          !isConfirmation && hasCloseButton && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+          !isConfirmation && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(ChevronsRightIcon, {})
+              children: /* @__PURE__ */ jsx(ChevronsRightIcon, {})
             }
           ) }),
           /* @__PURE__ */ jsx(
@@ -11855,125 +11842,97 @@ function SideDialog({
   ] }) });
 }
 
-function SideDialogHeader({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  return /* @__PURE__ */ 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__ */ jsxs(
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: cn("flex gap-[1rem]"), children: [
-          /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            /* @__PURE__ */ jsx(XIcon, {}),
-            "Close"
-          ] }) }),
-          /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            "Next",
-            /* @__PURE__ */ jsx(ArrowUpIcon, {})
-          ] }),
-          /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-            /* @__PURE__ */ jsx(ArrowDownIcon, {}),
-            "Previous"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { children })
-      ]
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
     }
   );
 }
-function SideDialogFooterGroup({ children }) {
-  return /* @__PURE__ */ 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 ButtonsGroup({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
 }
 
-function SideDialogContent({ children, className, isCentered, isFullHeight, variant }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("p-[3rem] py-[2rem] overflow-y-scroll", className), children: /* @__PURE__ */ 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 Sections({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-[3rem]", className), children });
+}
+
+function SectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsx("section", { className: cn(`grid gap-[1rem]`, className), children });
+}
+
+function SectionHeader({ children, className }) {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("dt", { className: "text-icon3", children: [
-      item.key,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsx("dd", { className: "text-icon4", children: item.value })
-  ] })) });
-}
 
-function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }) {
-  const handleOnNext = () => {
-    onNext?.();
-  };
-  const handleOnPrevious = () => {
-    onPrevious?.();
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(`flex justify-between h-[3.5rem] items-center  text-icon5 text-[.875rem] pl-[1.5rem]`, className),
-      children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-icon3", children: "|" }),
-          /* @__PURE__ */ 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__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-                  "Previous",
-                  /* @__PURE__ */ jsx(ArrowUpIcon, {})
-                ] }),
-                /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-                  "Next",
-                  /* @__PURE__ */ jsx(ArrowDownIcon, {})
-                ] })
-              ]
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
+const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+  Heading: SectionHeading
+});
 
 const useCodemirrorTheme = () => {
   return useMemo(
@@ -11991,7 +11950,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
+function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
   const theme = useCodemirrorTheme();
   const [showAsMultilineText, setShowAsMultilineText] = useState(false);
   const hasMultilineText = useMemo(() => {
@@ -12003,22 +11962,19 @@ function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
     }
   }, [codeStr]);
   const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
-  return /* @__PURE__ */ jsx("section", { className: "border border-border1 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "border-b border-border1 last:border-b-0 grid", children: [
-    /* @__PURE__ */ jsxs("div", { className: "p-[1rem] px-[1.5rem] border-b border-border1 grid grid-cols-[1fr_auto]", children: [
-      /* @__PURE__ */ jsx("h3", { children: title }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end", children: [
+  return /* @__PURE__ */ jsxs(Section, { children: [
+    /* @__PURE__ */ jsxs(Section.Header, { children: [
+      /* @__PURE__ */ jsxs(Section.Heading, { children: [
+        icon,
+        title
+      ] }),
+      /* @__PURE__ */ jsxs(ButtonsGroup, { children: [
         /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content" }),
         hasMultilineText && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("bg-surface3 p-[1rem] overflow-auto text-icon4 text-[0.875rem] [&>div]:border-none break-all"),
-        children: codeStr && /* @__PURE__ */ jsx(Fragment, { children: simplified ? /* @__PURE__ */ jsx("div", { className: "text-icon4 text-[0.875rem] py-[1rem] font-mono break-all mx-[1.5rem]", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView.lineWrapping], theme, value: finalCodeStr }) })
-      }
-    )
-  ] }) });
+    codeStr && /* @__PURE__ */ 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__ */ jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsx(CodeMirror, { extensions: [json(), EditorView.lineWrapping], theme, value: finalCodeStr }) })
+  ] });
 }
 function containsInnerNewline(obj) {
   if (typeof obj === "string") {
@@ -12051,6 +12007,69 @@ function SideDialogHeading({ children, className, as = "h1" }) {
   );
 }
 
+function SideDialogContent({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("p-[1.5rem] pl-[2.25rem] overflow-y-scroll grid gap-[1.5rem] content-start", className), children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-[1.5rem] mb-[2rem] "), children }) });
+}
+
+function SideDialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+}
+
+function SideDialogTop({ children, withTopSeparator, className }) {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: cn("flex gap-[1rem] items-baseline"), children: [
+        /* @__PURE__ */ jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+          "Previous",
+          /* @__PURE__ */ jsx(ArrowUpIcon, {})
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+          "Next",
+          /* @__PURE__ */ jsx(ArrowDownIcon, {})
+        ] })
+      ] })
+    }
+  );
+}
+
+const SideDialog = Object.assign(SideDialogRoot, {
+  Top: SideDialogTop,
+  Header: SideDialogHeader,
+  Heading: SideDialogHeading,
+  Content: SideDialogContent,
+  CodeSection: SideDialogCodeSection,
+  Nav: SideDialogNav
+});
+
 function EntityMainHeader({
   title,
   description,
@@ -12465,7 +12484,7 @@ function TextAndIcon({ children, className }) {
     {
       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",
+        "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50 [&_svg]:flex-shrink-0",
         className
       ),
       children
@@ -12478,85 +12497,304 @@ function getShortId(id) {
   return id.slice(0, 8);
 }
 
-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);
+function Notification({ children, className, isVisible, autoDismiss = true, dismissTime = 5e3 }) {
+  const [localIsVisible, setLocalIsVisible] = useState(isVisible);
+  useEffect(() => {
+    if (autoDismiss && isVisible) {
+      const timer = setTimeout(() => {
+        setLocalIsVisible(false);
+      }, dismissTime);
+      return () => clearTimeout(timer);
     }
-  };
-  const handlePrevPage = () => {
-    if (pagination?.page && pagination.page > 0) {
-      onPageChange?.(pagination.page - 1);
+  }, [autoDismiss, isVisible, dismissTime]);
+  useEffect(() => {
+    setLocalIsVisible(isVisible);
+  }, [isVisible]);
+  if (!localIsVisible) return null;
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "flex gap-[0.5rem] items-center", children }),
+        /* @__PURE__ */ jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+          /* @__PURE__ */ jsx(XIcon, {}),
+          /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Dismiss" })
+        ] })
+      ]
     }
-  };
-  return /* @__PURE__ */ jsxs(EntryList, { children: [
-    /* @__PURE__ */ jsxs(EntryList.Trim, { children: [
-      /* @__PURE__ */ jsx(EntryList.Header, { columns: scoresListColumns }),
-      errorMsg ? /* @__PURE__ */ jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsx(Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsx(EntryList.Entries, { children: scores.map((score) => {
-        const createdAtDate = new Date(score.createdAt);
-        const isTodayDate = isToday(createdAtDate);
-        const entry = {
-          id: score.id,
-          date: isTodayDate ? "Today" : format(createdAtDate, "MMM dd"),
-          time: format(createdAtDate, "h:mm:ss aaa"),
-          input: JSON.stringify(score?.input),
-          entityId: score.entityId,
-          score: score.score
-        };
-        return /* @__PURE__ */ jsx(
-          EntryList.Entry,
-          {
-            entry,
-            isSelected: selectedScoreId === score.id,
-            columns: scoresListColumns,
-            onClick: onScoreClick,
-            children: scoresListColumns.map((col, index) => {
-              const key = `${index}-${score.id}`;
-              return /* @__PURE__ */ jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
-            })
-          },
-          entry.id
-        );
-      }) }) : /* @__PURE__ */ jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      EntryList.Pagination,
-      {
-        currentPage: pagination?.page || 0,
-        onNextPage: handleNextPage,
-        onPrevPage: handlePrevPage,
-        hasMore: scoresHasMore
-      }
-    )
-  ] });
+  );
 }
 
-function ScoreDialog({
-  scorer,
-  score,
-  isOpen,
+function MainSidebarNavSeparator({ className }) {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(MainSidebarNavSeparator, {}),
+        /* @__PURE__ */ 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__ */ jsx(
+              PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            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"
+          }
+        )
+      ]
+    }
+  );
+}
+
+function MainSidebarBottom({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto", className), children });
+}
+
+function MainSidebarNav({ children, className }) {
+  return /* @__PURE__ */ jsx("nav", { className: cn("", className), children });
+}
+
+function MainSidebarNavSection({ children, className }) {
+  return /* @__PURE__ */ 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__ */ jsx(
+    "li",
+    {
+      className: cn(
+        "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: link ? /* @__PURE__ */ jsxs(Link, { href: link.url, ...linkParams, children: [
+        isDefaultState ? /* @__PURE__ */ jsx(Fragment, { children: link.icon && link.icon }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: link.icon && link.icon }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.name })
+        ] }),
+        isDefaultState ? link.name : /* @__PURE__ */ jsx(VisuallyHidden$1, { children: link.name }),
+        " ",
+        children
+      ] }) : children
+    }
+  );
+}
+
+function MainSidebarNavHeader({ children, className, state = "default" }) {
+  const isDefaultState = state === "default";
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-[auto_1fr] items-center min-h-[2.8rem] ", className), children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: cn("text-[0.6875rem] uppercase text-icon3/75 tracking-widest", {
+          "pl-[0.75rem]": isDefaultState
+        }),
+        children: isDefaultState ? children : /* @__PURE__ */ jsx(VisuallyHidden$1, { children })
+      }
+    ),
+    /* @__PURE__ */ jsx(MainSidebarNavSeparator, {})
+  ] });
+}
+
+function MainSidebarNavList({ children, className }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid gap-[0.25rem] items-start content-center ", className), children });
+}
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const MainSidebarContext = React__default.createContext(null);
+function useMainSidebar() {
+  const context = React__default.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__default.useState(stateInitializer);
+  const toggleSidebar = React__default.useCallback(() => {
+    setLocalStorage(state === "default" ? "collapsed" : "default");
+    setState(state === "default" ? "collapsed" : "default");
+  }, [state]);
+  const contextValue = React__default.useMemo(
+    () => ({
+      state,
+      toggleSidebar
+    }),
+    [state, toggleSidebar]
+  );
+  return /* @__PURE__ */ 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__ */ jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsx(EntryList.Header, { columns: scoresListColumns }),
+      errorMsg ? /* @__PURE__ */ jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsx(Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsx(EntryList.Entries, { children: scores.map((score) => {
+        const createdAtDate = new Date(score.createdAt);
+        const isTodayDate = isToday(createdAtDate);
+        const entry = {
+          id: score.id,
+          date: isTodayDate ? "Today" : format(createdAtDate, "MMM dd"),
+          time: format(createdAtDate, "h:mm:ss aaa"),
+          input: JSON.stringify(score?.input),
+          entityId: score.entityId,
+          score: score.score
+        };
+        return /* @__PURE__ */ jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedScoreId === score.id,
+            columns: scoresListColumns,
+            onClick: onScoreClick,
+            children: scoresListColumns.map((col, index) => {
+              const key = `${index}-${score.id}`;
+              return /* @__PURE__ */ jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EntryList.Pagination,
+      {
+        currentPage: pagination?.page || 0,
+        onNextPage: handleNextPage,
+        onPrevPage: handlePrevPage,
+        hasMore: scoresHasMore
+      }
+    )
+  ] });
+}
+
+function ScoreDialog({
+  score,
+  scorerName,
+  isOpen,
   onClose,
   onNext,
   onPrevious,
-  computeTraceLink
+  computeTraceLink,
+  dialogLevel = 1,
+  usageContext = "scorerPage"
 }) {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxs(
@@ -12566,77 +12804,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__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+        /* @__PURE__ */ jsxs(SideDialog.Top, { children: [
+          usageContext === "scorerPage" && /* @__PURE__ */ jsxs(TextAndIcon, { children: [
             /* @__PURE__ */ jsx(GaugeIcon, {}),
             " ",
-            scorer?.config?.name
+            scorerName
+          ] }),
+          usageContext === "aiSpanDialog" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(EyeIcon, {}),
+              " ",
+              getShortId(score?.traceId)
+            ] }),
+            score?.spanId && /* @__PURE__ */ jsxs(Fragment, { children: [
+              "›",
+              /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+                getShortId(score?.spanId)
+              ] })
+            ] })
           ] }),
           "›",
           /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsx(HashIcon, {}),
-            score?.id
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-          score?.traceId && /* @__PURE__ */ jsx(
-            KeyValueList,
-            {
-              data: [
-                {
-                  label: "Trace ID",
-                  value: /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }),
-                  key: "traceId"
-                },
-                ...score?.spanId ? [
+            /* @__PURE__ */ jsx(CalculatorIcon, {}),
+            getShortId(score?.id)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsx(SideDialog.Nav, { onNext, onPrevious })
+        ] }),
+        /* @__PURE__ */ jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsx(CalculatorIcon, {}),
+              " Score"
+            ] }),
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(HashIcon, {}),
+              " ",
+              score?.id
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Sections, { children: [
+            /* @__PURE__ */ jsx(
+              KeyValueList,
+              {
+                data: [
+                  ...usageContext === "aiSpanDialog" ? [
+                    {
+                      label: "Scorer",
+                      value: score?.scorer?.name || "-",
+                      key: "scorer-name"
+                    }
+                  ] : [],
                   {
-                    label: "Span ID",
-                    value: /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }),
-                    key: "spanId"
-                  }
-                ] : []
-              ],
-              LinkComponent: Link
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SideDialogCodeSection,
-            {
-              title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
-              codeStr: score?.reason,
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(score?.input || null, null, 2) }),
-          /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(score?.output || null, null, 2) }),
-          /* @__PURE__ */ jsx(
-            SideDialogCodeSection,
-            {
-              title: "Preprocess Prompt",
-              codeStr: score?.preprocessPrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Analyze Prompt", codeStr: score?.analyzePrompt || "null", simplified: true }),
-          /* @__PURE__ */ jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Score Prompt",
-              codeStr: score?.generateScorePrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Reason Prompt",
-              codeStr: score?.generateReasonPrompt || "null",
-              simplified: true
-            }
-          )
-        ] }) })
+                    label: "Created at",
+                    value: score?.createdAt ? format$1(new Date(score?.createdAt), "MMM d, h:mm:ss aaa") : "n/a",
+                    key: "date"
+                  },
+                  ...usageContext !== "aiSpanDialog" ? [
+                    {
+                      label: "Trace ID",
+                      value: score?.traceId ? /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }) : "n/a",
+                      key: "traceId"
+                    },
+                    {
+                      label: "Span ID",
+                      value: score?.traceId && score?.spanId ? /* @__PURE__ */ jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }) : "n/a",
+                      key: "spanId"
+                    }
+                  ] : []
+                ],
+                LinkComponent: Link
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
+                icon: /* @__PURE__ */ jsx(GaugeIcon, {}),
+                codeStr: score?.reason || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Input",
+                icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+                codeStr: JSON.stringify(score?.input || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Output",
+                icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+                codeStr: JSON.stringify(score?.output || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Preprocess Prompt",
+                icon: /* @__PURE__ */ jsx(ReceiptText, {}),
+                codeStr: score?.preprocessPrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Analyze Prompt",
+                icon: /* @__PURE__ */ jsx(ReceiptText, {}),
+                codeStr: score?.analyzePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Score Prompt",
+                icon: /* @__PURE__ */ jsx(ReceiptText, {}),
+                codeStr: score?.generateScorePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Reason Prompt",
+                icon: /* @__PURE__ */ jsx(ReceiptText, {}),
+                codeStr: score?.generateReasonPrompt || "null",
+                simplified: true
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -12777,7 +13082,7 @@ function ScorersTable({ scorers, isLoading }) {
     return /* @__PURE__ */ jsx(EmptyScorersTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.scorer.config.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search scorers", placeholder: "Search scorers" }) }),
     isLoading ? /* @__PURE__ */ jsx(ScorersTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -12813,6 +13118,18 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsx("div", { className: "flex h-
   }
 ) });
 
+const useTraceSpanScores = ({ traceId = "", spanId = "", page }) => {
+  const client = useMastraClient();
+  return 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 = ({
   defaultProvider,
   defaultModel,
@@ -13059,6 +13376,7 @@ const AgentMetadataModelSwitcher = ({
               /* @__PURE__ */ jsx(
                 Input,
                 {
+                  "aria-label": "Search providers",
                   spellCheck: "false",
                   ref: providerInputRef,
                   className: `w-full ${!isSearchingProvider && currentModelProvider ? "pl-8 pr-8" : ""}`,
@@ -13097,20 +13415,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);
@@ -13119,8 +13423,6 @@ const AgentMetadataModelSwitcher = ({
                           setShowProviderSuggestions(false);
                           break;
                       }
-                    } else if (e.key === "Tab") {
-                      return;
                     }
                   },
                   onFocus: () => {
@@ -13212,6 +13514,7 @@ const AgentMetadataModelSwitcher = ({
             /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Input,
               {
+                "aria-label": "Search models",
                 spellCheck: "false",
                 ref: modelInputRef,
                 className: "w-full xl:w-3/5",
@@ -13264,7 +13567,6 @@ const AgentMetadataModelSwitcher = ({
                       }, 0);
                       break;
                     case "Enter":
-                    case "Tab":
                       e.preventDefault();
                       if (highlightedModelIndex >= 0 && highlightedModelIndex < filteredModels.length) {
                         const model = filteredModels[highlightedModelIndex];
@@ -13509,7 +13811,7 @@ const AgentMetadataNetworkList = ({ agents }) => {
   if (agents.length === 0) {
     return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No agents" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentLink(agent.id), children: /* @__PURE__ */ jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentLink(agent.id), "data-testid": "agent-badge", children: /* @__PURE__ */ jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
 const AgentMetadata = ({
   agentId,
@@ -13565,7 +13867,10 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/agent-memory",
           title: "Agent Memory documentation"
         },
-        children: hasMemoryEnabled ? /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxs(Alert$1, { variant: "warning", children: [
+        children: hasMemoryEnabled ? /* @__PURE__ */ jsxs(Badge$1, { icon: /* @__PURE__ */ jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Memory is enabled" }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "On" })
+        ] }) : /* @__PURE__ */ jsxs(Alert$1, { variant: "warning", children: [
           /* @__PURE__ */ jsx(AlertTitle$1, { as: "h5", children: "Memory not enabled" }),
           /* @__PURE__ */ jsxs(AlertDescription$1, { as: "p", children: [
             "Thread messages will not be stored. To activate memory, see the",
@@ -13627,14 +13932,14 @@ const AgentMetadataToolList = ({ tools, agentId }) => {
   if (tools.length === 0) {
     return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No tools" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentToolLink(agentId, tool.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.agentToolLink(agentId, tool.id), "data-testid": "tool-badge", children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
 };
 const AgentMetadataWorkflowList = ({ workflows }) => {
   const { Link, paths } = useLinkComponent();
   if (workflows.length === 0) {
     return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No workflows" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.workflowLink(workflow.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.workflowLink(workflow.id), "data-testid": "workflow-badge", children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
 };
 const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const { Link, paths } = useLinkComponent();
@@ -13652,7 +13957,7 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   if (scorerList.length === 0) {
     return /* @__PURE__ */ jsx(AgentMetadataListEmpty, { children: "No Scorers" });
   }
-  return /* @__PURE__ */ jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.scorerLink(scorer.id), children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
+  return /* @__PURE__ */ jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsx(Badge$1, { icon: /* @__PURE__ */ jsx(GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
 const AgentMetadataPrompt = ({ prompt }) => {
@@ -13947,7 +14252,7 @@ function ToolTable({ tools, agents, isLoading }) {
     return /* @__PURE__ */ jsx(EmptyToolsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
     isLoading ? /* @__PURE__ */ jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -15658,6 +15963,45 @@ function TreePositionMark({ isLastChild, hasChildren = false }) {
   );
 }
 
+function TraceTimeline({ hierarchicalSpans = [], onSpanClick, selectedSpanId, isLoading }) {
+  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
+  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
+  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
+  return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ 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__ */ jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ 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__ */ jsx(
+        TraceTimelineSpan,
+        {
+          span,
+          onSpanClick,
+          selectedSpanId,
+          overallLatency,
+          overallStartTime,
+          overallEndTime
+        },
+        span.id
+      ))
+    }
+  ) });
+}
+
 function TraceTimelineLegend({ spans = [] }) {
   const activeSpanTypes = spanTypePrefixes.filter(
     (typePrefix) => spans.some((span) => span?.spanType?.startsWith(typePrefix))
@@ -15671,65 +16015,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__ */ jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
-        /* @__PURE__ */ jsx(ListTreeIcon, {}),
-        " Timeline"
-      ] }),
-      /* @__PURE__ */ jsx(TraceTimelineLegend, { spans })
-    ] }),
-    isLoading ? /* @__PURE__ */ 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__ */ jsx(Spinner, {}),
-          " Loading Trace Timeline ..."
-        ]
-      }
-    ) : /* @__PURE__ */ 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__ */ 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");
@@ -15842,12 +16127,11 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsx(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"];
@@ -15855,55 +16139,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__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: cn("flex gap-[1.5rem] flex-wrap", className), children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ 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__ */ jsxs(
-        "div",
-        {
-          className: cn("bg-white/5 p-[1rem] px-[1.25rem] rounded-lg text-[0.875rem]", {
-            "min-h-[5.5rem]": traceUsage
-          }),
-          children: [
-            /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
-                  /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem] ", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxs(
-              "dl",
-              {
-                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
-                children: [
-                  /* @__PURE__ */ jsx("dt", { children: provider }),
-                  /* @__PURE__ */ jsx("dd", { children: providerTokens?.[key] })
-                ]
-              },
-              provider
-            )) })
-          ]
-        },
-        key
-      ))
-    }
-  );
+            children: [
+              tokenPresentations?.[key]?.icon,
+              /* @__PURE__ */ jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+              /* @__PURE__ */ jsx("b", { className: "text-[1rem]", children: value })
+            ]
+          }
+        ),
+        tokensByProviderValid && /* @__PURE__ */ jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxs(
+          "dl",
+          {
+            className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+            children: [
+              /* @__PURE__ */ jsx("dt", { children: provider }),
+              /* @__PURE__ */ jsx("dd", { children: providerTokens?.[key] })
+            ]
+          },
+          provider
+        )) })
+      ]
+    },
+    key
+  )) });
 }
 
 function useTraceInfo(trace) {
@@ -15986,253 +16257,199 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   return baseInfo;
 }
 
-const ScoreTable = ({ scores, onItemClick }) => {
-  return /* @__PURE__ */ jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsxs(Thead, { children: [
-      /* @__PURE__ */ jsx(Th, { children: "Type" }),
-      /* @__PURE__ */ jsx(Th, { children: "Scorer" }),
-      /* @__PURE__ */ jsx(Th, { children: "Score" }),
-      /* @__PURE__ */ jsx(Th, { children: "Created At" })
-    ] }),
-    /* @__PURE__ */ jsx(Tbody, { children: scores.map((score) => /* @__PURE__ */ jsxs(Row, { onClick: () => onItemClick(score.scorerName), children: [
-      /* @__PURE__ */ jsx(TxtCell, { children: /* @__PURE__ */ jsx(Badge$1, { children: score.type }) }),
-      /* @__PURE__ */ jsx(TxtCell, { children: score.scorerName }),
-      /* @__PURE__ */ jsx(TxtCell, { children: score.score }),
-      /* @__PURE__ */ jsx(DateTimeCell, { dateTime: new Date(score.createdAt) })
-    ] }, score.scoreId)) })
-  ] });
+const TabsRoot = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange,
+  className
+}) => {
+  const [internalTab, setInternalTab] = 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__ */ jsx(
+    TabsPrimitive.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__ */ jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
-    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
-    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
-    /* @__PURE__ */ jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) }),
-    span?.links?.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-        /* @__PURE__ */ jsx(GaugeIcon, {}),
-        " Scores"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsx(
-        ScoreTable,
+const TabList = ({ children, variant = "default", className }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsx(
+    TabsPrimitive.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.Root;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, className: cn("cursor-pointer focus-visible:rounded", className), ...props, children }));
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsx(ChevronDown, { className: "ml-auto -rotate-90" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, container, sideOffset = 4, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
-    DropdownMenuPrimitive.Content,
+const Tab = ({ children, value, onClick, className }) => {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
+};
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.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.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Input",
+        icon: /* @__PURE__ */ jsx(FileInputIcon, {}),
+        codeStr: JSON.stringify(span.input || null, null, 2)
+      }
     ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("div", { className: "border-sm border-border1 flex h-4 w-4 items-center justify-center rounded-sm", children: checked && /* @__PURE__ */ jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsx(Check, {}) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  DropdownMenuPrimitive.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__ */ jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Output",
+        icon: /* @__PURE__ */ jsx(FileOutputIcon, {}),
+        codeStr: JSON.stringify(span.output || null, null, 2)
+      }
     ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("popover-dividers-bg -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-const DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ 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__ */ jsx(DropdownMenu, { modal, open, onOpenChange, children });
-}
-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 = useMastraClient();
-  return useMutation({
-    mutationFn: async ({ scorerName, traceId, spanId }) => {
-      const response = await client.score({
-        scorerName,
-        targets: [{ traceId, spanId }]
-      });
-      return response;
-    },
-    onSuccess: (_, variables) => {
-      toast.success("Scorer triggered successfully");
-      onScorerTriggered(variables.scorerName, variables.traceId, variables.spanId);
-    },
-    onError: () => {
-      toast.error("Error triggering scorer");
-    }
-  });
-};
+    /* @__PURE__ */ jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Metadata",
+        icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+        codeStr: JSON.stringify(span.metadata || null, null, 2)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Attributes",
+        icon: /* @__PURE__ */ jsx(BracesIcon, {}),
+        codeStr: JSON.stringify(span.attributes || null, null, 2)
+      }
+    )
+  ] });
+}
 
-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__ */ jsxs(Dropdown, { children: [
-    /* @__PURE__ */ jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button$1, { variant: "light", disabled: isWaiting, children: [
-      isWaiting ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(GaugeIcon, {}) }),
-      "Run scorer",
-      /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+  return /* @__PURE__ */ jsxs(Tabs, { defaultTab: defaultActiveTab, children: [
+    /* @__PURE__ */ jsxs(Tabs.List, { children: [
+      /* @__PURE__ */ jsx(Tabs.Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxs(Tabs.Tab, { value: "scores", children: [
+        "Scoring ",
+        spanScoresData?.pagination && `(${spanScoresData.pagination.total || 0})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxs(Sections, { children: [
+      span?.attributes?.usage && /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }),
+      /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
+      /* @__PURE__ */ jsx(SpanDetails, { span })
     ] }) }),
-    /* @__PURE__ */ jsx(Dropdown.Content, { children: scorerList.map((scorer) => /* @__PURE__ */ jsx(
-      Dropdown.Item,
-      {
-        onClick: () => triggerScorer({ scorerName: scorer.name, traceId: trace.traceId, spanId }),
-        children: /* @__PURE__ */ jsx("span", { children: scorer.name })
-      },
-      scorer.id
-    )) })
+    /* @__PURE__ */ jsx(Tabs.Content, { value: "scores", children: /* @__PURE__ */ jsxs(Sections, { children: [
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsx(Section.Header, { children: /* @__PURE__ */ jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
+          " Scoring"
+        ] }) }),
+        /* @__PURE__ */ jsx(SpanScoring, { traceId: trace?.traceId, spanId: span?.spanId, entityType })
+      ] }),
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsx(Section.Header, { children: /* @__PURE__ */ jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
+          " Scores"
+        ] }) }),
+        /* @__PURE__ */ 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__ */ jsxs(
     SideDialog,
     {
@@ -16240,43 +16457,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__ */ jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
-          /* @__PURE__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsx(EyeIcon, {}),
+        /* @__PURE__ */ jsxs(SideDialog.Top, { children: [
+          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsx(EyeIcon, {}),
+            " ",
+            getShortId(span?.traceId)
+          ] }),
+          "›",
+          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+            getShortId(span?.spanId)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsx(SideDialog.Nav, { onNext, onPrevious }),
+          /* @__PURE__ */ jsxs("button", { className: "ml-auto mr-[2rem]", onClick: onViewToggle, children: [
+            /* @__PURE__ */ jsx(PanelTopIcon, {}),
+            /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Switch to dialog view" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
               " ",
-              getShortId(span?.traceId)
+              span?.name
             ] }),
-            "›",
             /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
-              getShortId(span?.spanId)
+              /* @__PURE__ */ jsx(HashIcon, {}),
+              " ",
+              span?.spanId
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsx(PanelTopIcon, {}) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
-              /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
-                /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
-                " ",
-                span?.name
-              ] }),
-              /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-                /* @__PURE__ */ jsx(HashIcon, {}),
-                " ",
-                span?.spanId
-              ] })
-            ] }),
-            span?.traceId && span?.spanId && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ScorersDropdown, { trace, spanId: span?.spanId, onScorerTriggered }) })
           ] }),
-          span?.attributes?.usage && /* @__PURE__ */ jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsx(SpanDetails, { span, onScorerTriggered })
+          /* @__PURE__ */ jsx(
+            SpanTabs,
+            {
+              trace,
+              span,
+              spanScoresData,
+              onSpanScoresPageChange,
+              isLoadingSpanScoresData,
+              spanInfo,
+              defaultActiveTab,
+              initialScoreId,
+              computeTraceLink
+            }
+          )
         ] })
       ]
     }
@@ -16294,15 +16521,30 @@ function TraceDialog({
   isLoadingSpans,
   computeAgentsLink,
   computeWorkflowsLink,
-  onScorerTriggered,
-  initialSpanId
+  computeTraceLink,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
 }) {
-  const { Link } = useLinkComponent();
+  const { Link, navigate } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = useState(Boolean(initialSpanId));
   const [selectedSpanId, setSelectedSpanId] = useState(initialSpanId);
   const [combinedView, setCombinedView] = useState(false);
+  const [spanDialogDefaultTab, setSpanDialogDefaultTab] = useState(initialSpanTab || "details");
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
   const traceInfo = useTraceInfo(traceDetails);
+  const [spanScoresPage, setSpanScoresPage] = useState(0);
+  useEffect(() => {
+    if (initialSpanId) {
+      setSelectedSpanId(initialSpanId);
+      setDialogIsOpen(true);
+    }
+  }, [initialSpanId]);
+  useEffect(() => {
+    if (spanScoresPage > 0) {
+      setSpanScoresPage(0);
+    }
+  }, [selectedSpanId]);
   const hierarchicalSpans = useMemo(() => {
     return formatHierarchicalSpans(traceSpans);
   }, [traceSpans]);
@@ -16320,39 +16562,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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       SideDialog,
@@ -16361,111 +16602,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__ */ jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsx(EyeIcon, {}),
-            " ",
-            getShortId(traceId)
-          ] }) }),
+          /* @__PURE__ */ jsxs(SideDialog.Top, { children: [
+            /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsx(EyeIcon, {}),
+              " ",
+              getShortId(traceId)
+            ] }),
+            "|",
+            /* @__PURE__ */ jsx(SideDialog.Nav, { onNext, onPrevious })
+          ] }),
           /* @__PURE__ */ 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__ */ jsxs(SideDialogHeader, { className: "pr-[2.5rem]", children: [
-                  /* @__PURE__ */ jsxs(SideDialogHeading, { children: [
-                    /* @__PURE__ */ jsx(EyeIcon, {}),
-                    " ",
-                    traceDetails?.name
-                  ] }),
-                  /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-                    /* @__PURE__ */ jsx(HashIcon, {}),
-                    " ",
-                    traceId
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
-                  traceDetails && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-                    ScorersDropdown,
-                    {
-                      trace: traceDetails,
-                      spanId: selectedSpanId,
-                      onScorerTriggered,
-                      entityType
-                    }
-                  ) }),
-                  traceDetails?.metadata?.usage && /* @__PURE__ */ jsx(
-                    TraceSpanUsage,
-                    {
-                      traceUsage: traceDetails?.metadata?.usage,
-                      traceSpans,
-                      className: "mt-[2rem] pr-[1.5rem]"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(KeyValueList, { data: traceInfo, LinkComponent: Link, className: "mt-[2rem]" }),
-                  /* @__PURE__ */ jsx(
-                    TraceTimeline,
-                    {
-                      hierarchicalSpans,
-                      spans: traceSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      isLoading: isLoadingSpans,
-                      className: "pr-[2.5rem] pt-[2.5rem]"
-                    }
-                  ),
-                  traceDetails?.links?.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-                      /* @__PURE__ */ jsx(GaugeIcon, {}),
-                      " Scores"
+                /* @__PURE__ */ jsxs(SideDialog.Content, { children: [
+                  /* @__PURE__ */ jsxs(SideDialog.Header, { children: [
+                    /* @__PURE__ */ jsxs(SideDialog.Heading, { children: [
+                      /* @__PURE__ */ jsx(EyeIcon, {}),
+                      " ",
+                      traceDetails?.name
                     ] }),
-                    /* @__PURE__ */ jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsx(
-                      ScoreTable,
-                      {
-                        scores: traceDetails?.links,
-                        onItemClick: (scorerName) => onScorerTriggered(scorerName, traceDetails.traceId, selectedSpanId)
-                      }
-                    ) })
-                  ] })
-                ] }),
-                selectedSpan && combinedView && /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
-                  /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-[.5rem] pt-[1rem] border-b border-border1 pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsx(
-                      SideDialogTop,
-                      {
-                        onNext: thereIsNextSpan() ? toNextSpan : void 0,
-                        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
-                        showInnerNav: true,
-                        className: "pl-0",
-                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-                          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsx(EyeIcon, {}),
-                            " ",
-                            getShortId(traceId)
+                    /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsx(HashIcon, {}),
+                      " ",
+                      traceId
+                    ] })
+                  ] }),
+                  traceDetails && /* @__PURE__ */ jsxs(Sections, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "grid xl:grid-cols-[3fr_2fr] gap-[1rem] items-start", children: [
+                      /* @__PURE__ */ jsx(KeyValueList, { data: traceInfo, LinkComponent: Link }),
+                      /* @__PURE__ */ jsxs("div", { className: "bg-surface3 p-[1.5rem] rounded-lg grid gap-[1rem]", children: [
+                        /* @__PURE__ */ jsx("h4", { className: "text-[1rem]", children: /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                          /* @__PURE__ */ jsx(GaugeIcon, {}),
+                          " Evaluate trace"
+                        ] }) }),
+                        /* @__PURE__ */ jsxs(ButtonsGroup, { className: "w-full", children: [
+                          /* @__PURE__ */ jsxs(Button, { onClick: handleToScoring, children: [
+                            "Scoring ",
+                            /* @__PURE__ */ jsx(CircleGaugeIcon, {}),
+                            " "
                           ] }),
-                          "›",
-                          /* @__PURE__ */ jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
-                            " ",
-                            getShortId(selectedSpanId)
+                          spanScoresData?.scores?.[0] && /* @__PURE__ */ jsxs(Button, { onClick: handleToLastScore, children: [
+                            "Last score: ",
+                            /* @__PURE__ */ jsx("b", { children: spanScoresData?.scores?.[0]?.score })
                           ] })
                         ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[1rem]", children: /* @__PURE__ */ jsx("button", { className: "flex items-center gap-1", onClick: () => setCombinedView(false), children: /* @__PURE__ */ jsx(PanelLeftIcon, {}) }) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Section, { children: [
+                      /* @__PURE__ */ jsxs(Section.Header, { children: [
+                        /* @__PURE__ */ jsxs(Section.Heading, { children: [
+                          /* @__PURE__ */ jsx(ListTreeIcon, {}),
+                          " Timeline"
+                        ] }),
+                        /* @__PURE__ */ jsx(TraceTimelineLegend, { spans: traceSpans })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        TraceTimeline,
+                        {
+                          hierarchicalSpans,
+                          onSpanClick: handleSpanClick,
+                          selectedSpanId,
+                          isLoading: isLoadingSpans
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                selectedSpan && combinedView && /* @__PURE__ */ jsxs("div", { className: "grid grid-rows-[auto_1fr] relative overflow-y-auto", children: [
+                  /* @__PURE__ */ jsxs(SideDialog.Top, { withTopSeparator: true, children: [
+                    /* @__PURE__ */ jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
+                      " ",
+                      getShortId(selectedSpanId)
+                    ] }),
+                    "|",
+                    /* @__PURE__ */ jsx(SideDialog.Nav, { onNext: toNextSpan, onPrevious: toPreviousSpan }),
+                    /* @__PURE__ */ jsxs("button", { className: "ml-auto mr-[2rem]", onClick: () => setCombinedView(false), children: [
+                      /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+                      " ",
+                      /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Switch to dialog view" })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
-                      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(SideDialogHeading, { as: "h2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: cn("h-full overflow-y-auto grid gap-[2rem] grid-cols-[20rem_1fr]"), children: [
+                    /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto grid content-start p-[2rem] gap-[2rem]", children: [
+                      /* @__PURE__ */ jsxs(SideDialog.Heading, { as: "h2", children: [
                         /* @__PURE__ */ jsx(ChevronsLeftRightEllipsisIcon, {}),
                         " ",
                         selectedSpan?.name
-                      ] }) }),
+                      ] }),
                       selectedSpan?.attributes?.usage && /* @__PURE__ */ jsx(
                         TraceSpanUsage,
                         {
@@ -16475,7 +16705,20 @@ function TraceDialog({
                       ),
                       /* @__PURE__ */ jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
                     ] }),
-                    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsx(SpanDetails, { span: selectedSpan, onScorerTriggered }) })
+                    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto pr-[2rem] pt-[2rem] h-full", children: /* @__PURE__ */ jsx(
+                      SpanTabs,
+                      {
+                        trace: traceDetails,
+                        span: selectedSpan,
+                        spanScoresData,
+                        onSpanScoresPageChange: setSpanScoresPage,
+                        isLoadingSpanScoresData,
+                        spanInfo: selectedSpanInfo,
+                        defaultActiveTab: spanDialogDefaultTab,
+                        initialScoreId,
+                        computeTraceLink
+                      }
+                    ) })
                   ] })
                 ] })
               ]
@@ -16489,16 +16732,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
       }
     )
   ] });
@@ -16637,61 +16886,192 @@ function TracesList({
   ] });
 }
 
-function MainContentLayout({
-  children,
-  className,
-  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("MainContentLayout");
-  return /* @__PURE__ */ jsx(
-    "main",
-    {
-      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
-      children
+  const { navigate } = useLinkComponent();
+  const [dialogIsOpen, setDialogIsOpen] = useState(false);
+  const [selectedScore, setSelectedScore] = useState();
+  useEffect(() => {
+    if (initialScoreId) {
+      handleOnScore(initialScoreId);
     }
-  );
-}
-function MainContentContent({
-  children,
-  className,
-  isCentered = false,
-  isDivided = false,
-  hasLeftServiceColumn = false,
-  style
-}) {
-  const devStyleRequested = devUIStyleRequested("MainContentContent");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        `grid overflow-y-auto h-full `,
-        `overflow-x-auto min-w-[min-content]`,
+  }, [initialScoreId]);
+  const handleOnScore = (scoreId) => {
+    const score = scoresData?.scores?.find((s) => s?.id === scoreId);
+    setSelectedScore(score);
+    setDialogIsOpen(true);
+  };
+  if (isLoadingScoresData) {
+    return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EntryList, { children: [
+      /* @__PURE__ */ jsxs(EntryList.Trim, { children: [
+        /* @__PURE__ */ jsx(EntryList.Header, { columns: traceScoresListColumns }),
+        scoresData?.scores && scoresData.scores.length > 0 ? /* @__PURE__ */ jsx(EntryList.Entries, { children: scoresData?.scores?.map((score) => {
+          const createdAtDate = new Date(score.createdAt);
+          const isTodayDate = isToday(createdAtDate);
+          const entry = {
+            id: score?.id,
+            shortId: getShortId(score?.id) || "n/a",
+            date: isTodayDate ? "Today" : format(createdAtDate, "MMM dd"),
+            time: format(createdAtDate, "h:mm:ss aaa"),
+            score: score?.score,
+            scorer: score?.scorer?.name
+          };
+          return /* @__PURE__ */ jsx(
+            EntryList.Entry,
+            {
+              columns: traceScoresListColumns,
+              onClick: () => handleOnScore(score.id),
+              entry,
+              children: traceScoresListColumns.map((col) => {
+                const key = `col-${col.name}`;
+                return /* @__PURE__ */ jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+              })
+            },
+            score.id
+          );
+        }) }) : /* @__PURE__ */ jsx(EntryList.Message, { message: "No scores found", type: "info" })
+      ] }),
+      /* @__PURE__ */ 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__ */ 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 = useMastraClient();
+  return 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] = useState(null);
+  const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
+  const [notificationIsVisible, setNotificationIsVisible] = useState(false);
+  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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[3fr_1fr] gap-[1rem] items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-[0.5rem]", children: [
+        /* @__PURE__ */ 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__ */ jsxs(TextAndIcon, { className: "text-icon3", children: [
+          /* @__PURE__ */ jsx(InfoIcon$1, {}),
+          " ",
+          selectedScorerDescription
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { disabled: !selectedScorer || isWaiting, onClick: handleStartScoring, children: isPending ? "Starting..." : "Start Scoring" })
+    ] }),
+    /* @__PURE__ */ jsxs(Notification, { isVisible: notificationIsVisible, className: "mt-[1rem]", children: [
+      /* @__PURE__ */ jsx(InfoIcon$1, {}),
+      " Scorer triggered! When finished successfully, it will appear in the list below. It could take a moment."
+    ] })
+  ] });
+};
 
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsx("ol", { className: "gap-sm flex items-center", children }) });
@@ -17298,7 +17678,7 @@ function MCPTable({ mcpServers, isLoading }) {
     return /* @__PURE__ */ jsx(EmptyMCPTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsx(Searchbar, { onSearch: setSearch, label: "Search MCP servers", placeholder: "Search MCP servers" }) }),
     isLoading ? /* @__PURE__ */ jsx(MCPTableSkeleton, {}) : /* @__PURE__ */ jsx(ScrollableContainer, { children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Table$1, { children: [
       /* @__PURE__ */ jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -17384,5 +17764,5 @@ const WorkflowRunStatusBadge = ({ status }) => {
   return /* @__PURE__ */ jsx(Badge$1, { variant: "default", children: status });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, SelectField, SettingsIcon, SideDialog, SideDialogCodeSection, SideDialogContent, SideDialogFooter, SideDialogFooterGroup, SideDialogHeader, SideDialogHeading, SideDialogKeyValueList, SideDialogSection, SideDialogTop, SlashIcon, SliderField, Tab, TabContent, TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, tracesListColumns, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMCPServerTools, useModelReset, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useWorkflow, useWorkflowRuns, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataNetworkList, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AiIcon, Alert$1 as Alert, AlertDescription$1 as AlertDescription, AlertDialog, AlertTitle$1 as AlertTitle, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button$1 as Button, ButtonsGroup, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DateTimeCell, DateTimePicker, DateTimePickerContent, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityMainHeader, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, FormActions, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, InputField, JudgeIcon, Kbd, KeyValueList, LatencyIcon, LinkComponentProvider, LogsIcon, MCPTable, MainContentContent, MainContentLayout, MainSidebar, MainSidebarProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, ModelResetProvider, Notification, OpenAIIcon, PageHeader, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupField, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreDialog, ScoreIcon, ScorersTable, ScoresList, ScoresTools, SearchField, Searchbar, SearchbarWrapper, Section, Sections, SelectField, SettingsIcon, SideDialog, SlashIcon, SliderField, SpanScoreList, SpanScoring, SpanTabs, Tab$1 as Tab, TabContent$1 as TabContent, TabList$1 as TabList, Table$1 as Table, Tbody, TemplateFailure, TemplateForm, TemplateInfo, TemplateInstallation, TemplateSuccess, TemplatesList, TemplatesTools, TextAndIcon, TextareaField, Th, Thead, ThreadDeleteButton, ThreadInputProvider, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolFallback, ToolTable, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceDialog, TraceIcon, TraceTimeline, TraceTimelineLegend, TraceTimelineSpan, TracesList, TracesTools, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunDetail, WorkflowRunList, WorkflowRunProvider, WorkflowTable, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, convertWorkflowRunStateToStreamResult, extractPrompt, formatDuration, formatHierarchicalSpans, formatOtelTimestamp, formatOtelTimestamp2, getColumnTemplate, getShortId, getSpanTypeUi, getToNextEntryFn, getToPreviousEntryFn, parseError, providerMapToIcon, scoresListColumns, spanTypePrefixes, traceScoresListColumns, tracesListColumns, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMCPServerTools, useMainSidebar, useModelReset, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useThreadInput, useTraceSpanScores, useWorkflow, useWorkflowRuns, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map