vg-coder-cli 2.0.6 → 2.0.8

package/src/server/views/dashboard.html

@@ -7,673 +7,113 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <title>VG Coder CLI</title>
-    <style>
-        :root {
-            --ios-bg: #F2F2F7;
-            --ios-card: #FFFFFF;
-            --ios-blue: #007AFF;
-            --ios-green: #34C759;
-            --ios-red: #FF3B30;
-            --ios-text-primary: #000000;
-            --ios-text-secondary: #8E8E93;
-            --ios-separator: #C6C6C8;
-            --ios-input-bg: #E5E5EA;
-            --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        body {
-            font-family: var(--font-stack);
-            background-color: var(--ios-bg);
-            color: var(--ios-text-primary);
-            min-height: 100vh;
-            padding-bottom: 40px;
-            font-size: 17px;
-            line-height: 1.5;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        /* Glass Header */
-        .header-nav {
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            background: rgba(255, 255, 255, 0.85);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
-            padding: 15px 20px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding-top: max(15px, env(safe-area-inset-top));
-        }
-
-        .app-title {
-            font-weight: 700;
-            font-size: 1.2rem;
-            letter-spacing: -0.5px;
-        }
-
-        .status-badge {
-            font-size: 0.75rem;
-            font-weight: 600;
-            padding: 4px 10px;
-            border-radius: 20px;
-            background: var(--ios-green);
-            color: white;
-            box-shadow: 0 2px 4px rgba(52, 199, 89, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-left: max(20px, env(safe-area-inset-left));
-            padding-right: max(20px, env(safe-area-inset-right));
-        }
-
-        /* iOS Cards */
-        .card {
-            background: var(--ios-card);
-            border-radius: 20px;
-            padding: 24px;
-            margin-bottom: 24px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .card-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 16px;
-            gap: 12px;
-        }
-
-        .card-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 12px;
-            background: var(--ios-bg);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.2rem;
-            color: var(--ios-blue);
-        }
-
-        .card-title {
-            font-size: 1.1rem;
-            font-weight: 700;
-            letter-spacing: -0.3px;
-        }
-
-        .card-desc {
-            color: var(--ios-text-secondary);
-            font-size: 0.9rem;
-            margin-bottom: 20px;
-        }
-
-        /* Forms */
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-label {
-            display: block;
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: var(--ios-text-secondary);
-            margin-bottom: 8px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        input[type="text"],
-        textarea {
-            width: 100%;
-            background: var(--ios-input-bg);
-            border: none;
-            border-radius: 12px;
-            padding: 14px 16px;
-            font-size: 1rem;
-            font-family: inherit;
-            color: var(--ios-text-primary);
-            transition: all 0.2s;
-            -webkit-appearance: none;
-        }
-
-        textarea {
-            min-height: 120px;
-            resize: vertical;
-            line-height: 1.4;
-        }
-
-        input:focus,
-        textarea:focus {
-            outline: none;
-            background: #D1D1D6;
-        }
-
-        /* Buttons */
-        .btn-group {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 12px;
-        }
-
-        .btn {
-            border: none;
-            background: var(--ios-blue);
-            color: white;
-            padding: 14px;
-            border-radius: 14px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.1s, opacity 0.2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            -webkit-appearance: none;
-        }
-
-        .btn:active {
-            transform: scale(0.98);
-            opacity: 0.8;
-        }
-
-        .btn-secondary {
-            background: rgba(0, 122, 255, 0.15);
-            color: var(--ios-blue);
-        }
-
-        /* Full width button */
-        .btn-full {
-            grid-column: 1 / -1;
-        }
-
-        .btn-copy {
-            background: #E5E5EA;
-            color: black;
-        }
-
-        .btn-copy.copied {
-            background: var(--ios-green);
-            color: white;
-        }
-
-        /* System Prompt Accordion */
-        .prompt-accordion {
-            cursor: pointer;
-            user-select: none;
-        }
-
-        .prompt-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 4px 0;
-        }
-
-        .chevron {
-            color: var(--ios-text-secondary);
-            transition: transform 0.3s ease;
-            font-size: 0.8rem;
-        }
-
-        .prompt-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
-            opacity: 0;
-        }
-
-        .prompt-content.open {
-            max-height: 500px;
-            opacity: 1;
-            margin-top: 15px;
-        }
-
-        .code-block {
-            background: #2c2c2e;
-            color: #fff;
-            padding: 15px;
-            border-radius: 12px;
-            font-family: 'SF Mono', 'Menlo', monospace;
-            font-size: 0.85rem;
-            overflow-x: auto;
-            white-space: pre-wrap;
-            margin-bottom: 15px;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-        }
-
-        /* Response Area */
-        .response {
-            margin-top: 20px;
-            background: #F9F9F9;
-            border-radius: 12px;
-            padding: 15px;
-            border-left: 5px solid var(--ios-text-secondary);
-            display: none;
-            animation: slideDown 0.3s ease;
-        }
-
-        .response.show {
-            display: block;
-        }
-
-        .response.success {
-            border-left-color: var(--ios-green);
-            background: #F0FFF4;
-        }
-
-        .response.error {
-            border-left-color: var(--ios-red);
-            background: #FFF5F5;
-        }
-
-        .response pre {
-            font-family: 'SF Mono', 'Menlo', monospace;
-            font-size: 0.85rem;
-            white-space: pre-wrap;
-            word-break: break-all;
-            color: #333;
-        }
-
-        /* Toast */
-        .toast {
-            position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%) translateY(-100px);
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(10px);
-            color: white;
-            padding: 12px 24px;
-            border-radius: 50px;
-            font-weight: 600;
-            font-size: 0.95rem;
-            z-index: 1000;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            white-space: nowrap;
-        }
-
-        .toast.show {
-            transform: translateX(-50%) translateY(0);
-        }
-
-        .loading-spinner {
-            width: 18px;
-            height: 18px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: white;
-            animation: spin 0.8s linear infinite;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    </style>
+    <title>VG Coder API Dashboard</title>
+    <link rel="stylesheet" href="/dashboard.css">
+    <script>
+        // Pre-load theme to prevent flash
+        (function() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+        })();
+    </script>
 </head>
 
 <body>
