Feature/v2/automate (#4248)

* automate feature
* Moved all providers to app level to simplify homepage 
* Circular dependency fixes
* You will see that now toolRegistry gets a tool config and a tool
settings object. These enable automate to run the tools using as much
static code as possible.

---------

Co-authored-by: Connor Yoh <[email protected]>

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

@@ -12,19 +12,26 @@ interface ToolSearchProps {
   onToolSelect?: (toolId: string) => void;
   mode: 'filter' | 'dropdown';
   selectedToolKey?: string | null;
+  placeholder?: string;
+  hideIcon?: boolean;
+  onFocus?: () => void;
 }
 
-const ToolSearch = ({ 
-  value, 
-  onChange, 
-  toolRegistry, 
-  onToolSelect, 
+const ToolSearch = ({
+  value,
+  onChange,
+  toolRegistry,
+  onToolSelect,
   mode = 'filter',
-  selectedToolKey 
+  selectedToolKey,
+  placeholder,
+  hideIcon = false,
+  onFocus
 }: ToolSearchProps) => {
   const { t } = useTranslation();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const filteredTools = useMemo(() => {
     if (!value.trim()) return [];
@@ -47,7 +54,12 @@ const ToolSearch = ({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+      if (
+        searchRef.current &&
+        dropdownRef.current &&
+        !searchRef.current.contains(event.target as Node) &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setDropdownOpen(false);
       }
     };
@@ -61,9 +73,10 @@ const ToolSearch = ({
         ref={searchRef}
         value={value}
         onChange={handleSearchChange}
-        placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
-        icon={<span className="material-symbols-rounded">search</span>}
+        placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
+        icon={hideIcon ? undefined : <span className="material-symbols-rounded">search</span>}
         autoComplete="off"
+
       />
     </div>
   );
@@ -77,19 +90,19 @@ const ToolSearch = ({
       {searchInput}
       {dropdownOpen && filteredTools.length > 0 && (
         <div
+          ref={dropdownRef}
           style={{
             position: 'absolute',
             top: '100%',
             left: 0,
             right: 0,
             zIndex: 1000,
-            backgroundColor: 'var(--bg-toolbar)',
-            border: '1px solid var(--border-default)',
-            borderRadius: '8px',
-            marginTop: '4px',
+            backgroundColor: 'var(--mantine-color-body)',
+            border: '1px solid var(--mantine-color-gray-3)',
+            borderRadius: '6px',
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
             maxHeight: '300px',
-            overflowY: 'auto',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+            overflowY: 'auto'
           }}
         >
           <Stack gap="xs" style={{ padding: '8px' }}>
@@ -97,7 +110,10 @@ const ToolSearch = ({
               <Button
                 key={id}
                 variant="subtle"
-                onClick={() => onToolSelect && onToolSelect(id)}
+                onClick={() => {
+                  onToolSelect && onToolSelect(id);
+                  setDropdownOpen(false);
+                }}
                 leftSection={
                   <div style={{ color: 'var(--tools-text-and-icon-color)' }}>
                     {tool.icon}
@@ -126,4 +142,4 @@ const ToolSearch = ({
   );
 };
 
-export default ToolSearch; 
+export default ToolSearch;