vg-coder-cli 2.0.12 → 2.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.12",
+  "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": {
@@ -21,19 +21,8 @@
     "code-analysis",
     "token-counter",
     "ai-helper",
-    "gitignore",
-    "html-export",
-    "syntax-highlighting",
-    "project-analyzer",
-    "source-code",
-    "tiktoken",
-    "spring-boot",
-    "angular",
-    "react",
-    "vue",
-    "java",
-    "javascript",
-    "typescript"
+    "terminal",
+    "web-terminal"
   ],
   "author": "VG Coder",
   "license": "MIT",
@@ -41,10 +30,6 @@
     "type": "git",
     "url": "https://github.com/tinhthanh/vg-coder-cli.git"
   },
-  "bugs": {
-    "url": "https://github.com/tinhthanh/vg-coder-cli/issues"
-  },
-  "homepage": "https://github.com/tinhthanh/vg-coder-cli#readme",
   "dependencies": {
     "commander": "^11.1.0",
     "directory-tree": "^3.5.1",
@@ -57,7 +42,9 @@
     "ora": "^5.4.1",
     "express": "^4.18.2",
     "cors": "^2.8.5",
-    "body-parser": "^1.20.2"
+    "body-parser": "^1.20.2",
+    "node-pty": "^1.0.0",
+    "socket.io": "^4.7.2"
   },
   "devDependencies": {
     "jest": "^29.7.0",

package/src/server/api-server.js

@@ -4,6 +4,8 @@ const bodyParser = require('body-parser');
 const path = require('path');
 const fs = require('fs-extra');
 const chalk = require('chalk');
+const http = require('http');
+const { Server } = require('socket.io');
 const { exec } = require('child_process');
 const util = require('util');
 const execAsync = util.promisify(exec);
@@ -13,15 +15,24 @@ const ProjectDetector = require('../detectors/project-detector');
 const FileScanner = require('../scanner/file-scanner');
 const TokenManager = require('../tokenizer/token-manager');
 const BashExecutor = require('../utils/bash-executor');
+const terminalManager = require('./terminal-manager');
 
 class ApiServer {
   constructor(port = 6868) {
     this.port = port;
     this.app = express();
+    
+    // Create HTTP server for Socket.IO
+    this.httpServer = http.createServer(this.app);
+    this.io = new Server(this.httpServer, {
+        cors: { origin: "*" }
+    });
+    
     this.server = null;
     this.workingDir = process.cwd();
     this.setupMiddleware();
     this.setupRoutes();
+    this.setupSocketIO();
   }
 
   setupMiddleware() {
@@ -31,7 +42,6 @@ class ApiServer {
     this.app.use(express.static(path.join(__dirname, 'views')));
     
     this.app.use((req, res, next) => {
-      // Log request ngắn gọn
       if (!req.path.includes('.')) {
           console.log(chalk.blue(`[REQ] ${req.method} ${req.path}`));
       }
@@ -39,6 +49,43 @@ 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;
+            terminalManager.createTerminal(socket, termId, cols, rows, this.workingDir);
+        });
+
+        socket.on('terminal:input', (data) => {
+             if (data && data.termId) {
+                terminalManager.write(data.termId, data.data);
+             }
+        });
+
+        socket.on('terminal:resize', (data) => {
+            if (data && data.termId) {
+                terminalManager.resize(data.termId, data.cols, data.rows);
+            }
+        });
+        
+        socket.on('terminal:kill', (data) => {
+            if (data && data.termId) {
+                terminalManager.kill(data.termId);
+            }
+        });
+
+        socket.on('disconnect', () => {
+            terminalManager.cleanupSocket(socket.id);
+        });
+    });
+  }
+
   setupRoutes() {
     this.app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'views', 'dashboard.html')));
     this.app.get('/health', (req, res) => res.json({ status: 'ok', version: packageJson.version }));
@@ -52,37 +99,24 @@ class ApiServer {
       }
     });
 
