feat: lancedb vector tool selection (#2654)

Co-authored-by: Wendy Tang <wendytang@squareup.com>
Co-authored-by: Alice Hau <ahau@squareup.com>

ui/desktop/src/components/settings_v2/SettingsView.tsx

@@ -4,6 +4,7 @@ import type { View, ViewOptions } from '../../App';
 import ExtensionsSection from './extensions/ExtensionsSection';
 import ModelsSection from './models/ModelsSection';
 import { ModeSection } from './mode/ModeSection';
+import { ToolSelectionStrategySection } from './tool_selection_strategy/ToolSelectionStrategySection';
 import SessionSharingSection from './sessions/SessionSharingSection';
 import { ResponseStylesSection } from './response_styles/ResponseStylesSection';
 import { ExtensionConfig } from '../../api';
@@ -50,6 +51,8 @@ export default function SettingsView({
               <SessionSharingSection />
               {/* Response Styles */}
               <ResponseStylesSection />
+              {/* Tool Selection Strategy */}
+              <ToolSelectionStrategySection setView={setView} />
             </div>
           </div>
         </div>

ui/desktop/src/components/settings_v2/tool_selection_strategy/ToolSelectionStrategySection.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState, useCallback } from 'react';
+import { View, ViewOptions } from '../../../App';
+import { useConfig } from '../../ConfigContext';
+
+interface ToolSelectionStrategySectionProps {
+  setView: (view: View, viewOptions?: ViewOptions) => void;
+}
+
+export const all_tool_selection_strategies = [
+  {
+    key: 'default',
+    label: 'Default',
+    description: 'Loads all tools from enabled extensions',
+  },
+  {
+    key: 'vector',
+    label: 'Vector',
+    description:
+      'Filter tools based on vector-based similarity. Recommended when many extensions are enabled.',
+  },
+];
+
+export const ToolSelectionStrategySection = ({
+  setView: _setView,
+}: ToolSelectionStrategySectionProps) => {
+  const [currentStrategy, setCurrentStrategy] = useState('default');
+  const { read, upsert } = useConfig();
+
+  const handleStrategyChange = async (newStrategy: string) => {
+    try {
+      await upsert('GOOSE_ROUTER_TOOL_SELECTION_STRATEGY', newStrategy, false);
+      setCurrentStrategy(newStrategy);
+    } catch (error) {
+      console.error('Error updating tool selection strategy:', error);
+      throw new Error(`Failed to store new tool selection strategy: ${newStrategy}`);
+    }
+  };
+
+  const fetchCurrentStrategy = useCallback(async () => {
+    try {
+      const strategy = (await read('GOOSE_ROUTER_TOOL_SELECTION_STRATEGY', false)) as string;
+      if (strategy) {
+        setCurrentStrategy(strategy);
+      }
+    } catch (error) {
+      console.error('Error fetching current tool selection strategy:', error);
+    }
+  }, [read]);
+
+  useEffect(() => {
+    fetchCurrentStrategy();
+  }, [fetchCurrentStrategy]);
+
+  return (
+    <section id="tool-selection-strategy" className="px-8">
+      <div className="flex justify-between items-center mb-2">
+        <h2 className="text-xl font-medium text-textStandard">Tool Selection Strategy (preview)</h2>
+      </div>
+      <div className="border-b border-borderSubtle pb-8">
+        <p className="text-sm text-textStandard mb-6">
+          Configure how Goose selects tools for your requests. Available only with Claude models
+          served on Databricks.
+        </p>
+        <div>
+          {all_tool_selection_strategies.map((strategy) => (
+            <div className="group hover:cursor-pointer" key={strategy.key}>
+              <div
+                className="flex items-center justify-between text-textStandard py-2 px-4 hover:bg-bgSubtle"
+                onClick={() => handleStrategyChange(strategy.key)}
+              >
+                <div className="flex">
+                  <div>
+                    <h3 className="text-textStandard">{strategy.label}</h3>
+                    <p className="text-xs text-textSubtle mt-[2px]">{strategy.description}</p>
+                  </div>
+                </div>
+
+                <div className="relative flex items-center gap-2">
+                  <input
+                    type="radio"
+                    name="tool-selection-strategy"
+                    value={strategy.key}
+                    checked={currentStrategy === strategy.key}
+                    onChange={() => handleStrategyChange(strategy.key)}
+                    className="peer sr-only"
+                  />
+                  <div
+                    className="h-4 w-4 rounded-full border border-borderStandard 
+                          peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
+                          peer-checked:bg-white dark:peer-checked:bg-black
+                          transition-all duration-200 ease-in-out group-hover:border-borderProminent"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};