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

package/dist/index.cjs.js

@@ -64,7 +64,6 @@ const dnd = require('@hello-pangea/dnd');
 const SwitchPrimitives = require('@radix-ui/react-switch');
 const AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 const format = require('date-fns/format');
-const DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -100,7 +99,6 @@ const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(Visually
 const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 const SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 const AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(AlertDialogPrimitive);
-const DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -4428,10 +4426,11 @@ const BadgeWrapper = ({
   icon,
   title,
   collapsible = true,
-  extraInfo
+  extraInfo,
+  "data-testid": dataTestId
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(initialCollapsed);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", "data-testid": dataTestId, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -4561,6 +4560,7 @@ const ToolBadge = ({ toolName, args, result, metadata, toolOutput }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
+      "data-testid": "tool-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }),
       title: toolName,
       extraInfo: metadata?.mode === "network" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6938,7 +6938,8 @@ function DynamicForm({
     },
     defaultValues: isNotZodObject ? defaultValues ? { "​": defaultValues } : void 0 : defaultValues,
     formProps: {
-      className
+      className,
+      noValidate: true
     },
     uiComponents: {
       SubmitButton: ({ children }) => onSubmit ? /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "light", className: "w-full", size: "lg", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin" }) }) : submitButtonLabel || children }) : null
@@ -7731,7 +7732,7 @@ function WorkflowTable({ workflows, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyWorkflowsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search workflows", placeholder: "Search workflows" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(WorkflowTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -7785,6 +7786,7 @@ const WorkflowBadge = ({ workflow, runId, workflowId, isStreaming, metadata }) =
   return /* @__PURE__ */ jsxRuntime.jsxs(
     BadgeWrapper,
     {
+      "data-testid": "workflow-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }),
       title: workflow.name,
       initialCollapsed: false,
@@ -7850,6 +7852,7 @@ const AgentBadge = ({ agentId, messages = [], metadata }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BadgeWrapper,
     {
+      "data-testid": "agent-badge",
       icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, { className: "text-accent1" }),
       title: agentId,
       initialCollapsed: false,
@@ -9583,13 +9586,11 @@ function MastraRuntimeProvider({
     () => memory ? initializeMessageState(initialLegacyMessages || []) : []
   );
   const {
-    setMessages,
     messages,
-    generate,
-    stream,
-    network,
+    sendMessage,
     cancelRun,
-    isRunning: isRunningStream
+    isRunning: isRunningStream,
+    setMessages
   } = react$3.useChat({
     agentId,
     initializeMessages: () => initialMessages || []
@@ -9634,9 +9635,7 @@ function MastraRuntimeProvider({
     if (message.content[0]?.type !== "text") throw new Error("Only text messages are supported");
     const attachments = await convertToAIAttachments(message.attachments);
     const input = message.content[0].text;
-    if (isVNext) {
-      setMessages((s) => [...s, { role: "user", parts: [{ type: "text", text: input }] }]);
-    } else {
+    if (!isVNext) {
       setLegacyMessages((s) => [...s, { role: "user", content: input, attachments: message.attachments }]);
     }
     const controller = new AbortController();
@@ -9649,14 +9648,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,
@@ -9669,14 +9664,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,
@@ -9684,14 +9675,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,
@@ -10229,7 +10216,7 @@ const TableCaption = React__namespace.forwardRef(
 );
 TableCaption.displayName = "TableCaption";
 
-const Tabs = TabsPrimitive__namespace.Root;
+const Tabs$1 = TabsPrimitive__namespace.Root;
 const TabsList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
@@ -10272,12 +10259,12 @@ const PlaygroundTabs = ({
       setInternalTab(typedValue);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { value: currentTab, onValueChange: handleTabChange, className: cn("h-full", className), children });
 };
-const TabList = ({ children, className }) => {
+const TabList$1 = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "border-b border-border1 flex min-w-full shrink-0", children }) });
 };
-const Tab = ({ children, value, onClick }) => {
+const Tab$1 = ({ children, value, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsTrigger,
     {
@@ -10288,7 +10275,7 @@ const Tab = ({ children, value, onClick }) => {
     }
   );
 };
-const TabContent = ({ children, value }) => {
+const TabContent$1 = ({ children, value }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value, className: "h-full overflow-hidden flex flex-col", children });
 };
 
@@ -10313,12 +10300,12 @@ function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }
     return onRefetchCiEvals();
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(PlaygroundTabs, { defaultTab: "live", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TabList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "live", children: "Live" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { value: "ci", children: "CI" })
+    /* @__PURE__ */ jsxRuntime.jsxs(TabList$1, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "live", children: "Live" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Tab$1, { value: "ci", children: "CI" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "live", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { value: "ci", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "live", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent$1, { value: "ci", children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
   ] });
 }
 function EvalTable({ evals, isCIMode = false, onRefresh }) {
@@ -10990,7 +10977,7 @@ function AgentsTable({ agents, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyAgentsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search agents", placeholder: "Search agents" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(AgentsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -11615,7 +11602,7 @@ function RelationWrapper({ description, children }) {
 }
 
 function EntryListRoot({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid mb-[3rem]", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid", children });
 }
 
 function getColumnTemplate(columns) {
@@ -11832,30 +11819,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__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-[0.25]") }),
+    !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cn("bg-black top-0 bottom-0 right-0 left-0 fixed z-50 opacity-40") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       DialogPrimitive__namespace.Content,
       {
         className: cn(
-          "fixed top-0 bottom-0 right-0 border-l border-border1 z-50 bg-surface4",
-          "w-[calc(100vw-20rem)] max-w-[50rem]",
-          "3xl:max-w-[60rem]",
-          "4xl:max-w-[50%]",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "fixed top-0 bottom-0 right-0 border-l border-border2 z-50 bg-surface2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ",
           {
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4": !isConfirmation,
+            "w-[75vw] 2xl:w-[65vw] 4xl:w-[55vw]": level === 1,
+            "w-[70vw] 2xl:w-[59vw] 4xl:w-[48vw]": level === 2,
+            "w-[65vw] 2xl:w-[53vw] 4xl:w-[41vw]": level === 3,
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-right-1/4 shadow-[-3rem_0_2rem_0_rgba(0,0,0,0.75)]": !isConfirmation,
             "bg-surface2/70": isConfirmation
           },
           className
@@ -11865,15 +11851,15 @@ function SideDialog({
             /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { children: dialogTitle }),
             /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { children: dialogDescription })
           ] }),
-          !isConfirmation && hasCloseButton && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          !isConfirmation && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: cn(
-                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute too-0 left-[-3.5rem] bg-surface4 text-icon4 border-l border-b border-border1",
+                "flex appearance-none items-center justify-center rounded-bl-lg h-[3.5rem] w-[3.5rem] absolute top-0 left-[-3.5rem] bg-surface2 text-icon4 border-l border-b border-border2",
                 "hover:surface5 hover:text-icon5"
               ),
               "aria-label": "Close",
-              children: isConfirmation ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRightIcon, {})
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -11891,125 +11877,97 @@ function SideDialog({
   ] }) });
 }
 
-function SideDialogHeader({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+function MainContentLayout({
+  children,
+  className,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentLayout");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
+      children
+    }
+  );
 }
-
-function SideDialogFooter({ children, onNext, onPrevious, showInnerNav }) {
-  const handleOnNext = () => {
-    onNext?.();
-  };
-  const handleOnPrevious = () => {
-    onPrevious?.();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+function MainContentContent({
+  children,
+  className,
+  isCentered = false,
+  isDivided = false,
+  hasLeftServiceColumn = false,
+  style
+}) {
+  const devStyleRequested = devUIStyleRequested("MainContentContent");
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
-        "flex items-center justify-end gap-[1rem] px-[1.5rem] py-[1rem] min-h-[4rem] border-t border-border1",
+        `grid overflow-y-auto h-full `,
+        `overflow-x-auto min-w-[min-content]`,
         {
-          "justify-between": showInnerNav
-        }
+          "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
+          "grid place-items-center": isCentered,
+          "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
+          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
+          "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+        },
+        className
       ),
-      children: [
-        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem]"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-            "Close"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-            "Next",
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}),
-            "Previous"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-      ]
+      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
+      children
     }
   );
 }
-function SideDialogFooterGroup({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-[1rem]", children });
+function devUIStyleRequested(name) {
+  try {
+    const raw = localStorage.getItem("add-dev-style-to-components");
+    if (!raw) return false;
+    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
+    return components.includes(name);
+  } catch (error) {
+    console.error("Error reading or parsing localStorage:", error);
+    return false;
+  }
+}
+
+function ButtonsGroup({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(`flex gap-2 items-center`, "[&>button]:flex-grow", className), children });
 }
 
-function SideDialogContent({ children, className, isCentered, isFullHeight, variant }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-[3rem] py-[2rem] overflow-y-scroll", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("grid gap-[2rem] max-w-[50rem] w-full mx-auto pb-[1rem] ", {
-        "items-center justify-center h-full content-center": isCentered,
-        "min-h-full": isFullHeight,
-        "content-start": !isFullHeight && !isCentered
-      }),
-      children
-    }
-  ) });
+function Sections({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-[3rem]", className), children });
+}
+
+function SectionRoot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn(`grid gap-[1rem]`, className), children });
+}
+
+function SectionHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: cn("grid items-center grid-cols-[1fr_auto]", className), children });
 }
