@hienlh/ppm 0.2.20 → 0.2.21

package/src/web/components/editor/diff-viewer.tsx

@@ -1,43 +1,22 @@
-import { useEffect, useState, useMemo, useRef } from "react";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { EditorView, lineNumbers } from "@codemirror/view";
-import { EditorState } from "@codemirror/state";
-import { MergeView } from "@codemirror/merge";
-import { javascript } from "@codemirror/lang-javascript";
-import { python } from "@codemirror/lang-python";
-import { html } from "@codemirror/lang-html";
-import { css } from "@codemirror/lang-css";
-import { json } from "@codemirror/lang-json";
-import { markdown } from "@codemirror/lang-markdown";
-import type { Extension } from "@codemirror/state";
+import { useEffect, useState, useMemo } from "react";
+import { DiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2, FileCode, PanelLeftOpen, PanelRightOpen, Columns2, WrapText } from "lucide-react";
 
-function getLanguageExtension(filename: string): Extension | null {
+function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
-  switch (ext) {
-    case "js":
-    case "jsx":
-      return javascript({ jsx: true });
-    case "ts":
-    case "tsx":
-      return javascript({ jsx: true, typescript: true });
-    case "py":
-      return python();
-    case "html":
-      return html();
-    case "css":
-    case "scss":
-      return css();
-    case "json":
-      return json();
-    case "md":
-    case "mdx":
-      return markdown();
-    default:
-      return null;
-  }
+  const map: Record<string, string> = {
+    js: "javascript", jsx: "javascript",
+    ts: "typescript", tsx: "typescript",
+    py: "python", html: "html",
+    css: "css", scss: "scss",
+    json: "json", md: "markdown", mdx: "markdown",
+    yaml: "yaml", yml: "yaml",
+    sh: "shell", bash: "shell",
+  };
+  return map[ext] ?? "plaintext";
 }
 
 interface DiffViewerProps {
@@ -60,25 +39,21 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const [fileContents, setFileContents] = useState<{ original: string; modified: string } | null>(null);
   const [loading, setLoading] = useState(!isInline);
   const [error, setError] = useState<string | null>(null);
-  /** "both" | "left" | "right" — controls which diff panel is expanded */
   const [expandMode, setExpandMode] = useState<"both" | "left" | "right">("both");
   const { wordWrap, toggleWordWrap } = useSettingsStore();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const mergeViewRef = useRef<MergeView | null>(null);
+  const monacoTheme = useMonacoTheme();
 
   useEffect(() => {
-    if (isInline) return; // No fetch needed for inline diffs
+    if (isInline) return;
     if (!projectName) return;
     setLoading(true);
     setError(null);
 
     if (file1 && file2) {
-      const params = new URLSearchParams();
-      params.set("file1", file1);
-      params.set("file2", file2);
+      const params = new URLSearchParams({ file1, file2 });
       api
         .get<{ original: string; modified: string }>(
-          `${projectUrl(projectName)}/files/compare?${params.toString()}`,
+          `${projectUrl(projectName)}/files/compare?${params}`,
         )
         .then((data) => { setFileContents(data); setLoading(false); })
         .catch((err) => { setError(err instanceof Error ? err.message : "Failed to compare files"); setLoading(false); });
@@ -87,15 +62,14 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
     let url: string;
     if (filePath) {
-      const params = new URLSearchParams();
-      params.set("file", filePath);
+      const params = new URLSearchParams({ file: filePath });
       if (ref1) params.set("ref", ref1);
-      url = `${projectUrl(projectName)}/git/file-diff?${params.toString()}`;
+      url = `${projectUrl(projectName)}/git/file-diff?${params}`;
     } else if (ref1 || ref2) {
       const params = new URLSearchParams();
       if (ref1) params.set("ref1", ref1);
       if (ref2) params.set("ref2", ref2);
-      url = `${projectUrl(projectName)}/git/diff?${params.toString()}`;
+      url = `${projectUrl(projectName)}/git/diff?${params}`;
     } else {
       url = `${projectUrl(projectName)}/git/diff`;
     }
@@ -104,7 +78,7 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
       .get<{ diff: string }>(url)
       .then((data) => { setDiffText(data.diff); setLoading(false); })
       .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
-  }, [filePath, projectName, ref1, ref2, file1, file2]);
+  }, [filePath, projectName, ref1, ref2, file1, file2, isInline]);
 
   const { original, modified } = useMemo(() => {
     if (isInline) return { original: inlineOriginal ?? "", modified: inlineModified ?? "" };
@@ -113,105 +87,11 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     return parseDiff(diffText);
   }, [diffText, isInline, inlineOriginal, inlineModified, isFileCompare, fileContents]);
 
