@hienlh/ppm 0.12.7 → 0.12.9

package/src/types/project.ts

@@ -19,3 +19,34 @@ export interface FileNode {
   /** True if this path is matched by a .gitignore rule */
   ignored?: boolean;
 }
+
+/** A flat file entry returned by /files/index */
+export interface FileEntry {
+  path: string;
+  name: string;
+  type: "file" | "directory";
+}
+
+/** Entry returned by /files/list (single directory level) */
+export interface FileDirEntry {
+  name: string;
+  type: "file" | "directory";
+  /** True if entry is excluded by gitignore (informational — still listed) */
+  isIgnored: boolean;
+}
+
+/** Per-project file filter override (stored in projects.settings JSON) */
+export interface FileFilterConfig {
+  /** Additional glob patterns to exclude from tree/list */
+  filesExclude?: string[];
+  /** Additional glob patterns to exclude from index/search */
+  searchExclude?: string[];
+  /** Whether to use .gitignore rules (null = use global setting) */
+  useIgnoreFiles?: boolean;
+}
+
+/** Per-project settings stored in projects.settings JSON column */
+export interface ProjectSettings {
+  files?: FileFilterConfig;
+  [key: string]: unknown;
+}

package/src/web/components/chat/file-picker.tsx

@@ -10,19 +10,6 @@ interface FilePickerProps {
   visible: boolean;
 }
 