-function SideDialogSection({ children }) {
+
+function SectionHeading({ headingLevel = "h2", children, className }) {
+  const HeadingTag = headingLevel;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    HeadingTag,
     {
       className: cn(
-        "grid text-[0.875rem] text-icon5 gap-[1rem] justify-items-start",
-        "[&>h3]:text-icon3 [&>h3]:text-[1rem] [&>h3]:font-semibold [&>h3]:border-b [&>h3]:border-border1 [&>h3]:pb-[1rem] [&>h3]:pr-[1rem] [&>h3]:inline-flex [&>h3]:gap-[.5rem] [&>h3]:items-center",
-        "[&>h3>svg]:w-[1em] [&>h3>svg]:h-[1em] [&>h3>svg]:text-icon3"
+        "flex items-center gap-[0.5em] text-[0.9375rem] font-bold text-icon4",
+        "[&>svg]:w-[1.2em] [&>svg]:h-[1.2em] [&>svg]:opacity-50",
+        className
       ),
       children
     }
   );
 }
-function SideDialogKeyValueList({ items, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-[2rem] gap-y-[.5rem] text-[0.875rem] content-start", className), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-icon3", children: [
-      item.key,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-icon4", children: item.value })
-  ] })) });
-}
 
-function SideDialogTop({ children, onNext, onPrevious, showInnerNav, className }) {
-  const handleOnNext = () => {
-    onNext?.();
-  };
-  const handleOnPrevious = () => {
-    onPrevious?.();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(`flex justify-between h-[3.5rem] items-center  text-icon5 text-[.875rem] pl-[1.5rem]`, className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-[2rem]", "[&_svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon3"), children: [
-        children,
-        (onNext || onPrevious) && showInnerNav && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-icon3", children: "|" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "flex gap-[1rem] items-baseline"
-                // '[&>button]:text-[0.875rem] [&>button]:flex [&>button]:items-center [&>button]:px-[0.5rem] [&>button]:py-[0.8rem] [&>button]:leading-[1]',
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
-                  "Previous",
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
-                  "Next",
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
-                ] })
-              ]
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
+const Section = Object.assign(SectionRoot, {
+  Header: SectionHeader,
+  Heading: SectionHeading
+});
 
 const useCodemirrorTheme = () => {
   return React.useMemo(
@@ -12027,7 +11985,7 @@ const useCodemirrorTheme = () => {
     []
   );
 };
-function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
+function SideDialogCodeSection({ codeStr = "", title, icon, simplified = false }) {
   const theme = useCodemirrorTheme();
   const [showAsMultilineText, setShowAsMultilineText] = React.useState(false);
   const hasMultilineText = React.useMemo(() => {
@@ -12039,22 +11997,19 @@ function SideDialogCodeSection({ codeStr = "", title, simplified = false }) {
     }
   }, [codeStr]);
   const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "border border-border1 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border1 last:border-b-0 grid", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1rem] px-[1.5rem] border-b border-border1 grid grid-cols-[1fr_auto]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center justify-end", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Section.Header, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+        icon,
+        title
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { content: codeStr || "No content" }),
         hasMultilineText && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", onClick: () => setShowAsMultilineText(!showAsMultilineText), children: showAsMultilineText ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeftIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustifyIcon, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn("bg-surface3 p-[1rem] overflow-auto text-icon4 text-[0.875rem] [&>div]:border-none break-all"),
-        children: codeStr && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: simplified ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 text-[0.875rem] py-[1rem] font-mono break-all mx-[1.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping], theme, value: finalCodeStr }) })
-      }
-    )
-  ] }) });
+    codeStr && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/20 p-[1rem] overflow-hidden rounded-xl border border-white/10 text-icon4 text-[0.875rem] break-all", children: simplified ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-icon4 font-mono break-all px-[0.5rem]", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: codeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeMirror, { extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping], theme, value: finalCodeStr }) })
+  ] });
 }
 function containsInnerNewline(obj) {
   if (typeof obj === "string") {
@@ -12087,6 +12042,69 @@ function SideDialogHeading({ children, className, as = "h1" }) {
   );
 }
 
+function SideDialogContent({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-[1.5rem] pl-[2.25rem] overflow-y-scroll grid gap-[1.5rem] content-start", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-[1.5rem] mb-[2rem] "), children }) });
+}
+
+function SideDialogHeader({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-between items-center pb-[1rem]", className), children });
+}
+
+function SideDialogTop({ children, withTopSeparator, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        `flex h-[3.5rem] items-center text-icon5 text-[.875rem] pl-[1.5rem] relative gap-[1rem]`,
+        '[&:after]:content-[""] [&:after]:absolute [&:after]:left-[1.5rem] [&:after]:right-[1.5rem] [&:after]:bottom-0 [&:after]:border-b [&:after]:border-border1',
+        {
+          '[&:before]:content-[""] [&:before]:absolute [&:before]:left-[1.5rem] [&:before]:right-[1.5rem] [&:before]:top-0 [&:before]:border-t [&:before]:border-border1': withTopSeparator
+        },
+        className
+      ),
+      children
+    }
+  );
+}
+
+function SideDialogNav({ onNext, onPrevious, className }) {
+  const handleOnNext = () => {
+    onNext?.();
+  };
+  const handleOnPrevious = () => {
+    onPrevious?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-[1rem]",
+        "[&_svg]:w-[1.1em] [&_svg]:h-[1.1em] [&_svg]:text-icon3",
+        className
+      ),
+      children: (onNext || onPrevious) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-[1rem] items-baseline"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnPrevious, disabled: !onPrevious, variant: "ghost", children: [
+          "Previous",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {})
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleOnNext, disabled: !onNext, variant: "ghost", children: [
+          "Next",
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {})
+        ] })
+      ] })
+    }
+  );
+}
+
+const SideDialog = Object.assign(SideDialogRoot, {
+  Top: SideDialogTop,
+  Header: SideDialogHeader,
+  Heading: SideDialogHeading,
+  Content: SideDialogContent,
+  CodeSection: SideDialogCodeSection,
+  Nav: SideDialogNav
+});
+
 function EntityMainHeader({
   title,
   description,
@@ -12501,7 +12519,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
@@ -12514,85 +12532,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] = React.useState(isVisible);
+  React.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]);
+  React.useEffect(() => {
+    setLocalIsVisible(isVisible);
+  }, [isVisible]);
+  if (!localIsVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-[1fr_auto] gap-[0.5rem] rounded-l bg-white/5 p-[1.5rem] py-[1rem] text-[0.875rem] text-icon3 items-center",
+        "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-[0.5rem] items-center", children }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => setLocalIsVisible(false), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Dismiss" })
+        ] })
+      ]
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: scoresListColumns }),
-      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scores.map((score) => {
-        const createdAtDate = new Date(score.createdAt);
-        const isTodayDate = dateFns.isToday(createdAtDate);
-        const entry = {
-          id: score.id,
-          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
-          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
-          input: JSON.stringify(score?.input),
-          entityId: score.entityId,
-          score: score.score
-        };
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          EntryList.Entry,
-          {
-            entry,
-            isSelected: selectedScoreId === score.id,
-            columns: scoresListColumns,
-            onClick: onScoreClick,
-            children: scoresListColumns.map((col, index) => {
-              const key = `${index}-${score.id}`;
-              return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
-            })
-          },
-          entry.id
-        );
-      }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      EntryList.Pagination,
-      {
-        currentPage: pagination?.page || 0,
-        onNextPage: handleNextPage,
-        onPrevPage: handlePrevPage,
-        hasMore: scoresHasMore
-      }
-    )
-  ] });
+  );
 }
 
