@mastra/playground-ui 5.2.4 → 5.2.5-alpha.0

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, startTransition } from 'react';
+import React__default, { createContext, useContext, forwardRef, memo, useState, useEffect, useRef, useCallback, useMemo, Suspense, Fragment as Fragment$1, useId, startTransition } from 'react';
 import { MastraClient } from '@mastra/client-js';
 import { useMessage, MessagePrimitive, ActionBarPrimitive, useAttachment, AttachmentPrimitive, useComposerRuntime, ComposerPrimitive, ThreadPrimitive, CompositeAttachmentAdapter, SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, WebSpeechSynthesisAdapter, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
 import { CheckIcon as CheckIcon$1, CopyIcon, Check, Copy, ChevronUpIcon, BrainIcon, AudioLinesIcon, StopCircleIcon, X, FileText, CircleXIcon, Mic, PlusIcon, ArrowUp, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Circle, ChevronDown, Braces, SaveIcon, RefreshCw, ExternalLink, InfoIcon as InfoIcon$1, GaugeIcon, CircleCheck, EditIcon, Plus, LoaderCircle, ChevronDownIcon, ExternalLinkIcon, Loader2, Network, PauseIcon, HourglassIcon, CircleDashed, Footprints, CircleX, Minus, Maximize, Workflow, AlertCircleIcon, Users, Brain, NetworkIcon, SearchIcon, AlertCircle, CalendarIcon, Brackets, TrashIcon, CirclePause, StopCircle, ChevronUp } from 'lucide-react';
@@ -3088,7 +3088,7 @@ function cn(...inputs) {
 }
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -4465,7 +4465,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -4984,11 +4984,11 @@ const Composer$1 = ({ hasMemory, onInputChange, agentId }) => {
   return /* @__PURE__ */ jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxs(ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsx(ComposerAttachments, {}) }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-surface3 rounded-lg border-sm border-border1 py-4 mt-auto max-w-[568px] w-full mx-auto px-4 focus-within:outline focus-within:outline-accent1", children: [
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
           "textarea",
           {
-            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
+            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none outline-none",
             autoFocus: true,
             placeholder: "Enter your message...",
             name: "",
@@ -6176,7 +6176,7 @@ const AgentChat = ({
 };
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
   {
     variants: {
       variant: {
@@ -6230,13 +6230,13 @@ function FormattedDate({ date }) {
 }
 
 const inputVariants = cva(
-  "flex w-full text-icon6 rounded-lg border bg-transparent shadow-sm focus-visible:ring-ring transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full text-icon6 rounded-lg border bg-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "border-sm border-border1 placeholder:text-icon3",
         filled: "border-sm bg-inputFill border-border1 placeholder:text-icon3",
-        unstyled: "border-0 bg-transparent placeholder:text-icon3 focus-visible:ring-transparent focus-visible:outline-none"
+        unstyled: "border-0 bg-transparent placeholder:text-icon3"
       },
       customSize: {
         default: "px-[13px] text-[calc(13_/_16_*_1rem)] h-8",
@@ -6338,24 +6338,14 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap focus-visible:outline-none text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
+      "-outline-offset-2 data-[state=active]:bg-background data-[state=active]:text-foreground whitespace-nowrap text-ui-lg text-icon3 -mb-[0.5px] inline-flex items-center justify-center border-b-2 border-transparent p-3 font-medium disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:shadow",
       className
     ),
     ...props
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 const PlaygroundTabs = ({
@@ -6407,8 +6397,7 @@ const scrollableContentClass = cn(
 cn(
   "px-4 py-2 text-sm transition-all border-b-2 border-transparent",
   "data-[state=active]:border-white data-[state=active]:text-white font-medium",
-  "data-[state=inactive]:text-mastra-el-4 hover:data-[state=inactive]:text-mastra-el-2",
-  "focus-visible:outline-none"
+  "data-[state=inactive]:text-mastra-el-4 hover:data-[state=inactive]:text-mastra-el-2"
 );
 cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
 function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }) {
@@ -6621,7 +6610,7 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     children: [
       /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));
@@ -6641,7 +6630,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
     {
       ref,
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ...props,
@@ -6686,7 +6675,10 @@ const Button = ({ className, as, size = "md", variant = "default", ...props }) =
 };
 
 const Collapsible = CollapsiblePrimitive.Root;
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleTrigger = (props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { className: cn("-outline-offset-2", className), ...rest });
+};
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 const formatJSON = async (code) => {
@@ -6922,7 +6914,7 @@ const AgentAdvancedSettings = () => {
             onChange: setProviderOptionsValue,
             theme,
             extensions: [jsonLanguage],
-            className: "h-[300px] overflow-scroll rounded-lg border bg-transparent shadow-sm focus-visible:ring-ring transition-colors focus-visible:outline-none focus-visible:ring-1 p-2"
+            className: "h-[300px] overflow-scroll rounded-lg border bg-transparent shadow-sm transition-colors p-2"
           }
         ),
         error && /* @__PURE__ */ jsx(Txt, { variant: "ui-md", className: "text-accent2", children: error })
@@ -7038,18 +7030,18 @@ const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
   small: "[&>tbody>tr]:h-table-row-small"
 };
-const Table = ({ className, children, size = "default" }) => {
-  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), children });
+const Table = ({ className, children, size = "default", style }) => {
+  return /* @__PURE__ */ jsx("table", { className: clsx("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
+  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx("h-table-header border-b-sm border-border1 bg-surface2", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsx(
     "th",
     {
       className: clsx(
-        "text-icon3 text-ui-sm h-full text-left font-normal uppercase first:pl-5 last:pr-5 whitespace-nowrap",
+        "text-icon3 text-ui-sm h-full whitespace-nowrap text-left font-normal uppercase first:pl-5 last:pr-5",
         className
       ),
       ...props,
@@ -7060,21 +7052,33 @@ const Th = ({ className, children, ...props }) => {
 const Tbody = ({ className, children }) => {
   return /* @__PURE__ */ jsx("tbody", { className: clsx("", className), children });
 };
-const Row = ({ className, children, selected = false, onClick }) => {
-  return /* @__PURE__ */ jsx(
-    "tr",
-    {
-      className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3",
-        selected && "bg-surface4",
-        onClick && "cursor-pointer",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
+const Row = forwardRef(
+  ({ className, children, selected = false, style, onClick, ...props }, ref) => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" && onClick) {
+        onClick();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: clsx(
+          "border-b-sm border-border1 hover:bg-surface3 focus:bg-surface3 -outline-offset-2",
+          selected && "bg-surface4",
+          onClick && "cursor-pointer",
+          className
+        ),
+        style,
+        onClick,
+        ref,
+        tabIndex: onClick ? 0 : void 0,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
 
 const formatDateCell = (date) => {
   const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(date).toUpperCase();
@@ -7923,7 +7927,7 @@ const AgentMetadataSection = ({ title, children, hint }) => {
     /* @__PURE__ */ jsxs(Txt, { as: "h3", variant: "ui-md", className: "text-icon3 flex items-center gap-1", children: [
       title,
       hint && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsx(InfoIcon$1, {}) }) }) }),
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsx(InfoIcon$1, {}) }) }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: hint.title })
       ] }) })
     ] }),
@@ -8266,7 +8270,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
       className
     ),
     ...props,
@@ -8306,7 +8310,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-mastra-el-5 text-sm focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -8327,7 +8331,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md 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-[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
@@ -10276,7 +10280,7 @@ const WorkflowStepActionBar = ({
         ] }),
         onShowTrace && /* @__PURE__ */ jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
         showEventForm && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { className: "ring-1 ring-accent5 !text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
+          /* @__PURE__ */ jsx(Button, { className: "!text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
           /* @__PURE__ */ jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxs(DialogTitle, { className: dialogTitleClass, children: [
               "Send ",
@@ -10307,8 +10311,8 @@ function WorkflowConditionNode({ data }) {
       {
         className: cn(
           "bg-surface3 rounded-lg w-[300px] border-sm border-border1",
-          previousStep?.status === "success" && nextStep && "ring-2 ring-accent1 bg-accent1Darker",
-          previousStep?.status === "failed" && nextStep && "ring-2 ring-accent2 bg-accent2Darker"
+          previousStep?.status === "success" && nextStep && "bg-accent1Darker",
+          previousStep?.status === "failed" && nextStep && "bg-accent2Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs(
@@ -10424,11 +10428,11 @@ function WorkflowDefaultNode({
       {
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "ring-2 ring-accent1 bg-accent1Darker",
-          step?.status === "failed" && "ring-2 ring-accent2 bg-accent2Darker",
-          step?.status === "suspended" && "ring-2 ring-accent3 bg-accent3Darker",
-          step?.status === "waiting" && "ring-2 ring-accent5 bg-accent5Darker",
-          step?.status === "running" && "ring-2 ring-accent6 bg-accent6Darker"
+          step?.status === "success" && "bg-accent1Darker",
+          step?.status === "failed" && "bg-accent2Darker",
+          step?.status === "suspended" && "bg-accent3Darker",
+          step?.status === "waiting" && "bg-accent5Darker",
+          step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -10728,11 +10732,11 @@ function WorkflowNestedNode({
       {
         className: cn(
           "bg-surface3 rounded-lg w-[274px] border-sm border-border1 pt-2",
-          step?.status === "success" && "ring-2 ring-accent1 bg-accent1Darker",
-          step?.status === "failed" && "ring-2 ring-accent2 bg-accent2Darker",
-          step?.status === "suspended" && "ring-2 ring-accent3 bg-accent3Darker",
-          step?.status === "waiting" && "ring-2 ring-accent5 bg-accent5Darker",
-          step?.status === "running" && "ring-2 ring-accent6 bg-accent6Darker"
+          step?.status === "success" && "bg-accent1Darker",
+          step?.status === "failed" && "bg-accent2Darker",
+          step?.status === "suspended" && "bg-accent3Darker",
+          step?.status === "waiting" && "bg-accent5Darker",
+          step?.status === "running" && "bg-accent6Darker"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -11320,7 +11324,7 @@ const Composer = ({ hasMemory }) => {
         /* @__PURE__ */ jsx(ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
           "textarea",
           {
-            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent focus:outline-none resize-none",
+            className: "text-ui-lg leading-ui-lg placeholder:text-icon3 text-icon6 bg-transparent resize-none",
             autoFocus: true,
             placeholder: "Enter your message...",
             name: "",
@@ -12062,6 +12066,65 @@ const NetworkTableSkeleton = () => {
   ] });
 };
 
+const themeClasses = {
+  light: "bg-gray-100 border-gray-300 text-gray-700",
+  dark: "bg-surface4 border-border1 text-icon6"
+};
+const Kbd = ({ children, theme = "dark" }) => {
+  const themeClass = themeClasses[theme];
+  return /* @__PURE__ */ jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
+const Searchbar = ({ onSearch, label, placeholder }) => {
+  const id = useId();
+  const inputRef = useRef(null);
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() === "f" && event.shiftKey && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault();
+        input.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const search = formData.get(id);
+    onSearch(search);
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: "border-sm border-icon-3 flex h-8 w-full items-center gap-2 overflow-hidden rounded-lg pl-2 pr-1",
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "text-icon3 h-4 w-4" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              placeholder,
+              className: "bg-surface2 text-ui-md placeholder:text-icon-3 block h-8 w-full px-2 -outline-offset-2",
+              name: id,
+              ref: inputRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsx(Kbd, { children: "Enter" }) })
+      ]
+    }
+  );
+};
+
 const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   const toolsWithAgents = useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
@@ -12076,8 +12139,7 @@ const ToolListInner = ({
   const [filteredTools, setFilteredTools] = useState(toolsWithAgents);
   const [value, setValue] = useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsx(ToolListEmpty, {});
-  const handleSearch = (e) => {
-    const value2 = e.target.value;
+  const handleSearch = (value2) => {
     setValue(value2);
     startTransition(() => {
       setFilteredTools(
@@ -12091,19 +12153,7 @@ const ToolListInner = ({
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "px-4 flex items-center gap-2 rounded-lg bg-surface5 focus-within:ring-2 focus-within:ring-accent3", children: [
-        /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            placeholder: "Search for a tool",
-            className: "w-full py-2 bg-transparent text-icon3 focus:text-icon6 placeholder:text-icon3 outline-none",
-            value,
-            onChange: handleSearch
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsx(Searchbar, { onSearch: handleSearch, label: "Search for a tool", placeholder: "Search for a tool" }),
       filteredTools.length === 0 && /* @__PURE__ */ jsx(Txt, { as: "p", className: "text-icon3 py-2", children: "No tools found matching your search." })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 xl:grid-cols-3 gap-4 max-w-5xl mx-auto py-8", children: filteredTools.map((tool) => /* @__PURE__ */ jsx(ToolEntity, { tool, computeLink, computeAgentLink }, tool.id)) })
@@ -12457,7 +12507,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,
@@ -15058,5 +15108,5 @@ const MemorySearch = ({
   ] });
 };
 
-export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, ChatThreads, CheckIcon, ChevronIcon, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, SettingsIcon, SlashIcon, Tab, TabContent, TabList, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatOtelTimestamp, formatOtelTimestamp2, providerMapToIcon, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
+export { AgentChat, AgentCoinIcon, AgentEntityHeader, AgentEvals, AgentIcon, AgentMetadata, AgentMetadataList, AgentMetadataListEmpty, AgentMetadataListItem, AgentMetadataPrompt, AgentMetadataScorerList, AgentMetadataSection, AgentMetadataToolList, AgentMetadataWorkflowList, AgentMetadataWrapper, AgentNetworkCoinIcon, AgentSettings, AgentSettingsContext, AgentSettingsProvider, AgentsTable, AgentsTableSkeleton, AiIcon, AlertDialog, ApiIcon, Badge$1 as Badge, BranchIcon, Breadcrumb, Button, Cell, ChatThreads, CheckIcon, ChevronIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, CommitIcon, CrossIcon, Crumb, DarkLogo, DataTable, DateTimeCell, DbIcon, DebugIcon, DeploymentIcon, DividerIcon, DocsIcon, DynamicForm, EmptyAgentsTable, EmptyScorerList, EmptyState, EmptyWorkflowsTable, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityName, Entry, EntryCell, EnvIcon, EvaluatorCoinIcon, FiltersIcon, FolderIcon, GithubCoinIcon, GithubIcon, GoogleIcon, Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, Icon, InfoIcon, JudgeIcon, Kbd, LatencyIcon, LegacyWorkflowGraph, LegacyWorkflowTrigger, LinkComponentProvider, LogsIcon, MainContentContent, MainContentLayout, MastraClientProvider, MastraResizablePanel, McpCoinIcon, McpServerIcon, MemoryIcon, MemorySearch, NetworkChat, NetworkContext, NetworkProvider, NetworkTable, NetworkTableEmpty, NetworkTableSkeleton, OpenAIIcon, PlaygroundQueryClient, PlaygroundTabs, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Row, RuntimeContext, RuntimeContextWrapper, ScoreIcon, ScorerList, ScorerSkeleton, Searchbar, SettingsIcon, SlashIcon, Tab, TabContent, TabList, Table, Tbody, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, ToolCoinIcon, ToolList, ToolListEmpty, ToolListSkeleton, ToolsIcon, TraceIcon, TracesView, TracesViewSkeleton, TsIcon, Txt, TxtCell, UnitCell, VNextNetworkChat, VariablesIcon, WorkflowCoinIcon, WorkflowGraph, WorkflowIcon, WorkflowRunContext, WorkflowRunProvider, WorkflowRuns, WorkflowTable, WorkflowTableSkeleton, WorkflowTrigger, WorkingMemoryContext, WorkingMemoryProvider, allowedAiSpanAttributes, cleanString, formatDuration, formatOtelTimestamp, formatOtelTimestamp2, providerMapToIcon, transformKey, useAgentSettings, useCurrentRun, useInView, useLinkComponent, useMastraClient, usePlaygroundStore, usePolling, useScorer, useScorers, useScoresByEntityId, useScoresByScorerId, useSpeechRecognition, useWorkingMemory };
 //# sourceMappingURL=index.es.js.map