vg-coder-cli 2.0.19 → 2.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "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": {
@@ -44,6 +44,7 @@
     "ora": "^5.4.1",
     "path": "^0.12.7",
     "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
     "tiktoken": "^1.0.10",
     "vg-coder-cli": "^2.0.15"
   },
@@ -56,4 +57,4 @@
   "engines": {
     "node": ">=16.0.0"
   }
-}
+}

package/src/index.js

@@ -372,13 +372,13 @@ class VGCoderCLI {
    */
   async handleStart(options) {
     try {
-      const port = parseInt(options.port);
-      const server = new ApiServer(port);
+      const initialPort = parseInt(options.port);
+      const server = new ApiServer(initialPort);
       
       await server.start();
       
-      // Auto-open browser to dashboard
-      const dashboardUrl = `http://localhost:${port}`;
+      // Auto-open browser to dashboard using actual port from server
+      const dashboardUrl = `http://localhost:${server.port}`;
       const { exec } = require('child_process');
       const platform = process.platform;
       

package/src/server/api-server.js

@@ -94,12 +94,57 @@ class ApiServer {
       }
     });
 
+    // --- FILE OPERATIONS (NEW) ---
+    
+    // Read raw file content
+    this.app.get('/api/read-file', async (req, res) => {
+        try {
+            const filePath = req.query.path;
+            if (!filePath) return res.status(400).json({ error: 'Missing path' });
+            
+            // Prevent directory traversal (basic check)
+            const resolvedPath = path.resolve(this.workingDir, filePath);
+            if (!resolvedPath.startsWith(this.workingDir)) {
+                // Allow reading but log warning - in dev tool we might want flexibility
+                // For strict mode: return res.status(403).json({ error: 'Access denied' });
+            }
+
+            if (!await fs.pathExists(resolvedPath)) {
+                return res.status(404).json({ error: 'File not found' });
+            }
+
+            const content = await fs.readFile(resolvedPath, 'utf8');
+            res.json({ content, path: filePath });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+
+    // Save file content
+    this.app.post('/api/save-file', async (req, res) => {
+        try {
+            const { path: filePath, content } = req.body;
+            if (!filePath || content === undefined) return res.status(400).json({ error: 'Missing data' });
+            
+            const resolvedPath = path.resolve(this.workingDir, filePath);
+            
+            // Security check
+            if (!resolvedPath.startsWith(this.workingDir)) {
+                 // For strict mode: return res.status(403).json({ error: 'Access denied' });
+            }
+
+            await fs.writeFile(resolvedPath, content, 'utf8');
+            res.json({ success: true });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+
     // --- GIT API START ---
 
     // 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 = [];
@@ -158,23 +203,16 @@ class ApiServer {
         }
     });
 
-    // Git Discard (NEW)
+    // Git Discard
     this.app.post('/api/git/discard', async (req, res) => {
         try {
-            const { files } = req.body; // array or '*'
-            
-            // Discard All
+            const { files } = req.body;
             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) {}
                 }
             }
@@ -205,25 +243,17 @@ class ApiServer {
         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: '' });
-                         }
+                         if (stat.isDirectory()) return res.json({ diff: '' });
                      }
-                 } catch (e) {
-                     // Ignore stat errors
-                 }
-
-                 // Check untracked
+                 } catch (e) {}
                  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');
@@ -236,7 +266,6 @@ class ApiServer {
                  cmd = `git diff`;
             }
         }
-
         const { stdout } = await execAsync(cmd, { cwd: this.workingDir, maxBuffer: 20 * 1024 * 1024 });
         res.json({ diff: stdout });
       } catch (error) {
@@ -245,7 +274,7 @@ class ApiServer {
       }
     });
 
