vg-coder-cli 1.0.16 → 2.0.0

package/SYSTEM_PROMPT.md

@@ -0,0 +1,157 @@
+# VG Coder AI System Prompt
+
+## Command Prefixes
+
+### `/ask` - Question & Answer Mode
+Khi người dùng hỏi với prefix `/ask`, họ đang muốn tìm hiểu hoặc được giải thích về một vấn đề.
+
+**Response Format:** Markdown
+- Trả lời chi tiết, rõ ràng
+- Sử dụng code blocks, lists, tables khi cần
+- Cung cấp ví dụ minh họa
+
+**Example:**
+```
+/ask Làm sao để tối ưu React component?
+```
+
+---
+
+### `/plan` - Planning Mode
+Khi người dùng muốn lên kế hoạch với prefix `/plan`, tạo một implementation plan chi tiết.
+
+**Response Format:** Markdown checklist với bash commands
+- Chia nhỏ thành các bước cụ thể
+- Mỗi bước có bash command tương ứng
+- Sắp xếp theo thứ tự logic
+
+**Example:**
+```markdown
+## Implementation Plan
+
+- [ ] **Step 1:** Create component structure
+  ```bash
+  mkdir -p src/components/UserProfile
+  ```
+
+- [ ] **Step 2:** Create component files
+  ```bash
+  touch src/components/UserProfile/index.tsx
+  touch src/components/UserProfile/styles.css
+  ```
+
+- [ ] **Step 3:** Implement component logic
+  ...
+```
+
+---
+
+### `/fix` - Bug Fix Mode
+Khi người dùng cần fix bug với prefix `/fix`, phân tích lỗi và đưa ra giải pháp.
+
+**Response Format:** Markdown + Bash script
+1. **Phân tích lỗi:** Giải thích nguyên nhân
+2. **Giải pháp:** Mô tả cách fix
+3. **Bash script:** Code để fix (nếu cần)
+
+**Example:**
+```markdown
+## Bug Analysis
+Lỗi xảy ra do missing dependency...
+
+## Solution
+Cần cài đặt package và cập nhật import...
+
+## Fix Script
+\`\`\`bash
+mkdir -p $(dirname "src/utils/helper.ts")
+cat <<'EOF' > src/utils/helper.ts
+// Fixed code here
+EOF
+\`\`\`
+```
+
+---
+
+### `/code` - Code Generation Mode
+Khi người dùng hỏi với prefix `/code`, trả về **BASH SCRIPT DUY NHẤT** để tạo/cập nhật files.
+
+## ⚠️ QUY TẮC BẮT BUỘC
+
+### 1. Chỉ bao gồm files có thay đổi
+- ❌ **KHÔNG** bao gồm files không có sự thay đổi nội dung
+- ✅ Nếu nội dung file sau chỉnh sửa giống 100% bản cũ → **BỎ QUA**
+
+### 2. Format Script Chuẩn
+
+**Mỗi file PHẢI theo cú pháp:**
+```bash
+mkdir -p $(dirname "path/to/file.ext")
+cat <<'EOF' > path/to/file.ext
+... toàn bộ nội dung file sau khi chỉnh sửa ...
+EOF
+```
+
+### 3. Chi tiết quan trọng
+- ✅ **LUÔN** có `mkdir -p $(dirname "...")` trước mỗi file
+- ✅ Sử dụng `<<'EOF'` (có dấu nháy đơn) để tránh bash expansion
+- ✅ Ghi đè hoàn toàn file bằng nội dung mới
+- ✅ Tự động tạo file và thư mục cha nếu chưa tồn tại
+- ✅ Đường dẫn giống với file mẫu đính kèm
+
+### 4. Example Output
+
+```bash
+# Create/Update component file
+mkdir -p $(dirname "src/components/Button/index.tsx")
+cat <<'EOF' > src/components/Button/index.tsx
+import React from 'react';
+
+export const Button = () => {
+  return <button>Click me</button>;
+};
+EOF
+
+# Create/Update styles
+mkdir -p $(dirname "src/components/Button/styles.css")
+cat <<'EOF' > src/components/Button/styles.css
+.button {
+  padding: 10px 20px;
+  background: blue;
+}
+EOF
+```
+
+---
+
+## Integration với VG Coder CLI
+
+Bash scripts được generate sẽ được thực thi qua:
+```bash
+POST http://localhost:6868/api/execute
+{
+  "bash": "mkdir -p $(dirname \"src/...\")\\ncat <<'EOF' > ..."
+}
+```
+
+API sẽ:
+1. ✅ Validate bash syntax trong `.vg/temp-execute`
+2. ✅ Execute tại working directory nếu syntax OK
+3. ✅ Trả về stdout/stderr/exitCode
+4. ✅ Auto cleanup temp directory
+
+---
+
+## Best Practices
+
+### DO ✅
+- Luôn dùng `mkdir -p $(dirname "...")` trước mỗi file
+- Sử dụng `<<'EOF'` để tránh variable expansion
+- Ghi đè toàn bộ nội dung file
+- Chỉ include files có thay đổi thực sự
+
+### DON'T ❌
+- Không tạo file mà không tạo thư mục cha
+- Không dùng `<<EOF` (thiếu quotes) nếu có `$` trong content
+- Không include files không thay đổi
+- Không dùng relative paths phức tạp