-  const langExts = useMemo(() => {
+  const language = useMemo(() => {
     const langFile = filePath ?? file2 ?? file1;
-    if (!langFile) return [];
-    const ext = getLanguageExtension(langFile);
-    return ext ? [ext] : [];
+    return langFile ? getMonacoLanguage(langFile) : "plaintext";
   }, [filePath, file1, file2]);
 
-  // Create MergeView when content is ready
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container || loading || error) return;
-    if (!original && !modified) return;
-
-    // Clean up previous
-    if (mergeViewRef.current) {
-      mergeViewRef.current.destroy();
-      mergeViewRef.current = null;
-    }
-
-    const isMobile = window.innerWidth < 768;
-    const sharedExts: Extension[] = [
-      ...langExts,
-      oneDark,
-      EditorView.editable.of(false),
-      EditorState.readOnly.of(true),
-      lineNumbers(),
-      ...(wordWrap ? [EditorView.lineWrapping] : []),
-      EditorView.theme({
-        "&": { fontSize: "13px", fontFamily: "var(--font-mono)" },
-        // Character-level highlight: bold background, NO underline
-        "& .cm-changedText": {
-          textDecoration: "none !important",
-          borderBottom: "none !important",
-          textDecorationLine: "none !important",
-          backgroundColor: "rgba(16, 185, 129, 0.4) !important",
-          borderRadius: "2px",
-        },
-        "& .cm-deletedChunk .cm-changedText": {
-          backgroundColor: "rgba(239, 68, 68, 0.4) !important",
-        },
-      }),
-    ];
-
-    const mv = new MergeView({
-      parent: container,
-      a: { doc: original, extensions: sharedExts },
-      b: { doc: modified, extensions: sharedExts },
-      orientation: "a-b",
-      revertControls: undefined,
-      highlightChanges: true, // Highlight changed characters within a line
-      gutter: true,
-    });
-
-    mergeViewRef.current = mv;
-
-    // Sync horizontal scroll between both editors
-    const scrollerA = mv.a.dom.querySelector(".cm-scroller") as HTMLElement | null;
-    const scrollerB = mv.b.dom.querySelector(".cm-scroller") as HTMLElement | null;
-    let syncing = false;
-    const syncScroll = (source: HTMLElement, target: HTMLElement) => {
-      if (syncing) return;
-      syncing = true;
-      target.scrollLeft = source.scrollLeft;
-      syncing = false;
-    };
-    const onScrollA = () => scrollerA && scrollerB && syncScroll(scrollerA, scrollerB);
-    const onScrollB = () => scrollerA && scrollerB && syncScroll(scrollerB, scrollerA);
-    scrollerA?.addEventListener("scroll", onScrollA);
-    scrollerB?.addEventListener("scroll", onScrollB);
-
-    return () => {
-      scrollerA?.removeEventListener("scroll", onScrollA);
-      scrollerB?.removeEventListener("scroll", onScrollB);
-      mv.destroy();
-      mergeViewRef.current = null;
-    };
-  }, [original, modified, langExts, loading, error, wordWrap]);
-
-  // Apply expand mode by hiding left/right editor panels via CSS
-  useEffect(() => {
-    const mv = mergeViewRef.current;
-    if (!mv) return;
-    // MergeView exposes .a (left) and .b (right) EditorView instances
-    const leftPanel = mv.a.dom.closest(".cm-mergeViewEditor") as HTMLElement | null ?? mv.a.dom.parentElement;
-    const rightPanel = mv.b.dom.closest(".cm-mergeViewEditor") as HTMLElement | null ?? mv.b.dom.parentElement;
-    const container = containerRef.current;
-    const gutter = container?.querySelector<HTMLElement>(".cm-mergeViewGutter");
-
-    if (leftPanel) {
-      leftPanel.style.display = expandMode === "right" ? "none" : "";
-      leftPanel.style.flex = expandMode === "left" ? "1" : "";
-    }
-    if (rightPanel) {
-      rightPanel.style.display = expandMode === "left" ? "none" : "";
-      rightPanel.style.flex = expandMode === "right" ? "1" : "";
-    }
-    if (gutter) gutter.style.display = expandMode !== "both" ? "none" : "";
-  }, [expandMode, original, modified]);
-
   if (!projectName && !isInline) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -231,9 +111,7 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   if (error) {
     return (
-      <div className="flex items-center justify-center h-full text-destructive text-sm">
-        {error}
-      </div>
+      <div className="flex items-center justify-center h-full text-destructive text-sm">{error}</div>
     );
   }
 
