@hienlh/ppm 0.20.9 → 0.21.0

package/src/web/components/ui/dialog.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { XIcon } from "lucide-react"
+import { XIcon } from "@/lib/icons"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

package/src/web/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "@/lib/icons"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

package/src/web/components/ui/file-browser-picker.tsx

@@ -7,10 +7,11 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
 import { api } from "@/lib/api-client";
 import {
-  Folder, File, Database, Home, Monitor, FileText, FolderPlus, Trash2,
+  Home, Monitor, FileText, FolderPlus, Trash2,
   Download, ChevronRight, ArrowLeft, Search, Loader2, Clock, Eye, EyeOff,
-} from "lucide-react";
+} from "@/lib/icons";
 import { cn } from "@/lib/utils";
+import { FileIcon } from "@/lib/file-icons";
 import { formatRelativeTime, formatSize } from "@/components/os-explorer/format-file-meta";
 
 // ── Types ──────────────────────────────────────────────────────────
@@ -62,10 +63,7 @@ function saveRecent(dirPath: string): void {
 }
 
 function fileIcon(entry: BrowseEntry): React.ReactNode {
-  if (entry.type === "directory") return <Folder className="size-4 text-primary" />;
-  const ext = entry.name.split(".").pop()?.toLowerCase();
-  if (ext && ["db", "sqlite", "sqlite3"].includes(ext)) return <Database className="size-4 text-warning" />;
-  return <File className="size-4 text-text-subtle" />;
+  return <FileIcon name={entry.name} kind={entry.type === "directory" ? "directory" : "file"} />;
 }
 
 function matchesAccept(name: string, accept?: string[]): boolean {

package/src/web/components/ui/select.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@/lib/icons"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"

package/src/web/components/ui/sidebar-header.tsx

@@ -1,4 +1,4 @@
-import type { LucideIcon } from "lucide-react";
+import type { LucideIcon } from "@/lib/icons";
 import type { ReactNode } from "react";
 
 interface SidebarHeaderProps {

package/src/web/components/ui/sonner.tsx

@@ -6,7 +6,7 @@ import {
   Loader2Icon,
   OctagonXIcon,
   TriangleAlertIcon,
-} from "lucide-react"
+} from "@/lib/icons"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { useSettingsStore } from "@/stores/settings-store"
 

package/src/web/hooks/use-git-repo.ts

@@ -0,0 +1,124 @@
+/**
+ * The repository a git surface should talk to, and the two ways to address it.
+ *
+ * `gitUrl` builds a project-scoped git URL carrying the `repo=` scope, and
+ * `repoPath` rebases a project-relative file path onto that repository. Between
+ * them they cover both shapes of git route: the repo-scoped ones (status, log,
+ * graph, worktrees) and the file-scoped ones (blame, hunks, file diff).
+ *
+ * For a project that *is* a repository — nearly all of them — every URL this
+ * returns is byte-identical to what the call site built before, and
+ * `repoPath` is the identity. That is deliberate: the container-folder case
+ * must not be able to regress the ordinary one.
+ */
+import { useCallback, useEffect, useMemo } from "react";
+import { projectUrl } from "@/lib/api-client";
+import { useGitRepoStore } from "@/stores/git-repo-store";
+import {
+  hasNoRepo,
+  needsPick,
+  projectRelativePath,
+  rebaseStatusPaths,
+  repoRelativePath,
+  resolveRepo,
+  withRepoParam,
+  type GitRepoCandidate,
+  type StatusPaths,
+} from "@/lib/git-repo-scope";
+
+export interface UseGitRepo {
+  /** The resolved repository, or null while loading / awaiting a choice. */
+  repo: GitRepoCandidate | null;
+  /** Every repository under the project, for a picker. */
+  repos: GitRepoCandidate[];
+  /** True when the project root is not a repository but something under it is. */
+  isNested: boolean;
+  /** True when there is a choice to make and it has not been made. */
+  needsPick: boolean;
+  /** True when nothing under the project is a repository. */
+  noRepo: boolean;
+  /** `gitUrl("/status")`, `gitUrl("/graph?max=50")` — scope included. */
+  gitUrl: (suffix: string) => string;
+  /** Project-relative → repository-relative; null when outside the repository. */
+  repoPath: (projectRelative: string) => string | null;
+  /** Repository-relative → project-relative, for paths git reported. */
+  projectFile: (repoRelative: string) => string;
+  /** A status answer with its paths in the project's terms, for the file tree. */
+  rebaseStatus: <T extends StatusPaths>(status: T) => T;
+  choose: (repoPath: string) => void;
+  reload: () => void;
+}
+
+export function useGitRepo(projectName: string | undefined): UseGitRepo {
+  const discovery = useGitRepoStore((s) => (projectName ? s.discovery[projectName] : undefined));
+  const chosen = useGitRepoStore((s) => (projectName ? s.chosen[projectName] : undefined));
+  const load = useGitRepoStore((s) => s.load);
+  const chooseInStore = useGitRepoStore((s) => s.choose);
+
+  useEffect(() => {
+    if (projectName) void load(projectName);
+  }, [projectName, load]);
+
+  const repo = resolveRepo(discovery, chosen);
+
+  const gitUrl = useCallback(
+    (suffix: string) => withRepoParam(`${projectUrl(projectName ?? "")}/git${suffix}`, repo),
+    [projectName, repo],
+  );
+
+  const repoPath = useCallback(
+    (projectRelative: string) => repoRelativePath(projectRelative, repo),
+    [repo],
+  );
+
+  const projectFile = useCallback(
+    (repoRelative: string) => projectRelativePath(repoRelative, repo),
+    [repo],
+  );
+
+  const rebaseStatus = useCallback(
+    <T extends StatusPaths>(status: T) => rebaseStatusPaths(status, repo),
+    [repo],
+  );
+
+  const choose = useCallback(
+    (path: string) => {
+      if (projectName) chooseInStore(projectName, path);
+    },
+    [projectName, chooseInStore],
+  );
+
+  const reload = useCallback(() => {
+    if (projectName) void load(projectName, true);
+  }, [projectName, load]);
+
+  // Memoised because call sites name `gitRepo` itself in a dependency array —
+  // a fresh object literal every render would re-create their `useCallback`s
+  // every render, and an effect depending on one of those would re-fetch in a
+  // loop. Every field is already stable: the store's own values, or a
+  // `useCallback` keyed on the resolved repo.
+  //
+  // The store's in-flight flag used to be one of them. It went false → true →
+  // false on every mount and nothing ever read it, so all it did was hand every
+  // consumer three identities where one would do — and fire the first
+  // `git blame`, `git status` and file diff three times. It is gone from the
+  // store entirely now rather than merely left out here. The two identities
+  // that remain are the ones that mean something: before discovery answers,
+  // and after.
+  return useMemo(
+    () => ({
+      repo,
+      repos: discovery?.repos ?? [],
+      isNested: !!discovery && !discovery.rootIsRepo && discovery.repos.length > 0,
+      needsPick: needsPick(discovery, chosen),
+      noRepo: hasNoRepo(discovery),
+      gitUrl,
+      repoPath,
+      projectFile,
+      rebaseStatus,
+      choose,
+      reload,
+    }),
+    [repo, discovery, chosen, gitUrl, repoPath, projectFile, rebaseStatus, choose, reload],
+  );
+}

package/src/web/hooks/use-global-keybindings.ts

@@ -8,6 +8,7 @@ import { useExtensionStore } from "@/stores/extension-store";
 import { useCompareStore } from "@/stores/compare-store";
 import { openSettings } from "@/components/settings/open-settings";
 import { basename } from "@/lib/utils";
+import { dispatchExtCommand } from "@/lib/ext-command-dispatch";
 
 /** Dispatch this event to open the command palette from anywhere, optionally with initial query */
 export function openCommandPalette(initialQuery?: string) {
@@ -225,6 +226,15 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Problems, in the dock — VS Code's Ctrl+Shift+M, and its placement.
+      if (match(e, "open-problems")) {
+        e.preventDefault();
+        usePanelStore.getState().openInDock({
+          type: "problems", title: "Problems", projectId: null, closable: true,
+        });
+        return;
+      }
+
       // Switch project 1-9
       for (let i = 1; i <= 9; i++) {
         if (match(e, `switch-project-${i}`)) {
@@ -253,12 +263,7 @@ export function useGlobalKeybindings() {
           if (!parsed) { parsed = parseCombo(raw); extParsedCache.set(raw, parsed); }
           if (eventMatchesCombo(e, parsed)) {
             e.preventDefault();
-            const project = useProjectStore.getState().activeProject;
-            const args: unknown[] = [];
-            if (project?.path) args.push(project.path);
-            window.dispatchEvent(new CustomEvent("ext:command:execute", {
-              detail: { command: kb.command, args },
-            }));
+            void dispatchExtCommand(kb.command);
             return;
           }
         }

package/src/web/hooks/use-inline-blame.ts

@@ -16,8 +16,19 @@
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import type * as MonacoType from "monaco-editor";
-import { api, projectUrl } from "@/lib/api-client";
-import { formatBlameAnnotation, type BlameResult } from "../../shared/blame";
+import { api } from "@/lib/api-client";
+import {
+  formatBlameAnnotation,
+  isUncommittedHash,
+  type BlameCommitInfo,
+  type BlameLineDetail,
+  type BlameResult,
+} from "../../shared/blame";
+import { buildBlameHoverMarkdown } from "@/lib/blame-hover";
+import { registerBlameHoverCommands } from "@/lib/blame-hover-commands";
+import { registerDiffLanguage } from "@/lib/monaco-diff-language";
+import { useGitRepo } from "@/hooks/use-git-repo";
+import { useProjectStore } from "@/stores/project-store";
 
 const STYLE_ID = "inline-blame-styles";
 // Monaco renders injected text as a real span carrying `inlineClassName`, so
@@ -29,6 +40,11 @@ const CSS = `
     font-style: italic;
     white-space: pre;
   }
+  /* The hover's avatar is a markdown image, so it sits on the text baseline and
+     hangs below the author name without this. */
+  .monaco-hover img {
+    vertical-align: text-bottom;
+  }
 `;
 
 function injectStyles(editor: MonacoType.editor.ICodeEditor): void {
@@ -78,22 +94,53 @@ export function useInlineBlame({
   const [stale, setStale] = useState(false);
   const [line, setLine] = useState(0);
   const [reloadToken, setReloadToken] = useState(0);
+  // Keyed, not bare: two adjacent lines can share a commit, and a detail
+  // matched on the hash alone would show the previous line's diff on the next
+  // one while the new request is still in flight.
+  const [detail, setDetail] = useState<{ key: string; value: BlameLineDetail | null } | null>(null);
+  const detailCache = useRef(new Map<string, BlameLineDetail | null>());
   const decorationsRef = useRef<MonacoType.editor.IEditorDecorationsCollection | null>(null);
+  // The line the annotation is actually drawn on, for the touch handler to
+  // compare a tap against. A ref rather than the `line` state so the handler
+  // does not have to be torn down and rebuilt on every cursor move.
+  const annotatedLineRef = useRef(0);
+  // The hover's action links address the Git Graph views by absolute path,
+  // which is what those commands take. Looked up here rather than passed in, so
+  // the three call sites do not each have to find it.
+  const projectPath = useProjectStore((s) => s.projects.find((p) => p.name === projectName)?.path);
+  // Which repository the project's git actually lives in: itself, or a subfolder
+  // the user picked. Every path below is expressed relative to *that*, because
+  // that is where git runs.
+  const gitRepo = useGitRepo(projectName);
+  const gitRoot = gitRepo.repo?.path ?? projectPath;
+  // `null` means the open file is outside the chosen repository — there is
+  // nothing to blame, which is a quiet no-annotation rather than an error.
+  const repoFile = filePath ? gitRepo.repoPath(filePath) : null;
 
   const refresh = useCallback(() => setReloadToken((n) => n + 1), []);
 
+  // Both are global to the page and idempotent. Registered here rather than at
+  // module load because both need a Monaco instance: the `diff` language is
+  // what colours the hover's diff block, and the commands are what its buttons
+  // reach.
+  useEffect(() => {
+    if (!monaco || !enabled) return;
+    registerDiffLanguage(monaco);
+    registerBlameHoverCommands(monaco);
+  }, [monaco, enabled]);
+
   // Load the blame. A file with no git history answers with an empty table
   // rather than an error, so there is nothing to special-case here.
   useEffect(() => {
-    if (!enabled || !projectName || !filePath) {
+    if (!enabled || !projectName || !filePath || repoFile == null) {
       setBlame(null);
       return;
     }
     let cancelled = false;
-    const query = new URLSearchParams({ path: filePath });
+    const query = new URLSearchParams({ path: repoFile });
     if (rev) query.set("rev", rev);
     api
-      .get<BlameResult>(`${projectUrl(projectName)}/git/blame?${query}`)
+      .get<BlameResult>(gitRepo.gitUrl(`/blame?${query}`))
       .then((result) => {
         if (cancelled) return;
         setBlame(result);
@@ -106,7 +153,7 @@ export function useInlineBlame({
     return () => {
       cancelled = true;
     };
-  }, [enabled, projectName, filePath, rev, reloadToken]);
+  }, [enabled, projectName, filePath, repoFile, rev, reloadToken, gitRepo]);
 
   // Follow the cursor, and notice edits.
   useEffect(() => {
@@ -122,19 +169,108 @@ export function useInlineBlame({
     };
   }, [editor, enabled, readOnly]);
 
-  const commit = (() => {
+  // A tap where a touch device has no hover.
+  //
+  // The project's mobile rules forbid a hover-only interaction, and a phone has
+  // no hover at all — so on a device that reports `hover: none`, a tap on the
+  // annotation opens the same hover that a mouse would. `editor.action.showHover`
+  // opens it at the cursor, which the tap has already moved onto the line.
+  //
+  // The tap is identified by position rather than by the mouse target's
+  // `injectedText`, which says so exactly but is not in Monaco's public
+  // typings: the annotation sits after the line's last column, so a tap at or
+  // past that column on the annotated line is a tap on it. Being a little
+  // generous about the column is the right way round here — it makes the target
+  // the whole end of the line rather than a 19px strip of italic text.
+  useEffect(() => {
+    if (!editor || !enabled) return;
+    // `hover: none` rather than a width breakpoint: the question is whether this
+    // pointer can hover at all, not how wide the screen is.
+    if (!window.matchMedia?.("(hover: none)").matches) return;
+
+    const sub = editor.onMouseDown((e) => {
+      const position = e.target.position;
+      const model = editor.getModel();
+      if (!position || !model) return;
+      if (position.lineNumber !== annotatedLineRef.current) return;
+      if (position.column < model.getLineMaxColumn(position.lineNumber)) return;
+      editor.getAction("editor.action.showHover")?.run();
+    });
+    return () => sub.dispose();
+  }, [editor, enabled]);
+
+  const lineBlame: { commit: BlameCommitInfo; origLine: number } | null = (() => {
     if (!blame || stale || line <= 0) return null;
-    const entry = blame.lines[line - 1];
+    const dense = blame.lines[line - 1];
     // The table is dense and in order, but a defensive lookup costs nothing and
     // keeps a short blame from mis-attributing a line past its end.
-    const hash = entry?.finalLine === line ? entry.hash : blame.lines.find((l) => l.finalLine === line)?.hash;
-    return hash ? (blame.commits[hash] ?? null) : null;
+    const entry = dense?.finalLine === line ? dense : blame.lines.find((l) => l.finalLine === line);
+    if (!entry) return null;
+    const commit = blame.commits[entry.hash];
+    return commit ? { commit, origLine: entry.origLine } : null;
   })();
+  const commit = lineBlame?.commit ?? null;
+
+  // What the hover needs beyond the annotation: the whole commit message and
+  // the change this commit made to this line. One `git show` per commit *and
+  // line*, so the key covers both — moving down a line inside the same commit
+  // is a different diff.
+  //
+  // Deliberately not fetched lazily when the hover opens: Monaco reads
+  // `hoverMessage` off the decoration synchronously, so a hover has whatever is
+  // ready at that moment. Fetching as the cursor moves is what makes it appear
+  // filled in instead of behind a spinner — which is the failure this editor
+  // already had once, with the bundled TypeScript worker.
+  const detailHash = commit && !isUncommittedHash(commit.hash) ? commit.hash : null;
+  // The path *at that commit*: after a rename the current path did not exist
+  // there, and git would report no diff rather than an error. `filename` comes
+  // from the blame git already ran, so it is repository-relative like
+  // `repoFile` — not project-relative like the tab's `filePath`.
+  const detailPath = commit?.filename || repoFile || undefined;
+  const detailLine = lineBlame?.origLine ?? 0;
+  const detailKey = `${detailHash} ${detailLine} ${detailPath}`;
+
+  useEffect(() => {
+    if (!enabled || !projectName || !detailHash || !detailPath || detailLine < 1) {
+      setDetail(null);
+      return;
+    }
+    const key = detailKey;
+    const cache = detailCache.current;
+    // `has`, not a truthy check: a commit with nothing to show caches as null
+    // and must not be refetched on every return to the line.
+    if (cache.has(key)) {
+      setDetail({ key, value: cache.get(key) ?? null });
+      return;
+    }
+
+    let cancelled = false;
+    const query = new URLSearchParams({ hash: detailHash, path: detailPath, line: String(detailLine) });
+    api
+      .get<BlameLineDetail | null>(gitRepo.gitUrl(`/commit-line?${query}`))
+      .then((result) => {
+        if (cancelled) return;
+        // Bounded: `tab-pool` keeps editors mounted for the life of the session,
+        // so an unbounded cache here is a leak that grows with every line the
+        // cursor has ever rested on.
+        if (cache.size >= 200) cache.delete(cache.keys().next().value as string);
+        cache.set(key, result ?? null);
+        setDetail({ key, value: result ?? null });
+      })
+      .catch(() => {
+        // No detail is a smaller hover, not an error worth showing.
+        if (!cancelled) setDetail(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, projectName, detailHash, detailPath, detailLine, detailKey, gitRepo]);
 
   // Draw it.
   useEffect(() => {
     if (!editor || !monaco) return;
     if (!enabled || !commit || line <= 0) {
+      annotatedLineRef.current = 0;
       decorationsRef.current?.clear();
       return;
     }
@@ -142,9 +278,11 @@ export function useInlineBlame({
 
     const model = editor.getModel();
     if (!model || line > model.getLineCount()) {
+      annotatedLineRef.current = 0;
       decorationsRef.current?.clear();
       return;
     }
+    annotatedLineRef.current = line;
     const column = model.getLineMaxColumn(line);
     const text = formatBlameAnnotation(commit);
 
@@ -154,13 +292,25 @@ export function useInlineBlame({
         // `after` injects text that is not part of the model, so it never
         // reaches the file and never shifts a column the user can select.
         after: { content: `    ${text}`, inlineClassName: "inline-blame-annotation" },
+        // Hovering injected text does reach a collapsed decoration: Monaco
+        // relaxes its column check by one character for `showIfCollapsed`, and
+        // the injected span resolves to the line's last column. Verified
+        // against Monaco 0.55.1 rather than assumed, because the whole hover
+        // hangs off it.
         showIfCollapsed: true,
+        // Null for an uncommitted line, which the annotation already explains.
+        hoverMessage: buildBlameHoverMarkdown({
+          commit,
+          detail: detail?.key === detailKey ? detail.value : null,
+          filePath: repoFile ?? "",
+          projectPath: gitRoot,
+        }),
       },
     };
 
     if (decorationsRef.current) decorationsRef.current.set([decoration]);
     else decorationsRef.current = editor.createDecorationsCollection([decoration]);
-  }, [editor, monaco, enabled, commit, line]);
+  }, [editor, monaco, enabled, commit, line, detail, detailKey, repoFile, gitRoot]);
 
   // Take the annotation down when the hook stops being used.
   useEffect(

package/src/web/hooks/use-is-touch-only.ts

@@ -0,0 +1,46 @@
+/**
+ * A device whose primary pointer is a finger.
+ *
+ * `useIsMobile` asks how wide the viewport is, which is the right question for a layout and
+ * the wrong one for a device: a desktop browser narrowed to half the screen is still a
+ * desktop, and a tablet in landscape is still a tablet. Anything deciding what a *machine*
+ * should be asked to do — starting a language server that was 854 MB resident — belongs here,
+ * because the answer must not change when a window is dragged narrower. It did: the editor
+ * tore its language server down at 767px and cold-started a new one on the way back.
+ *
+ * `hover: none` is the same test `use-inline-blame.ts` uses for the tap-to-open path, and
+ * `pointer: coarse` alongside it is what keeps a desktop with a touchscreen on the desktop
+ * answer — browsers report the *primary* pointer there, which is still the mouse.
+ */
+import { useSyncExternalStore } from "react";
+
+const QUERY = "(pointer: coarse) and (hover: none)";
+
+function query(): MediaQueryList | null {
+  return typeof window !== "undefined" && window.matchMedia ? window.matchMedia(QUERY) : null;
+}
+
+function subscribe(cb: () => void): () => void {
+  const list = query();
+  // A device does not usually change category mid-session, but a tablet gaining a trackpad
+  // does — and Safari only gained `addEventListener` on MediaQueryList in 14.
+  list?.addEventListener?.("change", cb);
+  return () => list?.removeEventListener?.("change", cb);
+}
+
+function getSnapshot(): boolean {
+  return query()?.matches ?? false;
+}
+
+function getServerSnapshot(): boolean {
+  return false;
+}
+
+export function useIsTouchOnly(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+/** Non-hook check, for code that runs outside a component. */
+export function isTouchOnlyDevice(): boolean {
+  return getSnapshot();
+}