vg-coder-cli 2.0.14 → 2.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "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/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;