@hienlh/ppm 0.17.26 → 0.17.28

package/src/services/file-watcher.service.ts

@@ -1,15 +1,23 @@
-import { watch, type FSWatcher } from "node:fs";
+import { WatchTree } from "./file-watcher/watch-tree.ts";
 
-const IGNORE = new Set([
-  ".git", "node_modules", "dist", "build", ".next",
-  ".turbo", "coverage", "__pycache__", "bun.lock",
-]);
 const DEBOUNCE_MS = 500;
+/**
+ * Directory budgets. One covered directory costs one inotify watch on Linux, and
+ * the machine-wide default ceiling is 524288 shared with every other process, so
+ * PPM stays well inside it even with several projects watched at once.
+ *
+ * The per-project cap is hard. The total is best-effort: a native recursive watch
+ * picks up directories created later without telling us, so exact accounting is not
+ * possible — the worst case is a few projects at their own cap, still ~4% of the
+ * kernel ceiling.
+ */
+const MAX_DIRS_PER_PROJECT = 8_000;
+const MAX_DIRS_TOTAL = 20_000;
 
 type ChangeCallback = (projectName: string, path: string) => void;
 
 interface WatchEntry {
-  watcher: FSWatcher;
+  tree: WatchTree;
   refCount: number;
   timer?: ReturnType<typeof setTimeout>;
   pending: Set<string>;
@@ -24,9 +32,28 @@ export function onFileChange(cb: ChangeCallback): void {
   changeCallbacks.push(cb);
 }
 
-function shouldIgnore(filePath: string): boolean {
-  const parts = filePath.split(/[/\\]/);
-  return parts.some((p) => IGNORE.has(p));
+function totalCoveredDirs(): number {
+  let total = 0;
+  for (const entry of watchers.values()) total += entry.tree.stats().dirs;
+  return total;
+}
+
+/**
+ * Emit on a fixed window rather than restarting the timer per event: a project
+ * under continuous churn (a build, a large checkout) would otherwise keep pushing
+ * the deadline back and never notify the UI at all.
+ */
+function queue(entry: WatchEntry, projectName: string, relPath: string): void {
+  entry.pending.add(relPath);
+  if (entry.timer) return;
+  entry.timer = setTimeout(() => {
+    entry.timer = undefined;
+    const paths = [...entry.pending];
+    entry.pending.clear();
+    for (const path of paths) {
+      for (const cb of changeCallbacks) cb(projectName, path);
+    }
+  }, DEBOUNCE_MS);
 }
 
 /** Start watching a project directory (ref-counted — safe to call multiple times) */
@@ -37,28 +64,40 @@ export function startWatching(projectName: string, projectPath: string): void {
     return;
   }
 
-  try {
-    const watcher = watch(projectPath, { recursive: true }, (_event, filename) => {
-      if (!filename || shouldIgnore(filename)) return;
-      const entry = watchers.get(projectName);
-      if (!entry) return;
+  const maxDirs = Math.max(0, Math.min(MAX_DIRS_PER_PROJECT, MAX_DIRS_TOTAL - totalCoveredDirs()));
+  const entry: WatchEntry = {
+    tree: new WatchTree({
+      root: projectPath,
+      maxDirs,
+      onChange: (relPath) => {
+        // Look the entry up again: it may have been stopped while an event was queued.
+        const current = watchers.get(projectName);
+        if (current) queue(current, projectName, relPath);
+      },
+    }),
+    refCount: 1,
+    pending: new Set(),
+  };
+  watchers.set(projectName, entry);
 
-      entry.pending.add(filename);
-      if (entry.timer) clearTimeout(entry.timer);
-      entry.timer = setTimeout(() => {
-        const paths = [...entry.pending];
-        entry.pending.clear();
-        for (const p of paths) {
-          const relPath = p.replaceAll("\\", "/");
-          for (const cb of changeCallbacks) cb(projectName, relPath);
-        }
-      }, DEBOUNCE_MS);
-    });
-
-    watchers.set(projectName, { watcher, refCount: 1, pending: new Set() });
-    console.log(`[file-watcher] Started watching: ${projectName}`);
+  try {
+    entry.tree.start();
   } catch (e) {
+    entry.tree.close(); // release whatever attached before the failure
+    watchers.delete(projectName);
     console.warn(`[file-watcher] Failed to watch ${projectPath}: ${(e as Error).message}`);
+    return;
+  }
+
+  const { dirs, watchers: handles, truncated } = entry.tree.stats();
+  console.log(
+    `[file-watcher] Started watching: ${projectName} (${dirs} dirs, ${handles} handles${truncated ? ", capped" : ""})`,
+  );
+  if (truncated) {
+    console.warn(
+      `[file-watcher] ${projectName} exceeded the ${maxDirs}-directory budget — ` +
+      `parts of the tree are not watched. Add build/cache directories to the ignore list.`,
+    );
   }
 }
 
@@ -69,7 +108,7 @@ export function stopWatching(projectName: string): void {
   entry.refCount--;
   if (entry.refCount <= 0) {
     if (entry.timer) clearTimeout(entry.timer);
-    entry.watcher.close();
+    entry.tree.close();
     watchers.delete(projectName);
     console.log(`[file-watcher] Stopped watching: ${projectName}`);
   }

package/src/web/components/chat/chat-scroll-nav.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronUp, ChevronDown, ChevronsDown, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
+
+/** Collapse delay after opening or after the last navigation. */
+const AUTO_COLLAPSE_MS = 3200;
+/** Shorter collapse used when a keyboard shortcut opens the cluster just as feedback. */
+const KEYBOARD_PEEK_MS = 1000;
+
+interface NavState {
+  hasAbove: boolean;
+  atBottom: boolean;
+  /** 1-based position of the last user message at or above the viewport top. */
+  idx: number;
+  total: number;
+}
+
+const INITIAL: NavState = { hasAbove: false, atBottom: true, idx: 0, total: 0 };
+
+/**
+ * Floating bottom-right navigation between the user's own messages.
+ *
+ * At rest this is a single dim 30px puck so it reads as chrome and stops covering
+ * the tail of long user bubbles. Clicking it expands a vertical cluster
+ * (previous · position · next · latest) that auto-collapses after use.
+ *
+ * Every bubble is in the real DOM (no virtualization), so navigation queries the
+ * rendered rows by their `data-msg-index`. Scrolling stays `behavior: "auto"` to
+ * avoid fighting `use-stick-to-bottom`.
+ */
+export function ChatScrollNav({ scrollElement, userIndices, scrollToBottom }: {
+  scrollElement: HTMLDivElement | null;
+  userIndices: number[];
+  scrollToBottom: (opts?: { animation?: "instant" | "smooth" }) => void | Promise<boolean> | boolean;
+}) {
+  const isMobile = useIsMobile();
+  const [nav, setNav] = useState<NavState>(INITIAL);
+  const [open, setOpen] = useState(false);
+  /** Bumped on every jump so the collapse timer restarts even when `idx` is unchanged. */
+  const [jumpTick, setJumpTick] = useState(0);
+  const collapseMsRef = useRef(AUTO_COLLAPSE_MS);
+  const clusterRef = useRef<HTMLDivElement>(null);
+  const puckRef = useRef<HTMLButtonElement>(null);
+  /** Set while focus lives inside the cluster, so collapsing can hand it back. */
+  const heldFocusRef = useRef(false);
+  /** True when the cluster was opened by activating the puck rather than by a shortcut. */
+  const focusOnOpenRef = useRef(false);
+
+  // Top of a row in the scroll container's content coordinates (scrollTop space).
+  const rowTop = (el: HTMLElement, row: HTMLElement, elTop: number) =>
+    row.getBoundingClientRect().top - elTop + el.scrollTop;
+
+  const userRows = useCallback((el: HTMLElement) =>
+    Array.from(el.querySelectorAll<HTMLElement>("[data-msg-index]"))
+      .filter((r) => userIndices.includes(Number(r.dataset.msgIndex))),
+    [userIndices]);
+
+  useEffect(() => {
+    const el = scrollElement;
+    if (!el) return;
+    let raf = 0;
+    const recompute = () => {
+      const top = el.scrollTop;
+      const elTop = el.getBoundingClientRect().top;
+      const tops = userRows(el).map((r) => rowTop(el, r, elTop));
+      let idx = 0;
+      for (let i = 0; i < tops.length; i++) if (tops[i]! <= top + 12) idx = i + 1;
+      const next: NavState = {
+        hasAbove: tops.some((t) => t < top - 4),
+        atBottom: el.scrollHeight - top - el.clientHeight < 8,
+        idx,
+        total: tops.length,
+      };
+      setNav((prev) => (
+        prev.hasAbove === next.hasAbove && prev.atBottom === next.atBottom
+          && prev.idx === next.idx && prev.total === next.total
+      ) ? prev : next);
+    };
+    const schedule = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(recompute);
+    };
+    recompute();
+    el.addEventListener("scroll", schedule, { passive: true });
+    const ro = new ResizeObserver(schedule);
+    ro.observe(el);
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      el.removeEventListener("scroll", schedule);
+      ro.disconnect();
+    };
+  }, [scrollElement, userRows]);
+
+  // Auto-collapse. Restarts on every jump so a burst of navigation keeps it open.
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => setOpen(false), collapseMsRef.current);
+    return () => clearTimeout(t);
+  }, [open, nav.idx, jumpTick]);
+
+  // Opening unmounts the puck, so focus would otherwise fall to <body> and restart
+  // tab order at the document top. Only pull focus when the puck was activated —
+  // the keyboard shortcut fires while the user is reading and must not steal it.
+  useEffect(() => {
+    if (!open || !focusOnOpenRef.current) return;
+    focusOnOpenRef.current = false;
+    const box = clusterRef.current;
+    (box?.querySelector<HTMLButtonElement>("button:not(:disabled)") ?? box)?.focus();
+  }, [open]);
+
+  // Collapsing unmounts whatever the user was on — hand focus back to the puck.
+  useEffect(() => {
+    if (open || !heldFocusRef.current) return;
+    heldFocusRef.current = false;
+    puckRef.current?.focus();
+  }, [open]);
+
+  const afterJump = useCallback(() => {
+    collapseMsRef.current = AUTO_COLLAPSE_MS;
+    setJumpTick((n) => n + 1);
+  }, []);
+
+  const goUp = useCallback(() => {
+    const el = scrollElement;
+    if (!el) return;
+    const top = el.scrollTop;
+    const elTop = el.getBoundingClientRect().top;
+    let target: number | undefined;
+    for (const r of userRows(el)) {
+      const t = rowTop(el, r, elTop);
+      if (t < top - 4) target = t; // ascending — keep the last one still above
+      else break;
+    }
+    if (target != null) el.scrollTo({ top: target, behavior: "auto" });
+    afterJump();
+  }, [scrollElement, userRows, afterJump]);
+
+  const goDown = useCallback(() => {
+    const el = scrollElement;
+    if (!el) return;
+    const top = el.scrollTop;
+    const elTop = el.getBoundingClientRect().top;
+    const next = userRows(el).map((r) => rowTop(el, r, elTop)).find((t) => t > top + 4);
+    if (next != null) el.scrollTo({ top: next, behavior: "auto" });
+    else scrollToBottom({ animation: "instant" });
+    afterJump();
+  }, [scrollElement, userRows, scrollToBottom, afterJump]);
+
+  const goBottom = useCallback(() => {
+    scrollToBottom({ animation: "instant" });
+    afterJump();
+  }, [scrollToBottom, afterJump]);
+
+  // Global Alt+Arrow shortcuts arrive as window events from useGlobalKeybindings.
+  useEffect(() => {
+    const el = scrollElement;
+    if (!el) return;
+    const run = (fn: () => void) => () => {
+      if (!ownsGlobalShortcut(el)) return;
+      fn();
+      // Must follow the jump — the jump handlers reset the delay to the full value.
+      collapseMsRef.current = KEYBOARD_PEEK_MS;
+      setOpen(true);
+    };
+    const onPrev = run(goUp);
+    const onNext = run(goDown);
+    window.addEventListener("chat-nav-prev", onPrev);
+    window.addEventListener("chat-nav-next", onNext);
+    return () => {
+      window.removeEventListener("chat-nav-prev", onPrev);
+      window.removeEventListener("chat-nav-next", onNext);
+    };
+  }, [scrollElement, goUp, goDown]);
+
+  const rowClass = cn(
+    "w-[34px] flex items-center justify-center rounded-[9px] text-text-secondary",
+    "motion-safe:transition-colors hover:bg-surface-elevated hover:text-foreground",
+    "disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-text-secondary",
+    isMobile ? "h-9" : "h-[30px]",
+  );
+
+  return (
+    <div className="absolute bottom-3 right-2.5 z-10 flex flex-col items-end gap-1.5">
+      {open ? (
+        <div
+          ref={clusterRef}
+          tabIndex={-1}
+          className="flex flex-col p-[3px] rounded-xl border border-border bg-surface-elevated/95 backdrop-blur-[8px] shadow-lg outline-none"
+          onFocus={() => { heldFocusRef.current = true; }}
+          onKeyDown={(e) => { if (e.key === "Escape") setOpen(false); }}
+        >
+          <button type="button" onClick={goUp} disabled={!nav.hasAbove} aria-label="Jump to previous message" className={rowClass}>
+            <ChevronUp className="size-[15px]" />
+          </button>
+          <span
+            className="font-mono text-[10px] font-medium text-text-subtle text-center py-px"
+            aria-label={`Message ${nav.idx || 1} of ${nav.total}`}
+          >
+            {nav.total ? `${nav.idx || 1}/${nav.total}` : "0/0"}
+          </span>
+          <button type="button" onClick={goDown} disabled={nav.atBottom} aria-label="Jump to next message" className={rowClass}>
+            <ChevronDown className="size-[15px]" />
+          </button>
+          <button type="button" onClick={goBottom} disabled={nav.atBottom} aria-label="Jump to latest" className={rowClass}>
+            <ChevronsDown className="size-[13px]" />
+          </button>
+        </div>
+      ) : (
+        <button
+          ref={puckRef}
+          type="button"
+          onClick={() => { collapseMsRef.current = AUTO_COLLAPSE_MS; focusOnOpenRef.current = true; setOpen(true); }}
+          aria-label="Navigate messages"
+          aria-expanded={false}
+          title="Navigate messages"
+          // Mobile keeps a 36px circle inside a 44px hit area.
+          className={cn("group flex items-center justify-center", isMobile ? "size-11" : "size-[30px]")}
+        >
+          <span
+            className={cn(
+              "flex items-center justify-center rounded-full border border-border bg-surface-elevated/55 backdrop-blur-[6px] text-text-subtle",
+              "motion-safe:transition-colors group-hover:bg-surface-elevated group-hover:text-foreground",
+              isMobile ? "size-9" : "size-[30px]",
+            )}
+          >
+            <ChevronsUpDown className="size-[15px]" />
+          </span>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -411,6 +411,19 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     [handleSend, clearDraft, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments],
   );
 
+  // Past user messages for the composer's ArrowUp/Down recall. Read through a ref
+  // so the getter identity stays stable — `messages` changes on every stream chunk,
+  // and a fresh array each time would break MessageInput's memo().
+  const messagesRef = useRef(messages);
+  messagesRef.current = messages;
+  const getUserHistory = useCallback(
+    () =>
+      messagesRef.current
+        .filter((m) => m.role === "user" && m.content.trim())
+        .map((m) => m.content),
+    [],
+  );
+
   /** Draft auto-save callback — called by MessageInput on content change */
   const handleContentChange = useCallback(
     (content: string, attachments?: DraftAttachment[]) => {
@@ -680,6 +693,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             onExternalPathsConsumed={handleExternalPathsConsumed}
             onDisambiguate={handleDisambiguate}
             onContentChange={handleContentChange}
+            getUserHistory={getUserHistory}
             permissionMode={permissionMode}
             onModeChange={setPermissionMode}
             providerId={providerId}

package/src/web/components/chat/message-history-recall.ts

@@ -0,0 +1,22 @@
+/**
+ * Shell-style recall over a chat session's past user messages.
+ *
+ * `index` counts back from the newest message (0 = newest, 1 = the one before
+ * it, …); -1 means the composer holds a live draft rather than a recalled
+ * message. `history` arrives oldest-first, matching transcript order.
+ */
+export interface HistoryStep {
+  index: number;
+  text: string;
+}
+
+/**
+ * Move `delta` steps into the past (+1) or back toward the draft (-1).
+ * Returns null when the step would fall outside the history.
+ */
+export function stepHistory(history: string[], index: number, delta: number): HistoryStep | null {
+  if (history.length === 0) return null;
+  const next = index + delta;
+  if (next < -1 || next >= history.length) return null;
+  return { index: next, text: next === -1 ? "" : history[history.length - 1 - next]! };
+}

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

@@ -3,8 +3,11 @@ import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clo
 import { useVoiceInput } from "@/hooks/use-voice-input";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { randomId } from "@/lib/utils";
+import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
 import { isImageFile } from "@/lib/file-support";
 import { AttachmentChips } from "./attachment-chips";
+import { stepHistory } from "./message-history-recall";
+import { toComposerDraft } from "./user-message-parse";
 import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
 import { ProviderSelector } from "./provider-selector";
 import { ModelThinkingSelector } from "./model-thinking-selector";
@@ -56,6 +59,8 @@ interface MessageInputProps {
   clearSignal?: number;
   /** Called on content change for draft auto-save */
   onContentChange?: (content: string, attachments?: Array<{ name: string; path: string }>) => void;
+  /** Returns this session's user messages, oldest first — powers ArrowUp/Down recall */
+  getUserHistory?: () => string[];
   /** Auto-focus textarea on mount */
   autoFocus?: boolean;
   /** Current permission mode */
@@ -98,6 +103,7 @@ export const MessageInput = memo(function MessageInput({
   initialValue,
   clearSignal,
   onContentChange,
+  getUserHistory,
   autoFocus,
   permissionMode,
   onModeChange,
@@ -156,6 +162,34 @@ export const MessageInput = memo(function MessageInput({
       : mobileTextareaRef.current;
   }, []);
 
+  // Shell-style history recall. Counts back from the newest user message
+  // (0 = newest); -1 means not browsing, so the input holds a live draft.
+  const historyIdxRef = useRef(-1);
+
+  /** Step through past user messages. Returns false when the step is out of range. */
+  const recallHistory = useCallback(
+    (delta: number) => {
+      const step = stepHistory(getUserHistory?.() ?? [], historyIdxRef.current, delta);
+      if (!step) return false;
+      historyIdxRef.current = step.index;
+      // Recalled content still carries its send-time wrappers — unwrap it back
+      // into what was typed, with the delegated agent restored as a chip.
+      const { agent, text } = toComposerDraft(step.text);
+      setAgentTag(agent);
+      writeTextareas(text);
+      const ta = getVisibleTextarea();
+      if (!ta) return true;
+      ta.focus();
+      requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = text.length; });
+      if (needsJsResize.current) {
+        ta.style.height = "auto";
+        ta.style.height = Math.min(ta.scrollHeight, ta === mobileTextareaRef.current ? 80 : 160) + "px";
+      }
+      return true;
+    },
+    [getUserHistory, writeTextareas, getVisibleTextarea],
+  );
+
   // Voice input (Web Speech API)
   const voice = useVoiceInput();
   // Store pre-voice text so voice appends to existing input
@@ -184,12 +218,18 @@ export const MessageInput = memo(function MessageInput({
     }
   }, [voice.isListening, voice.start, voice.stop, voiceResultCb]);
 
-  // Listen for global keyboard shortcut (Cmd+Shift+V) to toggle voice
+  // Listen for global keyboard shortcut (Cmd+Shift+V) to toggle voice.
+  // Guarded so that only the focused panel's chat reacts — every chat tab stays
+  // mounted, so an unguarded listener toggles the mic in all of them at once.
   useEffect(() => {
-    const handler = () => { if (voice.supported) handleVoiceToggle(); };
+    const handler = () => {
+      if (!voice.supported) return;
+      if (!ownsGlobalShortcut(getVisibleTextarea())) return;
+      handleVoiceToggle();
+    };
     window.addEventListener("toggle-voice-input", handler);
     return () => window.removeEventListener("toggle-voice-input", handler);
-  }, [voice.supported, handleVoiceToggle]);
+  }, [voice.supported, handleVoiceToggle, getVisibleTextarea]);
 
   // Listen for "Send to Chat" from terminal or other tabs — add as attachment chip
   useEffect(() => {
@@ -485,6 +525,7 @@ export const MessageInput = memo(function MessageInput({
     setAgentTag(null);
     setPendingSend(false);
     setPriority('next');
+    historyIdxRef.current = -1;
     if (needsJsResize.current) {
       if (textareaRef.current) textareaRef.current.style.height = "auto";
       if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
@@ -520,6 +561,16 @@ export const MessageInput = memo(function MessageInput({
         handleSend();
         return;
       }
+      // History recall. Only starts from an empty input so ArrowUp keeps moving
+      // the caret inside a multi-line draft. The slash/@ pickers swallow these
+      // keys before they reach here while either one is open.
+      // Bare arrows only — Alt+Arrow is the global chat-transcript jump.
+      if ((e.key === "ArrowUp" || e.key === "ArrowDown") && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
+        const browsing = historyIdxRef.current >= 0;
+        if (!browsing && (e.key === "ArrowDown" || valueRef.current !== "" || agentTag)) return;
+        if (recallHistory(e.key === "ArrowUp" ? 1 : -1)) e.preventDefault();
+        return;
+      }
       // Shift+Tab: cycle permission mode
       if (e.shiftKey && e.key === "Tab") {
         e.preventDefault();
@@ -529,7 +580,7 @@ export const MessageInput = memo(function MessageInput({
         onModeChange?.(next);
       }
     },
-    [handleSend, permissionMode, onModeChange],
+    [handleSend, permissionMode, onModeChange, recallHistory, agentTag],
   );
 
   const updatePickerState = useCallback(
@@ -582,6 +633,8 @@ export const MessageInput = memo(function MessageInput({
       const el = e.target;
       const text = el.value;
       valueRef.current = text;
+      // Typing turns a recalled message back into a live draft.
+      historyIdxRef.current = -1;
       // Sync the other textarea (handles viewport rotation edge case)
       const other = el === textareaRef.current ? mobileTextareaRef.current : textareaRef.current;
       if (other) other.value = text;