@mastra/playground-ui 22.0.0-alpha.2 → 22.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @mastra/playground-ui
 
+## 22.0.0-alpha.4
+
+### Patch Changes
+
+- Added browser tools to the Agent details UI in Playground. Agents configured with browser support now show a "Browser Tools" section in metadata. ([#14998](https://github.com/mastra-ai/mastra/pull/14998))
+
+- Updated dependencies [[`d87e6e6`](https://github.com/mastra-ai/mastra/commit/d87e6e61c42475a7b57768e71dfa12964326a632)]:
+  - @mastra/client-js@1.13.0-alpha.3
+  - @mastra/react@0.2.22-alpha.3
+  - @mastra/core@1.22.0-alpha.3
+
+## 22.0.0-alpha.3
+
+### Patch Changes
+
+- Consolidated Tab button styles into the Tab component, removing duplicated child selectors from TabList. Removed unused alignment prop. Active underline now uses the neutral4 design token. ([#15004](https://github.com/mastra-ai/mastra/pull/15004))
+
+- Matched tooltip panel background to dropdown and default button surface in Studio. ([#15009](https://github.com/mastra-ai/mastra/pull/15009))
+
+- Fixed Scores Over Time chart to always show a 24-hour view by collapsing multi-day ranges into hourly averages across all days in the selected period ([#14981](https://github.com/mastra-ai/mastra/pull/14981))
+
+- Aligned dropdown menu panel background with default button styling in Studio. ([#15009](https://github.com/mastra-ai/mastra/pull/15009))
+
+- Refactored chat error messages to use the Alert design system component instead of inline hardcoded styles, fixing text overflow on long error messages ([#15012](https://github.com/mastra-ai/mastra/pull/15012))
+
 ## 22.0.0-alpha.2
 
 ### Minor Changes

package/dist/index.cjs.js

@@ -3671,13 +3671,13 @@ const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4,
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-surface6 px-3 py-1.5 text-xs text-neutral4 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md bg-surface3 px-3 py-1.5 text-xs text-neutral4 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-surface6" })
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "fill-surface3" })
     ]
   }
 ) }));
@@ -3724,8 +3724,8 @@ const DialogContent = React__namespace.forwardRef(({ className, children, ...pro
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
-        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "data-[state=closed]:slide-out-to-bottom-4",
+        "data-[state=open]:slide-in-from-bottom-4",
         className
       ),
       ...props,
@@ -13222,19 +13222,11 @@ const Tabs = ({ children, defaultTab, value, onValueChange, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { value: currentTab, onValueChange: handleTabChange, className: cn("overflow-y-auto", className), children });
 };
 
-const TabList = ({ children, alignment = "left", className }) => {
+const TabList = ({ children, className }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-x-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixTabs__namespace.List,
     {
-      className: cn(
-        "flex items-center relative w-max min-w-full",
-        "text-ui-lg border-b border-border1",
-        "[&>button]:py-2 [&>button]:px-6 [&>button]:font-normal [&>button]:text-neutral3 [&>button]:border-b-2 [&>button]:border-transparent",
-        alignment === "full-width" && "[&>button]:flex-1",
-        `[&>button]:${transitions.colors} [&>button]:hover:text-neutral4`,
-        "[&>button[data-state=active]]:text-neutral5 [&>button[data-state=active]]:border-black/50 [&>button[data-state=active]]:dark:border-white/50",
-        className
-      ),
+      className: cn("flex items-center relative w-max min-w-full", "text-ui-lg border-b border-border1", className),
       children
     }
   ) });
@@ -13246,11 +13238,12 @@ const Tab = ({ children, value, onClick, onClose, className }) => {
     {
       value,
       className: cn(
-        "text-sm py-3 px-2 text-neutral3 whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none",
-        transitions.all,
+        "py-2 px-5 text-ui-md font-normal text-neutral3 border-b-2 border-transparent",
+        "whitespace-nowrap shrink-0 flex items-center justify-center gap-1.5 outline-none",
+        transitions.colors,
         focusRing.visible,
         "hover:text-neutral4",
-        "data-[state=active]:text-neutral5 data-[state=active]:border-b-2 data-[state=active]:border-black/50 data-[state=active]:dark:border-white/50",
+        "data-[state=active]:text-neutral5 data-[state=active]:border-neutral3",
         className
       ),
       onClick,
@@ -14504,31 +14497,22 @@ const ErrorAwareText = () => {
     const trimmedText = text.trim();
     if (trimmedText.startsWith("__ERROR__:")) {
       const errorMessage = trimmedText.substring("__ERROR__:".length);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
+      return /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { as: "p", children: errorMessage })
       ] });
     } else if (trimmedText.startsWith("Error:")) {
       const errorMessage = trimmedText.substring("Error:".length).trim();
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: errorMessage })
-        ] })
+      return /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Error" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { as: "p", children: errorMessage })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(MarkdownText, {});
   } catch {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900/50", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-200 mb-1", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-700 dark:text-red-300", children: String(text) })
-      ] })
+    return /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { as: "h5", children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { as: "p", children: String(text) })
     ] });
   }
 };
