@hienlh/ppm 0.11.12 → 0.11.14

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/editor/use-blob-url.ts

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { projectUrl, getAuthToken } from "@/lib/api-client";
 
-/** Shared hook: fetch a project file as a blob URL via /files/raw endpoint. */
+/** Shared hook: fetch a project file as a blob URL via /files/raw endpoint.
+ *  Detects absolute paths (external files) and uses /api/fs/raw instead. */
 export function useBlobUrl(
   filePath: string,
   projectName: string,
@@ -12,7 +13,10 @@ export function useBlobUrl(
 
   useEffect(() => {
     let revoke: string | undefined;
-    const url = `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}`;
+    const isExternal = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
+    const url = isExternal
+      ? `/api/fs/raw?path=${encodeURIComponent(filePath)}`
+      : `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}`;
     const token = getAuthToken();
     fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
       .then((r) => {