-function ScoreDialog({
-  scorer,
-  score,
-  isOpen,
+function MainSidebarNavSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "min-h-[1.3rem] relative",
+        '[&:after]:content-[""] [&:after]:block [&:after]:absolute [&:after]:h-[0px] [&:after]:border-border1 [&:after]:border-t [&:after]:top-[48%] [&:after]:left-[0.75rem] [&:after]:right-[0.75rem]',
+        className
+      )
+    }
+  );
+}
+
+function MainSidebarRoot({ children, className }) {
+  const { state, toggleSidebar } = useMainSidebar();
+  const isCollapsed = state === "collapsed";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full px-[1rem] pb-[1rem] relative overflow-y-auto",
+        {
+          "lg:min-w-[13rem] xl:min-w-[14rem] 2xl:min-w-[15rem] 3xl:min-w-[16rem] 4xl:min-w-[17rem]": !isCollapsed
+        },
+        className
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: toggleSidebar,
+            className: cn(
+              "inline-flex  w-auto items-center text-icon3 h-[2rem] px-[0.75rem] rounded-md",
+              "hover:bg-surface4",
+              "[&_svg]:w-[1rem] [&_svg]:h-[1rem] [&_svg]:text-icon3",
+              {
+                "ml-auto": !isCollapsed
+              }
+            ),
+            "aria-label": "Toggle sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            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__ */ jsxRuntime.jsx("div", { className: cn("mt-auto", className), children });
+}
+
+function MainSidebarNav({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("", className), children });
+}
+
+function MainSidebarNavSection({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("grid items-start content-center relative", className), children });
+}
+
+function MainSidebarNavLink({
+  link,
+  state = "default",
+  children,
+  isActive,
+  className
+}) {
+  const { Link } = useLinkComponent();
+  const isDefaultState = state === "default";
+  const isFeatured = link?.variant === "featured";
+  const linkParams = link?.url?.startsWith("http") ? { target: "_blank", rel: "noreferrer" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "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__ */ jsxRuntime.jsxs(Link, { href: link.url, ...linkParams, children: [
+        isDefaultState ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: link.icon && link.icon }) : /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: link.icon && link.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", align: "center", className: "bg-border1 text-icon6 ml-[1rem]", children: link.name })
+        ] }),
+        isDefaultState ? link.name : /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: link.name }),
+        " ",
+        children
+      ] }) : children
+    }
+  );
+}
+
+function MainSidebarNavHeader({ children, className, state = "default" }) {
+  const isDefaultState = state === "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-[auto_1fr] items-center min-h-[2.8rem] ", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "header",
+      {
+        className: cn("text-[0.6875rem] uppercase text-icon3/75 tracking-widest", {
+          "pl-[0.75rem]": isDefaultState
+        }),
+        children: isDefaultState ? children : /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {})
+  ] });
+}
+
+function MainSidebarNavList({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("grid gap-[0.25rem] items-start content-center ", className), children });
+}
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const MainSidebarContext = React.createContext(null);
+function useMainSidebar() {
+  const context = React.useContext(MainSidebarContext);
+  if (!context) {
+    throw new Error("useMainSidebar must be used within a MainSidebarProvider.");
+  }
+  return context;
+}
+function stateInitializer() {
+  const storedState = window.localStorage.getItem(SIDEBAR_COOKIE_NAME);
+  return storedState === "collapsed" ? "collapsed" : "default";
+}
+const setLocalStorage = (value) => {
+  window.localStorage.setItem(SIDEBAR_COOKIE_NAME, value.toString());
+};
+function MainSidebarProvider({ children }) {
+  const [state, setState] = React.useState(stateInitializer);
+  const toggleSidebar = React.useCallback(() => {
+    setLocalStorage(state === "default" ? "collapsed" : "default");
+    setState(state === "default" ? "collapsed" : "default");
+  }, [state]);
+  const contextValue = React.useMemo(
+    () => ({
+      state,
+      toggleSidebar
+    }),
+    [state, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MainSidebarContext.Provider, { value: contextValue, children });
+}
+
+const MainSidebar = Object.assign(MainSidebarRoot, {
+  Bottom: MainSidebarBottom,
+  Nav: MainSidebarNav,
+  NavSection: MainSidebarNavSection,
+  NavLink: MainSidebarNavLink,
+  NavHeader: MainSidebarNavHeader,
+  NavList: MainSidebarNavList,
+  NavSeparator: MainSidebarNavSeparator
+});
+
+const scoresListColumns = [
+  { name: "date", label: "Date", size: "4.5rem" },
+  { name: "time", label: "Time", size: "6.5rem" },
+  { name: "input", label: "Input", size: "1fr" },
+  { name: "entityId", label: "Entity", size: "10rem" },
+  { name: "score", label: "Score", size: "3rem" }
+];
+function ScoresList({
+  scores,
+  pagination,
+  onScoreClick,
+  onPageChange,
+  errorMsg,
+  selectedScoreId
+}) {
+  if (!scores) {
+    return null;
+  }
+  const scoresHasMore = pagination?.hasMore;
+  const handleNextPage = () => {
+    if (scoresHasMore) {
+      onPageChange?.(pagination.page + 1);
+    }
+  };
+  const handlePrevPage = () => {
+    if (pagination?.page && pagination.page > 0) {
+      onPageChange?.(pagination.page - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: scoresListColumns }),
+      errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: errorMsg, type: "error" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scores.map((score) => {
+        const createdAtDate = new Date(score.createdAt);
+        const isTodayDate = dateFns.isToday(createdAtDate);
+        const entry = {
+          id: score.id,
+          date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+          time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+          input: JSON.stringify(score?.input),
+          entityId: score.entityId,
+          score: score.score
+        };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EntryList.Entry,
+          {
+            entry,
+            isSelected: selectedScoreId === score.id,
+            columns: scoresListColumns,
+            onClick: onScoreClick,
+            children: scoresListColumns.map((col, index) => {
+              const key = `${index}-${score.id}`;
+              return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+            })
+          },
+          entry.id
+        );
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores for this scorer yet" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EntryList.Pagination,
+      {
+        currentPage: pagination?.page || 0,
+        onNextPage: handleNextPage,
+        onPrevPage: handlePrevPage,
+        hasMore: scoresHasMore
+      }
+    )
+  ] });
+}
+
+function ScoreDialog({
+  score,
+  scorerName,
+  isOpen,
   onClose,
   onNext,
   onPrevious,
-  computeTraceLink
+  computeTraceLink,
+  dialogLevel = 1,
+  usageContext = "scorerPage"
 }) {
   const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12602,77 +12839,144 @@ function ScoreDialog({
       dialogDescription: "View and analyze score details",
       isOpen,
       onClose,
-      className: cn("w-[calc(100vw-20rem)] max-w-[80%]", "3xl:max-w-[65%]", "4xl:max-w-[55%]"),
+      level: dialogLevel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+          usageContext === "scorerPage" && /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
             " ",
-            scorer?.config?.name
+            scorerName
+          ] }),
+          usageContext === "aiSpanDialog" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+              " ",
+              getShortId(score?.traceId)
+            ] }),
+            score?.spanId && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              "›",
+              /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+                getShortId(score?.spanId)
+              ] })
+            ] })
           ] }),
           "›",
           /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-            score?.id
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-          score?.traceId && /* @__PURE__ */ jsxRuntime.jsx(
-            KeyValueList,
-            {
-              data: [
-                {
-                  label: "Trace ID",
-                  value: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }),
-                  key: "traceId"
-                },
-                ...score?.spanId ? [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalculatorIcon, {}),
+            getShortId(score?.id)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalculatorIcon, {}),
+              " Score"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+              " ",
+              score?.id
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              KeyValueList,
+              {
+                data: [
+                  ...usageContext === "aiSpanDialog" ? [
+                    {
+                      label: "Scorer",
+                      value: score?.scorer?.name || "-",
+                      key: "scorer-name"
+                    }
+                  ] : [],
                   {
-                    label: "Span ID",
-                    value: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }),
-                    key: "spanId"
-                  }
-                ] : []
-              ],
-              LinkComponent: Link
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
-              codeStr: score?.reason,
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(score?.input || null, null, 2) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(score?.output || null, null, 2) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Preprocess Prompt",
-              codeStr: score?.preprocessPrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Analyze Prompt", codeStr: score?.analyzePrompt || "null", simplified: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Score Prompt",
-              codeStr: score?.generateScorePrompt || "null",
-              simplified: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SideDialogCodeSection,
-            {
-              title: "Generate Reason Prompt",
-              codeStr: score?.generateReasonPrompt || "null",
-              simplified: true
-            }
-          )
-        ] }) })
+                    label: "Created at",
+                    value: score?.createdAt ? format.format(new Date(score?.createdAt), "MMM d, h:mm:ss aaa") : "n/a",
+                    key: "date"
+                  },
+                  ...usageContext !== "aiSpanDialog" ? [
+                    {
+                      label: "Trace ID",
+                      value: score?.traceId ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId), children: score?.traceId }) : "n/a",
+                      key: "traceId"
+                    },
+                    {
+                      label: "Span ID",
+                      value: score?.traceId && score?.spanId ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: computeTraceLink(score?.traceId, score?.spanId), children: score?.spanId }) : "n/a",
+                      key: "spanId"
+                    }
+                  ] : []
+                ],
+                LinkComponent: Link
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: `Score: ${Number.isNaN(score?.score) ? "n/a" : score?.score}`,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
+                codeStr: score?.reason || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Input",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+                codeStr: JSON.stringify(score?.input || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Output",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+                codeStr: JSON.stringify(score?.output || null, null, 2)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Preprocess Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.preprocessPrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Analyze Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.analyzePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Score Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.generateScorePrompt || "null",
+                simplified: true
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SideDialog.CodeSection,
+              {
+                title: "Generate Reason Prompt",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ReceiptText, {}),
+                codeStr: score?.generateReasonPrompt || "null",
+                simplified: true
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -12813,7 +13117,7 @@ function ScorersTable({ scorers, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyScorersTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.scorer.config.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search scorers", placeholder: "Search scorers" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ScorersTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.index === 0 ? "auto" : header.column.getSize() }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -12849,6 +13153,18 @@ const EmptyScorersTable = () => /* @__PURE__ */ jsxRuntime.jsx("div", { classNam
   }
 ) });
 