@@ -22464,6 +22448,7 @@ const AgentMetadata = ({ agentId }) => {
   const workflows = Object.keys(agentWorkflows).map((key) => ({ id: key, ...agentWorkflows[key] }));
   const skills = agent.skills ?? [];
   const workspaceTools = agent.workspaceTools ?? [];
+  const browserTools = agent.browserTools ?? [];
   const workspaceId = agent.workspaceId;
   const inputProcessors = agent.inputProcessors ?? [];
   const outputProcessors = agent.outputProcessors ?? [];
@@ -22563,6 +22548,17 @@ const AgentMetadata = ({ agentId }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataWorkspaceToolsList, { tools: workspaceTools })
       }
     ),
+    browserTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      AgentMetadataSection,
+      {
+        title: "Browser Tools",
+        hint: {
+          link: "https://mastra.ai/en/docs/agents/adding-browser-control",
+          title: "Browser tools documentation"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataBrowserToolsList, { tools: browserTools })
+      }
+    ),
     (inputProcessors.length > 0 || outputProcessors.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
       AgentMetadataSection,
       {
@@ -22664,6 +22660,12 @@ const AgentMetadataWorkspaceToolsList = ({ tools }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "h-3 w-3 text-accent1" }), children: formatWorkspaceToolName(tool) }) }, tool)) });
 };
