@hienlh/ppm 0.13.2 → 0.13.4

package/src/web/components/editor/compare-picker.tsx

@@ -0,0 +1,245 @@
+import { useState, useMemo, useEffect, useRef } from "react";
+import { Columns2, FileCode, X } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useTabStore } from "@/stores/tab-store";
+import { useFileStore } from "@/stores/file-store";
+import { useProjectStore } from "@/stores/project-store";
+import { useCompareStore, type CompareSelection } from "@/stores/compare-store";
+import { openCompareTab } from "@/lib/open-compare-tab";
+import { basename, cn } from "@/lib/utils";
+import { scoreFileSearch, compareScores } from "@/lib/score-file-search";
+
+interface Candidate {
+  id: string;
+  path: string;
+  label: string;
+  source: "tab" | "file";
+  dirtyContent?: string;
+}
+
+interface ComparePickerProps {
+  /** Controlled mode: parent manages open state. Omit both to use singleton/event mode. */
+  open?: boolean;
+  onOpenChange?: (o: boolean) => void;
+  /** If provided, dialog pre-seeds Side A. Ignored in singleton mode (reads from store on open). */
+  initialA?: CompareSelection | null;
+}
+
+const MAX_RESULTS = 50;
+
+/**
+ * File-compare picker.
+ *
+ * Two modes:
+ * - Controlled: pass `open`+`onOpenChange` (for tests / programmatic callers).
+ * - Singleton: mount once at app root with no props — listens for
+ *   `window` event `open-compare-picker` and seeds Side A from `useCompareStore`.
+ */
+export function ComparePicker({ open: openProp, onOpenChange, initialA }: ComparePickerProps = {}) {
+  const controlled = openProp !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlled ? openProp : internalOpen;
+  const setOpen = (o: boolean) => {
+    if (controlled) onOpenChange?.(o);
+    else setInternalOpen(o);
+  };
+
+  const [localA, setLocalA] = useState<CompareSelection | null>(initialA ?? null);
+
+  // Singleton mode: listen for global event, seed A from store
+  useEffect(() => {
+    if (controlled) return;
+    function onEvent() {
+      setLocalA(useCompareStore.getState().selection);
+      setInternalOpen(true);
+    }
+    window.addEventListener("open-compare-picker", onEvent);
+    return () => window.removeEventListener("open-compare-picker", onEvent);
+  }, [controlled]);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const tabs = useTabStore((s) => s.tabs);
+  const fileIndex = useFileStore((s) => s.fileIndex);
+  const activeProject = useProjectStore((s) => s.activeProject);
+
+  useEffect(() => {
+    if (!open) return;
+    // In controlled mode, sync A from prop. In singleton mode, event handler
+    // already populated localA — don't clobber it here.
+    if (controlled) setLocalA(initialA ?? null);
+    setQuery("");
+    setActiveIndex(0);
+    setError(null);
+    // Focus input after dialog mounts
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, [open, initialA, controlled]);
+
+  const candidates = useMemo<Candidate[]>(() => {
+    const tabCands: Candidate[] = tabs
+      .filter((t) => t.type === "editor" && t.metadata?.filePath)
+      .map((t) => ({
+        id: `tab:${t.id}`,
+        path: t.metadata!.filePath as string,
+        label: basename(t.metadata!.filePath as string),
+        source: "tab",
+        dirtyContent: t.metadata!.unsavedContent as string | undefined,
+      }));
+    const seenPaths = new Set(tabCands.map((c) => c.path));
+    const fileCands: Candidate[] = fileIndex
+      .filter((f) => f.type === "file" && !seenPaths.has(f.path))
+      .map((f) => ({
+        id: `file:${f.path}`,
+        path: f.path,
+        label: f.name,
+        source: "file",
+      }));
+    return [...tabCands, ...fileCands];
+  }, [tabs, fileIndex]);
+
+  const filtered = useMemo<Candidate[]>(() => {
+    if (!query.trim()) return candidates.slice(0, MAX_RESULTS);
+    const scored = candidates
+      .map((c) => {
+        const score = scoreFileSearch(query, c.label, c.path);
+        return score ? { c, score } : null;
+      })
+      .filter((x): x is { c: Candidate; score: ReturnType<typeof scoreFileSearch> & {} } => x !== null)
+      .sort((a, b) => compareScores(a.score, b.score))
+      .slice(0, MAX_RESULTS)
+      .map((x) => x.c);
+    return scored;
+  }, [candidates, query]);
+
+  useEffect(() => {
+    if (activeIndex >= filtered.length) setActiveIndex(Math.max(0, filtered.length - 1));
+  }, [filtered, activeIndex]);
+
+  // Guards against rapid double-invoke (Enter spam, double-click) while the
+  // openCompareTab promise is in flight — ref so a second sync call sees it.
+  const pickingRef = useRef(false);
+
+  async function handlePick(c: Candidate) {
+    if (!activeProject) return;
+    if (!localA) {
+      setLocalA({
+        filePath: c.path,
+        projectName: activeProject.name,
+        dirtyContent: c.dirtyContent,
+        label: c.label,
+      });
+      setQuery("");
+      setActiveIndex(0);
+      inputRef.current?.focus();
+      return;
+    }
+    if (pickingRef.current) return;
+    pickingRef.current = true;
+    try {
+      await openCompareTab(
+        { path: localA.filePath, dirtyContent: localA.dirtyContent },
+        { path: c.path, dirtyContent: c.dirtyContent },
+        activeProject.name,
+      );
+      useCompareStore.getState().clearSelection();
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Compare failed");
+    } finally {
+      pickingRef.current = false;
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const pick = filtered[activeIndex];
+      if (pick) handlePick(pick);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-lg p-0 gap-0 overflow-hidden">
+        <DialogHeader className="px-4 pt-4 pb-2">
+          <DialogTitle className="flex items-center gap-2 text-sm">
+            <Columns2 className="size-4" />
+            Compare Files
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Side A chip */}
+        <div className="px-4 pb-2">
+          {localA ? (
+            <div className="flex items-center gap-2 text-xs bg-muted rounded px-2 py-1 w-fit max-w-full">
+              <FileCode className="size-3.5 shrink-0" />
+              <span className="truncate" title={localA.filePath}>{localA.label}</span>
+              <button
+                type="button"
+                onClick={() => setLocalA(null)}
+                className="hover:bg-surface-elevated rounded p-0.5"
+                aria-label="Clear first file"
+              >
+                <X className="size-3" />
+              </button>
+            </div>
+          ) : (
+            <p className="text-xs text-muted-foreground">Pick first file, then second.</p>
+          )}
+        </div>
+
+        {/* Search input */}
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setActiveIndex(0); }}
+          onKeyDown={handleKeyDown}
+          placeholder={localA ? "Search for file B..." : "Search for file A..."}
+          className="w-full px-4 py-2 bg-transparent border-y border-border text-sm outline-none"
+        />
+
+        {error && (
+          <div className="px-4 py-2 text-xs text-destructive border-b border-border">{error}</div>
+        )}
+
+        {/* Results list */}
+        <div className="max-h-[50vh] md:max-h-80 overflow-y-auto">
+          {filtered.length === 0 ? (
+            <div className="px-4 py-6 text-center text-xs text-muted-foreground">
+              {candidates.length === 0 ? "No files available" : "No matches"}
+            </div>
+          ) : (
+            filtered.map((c, i) => (
+              <button
+                key={c.id}
+                type="button"
+                onClick={() => handlePick(c)}
+                onMouseEnter={() => setActiveIndex(i)}
+                className={cn(
+                  "w-full flex items-center gap-2 px-4 py-1.5 text-left text-sm",
+                  "hover:bg-surface-elevated transition-colors",
+                  i === activeIndex && "bg-surface-elevated",
+                )}
+              >
+                <FileCode className="size-3.5 shrink-0 text-text-secondary" />
+                <span className="truncate">{c.label}</span>
+                <span className="text-xs text-muted-foreground truncate ml-auto" title={c.path}>
+                  {c.source === "tab" ? "open" : c.path}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { useState, useEffect, useRef, useMemo, useCallback, useDeferredValue } from "react";
 import {
   Terminal,
   MessageSquare,
@@ -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,9 +24,13 @@ 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 { scoreFileSearch, compareScores, type FileSearchScore } from "@/lib/score-file-search";
+import { scoreFileSearchFast, compareScores, getFilename, type FileSearchScore } from "@/lib/score-file-search";
+
+/** Max results to display — prevents rendering thousands of matches */
+const MAX_RESULTS = 100;
 
 interface CommandItem {
   id: string;
@@ -37,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);
@@ -108,6 +115,7 @@ const fsCache = new Map<string, string[]>();
 
 export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boolean; onClose: () => void; initialQuery?: string }) {
   const [query, setQuery] = useState("");
+  const deferredQuery = useDeferredValue(query);
   const [selectedIdx, setSelectedIdx] = useState(0);
   const [fsFiles, setFsFiles] = useState<string[]>([]);
   const [fsLoading, setFsLoading] = useState(false);
@@ -185,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: () => {
@@ -240,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",
@@ -305,11 +338,29 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     [actionCommands, fileCommands],
   );
 
+  /**
+   * Precomputed lowercase search index — avoids re-allocating thousands of
+   * lowercased strings per keystroke. Recomputed only when allCommands changes.
+   */
+  const searchIndex = useMemo(() => {
+    return allCommands.map((cmd) => {
+      const path = cmd.keywords ?? cmd.label;
+      const pathLower = path.toLowerCase();
+      return {
+        cmd,
+        filenameLower: getFilename(pathLower),
+        pathLower,
+        labelLen: cmd.label.length,
+        depth: path.split("/").length,
+      };
+    });
+  }, [allCommands]);
+
   const filtered = useMemo(() => {
     // Path mode — search filesystem results using filename portion only
-    if (isPathQuery(query)) {
-      const lastSlash = query.lastIndexOf("/");
-      const fileFilter = lastSlash >= 0 ? query.slice(lastSlash + 1).toLowerCase() : "";
+    if (isPathQuery(deferredQuery)) {
+      const lastSlash = deferredQuery.lastIndexOf("/");
+      const fileFilter = lastSlash >= 0 ? deferredQuery.slice(lastSlash + 1).toLowerCase() : "";
       if (!fileFilter) return fsCommands.slice(0, 50);
       return fsCommands.filter((c) => {
         const name = c.label.toLowerCase();
@@ -319,17 +370,18 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     }
 
     // Normal mode
-    if (!query.trim()) return actionCommands;
+    if (!deferredQuery.trim()) return actionCommands;
+    const qLower = deferredQuery.toLowerCase();
     const scored: Array<{ cmd: CommandItem; score: FileSearchScore }> = [];
-    for (const c of allCommands) {
-      const s = scoreFileSearch(query, c.label, c.keywords ?? c.label);
-      if (s) scored.push({ cmd: c, score: s });
+    for (const entry of searchIndex) {
+      const s = scoreFileSearchFast(qLower, entry.filenameLower, entry.pathLower, entry.labelLen, entry.depth);
+      if (s) scored.push({ cmd: entry.cmd, score: s });
     }
     scored.sort((a, b) => compareScores(a.score, b.score));
-    const matched = scored.map((s) => s.cmd);
+    const matched = scored.slice(0, MAX_RESULTS).map((s) => s.cmd);
     // Prepend DB results (already filtered server-side) when query is 2+ chars
-    return query.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
-  }, [allCommands, actionCommands, fsCommands, dbCommands, query]);
+    return deferredQuery.trim().length >= 2 ? [...dbCommands, ...matched] : matched;
+  }, [searchIndex, actionCommands, fsCommands, dbCommands, deferredQuery]);
 
   // Reset state when opening
   useEffect(() => {
@@ -477,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

@@ -101,14 +101,14 @@ export function DraggableTab({
       )}
     >
       <span
-        // No-tag: force neutral gray (overrides parent text-primary for active tabs) so untagged
-        // tabs don't look like they have a blue tag. Active state is still signaled via border + title color.
-        className={cn("relative", !tagColor && "text-text-secondary")}
-        style={tagColor ? { color: tagColor } : undefined}
+        // Streaming: force amber (matches favicon streaming bg) so typing state is unmistakable
+        // regardless of tab active state. Otherwise inherits parent button's color (primary/text-secondary).
+        // Tag identity is now shown as a separate left-edge bar (see wrapper div below), not icon color.
+        className={cn("relative", isStreaming && "text-amber-500")}
       >
         <Icon className="size-4" />
         {isStreaming ? (
-          // Messenger-style typing dots inside chat bubble — inherits current icon color
+          // Messenger-style typing dots inside chat bubble — inherits current icon color (amber while streaming)
           <span aria-hidden className="absolute inset-0 flex items-center justify-center gap-[1.5px]">
             <span className="tab-typing-dot size-[2px] rounded-full bg-current" />
             <span className="tab-typing-dot size-[2px] rounded-full bg-current" style={{ animationDelay: "0.15s" }} />
@@ -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}
+              }
             />
             );
           })}