vg-coder-cli 2.0.7 → 2.0.8

package/src/server/views/js/handlers.js

@@ -0,0 +1,214 @@
+// Event Handlers & Business Logic
+import { SYSTEM_PROMPT } from './config.js';
+import { analyzeProject, executeScript, copyAsFile, copyToClipboard, readFromClipboard } from './api.js';
+import { showToast, showLoading, resetButton, showResponse, showCopiedState } from './utils.js';
+
+// State management
+let lastAnalyzeResult = null;
+
+/**
+ * Toggle system prompt section
+ */
+export function toggleSystemPrompt() {
+    const content = document.getElementById('system-prompt-content');
+    const icon = document.getElementById('toggle-icon');
+    content.classList.toggle('open');
+    icon.classList.toggle('open');
+}
+
+/**
+ * Copy system prompt from the Header Button
+ * Stops propagation so the accordion doesn't toggle
+ */
+export function copySystemPromptFromHeader(event) {
+    event.stopPropagation(); // Stop accordion from toggling
+    
+    // Animate button
+    const btn = event.currentTarget;
+    btn.textContent = '✓';
+    
+    navigator.clipboard.writeText(SYSTEM_PROMPT).then(() => {
+        showToast('Đã copy System Prompt', 'success');
+        setTimeout(() => {
+            btn.textContent = '📋';
+        }, 2000);
+    }).catch(err => {
+        showToast('Lỗi copy: ' + err.message, 'error');
+        btn.textContent = '📋';
+    });
+}
+
+/**
+ * Copy system prompt to clipboard (Main content button)
+ */
+export 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(() => {
+        showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy System Prompt');
+        showToast('Đã copy System Prompt', 'success');
+    }).catch(err => {
+        showToast('Lỗi copy: ' + err.message, 'error');
+    });
+}
+
+/**
+ * Handle analyze button click
+ */
+export async function testAnalyze() {
+    // Support both the big button .btn and the header icon .btn-icon-head
+    const btn = event.target.closest('.btn') || event.target.closest('.btn-icon-head');
+    const path = document.getElementById('analyze-path').value;
+
+    showLoading(btn, btn.innerHTML);
+    try {
+        const text = await analyzeProject(path);
+        lastAnalyzeResult = text;
+
+        // Download file
+        const blob = new Blob([text], { type: 'text/plain' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'project.txt';
+        a.click();
+
+        showResponse('analyze-response', {
+            success: true,
+            message: 'File downloaded!',
+            files: text.split('\n').filter(l => l.includes('===== FILE:')).length,
+            size: (text.length / 1024).toFixed(2) + ' KB'
+        });
+        showToast('Đã download file', 'success');
+    } catch (err) {
+        showResponse('analyze-response', { error: err.message }, true);
+        showToast('Lỗi: ' + err.message, 'error');
+    }
+    resetButton(btn);
+}
+
+/**
+ * Copy analyze result as text
+ */
+export async function copyAnalyzeResult() {
+    const copyBtn = event.target.closest('.btn-copy');
+    const copyIcon = document.getElementById('analyze-copy-icon');
+    const copyText = document.getElementById('analyze-copy-text');
+
+    if (!lastAnalyzeResult) {
+        // Fetch if not already analyzed
+        const path = document.getElementById('analyze-path').value;
+        showLoading(copyBtn, copyBtn.innerHTML);
+
+        try {
+            lastAnalyzeResult = await analyzeProject(path);
+        } catch (err) {
+            showToast('Lỗi: ' + err.message, 'error');
+            resetButton(copyBtn);
+            return;
+        }
+        resetButton(copyBtn);
+    }
+
+    // Copy to clipboard
+    try {
+        await copyToClipboard(lastAnalyzeResult);
+        showCopiedState(copyBtn, copyIcon, copyText, '📋', 'Copy Text');
+        showToast('Đã copy project.txt', 'success');
+    } catch (err) {
+        showToast('Lỗi copy: ' + err.message, 'error');
+    }
+}
+
+/**
+ * Handle execute button click
+ */
+export async function testExecute() {
+    const btn = event.target.closest('.btn');
+    const bashInput = document.getElementById('execute-bash');
+    const bash = bashInput.value;
+
+    if (!bash.trim()) {
+        showToast('Vui lòng nhập bash script', 'error');
+        return;
+    }
+
+    showLoading(btn, btn.innerHTML);
+    try {
+        const data = await executeScript(bash);
+        showResponse('execute-response', data, !data.success);
+
+        if (data.success) {
+            showToast('Thực thi thành công', 'success');
+            // Clear input on success
+            bashInput.value = '';
+        } else {
+            showToast('Thực thi thất bại', 'error');
+        }
+    } catch (err) {
+        showResponse('execute-response', { error: err.message }, true);
+        showToast('Lỗi: ' + err.message, 'error');
+    }
+    resetButton(btn);
+}
+
+/**
+ * Execute script from clipboard
+ */
+export async function executeFromClipboard() {
+    const btn = event.target.closest('.btn');
+    const bashInput = document.getElementById('execute-bash');
+
+    showLoading(btn, btn.innerHTML);
+
+    try {
+        const clipboardText = await readFromClipboard();
+
+        if (!clipboardText || !clipboardText.trim()) {
+            showToast('Clipboard trống!', 'error');
+            showResponse('execute-response', {
+                error: 'Clipboard is empty',
+                message: 'Please copy a bash script to clipboard first'
+            }, true);
+            resetButton(btn);
+            return;
+        }
+
+        // Show what we are running
+        bashInput.value = clipboardText;
+
+        const data = await executeScript(clipboardText);
+        showResponse('execute-response', data, !data.success);
+
+        if (data.success) {
+            showToast('Thực thi từ clipboard OK', 'success');
+            // Clear input on success
+            bashInput.value = '';
+        } else {
+            if (data.syntaxError) {
+                showToast('Lỗi syntax script', 'error');
+            } else {
+                showToast('Thực thi thất bại', 'error');
+            }
+        }
+    } catch (err) {
+        if (err.name === 'NotAllowedError') {
+            showToast('Không có quyền clipboard', 'error');
+        } else {
+            showResponse('execute-response', { error: err.message }, true);
+            showToast('Lỗi: ' + err.message, 'error');
+        }
+    }
+    resetButton(btn);
+}
+
+// Make functions globally available for onclick handlers
+window.toggleSystemPrompt = toggleSystemPrompt;
+window.copySystemPrompt = copySystemPrompt;
+window.copySystemPromptFromHeader = copySystemPromptFromHeader;
+window.testAnalyze = testAnalyze;
+window.copyAnalyzeResult = copyAnalyzeResult;
+window.testExecute = testExecute;
+window.executeFromClipboard = executeFromClipboard;

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

@@ -0,0 +1,72 @@
+// Main entry point - Initialize application
+import { SYSTEM_PROMPT } from './config.js';
+import { checkHealth } from './api.js';
+import './handlers.js'; // Import to register global functions
+
+/**
+ * Initialize application on DOM ready
+ */
+document.addEventListener('DOMContentLoaded', async () => {
+    // Load system prompt text
+    document.getElementById('prompt-text').textContent = SYSTEM_PROMPT;
+    
+    // Check server status
+    await checkServerStatus();
+
+    // Initialize Theme
+    initTheme();
+});
+
+/**
+ * Check and update server status
+ */
+async function checkServerStatus() {
+    const statusEl = document.getElementById('status');
+    const isHealthy = await checkHealth();
+    
+    if (isHealthy) {
+        statusEl.textContent = '● Online';
+        statusEl.style.background = 'rgba(52, 199, 89, 0.15)';
+        statusEl.style.color = 'var(--ios-green)';
+    } else {
+        statusEl.textContent = '● Offline';
+        statusEl.style.background = 'rgba(255, 59, 48, 0.15)';
+        statusEl.style.color = 'var(--ios-red)';
+    }
+}
+
+/**
+ * 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);
+    });
+}
+
+function updateThemeIcon(theme) {
+    const themeIcon = document.getElementById('theme-icon');
+    if (theme === 'dark') {
+        themeIcon.textContent = '☀️';
+    } else {
+        themeIcon.textContent = '🌙';
+    }
+}

package/src/server/views/js/utils.js

@@ -0,0 +1,72 @@
+// UI Utility Functions
+
+/**
+ * Display a toast notification
+ * @param {string} message - Message to display
+ * @param {string} type - Type of toast: 'success', 'error', 'info'
+ */
+export function showToast(message, type = 'success') {
+    const toast = document.getElementById('toast');
+    // Reset text content to remove potential icon junk
+    toast.textContent = message;
+    toast.className = `toast ${type}`;
+    toast.classList.add('show');
+
+    // Clear previous timeout if exists
+    if (toast.timeoutId) clearTimeout(toast.timeoutId);
+
+    toast.timeoutId = setTimeout(() => toast.classList.remove('show'), 3000);
+}
+
+/**
+ * Show loading state on button
+ * @param {HTMLElement} button - Button element
+ * @param {string} originalText - Original button HTML
+ */
+export function showLoading(button, originalText) {
+    button.disabled = true;
+    button.innerHTML = '<span class="loading"></span>';
+    button.dataset.originalText = originalText;
+}
+
+/**
+ * Reset button to original state
+ * @param {HTMLElement} button - Button element
+ */
+export function resetButton(button) {
+    button.disabled = false;
+    const originalText = button.dataset.originalText;
+    button.innerHTML = originalText;
+}
+
+/**
+ * Display API response in response area
+ * @param {string} elementId - ID of response element
+ * @param {Object} data - Response data
+ * @param {boolean} isError - Whether this is an error response
+ */
+export function showResponse(elementId, data, isError = false) {
+    const el = document.getElementById(elementId);
+    el.className = 'response show ' + (isError ? 'error' : 'success');
+    el.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
+}
+
+/**
+ * Update button state to show copied status
+ * @param {HTMLElement} button - Button element
+ * @param {HTMLElement} icon - Icon element
+ * @param {HTMLElement} text - Text element
+ * @param {string} originalIcon - Original icon text
+ * @param {string} originalText - Original button text
+ */
+export function showCopiedState(button, icon, text, originalIcon, originalText) {
+    button.classList.add('copied');
+    icon.textContent = '✓';
+    text.textContent = 'Copied';
+
+    setTimeout(() => {
+        button.classList.remove('copied');
+        icon.textContent = originalIcon;
+        text.textContent = originalText;
+    }, 2000);
+}