Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

vg-coder-cli

Package Overview
Dependencies
Maintainers
1
Versions
106
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vg-coder-cli - npm Package Compare versions

Comparing version
1.0.11
 to
1.0.12
+1
-1
package.json
{
"name": "vg-coder-cli",
"version": "1.0.11",
"version": "1.0.12",
"description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",

@@ -5,0 +5,0 @@ "main": "src/index.js",

+274
-17
src/server/views/dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>

@@ -31,3 +32,3 @@ <meta charset="UTF-8">

margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@@ -66,3 +67,3 @@

padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;

@@ -89,6 +90,17 @@ }

.method.get { background: #3b82f6; color: white; }
.method.post { background: #10b981; color: white; }
.method.delete { background: #ef4444; color: white; }
.method.get {
background: #3b82f6;
color: white;
}
.method.post {
background: #10b981;
color: white;
}
.method.delete {
background: #ef4444;
color: white;
}
.endpoint-path {

@@ -188,3 +200,3 @@ font-family: 'Courier New', monospace;

height: 16px;
border: 3px solid rgba(255,255,255,.3);
border: 3px solid rgba(255, 255, 255, .3);
border-radius: 50%;

@@ -196,6 +208,81 @@ border-top-color: white;

@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.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;
}
.btn-copy {
background: #10b981;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-copy:hover {
background: #059669;
}
.btn-copy.copied {
background: #6366f1;
}
</style>
</head>
<body>

@@ -209,2 +296,20 @@ <div class="container">

<!-- System Prompt Section -->
<div class="system-prompt-card">
<div class="system-prompt-header" onclick="toggleSystemPrompt()">
<h2>
<span>📝</span>
<span>AI System Prompt</span>
</h2>
<span class="toggle-icon" id="toggle-icon">▼</span>
</div>
<div class="system-prompt-content" id="system-prompt-content">
<div class="prompt-text" id="prompt-text"></div>
<button class="btn btn-copy" onclick="copySystemPrompt()">
<span id="copy-icon">📋</span>
<span id="copy-text">Copy System Prompt</span>
</button>
</div>
</div>
<div class="endpoints">

@@ -324,3 +429,3 @@ <!-- Health Check -->

const maxTokens = document.getElementById('analyze-tokens').value;
showLoading(btn);

@@ -331,4 +436,4 @@ try {

headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
path,
body: JSON.stringify({
path,
options: { maxTokens: parseInt(maxTokens) }

@@ -359,3 +464,3 @@ })

const path = document.getElementById('info-path').value;
showLoading(btn);

@@ -375,3 +480,3 @@ try {

const bash = document.getElementById('execute-bash').value;
if (!bash.trim()) {

@@ -400,3 +505,3 @@ showResponse('execute-response', { error: 'Bash script is required' }, true);

const output = document.getElementById('clean-output').value;
showLoading(btn);

@@ -417,9 +522,160 @@ try {

// Check server status periodically
setInterval(async () => {
// System Prompt
const SYSTEM_PROMPT = `# 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`;
// Load system prompt on page load
document.getElementById('prompt-text').textContent = SYSTEM_PROMPT;
function toggleSystemPrompt() {
const content = document.getElementById('system-prompt-content');
const icon = document.getElementById('toggle-icon');
content.classList.toggle('open');
icon.classList.toggle('open');
}
function copySystemPrompt() {
const copyBtn = event.target.closest('.btn-copy');
const copyIcon = document.getElementById('copy-icon');
const copyText = document.getElementById('copy-text');
navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
copyBtn.classList.add('copied');
copyIcon.textContent = '✓';
copyText.textContent = 'Copied!';
setTimeout(() => {
copyBtn.classList.remove('copied');
copyIcon.textContent = '📋';
copyText.textContent = 'Copy System Prompt';
}, 2000);
}).catch(err => {
alert('Failed to copy: ' + err.message);
});
}
// Check server status ONCE on page load
(async () => {
try {
const res = await fetch(`${API_BASE}/health`);
if (res.ok) {
const data = await res.json();
document.getElementById('status').textContent = '● Server Running';
document.getElementById('status').style.background = '#10b981';
// Auto-show health check result
showResponse('health-response', data);
}

@@ -430,5 +686,6 @@ } catch {

}
}, 5000);
})();
</script>
</body>
</html>
</html>