+const useTraceSpanScores = ({ traceId = "", spanId = "", page }) => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useQuery({
+    queryKey: ["trace-span-scores", traceId, spanId, page],
+    queryFn: () => client.getScoresBySpan({ traceId, spanId, page: page || 0, perPage: 10 }),
+    enabled: !!traceId && !!spanId,
+    refetchInterval: 3e3,
+    gcTime: 0,
+    staleTime: 0
+  });
+};
+
 const AgentMetadataModelSwitcher = ({
   defaultProvider,
   defaultModel,
@@ -13095,6 +13411,7 @@ const AgentMetadataModelSwitcher = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
+                  "aria-label": "Search providers",
                   spellCheck: "false",
                   ref: providerInputRef,
                   className: `w-full ${!isSearchingProvider && currentModelProvider ? "pl-8 pr-8" : ""}`,
@@ -13133,20 +13450,6 @@ const AgentMetadataModelSwitcher = ({
                             handleProviderSelect(provider);
                           }
                           break;
-                        case "Tab":
-                          if (!e.shiftKey) {
-                            e.preventDefault();
-                            if (highlightedProviderIndex >= 0 && highlightedProviderIndex < filteredProviders2.length) {
-                              const provider = filteredProviders2[highlightedProviderIndex];
-                              handleProviderSelect(provider);
-                            } else {
-                              setShowProviderSuggestions(false);
-                              setIsSearchingProvider(false);
-                              setProviderSearch("");
-                              setHighlightedProviderIndex(-1);
-                            }
-                          }
-                          break;
                         case "Escape":
                           e.preventDefault();
                           setIsSearchingProvider(false);
@@ -13155,8 +13458,6 @@ const AgentMetadataModelSwitcher = ({
                           setShowProviderSuggestions(false);
                           break;
                       }
-                    } else if (e.key === "Tab") {
-                      return;
                     }
                   },
                   onFocus: () => {
@@ -13248,6 +13549,7 @@ const AgentMetadataModelSwitcher = ({
             /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
+                "aria-label": "Search models",
                 spellCheck: "false",
                 ref: modelInputRef,
                 className: "w-full xl:w-3/5",
@@ -13300,7 +13602,6 @@ const AgentMetadataModelSwitcher = ({
                       }, 0);
                       break;
                     case "Enter":
-                    case "Tab":
                       e.preventDefault();
                       if (highlightedModelIndex >= 0 && highlightedModelIndex < filteredModels.length) {
                         const model = filteredModels[highlightedModelIndex];
@@ -13545,7 +13846,7 @@ const AgentMetadataNetworkList = ({ agents }) => {
   if (agents.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No agents" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentLink(agent.id), "data-testid": "agent-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "success", icon: /* @__PURE__ */ jsxRuntime.jsx(AgentIcon, {}), children: agent.name }) }) }, agent.id)) });
 };
 const AgentMetadata = ({
   agentId,
@@ -13601,7 +13902,10 @@ const AgentMetadata = ({
           link: "https://mastra.ai/en/docs/agents/agent-memory",
           title: "Agent Memory documentation"
         },
-        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: "On" }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
+        children: hasMemoryEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(MemoryIcon, {}), variant: "success", className: "font-medium", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Memory is enabled" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "On" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Alert$1, { variant: "warning", children: [
           /* @__PURE__ */ jsxRuntime.jsx(AlertTitle$1, { as: "h5", children: "Memory not enabled" }),
           /* @__PURE__ */ jsxRuntime.jsxs(AlertDescription$1, { as: "p", children: [
             "Thread messages will not be stored. To activate memory, see the",
@@ -13663,14 +13967,14 @@ const AgentMetadataToolList = ({ tools, agentId }) => {
   if (tools.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No tools" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentToolLink(agentId, tool.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.agentToolLink(agentId, tool.id), "data-testid": "tool-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(ToolsIcon, { className: "text-[#ECB047]" }), children: tool.id }) }) }, tool.id)) });
 };
 const AgentMetadataWorkflowList = ({ workflows }) => {
   const { Link, paths } = useLinkComponent();
   if (workflows.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No workflows" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(workflow.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: workflows.map((workflow) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.workflowLink(workflow.id), "data-testid": "workflow-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(WorkflowIcon, { className: "text-accent3" }), children: workflow.name }) }) }, workflow.id)) });
 };
 const AgentMetadataScorerList = ({ entityId, entityType }) => {
   const { Link, paths } = useLinkComponent();
@@ -13688,7 +13992,7 @@ const AgentMetadataScorerList = ({ entityId, entityType }) => {
   if (scorerList.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No Scorers" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: paths.scorerLink(scorer.id), "data-testid": "scorer-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, { className: "text-icon3" }), children: scorer.scorer.config.name }) }) }, scorer.id)) });
 };
 
 const AgentMetadataPrompt = ({ prompt }) => {
@@ -13983,7 +14287,7 @@ function ToolTable({ tools, agents, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyToolsTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.id.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search tools", placeholder: "Search tools" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ToolTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -15694,6 +15998,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center text-[0.875rem] gap-[1rem] bg-surface3/50 rounded-md p-[1.5rem] justify-center text-icon3",
+        "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        " Loading Trace Timeline ..."
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("grid items-start content-start gap-y-[2px] overflow-hidden", "xl:gap-x-[1rem] xl:py-[1rem]", {
+        "xl:grid-cols-[3fr_auto]": !overallEndTime,
+        "xl:grid-cols-[3fr_2fr]": overallEndTime
+      }),
+      children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
+        TraceTimelineSpan,
+        {
+          span,
+          onSpanClick,
+          selectedSpanId,
+          overallLatency,
+          overallStartTime,
+          overallEndTime
+        },
+        span.id
+      ))
+    }
+  ) });
+}
+
 function TraceTimelineLegend({ spans = [] }) {
   const activeSpanTypes = spanTypePrefixes.filter(
     (typePrefix) => spans.some((span) => span?.spanType?.startsWith(typePrefix))
@@ -15707,65 +16050,6 @@ function TraceTimelineLegend({ spans = [] }) {
   }) });
 }
 
-function TraceTimeline({
-  spans = [],
-  hierarchicalSpans = [],
-  onSpanClick,
-  selectedSpanId,
-  isLoading,
-  className
-}) {
-  const overallLatency = hierarchicalSpans?.[0]?.latency || 0;
-  const overallStartTime = hierarchicalSpans?.[0]?.startTime || "";
-  const overallEndTime = hierarchicalSpans?.[0]?.endTime || "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-[1rem]", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
-        " Timeline"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center text-[0.875rem] gap-[1rem] bg-surface3/50 rounded-md p-[1.5rem] mr-[1.5rem] justify-center text-icon3 mt-[.5rem]",
-          "[&_svg]:w-[1.25em] [&_svg]:h-[1.25em] [&_svg]:opacity-50"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-          " Loading Trace Timeline ..."
-        ]
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "grid items-start content-start gap-y-[2px] bg-surface2 rounded-lg overflow-hidden pl-[1.5rem] py-[1.5rem]",
-          "xl:gap-x-[1rem] xl:py-[1rem]",
-          {
-            "xl:grid-cols-[3fr_auto]": !overallEndTime,
-            "xl:grid-cols-[3fr_2fr]": overallEndTime
-          }
-        ),
-        children: hierarchicalSpans?.map((span) => /* @__PURE__ */ jsxRuntime.jsx(
-          TraceTimelineSpan,
-          {
-            span,
-            onSpanClick,
-            selectedSpanId,
-            overallLatency,
-            overallStartTime,
-            overallEndTime
-          },
-          span.id
-        ))
-      }
-    )
-  ] });
-}
-
 function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
   if (!traceUsage && !spanUsage) {
     console.warn("No usage data available");
@@ -15878,12 +16162,11 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
       icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CoinsIcon, {})
     }
   };