package/init-nx-monorepo.sh

@@ -0,0 +1,107 @@
+#!/bin/bash
+
+# Dừng script ngay lập tức nếu có lỗi
+set -e
+
+echo "🚀 Bắt đầu khởi tạo template Nx (Angular + NestJS)..."
+echo "---------------------------------------------------------"
+
+# Bước 1: Lấy tên workspace từ người dùng
+read -p "Tên workspace của bạn là gì? (ví dụ: my-monorepo): " WORKSPACE_NAME
+
+# Kiểm tra nếu tên workspace bị trống
+if [ -z "$WORKSPACE_NAME" ]; then
+  echo "❌ Tên workspace không được để trống! Đã hủy."
+  exit 1
+fi
+
+echo "---------------------------------------------------------"
+echo "🔧 Đang tạo workspace: $WORKSPACE_NAME"
+echo "(Sử dụng preset=ts và --workspaces=false để tương thích với Angular)"
+
+# Bước 2: Tạo Nx Workspace
+npx create-nx-workspace@latest "$WORKSPACE_NAME" --preset=ts --workspaces=false --skip-nx-cloud --no-interactive
+
+# Di chuyển vào thư mục workspace vừa tạo
+cd "$WORKSPACE_NAME"
+
+echo "✅ Workspace $WORKSPACE_NAME đã được tạo."
+echo "---------------------------------------------------------"
+
+# Bước 3: Thêm NestJS
+echo "📦 Đang cài đặt và cấu hình NestJS..."
+npm install --save-dev @nx/nest
+nx g @nx/nest:app --name=api --directory=apps/api --tags="scope:server,type:app" --no-interactive
+
+echo "---------------------------------------------------------"
+
+# Bước 4: Thêm Angular
+echo "📦 Đang cài đặt và cấu hình Angular..."
+npm install --save-dev @nx/angular
+nx g @nx/angular:app --name=ng-app --directory=apps/ng-app --tags="scope:client,type:app" --e2eTestRunner=none --style=scss --no-interactive
+
+echo "---------------------------------------------------------"
+
+# Bước 5: Tạo Thư viện Chung (JS/TS)
+echo "📚 Đang tạo thư viện chung 'data-types'..."
+npm install --save-dev @nx/js
+nx g @nx/js:library --name=data-types --directory=packages/shared/data-types --tags="scope:shared,type:lib" --no-interactive
+
+echo "---------------------------------------------------------"
+
+# Bước 6: Tạo Thư viện Data Access (Angular)
+echo "📚 Đang tạo thư viện 'data-access' cho Angular..."
+nx g @nx/angular:library --name=data-access --directory=packages/client/data-access --tags="scope:client,type:lib" --style=scss  --no-interactive
+
+echo "---------------------------------------------------------"
+
+# Bước 7: TỰ ĐỘNG TẠO FILE PROXY.CONF.JSON (ĐÃ SỬA)
+echo "🔗 Đang tạo file 'apps/ng-app/proxy.conf.json'..."
+
+cat <<EOF > apps/ng-app/proxy.conf.json
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "logLevel": "debug"
+  }
+}
+EOF
+
+echo "✅ File 'proxy.conf.json' đã được tạo."
+echo "---------------------------------------------------------"
+echo "🎉 HOÀN TẤT (với 2 bước thủ công)!"
+echo "---------------------------------------------------------"
+echo ""
+echo "‼️ YÊU CẦU HÀNH ĐỘNG THỦ CÔNG (2 BƯỚC) ‼️"
+echo "Script đã tạo file 'proxy.conf.json', nhưng bạn cần kết nối nó với 'ng-app'."
+echo ""
+echo "👉 Mở file: ./$WORKSPACE_NAME/apps/ng-app/project.json"
+echo ""
+echo "1. Thêm 'proxyConfig' vào target 'serve' (trong 'options'):"
+echo '
+  "serve": {
+    "executor": "@nx/angular:dev-server",
+    "options": {
+      "proxyConfig": "apps/ng-app/proxy.conf.json" <-- THÊM DÒNG NÀY
+    },
+'
+echo ""
+echo "2. Thêm 'dependsOn' vào target 'serve' (để tự động chạy API):"
+echo '
+  "serve": {
+    ...
+    "defaultConfiguration": "development",
+    "dependsOn": [  <-- THÊM KHỐI NÀY
+      {
+        "target": "serve",
+        "projects": "api"
+      }
+    ]
+  },
+'
+echo ""
+echo "Sau khi hoàn tất 2 bước trên, bạn có thể chạy:"
+echo "nx serve ng-app"
+
+# ulimit -n 10240 &&  ./init-nx-monorepo.sh

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vg-coder-cli",
-  "version": "1.0.16",
-  "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
+  "version": "2.0.0",
+  "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting. Now with modern NestJS API and Angular dashboard!",
   "main": "src/index.js",
   "bin": {
     "vg": "./bin/vg.js",
@@ -12,7 +12,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "dev": "nodemon src/index.js",
-    "push": "npm pack && npm publish"
+    "push": "npm pack && npm publish",
+    "build:vg": "cd vg && nx run-many --target=build --all --configuration=production",
+    "start:vg": "cd vg && ./start-dev.sh"
   },
   "keywords": [
     "cli",
@@ -31,7 +33,12 @@
     "vue",
     "java",
     "javascript",
-    "typescript"
+    "typescript",
+    "nestjs",
+    "nx-monorepo",
+    "modern-stack",
+    "api-server",
+    "dashboard"
   ],
   "author": "VG Coder",
   "license": "MIT",

package/src/server/api-server.js

@@ -237,8 +237,13 @@ class ApiServer {
           console.log(chalk.green(`✓ Bash execution completed in ${result.executionTime}ms`));
           res.json(result);
         } else {
+          // Check if it's a syntax error
+          const isSyntaxError = result.error === 'Syntax validation failed';
           console.log(chalk.red(`✗ Bash execution failed: ${result.error || 'Exit code ' + result.exitCode}`));
-          res.status(400).json(result);
+          res.status(400).json({
+            ...result,
+            syntaxError: isSyntaxError
+          });
         }
 
       } catch (error) {

package/src/server/views/dashboard.html

@@ -383,10 +383,16 @@
                     <textarea id="execute-bash"
                         placeholder="mkdir -p $(dirname &quot;src/test.js&quot;)&#10;cat <<'EOF' > src/test.js&#10;console.log('Hello World');&#10;EOF"></textarea>
                 </div>
-                <button class="btn" onclick="testExecute()">
-                    <span>▶️</span>
-                    <span>Execute Script</span>
-                </button>
+                <div class="btn-group">
+                    <button class="btn" onclick="testExecute()">
+                        <span>▶️</span>
+                        <span>Execute Script</span>
+                    </button>
+                    <button class="btn" onclick="executeFromClipboard()">
+                        <span>📋</span>
+                        <span>Execute from Clipboard</span>
+                    </button>
+                </div>
                 <div class="response" id="execute-response"></div>
             </div>
         </div>
@@ -776,6 +782,65 @@ API sẽ:
             resetButton(btn);
         }
 