@@ -247,26 +125,26 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     );
   }
 
+  // expandMode left/right → inline diff (Monaco has no single-side mode)
+  const renderSideBySide = expandMode === "both";
+
   const expandToggle = (
     <div className="flex items-center gap-0.5 shrink-0">
-      <button
-        type="button"
+      <button type="button"
         onClick={() => setExpandMode(expandMode === "left" ? "both" : "left")}
         className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "left" ? "bg-muted text-foreground" : ""}`}
         title="Expand original"
       >
         <PanelLeftOpen className="size-3.5" />
       </button>
-      <button
-        type="button"
+      <button type="button"
         onClick={() => setExpandMode("both")}
         className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "both" ? "bg-muted text-foreground" : ""}`}
         title="Side by side"
       >
         <Columns2 className="size-3.5" />
       </button>
-      <button
-        type="button"
+      <button type="button"
         onClick={() => setExpandMode(expandMode === "right" ? "both" : "right")}
         className={`p-1 rounded hover:bg-muted transition-colors ${expandMode === "right" ? "bg-muted text-foreground" : ""}`}
         title="Expand modified"
@@ -274,10 +152,7 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
         <PanelRightOpen className="size-3.5" />
       </button>
       <div className="w-px h-3.5 bg-border mx-0.5 shrink-0" />
-      <button
-        type="button"
-        onClick={toggleWordWrap}
-        title="Toggle word wrap"
+      <button type="button" onClick={toggleWordWrap} title="Toggle word wrap"
         className={`p-1 rounded hover:bg-muted transition-colors ${wordWrap ? "bg-muted text-foreground" : ""}`}
       >
         <WrapText className="size-3.5" />
@@ -300,18 +175,31 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
             )}
           </span>
         )}
-        {/* Desktop: expand toggle in header */}
         <div className="hidden md:block">{expandToggle}</div>
       </div>
 
-      {/* MergeView container — side-by-side, pinch-zoom on mobile */}
-      <div
-        ref={containerRef}
-        className="flex-1 overflow-auto touch-pinch-zoom [&_.cm-mergeView]:h-full"
-        style={{ WebkitOverflowScrolling: "touch" }}
-      />
+      {/* Monaco DiffEditor */}
+      <div className="flex-1 overflow-hidden">
+        <DiffEditor
+          height="100%"
+          language={language}
+          original={original}
+          modified={modified}
+          theme={monacoTheme}
+          options={{
+            fontSize: 13,
+            fontFamily: "Menlo, Monaco, Consolas, monospace",
+            wordWrap: wordWrap ? "on" : "off",
+            renderSideBySide,
+            readOnly: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+          }}
+          loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
+        />
+      </div>
 
-      {/* Mobile: expand toggle at bottom */}
+      {/* Mobile expand toggle */}
       <div className="md:hidden flex justify-center border-t py-1 bg-background shrink-0">
         {expandToggle}
       </div>
