vg-coder-cli 2.0.3 → 2.0.5

package/vg/apps/ng-app/src/app/dashboard/dashboard.component.html

@@ -1,87 +0,0 @@
-<div class="container">
-    <div class="header">
-        <h1>🚀 VG Coder API Dashboard</h1>
-        <p>Phân tích dự án và thực thi bash scripts</p>
-        <span class="status" id="status">● Server Running</span>
-    </div>
-
-    <!-- System Prompt Section -->
-    <div class="system-prompt-card">
-        <div class="system-prompt-header" (click)="toggleSystemPrompt()">
-            <h2>
-                <span>📝</span>
-                <span>AI System Prompt</span>
-            </h2>
-            <span class="toggle-icon" [class.open]="isPromptOpen">▼</span>
-        </div>
-        <div class="system-prompt-content" [class.open]="isPromptOpen">
-            <div class="prompt-text">{{ systemPrompt }}</div>
-            <button class="btn btn-copy" (click)="copySystemPrompt()">
-                <span>📋</span>
-                <span>Copy System Prompt</span>
-            </button>
-        </div>
-    </div>
-
-    <div class="endpoints">
-        <!-- Analyze -->
-        <div class="endpoint-card">
-            <div class="endpoint-header">
-                <span class="method post">POST</span>
-                <span class="endpoint-path">/api/analyze</span>
-            </div>
-            <p class="endpoint-desc">📊 Phân tích dự án và lấy toàn bộ source code</p>
-            <div class="form-group">
-                <label>📁 Project Path:</label>
-                <input type="text" [(ngModel)]="analyzePath" placeholder=".">
-            </div>
-            <div class="btn-group">
-                <button class="btn" (click)="analyze()" [disabled]="analyzeLoading">
-                    <span *ngIf="!analyzeLoading">📥</span>
-                    <span *ngIf="analyzeLoading" class="loading"></span>
-                    <span>{{ analyzeLoading ? 'Loading...' : 'Download File' }}</span>
-                </button>
-                <button class="btn btn-copy" (click)="copyAnalyzeResult()">
-                    <span>📋</span>
-                    <span>Copy to Clipboard</span>
-                </button>
-            </div>
-            <div class="response" *ngIf="analyzeResult" [class.success]="true">
-                <pre>{{ analyzeResult | slice:0:500 }}...</pre>
-            </div>
-        </div>
-
-        <!-- Execute Bash -->
-        <div class="endpoint-card">
-            <div class="endpoint-header">
-                <span class="method post">POST</span>
-                <span class="endpoint-path">/api/execute</span>
-            </div>
-            <p class="endpoint-desc">⚡ Thực thi bash script với syntax validation</p>
-            <div class="form-group">
-                <label>💻 Bash Script:</label>
-                <textarea [(ngModel)]="bashScript"
-                    placeholder="mkdir -p $(dirname &quot;src/test.js&quot;)&#10;cat <<'EOF' > src/test.js&#10;console.log('Hello World');&#10;EOF"></textarea>
-            </div>
-            <div class="btn-group">
-                <button class="btn" (click)="execute()" [disabled]="executeLoading">
-                    <span *ngIf="!executeLoading">▶️</span>
-                    <span *ngIf="executeLoading" class="loading"></span>
-                    <span>{{ executeLoading ? 'Executing...' : 'Execute Script' }}</span>
-                </button>
-                <button class="btn" (click)="executeFromClipboard()" [disabled]="executeLoading">
-                    <span>📋</span>
-                    <span>Execute from Clipboard</span>
-                </button>
-            </div>
-            <div class="response" *ngIf="executeResult" [class.success]="executeResult.success"
-                [class.error]="!executeResult.success">
-                <pre>{{ executeResult | json }}</pre>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="toast" [class.show]="showToast" [ngClass]="toastType">
-    {{ toastMessage }}
-</div>

package/vg/apps/ng-app/src/app/dashboard/dashboard.component.scss