-  let tokenPresentations = {};
-  if (hasV5Format) {
-    tokenPresentations = { ...commonTokenPresentations, ...v5TokenPresentations };
-  } else {
-    tokenPresentations = { ...commonTokenPresentations, ...legacyTokenPresentations };
-  }
+  let tokenPresentations = {
+    ...commonTokenPresentations,
+    ...v5TokenPresentations,
+    ...legacyTokenPresentations
+  };
   let usageKeyOrder = [];
   if (hasV5Format) {
     usageKeyOrder = ["totalTokens", "inputTokens", "outputTokens", "reasoningTokens", "cachedInputTokens"];
@@ -15891,55 +16174,42 @@ function TraceSpanUsage({ traceUsage, traceSpans = [], spanUsage, className }) {
     usageKeyOrder = ["totalTokens", "promptTokens", "completionTokens"];
   }
   const usageAsArray = Object.entries(traceUsage || spanUsage || {}).map(([key, value]) => ({ key, value })).sort((a, b) => usageKeyOrder.indexOf(a.key) - usageKeyOrder.indexOf(b.key));
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-[1.5rem] flex-wrap", className), children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cn(
-        "grid gap-[1.5rem]",
-        {
-          "xl:grid-cols-3": usageAsArray.length === 3,
-          "xl:grid-cols-2": usageAsArray.length === 2
-        },
-        className
-      ),
-      children: usageAsArray.map(({ key, value }) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn("bg-white/5 p-[1rem] px-[1.25rem] rounded-lg text-[0.875rem]", {
-            "min-h-[5.5rem]": traceUsage
-          }),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: cn(
-                  "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
-                  "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
-                ),
-                children: [
-                  tokenPresentations?.[key]?.icon,
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-[1rem]", children: value })
-                ]
-              }
+      className: cn("bg-white/5 p-[.75rem] px-[1rem] rounded-lg text-[0.875rem] flex-grow", {
+        "min-h-[5.5rem]": traceUsage
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-[1.5rem_1fr_auto] gap-[.5rem] items-center",
+              "[&>svg]:w-[1.5em] [&>svg]:h-[1.5em] [&>svg]:opacity-70"
             ),
-            tokensByProviderValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem] ", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "dl",
-              {
-                className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("dt", { children: provider }),
-                  /* @__PURE__ */ jsxRuntime.jsx("dd", { children: providerTokens?.[key] })
-                ]
-              },
-              provider
-            )) })
-          ]
-        },
-        key
-      ))
-    }
-  );
+            children: [
+              tokenPresentations?.[key]?.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.875rem]", children: tokenPresentations?.[key]?.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "text-[1rem]", children: value })
+            ]
+          }
+        ),
+        tokensByProviderValid && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[0.875rem] mt-[0.5rem] pl-[2rem]", children: Object.entries(tokensByProvider).map(([provider, providerTokens]) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "dl",
+          {
+            className: "grid grid-cols-[1fr_auto] gap-x-[1rem] gap-y-[.25rem]  justify-between text-icon3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("dt", { children: provider }),
+              /* @__PURE__ */ jsxRuntime.jsx("dd", { children: providerTokens?.[key] })
+            ]
+          },
+          provider
+        )) })
+      ]
+    },
+    key
+  )) });
 }
 
 function useTraceInfo(trace) {
@@ -16022,253 +16292,199 @@ function getSpanInfo({ span, withTraceId = true, withSpanId = true }) {
   return baseInfo;
 }
 
-const ScoreTable = ({ scores, onItemClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Thead, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Type" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Scorer" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Score" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Th, { children: "Created At" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Tbody, { children: scores.map((score) => /* @__PURE__ */ jsxRuntime.jsxs(Row, { onClick: () => onItemClick(score.scorerName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { children: score.type }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: score.scorerName }),
-      /* @__PURE__ */ jsxRuntime.jsx(TxtCell, { children: score.score }),
-      /* @__PURE__ */ jsxRuntime.jsx(DateTimeCell, { dateTime: new Date(score.createdAt) })
-    ] }, score.scoreId)) })
-  ] });
+const TabsRoot = ({
+  children,
+  defaultTab,
+  value,
+  onValueChange,
+  className
+}) => {
+  const [internalTab, setInternalTab] = React.useState(defaultTab);
+  const isControlled = value !== void 0 && onValueChange !== void 0;
+  const currentTab = isControlled ? value : internalTab;
+  const handleTabChange = (newValue) => {
+    const typedValue = newValue;
+    if (isControlled) {
+      onValueChange(typedValue);
+    } else {
+      setInternalTab(typedValue);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      value: currentTab,
+      onValueChange: handleTabChange,
+      className: cn("grid gap-[3rem] overflow-y-auto", className),
+      children
+    }
+  );
 };
 
-function SpanDetails({ span, onScorerTriggered }) {
-  if (!span) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[1.5rem] mb-[2rem]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Input", codeStr: JSON.stringify(span.input || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Output", codeStr: JSON.stringify(span.output || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Metadata", codeStr: JSON.stringify(span.metadata || null, null, 2) }),
-    /* @__PURE__ */ jsxRuntime.jsx(SideDialogCodeSection, { title: "Attributes", codeStr: JSON.stringify(span.attributes || null, null, 2) }),
-    span?.links?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
-        " Scores"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ScoreTable,
+const TabList = ({ children, variant = "default", className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      className: cn(
+        "flex items-center",
         {
-          scores: span?.links,
-          onItemClick: (scorerName) => onScorerTriggered(scorerName, span.traceId, span.spanId)
-        }
-      ) })
-    ] })
-  ] });
-}
+          // variant: default
+          "text-[0.9375rem]": variant === "default",
+          "[&>button]:py-[0.5rem] [&>button]:px-[1.5rem] [&>button]:font-normal [&>button]:text-icon3 [&>button]:flex-1 [&>button]:border-b [&>button]:border-border1": variant === "default",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:transition-colors [&>button[data-state=active]]:duration-200 [&>button[data-state=active]]:border-icon3": variant === "default",
+          // variant: buttons
+          "border border-border1 flex justify-stretch rounded-md overflow-hidden text-[0.875rem] min-h-[2.5rem]": variant === "buttons",
+          "[&>button]:flex-1 [&>button]:py-[0.5rem] [&>button]:px-[1rem] [&>button]:text-icon3": variant === "buttons",
+          "[&>button[data-state=active]]:text-icon5 [&>button[data-state=active]]:bg-[#222]": variant === "buttons"
+        },
+        className
+      ),
+      children
+    }
+  ) });
+};
 
-const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
-const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-const DropdownMenuTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { ref, className: cn("cursor-pointer focus-visible:rounded", className), ...props, children }));
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive__namespace.Trigger.displayName;
-const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto -rotate-90" })
-    ]
-  }
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.SubContent,
-  {
-    ref,
-    className: cn(
-      "popover-background data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] overflow-auto overflow-x-hidden rounded-none p-1",
-      className
-    ),
-    ...props
-  }
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
-const DropdownMenuContent = React__namespace.forwardRef(({ className, container, sideOffset = 4, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuPrimitive__namespace.Content,
+const Tab = ({ children, value, onClick, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, className: cn("hover:text-icon5", className), onClick, children });
+};
+
+const TabContent = ({ children, value, className }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
     {
-      ref,
-      sideOffset,
-      className: clsx(
-        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 bg-surface2 text-icon3 border-sm border-border1 z-50 min-w-[8rem] overflow-auto rounded-md p-1 shadow-md",
+      value,
+      className: cn(
+        "grid overflow-y-auto ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:none",
         className
       ),
-      ...props
+      children
     }
-  ) });
+  );
+};
+
+const Tabs = Object.assign(TabsRoot, {
+  List: TabList,
+  Tab,
+  Content: TabContent
 });
-DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-const DropdownMenuItem = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "focus:text-accent-foreground relative flex cursor-default cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 font-sans text-[0.8125rem] transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:truncate",
-      inset && "pl-8",
-      className
-    ),
-    ...props
+
+function SpanDetails({ span }) {
+  if (!span) {
+    return null;
   }
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
-const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default cursor-pointer select-none items-center gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Input",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileInputIcon, {}),
+        codeStr: JSON.stringify(span.input || null, null, 2)
+      }
     ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-sm border-border1 flex h-4 w-4 items-center justify-center rounded-sm", children: checked && /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DropdownMenuPrimitive__namespace.RadioItem,
-  {
-    ref,
-    className: cn(
-      "focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition-colors focus:bg-[#66686A]/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Output",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileOutputIcon, {}),
+        codeStr: JSON.stringify(span.output || null, null, 2)
+      }
     ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
-const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
-    ...props
-  }
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Separator,
-  {
-    ref,
-    className: cn("popover-dividers-bg -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
-const DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-function Dropdown({
-  open,
-  onOpenChange,
-  children,
-  modal
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, { modal, open, onOpenChange, children });
-}
-Dropdown.Trigger = DropdownMenuTrigger;
-Dropdown.Content = DropdownMenuContent;
-Dropdown.Group = DropdownMenuGroup;
-Dropdown.Portal = DropdownMenuPortal;
-Dropdown.Item = DropdownMenuItem;
-Dropdown.CheckboxItem = DropdownMenuCheckboxItem;
-Dropdown.RadioItem = DropdownMenuRadioItem;
-Dropdown.Label = DropdownMenuLabel;
-Dropdown.Separator = DropdownMenuSeparator;
-Dropdown.Shortcut = DropdownMenuShortcut;
-Dropdown.Sub = DropdownMenuSub;
-Dropdown.SubContent = DropdownMenuSubContent;
-Dropdown.SubTrigger = DropdownMenuSubTrigger;
-Dropdown.RadioGroup = DropdownMenuRadioGroup;
-
-const useTriggerScorer = (onScorerTriggered) => {
-  const client = react$3.useMastraClient();
-  return reactQuery.useMutation({
-    mutationFn: async ({ scorerName, traceId, spanId }) => {
-      const response = await client.score({
-        scorerName,
-        targets: [{ traceId, spanId }]
-      });
-      return response;
-    },
-    onSuccess: (_, variables) => {
-      sonner.toast.success("Scorer triggered successfully");
-      onScorerTriggered(variables.scorerName, variables.traceId, variables.spanId);
-    },
-    onError: () => {
-      sonner.toast.error("Error triggering scorer");
-    }
-  });
-};
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Metadata",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+        codeStr: JSON.stringify(span.metadata || null, null, 2)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SideDialog.CodeSection,
+      {
+        title: "Attributes",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BracesIcon, {}),
+        codeStr: JSON.stringify(span.attributes || null, null, 2)
+      }
+    )
+  ] });
+}
 
