Feature/v2/fuzzy tool search (#4482)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/components/tools/SearchResults.tsx

@@ -9,13 +9,22 @@ import NoToolsFound from './shared/NoToolsFound';
 import "./toolPicker/ToolPicker.css";
 
 interface SearchResultsProps {
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
   onSelect: (id: string) => void;
+  searchQuery?: string;
 }
 
-const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }) => {
+const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
   const { t } = useTranslation();
-  const { searchGroups } = useToolSections(filteredTools);
+  const { searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (filteredTools && Array.isArray(filteredTools)) {
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
 
   if (searchGroups.length === 0) {
     return <NoToolsFound />;
@@ -28,15 +37,27 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
         <Box key={group.subcategoryId}  w="100%">
           <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
           <Stack  gap="xs">
-            {group.tools.map(({ id, tool }) => (
-              <ToolButton
-                key={id}
-                id={id}
-                tool={tool}
-                isSelected={false}
-                onSelect={onSelect}
-              />
-            ))}
+            {group.tools.map(({ id, tool }) => {
+              const matchedText = matchedTextMap.get(id);
+              // Check if the match was from synonyms and show the actual synonym that matched
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              );
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              ) : undefined;
+              
+              return (
+                <ToolButton
+                  key={id}
+                  id={id}
+                  tool={tool}
+                  isSelected={false}
+                  onSelect={onSelect}
+                  matchedSynonym={matchedSynonym}
+                />
+              );
+            })}
           </Stack>
         </Box>
       ))}

frontend/src/components/tools/ToolPanel.tsx