+const AgentMetadataBrowserToolsList = ({ tools }) => {
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListEmpty, { children: "No browser tools" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataList, { children: tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(AgentMetadataListItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-3 w-3 text-cyan-500" }), children: tool }) }, tool)) });
+};
 const AgentMetadataCombinedProcessorList = ({
   inputProcessors,
   outputProcessors
@@ -27571,7 +27573,7 @@ const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset,
   {
     ref,
     className: cn(
-      "dark:hover:bg-white/15 dark:focus:bg-white/15 dark:active:bg-white/20 dark:data-[state=open]:bg-white/15 hover:bg-black/10 focus:bg-black/10 active:bg-black/15 data-[state=open]:bg-black/10 flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 focus-visible:outline-hidden focus-visible:ring-0",
+      "hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-[state=open]:bg-surface4 flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 focus-visible:outline-hidden focus-visible:ring-0",
       inset && "pl-8",
       className
     ),
@@ -27588,7 +27590,7 @@ const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...prop
   {
     ref,
     className: cn(
-      "dark:bg-white/10 bg-surface5 backdrop-blur-xl 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 bz-50 min-w-32 overflow-auto overflow-x-hidden rounded-lg",
+      "bg-surface3 backdrop-blur-xl 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-32 overflow-auto overflow-x-hidden rounded-lg",
       className
     ),
     ...props
@@ -27602,7 +27604,7 @@ const DropdownMenuContent = React__namespace.forwardRef(({ className, container,
       ref,
       sideOffset,
       className: cn(
-        "bg-surface5 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 backdrop-blur-xl text-neutral4 z-50 min-w-32 overflow-auto rounded-lg p-2 shadow-md",
+        "bg-surface3 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 backdrop-blur-xl text-neutral4 z-50 min-w-32 overflow-auto rounded-lg p-2 shadow-md",
         className
       ),
       ...props
@@ -27615,7 +27617,7 @@ const DropdownMenuItem = React__namespace.forwardRef(({ className, ...props }, r
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white dark:hover:bg-white/15 dark:focus:bg-white/15 dark:active:bg-white/20 hover:text-neutral6 focus:text-neutral6 hover:bg-black/10 focus:bg-black/10 active:bg-black/15 data-disabled:pointer-events-none data-disabled:opacity-50 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-0",
+      "relative flex cursor-pointer select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-disabled:pointer-events-none data-disabled:opacity-50 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-0",
       "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50 [&>svg]:mx-[-.25em] [&:hover>svg]:opacity-100",
       className
     ),
@@ -27628,7 +27630,7 @@ const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, child
   {
     ref,
     className: cn(
-      "dark:hover:bg-white/15 dark:focus:bg-white/15 dark:active:bg-white/20 dark:hover:text-white dark:focus:text-white hover:bg-black/10 focus:bg-black/10 active:bg-black/15 hover:text-neutral6 focus:text-neutral6 relative flex w-full cursor-pointer select-none items-center gap-4 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-hidden focus-visible:ring-0",
+      "hover:bg-surface4 focus:bg-surface4 active:bg-surface5 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 relative flex w-full cursor-pointer select-none items-center gap-4 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-hidden focus-visible:ring-0",
       className
     ),
     checked,
@@ -27645,7 +27647,7 @@ const DropdownMenuRadioItem = React__namespace.forwardRef(({ className, children
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white dark:hover:bg-white/15 dark:focus:bg-white/15 dark:active:bg-white/20 hover:text-neutral6 focus:text-neutral6 hover:bg-black/10 focus:bg-black/10 active:bg-black/15 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-hidden focus-visible:ring-0",
+      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-hidden focus-visible:ring-0",
       className
     ),
     ...props,
@@ -44546,35 +44548,38 @@ function useScoresMetrics() {
           })
         )
       );
-      const bucketMap = /* @__PURE__ */ new Map();
-      const rangeSpansDays = timestamp.end.toDateString() !== timestamp.start.toDateString();
+      const hourBuckets = /* @__PURE__ */ new Map();
       for (let i = 0; i < scorerNames.length; i++) {
         const scorerId = scorerNames[i];
         const series = timeSeriesResults[i]?.series ?? [];
         for (const s of series) {
           for (const point of s.points) {
             const ts = new Date(point.timestamp);
-            const key = ts.toISOString();
-            if (!bucketMap.has(key)) {
-              bucketMap.set(key, {
-                time: rangeSpansDays ? ts.toLocaleString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: false
-                }) : ts.toLocaleTimeString("en-US", {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: false
-                })
-              });
+            const hourKey = ts.toLocaleTimeString("en-US", {
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: false
+            });
+            if (!hourBuckets.has(hourKey)) {
+              hourBuckets.set(hourKey, /* @__PURE__ */ new Map());
+            }
+            const scorerMap = hourBuckets.get(hourKey);
+            if (!scorerMap.has(scorerId)) {
+              scorerMap.set(scorerId, { sum: 0, count: 0 });
             }
-            bucketMap.get(key)[scorerId] = +point.value.toFixed(2);
+            const acc = scorerMap.get(scorerId);
+            acc.sum += point.value;
+            acc.count += 1;
           }
         }
       }
-      const overTimeData = Array.from(bucketMap.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([, point]) => point);
+      const overTimeData = Array.from(hourBuckets.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([hourKey, scorerMap]) => {
+        const point = { time: hourKey };
+        for (const [scorerId, acc] of scorerMap) {
+          point[scorerId] = +(acc.sum / acc.count).toFixed(2);
+        }
+        return point;
+      });
       return {
         summaryData,
         overTimeData,
@@ -56957,21 +56962,9 @@ function MainSidebarProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(MainSidebarContext.Provider, { value: contextValue, children });
 }
 
-function MainSidebarRoot({ children, className, footerSlot }) {
+function MainSidebarRoot({ children, className }) {
   const { state, toggleSidebar } = useMainSidebar();
   const isCollapsed = state === "collapsed";
-  React.useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.ctrlKey && event.key === "b") {
-        event.preventDefault();
-        toggleSidebar();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [toggleSidebar]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -56986,43 +56979,6 @@ function MainSidebarRoot({ children, className, footerSlot }) {
       ),
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface1 grid sticky bottom-0 pb-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1", children: [
-            !isCollapsed && footerSlot,
-            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: toggleSidebar,
-                  className: cn(
-                    "inline-flex w-auto items-center text-neutral3 h-8 px-3 rounded-md",
-                    "hover:bg-surface4 hover:text-neutral5",
-                    "transition-all duration-normal ease-out-custom",
-                    "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
-                    "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3 [&_svg]:transition-transform [&_svg]:duration-normal"
-                  ),
-                  "aria-label": "Toggle sidebar",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    lucideReact.PanelRightIcon,
-                    {
-                      className: cn({
-                        "rotate-180": isCollapsed
-                      })
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
-                "Toggle Sidebar",
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyboardIcon, {}),
-                  " Ctrl+B"
-                ] })
-              ] })
-            ] })
-          ] })
-        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -57039,6 +56995,55 @@ function MainSidebarRoot({ children, className, footerSlot }) {
   );
 }
 