+        async function executeFromClipboard() {
+            const btn = event.target.closest('.btn');
+
+            showLoading(btn, '<span>📋</span><span>Execute from Clipboard</span>');
+
+            try {
+                // Read from clipboard
+                const clipboardText = await navigator.clipboard.readText();
+
+                // Check if clipboard is empty
+                if (!clipboardText || !clipboardText.trim()) {
+                    showToast('⚠️ Clipboard trống! Vui lòng copy bash script trước.', 'error');
+                    showResponse('execute-response', {
+                        error: 'Clipboard is empty',
+                        message: 'Please copy a bash script to clipboard first'
+                    }, true);
+                    resetButton(btn);
+                    return;
+                }
+
+                // Display clipboard content in textarea for reference
+                document.getElementById('execute-bash').value = clipboardText;
+
+                // Execute the script (API will validate syntax first)
+                const res = await fetch(`${API_BASE}/api/execute`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ bash: clipboardText })
+                });
+                const data = await res.json();
+                showResponse('execute-response', data, !res.ok || !data.success);
+
+                if (data.success) {
+                    showToast('✅ Thực thi từ clipboard thành công!', 'success');
+                } else {
+                    // Check if it's a syntax error
+                    if (data.syntaxError) {
+                        showToast('❌ Lỗi syntax! Kiểm tra bash script.', 'error');
+                    } else {
+                        showToast('❌ Thực thi thất bại!', 'error');
+                    }
+                }
+            } catch (err) {
+                // Handle clipboard permission errors
+                if (err.name === 'NotAllowedError') {
+                    showToast('❌ Không có quyền truy cập clipboard!', 'error');
+                    showResponse('execute-response', {
+                        error: 'Clipboard permission denied',
+                        message: 'Please allow clipboard access in your browser settings'
+                    }, true);
+                } else {
+                    showResponse('execute-response', { error: err.message }, true);
+                    showToast('❌ Lỗi: ' + err.message, 'error');
+                }
+            }
+            resetButton(btn);
+        }
+
+
         function showToast(message, type = 'success') {
             const toast = document.getElementById('toast');
             toast.textContent = message;

package/vg/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "firsttris.vscode-jest-runner"
+  ]
+}

