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

package/dist/index.cjs.js

@@ -3121,7 +3121,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: {
@@ -4498,7 +4498,7 @@ const DialogContent = React__namespace.forwardRef(({ className, children, ...pro
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -5017,11 +5017,11 @@ const Composer$1 = ({ hasMemory, onInputChange, agentId }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.ComposerPrimitive.Root, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[568px] w-full mx-auto pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ComposerAttachments, {}) }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 -outline-offset-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.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: "",
@@ -6209,7 +6209,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: {
@@ -6263,13 +6263,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",
@@ -6371,24 +6371,14 @@ const TabsTrigger = React__namespace.forwardRef(({ className, ...props }, ref) =
   {
     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__namespace.Trigger.displayName;
-const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Content, { ref, className: cn("mt-2 -outline-offset-2", className), ...props }));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 
 const PlaygroundTabs = ({
@@ -6440,8 +6430,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 }) {
@@ -6654,7 +6643,7 @@ const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /*
     ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary/50" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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__ */ jsxRuntime.jsx(SliderPrimitive__namespace.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" })
     ]
   }
 ));
@@ -6674,7 +6663,7 @@ const RadioGroupItem = React__namespace.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,
@@ -6719,7 +6708,10 @@ const Button = ({ className, as, size = "md", variant = "default", ...props }) =
 };
 
 const Collapsible = CollapsiblePrimitive__namespace.Root;
-const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
+const CollapsibleTrigger = (props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleTrigger, { className: cn("-outline-offset-2", className), ...rest });
+};
 const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
 
 const formatJSON = async (code) => {
@@ -6955,7 +6947,7 @@ const AgentAdvancedSettings = () => {
             onChange: setProviderOptionsValue,
             theme,
             extensions: [langJson.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__ */ jsxRuntime.jsx(Txt, { variant: "ui-md", className: "text-accent2", children: error })
@@ -7071,18 +7063,18 @@ const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
   small: "[&>tbody>tr]:h-table-row-small"
 };
-const Table = ({ className, children, size = "default" }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: clsx("w-full", rowSize[size], className), children });
+const Table = ({ className, children, size = "default", style }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("table", { className: clsx("w-full", rowSize[size], className), style, children });
 };
 const Thead = ({ className, children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: clsx("h-table-header border-b-sm border-border1", className), children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: clsx("h-table-header border-b-sm border-border1 bg-surface2", className), children }) });
 };
 const Th = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.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,
@@ -7093,21 +7085,33 @@ const Th = ({ className, children, ...props }) => {
 const Tbody = ({ className, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: clsx("", className), children });
 };
-const Row = ({ className, children, selected = false, onClick }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      className: clsx(
-        "border-b-sm border-border1 hover:bg-surface3",
-        selected && "bg-surface4",
-        onClick && "cursor-pointer",
-        className
-      ),
-      onClick,
-      children
-    }
-  );
-};
+const Row = React.forwardRef(
+  ({ className, children, selected = false, style, onClick, ...props }, ref) => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" && onClick) {
+        onClick();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.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();
@@ -7956,7 +7960,7 @@ const AgentMetadataSection = ({ title, children, hint }) => {
     /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "h3", variant: "ui-md", className: "text-icon3 flex items-center gap-1", children: [
       title,
       hint && /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}) }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: hint.link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "text-icon3", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, {}) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: hint.title })
       ] }) })
     ] }),
