@hienlh/ppm 0.11.11 → 0.11.13

package/src/shared/fuzzy-search.ts

@@ -0,0 +1,87 @@
+/** Minimal interface — any object with name + description is searchable */
+export interface FuzzySearchable {
+  name: string;
+  description: string;
+}
+
+/** Iterative Levenshtein distance (single-row DP) */
+export function levenshtein(a: string, b: string): number {
+  if (a === b) return 0;
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+
+  let prev = Array.from({ length: b.length + 1 }, (_, i) => i);
+  let curr = new Array<number>(b.length + 1);
+
+  for (let i = 1; i <= a.length; i++) {
+    curr[0] = i;
+    for (let j = 1; j <= b.length; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      curr[j] = Math.min(
+        curr[j - 1]! + 1,       // insertion
+        prev[j]! + 1,            // deletion
+        prev[j - 1]! + cost,     // substitution
+      );
+    }
+    [prev, curr] = [curr, prev];
+  }
+  return prev[b.length]!;
+}
+
+interface FuzzyScore { rank: number; distance: number }
+
+/**
+ * Score a query against a candidate string.
+ * Returns null if no reasonable match. Rank: 0=prefix, 1=contains, 2=fuzzy.
+ */
+export function scoreFuzzy(query: string, candidate: string): FuzzyScore | null {
+  const lq = query.toLowerCase();
+  const lc = candidate.toLowerCase();
+
+  if (lc.startsWith(lq)) return { rank: 0, distance: 0 };
+  if (lc.includes(lq)) return { rank: 1, distance: lc.indexOf(lq) };
+
+  const maxDist = Math.max(Math.floor(lq.length * 0.4), 2);
+  const dist = levenshtein(lq, lc.slice(0, lq.length + maxDist));
+  if (dist <= maxDist) return { rank: 2, distance: dist };
+
+  return null;
+}
+
+/**
+ * Search items by query with fuzzy matching.
+ * Recently used items get a rank boost (sorted earlier within same rank tier).
+ * Returns ranked results (best match first), truncated to limit.
+ */
+export function searchFuzzy<T extends FuzzySearchable>(
+  items: T[],
+  query: string,
+  limit = 20,
+  recentNames: string[] = [],
+): T[] {
+  if (!query) return items;
+  // Cap query length to prevent quadratic blowup in Levenshtein
+  query = query.slice(0, 50);
+
+  const recentSet = new Set(recentNames);
+  const scored: Array<{ item: T; rank: number; distance: number; recent: boolean }> = [];
+
+  for (const item of items) {
+    const nameScore = scoreFuzzy(query, item.name);
+    const descScore = scoreFuzzy(query, item.description);
+    const best = [nameScore, descScore]
+      .filter((s): s is FuzzyScore => s !== null)
+      .sort((a, b) => a.rank - b.rank || a.distance - b.distance)[0];
+
+    if (best) scored.push({ item, rank: best.rank, distance: best.distance, recent: recentSet.has(item.name) });
+  }
+
+  scored.sort((a, b) =>
+    a.rank - b.rank
+    || a.distance - b.distance
+    || (a.recent === b.recent ? 0 : a.recent ? -1 : 1)
+    || a.item.name.localeCompare(b.item.name),
+  );
+
+  return scored.slice(0, limit).map((s) => s.item);
+}

package/src/web/components/chat/chat-tab.tsx

@@ -36,7 +36,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [slashItems, setSlashItems] = useState<SlashItem[]>([]);
   const [showSlashPicker, setShowSlashPicker] = useState(false);
   const [slashFilter, setSlashFilter] = useState("");
-  const [slashRanked, setSlashRanked] = useState(false);
   const [slashSelected, setSlashSelected] = useState<SlashItem | null>(null);
   const [slashRecentNames, setSlashRecentNames] = useState<string[]>([]);
 