-const ScorersDropdown = ({ trace, spanId, onScorerTriggered, entityType }) => {
-  const { data: scorers = {}, isLoading } = useScorers();
-  const { mutate: triggerScorer, isPending } = useTriggerScorer(onScorerTriggered);
-  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
-    id: key,
-    name: scorer.scorer.config.name,
-    description: scorer.scorer.config.description,
-    isRegistered: scorer.isRegistered,
-    type: scorer.scorer.config.type
-  })).filter((scorer) => scorer.isRegistered);
-  if (entityType !== "Agent" || spanId) {
-    scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
+function SpanTabs({
+  trace,
+  span,
+  spanScoresData,
+  onSpanScoresPageChange,
+  isLoadingSpanScoresData,
+  spanInfo = [],
+  defaultActiveTab = "details",
+  initialScoreId,
+  computeTraceLink
+}) {
+  const { Link } = useLinkComponent();
+  let entityType;
+  if (span?.attributes?.agentId) {
+    entityType = "Agent";
+  } else if (span?.attributes?.workflowId) {
+    entityType = "Workflow";
   }
-  const isWaiting = isPending || isLoading;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button$1, { variant: "light", disabled: isWaiting, children: [
-      isWaiting ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}) }),
-      "Run scorer",
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultTab: defaultActiveTab, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Tabs.List, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tabs.Tab, { value: "details", children: "Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tabs.Tab, { value: "scores", children: [
+        "Scoring ",
+        spanScoresData?.pagination && `(${spanScoresData.pagination.total || 0})`
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "details", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+      span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage }),
+      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link }),
+      /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { children: scorerList.map((scorer) => /* @__PURE__ */ jsxRuntime.jsx(
-      Dropdown.Item,
-      {
-        onClick: () => triggerScorer({ scorerName: scorer.name, traceId: trace.traceId, spanId }),
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: scorer.name })
-      },
-      scorer.id
-    )) })
+    /* @__PURE__ */ jsxRuntime.jsx(Tabs.Content, { value: "scores", children: /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+          " Scoring"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SpanScoring, { traceId: trace?.traceId, spanId: span?.spanId, entityType })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Section.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+          " Scores"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SpanScoreList,
+          {
+            scoresData: spanScoresData,
+            onPageChange: onSpanScoresPageChange,
+            isLoadingScoresData: isLoadingSpanScoresData,
+            initialScoreId,
+            traceId: trace?.traceId,
+            spanId: span?.spanId,
+            computeTraceLink
+          }
+        )
+      ] })
+    ] }) })
   ] });
-};
+}
 
 function SpanDialog({
   trace,
   span,
+  spanScoresData,
+  onSpanScoresPageChange,
+  isLoadingSpanScoresData,
   isOpen,
   onClose,
   onNext,
   onPrevious,
   onViewToggle,
   spanInfo = [],
-  onScorerTriggered
+  defaultActiveTab = "details",
+  initialScoreId,
+  computeTraceLink
 }) {
-  const { Link } = useLinkComponent();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SideDialog,
     {
@@ -16276,43 +16492,53 @@ function SpanDialog({
       dialogDescription: "View and analyze span details",
       isOpen,
       onClose,
-      hasCloseButton: true,
-      className: cn("w-[calc(100vw-25rem)] max-w-[65%]", "3xl:max-w-[50%]", "4xl:max-w-[40%]"),
+      level: 2,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pr-[1.5rem]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+            " ",
+            getShortId(span?.traceId)
+          ] }),
+          "›",
+          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+            getShortId(span?.spanId)
+          ] }),
+          "|",
+          /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "ml-auto mr-[2rem]", onClick: onViewToggle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelTopIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Switch to dialog view" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
               " ",
-              getShortId(span?.traceId)
+              span?.name
             ] }),
-            "›",
             /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-              getShortId(span?.spanId)
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+              " ",
+              span?.spanId
             ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: onViewToggle, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelTopIcon, {}) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-[1.5rem] px-[2.5rem] overflow-y-auto grid gap-[1.5rem] content-start", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "flex gap-[1rem] items-baseline pr-[2.5rem]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-                " ",
-                span?.name
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-                " ",
-                span?.spanId
-              ] })
-            ] }),
-            span?.traceId && span?.spanId && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ScorersDropdown, { trace, spanId: span?.spanId, onScorerTriggered }) })
           ] }),
-          span?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(TraceSpanUsage, { spanUsage: span.attributes.usage, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: spanInfo, LinkComponent: Link, className: "mt-[1.5rem]" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span, onScorerTriggered })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SpanTabs,
+            {
+              trace,
+              span,
+              spanScoresData,
+              onSpanScoresPageChange,
+              isLoadingSpanScoresData,
+              spanInfo,
+              defaultActiveTab,
+              initialScoreId,
+              computeTraceLink
+            }
+          )
         ] })
       ]
     }
@@ -16330,15 +16556,30 @@ function TraceDialog({
   isLoadingSpans,
   computeAgentsLink,
   computeWorkflowsLink,
-  onScorerTriggered,
-  initialSpanId
+  computeTraceLink,
+  initialSpanId,
+  initialSpanTab,
+  initialScoreId
 }) {
-  const { Link } = useLinkComponent();
+  const { Link, navigate } = useLinkComponent();
   const [dialogIsOpen, setDialogIsOpen] = React.useState(Boolean(initialSpanId));
   const [selectedSpanId, setSelectedSpanId] = React.useState(initialSpanId);
   const [combinedView, setCombinedView] = React.useState(false);
+  const [spanDialogDefaultTab, setSpanDialogDefaultTab] = React.useState(initialSpanTab || "details");
   const selectedSpan = traceSpans.find((span) => span.spanId === selectedSpanId);
   const traceInfo = useTraceInfo(traceDetails);
+  const [spanScoresPage, setSpanScoresPage] = React.useState(0);
+  React.useEffect(() => {
+    if (initialSpanId) {
+      setSelectedSpanId(initialSpanId);
+      setDialogIsOpen(true);
+    }
+  }, [initialSpanId]);
+  React.useEffect(() => {
+    if (spanScoresPage > 0) {
+      setSpanScoresPage(0);
+    }
+  }, [selectedSpanId]);
   const hierarchicalSpans = React.useMemo(() => {
     return formatHierarchicalSpans(traceSpans);
   }, [traceSpans]);
@@ -16356,39 +16597,38 @@ function TraceDialog({
     };
     return flattenSpans(hierarchicalSpans);
   }, [hierarchicalSpans]);
+  const { data: spanScoresData, isLoading: isLoadingSpanScoresData } = useTraceSpanScores({
+    traceId,
+    spanId: selectedSpanId || flatSpans?.[0]?.id,
+    page: spanScoresPage
+  });
   const handleSpanClick = (id) => {
     setSelectedSpanId(id);
+    setSpanDialogDefaultTab("details");
     setDialogIsOpen(true);
   };
-  const toNextSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    const nextItem = flatSpans[currentIndex + 1];
-    if (nextItem) {
-      setSelectedSpanId(nextItem.id);
+  const handleToScoring = () => {
+    setSelectedSpanId(hierarchicalSpans[0]?.id);
+    setSpanDialogDefaultTab("scores");
+    if (traceId) {
+      navigate(`${computeTraceLink(traceId, hierarchicalSpans?.[0]?.id)}&tab=scores`);
     }
   };
-  const toPreviousSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    const previousItem = flatSpans[currentIndex - 1];
-    if (previousItem) {
-      setSelectedSpanId(previousItem.id);
+  const handleToLastScore = () => {
+    setSelectedSpanId(hierarchicalSpans[0]?.id);
+    setSpanDialogDefaultTab("scores");
+    if (traceId) {
+      navigate(
+        `${computeTraceLink(
+          traceId,
+          hierarchicalSpans?.[0]?.id
+        )}&tab=scores&scoreId=${spanScoresData?.scores?.[0]?.id}`
+      );
     }
   };
-  const thereIsNextSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    return currentIndex < flatSpans.length - 1;
-  };
-  const thereIsPreviousSpan = () => {
-    const currentIndex = flatSpans.findIndex((span) => span.id === selectedSpanId);
-    return currentIndex > 0;
-  };
   const selectedSpanInfo = getSpanInfo({ span: selectedSpan, withTraceId: !combinedView, withSpanId: combinedView });
-  let entityType;
-  if (traceDetails?.attributes?.agentId) {
-    entityType = "Agent";
-  } else if (traceDetails?.attributes?.workflowId) {
-    entityType = "Workflow";
-  }
+  const toNextSpan = getToNextEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
+  const toPreviousSpan = getToPreviousEntryFn({ entries: flatSpans, id: selectedSpanId, update: setSelectedSpanId });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       SideDialog,
@@ -16397,111 +16637,100 @@ function TraceDialog({
         dialogDescription: "View and analyze trace details",
         isOpen,
         onClose,
-        hasCloseButton: !dialogIsOpen || combinedView,
-        className: cn("w-[calc(100vw-20rem)] max-w-[80%]", "3xl:max-w-[65%]", "4xl:max-w-[55%]"),
+        level: 1,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SideDialogTop, { onNext, onPrevious, showInnerNav: true, children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-            " ",
-            getShortId(traceId)
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+              " ",
+              getShortId(traceId)
+            ] }),
+            "|",
+            /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext, onPrevious })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: cn("pt-[1.5rem] pl-[2.5rem] grid-rows-[auto_1fr] grid h-full overflow-y-auto", {
-                "grid-rows-[auto_1fr_1fr]": selectedSpan && combinedView
+              className: cn("overflow-y-auto", {
+                "grid grid-rows-[2fr_3fr]": Boolean(selectedSpan && combinedView)
               }),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeader, { className: "pr-[2.5rem]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-                    " ",
-                    traceDetails?.name
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
-                    " ",
-                    traceId
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("overflow-y-auto pb-[2.5rem]"), children: [
-                  traceDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ScorersDropdown,
-                    {
-                      trace: traceDetails,
-                      spanId: selectedSpanId,
-                      onScorerTriggered,
-                      entityType
-                    }
-                  ) }),
-                  traceDetails?.metadata?.usage && /* @__PURE__ */ jsxRuntime.jsx(
-                    TraceSpanUsage,
-                    {
-                      traceUsage: traceDetails?.metadata?.usage,
-                      traceSpans,
-                      className: "mt-[2rem] pr-[1.5rem]"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: traceInfo, LinkComponent: Link, className: "mt-[2rem]" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TraceTimeline,
-                    {
-                      hierarchicalSpans,
-                      spans: traceSpans,
-                      onSpanClick: handleSpanClick,
-                      selectedSpanId,
-                      isLoading: isLoadingSpans,
-                      className: "pr-[2.5rem] pt-[2.5rem]"
-                    }
-                  ),
-                  traceDetails?.links?.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-[2.5rem] pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", className: "pb-[1rem]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
-                      " Scores"
+                /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Content, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Header, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
+                      " ",
+                      traceDetails?.name
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface2 rounded-lg overflow-hidden border-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ScoreTable,
-                      {
-                        scores: traceDetails?.links,
-                        onItemClick: (scorerName) => onScorerTriggered(scorerName, traceDetails.traceId, selectedSpanId)
-                      }
-                    ) })
-                  ] })
-                ] }),
-                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid grid-rows-[auto_1fr] relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 right-[2.5rem] h-[.5rem] bg-surface1 rounded-full top-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-[.5rem] pt-[1rem] border-b border-border1 pr-[2.5rem]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      SideDialogTop,
-                      {
-                        onNext: thereIsNextSpan() ? toNextSpan : void 0,
-                        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
-                        showInnerNav: true,
-                        className: "pl-0",
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[1rem] text-icon4 text-[0.875rem]", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeIcon, {}),
-                            " ",
-                            getShortId(traceId)
+                    /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HashIcon, {}),
+                      " ",
+                      traceId
+                    ] })
+                  ] }),
+                  traceDetails && /* @__PURE__ */ jsxRuntime.jsxs(Sections, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid xl:grid-cols-[3fr_2fr] gap-[1rem] items-start", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: traceInfo, LinkComponent: Link }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface3 p-[1.5rem] rounded-lg grid gap-[1rem]", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[1rem]", children: /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GaugeIcon, {}),
+                          " Evaluate trace"
+                        ] }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(ButtonsGroup, { className: "w-full", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleToScoring, children: [
+                            "Scoring ",
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleGaugeIcon, {}),
+                            " "
                           ] }),
