Add search filtering to CommandDialog for improved script search functionality (#10800)

frontend/src/components/command-menu.tsx

@@ -194,7 +194,20 @@ function CommandMenu() {
         </TooltipProvider>
       </div>
 
-      <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandDialog
+        open={open}
+        onOpenChange={setOpen}
+        filter={(value: string, search: string) => {
+          const searchLower = search.toLowerCase().trim();
+          if (!searchLower)
+            return 1;
+          const valueLower = value.toLowerCase();
+          const searchWords = searchLower.split(/\s+/).filter(Boolean);
+          // All search words must appear somewhere in the value (name + description)
+          const allWordsMatch = searchWords.every((word: string) => valueLower.includes(word));
+          return allWordsMatch ? 1 : 0;
+        }}
+      >
         <DialogTitle className="sr-only">Search scripts</DialogTitle>
         <CommandInput placeholder="Search for a script..." />
         <CommandList>
@@ -204,7 +217,7 @@ function CommandMenu() {
               {scripts.map(script => (
                 <CommandItem
                   key={`script:${script.slug}`}
-                  value={`${script.name}-${script.type}`}
+                  value={`${script.name} ${script.type} ${script.description || ""}`}
                   onSelect={() => {
                     setOpen(false);
                     router.push(`/scripts?id=${script.slug}`);

frontend/src/components/ui/command.tsx

@@ -24,13 +24,18 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = {} & DialogProps;
+type CommandDialogProps = {
+  filter?: (value: string, search: string, keywords?: string[]) => number;
+} & DialogProps;
 
-function CommandDialog({ children, ...props }: CommandDialogProps) {
+function CommandDialog({ children, filter, ...props }: CommandDialogProps) {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command
+          filter={filter}
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+        >
           {children}
         </Command>
       </DialogContent>