vg-coder-cli 2.0.16 → 2.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.16",
+  "version": "2.0.19",
   "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
   "main": "src/index.js",
   "bin": {

package/src/server/api-server.js

@@ -51,11 +51,8 @@ class ApiServer {
 
   setupSocketIO() {
     this.io.on('connection', (socket) => {
-        // Nhận event init với termId
         socket.on('terminal:init', (data) => {
-            if (!data || !data.termId) {
-                return;
-            }
+            if (!data || !data.termId) return;
             const { termId, cols, rows } = data;
             terminalManager.createTerminal(socket, termId, cols, rows, this.workingDir);
         });
@@ -97,62 +94,159 @@ class ApiServer {
       }
     });
 
-    this.app.get('/api/git/diff', async (req, res) => {
-      try {
-        // 1. Lấy diff của các file đã track (modified, deleted, staged)
-        const { stdout: diffStdout } = await execAsync('git diff HEAD', { 
-            cwd: this.workingDir,
-            maxBuffer: 20 * 1024 * 1024 
-        });
+    // --- GIT API START ---
 
-        // 2. Lấy danh sách untracked files (files mới tạo chưa add)
-        const { stdout: untrackedStdout } = await execAsync('git ls-files --others --exclude-standard', {
-            cwd: this.workingDir,
-            maxBuffer: 20 * 1024 * 1024
-        });
+    // Get Git Status
+    this.app.get('/api/git/status', async (req, res) => {
+        try {
+            // FIX: Added -u flag to show individual files in untracked directories
+            const { stdout } = await execAsync('git status --porcelain -u', { cwd: this.workingDir });
+            
+            const staged = [];
+            const unstaged = [];
+            const untracked = [];
+
+            const lines = stdout.split('\n').filter(l => l.trim());
+            
+            lines.forEach(line => {
+                const x = line[0];
+                const y = line[1];
+                const path = line.substring(3);
+
+                if (x !== ' ' && x !== '?') {
+                    staged.push({ path, status: x });
+                }
 
-        let combinedDiff = diffStdout || '';
-        const untrackedFiles = untrackedStdout.split('\n').filter(f => f.trim());
-
-        // 3. Tạo diff giả lập cho untracked files để hiển thị trên UI
-        if (untrackedFiles.length > 0) {
-            if (combinedDiff && !combinedDiff.endsWith('\n')) combinedDiff += '\n';
-
-            for (const file of untrackedFiles) {
-                try {
-                    const filePath = path.join(this.workingDir, file);
-                    const stat = await fs.stat(filePath);
-                    if (stat.isDirectory()) continue;
-
-                    const content = await fs.readFile(filePath, 'utf8');
-                    
-                    // Tạo header giống git diff
-                    combinedDiff += `diff --git a/${file} b/${file}\n`;
-                    combinedDiff += `new file mode 100644\n`;
-                    combinedDiff += `--- /dev/null\n`;
-                    combinedDiff += `+++ b/${file}\n`;
-                    
-                    if (content.length > 0) {
-                        const lines = content.split('\n');
-                        combinedDiff += `@@ -0,0 +1,${lines.length} @@\n`;
-                        lines.forEach(line => {
-                            combinedDiff += `+${line}\n`;
-                        });
+                if (y !== ' ') {
+                    if (x === '?' && y === '?') {
+                        untracked.push({ path, status: 'U' });
+                    } else {
+                        unstaged.push({ path, status: y });
                     }
-                    combinedDiff += `\n`;
-                } catch (err) {
-                    // Bỏ qua nếu lỗi đọc file (vd: binary)
                 }
+            });
+
+            const changes = [...unstaged, ...untracked];
+            res.json({ staged, changes });
+        } catch (error) {
+            console.error(chalk.red('❌ [GIT STATUS] Error:'), error.message);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Git Stage
+    this.app.post('/api/git/stage', async (req, res) => {
+        try {
+            const { files } = req.body;
+            const target = files.includes('*') ? '.' : files.map(f => `"${f}"`).join(' ');
+            await execAsync(`git add ${target}`, { cwd: this.workingDir });
+            res.json({ success: true });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Git Unstage
+    this.app.post('/api/git/unstage', async (req, res) => {
+        try {
+            const { files } = req.body;
+            const target = files.includes('*') ? '' : files.map(f => `"${f}"`).join(' ');
+            await execAsync(`git reset HEAD ${target}`, { cwd: this.workingDir });
+            res.json({ success: true });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Git Discard (NEW)
+    this.app.post('/api/git/discard', async (req, res) => {
+        try {
+            const { files } = req.body; // array or '*'
+            
+            // Discard All
+            if (files.includes('*')) {
+                // Restore tracked files
+                try { await execAsync('git restore .', { cwd: this.workingDir }); } catch (e) {}
+                // Clean untracked files
+                try { await execAsync('git clean -fd', { cwd: this.workingDir }); } catch (e) {}
+            } else {
+                // Discard specific files
+                for (const file of files) {
+                    // Try restore (for tracked modified/deleted)
+                    try { await execAsync(`git restore "${file}"`, { cwd: this.workingDir }); } catch (e) {}
+                    // Try clean (for untracked)
+                    try { await execAsync(`git clean -f "${file}"`, { cwd: this.workingDir }); } catch (e) {}
+                }
+            }
+            res.json({ success: true });
+        } catch (error) {
+            console.error('Discard error:', error);
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Git Commit
+    this.app.post('/api/git/commit', async (req, res) => {
+        try {
+            const { message } = req.body;
+            if (!message) throw new Error('Commit message is required');
+            const safeMessage = message.replace(/"/g, '\\"');
+            await execAsync(`git commit -m "${safeMessage}"`, { cwd: this.workingDir });
+            res.json({ success: true });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Get Diff
+    this.app.get('/api/git/diff', async (req, res) => {
+      try {
+        const file = req.query.file;
+        const type = req.query.type || 'working';
+
+        let cmd = '';
+        
+        if (type === 'staged') {
+            cmd = file ? `git diff --cached -- "${file}"` : `git diff --cached`;
+        } else {
+            if (file) {
+                 // Check if directory to avoid EISDIR (Safety Check)
+                 try {
+                     const filePath = path.join(this.workingDir, file);
+                     if (await fs.pathExists(filePath)) {
+                         const stat = await fs.stat(filePath);
+                         if (stat.isDirectory()) {
+                             return res.json({ diff: '' });
+                         }
+                     }
+                 } catch (e) {
+                     // Ignore stat errors
+                 }
+
+                 // Check untracked
+                 const { stdout: isUntracked } = await execAsync(`git ls-files --others --exclude-standard "${file}"`, { cwd: this.workingDir });
+                 if (isUntracked.trim()) {
+                     const content = await fs.readFile(path.join(this.workingDir, file), 'utf8');
+                     let fakeDiff = `diff --git a/${file} b/${file}\nnew file mode 100644\n--- /dev/null\n+++ b/${file}\n@@ -0,0 +1,${content.split('\n').length} @@\n`;
+                     content.split('\n').forEach(l => fakeDiff += `+${l}\n`);
+                     return res.json({ diff: fakeDiff });
+                 }
+                 cmd = `git diff -- "${file}"`;
+            } else {
+                 cmd = `git diff`;
             }
         }
 
-        res.json({ diff: combinedDiff });
+        const { stdout } = await execAsync(cmd, { cwd: this.workingDir, maxBuffer: 20 * 1024 * 1024 });
+        res.json({ diff: stdout });
       } catch (error) {
-        console.error(chalk.red('❌ [GIT] Error:'), error.message);
+        console.error(chalk.red('❌ [GIT DIFF] Error:'), error.message);
         res.json({ diff: '', error: error.message });
       }
     });
 
+    // --- GIT API END ---
+
     this.app.post('/api/analyze', async (req, res) => {
         const { path: projectPath, options = {}, specificFiles } = req.body;
         if (!projectPath) return res.status(400).json({ error: 'Missing path' });

package/src/server/views/css/git-view.css

@@ -1,4 +1,4 @@
-/* --- LAYOUT HEADER --- */
+/* --- CONTAINER & LAYOUT --- */
 .git-toggle-group {
     display: flex;
     align-items: center;
@@ -42,24 +42,6 @@
     justify-content: center;
 }
 
-/* --- CONTAINER CHÍNH --- */
-.right-panel {
-    position: relative;
-    /* Quan trọng */
-}
-
-.d2h-file-list {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 99;
-    background-color: #0d1117;
-    overflow: scroll;
-    height: calc(100vh - 46px);
-    width: 446px;
-    top: 46px;
-}
-
 .git-view-container {
     position: absolute;
     top: 50px;
@@ -67,89 +49,275 @@
     right: 0;
     bottom: 0;
     z-index: 9999;
-    /* Z-index cao nhất */
     background: #0d1117;
-    /* Nền đen GitHub */
     display: none;
-    flex-direction: column;
-    overflow: scroll;
+    flex-direction: row;
+    overflow: hidden;
 }
 
 .git-view-container.active {
     display: flex;
 }
 
-/* --- DEBUG / SAFETY NET CSS --- */
-/* Ép toàn bộ text trong vùng code phải có màu sáng */
-.d2h-wrapper * {
-    box-sizing: border-box;
+/* --- SIDEBAR --- */
+.git-sidebar {
+    width: 300px;
+    min-width: 250px;
+    background: #0d1117;
+    border-right: 1px solid #30363d;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    color: #c9d1d9;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    user-select: none;
 }
 
-/* Force text color */
-.d2h-code-line-ctn,
-.d2h-code-line,
-.hljs {
-    color: #e6edf3 !important;
-    /* Trắng xám */
-    background: transparent !important;
+/* --- COMMIT SECTION --- */
+.git-commit-section {
+    padding: 10px;
+    border-bottom: 1px solid #30363d;
+    background: #0d1117;
 }
 
-/* Force line number color */
-.d2h-code-side-linenumber {
-    color: #6e7681 !important;
-    background: #0d1117 !important;
-    border-color: #30363d !important;
+.git-commit-input {
+    width: 100%;
+    background: #161b22;
+    border: 1px solid #30363d;
+    color: #c9d1d9;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 13px;
+    resize: vertical;
+    min-height: 32px;
+    margin-bottom: 8px;
 }
 
-/* Fix background diff */
-.d2h-ins {
-    background-color: rgba(46, 160, 67, 0.15) !important;
+.git-commit-input:focus {
+    outline: 1px solid #58a6ff;
+    border-color: #58a6ff;
 }
 
-.d2h-del {
-    background-color: rgba(248, 81, 73, 0.15) !important;
+.git-commit-btn {
+    width: 100%;
+    background: #0078d4;
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
 }
 
-/* Layout */
-.d2h-files-wrapper {
-    flex: 1;
-    overflow: auto;
-    background: #0d1117;
+.git-commit-btn:hover {
+    background: #026ec1;
 }
 
-.d2h-file-list-wrapper {
-    width: 250px;
-    flex-shrink: 0;
-    background: #0d1117;
-    border-right: 1px solid #30363d;
-    display: flex;
-    flex-direction: column;
+.git-commit-btn:disabled {
+    background: #30363d;
+    color: #8b949e;
+    cursor: not-allowed;
 }
 
-.d2h-file-list-header,
-.d2h-file-header {
-    background: #161b22 !important;
-    border-bottom: 1px solid #30363d !important;
-    color: #e6edf3 !important;
+/* --- SECTIONS & TREE --- */
+.git-section {
+    margin-bottom: 0;
+}
+
+.git-section-header {
+    padding: 8px 16px;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #8b949e;
+    background: #161b22;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
     position: sticky;
     top: 0;
     z-index: 10;
+    border-bottom: 1px solid #21262d;
+}
+
+.git-section-header:hover {
+    color: #c9d1d9;
+}
+
+.git-badge {
+    background: #30363d;
+    color: #c9d1d9;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 10px;
+    min-width: 18px;
+    text-align: center;
+}
+
+.git-tree-root {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
-.d2h-file-list a {
-    color: #8b949e !important;
-    text-decoration: none;
-    display: block;
-    padding: 5px 10px;
+.git-tree-node {
+    list-style: none;
 }
 
-.d2h-file-list a:hover {
-    color: #58a6ff !important;
+.git-tree-content {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 13px;
+    height: 24px;
+    color: #c9d1d9;
+    white-space: nowrap;
+}
+
+.git-tree-content:hover {
     background: #161b22;
 }
 
-/* Ẩn rác */
-.d2h-file-switch,
-.d2h-tag {
-    display: none !important;
-}
+.git-tree-content.selected {
+    background: #30363d;
+    color: #fff;
+}
+
+.git-indent-guide {
+    display: inline-block;
+    width: 16px; 
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.git-arrow {
+    width: 16px;
+    text-align: center;
+    font-size: 10px;
+    color: #8b949e;
+    transition: transform 0.15s;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.git-tree-node.collapsed > .git-tree-content > .git-arrow {
+    transform: rotate(-90deg);
+}
+
+.git-tree-node.collapsed > ul {
+    display: none;
+}
+
+.git-icon {
+    margin-right: 6px;
+    font-weight: bold;
+    width: 16px;
+    text-align: center;
+    flex-shrink: 0;
+    font-size: 14px;
+}
+
+/* Status Colors */
+.git-status-M { color: #d29922; }
+.git-status-A, .git-status-U { color: #3fb950; }
+.git-status-D { color: #f85149; text-decoration: line-through; }
+.git-status-R { color: #d29922; }
+
+.git-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.git-dir-label {
+    color: #c9d1d9;
+}
+
+.git-file-label {
+    color: #8b949e;
+}
+.git-tree-content:hover .git-file-label,
+.git-tree-content.selected .git-file-label {
+    color: #e6edf3;
+}
+
+/* ACTIONS */
+.git-actions {
+    display: none;
+    margin-left: 6px;
+    flex-shrink: 0;
+}
+
+.git-tree-content:hover .git-actions {
+    display: flex;
+    gap: 4px;
+}
+
+.git-btn-action {
+    background: transparent;
+    border: none;
+    color: #c9d1d9;
+    cursor: pointer;
+    padding: 0 4px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1;
+}
+
+.git-btn-action:hover {
+    background: #30363d;
+    color: #fff;
+}
+
+/* Destructive Action (Discard) */
+.git-btn-action.destructive:hover {
+    background: #f85149;
+    color: #fff;
+}
+
+/* --- DIFF AREA --- */
+.git-diff-area {
+    flex: 1;
+    overflow: auto;
+    background: #0d1117;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.git-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #8b949e;
+}
+
+/* Diff2Html Overrides */
+.d2h-wrapper * { box-sizing: border-box; }
+.d2h-file-list-wrapper { display: none; }
+.d2h-wrapper { margin: 0; }
+.d2h-file-header { display: none; }
+.d2h-code-line-ctn, .d2h-code-line, .hljs {
+    color: #e6edf3 !important;
+    background: transparent !important;
+    font-family: Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+}
+.d2h-code-side-linenumber {
+    background: #0d1117 !important;
+    border-color: #30363d !important;
+    color: #6e7681 !important;
+}
+.d2h-ins { background-color: rgba(46, 160, 67, 0.15) !important; }
+.d2h-del { background-color: rgba(248, 81, 73, 0.15) !important; }