@hienlh/ppm 0.12.7 → 0.12.9

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

package/src/web/stores/file-tree-merge-helpers.ts

@@ -0,0 +1,44 @@
+/**
+ * Pure helper functions for immutable lazy-tree merging.
+ * Kept separate to stay under the 200-line file size guideline.
+ */
+import type { FileDirEntry } from "../../types/project";
+import type { FileNode } from "./file-store";
+
+/** Convert /files/list entries into sparse FileNode children (no grandchildren). */
+export function entriesToNodes(entries: FileDirEntry[], parentPath: string): FileNode[] {
+  return entries.map((e) => ({
+    name: e.name,
+    path: parentPath ? `${parentPath}/${e.name}` : e.name,
+    type: e.type,
+    ignored: e.isIgnored,
+    // children intentionally undefined — loaded lazily on expand
+  }));
+}
+
+/** Immutable deep-merge of newly loaded children into the sparse tree. */
+export function mergeChildren(tree: FileNode[], folderPath: string, children: FileNode[]): FileNode[] {
+  if (!folderPath) {
+    // Root level: replace root entries, preserve already-loaded sub-children
+    return children.map((newNode) => {
+      const existing = tree.find((n) => n.path === newNode.path);
+      return existing ? { ...newNode, children: existing.children } : newNode;
+    });
+  }
+  return tree.map((node) => mergeNode(node, folderPath, children));
+}
+
+function mergeNode(node: FileNode, targetPath: string, children: FileNode[]): FileNode {
+  if (node.path === targetPath) {
+    // Merge: preserve already-loaded sub-children keyed by path
+    const mergedChildren = children.map((newChild) => {
+      const existing = node.children?.find((c) => c.path === newChild.path);
+      return existing ? { ...newChild, children: existing.children } : newChild;
+    });
+    return { ...node, children: mergedChildren };
+  }
+  if (node.children && targetPath.startsWith(node.path + "/")) {
+    return { ...node, children: node.children.map((child) => mergeNode(child, targetPath, children)) };
+  }
+  return node;
+}

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

@@ -20,7 +20,7 @@ interface JiraStore {
   configs: JiraConfig[];
   selectedProjectId: number | null;
   loadConfigs: () => Promise<void>;
-  saveConfig: (projectId: number, data: { baseUrl: string; email: string; token: string }) => Promise<void>;
+  saveConfig: (projectId: number, data: { baseUrl: string; email: string; token?: string }) => Promise<void>;
   deleteConfig: (projectId: number) => Promise<void>;
   testConnection: (projectId: number) => Promise<boolean>;
   setSelectedProjectId: (id: number | null) => void;

package/dist/web/assets/api-client-CwbMRXYl.js

@@ -1 +0,0 @@
-import{r as e}from"./rolldown-runtime-FhOqtrmT.js";var t=e({api:()=>i,getAuthToken:()=>s,projectUrl:()=>a,setAuthToken:()=>o}),n=`ppm-auth-token`,r=`ppm-auth-reload-ts`,i=new class{baseUrl;constructor(e=``){this.baseUrl=e}getToken(){return localStorage.getItem(n)}headers(){let e={"Content-Type":`application/json`},t=this.getToken();return t&&(e.Authorization=`Bearer ${t}`),e}async get(e){let t=await fetch(`${this.baseUrl}${e}`,{headers:this.headers()});return this.handleResponse(t)}async post(e,t){let n=await fetch(`${this.baseUrl}${e}`,{method:`POST`,headers:this.headers(),body:t==null?void 0:JSON.stringify(t)});return this.handleResponse(n)}async put(e,t){let n=await fetch(`${this.baseUrl}${e}`,{method:`PUT`,headers:this.headers(),body:t==null?void 0:JSON.stringify(t)});return this.handleResponse(n)}async patch(e,t){let n=await fetch(`${this.baseUrl}${e}`,{method:`PATCH`,headers:this.headers(),body:t==null?void 0:JSON.stringify(t)});return this.handleResponse(n)}async del(e,t){let n=await fetch(`${this.baseUrl}${e}`,{method:`DELETE`,headers:this.headers(),body:t==null?void 0:JSON.stringify(t)});await this.handleResponse(n)}async handleResponse(e){if(e.status===401){localStorage.removeItem(n);let e=Number(sessionStorage.getItem(r)||`0`);throw Date.now()-e>3e3&&(sessionStorage.setItem(r,String(Date.now())),window.location.reload()),Error(`Unauthorized`)}let t;try{t=await e.json()}catch{throw Error(e.ok?`Empty response from server`:`Server error (HTTP ${e.status})`)}if(t.ok===!1)throw Error(t.error??`HTTP ${e.status}`);return t.data}};function a(e){return`/api/project/${encodeURIComponent(e)}`}function o(e){localStorage.setItem(n,e)}function s(){return localStorage.getItem(n)}export{o as a,a as i,t as n,s as r,i as t};