+function MainSidebarTrigger({ className }) {
+  const { state, toggleSidebar } = useMainSidebar();
+  const isCollapsed = state === "collapsed";
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.ctrlKey && event.key === "b") {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [toggleSidebar]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: toggleSidebar,
+        className: cn(
+          "inline-flex w-auto items-center text-neutral3 h-8 px-3 rounded-md",
+          "hover:bg-surface4 hover:text-neutral5",
+          "transition-all duration-normal ease-out-custom",
+          "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring",
+          "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3 [&_svg]:transition-transform [&_svg]:duration-normal",
+          className
+        ),
+        "aria-label": "Toggle sidebar",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.PanelRightIcon,
+          {
+            className: cn({
+              "rotate-180": isCollapsed
+            })
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
+      "Toggle Sidebar",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyboardIcon, {}),
+        " Ctrl+B"
+      ] })
+    ] })
+  ] });
+}
+
 const MainSidebar = Object.assign(MainSidebarRoot, {
   Bottom: MainSidebarBottom,
   Nav: MainSidebarNav,
@@ -57046,7 +57051,8 @@ const MainSidebar = Object.assign(MainSidebarRoot, {
   NavLink: MainSidebarNavLink,
   NavHeader: MainSidebarNavHeader,
   NavList: MainSidebarNavList,
-  NavSeparator: MainSidebarNavSeparator
+  NavSeparator: MainSidebarNavSeparator,
+  Trigger: MainSidebarTrigger
 });
 
 function PageHeader({ title, description, icon, className }) {
@@ -59738,6 +59744,7 @@ exports.AgentInformationTabLayout = AgentInformationTabLayout;
 exports.AgentLayout = AgentLayout;
 exports.AgentMemory = AgentMemory;
 exports.AgentMetadata = AgentMetadata;
+exports.AgentMetadataBrowserToolsList = AgentMetadataBrowserToolsList;
 exports.AgentMetadataCombinedProcessorList = AgentMetadataCombinedProcessorList;
 exports.AgentMetadataList = AgentMetadataList;
 exports.AgentMetadataListEmpty = AgentMetadataListEmpty;
@@ -59983,6 +59990,7 @@ exports.MainContentLayout = MainContentLayout;
 exports.MainHeader = MainHeader;
 exports.MainSidebar = MainSidebar;
 exports.MainSidebarProvider = MainSidebarProvider;
+exports.MainSidebarTrigger = MainSidebarTrigger;
 exports.MarkdownRenderer = MarkdownRenderer;
 exports.MastraPackagesInfo = MastraPackagesInfo;
 exports.MastraVersionFooter = MastraVersionFooter;