@@ -8299,7 +8303,7 @@ const SelectTrigger = React__namespace.forwardRef(({ className, children, ...pro
   {
     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,
@@ -8339,7 +8343,7 @@ const SelectItem = React__namespace.forwardRef(({ className, children, ...props
   {
     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,
@@ -8360,7 +8364,7 @@ const PopoverContent = React__namespace.forwardRef(({ className, align = "center
     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
@@ -10309,7 +10313,7 @@ const WorkflowStepActionBar = ({
         ] }),
         onShowTrace && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onShowTrace, children: "Show trace" }),
         showEventForm && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "ring-1 ring-accent5 !text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "!text-accent5", onClick: () => setIsEventFormOpen(true), children: "Send event" }),
           /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isEventFormOpen, onOpenChange: setIsEventFormOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: dialogContentClass, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: dialogTitleClass, children: [
               "Send ",
@@ -10340,8 +10344,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__ */ jsxRuntime.jsxs(
@@ -10457,11 +10461,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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -10761,11 +10765,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__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2 px-3", !description && "pb-2"), children: [
@@ -11353,7 +11357,7 @@ const Composer = ({ hasMemory }) => {
         /* @__PURE__ */ jsxRuntime.jsx(react.ComposerPrimitive.Input, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.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: "",
@@ -12095,6 +12099,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__ */ jsxRuntime.jsx("kbd", { className: clsx("border-sm rounded-md px-1 py-0.5 font-mono", themeClass), children });
+};
+
+const Searchbar = ({ onSearch, label, placeholder }) => {
+  const id = React.useId();
+  const inputRef = React.useRef(null);
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "text-icon3 h-4 w-4" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { type: "submit", className: "text-ui-sm text-icon3 flex flex-row items-center gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "Enter" }) })
+      ]
+    }
+  );
+};
+
 const ToolList = ({ tools, agents, isLoading, computeLink, computeAgentLink }) => {
   const toolsWithAgents = React.useMemo(() => prepareAgents(tools, agents), [tools, agents]);
   if (isLoading)
@@ -12109,8 +12172,7 @@ const ToolListInner = ({
   const [filteredTools, setFilteredTools] = React.useState(toolsWithAgents);
   const [value, setValue] = React.useState("");
   if (filteredTools.length === 0 && !value) return /* @__PURE__ */ jsxRuntime.jsx(ToolListEmpty, {});
-  const handleSearch = (e) => {
-    const value2 = e.target.value;
+  const handleSearch = (value2) => {
     setValue(value2);
     React.startTransition(() => {
       setFilteredTools(
@@ -12124,19 +12186,7 @@ const ToolListInner = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-5xl w-full mx-auto px-4 pt-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 flex items-center gap-2 rounded-lg bg-surface5 focus-within:ring-2 focus-within:ring-accent3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {}) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Searchbar, { onSearch: handleSearch, label: "Search for a tool", placeholder: "Search for a tool" }),
       filteredTools.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "p", className: "text-icon3 py-2", children: "No tools found matching your search." })
     ] }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToolEntity, { tool, computeLink, computeAgentLink }, tool.id)) })
@@ -12490,7 +12540,7 @@ const Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     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,
@@ -15123,6 +15173,9 @@ exports.Cell = Cell;
 exports.ChatThreads = ChatThreads;
 exports.CheckIcon = CheckIcon;
 exports.ChevronIcon = ChevronIcon;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.CommitIcon = CommitIcon;
 exports.CrossIcon = CrossIcon;
 exports.Crumb = Crumb;
@@ -15162,6 +15215,7 @@ exports.HomeIcon = HomeIcon;
 exports.Icon = Icon;
 exports.InfoIcon = InfoIcon;
 exports.JudgeIcon = JudgeIcon;
+exports.Kbd = Kbd;
 exports.LatencyIcon = LatencyIcon;
 exports.LegacyWorkflowGraph = LegacyWorkflowGraph;
 exports.LegacyWorkflowTrigger = LegacyWorkflowTrigger;
@@ -15194,6 +15248,7 @@ exports.RuntimeContextWrapper = RuntimeContextWrapper;
 exports.ScoreIcon = ScoreIcon;
 exports.ScorerList = ScorerList;
 exports.ScorerSkeleton = ScorerSkeleton;
+exports.Searchbar = Searchbar;
 exports.SettingsIcon = SettingsIcon;
 exports.SlashIcon = SlashIcon;
 exports.Tab = Tab;