-    // --- DEBUG GIT DIFF ENDPOINT ---
     this.app.get('/api/git/diff', async (req, res) => {
-      console.log(chalk.yellow('⚡ [GIT] Executing: git diff HEAD'));
       try {
-        // Tăng maxBuffer lên 20MB đề phòng diff lớn
         const { stdout, stderr } = await execAsync('git diff HEAD', { 
             cwd: this.workingDir,
             maxBuffer: 20 * 1024 * 1024 
         });
-        
-        console.log(chalk.green(`✅ [GIT] Success. Output length: ${stdout.length} chars`));
-        if (stderr) console.log(chalk.red(`⚠️ [GIT] Stderr: ${stderr}`));
-
         res.json({ diff: stdout });
-        
       } catch (error) {
         console.error(chalk.red('❌ [GIT] Error:'), error.message);
         res.json({ diff: '', error: error.message });
       }
     });
 
-    // ... (Các endpoint cũ giữ nguyên: analyze, info, structure, clean, execute) ...
-    // Để tiết kiệm không gian, tôi giữ nguyên phần logic cũ của các endpoint khác
-    // trong thực tế bạn không nên xoá chúng.
-    
-    this.app.post('/api/analyze', async (req, res) => { /* Logic cũ... */ 
+    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' });
         const resolvedPath = path.resolve(projectPath);
         if (!await fs.pathExists(resolvedPath)) return res.status(404).json({ error: 'Path not found' });
-        const detector = new ProjectDetector(resolvedPath);
         const scanner = new FileScanner(resolvedPath, {
           extensions: options.extensions ? options.extensions.split(',') : undefined,
           includeHidden: options.includeHidden
@@ -94,7 +128,7 @@ class ApiServer {
         res.send(content);
     });
 
-    this.app.get('/api/info', async (req, res) => { /* Logic cũ... */
+    this.app.get('/api/info', async (req, res) => {
         const projectPath = req.query.path;
         if (!projectPath) return res.status(400).json({ error: 'Missing path' });
         const resolvedPath = path.resolve(projectPath);
@@ -105,7 +139,7 @@ class ApiServer {
         res.json({ path: resolvedPath, primaryType: projectInfo.primary, stats: { totalFiles: scanResult.files.length } });
     });
 
-    this.app.get('/api/structure', async (req, res) => { /* Logic cũ... */
+    this.app.get('/api/structure', async (req, res) => {
         const projectPath = req.query.path || '.';
         const resolvedPath = path.resolve(projectPath);
         const scanner = new FileScanner(resolvedPath);
@@ -115,14 +149,14 @@ class ApiServer {
         res.json({ path: resolvedPath, structure: enrichedTree });
     });
 
-    this.app.post('/api/execute', async (req, res) => { /* Logic cũ... */
+    this.app.post('/api/execute', async (req, res) => {
         const { bash } = req.body;
         const executor = new BashExecutor(this.workingDir);
         const result = await executor.execute(bash);
         res.status(result.success ? 200 : 400).json(result);
     });
     
-    this.app.delete('/api/clean', async (req, res) => { /* Logic cũ... */
+    this.app.delete('/api/clean', async (req, res) => {
         await fs.remove(path.resolve(req.body.output));
         res.json({ success: true });
     });
@@ -130,8 +164,8 @@ class ApiServer {
 
   async start() {
     return new Promise((resolve) => {
-      this.server = this.app.listen(this.port, () => {
-        console.log(chalk.green(`\n🚀 VG Coder API Server started on port ${this.port}`));
+      this.server = this.httpServer.listen(this.port, () => {
+        console.log(chalk.green(`\n🚀 VG Coder API Server & Socket.IO started on port ${this.port}`));
         resolve();
       });
     });

package/src/server/terminal-manager.js

@@ -0,0 +1,82 @@
+const os = require('os');
+const pty = require('node-pty');
+
+class TerminalManager {
+    constructor() {
+        // Map: termId -> { process: pty, socketId: string }
+        this.sessions = new Map();
+        this.shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
+    }
+
+    createTerminal(socket, termId, cols = 80, rows = 24, cwd) {
+        try {
+            const term = pty.spawn(this.shell, [], {
+                name: 'xterm-256color',
+                cols: cols,
+                rows: rows,
+                cwd: cwd || process.cwd(),
+                env: process.env
+            });
+
+            this.sessions.set(termId, {
+                process: term,
+                socketId: socket.id
+            });
+
+            // Gửi dữ liệu kèm theo termId để Frontend biết của cửa sổ nào
+            term.onData((data) => {
+                socket.emit('terminal:data', { termId, data });
+            });
+
+            term.onExit(() => {
+                if (this.sessions.has(termId)) {
+                    socket.emit('terminal:exit', { termId });
+                    this.sessions.delete(termId);
+                }
+            });
+
+            return term;
+        } catch (error) {
+            console.error('Failed to create terminal:', error);
+            socket.emit('terminal:error', { termId, error: 'Failed to create process' });
+        }
+    }
+
+    write(termId, data) {
+        const session = this.sessions.get(termId);
+        if (session) {
+            session.process.write(data);
+        }
+    }
+
+    resize(termId, cols, rows) {
+        const session = this.sessions.get(termId);
+        if (session) {
+            try {
+                session.process.resize(cols, rows);
+            } catch (err) {
+                // Ignore resize errors
+            }
+        }
+    }
+
+    kill(termId) {
+        const session = this.sessions.get(termId);
+        if (session) {
+            session.process.kill();
+            this.sessions.delete(termId);
+        }
+    }
+
+    // Dọn dẹp tất cả terminal của một socket khi client disconnect
+    cleanupSocket(socketId) {
+        for (const [termId, session] of this.sessions.entries()) {
+            if (session.socketId === socketId) {
+                session.process.kill();
+                this.sessions.delete(termId);
+            }
+        }
+    }
+}
+
+module.exports = new TerminalManager();

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

@@ -0,0 +1,129 @@
+/* Layer chứa các terminal trôi nổi */
+#floating-terminals-layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: 10000; /* Cao hơn mọi thứ */
+}
+
+/* Style cho từng cửa sổ terminal */
+.floating-terminal {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    background: #1e1e1e;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    border: 1px solid #333;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    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 */
+.terminal-header {
+    background: #252526;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: grab;
+    border-bottom: 1px solid #333;
+    user-select: none;
+    height: 36px;
+}
+
+.terminal-header:active {
+    cursor: grabbing;
+}
+
+.terminal-title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #ccc;
+    font-family: monospace;
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.terminal-controls {
+    display: flex;
+    gap: 6px;
+}
+
+.term-btn {
+    width: 12px;
+    height: 12px;
+    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 {
+    background: #FF5F56;
+}
+.term-btn.close:hover {
+    background: #ff3b30;
+}
+
+.term-btn.minimize {
+    background: #FFBD2E;
+}
+.term-btn.minimize:hover {
+    background: #ffad08;
+}
+
+.term-btn.maximize {
+    background: #27C93F;
+}
+
+/* Phần nội dung chứa xterm */
+.terminal-body {
+    flex: 1;
+    position: relative;
+    padding: 5px;
+    background: #1e1e1e;
+    overflow: hidden;
+}
+
+/* Scrollbar customization */
+.xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+}
+.xterm-viewport::-webkit-scrollbar-thumb {
+    background: #424242;
+    border-radius: 4px;
+}

package/src/server/views/dashboard.html

@@ -10,11 +10,21 @@
     <link rel="stylesheet" href="/css/structure.css">
     <link rel="stylesheet" href="/css/iframe.css">
     <link rel="stylesheet" href="/css/git-view.css">
+    <link rel="stylesheet" href="/css/terminal.css">
     
-    <!-- QUAN TRỌNG: Đã đổi sang github-dark.min.css để chữ có màu sáng -->
+    <!-- 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" />
+    
+    <!-- Terminal Dependencies -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
+    <script src="/socket.io/socket.io.js"></script>
+    <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>
 
     <script>
@@ -39,6 +49,14 @@
                         <span id="theme-icon">🌙</span>
                     </button>
                 </div>
+                
+                <!-- Quick Actions -->
+                <div class="endpoint-card" style="display: flex; gap: 10px; align-items: center; justify-content: space-between;">
+                    <span style="font-weight: 600;">Tools:</span>
+                    <button class="btn" onclick="createNewTerminal()" style="background: #252526; border: 1px solid #444;">
+                        <span>🖥️</span> New Terminal
+                    </button>
+                </div>
 
                 <!-- System Prompt Section -->
                 <div class="system-prompt-card">
@@ -104,7 +122,7 @@
                 </div>
 
                 <div class="endpoints">
-                    <!-- Execute Bash -->
+                    <!-- Execute Bash (RESTORED) -->
                     <div class="endpoint-card">
                         <div class="endpoint-header">
                             <div class="endpoint-title-group">
@@ -193,7 +211,6 @@
                     </select>
                 </div>
                 
-                <!-- NEW: Git Toggle Button -->
                 <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>
                 
@@ -213,9 +230,11 @@
             </div>
         </div>
     </div>
+    
+    <!-- Floating Terminals Container (Fixed on top of everything) -->
+    <div id="floating-terminals-layer"></div>
 
     <div class="toast" id="toast"></div>
     <script type="module" src="/js/main.js"></script>
 </body>
-
 </html>

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

@@ -0,0 +1,252 @@
+// Terminal Logic: Multi-instance & Floating
+
+let socket;
+const activeTerminals = new Map(); // Map<termId, { term, fitAddon, element, prevSize }>
+
+// Z-Index Management
+let maxZIndex = 10001;
+
+export function initTerminal() {
+    if (typeof io === 'undefined' || typeof Terminal === 'undefined') {
+        console.error('Libraries missing for Terminal');
+        return;
+    }
+
+    // 1. Init Socket
+    socket = io();
+
+    // 2. Global Event Listeners
+    socket.on('terminal:data', ({ termId, data }) => {
+        const session = activeTerminals.get(termId);
+        if (session) {
+            session.term.write(data);
+        }
+    });
+    
+    socket.on('terminal:exit', ({ termId }) => {
+       closeTerminalUI(termId); 
+    });
+}
+
+/**
+ * Tạo một cửa sổ terminal mới
+ */
+export function createNewTerminal() {
+    const termId = 'term_' + Date.now();
+    const layer = document.getElementById('floating-terminals-layer');
+    
+    // 1. Create DOM Elements
+    const wrapper = document.createElement('div');
+    wrapper.className = 'floating-terminal';
+    wrapper.id = `wrapper-${termId}`;
+    
+    // Offset vị trí một chút nếu mở nhiều cái
+    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}" ondblclick="window.toggleMinimize('${termId}')">
+            <div class="terminal-title-group">
+                <span>>_</span> Terminal (${activeTerminals.size + 1})
+            </div>
+            <div class="terminal-controls">
+                <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>
+    `;
+
+    layer.appendChild(wrapper);
+
+    // 2. Init xterm.js
+    const term = new Terminal({
+        cursorBlink: true,
+        fontSize: 13,
+        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+        theme: {
+            background: '#1e1e1e',
+            foreground: '#f0f0f0'
+        }
+    });
+
+    const fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+
+    term.open(document.getElementById(`body-${termId}`));
+    fitAddon.fit();
+
+    // 3. Register Events
+    
+    // Bring to front on click
+    wrapper.addEventListener('mousedown', () => {
+        wrapper.style.zIndex = ++maxZIndex;
+    });
+
+    // Send input
+    term.onData(data => {
+        socket.emit('terminal:input', { termId, data });
+    });
+
+    // Resize Observer to refit terminal when window is resized
+    const resizeObserver = new ResizeObserver(() => {
+        // 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}`));
+
+    // 4. Make Draggable
+    makeDraggable(wrapper, document.getElementById(`header-${termId}`));
+
+    // 5. Store Session
+    activeTerminals.set(termId, { term, fitAddon, element: wrapper });
+
+    // 6. Init Backend Process
+    socket.emit('terminal:init', { 
+        termId, 
+        cols: term.cols, 
+        rows: term.rows 
+    });
+}
+
+/**
+ * Đóng terminal UI & Process
+ */
+export function closeTerminalUI(termId) {
+    const session = activeTerminals.get(termId);
+    if (session) {
+        // Remove from DOM
+        session.element.remove();
+        // Clean map
+        activeTerminals.delete(termId);
+        // Tell server to kill
+        socket.emit('terminal:kill', { 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
+ */
+function makeDraggable(element, handle) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    
+    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;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // Call function whenever cursor moves
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e.preventDefault();
+        // Calculate new cursor position
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // Set element's new position
+        element.style.top = (element.offsetTop - pos2) + "px";
+        element.style.left = (element.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        // Stop moving when mouse button is released
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+}
+
+// Global Exports for HTML onclick
+window.createNewTerminal = createNewTerminal;
+window.closeTerminal = closeTerminalUI;
+window.toggleMinimize = toggleMinimize;
+window.toggleMaximize = toggleMaximize;

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

@@ -1,14 +1,12 @@
 // Main entry point - Initialize application
 import { SYSTEM_PROMPT } from './config.js';
 import { checkHealth } from './api.js';
-import './handlers.js'; // Import to register global functions
+import './handlers.js'; 
 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';
 
-/**
- * Initialize application on DOM ready
- */
 document.addEventListener('DOMContentLoaded', async () => {
     // Load system prompt text
     document.getElementById('prompt-text').textContent = SYSTEM_PROMPT;
@@ -27,11 +25,14 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // Initialize Git View
     initGitView();
+    
+    // Initialize Terminal System
+    initTerminal();
+    
+    // Auto open one terminal on start (Optional)
+    // setTimeout(() => createNewTerminal(), 500);
 });
 
-/**
- * Check and update server status
- */
 async function checkServerStatus() {
     const statusEl = document.getElementById('status');
     const isHealthy = await checkHealth();
@@ -47,28 +48,15 @@ async function checkServerStatus() {
     }
 }
 
-/**
- * Initialize Theme Logic
- */
 function initTheme() {
     const themeBtn = document.getElementById('theme-toggle');
-    const themeIcon = document.getElementById('theme-icon');
-    
-    // Get current theme from DOM (set by inline script) or localStorage
     let currentTheme = localStorage.getItem('theme') || 'light';
-    
-    // Update icon initially
     updateThemeIcon(currentTheme);
 
     themeBtn.addEventListener('click', () => {
-        // Toggle theme
         const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-        
-        // Update DOM
         document.documentElement.setAttribute('data-theme', newTheme);
         localStorage.setItem('theme', newTheme);
-        
-        // Update local state
         currentTheme = newTheme;
         updateThemeIcon(newTheme);
     });
@@ -83,25 +71,19 @@ function updateThemeIcon(theme) {
     }
 }
 
-// Extension Helpers
 async function loadExtensionPath() {
     try {
         const res = await fetch('/api/extension-path');
         const data = await res.json();
         const input = document.getElementById('extension-path-input');
-        
-        if (data.exists) {
-            input.value = data.path;
-        } else {
-            input.value = "Error: Extension folder not found. Run 'npm run build' first.";
+        if (data.exists) input.value = data.path;
+        else {
+            input.value = "Error: Extension folder not found.";
             input.style.color = "var(--ios-red)";
         }
-    } catch (err) {
-        console.error('Failed to load extension path', err);
-    }
+    } catch (err) {}
 }
 
-// Expose extension handlers to window for onclick events
 window.toggleExtensionGuide = function() {
     const content = document.getElementById('extension-content');
     const icon = document.getElementById('ext-toggle-icon');
@@ -114,12 +96,9 @@ window.copyExtensionPath = function(event) {
     const btn = event.currentTarget;
     const icon = document.getElementById('ext-copy-icon');
     const text = document.getElementById('ext-copy-text');
-
     navigator.clipboard.writeText(input.value).then(() => {
         showCopiedState(btn, icon, text, '📋', 'Copy Path');
         showToast('Đã copy đường dẫn extension', 'success');
-    }).catch(err => {
-        showToast('Lỗi copy: ' + err.message, 'error');
     });
 }
 
@@ -127,14 +106,9 @@ window.copyChromeUrl = function(event) {
     const input = document.getElementById('chrome-url-input');
     const btn = event.currentTarget;
     const originalText = btn.innerHTML;
-
     navigator.clipboard.writeText(input.value).then(() => {
         btn.innerHTML = '✓';
         showToast('Đã copy URL', 'success');
-        setTimeout(() => {
-            btn.innerHTML = originalText;
-        }, 1500);
-    }).catch(err => {
-        showToast('Lỗi copy: ' + err.message, 'error');
+        setTimeout(() => btn.innerHTML = originalText, 1500);
     });
 }