feat(dashboard): add fuzzy/semantic search mode toggle

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/dashboard/src/components/SearchBar.tsx

@@ -15,6 +15,8 @@ export default function SearchBar() {
   const graph = useDashboardStore((s) => s.graph);
   const setSearchQuery = useDashboardStore((s) => s.setSearchQuery);
   const selectNode = useDashboardStore((s) => s.selectNode);
+  const searchMode = useDashboardStore((s) => s.searchMode);
+  const setSearchMode = useDashboardStore((s) => s.setSearchMode);
 
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -94,10 +96,32 @@ export default function SearchBar() {
           placeholder="Search nodes by name, summary, or tags..."
           className="flex-1 bg-gray-700 text-white text-sm rounded px-3 py-1.5 border border-gray-600 focus:outline-none focus:border-blue-500 placeholder-gray-400"
         />
+        <div className="flex items-center gap-1 bg-gray-700 rounded p-0.5 shrink-0">
+          <button
+            onClick={() => setSearchMode("fuzzy")}
+            className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
+              searchMode === "fuzzy"
+                ? "bg-gray-600 text-white"
+                : "text-gray-400 hover:text-gray-300"
+            }`}
+          >
+            Fuzzy
+          </button>
+          <button
+            onClick={() => setSearchMode("semantic")}
+            className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
+              searchMode === "semantic"
+                ? "bg-gray-600 text-white"
+                : "text-gray-400 hover:text-gray-300"
+            }`}
+          >
+            Semantic
+          </button>
+        </div>
         {searchQuery.trim() && (
           <span className="text-xs text-gray-400 shrink-0">
             {searchResults.length} result{searchResults.length !== 1 ? "s" : ""}{" "}
-            <span className="text-gray-500">(fuzzy)</span>
+            <span className="text-gray-500">({searchMode})</span>
           </span>
         )}
       </div>

packages/dashboard/src/store.ts

@@ -20,6 +20,8 @@ interface DashboardStore {
   searchQuery: string;
   searchResults: SearchResult[];
   searchEngine: SearchEngine | null;
+  searchMode: "fuzzy" | "semantic";
+  setSearchMode: (mode: "fuzzy" | "semantic") => void;
 
   apiKey: string;
   chatMessages: ChatMessage[];
@@ -135,6 +137,7 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
   searchQuery: "",
   searchResults: [],
   searchEngine: null,
+  searchMode: "fuzzy",
 
   apiKey: "",
   chatMessages: [],
@@ -159,12 +162,17 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
     set({ graph, searchEngine, searchResults });
   },
   selectNode: (nodeId) => set({ selectedNodeId: nodeId, nodeExplanation: null }),
+  setSearchMode: (mode) => set({ searchMode: mode }),
   setSearchQuery: (query) => {
     const engine = get().searchEngine;
+    const mode = get().searchMode;
     if (!engine || !query.trim()) {
       set({ searchQuery: query, searchResults: [] });
       return;
     }
+    // Currently both modes use the same fuzzy engine
+    // When embeddings are available, "semantic" mode will use SemanticSearchEngine
+    void mode;
     const searchResults = engine.search(query);
     set({ searchQuery: query, searchResults });
   },