-    <!-- Glass Header -->
-    <nav class="header-nav">
-        <div class="app-title">VG Coder</div>
-        <div id="status" class="status-badge">● Offline</div>
-    </nav>
-
     <div class="container">
-
-        <!-- System Prompt Card -->
-        <div class="card prompt-accordion">
-            <div class="card-header prompt-header" onclick="toggleSystemPrompt()">
-                <div style="display: flex; align-items: center; gap: 12px;">
-                    <div class="card-icon" style="background: rgba(255, 59, 48, 0.1); color: var(--ios-red);">⚡</div>
-                    <div class="card-title">System Prompt</div>
-                </div>
-                <div class="chevron" id="toggle-icon">▼</div>
-            </div>
-            <div class="prompt-content" id="system-prompt-content">
-                <div class="code-block" id="prompt-text"></div>
-                <button class="btn btn-secondary btn-full" onclick="copySystemPrompt()">
-                    <span id="copy-icon">📋</span>
-                    <span id="copy-text">Copy Prompt</span>
-                </button>
+        <div class="header">
+            <div class="header-content">
+                <span class="status" id="status">● Server Starting...</span>
+                <div style="height: 10px;"></div>
+                <h1>VG Coder</h1>
+                <p>API Dashboard & Automation</p>
             </div>
+            <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
+                <span id="theme-icon">🌙</span>
+            </button>
         </div>
 