package/vg/.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug api with Nx",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["nx", "serve", "api"],
+      "env": {
+        "NODE_OPTIONS": "--inspect=9229"
+      },
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceFolder}/apps/api/dist/**/*.(m|c|)js",
+        "!**/node_modules/**"
+      ]
+    }
+  ]
+}

package/vg/README.md

@@ -0,0 +1,85 @@
+# VG Coder - NestJS/Angular Upgrade
+
+## Quick Start
+
+### Start Both Applications
+```bash
+cd vg
+nx run-many --target=serve --projects=api,ng-app
+```
+
+This will start:
+- **API Backend** on `http://localhost:3000`
+- **Angular Dashboard** on `http://localhost:4200`
+
+### Start Individually
+
+**Backend only:**
+```bash
+cd vg
+nx serve api
+```
+
+**Frontend only:**
+```bash
+cd vg
+nx serve ng-app
+```
+
+## Project Structure
+
+```
+vg/
+├── apps/
+│   ├── api/              # NestJS backend
+│   └── ng-app/           # Angular frontend
+└── packages/
+    └── core/             # Shared TypeScript library
+```
+
+## Available Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/analyze` | POST | Analyze project and return source code |
+| `/api/execute` | POST | Execute bash scripts with validation |
+| `/api/info` | GET | Get project information and statistics |
+| `/api/clean` | DELETE | Clean output directories |
+
+## Development
+
+### Build All
+```bash
+nx run-many --target=build --all
+```
+
+### Build Specific Project
+```bash
+nx build core
+nx build api
+nx build ng-app
+```
+
+### Test
+```bash
+nx test core
+nx test api
+nx test ng-app
+```
+
+## Architecture
+
+- **Core Library** (`@vg/core`): Shared business logic
+  - ProjectDetector
+  - FileScanner
+  - TokenManager
+  - BashExecutor
+  - IgnoreManager
+
+- **API Backend**: NestJS REST API with controllers and services
+- **Frontend**: Angular standalone components with reactive forms
+
+## Configuration
+
+- **Proxy**: Angular dev server proxies `/api` requests to `http://localhost:3000`
+- **CORS**: NestJS allows requests from `http://localhost:4200`

package/vg/apps/api/project.json