@@ -327,16 +215,11 @@ function parseDiff(diff: string): { original: string; modified: string } {
 
   for (const line of lines) {
     if (
-      line.startsWith("diff --git") ||
-      line.startsWith("diff --no-index") ||
-      line.startsWith("index ") ||
-      line.startsWith("new file") ||
-      line.startsWith("deleted file") ||
-      line.startsWith("old mode") ||
-      line.startsWith("new mode") ||
-      line.startsWith("---") ||
-      line.startsWith("+++") ||
-      line.startsWith("Binary files") ||
+      line.startsWith("diff --git") || line.startsWith("diff --no-index") ||
+      line.startsWith("index ") || line.startsWith("new file") ||
+      line.startsWith("deleted file") || line.startsWith("old mode") ||
+      line.startsWith("new mode") || line.startsWith("---") ||
+      line.startsWith("+++") || line.startsWith("Binary files") ||
       line.startsWith("\\ No newline")
     ) continue;
 
@@ -347,7 +230,7 @@ function parseDiff(diff: string): { original: string; modified: string } {
       originalLines.push(line.slice(1));
     } else if (line.startsWith("+")) {
       modifiedLines.push(line.slice(1));
-    } else if (line.startsWith(" ") || line === "") {
+    } else {
       const content = line.startsWith(" ") ? line.slice(1) : line;
       originalLines.push(content);
       modifiedLines.push(content);

package/src/web/components/layout/add-project-form.tsx

@@ -0,0 +1,151 @@
+import { useState, useEffect, useRef } from "react";
+import { Loader2, FolderOpen } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { api } from "@/lib/api-client";
+import { cn } from "@/lib/utils";
+
+interface SuggestedDir {
+  path: string;
+  name: string;
+}
+
+interface AddProjectFormProps {
+  onSuccess: () => void;
+  onCancel: () => void;
+  /** Extra class for the submit button row */
+  footerClassName?: string;
+}
+
+export function AddProjectForm({ onSuccess, onCancel, footerClassName }: AddProjectFormProps) {
+  const { addProject } = useProjectStore();
+  const [path, setPath] = useState("");
+  const [name, setName] = useState("");
+  const [suggestions, setSuggestions] = useState<SuggestedDir[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Fetch suggestions when path changes
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (!path.trim()) { setSuggestions([]); setShowSuggestions(false); return; }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const results = await api.get<SuggestedDir[]>(`/api/projects/suggest-dirs?q=${encodeURIComponent(path)}`);
+        setSuggestions(results ?? []);
+        setShowSuggestions(true);
+      } catch {
+        setSuggestions([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 250);
+  }, [path]);
+
+  // Close suggestions on outside click
+  useEffect(() => {
+    function handle(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        setShowSuggestions(false);
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, []);
+
+  function selectSuggestion(dir: SuggestedDir) {
+    setPath(dir.path);
+    if (!name) setName(dir.name);
+    setShowSuggestions(false);
+  }
+
+  async function handleSubmit(e?: React.FormEvent) {
+    e?.preventDefault();
+    if (!path.trim()) { setError("Path is required"); return; }
+    setError("");
+    setSubmitting(true);
+    try {
+      await addProject(path.trim(), name.trim() || undefined);
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to add project");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+      {/* Path input with suggestions */}
+      <div ref={wrapperRef} className="relative">
+        <label className="block text-xs font-medium text-foreground mb-1">Project path</label>
+        <div className="relative flex items-center">
+          <FolderOpen className="absolute left-2.5 size-3.5 text-text-subtle pointer-events-none" />
+          <input
+            type="text"
+            value={path}
+            onChange={(e) => { setPath(e.target.value); setError(""); }}
+            onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
+            placeholder="/path/to/project"
+            className="w-full pl-8 pr-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+            autoFocus
+            autoComplete="off"
+          />
+          {loading && <Loader2 className="absolute right-2.5 size-3.5 text-text-subtle animate-spin" />}
+        </div>
+
+        {/* Suggestions dropdown */}
+        {showSuggestions && suggestions.length > 0 && (
+          <div className="absolute top-full left-0 right-0 mt-1 z-10 bg-popover border border-border rounded-md shadow-md max-h-48 overflow-y-auto">
+            {suggestions.map((dir) => (
+              <button
+                key={dir.path}
+                type="button"
+                onMouseDown={() => selectSuggestion(dir)}
+                className="w-full flex flex-col items-start px-3 py-2 text-left hover:bg-accent/50 transition-colors"
+              >
+                <span className="text-sm font-medium truncate w-full">{dir.name}</span>
+                <span className="text-xs text-text-subtle truncate w-full">{dir.path}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Optional name */}
+      <div>
+        <label className="block text-xs font-medium text-foreground mb-1">Display name <span className="text-muted-foreground">(optional)</span></label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="my-project"
+          className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      </div>
+
+      {error && <p className="text-xs text-destructive">{error}</p>}
+
+      <div className={cn("flex justify-end gap-2 pt-1", footerClassName)}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="px-3 py-1.5 text-sm text-text-secondary hover:text-foreground transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={submitting || !path.trim()}
+          className="px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50"
+        >
+          {submitting ? "Adding…" : "Add Project"}
+        </button>
+      </div>
+    </form>
+  );
+}

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

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
+import { useSettingsStore } from "@/stores/settings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 
 interface CommandItem {
@@ -45,6 +46,7 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
   const openTab = useTabStore((s) => s.openTab);
   const activeProject = useProjectStore((s) => s.activeProject);
   const fileTree = useFileStore((s) => s.tree);
+  const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
 
   // Action commands
   const actionCommands = useMemo<CommandItem[]>(() => {
@@ -60,7 +62,7 @@ export function CommandPalette({ open, onClose }: { open: boolean; onClose: () =
       { id: "terminal", label: "New Terminal", icon: Terminal, action: openNewTab("terminal", "Terminal"), keywords: "bash shell console", group: "action" },
       { id: "chat", label: "New AI Chat", icon: MessageSquare, action: openNewTab("chat", "AI Chat"), keywords: "ai assistant claude", group: "action" },
       { id: "git-graph", label: "Git Graph", icon: GitBranch, action: openNewTab("git-graph", "Git Graph"), keywords: "branch history log", group: "action" },
-      { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: openNewTab("git-status", "Git Status"), keywords: "changes diff staged", group: "action" },
+      { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action" },
       { id: "settings", label: "Settings", icon: Settings, action: openNewTab("settings", "Settings"), keywords: "config preferences", group: "action" },
     ];
   }, [activeProject, openTab, onClose]);

package/src/web/components/layout/editor-panel.tsx

@@ -7,24 +7,26 @@ import { SplitDropOverlay } from "./split-drop-overlay";
 import { cn } from "@/lib/utils";
 
 const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
-  projects: lazy(() => import("@/components/projects/project-list").then((m) => ({ default: m.ProjectList }))),
   terminal: lazy(() => import("@/components/terminal/terminal-tab").then((m) => ({ default: m.TerminalTab }))),
   chat: lazy(() => import("@/components/chat/chat-tab").then((m) => ({ default: m.ChatTab }))),
   editor: lazy(() => import("@/components/editor/code-editor").then((m) => ({ default: m.CodeEditor }))),
   "git-graph": lazy(() => import("@/components/git/git-graph").then((m) => ({ default: m.GitGraph }))),
-  "git-status": lazy(() => import("@/components/git/git-status-panel").then((m) => ({ default: m.GitStatusPanel }))),
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
 };
 
 interface EditorPanelProps {
   panelId: string;
+  projectName: string;
 }
 
-export function EditorPanel({ panelId }: EditorPanelProps) {
+export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
   const panel = usePanelStore((s) => s.panels[panelId]);
   const isFocused = usePanelStore((s) => s.focusedPanelId === panelId);
-  const panelCount = usePanelStore((s) => Object.keys(s.panels).length);
+  const panelCount = usePanelStore((s) => {
+    const grid = s.currentProject === projectName ? s.grid : (s.projectGrids[projectName] ?? [[]]);
+    return grid.flat().length;
+  });
 
   if (!panel) return null;