-        <!-- Analyze Card -->
-        <div class="card">
-            <div class="card-header">
-                <div class="card-icon">📊</div>
-                <div>
-                    <div class="card-title">Project Analyze</div>
+        <!-- System Prompt Section -->
+        <div class="system-prompt-card">
+            <div class="system-prompt-header" onclick="toggleSystemPrompt()">
+                <div class="header-title-group">
+                    <button class="btn-icon-head" onclick="copySystemPromptFromHeader(event)" title="Copy System Prompt">
+                        📋
+                    </button>
+                    <h2>System Prompt</h2>
                 </div>
+                <span class="toggle-icon" id="toggle-icon">▼</span>
             </div>
-            <div class="card-desc">Phân tích dự án và lấy source code</div>
-
-            <div class="form-group">
-                <label class="form-label">Project Path</label>
-                <input type="text" id="analyze-path" value="." placeholder="/path/to/project">
-            </div>
-
-            <div class="btn-group">
-                <button class="btn" onclick="testAnalyze()">
-                    <span>📥</span> Download
-                </button>
-                <button class="btn btn-secondary" onclick="copyAnalyzeResult()">
-                    <span id="analyze-copy-icon">📋</span> Copy
+            <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 class="response" id="analyze-response"></div>
         </div>
 
-        <!-- Execute Card -->
-        <div class="card">
-            <div class="card-header">
-                <div class="card-icon" style="background: rgba(52, 199, 89, 0.1); color: var(--ios-green);">🚀</div>
-                <div>
-                    <div class="card-title">Execute Script</div>
+        <div class="endpoints">
+            <!-- Analyze -->
+            <div class="endpoint-card">
+                <div class="endpoint-header">
+                    <!-- Left side: Method + Path -->
+                    <div class="endpoint-title-group">
+                        <span class="method post">POST</span>
+                        <span class="endpoint-path">/api/analyze</span>
+                    </div>
+                    <!-- Right side: Download Icon -->
+                    <button class="btn-icon-head" onclick="testAnalyze()" title="Download Project Source">
+                        📥
+                    </button>
                 </div>
-            </div>
-            <div class="card-desc">Thực thi bash script an toàn</div>
-
-            <div class="form-group">
-                <label class="form-label">Bash Script</label>
-                <textarea id="execute-bash" placeholder="mkdir -p src..."></textarea>
+                <p class="endpoint-desc">Phân tích dự án và lấy toàn bộ source code.</p>
+                <div class="form-group">
+                    <label>Path</label>
+                    <input type="text" id="analyze-path" value="." placeholder="Project path (e.g. .)">
+                </div>
+                <div class="btn-group">
+                    <!-- Big Download button removed as it's now in the header -->
+                    <button class="btn btn-copy" onclick="copyAnalyzeResult()">
+                        <span id="analyze-copy-icon">📋</span>
+                        <span id="analyze-copy-text">Copy Text</span>
+                    </button>
+                </div>
+                <div class="response" id="analyze-response"></div>
             </div>
 
-            <div class="btn-group">
-                <button class="btn" style="background: var(--ios-green);" onclick="testExecute()">
-                    <span>▶️</span> Execute
-                </button>
-                <button class="btn btn-secondary" onclick="executeFromClipboard()">
-                    <span>📋</span> Paste & Run
-                </button>
+            <!-- Execute Bash -->
+            <div class="endpoint-card">
+                <div class="endpoint-header">
+                    <div class="endpoint-title-group">
+                        <span class="method post">POST</span>
+                        <span class="endpoint-path">/api/execute</span>
+                    </div>
+                    <!-- Could add an execute icon here later if needed -->
+                </div>
+                <p class="endpoint-desc">Thực thi bash script với syntax validation.</p>
+                <div class="form-group">
+                    <label>Bash Script</label>
+                    <textarea id="execute-bash"
+                        placeholder="mkdir -p src/test&#10;echo 'Hello' > src/test/hello.txt"></textarea>
+                </div>
+                <div class="btn-group">
+                    <button class="btn" onclick="testExecute()">
+                        <span>▶️</span>
+                        <span>Run Script</span>
+                    </button>
+                    <button class="btn" onclick="executeFromClipboard()">
+                        <span>📋</span>
+                        <span>Paste & Run</span>
+                    </button>
+                </div>
+                <div class="response" id="execute-response"></div>
             </div>