@@ -72,6 +72,7 @@ export default function ToolPanel() {
               <SearchResults
                 filteredTools={filteredTools}
                 onSelect={handleToolSelect}
+                searchQuery={searchQuery}
               />
           </div>
         ) : leftPanelView === 'toolPicker' ? (

frontend/src/components/tools/ToolPicker.tsx

@@ -10,7 +10,7 @@ import { renderToolButtons } from "./shared/renderToolButtons";
 interface ToolPickerProps {
   selectedToolKey: string | null;
   onSelect: (id: string) => void;
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
   isSearching?: boolean;
 }
 

frontend/src/components/tools/automate/ToolSelector.tsx

@@ -58,8 +58,13 @@ export default function ToolSelector({
     return registry;
   }, [baseFilteredTools]);
 
+  // Transform filteredTools to the expected format for useToolSections
+  const transformedFilteredTools = useMemo(() => {
+    return filteredTools.map(([id, tool]) => ({ item: [id, tool] as [string, ToolRegistryEntry] }));
+  }, [filteredTools]);
+
   // Use the same tool sections logic as the main ToolPicker
-  const { sections, searchGroups } = useToolSections(filteredTools);
+  const { sections, searchGroups } = useToolSections(transformedFilteredTools);
 
   // Determine what to display: search results or organized sections
   const isSearching = searchTerm.trim().length > 0;

frontend/src/components/tools/shared/renderToolButtons.tsx

@@ -13,23 +13,39 @@ export const renderToolButtons = (
   selectedToolKey: string | null,
   onSelect: (id: string) => void,
   showSubcategoryHeader: boolean = true,
-  disableNavigation: boolean = false
-) => (
-  <Box key={subcategory.subcategoryId} w="100%">
-    {showSubcategoryHeader && (
-      <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
-    )}
-    <div>
-      {subcategory.tools.map(({ id, tool }) => (
-        <ToolButton
-          key={id}
-          id={id}
-          tool={tool}
-          isSelected={selectedToolKey === id}
-          onSelect={onSelect}
-          disableNavigation={disableNavigation}
-        />
-      ))}
-    </div>
-  </Box>
-);
+  disableNavigation: boolean = false,
+  searchResults?: Array<{ item: [string, any]; matchedText?: string }>
+) => {
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (searchResults) {
+    searchResults.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
+
+  return (
+    <Box key={subcategory.subcategoryId} w="100%">
+      {showSubcategoryHeader && (
+        <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
+      )}
+      <div>
+        {subcategory.tools.map(({ id, tool }) => {
+          const matchedSynonym = matchedTextMap.get(id);
+          
+          return (
+            <ToolButton
+              key={id}
+              id={id}
+              tool={tool}
+              isSelected={selectedToolKey === id}
+              onSelect={onSelect}
+              disableNavigation={disableNavigation}
+              matchedSynonym={matchedSynonym}
+            />
+          );
+        })}
+      </div>
+    </Box>
+  );
+};

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -13,9 +13,10 @@ interface ToolButtonProps {
   onSelect: (id: string) => void;
   rounded?: boolean;
   disableNavigation?: boolean;
+  matchedSynonym?: string;
 }
 
-const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false }) => {
+const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym }) => {
   const isUnavailable = !tool.component && !tool.link;
   const { getToolNavigation } = useToolNavigation();
 
@@ -40,13 +41,27 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   const buttonContent = (
     <>
       <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
-      <FitText
-        text={tool.name}
-        lines={1}
-        minimumFontScale={0.8}
-        as="span"
-        style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
-      />
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
+        <FitText
+          text={tool.name}
+          lines={1}
+          minimumFontScale={0.8}
+          as="span"
+          style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
+        />
+        {matchedSynonym && (
+          <span style={{ 
+            fontSize: '0.75rem', 
+            color: 'var(--mantine-color-dimmed)', 
+            opacity: isUnavailable ? 0.25 : 1,
+            marginTop: '1px',
+            overflow: 'visible',
+            whiteSpace: 'nowrap'
+          }}>
+            {matchedSynonym}
+          </span>
+        )}
+      </div>
     </>
   );
 
@@ -66,7 +81,10 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       fullWidth
       justify="flex-start"
       className="tool-button"
-      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
+      styles={{ 
+        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+        label: { overflow: 'visible' }
+      }}
     >
       {buttonContent}
     </Button>
@@ -84,7 +102,10 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       fullWidth
       justify="flex-start"
       className="tool-button"
-      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
+      styles={{ 
+        root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", overflow: 'visible' },
+        label: { overflow: 'visible' }
+      }}
     >
       {buttonContent}
     </Button>
@@ -99,7 +120,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
       justify="flex-start"
       className="tool-button"
       aria-disabled={isUnavailable}
-      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
+      styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined, overflow: 'visible' }, label: { overflow: 'visible' } }}
     >
       {buttonContent}
     </Button>

frontend/src/components/tools/toolPicker/ToolSearch.tsx

@@ -5,6 +5,7 @@ import LocalIcon from '../../shared/LocalIcon';
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { TextInput } from "../../shared/TextInput";
 import "./ToolPicker.css";
+import { rankByFuzzy, idToWords } from "../../../utils/fuzzySearch";
 
 interface ToolSearchProps {
   value: string;
@@ -38,15 +39,14 @@ const ToolSearch = ({
 
   const filteredTools = useMemo(() => {
     if (!value.trim()) return [];
-    return Object.entries(toolRegistry)
-      .filter(([id, tool]) => {
-        if (mode === "dropdown" && id === selectedToolKey) return false;
-        return (
-          tool.name.toLowerCase().includes(value.toLowerCase()) || tool.description.toLowerCase().includes(value.toLowerCase())
-        );
-      })
-      .slice(0, 6)
-      .map(([id, tool]) => ({ id, tool }));
+    const entries = Object.entries(toolRegistry).filter(([id]) => !(mode === "dropdown" && id === selectedToolKey));
+    const ranked = rankByFuzzy(entries, value, [
+      ([key]) => idToWords(key),
+      ([, v]) => v.name,
+      ([, v]) => v.description,
+      ([, v]) => v.synonyms?.join(' ') || '',
+    ]).slice(0, 6);
+    return ranked.map(({ item: [id, tool] }) => ({ id, tool }));
   }, [value, toolRegistry, mode, selectedToolKey]);
 
   const handleSearchChange = (searchValue: string) => {