@@ -1,290 +0,0 @@
-.container {
-    max-width: 1000px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-.header {
-    background: white;
-    border-radius: 12px;
-    padding: 30px;
-    margin-bottom: 30px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-}
-
-.header h1 {
-    color: #667eea;
-    font-size: 2.5em;
-    margin-bottom: 10px;
-}
-
-.header p {
-    color: #666;
-    font-size: 1.1em;
-}
-
-.status {
-    display: inline-block;
-    padding: 8px 16px;
-    background: #10b981;
-    color: white;
-    border-radius: 20px;
-    font-size: 0.9em;
-    margin-top: 10px;
-}
-
-.system-prompt-card {
-    background: white;
-    border-radius: 12px;
-    padding: 25px;
-    margin-bottom: 30px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-}
-
-.system-prompt-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 15px;
-    cursor: pointer;
-    user-select: none;
-}
-
-.system-prompt-header h2 {
-    color: #667eea;
-    font-size: 1.5em;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.toggle-icon {
-    transition: transform 0.3s ease;
-}
-
-.toggle-icon.open {
-    transform: rotate(180deg);
-}
-
-.system-prompt-content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-}
-
-.system-prompt-content.open {
-    max-height: 2000px;
-}
-
-.prompt-text {
-    background: #f9fafb;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 20px;
-    font-family: 'Courier New', monospace;
-    font-size: 0.9em;
-    line-height: 1.6;
-    white-space: pre-wrap;
-    max-height: 400px;
-    overflow-y: auto;
-    margin-bottom: 15px;
-}
-
-.endpoints {
-    display: grid;
-    gap: 20px;
-}
-
-.endpoint-card {
-    background: white;
-    border-radius: 12px;
-    padding: 30px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-}
-
-.endpoint-header {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-bottom: 20px;
-}
-
-.method {
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-weight: bold;
-    font-size: 0.9em;
-}
-
-.method.post {
-    background: #10b981;
-    color: white;
-}
-
-.endpoint-path {
-    font-family: 'Courier New', monospace;
-    color: #333;
-    font-size: 1.2em;
-    font-weight: 600;
-}
-
-.endpoint-desc {
-    color: #666;
-    margin-bottom: 20px;
-    line-height: 1.6;
-    font-size: 1.05em;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: #333;
-    font-weight: 600;
-    font-size: 1em;
-}
-
-.form-group input,
-.form-group textarea {
-    width: 100%;
-    padding: 12px;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 1em;
-    font-family: 'Courier New', monospace;
-    transition: border-color 0.3s ease;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-    outline: none;
-    border-color: #667eea;
-}
-
-.form-group textarea {
-    min-height: 150px;
-    resize: vertical;
-}
-
-.btn-group {
-    display: flex;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.btn {
-    background: #667eea;
-    color: white;
-    border: none;
-    padding: 14px 28px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1em;
-    font-weight: 600;
-    transition: all 0.3s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.btn:hover {
-    background: #5568d3;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-.btn:disabled {
-    background: #9ca3af;
-    cursor: not-allowed;
-    transform: none;
-}
-
-.btn-copy {
-    background: #10b981;
-}
-
-.btn-copy:hover {
-    background: #059669;
-    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
-}
-
-.btn-copy.copied {
-    background: #6366f1;
-}
-
-.response {
-    margin-top: 20px;
-    padding: 20px;
-    border-radius: 8px;
-    background: #f9fafb;
-    border-left: 4px solid #667eea;
-}
-
-.response.success {
-    border-left-color: #10b981;
-    background: #f0fdf4;
-}
-
-.response.error {
-    border-left-color: #ef4444;
-    background: #fef2f2;
-}
-
-.response pre {
-    margin: 0;
-    font-family: 'Courier New', monospace;
-    font-size: 0.95em;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-.loading {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border: 3px solid rgba(255, 255, 255, .3);
-    border-radius: 50%;
-    border-top-color: white;
-    animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 16px 24px;
-    border-radius: 8px;
-    color: white;
-    font-weight: 600;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transform: translateY(-20px);
-    transition: all 0.3s ease;
-    z-index: 1000;
-}
-
-.toast.show {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.toast.success {
-    background: #10b981;
-}
-
-.toast.error {
-    background: #ef4444;
-}
-
-.toast.info {
-    background: #3b82f6;
-}

package/vg/apps/ng-app/src/app/dashboard/dashboard.component.ts

@@ -1,236 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { ApiService } from '../services/api.service';
-
-@Component({
-    selector: 'app-dashboard',
-    standalone: true,
-    imports: [CommonModule, FormsModule],
-    templateUrl: './dashboard.component.html',
-    styleUrls: ['./dashboard.component.scss']
-})
-export class DashboardComponent implements OnInit {
-    systemPrompt = '';
-    isPromptOpen = false;
-    analyzePath = '.';
-    analyzeResult: string | null = null;
-    analyzeLoading = false;
-
-    bashScript = '';
-    executeResult: any = null;
-    executeLoading = false;
-
-    toastMessage = '';
-    toastType = 'success';
-    showToast = false;
-
-    constructor(private apiService: ApiService) { }
-
-    ngOnInit() {
-        this.systemPrompt = `# 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
-
----
-
-### /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
-
----
-
-### /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)
-
----
-
-### /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`;
-    }
-
-    toggleSystemPrompt() {
-        this.isPromptOpen = !this.isPromptOpen;
-    }
-
-    copySystemPrompt() {
-        navigator.clipboard.writeText(this.systemPrompt).then(() => {
-            this.showToastMessage('✅ Copied System Prompt!', 'success');
-        });
-    }
-
-    async analyze() {
-        this.analyzeLoading = true;
-        this.apiService.analyze(this.analyzePath).subscribe({
-            next: (res) => {
-                this.analyzeResult = res;
-                this.analyzeLoading = false;
-
-                // Download file
-                const blob = new Blob([res], { type: 'text/plain' });
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'project.txt';
-                a.click();
-
-                this.showToastMessage('✅ Analysis completed & downloaded!', 'success');
-            },
-            error: (err) => {
-                this.analyzeLoading = false;
-                this.showToastMessage('❌ Analysis failed: ' + err.message, 'error');
-            }
-        });
-    }
-
-    copyAnalyzeResult() {
-        if (this.analyzeResult) {
-            navigator.clipboard.writeText(this.analyzeResult).then(() => {
-                this.showToastMessage('✅ Copied project.txt!', 'success');
-            });
-        }
-    }
-
-    async execute() {
-        if (!this.bashScript.trim()) return;
-
-        this.executeLoading = true;
-        this.apiService.execute(this.bashScript).subscribe({
-            next: (res) => {
-                this.executeResult = res;
-                this.executeLoading = false;
-                if (res.success) {
-                    this.showToastMessage('✅ Execution successful!', 'success');
-                } else {
-                    this.showToastMessage('❌ Execution failed!', 'error');
-                }
-            },
-            error: (err) => {
-                this.executeLoading = false;
-                this.executeResult = { error: err.message };
-                this.showToastMessage('❌ Execution error: ' + err.message, 'error');
-            }
-        });
-    }
-
-    async executeFromClipboard() {
-        try {
-            const text = await navigator.clipboard.readText();
-            if (!text.trim()) {
-                this.showToastMessage('⚠️ Clipboard is empty!', 'error');
-                return;
-            }
-
-            this.bashScript = text;
-            this.execute();
-        } catch (err: any) {
-            this.showToastMessage('❌ Clipboard error: ' + err.message, 'error');
-        }
-    }
-
-    showToastMessage(msg: string, type: 'success' | 'error' | 'info') {
-        this.toastMessage = msg;
-        this.toastType = type;
-        this.showToast = true;
-        setTimeout(() => {
-            this.showToast = false;
-        }, 3000);
-    }
-}