vg-coder-cli 2.0.14 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "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": {
@@ -31,26 +31,27 @@
     "url": "https://github.com/tinhthanh/vg-coder-cli.git"
   },
   "dependencies": {
+    "body-parser": "^1.20.2",
+    "chalk": "^4.1.2",
     "commander": "^11.1.0",
+    "cors": "^2.8.5",
     "directory-tree": "^3.5.1",
-    "tiktoken": "^1.0.10",
+    "express": "^4.18.2",
+    "fs-extra": "^11.2.0",
     "highlight.js": "^11.9.0",
     "ignore": "^5.3.0",
-    "fs-extra": "^11.2.0",
-    "path": "^0.12.7",
-    "chalk": "^4.1.2",
-    "ora": "^5.4.1",
-    "express": "^4.18.2",
-    "cors": "^2.8.5",
-    "body-parser": "^1.20.2",
     "node-pty": "^1.0.0",
-    "socket.io": "^4.7.2"
+    "ora": "^5.4.1",
+    "path": "^0.12.7",
+    "socket.io": "^4.7.2",
+    "tiktoken": "^1.0.10",
+    "vg-coder-cli": "^2.0.15"
   },
   "devDependencies": {
-    "jest": "^29.7.0",
-    "nodemon": "^3.0.2",
     "@types/jest": "^29.5.8",
-    "adm-zip": "^0.5.10"
+    "adm-zip": "^0.5.10",
+    "jest": "^29.7.0",
+    "nodemon": "^3.0.2"
   },
   "engines": {
     "node": ">=16.0.0"

package/src/server/api-server.js

@@ -52,10 +52,8 @@ class ApiServer {
   setupSocketIO() {
     this.io.on('connection', (socket) => {
         // Nhận event init với termId
-        // FIX: Thêm default value = {} để tránh crash khi data undefined
         socket.on('terminal:init', (data) => {
             if (!data || !data.termId) {
-                // console.warn('[Socket] Ignored invalid terminal:init', data);
                 return;
             }
             const { termId, cols, rows } = data;
@@ -101,11 +99,54 @@ class ApiServer {
 
     this.app.get('/api/git/diff', async (req, res) => {
       try {
-        const { stdout, stderr } = await execAsync('git diff HEAD', { 
+        // 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 
         });
-        res.json({ diff: stdout });
+
+        // 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
+        });
+
+        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`;
+                        });
+                    }
+                    combinedDiff += `\n`;
+                } catch (err) {
+                    // Bỏ qua nếu lỗi đọc file (vd: binary)
+                }
+            }
+        }
+
+        res.json({ diff: combinedDiff });
       } catch (error) {
         console.error(chalk.red('❌ [GIT] Error:'), error.message);
         res.json({ diff: '', error: error.message });

package/src/server/views/css/terminal.css

@@ -23,6 +23,20 @@
     resize: both; /* Cho phép resize cửa sổ */
     min-width: 300px;
     min-height: 200px;
+    transition: height 0.2s ease, width 0.2s ease;
+}
+
+/* --- TRẠNG THÁI MINIMIZED --- */
+.floating-terminal.minimized {
+    height: 36px !important; /* Chỉ hiện header */
+    min-height: 36px !important;
+    width: 200px !important; /* Thu nhỏ chiều ngang */
+    resize: none; /* Không cho resize khi đang minimize */
+    overflow: hidden;
+}
+
+.floating-terminal.minimized .terminal-body {
+    display: none;
 }
 
 /* Header dùng để drag */
@@ -35,6 +49,7 @@
     cursor: grab;
     border-bottom: 1px solid #333;
     user-select: none;
+    height: 36px;
 }
 
 .terminal-header:active {
@@ -49,6 +64,9 @@
     font-family: monospace;
     font-size: 12px;
     font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .terminal-controls {
@@ -62,6 +80,16 @@
     border-radius: 50%;
     border: none;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 8px;
+    color: rgba(0,0,0,0.5);
+}
+
+.term-btn:hover {
+    color: rgba(0,0,0,0.8);
 }
 
 .term-btn.close {
@@ -74,6 +102,9 @@
 .term-btn.minimize {
     background: #FFBD2E;
 }
+.term-btn.minimize:hover {
+    background: #ffad08;
+}
 
 .term-btn.maximize {
     background: #27C93F;

package/src/server/views/js/features/git-view.js

@@ -31,9 +31,8 @@ async function toggleGitMode() {
         const rect = gitContainer.getBoundingClientRect();
         console.log('[GitView] Container Size:', rect.width, 'x', rect.height);
 
-        if (!gitContainer.innerHTML.trim()) {
-            await loadGitChanges();
-        }
+        // FIX: Always load changes when opening, removing the empty check
+        await loadGitChanges();
     } else {
         gitContainer.classList.remove('active');
         toggleBtn.classList.remove('active');
@@ -53,6 +52,7 @@ async function loadGitChanges() {
         refreshBtn.disabled = true;
     }
     
+    // Only show loading if we are replacing content or it's empty
     gitContainer.innerHTML = '<div class="git-loading-msg">Loading git changes... (Check Console if stuck)</div>';
 
     try {

package/src/server/views/js/features/terminal.js

@@ -1,7 +1,7 @@
 // Terminal Logic: Multi-instance & Floating
 
 let socket;
-const activeTerminals = new Map(); // Map<termId, { term, fitAddon, element }>
+const activeTerminals = new Map(); // Map<termId, { term, fitAddon, element, prevSize }>
 
 // Z-Index Management
 let maxZIndex = 10001;
@@ -39,21 +39,23 @@ export function createNewTerminal() {
     const wrapper = document.createElement('div');
     wrapper.className = 'floating-terminal';
     wrapper.id = `wrapper-${termId}`;
-    wrapper.style.top = '100px';
-    wrapper.style.left = '100px';
+    
     // Offset vị trí một chút nếu mở nhiều cái
-    const offset = activeTerminals.size * 30;
+    const offset = (activeTerminals.size % 10) * 30;
     wrapper.style.top = `${100 + offset}px`;
     wrapper.style.left = `${400 + offset}px`;
     wrapper.style.zIndex = ++maxZIndex;
 
+    // HTML Template - Đã thêm sự kiện onclick cho nút Minimize
     wrapper.innerHTML = `
-        <div class="terminal-header" id="header-${termId}">
+        <div class="terminal-header" id="header-${termId}" ondblclick="window.toggleMinimize('${termId}')">
             <div class="terminal-title-group">
                 <span>>_</span> Terminal (${activeTerminals.size + 1})
             </div>
             <div class="terminal-controls">
-                <button class="term-btn close" onclick="window.closeTerminal('${termId}')" title="Close"></button>
+                <button class="term-btn minimize" onclick="window.toggleMinimize('${termId}')" title="Minimize/Restore">-</button>
+                <button class="term-btn maximize" onclick="window.toggleMaximize('${termId}')" title="Maximize">+</button>
+                <button class="term-btn close" onclick="window.closeTerminal('${termId}')" title="Close">x</button>
             </div>
         </div>
         <div class="terminal-body" id="body-${termId}"></div>
@@ -92,14 +94,17 @@ export function createNewTerminal() {
 
     // Resize Observer to refit terminal when window is resized
     const resizeObserver = new ResizeObserver(() => {
-        try {
-            fitAddon.fit();
-            socket.emit('terminal:resize', { 
-                termId, 
-                cols: term.cols, 
-                rows: term.rows 
-            });
-        } catch (e) {}
+        // Chỉ fit lại nếu không bị minimized
+        if (!wrapper.classList.contains('minimized')) {
+            try {
+                fitAddon.fit();
+                socket.emit('terminal:resize', { 
+                    termId, 
+                    cols: term.cols, 
+                    rows: term.rows 
+                });
+            } catch (e) {}
+        }
     });
     resizeObserver.observe(document.getElementById(`body-${termId}`));
 
@@ -132,6 +137,74 @@ export function closeTerminalUI(termId) {
     }
 }
 
+/**
+ * Toggle Minimize/Restore
+ */
+export function toggleMinimize(termId) {
+    const session = activeTerminals.get(termId);
+    if (!session) return;
+    
+    const el = session.element;
+    const isMinimized = el.classList.contains('minimized');
+
+    if (isMinimized) {
+        // Restore
+        el.classList.remove('minimized');
+        
+        // Restore size logic if needed, but CSS transition handles visualization
+        // Need to refit xterm after transition
+        setTimeout(() => {
+            try { session.fitAddon.fit(); } catch(e){}
+        }, 250);
+    } else {
+        // Minimize
+        // Store current width/height if we want to restore exact pixel values later
+        // (CSS handles the visual hiding)
+        el.classList.add('minimized');
+    }
+}
+
+/**
+ * Toggle Maximize (Simple Fullscreen simulation)
+ */
+export function toggleMaximize(termId) {
+    const session = activeTerminals.get(termId);
+    if (!session) return;
+    
+    const el = session.element;
+    const isMaximized = el.classList.contains('maximized');
+
+    if (isMaximized) {
+        // Restore normal size
+        el.classList.remove('maximized');
+        el.style.width = session.prevSize?.width || '600px';
+        el.style.height = session.prevSize?.height || '400px';
+        el.style.top = session.prevSize?.top || '100px';
+        el.style.left = session.prevSize?.left || '400px';
+    } else {
+        // Save current state
+        session.prevSize = {
+            width: el.style.width,
+            height: el.style.height,
+            top: el.style.top,
+            left: el.style.left
+        };
+        
+        // Go full "floating" screen
+        el.classList.add('maximized');
+        el.style.width = '90vw';
+        el.style.height = '80vh';
+        el.style.top = '10vh';
+        el.style.left = '5vw';
+        el.classList.remove('minimized'); // Ensure not minimized
+    }
+    
+    setTimeout(() => {
+        try { session.fitAddon.fit(); } catch(e){}
+    }, 250);
+}
+
+
 /**
  * Logic Drag & Drop
  */
@@ -141,6 +214,9 @@ function makeDraggable(element, handle) {
     handle.onmousedown = dragMouseDown;
 
     function dragMouseDown(e) {
+        // Don't drag if clicking buttons
+        if(e.target.tagName === 'BUTTON') return;
+
         e.preventDefault();
         // Get mouse cursor position at startup
         pos3 = e.clientX;
@@ -172,3 +248,5 @@ function makeDraggable(element, handle) {
 // Global Exports for HTML onclick
 window.createNewTerminal = createNewTerminal;
 window.closeTerminal = closeTerminalUI;
+window.toggleMinimize = toggleMinimize;
+window.toggleMaximize = toggleMaximize;