-            <div class="response" id="execute-response"></div>
         </div>
     </div>
 
-    <!-- iOS Toast -->
     <div class="toast" id="toast"></div>
 
-    <script>
-        const API_BASE = window.location.origin;
-        let lastAnalyzeResult = null;
-
-        const SYSTEM_PROMPT = `# VG Coder AI System Prompt
-
-## Command Prefixes
-### /ask - Q&A Mode
-### /plan - Planning Mode
-### /fix - Bug Fix Mode
-### /code - Code Generation Mode
-
-## ⚠️ QUY TẮC BẮT BUỘC /code
-
-1. **Format Script Chuẩn:**
-\`\`\`bash
-mkdir -p $(dirname "path/to/file.ext")
-cat <<'EOF' > path/to/file.ext
-... content ...
-EOF
-\`\`\`
-
-2. **Quy tắc:**
-- Luôn có mkdir -p
-- Dùng <<'EOF' (có quotes)
-- Chỉ include files thay đổi
-`;
-
-        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.style.transform = content.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
-        }
-
-        function showResponse(elementId, data, isError = false) {
-            const el = document.getElementById(elementId);
-            el.className = 'response show ' + (isError ? 'error' : 'success');
-
-            // Format nice JSON
-            if (typeof data === 'object') {
-                if (data.stdout) data.stdout = data.stdout.trim();
-                if (data.stderr) data.stderr = data.stderr.trim();
-            }
-
-            el.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
-        }
-
-        function showLoading(button, originalText) {
-            button.disabled = true;
-            button.innerHTML = '<div class="loading-spinner"></div>';
-            button.dataset.originalText = originalText;
-        }
-
-        function resetButton(button) {
-            button.disabled = false;
-            button.innerHTML = button.dataset.originalText;
-        }
-
-        function showToast(message, type = 'success') {
-            const toast = document.getElementById('toast');
-            let icon = type === 'success' ? '✅' : (type === 'error' ? '❌' : 'ℹ️');
-            toast.innerHTML = `${icon} ${message}`;
-            toast.classList.add('show');
-            setTimeout(() => toast.classList.remove('show'), 3000);
-        }
-
-        // --- ROBUST COPY FUNCTION (MODERN + FALLBACK) ---
-        function fallbackCopyTextToClipboard(text) {
-            var textArea = document.createElement("textarea");
-            textArea.value = text;
-
-            // Ensure textarea is not visible but part of DOM
-            textArea.style.position = "fixed";
-            textArea.style.left = "-9999px";
-            textArea.style.top = "0";
-            document.body.appendChild(textArea);
-
-            textArea.focus();
-            textArea.select();
-
-            try {
-                var successful = document.execCommand('copy');
-                return successful;
-            } catch (err) {
-                console.error('Fallback: Oops, unable to copy', err);
-                return false;
-            } finally {
-                document.body.removeChild(textArea);
-            }
-        }
-
-        async function copyToClipboard(text, btnElement, successIconId, successTextId) {
-            if (!text) return showToast('Nothing to copy', 'error');
-
-            const updateUI = () => {
-                if (btnElement) {
-                    btnElement.classList.add('copied');
-                    const icon = document.getElementById(successIconId);
-                    const label = document.getElementById(successTextId);
-
-                    const originalIcon = icon.textContent;
-                    const originalLabel = label.textContent;
-
-                    icon.textContent = '✓';
-                    label.textContent = 'Copied';
-
-                    setTimeout(() => {
-                        btnElement.classList.remove('copied');
-                        icon.textContent = originalIcon;
-                        label.textContent = originalLabel;
-                    }, 2000);
-                }
-                showToast('Copied to clipboard!');
-            };
-
-            // Try Modern API first
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-                try {
-                    await navigator.clipboard.writeText(text);
-                    updateUI();
-                } catch (err) {
-                    console.warn('Modern copy failed, trying fallback', err);
-                    // Try fallback if modern API fails
-                    if (fallbackCopyTextToClipboard(text)) {
-                        updateUI();
-                    } else {
-                        showToast('Failed to copy', 'error');
-                    }
-                }
-            } else {
-                // Use fallback immediately if API doesn't exist
-                if (fallbackCopyTextToClipboard(text)) {
-                    updateUI();
-                } else {
-                    showToast('Failed to copy', 'error');
-                }
-            }
-        }
-
-        // --- Logic Handlers ---
-
-        function copySystemPrompt() {
-            copyToClipboard(SYSTEM_PROMPT, event.target.closest('.btn'), 'copy-icon', 'copy-text');
-        }
-
-        async function testAnalyze() {
-            const btn = event.target.closest('.btn');
-            const path = document.getElementById('analyze-path').value;
-            const originalHTML = btn.innerHTML;
-
-            showLoading(btn, originalHTML);
-            try {
-                const res = await fetch(`${API_BASE}/api/analyze`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ path })
-                });
-
-                if (res.ok) {
-                    const text = await res.text();
-                    lastAnalyzeResult = text;
-
-                    // Trigger download
-                    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, files: text.split('===== FILE:').length - 1 });
-                    showToast('Analysis completed');
-                } else {
-                    const data = await res.json();
-                    showResponse('analyze-response', data, true);
-                    showToast('Analysis failed', 'error');
-                }
-            } catch (err) {
-                showResponse('analyze-response', { error: err.message }, true);
-                showToast('Connection error', 'error');
-            }
-            resetButton(btn);
-        }
-
-        async function copyAnalyzeResult() {
-            const btn = event.target.closest('.btn');
-            if (!lastAnalyzeResult) {
-                showToast('Please analyze/download first', 'error');
-                return;
-            }
-            copyToClipboard(lastAnalyzeResult, btn, 'analyze-copy-icon', 'analyze-copy-text');
-        }
-
-        async function testExecute() {
-            const btn = event.target.closest('.btn');
-            const bash = document.getElementById('execute-bash').value;
-            if (!bash.trim()) return showToast('Script is empty', 'error');
-
-            showLoading(btn, btn.innerHTML);
-            try {
-                const res = await fetch(`${API_BASE}/api/execute`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ bash })
-                });
-                const data = await res.json();
-                showResponse('execute-response', data, !data.success);
-                showToast(data.success ? 'Executed successfully' : 'Execution failed', data.success ? 'success' : 'error');
-            } catch (err) {
-                showResponse('execute-response', { error: err.message }, true);
-            }
-            resetButton(btn);
-        }
-
-        async function executeFromClipboard() {
-            try {
-                const text = await navigator.clipboard.readText();
-                if (!text.trim()) return showToast('Clipboard is empty', 'error');
-
-                document.getElementById('execute-bash').value = text;
-                showToast('Pasted from clipboard');
-            } catch (err) {
-                showToast('Clipboard permission denied', 'error');
-            }
-        }
-
-        // Init Check
-        (async () => {
-            const statusBadge = document.getElementById('status');
-            try {
-                const res = await fetch(`${API_BASE}/health`);
-                if (res.ok) {
-                    statusBadge.textContent = '● Online';
-                    statusBadge.style.backgroundColor = 'var(--ios-green)';
-                }
-            } catch {
-                statusBadge.textContent = '● Offline';
-                statusBadge.style.backgroundColor = 'var(--ios-text-secondary)';
-            }
-        })();
-
-    </script>
+    <script type="module" src="/js/main.js"></script>
 </body>
 
-</html>
+</html>