vg-coder-cli 2.0.7 → 2.0.9

package/src/server/views/dashboard.html

@@ -8,440 +8,45 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>VG Coder API Dashboard</title>
-    <style>
-        :root {
-            --ios-bg: #F2F2F7;
-            --ios-card: #FFFFFF;
-            --ios-blue: #007AFF;
-            --ios-green: #34C759;
-            --ios-red: #FF3B30;
-            --ios-gray: #8E8E93;
-            --ios-gray-light: #E5E5EA;
-            --ios-input-bg: #F2F2F7;
-            --ios-separator: #C6C6C8;
-            --safe-area-top: env(safe-area-inset-top);
-            --safe-area-bottom: env(safe-area-inset-bottom);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--ios-bg);
-            color: #000;
-            min-height: 100vh;
-            padding: 0;
-            padding-bottom: calc(20px + var(--safe-area-bottom));
-            -webkit-font-smoothing: antialiased;
-        }
-
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-top: calc(20px + var(--safe-area-top));
-        }
-
-        /* Header iOS Style */
-        .header {
-            text-align: left;
-            margin-bottom: 24px;
-            padding: 0 4px;
-        }
-
-        .header h1 {
-            color: #000;
-            font-size: 34px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            margin-bottom: 8px;
-        }
-
-        .header p {
-            color: var(--ios-gray);
-            font-size: 17px;
-            line-height: 1.4;
-            margin-bottom: 12px;
-        }
-
-        .status {
-            display: inline-flex;
-            align-items: center;
-            padding: 6px 12px;
-            background: rgba(52, 199, 89, 0.15);
-            color: var(--ios-green);
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            margin-top: 5px;
-        }
-
-        /* Card Style (Inset Grouped) */
-        .system-prompt-card,
-        .endpoint-card {
-            background: var(--ios-card);
-            border-radius: 16px;
-            padding: 20px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-            overflow: hidden;
-            position: relative;
-        }
-
-        /* System Prompt */
-        .system-prompt-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            padding: 4px 0;
-        }
-
-        .system-prompt-header h2 {
-            color: #000;
-            font-size: 20px;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .toggle-icon {
-            color: var(--ios-gray);
-            font-size: 14px;
-            transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-        }
-
-        .toggle-icon.open {
-            transform: rotate(180deg);
-        }
-
-        .system-prompt-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s;
-            opacity: 0;
-        }
-
-        .system-prompt-content.open {
-            max-height: 2000px;
-            opacity: 1;
-            margin-top: 16px;
-        }
-
-        .prompt-text {
-            background: var(--ios-input-bg);
-            border: none;
-            border-radius: 12px;
-            padding: 16px;
-            font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
-            font-size: 13px;
-            line-height: 1.5;
-            white-space: pre-wrap;
-            max-height: 300px;
-            overflow-y: auto;
-            margin-bottom: 16px;
-            color: #333;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        /* Endpoints */
-        .endpoint-header {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-bottom: 12px;
-            border-bottom: 0.5px solid var(--ios-separator);
-            padding-bottom: 12px;
-        }
-
-        .method {
-            padding: 4px 10px;
-            border-radius: 6px;
-            font-weight: 700;
-            font-size: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .method.post {
-            background: var(--ios-green);
-            color: white;
-        }
-
-        .endpoint-path {
-            font-family: 'SF Mono', 'Menlo', monospace;
-            color: #000;
-            font-size: 16px;
-            font-weight: 600;
-            word-break: break-all;
-        }
-
-        .endpoint-desc {
-            color: var(--ios-gray);
-            margin-bottom: 20px;
-            font-size: 15px;
-            line-height: 1.4;
-        }
-
-        /* Forms */
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #000;
-            font-weight: 500;
-            font-size: 14px;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-            opacity: 0.6;
-        }
-
-        .form-group input,
-        .form-group textarea {
-            width: 100%;
-            padding: 14px;
-            background: var(--ios-input-bg);
-            border: none;
-            border-radius: 12px;
-            font-size: 17px;
-            /* Prevent zoom on iOS */
-            font-family: 'SF Mono', 'Menlo', monospace;
-            color: #000;
-            transition: background 0.2s;
-            appearance: none;
-            -webkit-appearance: none;
-        }
-
-        .form-group input:focus,
-        .form-group textarea:focus {
-            outline: none;
-            background: #E5E5EA;
-            /* Slightly darker on focus */
-        }
-
-        .form-group textarea {
-            min-height: 120px;
-            resize: none;
-        }
-
-        /* Buttons */
-        .btn-group {
-            display: flex;
-            gap: 12px;
-            margin-top: 24px;
-            flex-direction: column;
-            /* Stack on mobile by default */
-        }
-
-        @media (min-width: 640px) {
-            .btn-group {
-                flex-direction: row;
-            }
-        }
-
-        .btn {
-            background: var(--ios-blue);
-            color: white;
-            border: none;
-            padding: 14px 20px;
-            border-radius: 12px;
-            cursor: pointer;
-            font-size: 17px;
-            font-weight: 600;
-            transition: transform 0.1s, opacity 0.2s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .btn:active {
-            transform: scale(0.98);
-            opacity: 0.9;
-        }
-
-        .btn:disabled {
-            background: var(--ios-gray-light);
-            color: var(--ios-gray);
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .btn-copy {
-            background: rgba(0, 122, 255, 0.1);
-            color: var(--ios-blue);
-        }
-
-        /* Specific override for prompt copy button to look nice */
-        .system-prompt-content .btn-copy {
-            margin-top: 8px;
-        }
-
-        .btn-copy:active {
-            background: rgba(0, 122, 255, 0.2);
-        }
-
-        .btn-copy.copied {
-            background: var(--ios-green);
-            color: white;
-        }
-
-        /* Response Area */
-        .response {
-            margin-top: 20px;
-            padding: 16px;
-            border-radius: 12px;
-            background: #1C1C1E;
-            /* Dark background for code contrast */
-            color: #fff;
-            display: none;
-            font-size: 13px;
-            overflow-x: auto;
-            border-left: none;
-            /* Removed the side border style */
-        }
-
-        .response.show {
-            display: block;
-            animation: fadeIn 0.3s ease;
-        }
-
-        .response.success {
-            border: 1px solid rgba(52, 199, 89, 0.3);
-        }
-
-        .response.error {
-            border: 1px solid rgba(255, 59, 48, 0.3);
-            background: #2C1515;
-        }
-
-        .response pre {
-            margin: 0;
-            font-family: 'SF Mono', 'Menlo', monospace;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(5px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Loading Spinner */
-        .loading {
-            display: inline-block;
-            width: 18px;
-            height: 18px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: currentColor;
-            animation: spin 0.8s linear infinite;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        /* Toast - iOS Notification Style */
-        .toast {
-            position: fixed;
-            top: 10px;
-            left: 50%;
-            transform: translateX(-50%) translateY(-100px);
-            padding: 12px 20px;
-            border-radius: 25px;
-            /* Pill shape */
-            color: #000;
-            background: rgba(255, 255, 255, 0.85);
-            backdrop-filter: blur(20px);
-            -webkit-backdrop-filter: blur(20px);
-            font-weight: 500;
-            font-size: 15px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
-            z-index: 2000;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            width: auto;
-            max-width: 90%;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-        }
-
-        .toast.show {
-            transform: translateX(-50%) translateY(calc(var(--safe-area-top)));
-            opacity: 1;
-        }
-
-        /* Icons in toast */
-        .toast::before {
-            content: '';
-            display: block;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .toast.success::before {
-            background: var(--ios-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
-        }
-
-        .toast.error::before {
-            background: var(--ios-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat;
-        }
-
-        .toast.info::before {
-            background: var(--ios-blue);
-        }
-    </style>
+    <link rel="stylesheet" href="/dashboard.css">
+    <link rel="stylesheet" href="/css/structure.css">
+    <script>
+        // Pre-load theme to prevent flash
+        (function() {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+        })();
+    </script>
 </head>
 
 <body>
     <div class="container">
         <div class="header">
-            <span class="status" id="status">● Server Starting...</span>
-            <div style="height: 10px;"></div>
-            <h1>VG Coder</h1>
-            <p>API Dashboard & Automation</p>
+            <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>
 
         <!-- System Prompt Section -->
         <div class="system-prompt-card">
             <div class="system-prompt-header" onclick="toggleSystemPrompt()">
-                <h2>
-                    <span>📝</span>
-                    <span>System Prompt</span>
-                </h2>
+                <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="system-prompt-content" id="system-prompt-content">
                 <div class="prompt-text" id="prompt-text"></div>
-                <button class="btn btn-copy" onclick="copySystemPrompt()">
+                <button class="btn btn-copy" onclick="copySystemPrompt(event)">
                     <span id="copy-icon">📋</span>
                     <span id="copy-text">Copy System Prompt</span>
                 </button>
@@ -452,8 +57,15 @@
             <!-- Analyze -->
             <div class="endpoint-card">
                 <div class="endpoint-header">
-                    <span class="method post">POST</span>
-                    <span class="endpoint-path">/api/analyze</span>
+                    <!-- 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(event)" title="Download Project Source">
+                        📥
+                    </button>
                 </div>
                 <p class="endpoint-desc">Phân tích dự án và lấy toàn bộ source code.</p>
                 <div class="form-group">
@@ -461,18 +73,11 @@
                     <input type="text" id="analyze-path" value="." placeholder="Project path (e.g. .)">
                 </div>
                 <div class="btn-group">
-                    <button class="btn" onclick="testAnalyze()">
-                        <span>📥</span>
-                        <span>Download</span>
-                    </button>
-                    <button class="btn btn-copy" onclick="copyAnalyzeResult()">
+                    <!-- Big Download button removed as it's now in the header -->
+                    <button class="btn btn-copy" onclick="copyAnalyzeResult(event)">
                         <span id="analyze-copy-icon">📋</span>
                         <span id="analyze-copy-text">Copy Text</span>
                     </button>
-                    <button class="btn btn-copy" onclick="copyAnalyzeAsFile()">
-                        <span id="analyze-file-icon">📄</span>
-                        <span id="analyze-file-text">Copy as File</span>
-                    </button>
                 </div>
                 <div class="response" id="analyze-response"></div>
             </div>
@@ -480,8 +85,11 @@
             <!-- Execute Bash -->
             <div class="endpoint-card">
                 <div class="endpoint-header">
-                    <span class="method post">POST</span>
-                    <span class="endpoint-path">/api/execute</span>
+                    <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">
@@ -490,478 +98,61 @@
                         placeholder="mkdir -p src/test&#10;echo 'Hello' > src/test/hello.txt"></textarea>
                 </div>
                 <div class="btn-group">
-                    <button class="btn" onclick="testExecute()">
+                    <button class="btn" onclick="testExecute(event)">
                         <span>▶️</span>
                         <span>Run Script</span>
                     </button>
-                    <button class="btn" onclick="executeFromClipboard()">
+                    <button class="btn" onclick="executeFromClipboard(event)">
                         <span>📋</span>
                         <span>Paste & Run</span>
                     </button>
                 </div>
                 <div class="response" id="execute-response"></div>
             </div>
+
+            <!-- Structure & Tokens (NEW) -->
+            <div class="endpoint-card">
+                <div class="endpoint-header">
+                    <div class="endpoint-title-group">
+                        <span class="method get" style="background: var(--ios-blue); color: white;">GET</span>
+                        <span class="endpoint-path">/api/structure</span>
+                    </div>
+                    <!-- Button Copy Selected -->
+                    <button class="btn-icon-head" onclick="copySelectedStructure(event)" title="Copy Selected Tree">
+                        📋
+                    </button>
+                </div>
+                <p class="endpoint-desc">Xem cây thư mục và phân tích số lượng Token.</p>
+                <div class="form-group">
+                    <label>Path</label>
+                    <input type="text" id="structure-path" value="." placeholder="Project path">
+                </div>
+                <div class="btn-group">
+                    <button class="btn" onclick="testStructure(event)">
+                        <span>🌳</span>
+                        <span>View Structure</span>
+                    </button>
+                    <button class="btn btn-copy" onclick="copySelectedStructure(event)">
+                        <span id="copy-structure-icon">📋</span>
+                        <span id="copy-structure-text">Copy Selected</span>
+                    </button>
+                </div>
+                <!-- Tree Container -->
+                <div class="tree-container" id="structure-tree" style="display: none;">
+                    <div class="tree-header">
+                        <span>Project Tree</span>
+                        <span class="tree-total-tokens" id="total-tokens-badge">0 tokens</span>
+                    </div>
+                    <div class="tree-content" id="tree-content"></div>
+                </div>
+                <div class="response" id="structure-response" style="display: none;"></div>
+            </div>
         </div>
     </div>
 
     <div class="toast" id="toast"></div>
 
-    <script>
-        const API_BASE = window.location.origin;
-        let lastAnalyzeResult = null;
-
-        // 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';
-                showToast('Đã copy System Prompt', 'success');
-
-                setTimeout(() => {
-                    copyBtn.classList.remove('copied');
-                    copyIcon.textContent = '📋';
-                    copyText.textContent = 'Copy System Prompt';
-                }, 2000);
-            }).catch(err => {
-                showToast('Lỗi copy: ' + err.message, 'error');
-            });
-        }
-
-        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>';
-        }
-
-        function showLoading(button, originalText) {
-            button.disabled = true;
-            button.innerHTML = '<span class="loading"></span>';
-            button.dataset.originalText = originalText;
-        }
-
-        function resetButton(button) {
-            button.disabled = false;
-            const originalText = button.dataset.originalText;
-            button.innerHTML = originalText;
-        }
-
-        async function testAnalyze() {
-            const btn = event.target.closest('.btn');
-            const path = document.getElementById('analyze-path').value;
-
-            showLoading(btn, btn.innerHTML);
-            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;
-
-                    // 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');
-                } else {
-                    const data = await res.json();
-                    showResponse('analyze-response', data, true);
-                    showToast('Lỗi analyze', 'error');
-                }
-            } catch (err) {
-                showResponse('analyze-response', { error: err.message }, true);
-                showToast('Lỗi: ' + err.message, 'error');
-            }
-            resetButton(btn);
-        }
-
-        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 {
-                    const res = await fetch(`${API_BASE}/api/analyze`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ path })
-                    });
-
-                    if (res.ok) {
-                        lastAnalyzeResult = await res.text();
-                    } else {
-                        showToast('Lỗi analyze', 'error');
-                        resetButton(copyBtn);
-                        return;
-                    }
-                } catch (err) {
-                    showToast('Lỗi: ' + err.message, 'error');
-                    resetButton(copyBtn);
-                    return;
-                }
-                resetButton(copyBtn);
-            }
-
-            // Copy to clipboard using ClipboardItem
-            try {
-                const blob = new Blob([lastAnalyzeResult], { type: 'text/plain' });
-                const item = new ClipboardItem({ 'text/plain': blob });
-                await navigator.clipboard.write([item]);
-
-                copyBtn.classList.add('copied');
-                copyIcon.textContent = '✓';
-                copyText.textContent = 'Copied';
-                showToast('Đã copy project.txt', 'success');
-
-                setTimeout(() => {
-                    copyBtn.classList.remove('copied');
-                    copyIcon.textContent = '📋';
-                    copyText.textContent = 'Copy Text';
-                }, 2000);
-            } catch (err) {
-                try {
-                    await navigator.clipboard.writeText(lastAnalyzeResult);
-                    copyBtn.classList.add('copied');
-                    copyIcon.textContent = '✓';
-                    copyText.textContent = 'Copied';
-                    showToast('Đã copy project.txt', 'success');
-
-                    setTimeout(() => {
-                        copyBtn.classList.remove('copied');
-                        copyIcon.textContent = '📋';
-                        copyText.textContent = 'Copy Text';
-                    }, 2000);
-                } catch (fallbackErr) {
-                    showToast('Lỗi copy: ' + fallbackErr.message, 'error');
-                }
-            }
-        }
-
-        async function copyAsFile(filename, content) {
-            const blob = new Blob([content], {
-                type: "application/octet-stream"
-            });
-
-            const item = new ClipboardItem(
-                { [blob.type]: blob },
-                {
-                    type: "application/octet-stream",
-                    presentationStyle: "attachment",
-                    name: filename
-                }
-            );
-
-            await navigator.clipboard.write([item]);
-        }
-
-        async function copyAnalyzeAsFile() {
-            const copyBtn = event.target.closest('.btn-copy');
-            const copyIcon = document.getElementById('analyze-file-icon');
-            const copyText = document.getElementById('analyze-file-text');
-
-            if (!lastAnalyzeResult) {
-                // Fetch if not already analyzed
-                const path = document.getElementById('analyze-path').value;
-                showLoading(copyBtn, copyBtn.innerHTML);
-
-                try {
-                    const res = await fetch(`${API_BASE}/api/analyze`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ path })
-                    });
-
-                    if (res.ok) {
-                        lastAnalyzeResult = await res.text();
-                    } else {
-                        showToast('Lỗi analyze', 'error');
-                        resetButton(copyBtn);
-                        return;
-                    }
-                } catch (err) {
-                    showToast('Lỗi: ' + err.message, 'error');
-                    resetButton(copyBtn);
-                    return;
-                }
-                resetButton(copyBtn);
-            }
-
-            try {
-                await copyAsFile("project.txt", lastAnalyzeResult);
-
-                copyBtn.classList.add('copied');
-                copyIcon.textContent = '✓';
-                copyText.textContent = 'Copied';
-                showToast('Đã copy file', 'success');
-
-                setTimeout(() => {
-                    copyBtn.classList.remove('copied');
-                    copyIcon.textContent = '📄';
-                    copyText.textContent = 'Copy as File';
-                }, 2000);
-            } catch (err) {
-                showToast('Lỗi copy: ' + err.message, 'error');
-            }
-        }
-
-        async function testExecute() {
-            const btn = event.target.closest('.btn');
-            const bash = document.getElementById('execute-bash').value;
-
-            if (!bash.trim()) {
-                showToast('Vui lòng nhập bash script', 'error');
-                return;
-            }
-
-            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, !res.ok || !data.success);
-
-                if (data.success) {
-                    showToast('Thực thi thành công', 'success');
-                } 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);
-        }
-
-        async function executeFromClipboard() {
-            const btn = event.target.closest('.btn');
-
-            showLoading(btn, btn.innerHTML);
-
-            try {
-                const clipboardText = await navigator.clipboard.readText();
-
-                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;
-                }
-
-                document.getElementById('execute-bash').value = clipboardText;
-
-                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 OK', 'success');
-                } 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);
-        }
-
-        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);
-        }
-
-        // Check server status
-        (async () => {
-            try {
-                const res = await fetch(`${API_BASE}/health`);
-                if (res.ok) {
-                    document.getElementById('status').textContent = '● Online';
-                    document.getElementById('status').style.background = 'rgba(52, 199, 89, 0.15)';
-                    document.getElementById('status').style.color = 'var(--ios-green)';
-                }
-            } catch {
-                document.getElementById('status').textContent = '● Offline';
-                document.getElementById('status').style.background = 'rgba(255, 59, 48, 0.15)';
-                document.getElementById('status').style.color = 'var(--ios-red)';
-            }
-        })();
-    </script>
+    <script type="module" src="/js/main.js"></script>
 </body>
 
-</html>
+</html>