@@ -0,0 +1,83 @@
+{
+  "name": "api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/api/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx webpack-cli build",
+        "args": [
+          "--node-env=production"
+        ],
+        "cwd": "apps/api"
+      },
+      "configurations": {
+        "development": {
+          "args": [
+            "--node-env=development"
+          ]
+        }
+      }
+    },
+    "prune-lockfile": {
+      "dependsOn": [
+        "build"
+      ],
+      "cache": true,
+      "executor": "@nx/js:prune-lockfile",
+      "outputs": [
+        "{workspaceRoot}/dist/apps/api/package.json",
+        "{workspaceRoot}/dist/apps/api/package-lock.json"
+      ],
+      "options": {
+        "buildTarget": "build"
+      }
+    },
+    "copy-workspace-modules": {
+      "dependsOn": [
+        "build"
+      ],
+      "cache": true,
+      "outputs": [
+        "{workspaceRoot}/dist/apps/api/workspace_modules"
+      ],
+      "executor": "@nx/js:copy-workspace-modules",
+      "options": {
+        "buildTarget": "build"
+      }
+    },
+    "prune": {
+      "dependsOn": [
+        "prune-lockfile",
+        "copy-workspace-modules"
+      ],
+      "executor": "nx:noop"
+    },
+    "serve": {
+      "continuous": true,
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": [
+        "build"
+      ],
+      "options": {
+        "buildTarget": "api:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "api:build:development"
+        },
+        "production": {
+          "buildTarget": "api:build:production"
+        }
+      }
+    }
+  },
+  "tags": [
+    "scope:server",
+    "type:app"
+  ]
+}

package/vg/apps/api/src/app/analyze.controller.ts

@@ -0,0 +1,17 @@
+import { Controller, Post, Body, Res } from '@nestjs/common';
+import { Response } from 'express';
+import { AnalyzeService } from './analyze.service';
+
+@Controller('analyze')
+export class AnalyzeController {
+    constructor(private readonly analyzeService: AnalyzeService) { }
+
+    @Post()
+    async analyze(@Body() body: { path: string; options?: any }, @Res() res: Response) {
+        const content = await this.analyzeService.analyzeProject(body.path, body.options);
+
+        res.setHeader('Content-Type', 'text/plain; charset=utf-8');
+        res.setHeader('Content-Disposition', 'attachment; filename="project.txt"');
+        res.send(content);
+    }
+}

package/vg/apps/api/src/app/analyze.service.ts

@@ -0,0 +1,57 @@
+import { Injectable, BadRequestException, NotFoundException, InternalServerErrorException, Logger } from '@nestjs/common';
+import { ProjectDetector, FileScanner } from '@vg/core';
+import * as path from 'path';
+import * as fs from 'fs-extra';
+
+@Injectable()
+export class AnalyzeService {
+    private readonly logger = new Logger(AnalyzeService.name);
+
+    async analyzeProject(projectPath: string, options: any = {}) {
+        try {
+            if (!projectPath) {
+                throw new BadRequestException('Missing required field: path');
+            }
+
+            const resolvedPath = path.resolve(projectPath);
+
+            // Validate project path
+            if (!await fs.pathExists(resolvedPath)) {
+                throw new NotFoundException(`Project path does not exist: ${projectPath}`);
+            }
+
+            this.logger.log(`Analyzing project: ${resolvedPath}`);
+
+            // Detect project type (optional, but good for logging)
+            const detector = new ProjectDetector(resolvedPath);
+            await detector.detectAll();
+
+            // Scan files
+            const scannerOptions = {
+                extensions: options.extensions ? options.extensions.split(',').map((ext: string) => ext.trim()) : undefined,
+                includeHidden: options.includeHidden || false
+            };
+
+            const scanner = new FileScanner(resolvedPath, scannerOptions);
+            const scanResult = await scanner.scanProject();
+
+            // Create AI-friendly content
+            const aiContent = await scanner.createCombinedContentForAI(scanResult.files, {
+                includeStats: true,
+                includeTree: true,
+                preserveLineNumbers: true
+            });
+
+            this.logger.log(`✓ Analysis completed: ${scanResult.files.length} files`);
+
+            return aiContent;
+
+        } catch (error: any) {
+            this.logger.error('Error during analysis:', error);
+            if (error instanceof BadRequestException || error instanceof NotFoundException) {
+                throw error;
+            }
+            throw new InternalServerErrorException(error.message || 'Analysis failed');
+        }
+    }
+}