Change use KD-tree as default

Author: Ariel Vernaza

frontend/src/pages/LibraryDetail.jsx

@@ -69,6 +69,8 @@ export default function LibraryDetail() {
   const [searching, setSearching] = useState(false);
   const [searchResults, setSearchResults] = useState(null);
   const [embedder, setEmbedder] = useState("cohere://");
+  const [indexAlgorithm, setIndexAlgorithm] = useState("kd_tree");
+  const [lastBuiltAlgorithm, setLastBuiltAlgorithm] = useState(null);
 
   function load() {
     setError(null);
@@ -82,6 +84,8 @@ export default function LibraryDetail() {
   }
 
   useEffect(() => {
+    setIndexBuilt(false);
+    setLastBuiltAlgorithm(null);
     load();
   }, [libraryId]);
 
@@ -105,14 +109,22 @@ export default function LibraryDetail() {
   async function handleBuildIndex() {
     setBuilding(true);
     setError(null);
-    try {
-      await buildIndex(libraryId, "brute_force");
-      setIndexBuilt(true);
-    } catch (e) {
-      setError(e.message);
-    } finally {
-      setBuilding(false);
+    const order = indexAlgorithm === "auto" ? ["kd_tree", "ivf", "brute_force"] : [indexAlgorithm];
+    let lastErr = null;
+    let used = null;
+    for (const algo of order) {
+      try {
+        await buildIndex(libraryId, algo);
+        setIndexBuilt(true);
+        setLastBuiltAlgorithm(algo);
+        used = algo;
+        break;
+      } catch (e) {
+        lastErr = e;
+      }
     }
+    if (!used) setError(lastErr?.message ?? "Index build failed");
+    setBuilding(false);
   }
 
   async function handleSearch(e) {
@@ -253,15 +265,30 @@ export default function LibraryDetail() {
       <div className="card">
         <h2>Build index</h2>
         <p style={{ marginBottom: "0.75rem", color: "var(--text-muted)", fontSize: "0.875rem" }}>
-          Required before search. Build after ingesting documents.
+          Required before search. Build after ingesting documents. <strong>Auto</strong> tries KD-Tree → IVF → Brute-force until one succeeds. Brute-force and KD-Tree are exact; IVF is approximate.
         </p>
+        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap", marginBottom: "0.75rem" }}>
+          <label className="label" htmlFor="index-algorithm">Algorithm</label>
+          <select
+            id="index-algorithm"
+            className="input"
+            value={indexAlgorithm}
+            onChange={(e) => setIndexAlgorithm(e.target.value)}
+            style={{ maxWidth: "320px" }}
+          >
+            <option value="auto">Auto (KD-Tree → IVF → Brute-force)</option>
+            <option value="kd_tree">KD-Tree (exact, O(log n) typical)</option>
+            <option value="ivf">IVF (approximate, cluster-based)</option>
+            <option value="brute_force">Brute-force (exact, linear scan)</option>
+          </select>
+        </div>
         <button
           type="button"
           className="btn btn-primary"
           onClick={handleBuildIndex}
           disabled={building || totalChunks === 0}
         >
-          {building ? "Building…" : indexBuilt ? "Index built" : "Build index (brute_force)"}
+          {building ? "Building…" : indexBuilt ? `Index built (${lastBuiltAlgorithm ?? indexAlgorithm})` : `Build index (${indexAlgorithm === "auto" ? "auto" : indexAlgorithm})`}
         </button>
       </div>