-                          "›",
-                          /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
-                            " ",
-                            getShortId(selectedSpanId)
+                          spanScoresData?.scores?.[0] && /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: handleToLastScore, children: [
+                            "Last score: ",
+                            /* @__PURE__ */ jsxRuntime.jsx("b", { children: spanScoresData?.scores?.[0]?.score })
                           ] })
                         ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[1rem]", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "flex items-center gap-1", onClick: () => setCombinedView(false), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}) }) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Section.Header, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(Section.Heading, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListTreeIcon, {}),
+                          " Timeline"
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(TraceTimelineLegend, { spans: traceSpans })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        TraceTimeline,
+                        {
+                          hierarchicalSpans,
+                          onSpanClick: handleSpanClick,
+                          selectedSpanId,
+                          isLoading: isLoadingSpans
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                selectedSpan && combinedView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-rows-[auto_1fr] relative overflow-y-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Top, { withTopSeparator: true, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
+                      " ",
+                      getShortId(selectedSpanId)
+                    ] }),
+                    "|",
+                    /* @__PURE__ */ jsxRuntime.jsx(SideDialog.Nav, { onNext: toNextSpan, onPrevious: toPreviousSpan }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "ml-auto mr-[2rem]", onClick: () => setCombinedView(false), children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftIcon, {}),
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: "Switch to dialog view" })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[20rem_1fr] gap-[1rem] overflow-y-auto", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[1.5rem] pl-0 gap-[2rem]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(SideDialogHeading, { as: "h2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-full overflow-y-auto grid gap-[2rem] grid-cols-[20rem_1fr]"), children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-y-auto grid content-start p-[2rem] gap-[2rem]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(SideDialog.Heading, { as: "h2", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeftRightEllipsisIcon, {}),
                         " ",
                         selectedSpan?.name
-                      ] }) }),
+                      ] }),
                       selectedSpan?.attributes?.usage && /* @__PURE__ */ jsxRuntime.jsx(
                         TraceSpanUsage,
                         {
@@ -16511,7 +16740,20 @@ function TraceDialog({
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(KeyValueList, { data: selectedSpanInfo, LinkComponent: Link })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2.5rem] pt-[2rem]", children: /* @__PURE__ */ jsxRuntime.jsx(SpanDetails, { span: selectedSpan, onScorerTriggered }) })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto pr-[2rem] pt-[2rem] h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      SpanTabs,
+                      {
+                        trace: traceDetails,
+                        span: selectedSpan,
+                        spanScoresData,
+                        onSpanScoresPageChange: setSpanScoresPage,
+                        isLoadingSpanScoresData,
+                        spanInfo: selectedSpanInfo,
+                        defaultActiveTab: spanDialogDefaultTab,
+                        initialScoreId,
+                        computeTraceLink
+                      }
+                    ) })
                   ] })
                 ] })
               ]
@@ -16525,16 +16767,22 @@ function TraceDialog({
       {
         trace: traceDetails,
         span: selectedSpan,
+        spanScoresData,
+        onSpanScoresPageChange: setSpanScoresPage,
+        isLoadingSpanScoresData,
         isOpen: Boolean(dialogIsOpen && selectedSpanId && !combinedView),
         onClose: () => {
+          navigate(computeTraceLink(traceId || ""));
           setDialogIsOpen(false);
           setSelectedSpanId(void 0);
         },
-        onNext: thereIsNextSpan() ? toNextSpan : void 0,
-        onPrevious: thereIsPreviousSpan() ? toPreviousSpan : void 0,
+        onNext: toNextSpan,
+        onPrevious: toPreviousSpan,
         onViewToggle: () => setCombinedView(!combinedView),
         spanInfo: selectedSpanInfo,
-        onScorerTriggered
+        defaultActiveTab: spanDialogDefaultTab,
+        initialScoreId,
+        computeTraceLink
       }
     )
   ] });
@@ -16673,61 +16921,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__ */ jsxRuntime.jsx(
-    "main",
-    {
-      className: cn(`grid grid-rows-[auto_1fr] h-full items-start content-start`, className),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted red" } : {} },
-      children
+  const { navigate } = useLinkComponent();
+  const [dialogIsOpen, setDialogIsOpen] = React.useState(false);
+  const [selectedScore, setSelectedScore] = React.useState();
+  React.useEffect(() => {
+    if (initialScoreId) {
+      handleOnScore(initialScoreId);
     }
-  );
-}
-function MainContentContent({
-  children,
-  className,
-  isCentered = false,
-  isDivided = false,
-  hasLeftServiceColumn = false,
-  style
-}) {
-  const devStyleRequested = devUIStyleRequested("MainContentContent");
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EntryListSkeleton, { columns: traceScoresListColumns });
+  }
+  const updateSelectedScore = (scoreId) => {
+    const score = scoresData?.scores?.find((s) => s?.id === scoreId);
+    setSelectedScore(score);
+  };
+  const toNextScore = getToNextEntryFn({
+    entries: scoresData?.scores || [],
+    id: selectedScore?.id,
+    update: updateSelectedScore
+  });
+  const toPreviousScore = getToPreviousEntryFn({
+    entries: scoresData?.scores || [],
+    id: selectedScore?.id,
+    update: updateSelectedScore
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(EntryList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(EntryList.Trim, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EntryList.Header, { columns: traceScoresListColumns }),
+        scoresData?.scores && scoresData.scores.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(EntryList.Entries, { children: scoresData?.scores?.map((score) => {
+          const createdAtDate = new Date(score.createdAt);
+          const isTodayDate = dateFns.isToday(createdAtDate);
+          const entry = {
+            id: score?.id,
+            shortId: getShortId(score?.id) || "n/a",
+            date: isTodayDate ? "Today" : dateFns.format(createdAtDate, "MMM dd"),
+            time: dateFns.format(createdAtDate, "h:mm:ss aaa"),
+            score: score?.score,
+            scorer: score?.scorer?.name
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            EntryList.Entry,
+            {
+              columns: traceScoresListColumns,
+              onClick: () => handleOnScore(score.id),
+              entry,
+              children: traceScoresListColumns.map((col) => {
+                const key = `col-${col.name}`;
+                return /* @__PURE__ */ jsxRuntime.jsx(EntryList.EntryText, { children: entry?.[col.name] }, key);
+              })
+            },
+            score.id
+          );
+        }) }) : /* @__PURE__ */ jsxRuntime.jsx(EntryList.Message, { message: "No scores found", type: "info" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EntryList.Pagination,
         {
-          "items-start content-start": !isCentered && !isDivided && !hasLeftServiceColumn,
-          "grid place-items-center": isCentered,
-          "grid-cols-[1fr_1fr]": isDivided && !hasLeftServiceColumn,
-          "grid-cols-[12rem_1fr_1fr]": isDivided && hasLeftServiceColumn,
-          "grid-cols-[auto_1fr]": !isDivided && hasLeftServiceColumn
+          currentPage: scoresData?.pagination?.page || 0,
+          hasMore: scoresData?.pagination?.hasMore,
+          onNextPage: () => onPageChange && onPageChange((scoresData?.pagination?.page || 0) + 1),
+          onPrevPage: () => onPageChange && onPageChange((scoresData?.pagination?.page || 0) - 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScoreDialog,
+      {
+        scorerName: selectedScore?.scorer?.name || "",
+        score: selectedScore,
+        isOpen: dialogIsOpen,
+        onClose: () => {
+          if (traceId) {
+            navigate(`${computeTraceLink(traceId, spanId)}&tab=scores`);
+          }
+          setDialogIsOpen(false);
         },
-        className
-      ),
-      style: { ...style, ...devStyleRequested ? { border: "3px dotted orange" } : {} },
-      children
-    }
-  );
+        dialogLevel: 3,
+        onNext: toNextScore,
+        onPrevious: toPreviousScore,
+        computeTraceLink: (traceId2, spanId2) => `/observability?traceId=${traceId2}${spanId2 ? `&spanId=${spanId2}` : ""}`,
+        usageContext: "aiSpanDialog"
+      }
+    )
+  ] });
 }
