@hienlh/ppm 0.13.3 → 0.13.4

package/src/web/components/explorer/file-tree.tsx

@@ -25,6 +25,9 @@ import { useShallow } from "zustand/react/shallow";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
+import { useCompareStore } from "@/stores/compare-store";
+import { openCompareTab } from "@/lib/open-compare-tab";
+import { toast } from "sonner";
 import { cn, basename } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -119,6 +122,7 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
     })),
   );
   const openTab = useTabStore((s) => s.openTab);
+  const compareSelection = useCompareStore((s) => s.selection);
   const isExpanded = expandedPaths.has(node.path);
   const isDir = node.type === "directory";
   const isSelected = selectedFiles.includes(node.path);
@@ -270,6 +274,19 @@ const TreeNode = memo(function TreeNode({ node, depth, projectName, onAction, on
             <Download className="size-3.5 mr-2" />
             Download{isDir ? " as Zip" : ""}
           </ContextMenuItem>
+          {!isDir && (
+            <>
+              <ContextMenuSeparator />
+              <ContextMenuItem onClick={() => onAction("select-for-compare", node)}>
+                Select for Compare
+              </ContextMenuItem>
+              {compareSelection && compareSelection.projectName === projectName && compareSelection.filePath !== node.path && (
+                <ContextMenuItem onClick={() => onAction("compare-with-selected", node)}>
+                  Compare with Selected ({compareSelection.label})
+                </ContextMenuItem>
+              )}
+            </>
+          )}
           {!isDir && selectedFiles.length === 2 && (
             <>
               <ContextMenuSeparator />
@@ -445,11 +462,35 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     if (e.dataTransfer.files.length > 0) uploadFiles("", e.dataTransfer.files);
   }
 
-  function handleAction(action: string, node: FileNode) {
+  async function handleAction(action: string, node: FileNode) {
     if (action === "copy-path") {
       navigator.clipboard.writeText(node.path).catch(() => {});
       return;
     }
+    if (action === "select-for-compare") {
+      useCompareStore.getState().setSelection({
+        filePath: node.path,
+        projectName: activeProject!.name,
+        label: node.name,
+      });
+      return;
+    }
+    if (action === "compare-with-selected") {
+      const sel = useCompareStore.getState().selection;
+      if (!sel) return;
+      try {
+        await openCompareTab(
+          { path: sel.filePath, dirtyContent: sel.dirtyContent },
+          { path: node.path },
+          activeProject!.name,
+        );
+        useCompareStore.getState().clearSelection();
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Compare failed";
+        toast.error(msg);
+      }
+      return;
+    }
     if (action === "download") {
       if (node.type === "directory") {
         downloadFolder(activeProject!.name, node.path);

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

@@ -16,6 +16,7 @@ import {
   Mic,
   RefreshCw,
   Plus,
+  Columns2,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -23,6 +24,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useExtensionStore } from "@/stores/extension-store";
+import { useCompareStore } from "@/stores/compare-store";
 import { api } from "@/lib/api-client";
 import { basename } from "@/lib/utils";
 import { scoreFileSearchFast, compareScores, getFilename, type FileSearchScore } from "@/lib/score-file-search";
@@ -40,6 +42,8 @@ interface CommandItem {
   group: "action" | "file" | "fs" | "db";
   connectionColor?: string | null;
   shortcut?: string;
+  /** True if gitignored — rendered with muted style for visual cue */
+  isIgnored?: boolean;
 }
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
@@ -189,6 +193,29 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       { id: "postgres", label: "PostgreSQL", icon: Database, action: openNewTab("postgres", "PostgreSQL"), keywords: "database pg sql query", group: "action" },
       { id: "voice-input", label: "Voice Input", icon: Mic, action: () => { window.dispatchEvent(new CustomEvent("toggle-voice-input")); onClose(); }, keywords: "speech microphone dictate voice", group: "action", shortcut: formatShortcut(getBinding("voice-input")) },
       { id: "git-status", label: "Git Status", icon: GitCommitHorizontal, action: () => { setSidebarActiveTab("git"); onClose(); }, keywords: "changes diff staged", group: "action", shortcut: formatShortcut(getBinding("open-git-status")) },
+      {
+        id: "compare-files",
+        label: "Compare Files...",
+        icon: Columns2,
+        group: "action",
+        keywords: "diff compare two files select",
+        shortcut: formatShortcut(getBinding("compare-files")),
+        action: () => {
+          const { activeTabId: tid, tabs: ts } = useTabStore.getState();
+          const active = ts.find((t) => t.id === tid);
+          const meta = active?.metadata as { filePath?: string; projectName?: string; unsavedContent?: string } | undefined;
+          if (active?.type === "editor" && meta?.filePath && meta?.projectName) {
+            useCompareStore.getState().setSelection({
+              filePath: meta.filePath,
+              projectName: meta.projectName,
+              dirtyContent: meta.unsavedContent,
+              label: basename(meta.filePath),
+            });
+          }
+          window.dispatchEvent(new CustomEvent("open-compare-picker"));
+          onClose();
+        },
+      },
       {
         id: "settings", label: "Settings", icon: Settings,
         action: () => {
@@ -244,6 +271,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       icon: FileCode,
       group: "file" as const,
       keywords: f.path,
+      // Propagate gitignore flag for muted rendering (only present on /files/index entries)
+      isIgnored: ("isIgnored" in f ? f.isIgnored : undefined) as boolean | undefined,
       action: () => {
         openTab({
           type: "editor",
@@ -500,7 +529,8 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
                     i === selectedIdx
                       ? "bg-accent/15 text-text-primary"
                       : "text-text-secondary hover:bg-surface-elevated"
-                  }`}
+                  } ${cmd.isIgnored ? "opacity-60" : ""}`}
+                  title={cmd.isIgnored ? "Gitignored file" : undefined}
                 >
                   <Icon className="size-4 shrink-0" />
                   <span className="truncate">{cmd.label}</span>

package/src/web/components/layout/draggable-tab.tsx

@@ -162,6 +162,14 @@ export function DraggableTab({
       {showDropBefore && (
         <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary rounded-full z-10" />
       )}
+      {tagColor && (
+        // Tag identity marker — VS Code-style vertical bar on left edge (centered, ~60% height, rounded right)
+        <span
+          aria-hidden
+          className="absolute left-0 top-2 bottom-2 w-[2px] rounded-r-full pointer-events-none"
+          style={{ backgroundColor: tagColor }}
+        />
+      )}
       {onContextAction ? (
         <ContextMenu>
           <ContextMenuTrigger asChild>

package/src/web/components/layout/tab-bar.tsx

@@ -16,6 +16,9 @@ import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useCompareStore } from "@/stores/compare-store";
+import { openCompareTab } from "@/lib/open-compare-tab";
+import { toast } from "sonner";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { useTouchTabDrag, wasTouchDragRecent } from "@/hooks/use-touch-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
@@ -25,7 +28,8 @@ import {
   ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,
   ContextMenuItem, ContextMenuSeparator,
 } from "@/components/ui/context-menu";
-import { Tag, Check } from "lucide-react";
+import { Tag, Check, Columns2 } from "lucide-react";
+import { basename } from "@/lib/utils";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
 import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
@@ -128,9 +132,74 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
     }
   }, []);
 
+  // Compare selection — re-renders menu when selection changes
+  const compareSelection = useCompareStore((s) => s.selection);
+
   // File action dialog state for tab context menu (rename/delete)
   const [fileActionState, setFileActionState] = useState<{ action: string; node: FileNode; tabId: string } | null>(null);
 
+  /**
+   * Build "Select for Compare" + "Compare with Selected" menu items for a tab.
+   * Returns null for non-file tabs so menu stays clean.
+   */
+  function compareMenuItems(tab: Tab): React.ReactNode {
+    if (tab.type !== "editor") return null;
+    const filePath = tab.metadata?.filePath as string | undefined;
+    const projectName = tab.metadata?.projectName as string | undefined;
+    if (!filePath || !projectName) return null;
+
+    // Only show "Compare with Selected" when same project (cross-project
+    // selection is auto-cleared on project switch, but guard covers the
+    // brief window before the subscription fires).
+    const hasDifferentSelection =
+      compareSelection != null &&
+      compareSelection.projectName === projectName &&
+      compareSelection.filePath !== filePath;
+
+    return (
+      <>
+        <ContextMenuItem
+          onClick={() => {
+            const unsaved = tab.metadata?.unsavedContent as string | undefined;
+            useCompareStore.getState().setSelection({
+              filePath,
+              projectName,
+              dirtyContent: unsaved,
+              label: basename(filePath),
+            });
+          }}
+        >
+          <Columns2 className="size-3.5 mr-2" />
+          Select for Compare
+        </ContextMenuItem>
+        {hasDifferentSelection && (
+          <ContextMenuItem
+            onClick={async () => {
+              const sel = useCompareStore.getState().selection;
+              if (!sel) return;
+              const unsaved = tab.metadata?.unsavedContent as string | undefined;
+              try {
+                await openCompareTab(
+                  { path: sel.filePath, dirtyContent: sel.dirtyContent },
+                  { path: filePath, dirtyContent: unsaved },
+                  projectName,
+                );
+                useCompareStore.getState().clearSelection();
+              } catch (err) {
+                const msg = err instanceof Error ? err.message : "Compare failed";
+                toast.error(msg);
+              }
+            }}
+          >
+            <Columns2 className="size-3.5 mr-2" />
+            Compare with Selected ({compareSelection!.label})
+          </ContextMenuItem>
+        )}
+        <ContextMenuSeparator />
+      </>
+    );
+  }
+
   /** Handle context menu actions on a tab */
   const handleTabContextAction = useCallback((tab: Tab, action: string) => {
     const panelState = usePanelStore.getState();
@@ -257,34 +326,39 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
               onContextAction={(action) => handleTabContextAction(tab, action)}
               tagColor={sessionId ? sessionTagMap[sessionId]?.color : undefined}
-              extraMenuContent={sessionId && projectTags.length > 0 ? (
+              extraMenuContent={
                 <>
-                  <ContextMenuSub>
-                    <ContextMenuSubTrigger>
-                      <Tag className="size-3.5 mr-2" />
-                      Set Tag
-                    </ContextMenuSubTrigger>
-                    <ContextMenuSubContent>
-                      {projectTags.map((pt) => (
-                        <ContextMenuItem key={pt.id} onClick={() => assignTagToSession(sessionId, pt.id)}>
-                          <span className="size-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: pt.color }} />
-                          {pt.name}
-                          {sessionTagMap[sessionId]?.id === pt.id && <Check className="size-3 ml-auto" />}
-                        </ContextMenuItem>
-                      ))}
-                      {sessionTagMap[sessionId] && (
-                        <>
-                          <ContextMenuSeparator />
-                          <ContextMenuItem onClick={() => assignTagToSession(sessionId, null)}>
-                            Remove tag
-                          </ContextMenuItem>
-                        </>
-                      )}
-                    </ContextMenuSubContent>
-                  </ContextMenuSub>
-                  <ContextMenuSeparator />
+                  {compareMenuItems(tab)}
+                  {sessionId && projectTags.length > 0 && (
+                    <>
+                      <ContextMenuSub>
+                        <ContextMenuSubTrigger>
+                          <Tag className="size-3.5 mr-2" />
+                          Set Tag
+                        </ContextMenuSubTrigger>
+                        <ContextMenuSubContent>
+                          {projectTags.map((pt) => (
+                            <ContextMenuItem key={pt.id} onClick={() => assignTagToSession(sessionId, pt.id)}>
+                              <span className="size-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: pt.color }} />
+                              {pt.name}
+                              {sessionTagMap[sessionId]?.id === pt.id && <Check className="size-3 ml-auto" />}
+                            </ContextMenuItem>
+                          ))}
+                          {sessionTagMap[sessionId] && (
+                            <>
+                              <ContextMenuSeparator />
+                              <ContextMenuItem onClick={() => assignTagToSession(sessionId, null)}>
+                                Remove tag
+                              </ContextMenuItem>
+                            </>
+                          )}
+                        </ContextMenuSubContent>
+                      </ContextMenuSub>
+                      <ContextMenuSeparator />
+                    </>
+                  )}
                 </>
-              ) : undefined}
+              }
             />
             );
           })}

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

@@ -4,6 +4,8 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useKeybindingsStore, parseCombo, eventMatchesCombo } from "@/stores/keybindings-store";
 import { useExtensionStore } from "@/stores/extension-store";
+import { useCompareStore } from "@/stores/compare-store";
+import { basename } from "@/lib/utils";
 
 /** Dispatch this event to open the command palette from anywhere, optionally with initial query */
 export function openCommandPalette(initialQuery?: string) {
@@ -156,6 +158,24 @@ export function useGlobalKeybindings() {
         return;
       }
 
+      // Compare Files — seed A from active editor tab if applicable, then open picker
+      if (match(e, "compare-files")) {
+        e.preventDefault();
+        const { activeTabId, tabs } = useTabStore.getState();
+        const active = tabs.find((t) => t.id === activeTabId);
+        const meta = active?.metadata as { filePath?: string; projectName?: string; unsavedContent?: string } | undefined;
+        if (active?.type === "editor" && meta?.filePath && meta?.projectName) {
+          useCompareStore.getState().setSelection({
+            filePath: meta.filePath,
+            projectName: meta.projectName,
+            dirtyContent: meta.unsavedContent,
+            label: basename(meta.filePath),
+          });
+        }
+        window.dispatchEvent(new CustomEvent("open-compare-picker"));
+        return;
+      }
+
       // Open search (sidebar)
       if (match(e, "open-search")) {
         e.preventDefault();

package/src/web/lib/open-compare-tab.ts

@@ -0,0 +1,76 @@
+import { api, projectUrl } from "@/lib/api-client";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+
+/** One side of a compare — path + optional in-memory dirty buffer. */
+export interface CompareSide {
+  path: string;
+  dirtyContent?: string;
+}
+
+/**
+ * Open a `git-diff` tab comparing two files.
+ *
+ * Routing:
+ * - If either side has `dirtyContent` → fetch clean side via `/files/read`
+ *   and pass `original`+`modified` inline (DiffViewer's inline mode).
+ * - Else → pass `file1`+`file2` metadata (DiffViewer fetches `/files/compare`).
+ *
+ * Returns the new tab id.
+ */
+export async function openCompareTab(
+  a: CompareSide,
+  b: CompareSide,
+  projectName: string,
+): Promise<string> {
+  const title = `${basename(a.path)} ↔ ${basename(b.path)}`;
+  const aDirty = a.dirtyContent !== undefined;
+  const bDirty = b.dirtyContent !== undefined;
+
+  let metadata: Record<string, unknown>;
+
+  if (aDirty || bDirty) {
+    const [original, modified] = await Promise.all([
+      resolveSideContent(a, projectName),
+      resolveSideContent(b, projectName),
+    ]);
+    // Inline mode — DiffViewer uses `original`/`modified` when present
+    // (see diff-viewer.tsx:36 `isInline` check).
+    metadata = {
+      projectName,
+      original,
+      modified,
+      // Keep paths around for future needs (copy path, re-open source, etc.).
+      file1: a.path,
+      file2: b.path,
+    };
+  } else {
+    metadata = {
+      projectName,
+      file1: a.path,
+      file2: b.path,
+    };
+  }
+
+  const id = useTabStore.getState().openTab({
+    type: "git-diff",
+    title,
+    projectId: projectName,
+    metadata,
+    closable: true,
+  });
+  return id;
+}
+
+async function resolveSideContent(side: CompareSide, projectName: string): Promise<string> {
+  if (side.dirtyContent !== undefined) return side.dirtyContent;
+  try {
+    const { content } = await api.get<{ content: string }>(
+      `${projectUrl(projectName)}/files/read?path=${encodeURIComponent(side.path)}`,
+    );
+    return content;
+  } catch (err) {
+    const reason = err instanceof Error ? err.message : String(err);
+    throw new Error(`Failed to read "${side.path}": ${reason}`);
+  }
+}

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

@@ -0,0 +1,57 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { useProjectStore } from "@/stores/project-store";
+
+/** Selection captured when user picks a file "for compare". */
+export interface CompareSelection {
+  filePath: string;
+  projectName: string;
+  /** Captured snapshot of dirty editor buffer — undefined if file was clean. */
+  dirtyContent?: string;
+  /** Display name (basename) for menu/dialog UI. */
+  label: string;
+}
+
+interface CompareStore {
+  selection: CompareSelection | null;
+  setSelection: (sel: CompareSelection) => void;
+  clearSelection: () => void;
+}
+
+/** Avoid persisting huge dirty buffers (>500KB) to keep localStorage fast. */
+const MAX_DIRTY_PERSIST_BYTES = 500_000;
+
+export const useCompareStore = create<CompareStore>()(
+  persist(
+    (set) => ({
+      selection: null,
+      setSelection: (sel) => set({ selection: sel }),
+      clearSelection: () => set({ selection: null }),
+    }),
+    {
+      name: "ppm:compare-selection",
+      // Strip oversized dirtyContent before persisting — keep the path so user
+      // can still compare (content will be re-fetched from disk).
+      partialize: (s) => {
+        if (!s.selection) return { selection: null };
+        const sel = s.selection;
+        if (sel.dirtyContent && sel.dirtyContent.length > MAX_DIRTY_PERSIST_BYTES) {
+          const { dirtyContent: _, ...rest } = sel;
+          return { selection: rest };
+        }
+        return { selection: sel };
+      },
+    },
+  ),
+);
+
+// Auto-clear selection when the user switches active project.
+// Tracked in module scope to avoid clearing on the initial load hydration.
+let lastActiveProject: string | null = null;
+useProjectStore.subscribe((state) => {
+  const now = state.activeProject?.name ?? null;
+  if (lastActiveProject !== null && lastActiveProject !== now) {
+    useCompareStore.getState().clearSelection();
+  }
+  lastActiveProject = now;
+});

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

@@ -37,6 +37,7 @@ export const KEY_ACTIONS: KeyAction[] = [
   { id: "open-git-status", label: "Git Status (sidebar)", category: "tabs", defaultKey: "Mod+Shift+E" },
   { id: "open-search", label: "Search Files (sidebar)", category: "tabs", defaultKey: "Mod+Shift+F" },
   { id: "voice-input", label: "Voice Input", category: "general", defaultKey: "Mod+Shift+V", note: "Toggle speech-to-text in chat" },
+  { id: "compare-files", label: "Compare Files...", category: "general", defaultKey: "Mod+Alt+D", note: "Open file-compare picker (seeds active file as A)" },
   // Projects — Mod+1..9
   ...Array.from({ length: 9 }, (_, i) => ({
     id: `switch-project-${i + 1}`,

package/dist/web/assets/architecture-PBZL5I3N-DvZbltvY.js

@@ -1 +0,0 @@
-import{W as e}from"./vendor-mermaid-Dx86tuVP.js";export{e as createArchitectureServices};