@@ -255,9 +254,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   /** Stable callback for slash items loaded — prevents MessageInput memo break */
   const handleSlashItemsLoaded = useCallback(
-    (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => {
+    (items: SlashItem[], recentNames?: string[]) => {
       setSlashItems(items);
-      if (ranked !== undefined) setSlashRanked(ranked);
       if (recentNames) setSlashRecentNames(recentNames);
     },
     [],
@@ -267,7 +265,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const handleSlashStateChange = useCallback((visible: boolean, filter: string) => {
     setShowSlashPicker(visible);
     setSlashFilter(filter);
-    if (!visible || !filter) setSlashRanked(false);
   }, []);
 
   const handleSlashSelect = useCallback((item: SlashItem) => {
@@ -432,7 +429,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onSelect={handleSlashSelect}
           onClose={handleSlashClose}
           visible={showSlashPicker}
-          ranked={slashRanked}
           recentNames={slashRecentNames}
           projectName={projectName}
         />

package/src/web/components/chat/message-input.tsx

@@ -32,7 +32,7 @@ interface MessageInputProps {
   projectName?: string;
   /** Slash picker state change */
   onSlashStateChange?: (visible: boolean, filter: string) => void;
-  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => void;
+  onSlashItemsLoaded?: (items: SlashItem[], recentNames?: string[]) => void;
   slashSelected?: SlashItem | null;
   /** File picker state change */
   onFileStateChange?: (visible: boolean, filter: string) => void;
@@ -96,9 +96,6 @@ export const MessageInput = memo(function MessageInput({
   const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
-  const slashRankedRef = useRef(false);
-  const slashDebounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const slashSearchIdRef = useRef(0);
   const fileItemsRef = useRef<FileNode[]>([]);
   const resizeRafRef = useRef(0);
   // Track picker open state to avoid unnecessary parent callbacks per keystroke
@@ -182,19 +179,18 @@ export const MessageInput = memo(function MessageInput({
   const fetchSlashItems = useCallback(() => {
     if (!projectName) {
       slashItemsRef.current = [];
-      onSlashItemsLoaded?.([], false, []);
+      onSlashItemsLoaded?.([], []);
       return;
     }
     api
       .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items`)
       .then((data) => {
         slashItemsRef.current = data.items;
-        slashRankedRef.current = false;
-        onSlashItemsLoaded?.(data.items, false, data.recentNames);
+        onSlashItemsLoaded?.(data.items, data.recentNames);
       })
       .catch(() => {
         slashItemsRef.current = [];
-        onSlashItemsLoaded?.([], false, []);
+        onSlashItemsLoaded?.([], []);
       });
   }, [projectName, onSlashItemsLoaded]);
 
@@ -208,13 +204,6 @@ export const MessageInput = memo(function MessageInput({
     return () => window.removeEventListener("ppm:slash-items-refresh", handler);
   }, [fetchSlashItems]);
 
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => {
-      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
-    };
-  }, []);
-
   // Fetch file tree when projectName changes
   useEffect(() => {
     if (!projectName) {
@@ -481,30 +470,6 @@ export const MessageInput = memo(function MessageInput({
     [handleSend, permissionMode, onModeChange],
   );
 
-  /** Debounced server-side fuzzy search for slash items */
-  const fetchSlashSearch = useCallback(
-    (query: string) => {
-      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
-      if (!projectName || !query) return;
-      const requestId = ++slashSearchIdRef.current;
-      slashDebounceRef.current = setTimeout(() => {
-        api
-          .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
-          .then((data) => {
-            if (requestId !== slashSearchIdRef.current) return; // stale response
-            slashItemsRef.current = data.items;
-            slashRankedRef.current = true;
-            onSlashItemsLoaded?.(data.items, true, data.recentNames);
-          })
-          .catch(() => {
-            if (requestId !== slashSearchIdRef.current) return;
-            slashRankedRef.current = false;
-          });
-      }, 150);
-    },
-    [projectName, onSlashItemsLoaded],
-  );
-
   const updatePickerState = useCallback(
     (text: string, cursorPos: number) => {
       const textBefore = text.slice(0, cursorPos);
@@ -513,9 +478,6 @@ export const MessageInput = memo(function MessageInput({
       const hasSlash = textBefore.includes("/");
       const hasAt = textBefore.includes("@");
       if (!hasSlash && !hasAt) {
-        // Cancel pending slash search if any
-        if (slashDebounceRef.current) { clearTimeout(slashDebounceRef.current); slashDebounceRef.current = undefined; }
-        if (slashRankedRef.current) slashRankedRef.current = false;
         // Close pickers only if they were actually open (avoid unnecessary parent setState)
         if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
         if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
@@ -530,15 +492,10 @@ export const MessageInput = memo(function MessageInput({
           onSlashStateChange?.(true, filter);
           slashPickerOpenRef.current = true;
           if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
-          if (filter) fetchSlashSearch(filter);
           return;
         }
       }
 
-      // Cancel pending search when slash picker closes
-      if (slashDebounceRef.current) clearTimeout(slashDebounceRef.current);
-      if (slashRankedRef.current) slashRankedRef.current = false;
-
       // Check for @ anywhere in text (after whitespace or at start)
       if (hasAt) {
         const atMatch = textBefore.match(/@(\S*)$/);
@@ -554,7 +511,7 @@ export const MessageInput = memo(function MessageInput({
       if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
       if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
     },
-    [onSlashStateChange, onFileStateChange, fetchSlashSearch],
+    [onSlashStateChange, onFileStateChange],
   );
 
   /** Unified onChange for both textareas — updates ref, syncs other textarea, triggers picker */

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
 import { Sparkles, Terminal, Zap, RefreshCw, Clock } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
+import { searchFuzzy } from "../../../shared/fuzzy-search";
 
 export interface SlashItem {
   type: "skill" | "command" | "builtin";
@@ -18,8 +19,6 @@ interface SlashCommandPickerProps {
   onSelect: (item: SlashItem) => void;
   onClose: () => void;
   visible: boolean;
-  /** When true, items are pre-ranked by server — skip client-side filtering */
-  ranked?: boolean;
   /** Recently used item names (most recent first) */
   recentNames?: string[];
   /** Project name for cache invalidation */
@@ -32,7 +31,6 @@ export function SlashCommandPicker({
   onSelect,
   onClose,
   visible,
-  ranked,
   recentNames = [],
   projectName,
 }: SlashCommandPickerProps) {
@@ -42,34 +40,26 @@ export function SlashCommandPicker({
 
   const recentSet = useMemo(() => new Set(recentNames), [recentNames]);
 
-  // Build display list: when no filter + not ranked, put recents first
+  // Build display list: fuzzy search when filter is set, recents-first when idle
   const displayItems = useMemo(() => {
-    let base: SlashItem[];
-    if (ranked) {
-      base = items;
-    } else if (filter) {
-      const q = filter.toLowerCase();
-      base = items.filter(
-        (item) => item.name.toLowerCase().includes(q) || item.description.toLowerCase().includes(q),
-      );
-    } else {
-      base = items;
+    if (filter) {
+      // Client-side fuzzy search (Levenshtein) — replaces old server-side search
+      return { items: searchFuzzy(items, filter, 20, recentNames), recentCount: 0 };
     }
 
-    // Reorder: recents first when no filter and not server-ranked
-    if (!filter && !ranked && recentNames.length > 0) {
+    // No filter — show all items with recents first
+    if (recentNames.length > 0) {
       const recents: SlashItem[] = [];
       const rest: SlashItem[] = [];
-      for (const item of base) {
+      for (const item of items) {
         if (recentSet.has(item.name)) recents.push(item);
         else rest.push(item);
       }
-      // Sort recents by their order in recentNames (most recent first)
       recents.sort((a, b) => recentNames.indexOf(a.name) - recentNames.indexOf(b.name));
       return { items: [...recents, ...rest], recentCount: recents.length };
     }
-    return { items: base, recentCount: 0 };
-  }, [items, filter, ranked, recentNames, recentSet]);
+    return { items, recentCount: 0 };
+  }, [items, filter, recentNames, recentSet]);
 
   const filtered = displayItems.items;
   const recentCount = displayItems.recentCount;

package/src/web/components/layout/command-palette.tsx

@@ -25,6 +25,7 @@ import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { api } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
+import { scoreFileSearch, compareScores, type FileSearchScore } from "@/lib/score-file-search";
 
 interface CommandItem {
   id: string;
@@ -315,19 +316,13 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
     // Normal mode
     if (!query.trim()) return actionCommands;
-    const q = query.toLowerCase();
-    const matchesFuzzy = (text: string) => {
-      let ti = 0;
-      for (let qi = 0; qi < q.length; qi++) {
-        ti = text.indexOf(q[qi]!, ti);
-        if (ti === -1) return false;
-        ti++;
-      }
-      return true;
-    };
-    const matched = allCommands.filter(
-      (c) => matchesFuzzy(c.label.toLowerCase()) || (c.keywords && matchesFuzzy(c.keywords.toLowerCase())),
-    );
+    const scored: Array<{ cmd: CommandItem; score: FileSearchScore }> = [];
+    for (const c of allCommands) {
+      const s = scoreFileSearch(query, c.label, c.keywords ?? c.label);
+      if (s) scored.push({ cmd: c, score: s });
+    }
+    scored.sort((a, b) => compareScores(a.score, b.score));
+    const matched = scored.map((s) => s.cmd);
     // Prepend DB results (already filtered server-side) when query is 2+ chars
     return query.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
   }, [allCommands, actionCommands, fsCommands, dbCommands, query]);

package/src/web/lib/score-file-search.ts

@@ -0,0 +1,90 @@
+/**
+ * File search scoring for command palette.
+ * Lower score = better match. Returns null if no match.
+ *
+ * Tiers: exact filename(0) > filename prefix(1) > filename contains(2)
+ *      > path contains(3) > fuzzy filename(4) > fuzzy path(5)
+ *
+ * Tie-breakers: shorter filename, fewer path segments.
+ */
+
+export interface FileSearchScore {
+  /** 0-5, lower = better tier */
+  tier: number;
+  /** Position of substring match, or fuzzy gap penalty */
+  offset: number;
+  /** Candidate filename length (shorter = better) */
+  nameLen: number;
+  /** Number of path segments (fewer = more prominent) */
+  depth: number;
+}
+
+/** Extract filename from a path */
+function getFilename(path: string): string {
+  const i = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
+  return i >= 0 ? path.slice(i + 1) : path;
+}
+
+/**
+ * Subsequence fuzzy match — returns gap penalty (sum of distances between
+ * consecutive matched chars). Lower = more consecutive. Returns -1 if no match.
+ */
+function fuzzyGap(query: string, text: string): number {
+  let ti = 0;
+  let gap = 0;
+  let lastMatch = -1;
+  for (let qi = 0; qi < query.length; qi++) {
+    ti = text.indexOf(query[qi]!, ti);
+    if (ti === -1) return -1;
+    if (lastMatch >= 0) gap += ti - lastMatch - 1;
+    lastMatch = ti;
+    ti++;
+  }
+  return gap;
+}
+
+export function scoreFileSearch(
+  query: string,
+  label: string,
+  path: string,
+): FileSearchScore | null {
+  const q = query.toLowerCase();
+  const nameLower = label.toLowerCase();
+  const pathLower = path.toLowerCase();
+  const filename = getFilename(pathLower);
+  const depth = path.split("/").length;
+
+  // Tier 0: exact filename match
+  if (filename === q) return { tier: 0, offset: 0, nameLen: label.length, depth };
+
+  // Tier 1: filename starts with query
+  if (filename.startsWith(q)) return { tier: 1, offset: 0, nameLen: label.length, depth };
+
+  // Tier 2: filename contains query as substring
+  const fnIdx = filename.indexOf(q);
+  if (fnIdx >= 0) return { tier: 2, offset: fnIdx, nameLen: label.length, depth };
+
+  // Tier 3: full path contains query as substring
+  const pathIdx = pathLower.indexOf(q);
+  if (pathIdx >= 0) return { tier: 3, offset: pathIdx, nameLen: label.length, depth };
+
+  // Tier 4: fuzzy match on filename
+  const fnGap = fuzzyGap(q, filename);
+  if (fnGap >= 0) return { tier: 4, offset: fnGap, nameLen: label.length, depth };
+
+  // Tier 5: fuzzy match on full path
+  const pathGap = fuzzyGap(q, pathLower);
+  if (pathGap >= 0) return { tier: 5, offset: pathGap, nameLen: label.length, depth };
+
+  return null;
+}
+
+/** Compare two scores — for Array.sort (ascending = best first) */
+export function compareScores(a: FileSearchScore, b: FileSearchScore): number {
+  return (
+    a.tier - b.tier ||
+    a.offset - b.offset ||
+    a.nameLen - b.nameLen ||
+    a.depth - b.depth
+  );
+}