-function devUIStyleRequested(name) {
-  try {
-    const raw = localStorage.getItem("add-dev-style-to-components");
-    if (!raw) return false;
-    const components = raw.split(",").map((c) => c.trim()).filter(Boolean);
-    return components.includes(name);
-  } catch (error) {
-    console.error("Error reading or parsing localStorage:", error);
-    return false;
+
+const useTriggerScorer = () => {
+  const client = react$3.useMastraClient();
+  return reactQuery.useMutation({
+    mutationFn: async ({ scorerName, traceId, spanId }) => {
+      const response = await client.score({
+        scorerName,
+        targets: [{ traceId, spanId }]
+      });
+      return response;
+    }
+  });
+};
+
+const SpanScoring = ({ traceId, spanId, entityType }) => {
+  const { data: scorers = {}, isLoading } = useScorers();
+  const [selectedScorer, setSelectedScorer] = React.useState(null);
+  const { mutate: triggerScorer, isPending, isSuccess } = useTriggerScorer();
+  const [notificationIsVisible, setNotificationIsVisible] = React.useState(false);
+  React.useEffect(() => {
+    if (isSuccess) {
+      setNotificationIsVisible(true);
+    }
+  }, [isSuccess]);
+  let scorerList = Object.entries(scorers).map(([key, scorer]) => ({
+    id: key,
+    name: scorer.scorer.config.name,
+    description: scorer.scorer.config.description,
+    isRegistered: scorer.isRegistered,
+    type: scorer.scorer.config.type
+  })).filter((scorer) => scorer.isRegistered);
+  if (entityType !== "Agent" || spanId) {
+    scorerList = scorerList.filter((scorer) => scorer.type !== "agent");
   }
-}
+  const isWaiting = isPending || isLoading;
+  const handleStartScoring = () => {
+    if (selectedScorer) {
+      setNotificationIsVisible(false);
+      triggerScorer({
+        scorerName: selectedScorer,
+        traceId: traceId || "",
+        spanId
+      });
+    }
+  };
+  const handleScorerChange = (val) => {
+    setSelectedScorer(val);
+    setNotificationIsVisible(false);
+  };
+  const selectedScorerDescription = scorerList.find((s) => s.name === selectedScorer)?.description || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[3fr_1fr] gap-[1rem] items-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-[0.5rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectField,
+          {
+            name: "select-scorer",
+            placeholder: "Select a scorer...",
+            options: scorerList.map((scorer) => ({ label: scorer.name, value: scorer.name })),
+            onValueChange: handleScorerChange,
+            value: selectedScorer || "",
+            className: "min-w-[20rem]",
+            disabled: isWaiting
+          }
+        ),
+        selectedScorerDescription && /* @__PURE__ */ jsxRuntime.jsxs(TextAndIcon, { className: "text-icon3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+          " ",
+          selectedScorerDescription
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: !selectedScorer || isWaiting, onClick: handleStartScoring, children: isPending ? "Starting..." : "Start Scoring" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Notification, { isVisible: notificationIsVisible, className: "mt-[1rem]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}),
+      " Scorer triggered! When finished successfully, it will appear in the list below. It could take a moment."
+    ] })
+  ] });
+};
 
 const Breadcrumb = ({ children, label }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gap-sm flex items-center", children }) });
@@ -17334,7 +17713,7 @@ function MCPTable({ mcpServers, isLoading }) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyMCPTable, {});
   }
   const filteredRows = rows.filter((row) => row.original.name.toLowerCase().includes(search.toLowerCase()));
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SearchbarWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Searchbar, { onSearch: setSearch, label: "Search MCP servers", placeholder: "Search MCP servers" }) }),
     isLoading ? /* @__PURE__ */ jsxRuntime.jsx(MCPTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(ScrollableContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Thead, { className: "sticky top-0", children: ths.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(Th, { style: { width: header.column.getSize() ?? "auto" }, children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }),
@@ -17451,6 +17830,7 @@ exports.Badge = Badge$1;
 exports.BranchIcon = BranchIcon;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
+exports.ButtonsGroup = ButtonsGroup;
 exports.Cell = Cell;
 exports.ChatThreads = ChatThreads;
 exports.CheckIcon = CheckIcon;
@@ -17509,12 +17889,15 @@ exports.LogsIcon = LogsIcon;
 exports.MCPTable = MCPTable;
 exports.MainContentContent = MainContentContent;
 exports.MainContentLayout = MainContentLayout;
+exports.MainSidebar = MainSidebar;
+exports.MainSidebarProvider = MainSidebarProvider;
 exports.MastraResizablePanel = MastraResizablePanel;
 exports.McpCoinIcon = McpCoinIcon;
 exports.McpServerIcon = McpServerIcon;
 exports.MemoryIcon = MemoryIcon;
 exports.MemorySearch = MemorySearch;
 exports.ModelResetProvider = ModelResetProvider;
+exports.Notification = Notification;
 exports.OpenAIIcon = OpenAIIcon;
 exports.PageHeader = PageHeader;
 exports.PlaygroundQueryClient = PlaygroundQueryClient;
@@ -17535,23 +17918,19 @@ exports.ScoresTools = ScoresTools;
 exports.SearchField = SearchField;
 exports.Searchbar = Searchbar;
 exports.SearchbarWrapper = SearchbarWrapper;
+exports.Section = Section;
+exports.Sections = Sections;
 exports.SelectField = SelectField;
 exports.SettingsIcon = SettingsIcon;
 exports.SideDialog = SideDialog;
-exports.SideDialogCodeSection = SideDialogCodeSection;
-exports.SideDialogContent = SideDialogContent;
-exports.SideDialogFooter = SideDialogFooter;
-exports.SideDialogFooterGroup = SideDialogFooterGroup;
-exports.SideDialogHeader = SideDialogHeader;
-exports.SideDialogHeading = SideDialogHeading;
-exports.SideDialogKeyValueList = SideDialogKeyValueList;
-exports.SideDialogSection = SideDialogSection;
-exports.SideDialogTop = SideDialogTop;
 exports.SlashIcon = SlashIcon;
 exports.SliderField = SliderField;
-exports.Tab = Tab;
-exports.TabContent = TabContent;
-exports.TabList = TabList;
+exports.SpanScoreList = SpanScoreList;
+exports.SpanScoring = SpanScoring;
+exports.SpanTabs = SpanTabs;
+exports.Tab = Tab$1;
+exports.TabContent = TabContent$1;
+exports.TabList = TabList$1;
 exports.Table = Table$1;
 exports.Tbody = Tbody;
 exports.TemplateFailure = TemplateFailure;
@@ -17575,6 +17954,10 @@ exports.ToolCoinIcon = ToolCoinIcon;
 exports.ToolFallback = ToolFallback;
 exports.ToolTable = ToolTable;
 exports.ToolsIcon = ToolsIcon;
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipProvider = TooltipProvider;
+exports.TooltipTrigger = TooltipTrigger;
 exports.TraceDialog = TraceDialog;
 exports.TraceIcon = TraceIcon;
 exports.TraceTimeline = TraceTimeline;
@@ -17617,6 +18000,7 @@ exports.parseError = parseError;
 exports.providerMapToIcon = providerMapToIcon;
 exports.scoresListColumns = scoresListColumns;
 exports.spanTypePrefixes = spanTypePrefixes;
+exports.traceScoresListColumns = traceScoresListColumns;
 exports.tracesListColumns = tracesListColumns;
 exports.transformKey = transformKey;
 exports.useAgentSettings = useAgentSettings;
@@ -17624,6 +18008,7 @@ exports.useCurrentRun = useCurrentRun;
 exports.useInView = useInView;
 exports.useLinkComponent = useLinkComponent;
 exports.useMCPServerTools = useMCPServerTools;
+exports.useMainSidebar = useMainSidebar;
 exports.useModelReset = useModelReset;
 exports.usePlaygroundStore = usePlaygroundStore;
 exports.usePolling = usePolling;
@@ -17633,6 +18018,7 @@ exports.useScoresByEntityId = useScoresByEntityId;
 exports.useScoresByScorerId = useScoresByScorerId;
 exports.useSpeechRecognition = useSpeechRecognition;
 exports.useThreadInput = useThreadInput;
+exports.useTraceSpanScores = useTraceSpanScores;
 exports.useWorkflow = useWorkflow;
 exports.useWorkflowRuns = useWorkflowRuns;
 exports.useWorkingMemory = useWorkingMemory;