Better fuzzy matching for '@' file search

Author: jahooma

cli/src/hooks/use-suggestion-engine.ts

@@ -1,8 +1,9 @@
 import { promises as fs } from 'fs'
 
 import {
-  getAllFilePaths,
+  getAllPathsWithDirectories,
   getProjectFileTree,
+  type PathInfo,
 } from '@codebuff/common/project-file-tree'
 import { useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 
@@ -269,11 +270,13 @@ export type MatchedAgentInfo = Prettify<
 
 export type MatchedFileInfo = Prettify<{
   filePath: string
+  isDirectory: boolean
   pathHighlightIndices?: number[] | null
+  matchScore?: number
 }>
 
-const flattenFileTree = (nodes: FileTreeNode[]): string[] =>
-  getAllFilePaths(nodes)
+const flattenFileTree = (nodes: FileTreeNode[]): PathInfo[] =>
+  getAllPathsWithDirectories(nodes)
 
 const getFileName = (filePath: string): string => {
   const lastSlash = filePath.lastIndexOf('/')
@@ -297,8 +300,72 @@ const createPushUnique = <T, K>(
   }
 }
 
+/**
+ * Fuzzy match: matches characters in order, allowing gaps.
+ * Returns highlight indices if matched, null if not.
+ * Also returns a score (lower is better) based on match quality.
+ */
+const fuzzyMatch = (
+  text: string,
+  query: string,
+): { indices: number[]; score: number } | null => {
+  const textLower = text.toLowerCase()
+  const queryLower = query.toLowerCase()
+  const indices: number[] = []
+  let textIdx = 0
+  let lastMatchIdx = -1
+  let gaps = 0
+  let consecutiveMatches = 0
+  let maxConsecutive = 0
+
+  for (let queryIdx = 0; queryIdx < queryLower.length; queryIdx++) {
+    const char = queryLower[queryIdx]
+    let found = false
+
+    while (textIdx < textLower.length) {
+      if (textLower[textIdx] === char) {
+        // Prefer matches at word boundaries (after / or at start)
+        if (lastMatchIdx >= 0 && textIdx > lastMatchIdx + 1) {
+          gaps += textIdx - lastMatchIdx - 1
+          consecutiveMatches = 1
+        } else {
+          consecutiveMatches++
+          maxConsecutive = Math.max(maxConsecutive, consecutiveMatches)
+        }
+        indices.push(textIdx)
+        lastMatchIdx = textIdx
+        textIdx++
+        found = true
+        break
+      }
+      textIdx++
+    }
+
+    if (!found) return null
+  }
+
+  // Capture final consecutive run
+  maxConsecutive = Math.max(maxConsecutive, consecutiveMatches)
+
+  // Score: lower is better
+  // - Fewer gaps = better
+  // - Longer consecutive matches = better
+  // - Matches at word boundaries (after /) = better
+  const boundaryBonus = indices.filter(
+    (idx) => idx === 0 || text[idx - 1] === '/'
+  ).length
+
+  const score =
+    gaps * 10 -
+    maxConsecutive * 5 -
+    boundaryBonus * 15 +
+    (indices[0] ?? 0) // Prefer matches that start earlier
+
+  return { indices, score }
+}
+
 const filterFileMatches = (
-  filePaths: string[],
+  pathInfos: PathInfo[],
   query: string,
 ): MatchedFileInfo[] => {
   if (!query) {
@@ -318,138 +385,110 @@ const filterFileMatches = (
   const querySegments = normalized.split('/')
   const hasSlashes = querySegments.length > 1
 
-  // Helper to calculate the longest contiguous match length in the file path
-  const calculateContiguousMatchLength = (filePath: string): number => {
-    const pathLower = filePath.toLowerCase()
-    let maxContiguousLength = 0
-
-    // Try to find the longest contiguous substring that matches the query pattern
-    for (let i = 0; i < pathLower.length; i++) {
-      let matchLength = 0
-      let queryIdx = 0
-      let pathIdx = i
-
-      // Try to match as many characters as possible from this position
-      while (pathIdx < pathLower.length && queryIdx < normalized.length) {
-        if (pathLower[pathIdx] === normalized[queryIdx]) {
-          matchLength++
-          queryIdx++
-          pathIdx++
-        } else {
-          break
-        }
-      }
-
-      maxContiguousLength = Math.max(maxContiguousLength, matchLength)
-    }
-
-    return maxContiguousLength
-  }
-
-  // Helper to match path segments
-  const matchPathSegments = (filePath: string): number[] | null => {
+  // Helper to match path segments (for queries with /)
+  const matchPathSegments = (filePath: string): { indices: number[]; score: number } | null => {
     const pathLower = filePath.toLowerCase()
     const highlightIndices: number[] = []
     let searchStart = 0
+    let totalGaps = 0
 
     for (const segment of querySegments) {
       if (!segment) continue
-      
+
       const segmentIndex = pathLower.indexOf(segment, searchStart)
       if (segmentIndex === -1) {
         return null
       }
 
-      // Add highlight indices for this segment
+      // Count gaps between segments
+      if (searchStart > 0) {
+        totalGaps += segmentIndex - searchStart
+      }
+
       for (let i = 0; i < segment.length; i++) {
         highlightIndices.push(segmentIndex + i)
       }
 
       searchStart = segmentIndex + segment.length
     }
 
-    return highlightIndices
+    const score = totalGaps * 5 + filePath.length
+    return { indices: highlightIndices, score }
   }
 
-  if (hasSlashes) {
-    // Slash-separated path matching
-    for (const filePath of filePaths) {
-      const highlightIndices = matchPathSegments(filePath)
-      if (highlightIndices) {
-        pushUnique(matches, {
-          filePath,
-          pathHighlightIndices: highlightIndices,
-        })
-      }
+  for (const { path: filePath, isDirectory } of pathInfos) {
+    if (seen.has(filePath)) continue
+
+    const fileName = getFileName(filePath)
+    const fileNameLower = fileName.toLowerCase()
+    const pathLower = filePath.toLowerCase()
+
+    let matchResult: { indices: number[]; score: number } | null = null
+
+    if (hasSlashes) {
+      // Try path segment matching first
+      matchResult = matchPathSegments(filePath)
     }
 
-    // Sort by contiguous match length (longest first)
-    matches.sort((a, b) => {
-      const aLength = calculateContiguousMatchLength(a.filePath)
-      const bLength = calculateContiguousMatchLength(b.filePath)
-      return bLength - aLength
-    })
-  } else {
-    // Original logic for non-slash queries
-    
-    // Prefix of file name
-    for (const filePath of filePaths) {
-      const fileName = getFileName(filePath)
-      const fileNameLower = fileName.toLowerCase()
-
-      if (fileNameLower.startsWith(normalized)) {
-        pushUnique(matches, {
-          filePath,
-          pathHighlightIndices: createHighlightIndices(
-            filePath.lastIndexOf(fileName),
-            filePath.lastIndexOf(fileName) + normalized.length,
-          ),
-        })
-        continue
+    if (!matchResult) {
+      // Try exact prefix of full path (highest priority)
+      if (pathLower.startsWith(normalized)) {
+        matchResult = {
+          indices: createHighlightIndices(0, normalized.length),
+          score: -1000 + filePath.length, // Very high priority
+        }
       }
-
-      const path = filePath.toLowerCase()
-      if (path.startsWith(normalized)) {
-        pushUnique(matches, {
-          filePath,
-          pathHighlightIndices: createHighlightIndices(0, normalized.length),
-        })
+      // Try prefix of filename
+      else if (fileNameLower.startsWith(normalized)) {
+        const fileNameStart = filePath.lastIndexOf(fileName)
+        matchResult = {
+          indices: createHighlightIndices(fileNameStart, fileNameStart + normalized.length),
+          score: -500 + filePath.length, // High priority
+        }
+      }
+      // Try substring match in path
+      else if (pathLower.includes(normalized)) {
+        const idx = pathLower.indexOf(normalized)
+        matchResult = {
+          indices: createHighlightIndices(idx, idx + normalized.length),
+          score: -100 + idx + filePath.length,
+        }
+      }
+      // Try fuzzy match as fallback
+      else {
+        matchResult = fuzzyMatch(filePath, normalized)
       }
     }
 
-    // Substring of file name or path
-    for (const filePath of filePaths) {
-      if (seen.has(filePath)) continue
-      const path = filePath.toLowerCase()
-      const fileName = getFileName(filePath)
-      const fileNameLower = fileName.toLowerCase()
-
-      const fileNameIndex = fileNameLower.indexOf(normalized)
-      if (fileNameIndex !== -1) {
-        const actualFileNameStart = filePath.lastIndexOf(fileName)
-        pushUnique(matches, {
-          filePath,
-          pathHighlightIndices: createHighlightIndices(
-            actualFileNameStart + fileNameIndex,
-            actualFileNameStart + fileNameIndex + normalized.length,
-          ),
-        })
-        continue
-      }
+    if (matchResult) {
+      // Adjust score: prefer shorter paths
+      const lengthPenalty = filePath.length * 2
+      
+      // Give bonus for exact directory matches (query matches the full path)
+      // e.g. "cli" should prioritize "cli/" directory over "cli/package.json"
+      const isExactMatch = pathLower === normalized
+      const isExactDirMatch = isDirectory && isExactMatch
+      const exactMatchBonus = isExactDirMatch ? -500 : 0
+      
+      // Only penalize directories when they're not an exact or prefix match
+      // This ensures "cli/" appears before "cli/src/file.ts" when searching "cli"
+      const isPrefixMatch = pathLower.startsWith(normalized)
+      const dirPenalty = isDirectory && !isPrefixMatch ? 50 : 0
+      
+      const finalScore = matchResult.score + lengthPenalty + dirPenalty + exactMatchBonus
 
-      const pathIndex = path.indexOf(normalized)
-      if (pathIndex !== -1) {
-        pushUnique(matches, {
-          filePath,
-          pathHighlightIndices: createHighlightIndices(
-            pathIndex,
-            pathIndex + normalized.length,
-          ),
-        })
-      }
+      pushUnique(matches, {
+        filePath,
+        isDirectory,
+        pathHighlightIndices: matchResult.indices,
+        matchScore: finalScore,
+      })
     }
   }
 
+  // Sort by score (lower is better)
+  matches.sort((a, b) => (a.matchScore ?? 0) - (b.matchScore ?? 0))
+
   return matches
 }
 
@@ -564,7 +603,7 @@ export const useSuggestionEngine = ({
     new Map<string, MatchedFileInfo[]>(),
   )
   const fileRefreshIdRef = useRef(0)
-  const [filePaths, setFilePaths] = useState<string[]>(() =>
+  const [filePaths, setFilePaths] = useState<PathInfo[]>(() =>
     flattenFileTree(fileTree),
   )
 
@@ -712,17 +751,20 @@ export const useSuggestionEngine = ({
     return fileMatches.map((file) => {
       const fileName = getFileName(file.filePath)
       const isRootLevel = !file.filePath.includes('/')
+      // Show directories with trailing / in the label
+      const displayLabel = file.isDirectory ? `${fileName}/` : fileName
+      const displayPath = file.isDirectory ? `${file.filePath}/` : file.filePath
 
       return {
         id: file.filePath,
-        label: fileName,
+        label: displayLabel,
         labelHighlightIndices: file.pathHighlightIndices
           ? file.pathHighlightIndices.map((idx) => {
               const fileNameStart = file.filePath.lastIndexOf(fileName)
               return idx >= fileNameStart ? idx - fileNameStart : -1
             }).filter((idx) => idx >= 0)
           : null,
-        description: isRootLevel ? '.' : file.filePath,
+        description: isRootLevel ? '.' : displayPath,
         descriptionHighlightIndices: isRootLevel ? null : file.pathHighlightIndices,
       }
     })

common/src/project-file-tree.ts

@@ -243,6 +243,27 @@ export function getAllFilePaths(
   })
 }
 
+export interface PathInfo {
+  path: string
+  isDirectory: boolean
+}
+
+export function getAllPathsWithDirectories(
+  nodes: FileTreeNode[],
+  basePath: string = '',
+): PathInfo[] {
+  return nodes.flatMap((node) => {
+    const nodePath = basePath ? path.join(basePath, node.name) : node.name
+    if (node.type === 'file') {
+      return [{ path: nodePath, isDirectory: false }]
+    }
+    // Include the directory itself, plus recurse into children
+    const dirEntry: PathInfo = { path: nodePath, isDirectory: true }
+    const children = getAllPathsWithDirectories(node.children || [], nodePath)
+    return [dirEntry, ...children]
+  })
+}
+
 export function flattenTree(nodes: FileTreeNode[]): FileTreeNode[] {
   return nodes.flatMap((node) => {
     if (node.type === 'file') {