vg-coder-cli 2.0.40 → 2.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
   "main": "src/index.js",
   "bin": {
@@ -31,16 +31,15 @@
   "author": "VG Coder",
   "license": "MIT",
   "dependencies": {
-    "-": "^0.0.1",
     "body-parser": "^1.20.2",
     "chalk": "^4.1.2",
+    "clipboardy": "^5.0.2",
     "commander": "^11.1.0",
     "cors": "^2.8.5",
     "diff2html": "^3.4.52",
     "directory-tree": "^3.5.1",
     "express": "^4.18.2",
     "fs-extra": "^11.3.3",
-    "g": "^2.0.1",
     "highlight.js": "^11.9.0",
     "ignore": "^5.3.0",
     "markdown-it": "^14.0.0",
@@ -51,7 +50,6 @@
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.8.3",
     "tiktoken": "^1.0.10",
-    "vg-coder-cli": "^2.0.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },

package/src/index.js

@@ -236,17 +236,11 @@ class VGCoderCLI {
       console.log(`📡 URL:       http://localhost:${server.port}`);
       console.log(chalk.cyan('──────────────────────────────────────────────────'));
       
-      // Only show extension guide if extension folder exists
-      if (await fs.pathExists(extensionPath)) {
-        console.log(chalk.yellow('\n🧩 CHƯA CÀI EXTENSION?'));
-        console.log('1. Truy cập: chrome://extensions');
-        console.log('2. Bật "Developer mode" (Góc phải trên)');
-        console.log('3. Bấm "Load unpacked" và chọn thư mục dưới đây:');
-        console.log(chalk.bgBlue.white.bold(` ${extensionPath} `));
-      } else {
-        console.log(chalk.yellow('\n🧩 Extension đã được đóng gói với npm package'));
-        console.log('📦 Extension sẽ được inject tự động qua server');
-      }
+      console.log(chalk.yellow('\n🧩 CHƯA CÀI EXTENSION?'));
+      console.log('1. Truy cập: chrome://extensions');
+      console.log('2. Bật "Developer mode" (Góc phải trên)');
+      console.log('3. Bấm "Load unpacked" và chọn thư mục dưới đây:');
+      console.log(chalk.bgBlue.white.bold(` ${extensionPath} `));
       
       console.log(chalk.yellow('\n👉 HƯỚNG DẪN SỬ DỤNG:'));
       console.log('1. Mở trang chat AI (ChatGPT, Claude, v.v.)');

package/src/server/api-server.js

@@ -411,10 +411,23 @@ class ApiServer {
     this.app.get('/api/extension-path', (req, res) => {
       try {
         const extensionPath = path.join(__dirname, 'views', 'vg-coder');
-        res.json({ path: extensionPath, exists: fs.existsSync(extensionPath) });
+        res.json({ path:extensionPath, exists: fs.existsSync(extensionPath) });
       } catch (error) { res.status(500).json({ error: error.message }); }
     });
     
+    // Clipboard API - Read system clipboard from server-side
+    this.app.get('/api/clipboard', async (req, res) => {
+      try {
+        // Dynamically import clipboardy (ES module)
+        const clipboardy = await import('clipboardy');
+        const text = await clipboardy.default.read();
+        res.json({ success: true, text });
+      } catch (error) {
+        console.error('Clipboard read error:', error);
+        res.status(500).json({ success: false, error: error.message });
+      }
+    });
+    
     this.app.post('/api/shutdown', async (req, res) => {
         res.json({ success: true });
         setTimeout(async () => { await this.stop(); process.exit(0); }, 500);

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

@@ -0,0 +1,358 @@
+/* Agent Panel Styles */
+
+/* Panel Content Container */
+#agent-panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* Chat Messages Area */
+.agent-chat-messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    background-color: #18181b;
+}
+
+.agent-chat-messages::-webkit-scrollbar {
+    width: 4px;
+}
+
+.agent-chat-messages::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.agent-chat-messages::-webkit-scrollbar-thumb {
+    background: #3f3f46;
+    border-radius: 2px;
+}
+
+/* Empty State */
+.agent-chat-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #52525b;
+    gap: 10px;
+}
+
+.agent-chat-empty svg {
+    width: 40px;
+    height: 40px;
+}
+
+.agent-chat-empty span {
+    font-size: 13px;
+}
+
+/* Message Container */
+.agent-message {
+    display: flex;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.agent-message.user {
+    justify-content: flex-end;
+}
+
+.agent-message.assistant {
+    justify-content: flex-start;
+}
+
+/* Message Bubble */
+.agent-message-content {
+    max-width: 85%;
+    padding: 8px 14px;
+    font-size: 14px;
+    line-height: 1.6;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    min-width: 0;
+}
+
+.agent-message.user .agent-message-content {
+    border-radius: 12px;
+    background: #27272a;
+    color: #ededed;
+    border: 1px solid #3f3f46;
+}
+
+.agent-message.assistant .agent-message-content {
+    border-radius: 4px;
+    background: transparent;
+    color: #ededed;
+}
+
+/* Message Metadata */
+.agent-message-meta {
+    margin-top: 6px;
+    font-size: 10px;
+    color: #71717a;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.agent-message.user .agent-message-meta {
+    justify-content: flex-end;
+}
+
+.agent-message.assistant .agent-message-meta {
+    justify-content: flex-start;
+}
+
+/* Status Icons */
+.agent-status-sending {
+    color: #71717a;
+}
+
+.agent-status-processing {
+    color: #fbbf24;
+}
+
+.agent-status-error {
+    color: #ef4444;
+}
+
+/* Input Area */
+.agent-chat-input-area {
+    padding: 16px;
+    background-color: #18181b;
+    border-top: 1px solid #27272a;
+    flex-shrink: 0;
+}
+
+.agent-input-wrapper {
+    background: #202023;
+    border: 1px solid #3f3f46;
+    border-radius: 8px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    transition: all 0.2s ease;
+}
+
+.agent-input-wrapper.drag-active {
+    border-color: #4ade80;
+    background-color: #27272a;
+    box-shadow: 0 0 10px rgba(74, 222, 128, 0.1);
+}
+
+/* File List */
+.agent-file-list {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.agent-file-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: #3f3f46;
+    padding: 4px 8px;
+    border-radius: 4px;
+    margin-right: 6px;
+    margin-bottom: 4px;
+    font-size: 11px;
+    color: #e4e4e7;
+}
+
+.agent-file-name {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.agent-file-size {
+    color: #a1a1aa;
+}
+
+.agent-file-remove {
+    background: none;
+    border: none;
+    color: #ef4444;
+    cursor: pointer;
+    font-weight: bold;
+    padding: 0 2px;
+    font-size: 14px;
+    line-height: 1;
+}
+
+/* Textarea */
+.agent-chat-textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    color: #ededed;
+    resize: none;
+    font-family: inherit;
+    font-size: 14px;
+    outline: none;
+    height: 40px;
+    min-height: 40px;
+}
+
+.agent-chat-textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Input Controls */
+.agent-input-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.agent-input-actions {
+    display: flex;
+    gap: 4px;
+}
+
+/* Buttons */
+.agent-btn {
+    background: transparent;
+    border: none;
+    color: #a1a1aa;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.agent-btn:hover {
+    color: #ededed;
+    background: #27272a;
+}
+
+.agent-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.agent-send-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    background: #ededed;
+    color: #18181b;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.agent-send-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+/* Mermaid Diagrams */
+.agent-mermaid {
+    margin: 16px 0;
+    padding: 20px;
+    background-color: var(--code-block-bg, #161b22);
+    border-radius: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: auto;
+    min-height: 100px;
+}
+
+.agent-mermaid svg {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Mermaid error state */
+.agent-mermaid-error {
+    margin: 16px 0;
+    padding: 16px;
+    background-color: rgba(255, 59, 48, 0.1);
+    border: 1px solid var(--ios-red, #ff3b30);
+    border-radius: 6px;
+    color: var(--ios-red, #ff3b30);
+    font-family: monospace;
+    font-size: 12px;
+}
+
+/* Light Theme Support */
+[data-theme="light"] .agent-chat-messages {
+    background-color: #FFFFFF;
+}
+
+[data-theme="light"] .agent-chat-input-area {
+    background-color: #FFFFFF;
+}
+
+[data-theme="light"] .agent-input-wrapper {
+    background: #F7F7F7;
+    border-color: #D1D1D1;
+}
+
+[data-theme="light"] .agent-message.user .agent-message-content {
+    background: #F0F0F0;
+    color: #000000;
+    border-color: #D1D1D1;
+}
+
+[data-theme="light"] .agent-message.assistant .agent-message-content {
+    color: #000000;
+}
+
+[data-theme="light"] .agent-chat-textarea {
+    color: #000000;
+}
+
+/* Spinner Animation */
+@keyframes agent-spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.agent-spinner {
+    animation: agent-spin 1s linear infinite;
+}
+
+/* Error Message */
+.agent-error-box {
+    color: #ef4444;
+    padding: 12px;
+    background: #2a1515;
+    border-radius: 8px;
+    border: 1px solid #7f1d1d;
+}
+
+.agent-error-title {
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.agent-retry-btn {
+    background: #dc2626;
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    margin-top: 4px;
+}
+
+.agent-retry-btn:hover {
+    background: #b91c1c;
+}

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

@@ -0,0 +1,97 @@
+/* Browser Panel Styles */
+.browser-panel-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+.browser-toolbar {
+    display: flex;
+    gap: 8px;
+    padding: 12px;
+    background: #1E1F22;
+    border-bottom: 1px solid #2B2D30;
+    flex-shrink: 0;
+}
+
+[data-theme="light"] .browser-toolbar {
+    background: #FFFFFF;
+    border-bottom: 1px solid #D1D1D1;
+}
+
+.browser-url-input {
+    flex: 1;
+    padding: 8px 12px;
+    background: #2B2D30;
+    border: 1px solid #3C3F41;
+    border-radius: 6px;
+    color: #DFE1E5;
+    font-size: 13px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+[data-theme="light"] .browser-url-input {
+    background: #FFFFFF;
+    border: 1px solid #D1D1D1;
+    color: #000000;
+}
+
+.browser-url-input:focus {
+    border-color: #4E84E8;
+}
+
+[data-theme="light"] .browser-url-input:focus {
+    border-color: #007AFF;
+}
+
+.browser-go-btn,
+.browser-refresh-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #2B2D30;
+    border: 1px solid #3C3F41;
+    border-radius: 6px;
+    color: #DFE1E5;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease;
+    flex-shrink: 0;
+}
+
+[data-theme="light"] .browser-go-btn,
+[data-theme="light"] .browser-refresh-btn {
+    background: #FFFFFF;
+    border: 1px solid #D1D1D1;
+    color: #000000;
+}
+
+.browser-go-btn:hover,
+.browser-refresh-btn:hover {
+    background: #3C3F41;
+    border-color: #4E84E8;
+}
+
+[data-theme="light"] .browser-go-btn:hover,
+[data-theme="light"] .browser-refresh-btn:hover {
+    background: #F5F5F5;
+    border-color: #007AFF;
+}
+
+.browser-go-btn:active,
+.browser-refresh-btn:active {
+    transform: scale(0.95);
+}
+
+.browser-iframe {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: #FFFFFF;
+}

package/src/server/views/css/tool-window.css

@@ -265,3 +265,73 @@
 [data-theme="light"] .tool-panel-content::-webkit-scrollbar-thumb:hover {
     background: rgba(0, 0, 0, 0.3);
 }
+
+/* Right Tool Window Bar - IDE-Style Sidebar */
+.tool-window-bar-right {
+    width: 48px;
+    height: 100%;
+    background: #2B2D30;
+    border-left: 1px solid #1E1F22;
+    border-right: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 0;
+    gap: 4px;
+    flex-shrink: 0;
+    z-index: 100;
+}
+
+[data-theme="light"] .tool-window-bar-right {
+    background: #F2F2F2;
+    border-left: 1px solid #D1D1D1;
+    border-right: none;
+}
+
+/* Right Tool Window Icon Tooltips */
+.tool-window-bar-right .tool-window-icon::after {
+    left: auto;
+    right: 52px;
+}
+
+/* Right Resize Handler */
+.resize-handler-right {
+    width: 4px;
+    cursor: ew-resize;
+    background: transparent;
+    position: relative;
+    transition: background 0.15s ease;
+    flex-shrink: 0;
+}
+
+.resize-handler-right:hover {
+    background: rgba(78, 132, 232, 0.3);
+}
+
+[data-theme="light"] .resize-handler-right:hover {
+    background: rgba(0, 122, 255, 0.2);
+}
+
+/* Right Tool Panel Container */
+.tool-panel-container-right {
+    width: 0;
+    height: 100%;
+    background: #2B2D30;
+    border-left: 1px solid #1E1F22;
+    border-right: none;
+    overflow: hidden;
+    transition: width 0.25s ease;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 99;
+}
+
+[data-theme="light"] .tool-panel-container-right {
+    background: #F7F7F7;
+    border-left: 1px solid #D1D1D1;
+    border-right: none;
+}
+
+.tool-panel-container-right.expanded {
+    width: 520px;
+}

package/src/server/views/dashboard.css

@@ -44,6 +44,9 @@
     height: 100% !important;
     opacity: 1 !important;
 }
+#vg-app-root.visible .vg-bubble { 
+   display: none !important; 
+}
 
 /* Main Layout */
 .split-layout { display: flex; height: 100%; width: 100%; flex-direction: row; }

package/src/server/views/dashboard.html

@@ -110,6 +110,59 @@
                 </div>
             </div>
         </div>
+
+        <div id="resize-handler-right" class="resize-handler resize-handler-right"></div>
+
+        <!-- RIGHT TOOL PANEL CONTAINER (Expandable Panels) -->
+        <div id="tool-panel-container-right" class="tool-panel-container tool-panel-container-right">
+            <!-- Agent Panel -->
+            <div id="tool-panel-agent" class="tool-panel">
+                <div class="tool-panel-header">
+                    <div class="tool-panel-title">
+                        <span>🤖</span>
+                        <span>Agent</span>
+                    </div>
+                    <div class="tool-panel-actions">
+                        <button class="tool-panel-action-btn" onclick="window.closeToolPanelsRight()" title="Close">✕</button>
+                    </div>
+                </div>
+                <div id="agent-panel-content" class="tool-panel-content">
+                    <!-- Agent panel content will be rendered here -->
+                </div>
+            </div>
+
+            <!-- Browser Panel -->
+            <div id="tool-panel-browser" class="tool-panel">
+                <div class="tool-panel-header">
+                    <div class="tool-panel-title">
+                        <span>🌐</span>
+                        <span>Browser</span>
+                    </div>
+                    <div class="tool-panel-actions">
+                        <button class="tool-panel-action-btn" onclick="window.closeToolPanelsRight()" title="Close">✕</button>
+                    </div>
+                </div>
+                <div id="browser-panel-content" class="tool-panel-content">
+                    <!-- Browser panel content will be rendered here -->
+                </div>
+            </div>
+        </div>
+
+        <!-- RIGHT TOOL WINDOW BAR (IDE-Style Sidebar) -->
+        <div id="tool-window-bar-right" class="tool-window-bar tool-window-bar-right">
+            <button class="tool-window-icon" data-panel="agent" data-tooltip="Agent" title="Agent">
+                🤖
+            </button>
+            <button class="tool-window-icon" data-panel="browser" data-tooltip="Browser" title="Browser">
+                🌐
+            </button>
+            
+            <!-- Spacer to push exit button to bottom -->
+            <div class="tool-window-spacer"></div>
+            
+            <!-- Exit Button -->
+            <button class="tool-window-action-btn" id="exit-dashboard-btn" title="Close Dashboard (Cmd+3)">✕</button>
+        </div>
     </div>
 
     <!-- Modals & Overlays -->