vg-coder-cli 2.0.34 → 2.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "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": {
@@ -47,7 +47,6 @@
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.8.3",
     "tiktoken": "^1.0.10",
-    "vg-coder-cli": "^2.0.15",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },

package/src/server/api-server.js

@@ -136,6 +136,25 @@ class ApiServer {
         res.send(content);
     });
 
+    // Count tokens using TokenManager (tiktoken)
+    this.app.post('/api/count-tokens', async (req, res) => {
+      try {
+        const { text } = req.body;
+        
+        if (!text) {
+          return res.json({ tokens: 0 });
+        }
+        
+        const tokenManager = new TokenManager();
+        const tokens = tokenManager.countTokens(text);
+        
+        res.json({ tokens });
+      } catch (error) {
+        console.error('Token counting error:', error);
+        res.status(500).json({ error: error.message, tokens: 0 });
+      }
+    });
+
     // --- PROJECT MANAGEMENT APIS (FIXED) ---
     
     // List all projects
@@ -238,6 +257,117 @@ class ApiServer {
       }
     });
 
+    // Git Stage
+    this.app.post('/api/git/stage', async (req, res) => {
+      try {
+        const { files } = req.body;
+        const fileList = Array.isArray(files) ? files : [files];
+        
+        if (fileList.includes('*')) {
+          await execAsync('git add -A', { cwd: req.workingDir });
+        } else {
+          for (const file of fileList) {
+            await execAsync(`git add "${file}"`, { cwd: req.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 fileList = Array.isArray(files) ? files : [files];
+        
+        if (fileList.includes('*')) {
+          await execAsync('git reset HEAD', { cwd: req.workingDir });
+        } else {
+          for (const file of fileList) {
+            await execAsync(`git reset HEAD "${file}"`, { cwd: req.workingDir });
+          }
+        }
+        
+        res.json({ success: true });
+      } catch (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 || !message.trim()) {
+          return res.status(400).json({ error: 'Commit message is required' });
+        }
+        
+        await execAsync(`git commit -m "${message.replace(/"/g, '\\"')}"`, { cwd: req.workingDir });
+        res.json({ success: true });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+
+    // Git Discard
+    this.app.post('/api/git/discard', async (req, res) => {
+      try {
+        const { files } = req.body;
+        const fileList = Array.isArray(files) ? files : [files];
+        
+        if (fileList.includes('*')) {
+          // Discard all changes
+          await execAsync('git checkout -- .', { cwd: req.workingDir });
+          // Clean untracked files
+          await execAsync('git clean -fd', { cwd: req.workingDir });
+        } else {
+          for (const file of fileList) {
+            // Check if file is tracked
+            try {
+              await execAsync(`git ls-files --error-unmatch "${file}"`, { cwd: req.workingDir });
+              // Tracked file - checkout
+              await execAsync(`git checkout -- "${file}"`, { cwd: req.workingDir });
+            } catch (e) {
+              // Untracked file - remove
+              await execAsync(`rm "${file}"`, { cwd: req.workingDir });
+            }
+          }
+        }
+        
+        res.json({ success: true });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+
+    // Git Push
+    this.app.post('/api/git/push', async (req, res) => {
+      try {
+        const { remote = 'origin', branch } = req.body;
+        
+        // Get current branch if not specified
+        let currentBranch = branch;
+        if (!currentBranch) {
+          const { stdout } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: req.workingDir });
+          currentBranch = stdout.trim();
+        }
+        
+        // Push to remote
+        await execAsync(`git push ${remote} ${currentBranch}`, { 
+          cwd: req.workingDir,
+          timeout: 30000 // 30 seconds timeout
+        });
+        
+        res.json({ success: true, branch: currentBranch, remote });
+      } catch (error) {
+        res.status(500).json({ error: error.message });
+      }
+    });
+
     // Tree State API
     this.app.post('/api/tree-state/save', async (req, res) => {
         try {

package/src/server/views/css/commands-panel.css

@@ -0,0 +1,75 @@
+/* Commands Panel Styles */
+#commands-panel-content {
+    padding: 0;
+    background: #2B2D30;
+}
+
+[data-theme="light"] #commands-panel-content {
+    background: #FFFFFF;
+}
+
+.commands-panel-header {
+    padding: 12px;
+    border-bottom: 1px solid #1E1F22;
+    background: #2B2D30;
+    display: flex;
+    gap: 8px;
+}
+
+[data-theme="light"] .commands-panel-header {
+    background: #F7F7F7;
+    border-bottom: 1px solid #D1D1D1;
+}
+
+.commands-panel-btn {
+    flex: 1;
+    padding: 8px 12px;
+    background: #4E84E8;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: background 0.15s ease;
+}
+
+.commands-panel-btn:hover {
+    background: #3A6FBF;
+}
+
+[data-theme="light"] .commands-panel-btn {
+    background: #007AFF;
+}
+
+[data-theme="light"] .commands-panel-btn:hover {
+    background: #0051D5;
+}
+
+/* Commands Content Area */
+.saved-commands-content {
+    padding: 0;
+}
+
+.commands-list {
+    padding: 8px;
+}
+
+.commands-empty-state {
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.commands-empty-state p {
+    color: #868A8E;
+    font-size: 13px;
+    margin: 0;
+}
+
+[data-theme="light"] .commands-empty-state p {
+    color: #6E6E6E;
+}

package/src/server/views/css/editor.css

@@ -32,7 +32,6 @@
 
 /* Khu vực Actions bên phải */
 .tabs-actions {
-    display: flex;
     align-items: center;
     padding: 0 5px;
     background: #252526;
@@ -40,6 +39,7 @@
     border-left: 1px solid #1e1e1e;
     box-shadow: -5px 0 10px rgba(0,0,0,0.2); /* Tạo bóng đổ nhẹ ngăn cách */
     z-index: 5;
+   display: none;  /*  để trigger đóng view code change */
 }
 
 /* Style cho Tab Item */

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

@@ -0,0 +1,361 @@
+/* Git Panel Styles - IDE-Style */
+
+/* Override tool-panel-content for git-specific styling */
+#git-panel-content {
+    padding: 0;
+    background: #1E1F22;
+}
+
+[data-theme="light"] #git-panel-content {
+    background: #FFFFFF;
+}
+
+/* Commit Section */
+.git-panel-commit-section {
+    padding: 10px;
+    border-bottom: 1px solid #1E1F22;
+    background: #2B2D30;
+}
+
+[data-theme="light"] .git-panel-commit-section {
+    background: #F7F7F7;
+    border-bottom: 1px solid #D1D1D1;
+}
+
+.git-panel-commit-input {
+    width: 100%;
+    background: #1E1F22;
+    border: 1px solid #1E1F22;
+    color: #DFE1E5;
+    padding: 6px 8px;
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 12px;
+    resize: vertical;
+    min-height: 60px;
+    margin-bottom: 8px;
+}
+
+[data-theme="light"] .git-panel-commit-input {
+    background: #FFFFFF;
+    border: 1px solid #D1D1D1;
+    color: #000000;
+}
+
+.git-panel-commit-input:focus {
+    outline: 1px solid #4E84E8;
+    border-color: #4E84E8;
+}
+
+[data-theme="light"] .git-panel-commit-input:focus {
+    outline: 1px solid #007AFF;
+    border-color: #007AFF;
+}
+
+.git-panel-commit-btn {
+    width: 100%;
+    background: #4E84E8;
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    transition: background 0.15s ease;
+}
+
+.git-panel-commit-btn:hover {
+    background: #3A6FBF;
+}
+
+[data-theme="light"] .git-panel-commit-btn {
+    background: #007AFF;
+}
+
+[data-theme="light"] .git-panel-commit-btn:hover {
+    background: #0051D5;
+}
+
+.git-panel-commit-btn:disabled {
+    background: #30363d;
+    color: #8b949e;
+    cursor: not-allowed;
+}
+
+/* Section Headers */
+.git-panel-section-header {
+    padding: 8px 12px;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #868A8E;
+    background: #1E1F22;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: default;
+    border-bottom: 1px solid #1E1F22;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+[data-theme="light"] .git-panel-section-header {
+    background: #F2F2F2;
+    border-bottom: 1px solid #D1D1D1;
+}
+
+.git-panel-badge {
+    background: #30363d;
+    color: #c9d1d9;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 10px;
+    min-width: 18px;
+    text-align: center;
+}
+
+[data-theme="light"] .git-panel-badge {
+    background: #E8E8E8;
+    color: #000000;
+}
+
+/* Tree */
+.git-panel-tree {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.git-panel-tree-node {
+    list-style: none;
+}
+
+.git-panel-tree-content {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 12px;
+    min-height: 24px;
+    color: #DFE1E5;
+    white-space: nowrap;
+    transition: background 0.1s ease;
+}
+
+[data-theme="light"] .git-panel-tree-content {
+    color: #000000;
+}
+
+.git-panel-tree-content:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+[data-theme="light"] .git-panel-tree-content:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.git-panel-tree-content.selected {
+    background: rgba(78, 132, 232, 0.2);
+    color: #FFFFFF;
+}
+
+[data-theme="light"] .git-panel-tree-content.selected {
+    background: rgba(0, 122, 255, 0.15);
+    color: #000000;
+}
+
+.git-panel-arrow {
+    width: 14px;
+    text-align: center;
+    font-size: 10px;
+    color: #868A8E;
+    transition: transform 0.15s;
+    display: inline-block;
+    flex-shrink: 0;
+    margin-right: 2px;
+}
+
+.git-panel-tree-node.collapsed > .git-panel-tree-content > .git-panel-arrow {
+    transform: rotate(-90deg);
+}
+
+.git-panel-tree-node.collapsed > ul {
+    display: none;
+}
+
+.git-panel-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-panel-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+}
+
+.git-panel-dir-label {
+    color: #DFE1E5;
+}
+
+[data-theme="light"] .git-panel-dir-label {
+    color: #000000;
+}
+
+.git-panel-file-label {
+    color: #868A8E;
+}
+
+.git-panel-tree-content:hover .git-panel-file-label,
+.git-panel-tree-content.selected .git-panel-file-label {
+    color: #DFE1E5;
+}
+
+[data-theme="light"] .git-panel-tree-content:hover .git-panel-file-label,
+[data-theme="light"] .git-panel-tree-content.selected .git-panel-file-label {
+    color: #000000;
+}
+
+/* Actions */
+.git-panel-actions {
+    display: none;
+    margin-left: 6px;
+    flex-shrink: 0;
+    gap: 4px;
+}
+
+.git-panel-tree-content:hover .git-panel-actions {
+    display: flex;
+}
+
+.git-panel-btn-action {
+    background: transparent;
+    border: none;
+    color: #868A8E;
+    cursor: pointer;
+    padding: 0 4px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1;
+    transition: all 0.15s ease;
+}
+
+.git-panel-btn-action:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #DFE1E5;
+}
+
+[data-theme="light"] .git-panel-btn-action:hover {
+    background: rgba(0, 0, 0, 0.08);
+    color: #000000;
+}
+
+.git-panel-btn-action.destructive:hover {
+    background: #f85149;
+    color: #fff;
+}
+
+/* Section Actions */
+.git-panel-section-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.git-panel-section-action-btn {
+    background: transparent;
+    border: none;
+    color: #868A8E;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 2px 4px;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+}
+
+.git-panel-section-action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #DFE1E5;
+}
+
+[data-theme="light"] .git-panel-section-action-btn:hover {
+    background: rgba(0, 0, 0, 0.08);
+    color: #000000;
+}
+
+/* Empty State */
+.git-panel-empty {
+    padding: 20px;
+    text-align: center;
+    color: #868A8E;
+    font-size: 12px;
+}
+
+/* Loading */
+.git-panel-loading {
+    padding: 20px;
+    text-align: center;
+    color: #868A8E;
+    font-size: 12px;
+}
+.git-panel-commit-btn:disabled {
+    background: #30363d;
+    color: #8b949e;
+    cursor: not-allowed;
+}
+
+/* Push Button */
+.git-panel-push-btn {
+    background: transparent;
+    border: 1px solid #30363d;
+    color: #8b949e;
+    padding: 4px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 11px;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+
+.git-panel-push-btn:hover:not(:disabled) {
+    background: #238636;
+    border-color: #238636;
+    color: white;
+}
+
+.git-panel-push-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Section Headers */

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

@@ -29,22 +29,10 @@
     border-color: var(--ios-blue);
 }
 
-.git-refresh-btn {
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-    border: 1px solid var(--ios-separator);
-    background: var(--ios-card);
-    color: var(--text-primary);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
 .git-view-container {
     position: absolute;
-    top: 35px;
+    top: 0px;
     left: 0;
     right: 0;
     bottom: 0;
@@ -57,73 +45,9 @@
 
 .git-view-container.active {
     display: flex;
-}
 
-/* --- 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;
-}
 
-/* --- COMMIT SECTION --- */
-.git-commit-section {
-    padding: 10px;
-    border-bottom: 1px solid #30363d;
-    background: #0d1117;
-}
 
-.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;
-}
-
-.git-commit-input:focus {
-    outline: 1px solid #58a6ff;
-    border-color: #58a6ff;
-}
-
-.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;
-}
-
-.git-commit-btn:hover {
-    background: #026ec1;
-}
-
-.git-commit-btn:disabled {
-    background: #30363d;
-    color: #8b949e;
-    cursor: not-allowed;
-}
 
 /* --- SECTIONS & TREE --- */
 .git-section {