From 1c621e53fc1fabafc70ebb1a6c9bb60adee6bb64 Mon Sep 17 00:00:00 2001
From: mruwnik <ai@ahiru.pl>
Date: Sun, 21 Dec 2025 16:18:04 +0000
Subject: [PATCH] Add search enhancement options to frontend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add collapsible "Search Enhancements" section with toggles for:
  - BM25 (keyword search)
  - HyDE (hypothetical document expansion)
  - Reranking (cross-encoder)
  - Query Analysis (LLM-based)
- Update SearchConfig type to include new options
- Add CSS styling for the enhancement options panel

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/App.css                          | 38 +++++++++++
 frontend/src/components/search/SearchForm.tsx | 64 ++++++++++++++++++-
 2 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 193eabe..bf027d9 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -352,6 +352,44 @@ body {
   accent-color: #667eea;
 }
 
+/* Search Enhancements */
+.search-enhancements {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e2e8f0;
+}
+
+.search-enhancements summary {
+  cursor: pointer;
+  font-weight: 500;
+  color: #4a5568;
+  font-size: 0.9rem;
+  user-select: none;
+}
+
+.search-enhancements summary:hover {
+  color: #667eea;
+}
+
+.search-enhancements[open] summary {
+  margin-bottom: 0.75rem;
+}
+
+.enhancement-options {
+  display: grid;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.enhancement-options .search-option {
+  margin: 0;
+}
+
+.enhancement-options .search-option label {
+  font-size: 0.85rem;
+}
+
 /* Search Results */
 .search-results {
   margin-top: 2rem;
diff --git a/frontend/src/components/search/SearchForm.tsx b/frontend/src/components/search/SearchForm.tsx
index 5b0a5c5..4bf3737 100644
--- a/frontend/src/components/search/SearchForm.tsx
+++ b/frontend/src/components/search/SearchForm.tsx
@@ -14,6 +14,11 @@ type SearchConfig = {
     previews: boolean
     useScores: boolean
     limit: number
+    // Search enhancement options
+    useBm25?: boolean
+    useHyde?: boolean
+    useReranking?: boolean
+    useQueryAnalysis?: boolean
 }
 
 export interface SearchParams {
@@ -51,6 +56,11 @@ export const SearchForm = ({ isLoading, onSearch }: SearchFormProps) => {
     const [tags, setTags] = useState<Record<string, boolean>>({})
     const [dynamicFilters, setDynamicFilters] = useState<Record<string, any>>({})
     const [limit, setLimit] = useState(10)
+    // Search enhancement options (undefined = use server defaults)
+    const [useBm25, setUseBm25] = useState<boolean | undefined>(undefined)
+    const [useHyde, setUseHyde] = useState<boolean | undefined>(undefined)
+    const [useReranking, setUseReranking] = useState<boolean | undefined>(undefined)
+    const [useQueryAnalysis, setUseQueryAnalysis] = useState<boolean | undefined>(undefined)
     const { getMetadataSchemas, getTags } = useMCP()
     
     useEffect(() => {
@@ -71,14 +81,18 @@ export const SearchForm = ({ isLoading, onSearch }: SearchFormProps) => {
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault()
-        
+
         onSearch({
             query,
             modalities: getSelectedItems(modalities),
             config: {
                 previews,
                 useScores,
-                limit
+                limit,
+                useBm25,
+                useHyde,
+                useReranking,
+                useQueryAnalysis,
             },
             filters: {
                 tags: getSelectedItems(tags),
@@ -125,6 +139,52 @@ export const SearchForm = ({ isLoading, onSearch }: SearchFormProps) => {
                     </label>
                 </div>
 
+                <details className="search-enhancements">
+                    <summary>Search Enhancements</summary>
+                    <div className="enhancement-options">
+                        <div className="search-option">
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={useBm25 ?? false}
+                                    onChange={(e) => setUseBm25(e.target.checked)}
+                                />
+                                Enable BM25 (keyword search)
+                            </label>
+                        </div>
+                        <div className="search-option">
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={useHyde ?? false}
+                                    onChange={(e) => setUseHyde(e.target.checked)}
+                                />
+                                Enable HyDE (hypothetical document expansion)
+                            </label>
+                        </div>
+                        <div className="search-option">
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={useReranking ?? false}
+                                    onChange={(e) => setUseReranking(e.target.checked)}
+                                />
+                                Enable reranking (cross-encoder)
+                            </label>
+                        </div>
+                        <div className="search-option">
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    checked={useQueryAnalysis ?? false}
+                                    onChange={(e) => setUseQueryAnalysis(e.target.checked)}
+                                />
+                                Enable query analysis (LLM-based)
+                            </label>
+                        </div>
+                    </div>
+                </details>
+
                 <SelectableTags 
                     title="Modalities" 
                     className="modality-checkboxes"