-/** Flatten a FileNode tree into a flat list of files and directories. */
-export function flattenFileTree(nodes: FileNode[]): FileNode[] {
-  const result: FileNode[] = [];
-  function walk(list: FileNode[]) {
-    for (const node of list) {
-      result.push(node);
-      if (node.children) walk(node.children);
-    }
-  }
-  walk(nodes);
-  return result;
-}
-
 export function FilePicker({
   items,
   filter,

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

@@ -9,7 +9,7 @@ import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
 import { ProviderSelector } from "./provider-selector";
 import type { SlashItem } from "./slash-command-picker";
 import type { FileNode } from "../../../types/project";
-import { flattenFileTree } from "./file-picker";
+import { useFileStore } from "@/stores/file-store";
 
 export interface ChatAttachment {
   id: string;
@@ -107,6 +107,10 @@ export const MessageInput = memo(function MessageInput({
     typeof CSS === "undefined" || !CSS.supports("field-sizing", "content"),
   );
 
+  // File index from store — replaces /files/tree?depth=5 fetch
+  const fileIndex = useFileStore((s) => s.fileIndex);
+  const indexStatus = useFileStore((s) => s.indexStatus);
+
   /** Write value to both textareas + ref + update hasText state */
   const writeTextareas = useCallback((newValue: string) => {
     valueRef.current = newValue;
@@ -204,25 +208,18 @@ export const MessageInput = memo(function MessageInput({
     return () => window.removeEventListener("ppm:slash-items-refresh", handler);
   }, [fetchSlashItems]);
 
-  // Fetch file tree when projectName changes
+  // Sync file picker items from store index — no network call needed
   useEffect(() => {
     if (!projectName) {
       fileItemsRef.current = [];
       onFileItemsLoaded?.([]);
       return;
     }
-    api
-      .get<FileNode[]>(`${projectUrl(projectName)}/files/tree?depth=5`)
-      .then((tree) => {
-        const flat = flattenFileTree(tree);
-        fileItemsRef.current = flat;
-        onFileItemsLoaded?.(flat);
-      })
-      .catch(() => {
-        fileItemsRef.current = [];
-        onFileItemsLoaded?.([]);
-      });
-  }, [projectName]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Convert FileEntry[] to FileNode[] — type field is now present on FileEntry
+    const nodes: FileNode[] = fileIndex.map((e) => ({ name: e.name, path: e.path, type: e.type }));
+    fileItemsRef.current = nodes;
+    onFileItemsLoaded?.(nodes);
+  }, [projectName, fileIndex, indexStatus]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Handle parent selecting a slash item
   useEffect(() => {

package/src/web/components/chat/tool-cards.tsx

@@ -142,8 +142,10 @@ function ToolSummary({ name, input }: { name: string; input: Record<string, unkn
     case "MultiEdit":
     case "NotebookEdit":
       return <>{name} <span className="text-text-subtle">{basename(s(input.file_path))}</span></>;
-    case "Bash":
-      return <>{name} <span className="font-mono text-text-subtle">{truncate(s(input.command), 60)}</span></>;
+    case "Bash": {
+      const preview = input.description ? s(input.description) : s(input.command);
+      return <>{name} <span className={`text-text-subtle${input.description ? "" : " font-mono"}`}>{truncate(preview, 60)}</span></>;
+    }
     case "Glob":
       return <>{name} <span className="font-mono text-text-subtle">{s(input.pattern)}</span></>;
     case "Grep":

package/src/web/components/explorer/file-tree.tsx

@@ -108,18 +108,28 @@ interface TreeNodeProps {
 }
 
 const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, onFileDrop, onFileOpen }: TreeNodeProps) {
-  const { expandedPaths, toggleExpand, selectedFiles, toggleFileSelect } = useFileStore(useShallow((s) => ({ expandedPaths: s.expandedPaths, toggleExpand: s.toggleExpand, selectedFiles: s.selectedFiles, toggleFileSelect: s.toggleFileSelect })));
+  const { expandedPaths, loadedPaths, inflight, toggleExpand, selectedFiles, toggleFileSelect } = useFileStore(
+    useShallow((s) => ({
+      expandedPaths: s.expandedPaths,
+      loadedPaths: s.loadedPaths,
+      inflight: s.inflight,
+      toggleExpand: s.toggleExpand,
+      selectedFiles: s.selectedFiles,
+      toggleFileSelect: s.toggleFileSelect,
+    })),
+  );
   const openTab = useTabStore((s) => s.openTab);
   const isExpanded = expandedPaths.has(node.path);
   const isDir = node.type === "directory";
   const isSelected = selectedFiles.includes(node.path);
   const isIgnored = node.ignored === true;
+  const isLoadingChildren = isDir && isExpanded && !loadedPaths.has(node.path) && inflight.has(node.path);
   const [isDragOver, setIsDragOver] = useState(false);
   const dragCounter = useRef(0);
 
   function handleClick(e: React.MouseEvent) {
     if (isDir) {
-      toggleExpand(node.path);
+      toggleExpand(projectName, node.path);
       return;
     }
     // Ctrl/Cmd+Click: toggle file selection for compare
@@ -211,7 +221,9 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
             style={{ paddingLeft: `${depth * 16 + 8}px` }}
           >
             {isDir ? (
-              isExpanded ? (
+              isLoadingChildren ? (
+                <Loader2 className="size-3.5 shrink-0 text-text-subtle animate-spin" />
+              ) : isExpanded ? (
                 <ChevronDown className="size-3.5 shrink-0 text-text-subtle" />
               ) : (
                 <ChevronRight className="size-3.5 shrink-0 text-text-subtle" />
@@ -289,7 +301,29 @@ interface FileTreeProps {
 }
 
 export function FileTree({ onFileOpen }: FileTreeProps = {}) {
-  const { tree, loading, error, fetchTree, reset, selectedFiles, clearSelection, setExpanded } = useFileStore(useShallow((s) => ({ tree: s.tree, loading: s.loading, error: s.error, fetchTree: s.fetchTree, reset: s.reset, selectedFiles: s.selectedFiles, clearSelection: s.clearSelection, setExpanded: s.setExpanded })));
+  const {
+    tree, loading, error,
+    loadRoot, loadIndex, loadChildren, invalidateIndex, invalidateFolder,
+    reset, selectedFiles, clearSelection, setExpanded,
+    // fetchTree kept for uploadFiles refresh
+    fetchTree,
+  } = useFileStore(
+    useShallow((s) => ({
+      tree: s.tree,
+      loading: s.loading,
+      error: s.error,
+      loadRoot: s.loadRoot,
+      loadIndex: s.loadIndex,
+      loadChildren: s.loadChildren,
+      invalidateIndex: s.invalidateIndex,
+      invalidateFolder: s.invalidateFolder,
+      reset: s.reset,
+      selectedFiles: s.selectedFiles,
+      clearSelection: s.clearSelection,
+      setExpanded: s.setExpanded,
+      fetchTree: s.fetchTree,
+    })),
+  );
   const activeProject = useProjectStore((s) => s.activeProject);
   const openTab = useTabStore((s) => s.openTab);
   const [actionState, setActionState] = useState<{
@@ -297,37 +331,59 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     node: FileNode;
   } | null>(null);
 
-  const loadTree = useCallback(() => {
-    if (activeProject) {
-      fetchTree(activeProject.name);
-    }
-  }, [activeProject, fetchTree]);
+  /** Full reload used by toolbar Refresh button and post-upload */
+  const reloadTree = useCallback(() => {
+    if (!activeProject) return;
+    reset();
+    loadRoot(activeProject.name);
+    loadIndex(activeProject.name);
+  }, [activeProject, reset, loadRoot, loadIndex]);
 
+  // On project switch: reset + load root + load index in parallel + auto-expand root (1 level)
   useEffect(() => {
-    if (activeProject) {
-      reset();
-      loadTree();
-    }
+    if (!activeProject) return;
+    reset();
+    const name = activeProject.name;
+
+    // Load root entries, then auto-expand the root node itself (path="")
+    loadRoot(name).then(() => {
+      // Auto-expand root — marks "" as expanded so root-level dirs show children on next expand
+      // Root entries are already visible; no deeper auto-expand per plan decision
+      useFileStore.getState().setExpanded("", true);
+    });
+    loadIndex(name);
   }, [activeProject?.name]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Auto-refresh file tree on window focus and real-time file changes via WebSocket
+  // Handle WS file:changed → invalidate folder + index instead of full tree refetch
   useEffect(() => {
     if (!activeProject) return;
-    const refresh = () => fetchTree(activeProject.name);
+    const projectName = activeProject.name;
     let debounceTimer: ReturnType<typeof setTimeout>;
-    const debouncedRefresh = () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(refresh, 300); };
+
     const handleFileChanged = (e: Event) => {
       const detail = (e as CustomEvent).detail;
-      if (detail.projectName === activeProject.name) debouncedRefresh();
+      if (detail.projectName !== projectName) return;
+
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        const store = useFileStore.getState();
+        // Derive parent folder from changed file path
+        const changedPath: string = detail.path ?? "";
+        const parentPath = changedPath.includes("/")
+          ? changedPath.slice(0, changedPath.lastIndexOf("/"))
+          : "";
+        store.invalidateIndex();
+        store.loadIndex(projectName);
+        store.invalidateFolder(projectName, parentPath);
+      }, 300);
     };
-    window.addEventListener("focus", refresh);
+
     window.addEventListener("file:changed", handleFileChanged);
     return () => {
       clearTimeout(debounceTimer);
-      window.removeEventListener("focus", refresh);
       window.removeEventListener("file:changed", handleFileChanged);
     };
-  }, [activeProject, fetchTree]);
+  }, [activeProject]);
 
   const uploadFiles = useCallback(async (targetDir: string, files: FileList) => {
     if (!activeProject) return;
@@ -347,12 +403,21 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
         const json = await res.json();
         console.error("Upload failed:", json.error);
       }
-      loadTree();
+      // Invalidate the target folder so it refreshes
+      const store = useFileStore.getState();
+      const folderPath = targetDir;
+      const folderLoadedPaths = store.loadedPaths;
+      if (folderLoadedPaths.has(folderPath)) {
+        const lp = new Set(store.loadedPaths);
+        lp.delete(folderPath);
+        // Force reload by clearing and re-expanding
+        await store.invalidateFolder(activeProject.name, folderPath);
+      }
       if (targetDir) setExpanded(targetDir, true);
     } catch (e) {
       console.error("Upload error:", e);
     }
-  }, [activeProject, loadTree, setExpanded]);
+  }, [activeProject, setExpanded]);
 
   const [isRootDragOver, setIsRootDragOver] = useState(false);
   const rootDragCounter = useRef(0);
@@ -436,7 +501,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     return (
       <div className="p-3 text-xs text-error">
         {error}
-        <button onClick={loadTree} className="block mt-1 text-primary underline">
+        <button onClick={reloadTree} className="block mt-1 text-primary underline">
           Retry
         </button>
       </div>
@@ -467,7 +532,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
           <FolderPlus className="size-3.5" />
         </button>
         <div className="flex-1" />
-        <button onClick={loadTree} title="Refresh" className={toolbarBtnClass}>
+        <button onClick={reloadTree} title="Refresh" className={toolbarBtnClass}>
           <RefreshCw className="size-3.5" />
         </button>
       </div>
@@ -504,7 +569,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
             New Folder
           </ContextMenuItem>
           <ContextMenuSeparator />
-          <ContextMenuItem onClick={loadTree}>
+          <ContextMenuItem onClick={reloadTree}>
             <RefreshCw className="size-3.5 mr-2" />
             Refresh
           </ContextMenuItem>
@@ -517,7 +582,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
           node={actionState.node}
           projectName={activeProject.name}
           onClose={() => setActionState(null)}
-          onRefresh={loadTree}
+          onRefresh={reloadTree}
         />
       )}
     </div>

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

@@ -117,6 +117,9 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
   const openTab = useTabStore((s) => s.openTab);
   const activeProject = useProjectStore((s) => s.activeProject);
+  const fileIndex = useFileStore((s) => s.fileIndex);
+  const indexStatus = useFileStore((s) => s.indexStatus);
+  const loadIndex = useFileStore((s) => s.loadIndex);
   const fileTree = useFileStore((s) => s.tree);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
   const sidebarCollapsed = useSettingsStore((s) => s.sidebarCollapsed);
@@ -223,11 +226,12 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     return [...builtIn, ...extCmds];
   }, [activeProject, openTab, onClose, setSidebarActiveTab, sidebarCollapsed, toggleSidebar, getBinding, extContributions]);
 
-  // File commands — derived from file store tree (project files)
+  // File commands — from index when ready, fallback to flattened tree
   const fileCommands = useMemo<CommandItem[]>(() => {
     const projectId = activeProject?.name ?? null;
     const meta = activeProject ? { projectName: activeProject.name } : undefined;
-    const files = flattenFiles(fileTree);
+    // Filter index to files only — directories are in the index for palette "open folder" affordances but not for file-open commands
+    const files = indexStatus === "ready" ? fileIndex.filter((e) => e.type === "file") : flattenFiles(fileTree);
 
     return files.map((f) => ({
       id: `file:${f.path}`,
@@ -247,7 +251,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         onClose();
       },
     }));
-  }, [fileTree, activeProject, openTab, onClose]);
+  }, [indexStatus, fileIndex, fileTree, activeProject, openTab, onClose]);
 
   // Filesystem commands — from cached API results
   const fsCommands = useMemo<CommandItem[]>(() => {
@@ -427,6 +431,25 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
           </div>
         )}
 
+        {/* Index status hints — non-blocking, muted */}
+        {!pathMode && indexStatus === "loading" && (
+          <div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-border/50">
+            <Loader2 className="size-3 animate-spin text-text-subtle shrink-0" />
+            <span className="text-[11px] text-text-subtle italic">Indexing project…</span>
+          </div>
+        )}
+        {!pathMode && indexStatus === "error" && (
+          <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border/50">
+            <span className="text-[11px] text-text-subtle">Failed to build file index —</span>
+            <button
+              onClick={() => activeProject && loadIndex(activeProject.name)}
+              className="text-[11px] text-accent hover:underline"
+            >
+              retry
+            </button>
+          </div>
+        )}
+
         {/* Results */}
         <div ref={listRef} className="max-h-72 overflow-y-auto py-1">
           {filtered.length === 0 ? (

package/src/web/components/settings/files-settings-section.tsx

@@ -0,0 +1,230 @@
+/**
+ * files-settings-section.tsx
+ * Settings section for file filter configuration: filesExclude, searchExclude, useIgnoreFiles.
+ * Supports global scope and per-project override (active project only — no dropdown).
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { useProjectStore } from "@/stores/project-store";
+import { useFileStore } from "@/stores/file-store";
+import {
+  getFilesSettings,
+  updateFilesSettings,
+  getProjectSettings,
+  updateProjectSettings,
+  type FileFilterSettings,
+} from "@/lib/api-files-settings";
+import { GlobListEditor } from "./glob-list-editor";
+
+type Scope = "global" | "project";
+
+/** Default values used when project override has no value for a field */
+const DEFAULTS: FileFilterSettings = {
+  filesExclude: [],
+  searchExclude: [],
+  useIgnoreFiles: true,
+};
+
+export function FilesSettingsSection() {
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  const [scope, setScope] = useState<Scope>("global");
+  const [filesExclude, setFilesExclude] = useState<string[]>([]);
+  const [searchExclude, setSearchExclude] = useState<string[]>([]);
+  const [useIgnoreFiles, setUseIgnoreFiles] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Abort controller for stale fetch cleanup
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Load settings when scope or activeProject changes
+  useEffect(() => {
+    abortRef.current?.abort();
+    const ac = new AbortController();
+    abortRef.current = ac;
+
+    setLoading(true);
+    setError(null);
+
+    const loadSettings = async () => {
+      try {
+        if (scope === "global") {
+          const s = await getFilesSettings();
+          if (ac.signal.aborted) return;
+          setFilesExclude(s.filesExclude);
+          setSearchExclude(s.searchExclude);
+          setUseIgnoreFiles(s.useIgnoreFiles);
+        } else {
+          // Per-project: fetch project override; fill missing fields with defaults
+          if (!activeProject) return;
+          const ps = await getProjectSettings(activeProject.name);
+          if (ac.signal.aborted) return;
+          const f = ps.files ?? {};
+          setFilesExclude(f.filesExclude ?? DEFAULTS.filesExclude);
+          setSearchExclude(f.searchExclude ?? DEFAULTS.searchExclude);
+          setUseIgnoreFiles(f.useIgnoreFiles ?? DEFAULTS.useIgnoreFiles);
+        }
+      } catch (e) {
+        if (ac.signal.aborted) return;
+        setError((e as Error).message);
+      } finally {
+        if (!ac.signal.aborted) setLoading(false);
+      }
+    };
+
+    loadSettings();
+    return () => ac.abort();
+  }, [scope, activeProject?.name]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaved(false);
+    setError(null);
+    try {
+      const payload: FileFilterSettings = {
+        filesExclude: filesExclude.filter((p) => p.trim() !== ""),
+        searchExclude: searchExclude.filter((p) => p.trim() !== ""),
+        useIgnoreFiles,
+      };
+
+      if (scope === "global") {
+        await updateFilesSettings(payload);
+      } else {
+        if (!activeProject) throw new Error("No active project");
+        await updateProjectSettings(activeProject.name, { files: payload });
+      }
+
+      // Trigger server-side cache invalidation + frontend index reload
+      const store = useFileStore.getState();
+      store.invalidateIndex();
+      if (activeProject) {
+        store.loadIndex(activeProject.name);
+      }
+
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const canSwitchToProject = !!activeProject;
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-xs font-medium text-muted-foreground">File Filters</h3>
+
+      {/* Scope toggle */}
+      <div className="flex gap-1">
+        <button
+          type="button"
+          onClick={() => setScope("global")}
+          className={`flex-1 py-1.5 rounded-md text-xs font-medium transition-colors cursor-pointer ${
+            scope === "global"
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground hover:bg-accent"
+          }`}
+        >
+          Global
+        </button>
+        <button
+          type="button"
+          onClick={() => canSwitchToProject && setScope("project")}
+          disabled={!canSwitchToProject}
+          title={!canSwitchToProject ? "Open a project to edit per-project overrides" : undefined}
+          className={`flex-1 py-1.5 rounded-md text-xs font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${
+            scope === "project"
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted text-muted-foreground hover:bg-accent"
+          }`}
+        >
+          {activeProject ? activeProject.name : "Per-project"}
+        </button>
+      </div>
+
+      {scope === "project" && activeProject && (
+        <p className="text-[11px] text-muted-foreground -mt-2">
+          Overrides for <span className="font-medium">{activeProject.name}</span>.
+          Leave empty to use global settings.
+        </p>
+      )}
+
+      {loading ? (
+        <p className="text-xs text-muted-foreground">Loading...</p>
+      ) : (
+        <>
+          {/* Files Exclude */}
+          <div className="space-y-1.5">
+            <Label className="text-xs">Files to Exclude</Label>
+            <p className="text-[11px] text-muted-foreground">
+              Glob patterns hidden from the file tree and palette.
+            </p>
+            <GlobListEditor
+              value={filesExclude}
+              onChange={setFilesExclude}
+              placeholder="e.g. **/*.log or node_modules/**"
+              disabled={saving}
+            />
+          </div>
+
+          <Separator />
+
+          {/* Search Exclude */}
+          <div className="space-y-1.5">
+            <Label className="text-xs">Search to Exclude</Label>
+            <p className="text-[11px] text-muted-foreground">
+              Glob patterns excluded from file index / palette search.
+            </p>
+            <GlobListEditor
+              value={searchExclude}
+              onChange={setSearchExclude}
+              placeholder="e.g. dist/** or **/*.min.js"
+              disabled={saving}
+            />
+          </div>
+
+          <Separator />
+
+          {/* useIgnoreFiles toggle */}
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <Label className="text-xs">Use .gitignore rules</Label>
+              <p className="text-[11px] text-muted-foreground">
+                Respect .gitignore when filtering the file tree and index.
+              </p>
+            </div>
+            <Switch
+              checked={useIgnoreFiles}
+              onCheckedChange={setUseIgnoreFiles}
+              disabled={saving}
+            />
+          </div>
+
+          {/* Error */}
+          {error && (
+            <p className="text-[11px] text-destructive">{error}</p>
+          )}
+
+          {/* Save button */}
+          <Button
+            onClick={handleSave}
+            disabled={saving || loading}
+            size="sm"
+            className="h-8 text-xs w-full cursor-pointer"
+          >
+            {saving ? "Saving..." : saved ? "Saved" : "Save"}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}