@hienlh/ppm 0.12.6 → 0.12.8

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>
+  );
+}

package/src/web/components/settings/glob-list-editor.tsx

@@ -0,0 +1,121 @@
+/**
+ * glob-list-editor.tsx
+ * Reusable list editor for glob pattern arrays (filesExclude, searchExclude, etc).
+ * Supports add, remove, inline edit, keyboard shortcuts (Enter=add, Backspace on empty=remove).
+ */
+
+import { useRef } from "react";
+import { Plus, X } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface GlobListEditorProps {
+  /** Current pattern list */
+  value: string[];
+  /** Called with updated list on any change */
+  onChange: (next: string[]) => void;
+  /** Placeholder text for each input row */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * Vertical list editor for glob patterns.
+ * - Each row: Input + Remove button (min 44px touch target)
+ * - Footer: "Add pattern" button
+ * - Enter on last row adds new; Backspace on empty row removes it
+ */
+export function GlobListEditor({
+  value,
+  onChange,
+  placeholder = "e.g. **/*.log",
+  disabled = false,
+}: GlobListEditorProps) {
+  // Refs for auto-focusing newly added rows
+  const rowRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  function handleChange(idx: number, text: string) {
+    const next = [...value];
+    next[idx] = text;
+    onChange(next);
+  }
+
+  function handleRemove(idx: number) {
+    const next = value.filter((_, i) => i !== idx);
+    onChange(next);
+    // Focus previous row or add-button area after removal
+    setTimeout(() => {
+      const prevIdx = Math.max(idx - 1, 0);
+      rowRefs.current[prevIdx]?.focus();
+    }, 0);
+  }
+
+  function handleAdd() {
+    onChange([...value, ""]);
+    // Focus the new row after render
+    setTimeout(() => {
+      rowRefs.current[value.length]?.focus();
+    }, 0);
+  }
+
+  function handleKeyDown(idx: number, e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      // Only add if current row is non-empty
+      if (value[idx]?.trim()) {
+        handleAdd();
+      }
+    } else if (e.key === "Backspace" && value[idx] === "") {
+      e.preventDefault();
+      handleRemove(idx);
+    }
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {value.length === 0 && (
+        <p className="text-[11px] text-muted-foreground py-1">
+          No patterns. Click "Add pattern" to start.
+        </p>
+      )}
+
+      {value.map((pattern, idx) => (
+        <div key={idx} className="flex items-center gap-1.5">
+          <Input
+            ref={(el) => { rowRefs.current[idx] = el; }}
+            value={pattern}
+            onChange={(e) => handleChange(idx, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(idx, e)}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="h-8 text-xs flex-1 font-mono"
+            aria-label={`Pattern ${idx + 1}`}
+          />
+          {/* Remove button — min 44px touch target via p-2.5 */}
+          <button
+            type="button"
+            onClick={() => handleRemove(idx)}
+            disabled={disabled}
+            aria-label={`Remove pattern ${idx + 1}`}
+            className="shrink-0 flex items-center justify-center p-2.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+      ))}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="h-8 text-xs gap-1.5 w-full cursor-pointer"
+      >
+        <Plus className="size-3.5" />
+        Add pattern
+      </Button>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef } from "react";
 import {
   Moon, Sun, Monitor, Bell, BellOff, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Keyboard, Globe, Plug, Puzzle, Bug,
+  Bot, BellRing, Keyboard, Globe, Plug, Puzzle, Bug, FolderSearch,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -18,6 +18,7 @@ import { McpSettingsSection } from "./mcp-settings-section";
 import { ExtensionManagerSection } from "./extension-manager-section";
 import { PPMBotSettingsSection } from "./ppmbot-settings-section";
 import { ChangePasswordSection } from "./change-password-section";
+import { FilesSettingsSection } from "./files-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -30,7 +31,7 @@ const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
 const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
   !window.matchMedia("(display-mode: standalone)").matches;
 
-type SettingsCategory = "ai" | "notifications" | "clawbot" | "jira" | "proxy" | "shortcuts" | "mcp" | "extensions";
+type SettingsCategory = "ai" | "notifications" | "clawbot" | "jira" | "proxy" | "shortcuts" | "mcp" | "extensions" | "files";
 
 const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
   { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
@@ -41,6 +42,7 @@ const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; ic
   { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
   { value: "mcp", label: "MCP Servers", subtitle: "Model Context Protocol tools", icon: Plug },
   { value: "extensions", label: "Extensions", subtitle: "Install and manage extensions", icon: Puzzle },
+  { value: "files", label: "File Filters", subtitle: "Exclude patterns, ignore files", icon: FolderSearch },
 ];
 
 export function SettingsTab() {
@@ -97,6 +99,7 @@ export function SettingsTab() {
             {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
             {activeCategory === "mcp" && <McpSettingsSection />}
             {activeCategory === "extensions" && <ExtensionManagerSection />}
+            {activeCategory === "files" && <FilesSettingsSection />}
           </div>
         </ScrollArea>
       </div>

package/src/web/lib/api-client.ts

@@ -20,9 +20,10 @@ class ApiClient {
   }
 
   /** Auto-unwraps {ok, data} envelope. Returns T directly. */
-  async get<T>(path: string): Promise<T> {
+  async get<T>(path: string, options?: { signal?: AbortSignal }): Promise<T> {
     const res = await fetch(`${this.baseUrl}${path}`, {
       headers: this.headers(),
+      signal: options?.signal,
     });
     return this.handleResponse<T>(res);
   }

package/src/web/lib/api-files-settings.ts

@@ -0,0 +1,42 @@
+/**
+ * api-files-settings.ts
+ * API client for global file filter settings and per-project file filter overrides.
+ */
+
+import { api } from "./api-client";
+
+/** Typed file filter config — mirrors server-side FileFilterConfig */
+export interface FileFilterSettings {
+  filesExclude: string[];
+  searchExclude: string[];
+  useIgnoreFiles: boolean;
+}
+
+/** Per-project settings envelope — only files field used here */
+export interface ProjectFileSettings {
+  files?: Partial<FileFilterSettings>;
+}
+
+// ── Global settings ──────────────────────────────────────────────────────────
+
+/** GET /api/settings/files — returns global file filter config */
+export function getFilesSettings(): Promise<FileFilterSettings> {
+  return api.get<FileFilterSettings>("/api/settings/files");
+}
+
+/** PATCH /api/settings/files — partial update to global file filter config */
+export function updateFilesSettings(patch: Partial<FileFilterSettings>): Promise<FileFilterSettings> {
+  return api.patch<FileFilterSettings>("/api/settings/files", patch);
+}
+
+// ── Per-project settings ─────────────────────────────────────────────────────
+
+/** GET /api/projects/:name/settings — returns per-project settings (ProjectSettings shape) */
+export function getProjectSettings(projectName: string): Promise<ProjectFileSettings> {
+  return api.get<ProjectFileSettings>(`/api/projects/${encodeURIComponent(projectName)}/settings`);
+}
+
+/** PATCH /api/projects/:name/settings — merges patch into project settings */
+export function updateProjectSettings(projectName: string, patch: ProjectFileSettings): Promise<ProjectFileSettings> {
+  return api.patch<ProjectFileSettings>(`/api/projects/${encodeURIComponent(projectName)}/settings`, patch);
+}

package/src/web/main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 import { App } from "./app.tsx";
 import "./styles/globals.css";
 import "katex/dist/katex.min.css";
-import "highlight.js/styles/github-dark-dimmed.min.css";
+// Highlight.js themes are loaded dynamically by applyThemeClass() to match light/dark mode
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/web/stores/file-store.ts

@@ -1,5 +1,9 @@
 import { create } from "zustand";
 import { api, projectUrl } from "@/lib/api-client";
+import type { FileEntry, FileDirEntry } from "../../types/project";
+import { entriesToNodes, mergeChildren } from "./file-tree-merge-helpers";
+
+export type { FileEntry };
 
 export interface FileNode {
   name: string;
@@ -8,37 +12,57 @@ export interface FileNode {
   children?: FileNode[];
   size?: number;
   modified?: string;
+  /** True if path is matched by a .gitignore rule */
   ignored?: boolean;
 }
 
 interface FileStore {
   tree: FileNode[];
+  fileIndex: FileEntry[];
   loading: boolean;
   error: string | null;
   expandedPaths: Set<string>;
+  loadedPaths: Set<string>;
+  /** In-flight AbortControllers keyed by folder path */
+  inflight: Map<string, AbortController>;
+  indexStatus: "idle" | "loading" | "ready" | "error";
   selectedFiles: string[];
-  fetchTree: (projectName: string) => Promise<void>;
-  toggleExpand: (path: string) => void;
-  setExpanded: (path: string, expanded: boolean) => void;
-  toggleFileSelect: (path: string) => void;
-  clearSelection: () => void;
-  reset: () => void;
+
+  loadRoot(projectName: string): Promise<void>;
+  loadChildren(projectName: string, folderPath: string): Promise<void>;
+  loadIndex(projectName: string): Promise<void>;
+  invalidateIndex(): void;
+  invalidateFolder(projectName: string, folderPath: string): Promise<void>;
+  toggleExpand(projectName: string, path: string): void;
+  setExpanded(path: string, expanded: boolean): void;
+  toggleFileSelect(path: string): void;
+  clearSelection(): void;
+  reset(): void;
+  /** @deprecated Use loadRoot instead */
+  fetchTree(projectName: string): Promise<void>;
 }
 
 export const useFileStore = create<FileStore>((set, get) => ({
   tree: [],
+  fileIndex: [],
   loading: false,
   error: null,
   expandedPaths: new Set<string>(),
+  loadedPaths: new Set<string>(),
+  inflight: new Map<string, AbortController>(),
+  indexStatus: "idle",
   selectedFiles: [],
 
-  fetchTree: async (projectName: string) => {
+  loadRoot: async (projectName: string) => {
     set({ loading: true, error: null });
     try {
-      const tree = await api.get<FileNode[]>(
-        `${projectUrl(projectName)}/files/tree?depth=3`,
+      const data = await api.get<FileDirEntry[]>(
+        `${projectUrl(projectName)}/files/list?path=`,
       );
-      set({ tree, loading: false });
+      const rootNodes = entriesToNodes(data, "");
+      const loadedPaths = new Set(get().loadedPaths);
+      loadedPaths.add(""); // root is loaded
+      set({ tree: rootNodes, loading: false, loadedPaths });
     } catch (err) {
       set({
         error: err instanceof Error ? err.message : "Failed to load files",
@@ -47,14 +71,95 @@ export const useFileStore = create<FileStore>((set, get) => ({
     }
   },
 
-  toggleExpand: (path: string) => {
-    const expanded = new Set(get().expandedPaths);
+  loadChildren: async (projectName: string, folderPath: string) => {
+    const state = get();
+
+    // Idempotent guard — skip if already loaded
+    if (state.loadedPaths.has(folderPath)) return;
+
+    // Abort any existing in-flight request for this path
+    const existing = state.inflight.get(folderPath);
+    if (existing) existing.abort();
+
+    const controller = new AbortController();
+    const inflight = new Map(state.inflight);
+    inflight.set(folderPath, controller);
+    set({ inflight });
+
+    try {
+      const encodedPath = encodeURIComponent(folderPath);
+      const data = await api.get<FileDirEntry[]>(
+        `${projectUrl(projectName)}/files/list?path=${encodedPath}`,
+        { signal: controller.signal },
+      );
+
+      // Check if aborted between request start and completion (defense in depth)
+      if (controller.signal.aborted) return;
+
+      const children = entriesToNodes(data, folderPath);
+      const currentState = get();
+      const newTree = mergeChildren(currentState.tree, folderPath, children);
+      const newLoadedPaths = new Set(currentState.loadedPaths);
+      newLoadedPaths.add(folderPath);
+      const newInflight = new Map(currentState.inflight);
+      newInflight.delete(folderPath);
+      set({ tree: newTree, loadedPaths: newLoadedPaths, inflight: newInflight });
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") return;
+      // Remove from inflight on error
+      const newInflight = new Map(get().inflight);
+      newInflight.delete(folderPath);
+      set({ inflight: newInflight });
+    }
+  },
+
+  loadIndex: async (projectName: string) => {
+    set({ indexStatus: "loading" });
+    try {
+      const data = await api.get<FileEntry[]>(
+        `${projectUrl(projectName)}/files/index`,
+      );
+      set({ fileIndex: data, indexStatus: "ready" });
+    } catch {
+      set({ indexStatus: "error" });
+    }
+  },
+
+  invalidateIndex: () => {
+    set({ indexStatus: "idle", fileIndex: [] });
+  },
+
+  invalidateFolder: async (projectName: string, folderPath: string) => {
+    const state = get();
+
+    // Only reload if this folder was previously loaded
+    if (!state.loadedPaths.has(folderPath)) return;
+
+    // Remove from loadedPaths to allow re-fetch
+    const newLoadedPaths = new Set(state.loadedPaths);
+    newLoadedPaths.delete(folderPath);
+    set({ loadedPaths: newLoadedPaths });
+
+    // Re-fetch if folder is currently expanded (or root)
+    if (!folderPath || state.expandedPaths.has(folderPath)) {
+      await get().loadChildren(projectName, folderPath);
+    }
+  },
+
+  toggleExpand: (projectName: string, path: string) => {
+    const state = get();
+    const expanded = new Set(state.expandedPaths);
     if (expanded.has(path)) {
       expanded.delete(path);
+      set({ expandedPaths: expanded });
     } else {
       expanded.add(path);
+      set({ expandedPaths: expanded });
+      // Lazy load children if not yet loaded
+      if (!state.loadedPaths.has(path)) {
+        get().loadChildren(projectName, path);
+      }
     }
-    set({ expandedPaths: expanded });
   },
 
   setExpanded: (path: string, expanded: boolean) => {
@@ -78,5 +183,25 @@ export const useFileStore = create<FileStore>((set, get) => ({
 
   clearSelection: () => set({ selectedFiles: [] }),
 
-  reset: () => set({ tree: [], expandedPaths: new Set(), error: null, selectedFiles: [] }),
+  reset: () => {
+    // Abort all in-flight requests
+    for (const ctrl of get().inflight.values()) ctrl.abort();
+    set({
+      tree: [],
+      fileIndex: [],
+      loading: false,
+      error: null,
+      expandedPaths: new Set(),
+      loadedPaths: new Set(),
+      inflight: new Map(),
+      indexStatus: "idle",
+      selectedFiles: [],
+    });
+  },
+
+  /** @deprecated Alias for loadRoot — kept for callers in tab-bar and mobile-nav */
+  fetchTree: async (projectName: string) => {
+    await get().loadRoot(projectName);
+    get().loadIndex(projectName);
+  },
 }));