-    // --- GIT API END ---
+    // --- GENERAL API ---
 
     this.app.post('/api/analyze', async (req, res) => {
         const { path: projectPath, options = {}, specificFiles } = req.body;
@@ -298,11 +327,43 @@ class ApiServer {
   }
 
   async start() {
-    return new Promise((resolve) => {
-      this.server = this.httpServer.listen(this.port, () => {
-        console.log(chalk.green(`\n🚀 VG Coder API Server & Socket.IO started on port ${this.port}`));
-        resolve();
-      });
+    return new Promise((resolve, reject) => {
+        const tryPort = (port) => {
+            const onError = (e) => {
+                if (e.code === 'EADDRINUSE') {
+                    console.log(chalk.yellow(`⚠️  Port ${port} is busy, trying ${port + 1}...`));
+                    this.httpServer.close();
+                    tryPort(port + 1);
+                } else {
+                    this.httpServer.removeListener('error', onError);
+                    reject(e);
+                }
+            };
+
+            this.httpServer.once('error', onError);
+
+            this.server = this.httpServer.listen(port, () => {
+                this.httpServer.removeListener('error', onError);
+                
+                // Update actual port
+                this.port = this.server.address().port;
+
+                const projectName = path.basename(this.workingDir);
+                const startTime = new Date().toLocaleString();
+                
+                console.log(chalk.green('\n──────────────────────────────────────────────────'));
+                console.log(`🚀 ${chalk.bold('VG Coder Server')}    ${chalk.green('● Online')}`);
+                console.log(chalk.gray('──────────────────────────────────────────────────'));
+                console.log(`📁 Project:   ${chalk.cyan(projectName)}`);
+                console.log(`⏰ Started:   ${chalk.yellow(startTime)}`);
+                console.log(`📡 URL:       ${chalk.blue(`http://localhost:${this.port}`)}`);
+                console.log(chalk.green('──────────────────────────────────────────────────\n'));
+                
+                resolve();
+            });
+        };
+
+        tryPort(this.port);
     });
   }
 

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

@@ -0,0 +1,161 @@
+/* Container chính cho khu vực Editor */
+.editor-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--ios-bg);
+    overflow: hidden;
+}
+
+/* Thanh Tabs - Layout Flexbox mới */
+.tabs-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Tabs trái, Actions phải */
+    background: #252526;
+    height: 35px;
+    border-bottom: 1px solid #1e1e1e;
+    user-select: none;
+}
+
+/* Khu vực chứa các Tabs (Scrollable) */
+.tabs-scroll-area {
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    flex: 1; /* Chiếm phần lớn không gian */
+    height: 100%;
+}
+.tabs-scroll-area::-webkit-scrollbar {
+    height: 0px; /* Ẩn scrollbar cho gọn */
+}
+
+/* Khu vực Actions bên phải */
+.tabs-actions {
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    background: #252526;
+    height: 100%;
+    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;
+}
+
+/* Style cho Tab Item */
+.tab-item {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    min-width: fit-content;
+    max-width: 200px;
+    height: 100%;
+    background: #2d2d2d;
+    color: #969696;
+    border-right: 1px solid #252526;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background 0.2s;
+}
+
+.tab-item:hover {
+    background: #383838;
+    color: #e0e0e0;
+}
+
+.tab-item.active {
+    background: #1e1e1e;
+    color: #ffffff;
+    border-top: 1px solid var(--ios-blue);
+}
+
+.tab-icon {
+    margin-right: 6px;
+    font-size: 14px;
+}
+
+.tab-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+}
+
+.tab-close {
+    margin-left: 8px;
+    border-radius: 3px;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    font-size: 11px;
+}
+
+.tab-item:hover .tab-close,
+.tab-item.active .tab-close {
+    opacity: 1;
+}
+
+.tab-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+/* Style đặc biệt cho Select Box trong Tab */
+.ai-provider-select {
+    background: transparent;
+    border: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    max-width: 120px;
+}
+
+.ai-provider-select option {
+    background: #252526;
+    color: white;
+}
+
+/* Action Buttons ở góc phải */
+.action-btn-mini {
+    background: transparent;
+    border: none;
+    color: #cccccc;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    margin-left: 2px;
+}
+
+.action-btn-mini:hover {
+    background: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.action-btn-mini.active {
+    background: rgba(0, 122, 255, 0.2);
+    color: var(--ios-blue);
+}
+
+/* Khu vực nội dung Code */
+.editor-body {
+    flex: 1;
+    position: relative;
+    background: #1e1e1e;
+    overflow: hidden;
+}
+
+.view-mode-hidden {
+    display: none !important;
+}

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

@@ -44,7 +44,7 @@
 
 .git-view-container {
     position: absolute;
-    top: 50px;
+    top: 35px;
     left: 0;
     right: 0;
     bottom: 0;
@@ -193,7 +193,7 @@
 
 .git-indent-guide {
     display: inline-block;
-    width: 16px; 
+    width: 16px;
     height: 100%;
     flex-shrink: 0;
 }
@@ -208,11 +208,11 @@
     flex-shrink: 0;
 }
 
-.git-tree-node.collapsed > .git-tree-content > .git-arrow {
+.git-tree-node.collapsed>.git-tree-content>.git-arrow {
     transform: rotate(-90deg);
 }
 
-.git-tree-node.collapsed > ul {
+.git-tree-node.collapsed>ul {
     display: none;
 }
 
@@ -226,10 +226,23 @@
 }
 
 /* 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-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;
@@ -245,6 +258,7 @@
 .git-file-label {
     color: #8b949e;
 }
+
 .git-tree-content:hover .git-file-label,
 .git-tree-content.selected .git-file-label {
     color: #e6edf3;
@@ -304,20 +318,41 @@
 }
 
 /* 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 {
+.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; }
+
+.d2h-ins {
+    background-color: rgba(46, 160, 67, 0.15) !important;
+}
+
+.d2h-del {
+    background-color: rgba(248, 81, 73, 0.15) !important;
+}

package/src/server/views/css/monaco.css

@@ -0,0 +1,15 @@
+.monaco-container {
+    width: 100%;
+    height: 100%;
+    background: #1e1e1e; /* Màu nền mặc định của VS Code Dark */
+}
+
+/* Ẩn hiện container */
+.view-mode-hidden {
+    display: none !important;
+}
+
+/* Fix z-index để context menu của Monaco đè lên được các thành phần khác */
+.monaco-editor .context-view.widget {
+    z-index: 10000 !important;
+}

package/src/server/views/dashboard.css

@@ -75,18 +75,40 @@ body {
 .header {
     display: flex;
     justify-content: space-between;
+    align-items: center; /* Align items vertically center */
     margin-bottom: 15px;
 }
 
-.header h1 {
-    font-size: 20px;
-    font-weight: 700;
-    margin: 0;
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
 .status {
-    font-size: 11px;
+    font-size: 14px;
     color: var(--ios-green);
+    line-height: 1;
+}
+
+/* NEW: Project Info Styles */
+.project-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.2;
+}
+
+.project-name {
+    font-weight: 700;
+    font-size: 16px;
+    color: var(--text-primary);
+}
+
+.project-meta {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-family: monospace;
 }
 
 .theme-toggle {

package/src/server/views/dashboard.html

@@ -11,14 +11,15 @@
     <link rel="stylesheet" href="/css/iframe.css">
     <link rel="stylesheet" href="/css/git-view.css">
     <link rel="stylesheet" href="/css/terminal.css">
+    <link rel="stylesheet" href="/css/editor.css">
+    <link rel="stylesheet" href="/css/monaco.css">
 
     <!-- Syntax Highlighting -->
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
 
-    <!-- Git Diff -->
-    <link rel="stylesheet" type="text/css"
-        href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
+    <!-- Git Diff CSS (JSDelivr Bundle) -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html@3.4.47/bundles/css/diff2html.min.css" />
 
     <!-- Terminal Dependencies -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
@@ -26,8 +27,25 @@
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
 
-    <!-- Other Libs -->
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+    <!-- Monaco Editor Loader -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
+
+    <!-- FIX: AMD Loader Conflict Patch -->
+    <script>
+        var __amdDefine = window.define;
+        var __amdRequire = window.require;
+        window.define = undefined;
+        window.require = undefined;
+    </script>
+
+    <!-- Git Diff JS (JSDelivr Bundle) -->
+    <script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.47/bundles/js/diff2html-ui.min.js"></script>
+
+    <!-- FIX: Restore AMD Loader -->
+    <script>
+        window.define = __amdDefine;
+        window.require = __amdRequire;
+    </script>
 
     <script>
         (function () {
@@ -44,8 +62,14 @@
             <div class="container">
                 <div class="header">
                     <div class="header-content">
-                        <span class="status" id="status">● Server Starting...</span>
-                        <div style="height: 5px;"></div>
+                        <!-- Status Dot -->
+                        <span class="status" id="status" style="font-size: 14px;">●</span>
+                        
+                        <!-- NEW: Project Info Section -->
+                        <div class="project-info">
+                            <div class="project-name" id="project-name">Loading...</div>
+                            <div class="project-meta" id="project-meta">...</div>
+                        </div>
                     </div>
                     <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
                         <span id="theme-icon">🌙</span>
@@ -163,73 +187,91 @@
             </div>
         </div>
 
-        <!-- CỘT PHẢI: AI Iframe -->
+        <!-- CỘT PHẢI: AI Iframe & Editor -->
         <div class="right-panel">
-            <div class="ai-header">
-                <div class="ai-select-group">
-                    <span style="font-size: 16px;">🤖</span>
-                    <select id="ai-provider-select" class="ai-select">
-                        <!-- Options filled by JS -->
-                    </select>
-                </div>
+            <!-- HEADER MỚI: Tích hợp Tabs & Actions -->
+            <div id="tabs-header" class="tabs-header">
+                <!-- Vùng Tabs Scrollable -->
+                <div class="tabs-scroll-area">
 
-                <!-- NEW: Toggle Guide Button -->
-                <button id="guide-toggle-btn" class="btn-icon-head" style="margin-left:5px;"
-                    title="Show Installation Guide">🧩</button>
+                    <!-- AI Tab (STATIC) -->
+                    <div class="tab-item active" id="ai-tab" onclick="window.switchTab('ai-assistant')"
+                        data-path="ai-assistant">
+                        <span class="tab-icon">🤖</span>
+                        <!-- Select Box nằm ngay trong tên Tab -->
+                        <select id="ai-provider-select" class="ai-provider-select" onclick="event.stopPropagation()">
+                            <!-- Options filled by JS -->
+                        </select>
+                    </div>
 
-                <button id="git-view-toggle" class="git-toggle-btn">View Changes</button>
-                <button id="git-refresh-btn" class="btn-icon-head" style="display:none; margin-left:5px;"
-                    title="Refresh">↻</button>
+                    <!-- Dynamic File Tabs -->
+                    <div id="file-tabs-container" style="display:flex; height:100%;"></div>
+                </div>
 
-                <a id="ai-external-link" href="#" target="_blank" class="btn-icon-head" title="Open in new tab">↗</a>
+                <!-- Global Actions -->
+                <div class="tabs-actions">
+                    <button id="guide-toggle-btn" class="action-btn-mini" title="Show Installation Guide">🧩</button>
+                    <button id="git-refresh-btn" class="action-btn-mini" style="display:none;"
+                        title="Refresh Git">↻</button>
+                    <button id="git-view-toggle" class="action-btn-mini" title="Toggle Git View">
+                        <span style="font-size:12px">Git</span>
+                    </button>
+                </div>
             </div>
 
             <!-- Git View Container -->
             <div id="git-view-container" class="git-view-container"></div>
 
-            <!-- AI Iframe Container -->
-            <div class="ai-iframe-container">
-                <!-- Center Extension Guide (Z-Index 10, covers iframe) -->
-                <div id="iframe-placeholder" class="iframe-placeholder hidden">
-                    <div class="extension-guide-center">
-                        <button class="guide-close-btn" id="guide-close-btn" title="Close Guide">×</button>
-                        <span class="guide-icon">🧩</span>
-                        <h3 class="guide-title">Cài đặt VG Coder Extension</h3>
-                        <p class="guide-desc">
-                            Không thấy trang web? AI Provider chặn hiển thị trong Iframe.<br>
-                            Hãy cài đặt Extension để bỏ qua các giới hạn này.
-                        </p>
-                        <ol class="guide-steps">
-                            <li class="guide-step">
-                                <span class="step-number">1</span>
-                                Copy link và dán vào tab mới:
-                                <div class="url-box">
-                                    <input type="text" id="chrome-url-input-center" class="guide-input" readonly
-                                        value="chrome://extensions" onclick="this.select()">
-                                    <button class="guide-btn-copy" onclick="copyChromeUrl(event)">Copy</button>
-                                </div>
-                            </li>
-                            <li class="guide-step">
-                                <span class="step-number">2</span>
-                                Bật <b>Developer mode</b> (Góc phải trên) &rarr; <b>Load unpacked</b>
-                            </li>
-                            <li class="guide-step">
-                                <span class="step-number">3</span>
-                                Chọn thư mục bên dưới:
-                                <div class="path-box">
-                                    <input type="text" id="extension-path-input-center" class="guide-input" readonly
-                                        value="Loading..." onclick="this.select()">
-                                    <button class="guide-btn-copy" onclick="copyExtensionPath(event)">Copy</button>
-                                </div>
-                            </li>
-                        </ol>
-                        <div class="guide-footer">
-                            <a id="ai-placeholder-link" href="#" target="_blank" class="link-fallback">Mở tab mới ↗</a>
-                            <button id="guide-done-btn" class="btn-primary-guide">Đã xong / Tải lại</button>
+            <!-- Editor Container -->
+            <div class="editor-container" style="flex: 1; position: relative; overflow: hidden;">
+
+                <!-- AI Iframe -->
+                <div class="ai-iframe-container">
+                    <div id="iframe-placeholder" class="iframe-placeholder hidden">
+                        <div class="extension-guide-center">
+                            <button class="guide-close-btn" id="guide-close-btn" title="Close Guide">×</button>
+                            <span class="guide-icon">🧩</span>
+                            <h3 class="guide-title">Cài đặt VG Coder Extension</h3>
+                            <p class="guide-desc">
+                                Không thấy trang web? AI Provider chặn hiển thị trong Iframe.<br>
+                                Hãy cài đặt Extension để bỏ qua các giới hạn này.
+                            </p>
+                            <ol class="guide-steps">
+                                <li class="guide-step">
+                                    <span class="step-number">1</span>
+                                    Copy link và dán vào tab mới:
+                                    <div class="url-box">
+                                        <input type="text" id="chrome-url-input-center" class="guide-input" readonly
+                                            value="chrome://extensions" onclick="this.select()">
+                                        <button class="guide-btn-copy" onclick="copyChromeUrl(event)">Copy</button>
+                                    </div>
+                                </li>
+                                <li class="guide-step">
+                                    <span class="step-number">2</span>
+                                    Bật <b>Developer mode</b> (Góc phải trên) &rarr; <b>Load unpacked</b>
+                                </li>
+                                <li class="guide-step">
+                                    <span class="step-number">3</span>
+                                    Chọn thư mục bên dưới:
+                                    <div class="path-box">
+                                        <input type="text" id="extension-path-input-center" class="guide-input" readonly
+                                            value="Loading..." onclick="this.select()">
+                                        <button class="guide-btn-copy" onclick="copyExtensionPath(event)">Copy</button>
+                                    </div>
+                                </li>
+                            </ol>
+                            <div class="guide-footer">
+                                <a id="ai-placeholder-link" href="#" target="_blank" class="link-fallback">Mở tab mới
+                                    ↗</a>
+                                <button id="guide-done-btn" class="btn-primary-guide">Đã xong / Tải lại</button>
+                            </div>
                         </div>
                     </div>
+                    <iframe id="ai-iframe" src="" title="AI Integration"></iframe>
                 </div>
-                <iframe id="ai-iframe" src="" title="AI Integration"></iframe>
+
+                <!-- Monaco Editor Container -->
+                <div id="monaco-container" class="monaco-container view-mode-hidden"></div>
             </div>
         </div>
     </div>
@@ -239,4 +281,4 @@
     <script type="module" src="/js/main.js"></script>
 </body>
 
-</html>
+</html>

package/src/server/views/js/features/editor-tabs.js

@@ -0,0 +1,123 @@
+import { openFileInMonaco, saveViewState, disposeModel } from './monaco-manager.js';
+
+let activeTabs = []; // Array of { path, name, icon }
+let currentPath = 'ai-assistant'; // Default
+
+export function initEditorTabs() {
+    renderTabs();
+}
+
+export async function openFileTab(path, name, icon = '📄') {
+    // 1. Ẩn AI, hiện Monaco
+    toggleViewMode('code');
+
+    // 2. Lưu state tab cũ
+    if (currentPath && currentPath !== 'ai-assistant' && currentPath !== path) {
+        saveViewState(currentPath);
+    }
+
+    // 3. Logic Tabs Array
+    const existingTab = activeTabs.find(t => t.path === path);
+    if (!existingTab) {
+        activeTabs.push({ path, name, icon });
+        renderTabs();
+    }
+    
+    // 4. Update UI
+    currentPath = path;
+    updateTabUI();
+
+    // 5. Open in Monaco
+    await openFileInMonaco(path);
+}
+
+export function switchTab(path) {
+    if (currentPath && currentPath !== 'ai-assistant') {
+        saveViewState(currentPath);
+    }
+
+    currentPath = path;
+    updateTabUI();
+
+    if (path === 'ai-assistant') {
+        toggleViewMode('ai');
+    } else {
+        toggleViewMode('code');
+        openFileInMonaco(path);
+    }
+}
+
+export function closeTab(event, path) {
+    event.stopPropagation();
+    
+    const index = activeTabs.findIndex(t => t.path === path);
+    if (index === -1) return;
+
+    activeTabs.splice(index, 1);
+    disposeModel(path);
+
+    if (currentPath === path) {
+        if (activeTabs.length > 0) {
+            const nextTab = activeTabs[activeTabs.length - 1];
+            switchTab(nextTab.path);
+        } else {
+            switchTab('ai-assistant');
+        }
+    }
+    renderTabs();
+}
+
+function renderTabs() {
+    // Chỉ render các file tabs vào container con
+    const container = document.getElementById('file-tabs-container');
+    if (!container) return;
+    
+    let html = '';
+    activeTabs.forEach(tab => {
+        html += `
+            <div class="tab-item" 
+                 onclick="window.switchTab('${tab.path}')" 
+                 data-path="${tab.path}"
+                 title="${tab.path}">
+                <span class="tab-icon">${tab.icon}</span>
+                <span class="tab-name">${tab.name}</span>
+                <span class="tab-close" onclick="window.closeTab(event, '${tab.path}')">×</span>
+            </div>
+        `;
+    });
+
+    container.innerHTML = html;
+    updateTabUI();
+}
+
+function updateTabUI() {
+    // 1. Update Static AI Tab
+    const aiTab = document.getElementById('ai-tab');
+    if (currentPath === 'ai-assistant') aiTab.classList.add('active');
+    else aiTab.classList.remove('active');
+
+    // 2. Update Dynamic Tabs
+    const fileTabs = document.querySelectorAll('#file-tabs-container .tab-item');
+    fileTabs.forEach(el => {
+        if (el.dataset.path === currentPath) el.classList.add('active');
+        else el.classList.remove('active');
+    });
+}
+
+function toggleViewMode(mode) {
+    const aiContainer = document.querySelector('.ai-iframe-container');
+    const monacoContainer = document.getElementById('monaco-container');
+
+    if (mode === 'code') {
+        aiContainer.classList.add('view-mode-hidden');
+        monacoContainer.classList.remove('view-mode-hidden');
+    } else {
+        aiContainer.classList.remove('view-mode-hidden');
+        monacoContainer.classList.add('view-mode-hidden');
+    }
+}
+
+// Export global helpers
+window.switchTab = switchTab;
+window.closeTab = closeTab;
+window.openFileTab = openFileTab;

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

@@ -344,6 +344,15 @@ async function loadDiffView(filePath, type) {
     const viewer = document.getElementById('git-diff-viewer');
     viewer.innerHTML = '<div class="git-empty-state">Loading diff...</div>';
     
+    // SAFE CHECK FOR UI LIBRARY
+    // We check window.Diff2HtmlUI first (standard for bundles)
+    const UIConstructor = window.Diff2HtmlUI;
+
+    if (!UIConstructor) {
+        viewer.innerHTML = '<div class="git-empty-state" style="color:#f85149">Error: Diff2HtmlUI library not loaded correctly.<br>Please check your internet connection or CDN availability.</div>';
+        return;
+    }
+    
     try {
         const diff = await getGitDiff(filePath, type === 'staged' ? 'staged' : 'working');
         
@@ -353,7 +362,7 @@ async function loadDiffView(filePath, type) {
         }
 
         viewer.innerHTML = '';
-        const ui = new Diff2HtmlUI(viewer, diff, {
+        const ui = new UIConstructor(viewer, diff, {
             drawFileList: false,
             matching: 'lines',
             outputFormat: 'side-by-side',

package/src/server/views/js/features/iframe-manager.js

@@ -3,13 +3,14 @@ const AI_PROVIDERS = [
     { id: 'kimi', name: 'Kimi AI', url: 'https://www.kimi.com' },
     { id: 'deepseek', name: 'DeepSeek', url: 'https://chat.deepseek.com' },
     { id: 'gemini', name: 'Google Gemini', url: 'https://gemini.google.com/app' },
-    { id: 'aistudio', name: 'Google AI Studio', url: 'https://aistudio.google.com/prompts/new_chat' }
+    { id: 'aistudio', name: 'Google AI Studio', url: 'https://aistudio.google.com/prompts/new_chat' },
+    { id: 'gork', name: 'Gork', url: 'https://grok.com' },
 ];
 
 export function initIframeManager() {
     const select = document.getElementById('ai-provider-select');
     const iframe = document.getElementById('ai-iframe');
-    const externalLink = document.getElementById('ai-external-link');
+    // Removed externalLink reference
     const placeholderLink = document.getElementById('ai-placeholder-link');
     
     // Guide elements
@@ -42,9 +43,11 @@ export function initIframeManager() {
             iframe.src = provider.url;
         }, 50);
 
-        externalLink.href = provider.url;
-        placeholderLink.href = provider.url;
-        placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;
+        // Update placeholder link only (external link removed from UI)
+        if (placeholderLink) {
+            placeholderLink.href = provider.url;
+            placeholderLink.textContent = `Mở ${provider.name} tab mới ↗`;
+        }
         
         localStorage.setItem('ai_provider', providerId);
     };
@@ -60,11 +63,11 @@ export function initIframeManager() {
     // --- GUIDE TOGGLE LOGIC ---
 
     const showGuide = () => {
-        guideContainer.classList.remove('hidden');
+        if (guideContainer) guideContainer.classList.remove('hidden');
     };
 
     const hideGuide = () => {
-        guideContainer.classList.add('hidden');
+        if (guideContainer) guideContainer.classList.add('hidden');
     };
 
     const reloadIframe = () => {

package/src/server/views/js/features/monaco-manager.js

@@ -0,0 +1,160 @@
+import { API_BASE } from '../config.js';
+import { showToast } from '../utils.js';
+
+let editor = null;
+let models = new Map(); // Map<filePath, { model: ITextModel, viewState: object }>
+let isMonacoLoaded = false;
+
+// Cấu hình đường dẫn cho AMD Loader của Monaco
+export function initMonaco() {
+    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
+}
+
+/**
+ * Đảm bảo Editor đã được khởi tạo
+ */
+async function ensureEditor() {
+    if (editor) return editor;
+
+    return new Promise((resolve) => {
+        require(['vs/editor/editor.main'], function () {
+            const container = document.getElementById('monaco-container');
+            
+            // Xác định theme dựa trên theme hiện tại của web
+            const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'vs-dark' : 'vs';
+
+            editor = monaco.editor.create(container, {
+                value: '',
+                language: 'plaintext',
+                theme: currentTheme,
+                automaticLayout: true, // Tự động resize
+                minimap: { enabled: true },
+                fontSize: 13,
+                fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+                scrollBeyondLastLine: false,
+            });
+
+            // Lắng nghe phím tắt Ctrl+S / Cmd+S để lưu
+            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+                saveCurrentFile();
+            });
+
+            isMonacoLoaded = true;
+            resolve(editor);
+        });
+    });
+}
+
+/**
+ * Mở file vào Editor
+ */
+export async function openFileInMonaco(path) {
+    const editorInstance = await ensureEditor();
+
+    // 1. Nếu Model đã tồn tại trong bộ nhớ -> Dùng lại
+    if (models.has(path)) {
+        const stored = models.get(path);
+        editorInstance.setModel(stored.model);
+        if (stored.viewState) {
+            editorInstance.restoreViewState(stored.viewState);
+        }
+        editorInstance.focus();
+        return;
+    }
+
+    // 2. Nếu chưa -> Fetch nội dung từ Server
+    try {
+        const res = await fetch(`${API_BASE}/api/read-file?path=${encodeURIComponent(path)}`);
+        const data = await res.json();
+
+        if (res.ok) {
+            // Xác định ngôn ngữ từ extension
+            const language = getLanguageFromPath(path);
+            
+            // Tạo Model mới
+            const newModel = monaco.editor.createModel(data.content, language, monaco.Uri.file(path));
+            
+            // Lưu vào cache
+            models.set(path, { model: newModel, viewState: null });
+            
+            // Gán vào Editor
+            editorInstance.setModel(newModel);
+        } else {
+            showToast(`Error opening file: ${data.error}`, 'error');
+        }
+    } catch (err) {
+        showToast(`Failed to load file: ${err.message}`, 'error');
+    }
+}
+
+/**
+ * Lưu trạng thái View (Scroll, Cursor) trước khi chuyển tab
+ */
+export function saveViewState(path) {
+    if (editor && models.has(path)) {
+        const viewState = editor.saveViewState();
+        const stored = models.get(path);
+        stored.viewState = viewState;
+        models.set(path, stored);
+    }
+}
+
+/**
+ * Giải phóng Model khi đóng Tab
+ */
+export function disposeModel(path) {
+    if (models.has(path)) {
+        const stored = models.get(path);
+        stored.model.dispose(); // Quan trọng: Tránh memory leak
+        models.delete(path);
+    }
+}
+
+/**
+ * Cập nhật Theme cho Monaco khi web đổi theme
+ */
+export function updateMonacoTheme(theme) {
+    if (editor) {
+        monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'vs');
+    }
+}
+
+/**
+ * Lưu file hiện tại
+ */
+async function saveCurrentFile() {
+    const model = editor.getModel();
+    if (!model) return;
+
+    const content = model.getValue();
+    const filePath = model.uri.fsPath; // Lấy path từ URI
+
+    try {
+        const res = await fetch(`${API_BASE}/api/save-file`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: filePath, content })
+        });
+        
+        if (res.ok) {
+            showToast('File saved successfully!', 'success');
+        } else {
+            showToast('Failed to save file', 'error');
+        }
+    } catch (err) {
+        showToast('Error saving file: ' + err.message, 'error');
+    }
+}
+
+// Helper: Map extension to Monaco Language
+function getLanguageFromPath(path) {
+    const ext = path.split('.').pop().toLowerCase();
+    const map = {
+        js: 'javascript', ts: 'typescript', html: 'html', css: 'css',
+        json: 'json', md: 'markdown', py: 'python', java: 'java',
+        sh: 'shell', xml: 'xml', sql: 'sql'
+    };
+    return map[ext] || 'plaintext';
+}
+
+export { editor };

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

@@ -183,15 +183,29 @@ function generateTreeHtml(node) {
     const arrow = hasChildren ? '▼' : '';
     const liClass = `tree-li ${hasChildren ? 'has-children' : ''}`;
     
+    // Actions
+    // On click: Toggle if folder, Open Tab if file
+    let clickAction = '';
+    let cursorStyle = '';
+
+    if (isDir) {
+        if (hasChildren) {
+            clickAction = 'onclick="toggleFolder(event)"';
+            cursorStyle = 'cursor: pointer;';
+        }
+    } else {
+        // File click -> Open in Editor
+        // Escape backslashes for Windows paths
+        const safePath = (node.relativePath || node.path).replace(/\\/g, '\\\\');
+        clickAction = `onclick="window.openFileTab('${safePath}', '${node.name}')"`;
+        cursorStyle = 'cursor: pointer; color: var(--text-primary);';
+    }
+    
     // Build HTML
     let html = `<li class="${liClass}">`;
     
-    const clickAttr = hasChildren ? 'onclick="toggleFolder(event)"' : '';
-    
-    // Add data-tokens and data-type for client-side calculation
-    
     html += `
-        <div class="tree-item-row" ${clickAttr}>
+        <div class="tree-item-row" ${isDir ? clickAction : ''}>
             <span class="arrow">${arrow}</span>
             <input type="checkbox" class="tree-checkbox" 
                    data-path="${node.relativePath || node.path}" 
@@ -200,7 +214,7 @@ function generateTreeHtml(node) {
                    checked 
                    onclick="handleCheckboxChange(event)">
             <span class="tree-icon">${icon}</span>
-            <span class="tree-name">${node.name}</span>
+            <span class="tree-name" style="${cursorStyle}" ${!isDir ? clickAction : ''}>${node.name}</span>
             <span class="token-badge ${tokenClass}">${formatNumber(tokens)}</span>
         </div>
     `;

package/src/server/views/js/main.js

@@ -6,6 +6,8 @@ import { showToast, showCopiedState } from './utils.js';
 import { initIframeManager } from './features/iframe-manager.js';
 import { initGitView } from './features/git-view.js';
 import { initTerminal, createNewTerminal } from './features/terminal.js';
+import { initEditorTabs } from './features/editor-tabs.js';
+import { initMonaco, updateMonacoTheme } from './features/monaco-manager.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
@@ -14,6 +16,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Check server status
     await checkServerStatus();
 
+    // Load Project Info
+    await loadProjectInfo();
+
     // Initialize Theme
     initTheme();
 
@@ -28,6 +33,15 @@ document.addEventListener('DOMContentLoaded', async () => {
     
     // Initialize Terminal System
     initTerminal();
+
+    // Initialize Monaco & Tabs
+    initMonaco();
+    initEditorTabs();
+    
+    // Set default tab to AI Assistant
+    if (window.switchTab) {
+        window.switchTab('ai-assistant');
+    }
 });
 
 async function checkServerStatus() {
@@ -35,16 +49,40 @@ async function checkServerStatus() {
     const isHealthy = await checkHealth();
     
     if (isHealthy) {
-        statusEl.textContent = '● Online';
-        statusEl.style.background = 'rgba(52, 199, 89, 0.15)';
+        statusEl.textContent = '●';
+        statusEl.style.background = 'transparent';
         statusEl.style.color = 'var(--ios-green)';
     } else {
-        statusEl.textContent = '● Offline';
-        statusEl.style.background = 'rgba(255, 59, 48, 0.15)';
+        statusEl.textContent = '●';
+        statusEl.style.background = 'transparent';
         statusEl.style.color = 'var(--ios-red)';
     }
 }
 
+async function loadProjectInfo() {
+    try {
+        // Fetch info for current directory (.)
+        const res = await fetch('/api/info?path=.');
+        const data = await res.json();
+        
+        const projectNameEl = document.getElementById('project-name');
+        const projectMetaEl = document.getElementById('project-meta');
+        
+        // Extract folder name from path
+        const fullPath = data.path;
+        // Handle both Windows (\) and Unix (/) paths
+        const folderName = fullPath.split(/[\\/]/).pop();
+        
+        projectNameEl.textContent = folderName;
+        projectMetaEl.textContent = `${data.primaryType} • ${fullPath}`;
+        
+    } catch (err) {
+        console.error('Failed to load project info:', err);
+        document.getElementById('project-name').textContent = 'Unknown Project';
+        document.getElementById('project-meta').textContent = 'Error loading info';
+    }
+}
+
 function initTheme() {
     const themeBtn = document.getElementById('theme-toggle');
     let currentTheme = localStorage.getItem('theme') || 'light';
@@ -56,6 +94,7 @@ function initTheme() {
         localStorage.setItem('theme', newTheme);
         currentTheme = newTheme;
         updateThemeIcon(newTheme);
+        updateMonacoTheme(newTheme);
     });
 }