npm - vg-coder-cli - Versions diffs - 2.0.1 → 2.0.4 - Mend

vg-coder-cli 2.0.1 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/README.md +318 -92
package/{vg/apps/api/src/assets/.gitkeep → change.sh} +0 -0
package/package.json +4 -11
package/src/index.js +0 -56
package/src/server/views/dashboard.html +391 -613
package/vg-coder-cli-1.0.17.tgz +0 -0
package/vg-coder-cli-2.0.4.tgz +0 -0
package/CHANGELOG.md +0 -59
package/PUBLISHING.md +0 -86
package/SYSTEM_PROMPT.md +0 -157
package/init-nx-monorepo.sh +0 -107
package/vg/.vscode/extensions.json +0 -8
package/vg/.vscode/launch.json +0 -23
package/vg/README.md +0 -85
package/vg/apps/api/project.json +0 -83
package/vg/apps/api/src/app/analyze.controller.ts +0 -17
package/vg/apps/api/src/app/analyze.service.ts +0 -57
package/vg/apps/api/src/app/app.controller.ts +0 -12
package/vg/apps/api/src/app/app.module.ts +0 -29
package/vg/apps/api/src/app/app.service.ts +0 -8
package/vg/apps/api/src/app/clean.controller.ts +0 -40
package/vg/apps/api/src/app/execute.controller.ts +0 -19
package/vg/apps/api/src/app/execute.service.ts +0 -46
package/vg/apps/api/src/app/info.controller.ts +0 -12
package/vg/apps/api/src/app/info.service.ts +0 -65
package/vg/apps/api/src/main.ts +0 -28
package/vg/apps/api/webpack.config.js +0 -25
package/vg/apps/api-e2e/jest.config.cts +0 -18
package/vg/apps/api-e2e/project.json +0 -17
package/vg/apps/api-e2e/src/support/global-setup.ts +0 -16
package/vg/apps/api-e2e/src/support/global-teardown.ts +0 -10
package/vg/apps/api-e2e/src/support/test-setup.ts +0 -9
package/vg/apps/ng-app/jest.config.ts +0 -21
package/vg/apps/ng-app/project.json +0 -110
package/vg/apps/ng-app/proxy.conf.json +0 -8
package/vg/apps/ng-app/public/favicon.ico +0 -0
package/vg/apps/ng-app/src/app/app.config.ts +0 -17
package/vg/apps/ng-app/src/app/app.html +0 -1
package/vg/apps/ng-app/src/app/app.routes.ts +0 -7
package/vg/apps/ng-app/src/app/app.scss +0 -0
package/vg/apps/ng-app/src/app/app.ts +0 -12
package/vg/apps/ng-app/src/app/dashboard/dashboard.component.html +0 -87
package/vg/apps/ng-app/src/app/dashboard/dashboard.component.scss +0 -290
package/vg/apps/ng-app/src/app/dashboard/dashboard.component.ts +0 -236
package/vg/apps/ng-app/src/app/nx-welcome.ts +0 -872
package/vg/apps/ng-app/src/app/services/api.service.ts +0 -28
package/vg/apps/ng-app/src/index.html +0 -13
package/vg/apps/ng-app/src/main.ts +0 -5
package/vg/apps/ng-app/src/styles.scss +0 -1
package/vg/apps/ng-app/src/test-setup.ts +0 -6
package/vg/jest.config.ts +0 -6
package/vg/nx.json +0 -85
package/vg/package-lock.json +0 -30707
package/vg/package.json +0 -75
package/vg/packages/client/data-access/README.md +0 -7
package/vg/packages/client/data-access/jest.config.ts +0 -21
package/vg/packages/client/data-access/project.json +0 -21
package/vg/packages/client/data-access/src/index.ts +0 -1
package/vg/packages/client/data-access/src/lib/data-access/data-access.html +0 -1
package/vg/packages/client/data-access/src/lib/data-access/data-access.scss +0 -0
package/vg/packages/client/data-access/src/lib/data-access/data-access.ts +0 -9
package/vg/packages/client/data-access/src/test-setup.ts +0 -6
package/vg/packages/core/README.md +0 -11
package/vg/packages/core/jest.config.ts +0 -10
package/vg/packages/core/package.json +0 -11
package/vg/packages/core/project.json +0 -26
package/vg/packages/core/src/index.ts +0 -6
package/vg/packages/core/src/lib/core.ts +0 -3
package/vg/packages/core/src/lib/detectors/project-detector.ts +0 -343
package/vg/packages/core/src/lib/ignore/ignore-manager.ts +0 -315
package/vg/packages/core/src/lib/scanner/file-scanner.ts +0 -675
package/vg/packages/core/src/lib/tokenizer/token-manager.ts +0 -435
package/vg/packages/core/src/lib/utils/bash-executor.ts +0 -146
package/vg/packages/shared/data-types/README.md +0 -11
package/vg/packages/shared/data-types/jest.config.ts +0 -10
package/vg/packages/shared/data-types/package.json +0 -11
package/vg/packages/shared/data-types/project.json +0 -26
package/vg/packages/shared/data-types/src/index.ts +0 -1
package/vg/packages/shared/data-types/src/lib/data-types.ts +0 -3
package/vg/start-dev.sh +0 -22

package/src/server/views/dashboard.html CHANGED Viewed

@@ -3,245 +3,271 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VG Coder API Dashboard</title>
+    <meta name="viewport"
+        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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: var(--font-stack);
+            background-color: var(--ios-bg);
+            color: var(--ios-text-primary);
             min-height: 100vh;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1000px;
-            margin: 0 auto;
+            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));
         }
-        .header {
-            background: white;
-            border-radius: 12px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        .app-title {
+            font-weight: 700;
+            font-size: 1.2rem;
+            letter-spacing: -0.5px;
         }
-        .header h1 {
-            color: #667eea;
-            font-size: 2.5em;
-            margin-bottom: 10px;
+        .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;
         }
-        .header p {
-            color: #666;
-            font-size: 1.1em;
+        .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));
         }
-        .status {
-            display: inline-block;
-            padding: 8px 16px;
-            background: #10b981;
-            color: white;
+        /* iOS Cards */
+        .card {
+            background: var(--ios-card);
             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);
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+            position: relative;
+            overflow: hidden;
         }
-        .system-prompt-header {
+        .card-header {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            margin-bottom: 15px;
-            cursor: pointer;
-            user-select: none;
+            margin-bottom: 16px;
+            gap: 12px;
         }
-        .system-prompt-header h2 {
-            color: #667eea;
-            font-size: 1.5em;
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 12px;
+            background: var(--ios-bg);
             display: flex;
             align-items: center;
-            gap: 10px;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: var(--ios-blue);
         }
-        .toggle-icon {
-            transition: transform 0.3s ease;
+        .card-title {
+            font-size: 1.1rem;
+            font-weight: 700;
+            letter-spacing: -0.3px;
         }
-        .toggle-icon.open {
-            transform: rotate(180deg);
+        .card-desc {
+            color: var(--ios-text-secondary);
+            font-size: 0.9rem;
+            margin-bottom: 20px;
         }
-        .system-prompt-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease;
+        /* Forms */
+        .form-group {
+            margin-bottom: 20px;
         }
-        .system-prompt-content.open {
-            max-height: 2000px;
+        .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;
         }
-        .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;
+        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;
         }
-        .endpoints {
-            display: grid;
-            gap: 20px;
+        textarea {
+            min-height: 120px;
+            resize: vertical;
+            line-height: 1.4;
         }
-        .endpoint-card {
-            background: white;
-            border-radius: 12px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+        input:focus,
+        textarea:focus {
+            outline: none;
+            background: #D1D1D6;
         }
-        .endpoint-header {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            margin-bottom: 20px;
+        /* Buttons */
+        .btn-group {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 12px;
         }
-        .method {
-            padding: 8px 16px;
-            border-radius: 6px;
-            font-weight: bold;
-            font-size: 0.9em;
+        @media (min-width: 600px) {
+            .btn-group {
+                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            }
         }
-        .method.post {
-            background: #10b981;
+        .btn {
+            border: none;
+            background: var(--ios-blue);
             color: white;
-        }
-        .endpoint-path {
-            font-family: 'Courier New', monospace;
-            color: #333;
-            font-size: 1.2em;
+            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;
         }
-        .endpoint-desc {
-            color: #666;
-            margin-bottom: 20px;
-            line-height: 1.6;
-            font-size: 1.05em;
-        }
-        .form-group {
-            margin-bottom: 20px;
+        .btn:active {
+            transform: scale(0.98);
+            opacity: 0.8;
         }
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #333;
-            font-weight: 600;
-            font-size: 1em;
+        .btn-secondary {
+            background: rgba(0, 122, 255, 0.15);
+            color: var(--ios-blue);
         }
-        .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;
+        .btn-copy {
+            background: #E5E5EA;
+            color: black;
         }
-        .form-group input:focus,
-        .form-group textarea:focus {
-            outline: none;
-            border-color: #667eea;
+        .btn-copy.copied {
+            background: var(--ios-green);
+            color: white;
         }
-        .form-group textarea {
-            min-height: 150px;
-            resize: vertical;
+        /* System Prompt Accordion */
+        .prompt-accordion {
+            cursor: pointer;
+            user-select: none;
         }
-        .btn-group {
+        .prompt-header {
             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;
+            justify-content: space-between;
             align-items: center;
-            gap: 8px;
-        }
-        .btn:hover {
-            background: #5568d3;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+            padding: 4px 0;
         }
-        .btn:disabled {
-            background: #9ca3af;
-            cursor: not-allowed;
-            transform: none;
+        .chevron {
+            color: var(--ios-text-secondary);
+            transition: transform 0.3s ease;
+            font-size: 0.8rem;
         }
-        .btn-copy {
-            background: #10b981;
+        .prompt-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
+            opacity: 0;
         }
-        .btn-copy:hover {
-            background: #059669;
-            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+        .prompt-content.open {
+            max-height: 500px;
+            opacity: 1;
+            margin-top: 15px;
         }
-        .btn-copy.copied {
-            background: #6366f1;
+        .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;
-            padding: 20px;
-            border-radius: 8px;
-            background: #f9fafb;
-            border-left: 4px solid #667eea;
+            background: #F9F9F9;
+            border-radius: 12px;
+            padding: 15px;
+            border-left: 5px solid var(--ios-text-secondary);
             display: none;
+            animation: slideDown 0.3s ease;
         }
         .response.show {
@@ -249,333 +275,271 @@
         }
         .response.success {
-            border-left-color: #10b981;
-            background: #f0fdf4;
+            border-left-color: var(--ios-green);
+            background: #F0FFF4;
         }
         .response.error {
-            border-left-color: #ef4444;
-            background: #fef2f2;
+            border-left-color: var(--ios-red);
+            background: #FFF5F5;
         }
         .response pre {
-            margin: 0;
-            font-family: 'Courier New', monospace;
-            font-size: 0.95em;
+            font-family: 'SF Mono', 'Menlo', monospace;
+            font-size: 0.85rem;
             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);
-            }
+            word-break: break-all;
+            color: #333;
         }
+        /* Toast */
         .toast {
             position: fixed;
             top: 20px;
-            right: 20px;
-            padding: 16px 24px;
-            border-radius: 8px;
+            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;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            opacity: 0;
-            transform: translateY(-20px);
-            transition: all 0.3s ease;
+            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 {
-            opacity: 1;
-            transform: translateY(0);
+            transform: translateX(-50%) translateY(0);
         }
-        .toast.success {
-            background: #10b981;
+        .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;
         }
-        .toast.error {
-            background: #ef4444;
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
-        .toast.info {
-            background: #3b82f6;
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
     </style>
 </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">
-        <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" onclick="toggleSystemPrompt()">
-                <h2>
-                    <span>📝</span>
-                    <span>AI System Prompt</span>
-                </h2>
-                <span class="toggle-icon" id="toggle-icon">▼</span>
+        <!-- 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="system-prompt-content" id="system-prompt-content">
-                <div class="prompt-text" id="prompt-text"></div>
-                <button class="btn btn-copy" onclick="copySystemPrompt()">
+            <div class="prompt-content" id="system-prompt-content">
+                <div class="code-block" id="prompt-text"></div>
+                <button class="btn btn-secondary" onclick="copySystemPrompt()" style="width: 100%">
                     <span id="copy-icon">📋</span>
-                    <span id="copy-text">Copy System Prompt</span>
+                    <span id="copy-text">Copy 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" id="analyze-path" value="." placeholder=".">
+        <!-- Analyze Card -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-icon">📊</div>
+                <div>
+                    <div class="card-title">Project Analyze</div>
                 </div>
-                <div class="btn-group">
-                    <button class="btn" onclick="testAnalyze()">
-                        <span>📥</span>
-                        <span>Download File</span>
-                    </button>
-                    <button class="btn btn-copy" onclick="copyAnalyzeResult()">
-                        <span id="analyze-copy-icon">📋</span>
-                        <span id="analyze-copy-text">Copy to Clipboard</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>
+            <div class="card-desc">Phân tích dự án và lấy source code</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 id="execute-bash"
-                        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" onclick="testExecute()">
-                        <span>▶️</span>
-                        <span>Execute Script</span>
-                    </button>
-                    <button class="btn" onclick="executeFromClipboard()">
-                        <span>📋</span>
-                        <span>Execute from Clipboard</span>
-                    </button>
+            <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
+                </button>
+                <button class="btn btn-copy" onclick="copyAnalyzeAsFile()">
+                    <span id="analyze-file-icon">📄</span> File
+                </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>
-                <div class="response" id="execute-response"></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>
+            </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>
+            </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;
-        // 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
----
+### /ask - Q&A Mode
 ### /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
+## ⚠️ QUY TẮC BẮT BUỘC /code
-### 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:**
+1. **Format Script Chuẩn:**
 \`\`\`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 ...
+... content ...
 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
+2. **Quy tắc:**
+- Luôn có mkdir -p
+- Dùng <<'EOF' (có quotes)
+- Chỉ include files thay đổi
+`;
-### 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');
-            });
+            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 = '<span class="loading"></span> Loading...';
+            button.innerHTML = '<div class="loading-spinner"></div>';
             button.dataset.originalText = originalText;
         }
         function resetButton(button) {
             button.disabled = false;
-            const originalText = button.dataset.originalText;
-            button.innerHTML = originalText;
+            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);
+        }
+        async function copyToClipboard(text, btnElement, successIconId, successTextId) {
+            try {
+                await navigator.clipboard.writeText(text);
+                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!');
+            } catch (err) {
+                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, '<span>📥</span><span>Download File</span>');
+            showLoading(btn, originalHTML);
             try {
                 const res = await fetch(`${API_BASE}/api/analyze`, {
                     method: 'POST',
@@ -587,7 +551,7 @@ API sẽ:
                     const text = await res.text();
                     lastAnalyzeResult = text;
-                    // Download file
+                    // Trigger download
                     const blob = new Blob([text], { type: 'text/plain' });
                     const url = window.URL.createObjectURL(blob);
                     const a = document.createElement('a');
@@ -595,172 +559,44 @@ API sẽ:
                     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');
+                    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('❌ Lỗi analyze!', 'error');
+                    showToast('Analysis failed', 'error');
                 }
             } catch (err) {
                 showResponse('analyze-response', { error: err.message }, true);
-                showToast('❌ Lỗi: ' + err.message, 'error');
+                showToast('Connection error', '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');
+            const btn = event.target.closest('.btn');
             if (!lastAnalyzeResult) {
-                // Fetch if not already analyzed
-                const path = document.getElementById('analyze-path').value;
-                showLoading(copyBtn, '<span id="analyze-copy-icon">📋</span><span id="analyze-copy-text">Copy to Clipboard</span>');
-                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 (like reference code)
-            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 vào clipboard!', 'success');
-                setTimeout(() => {
-                    copyBtn.classList.remove('copied');
-                    copyIcon.textContent = '📋';
-                    copyText.textContent = 'Copy to Clipboard';
-                }, 2000);
-            } catch (err) {
-                // Fallback to writeText if ClipboardItem fails
-                try {
-                    await navigator.clipboard.writeText(lastAnalyzeResult);
-                    copyBtn.classList.add('copied');
-                    copyIcon.textContent = '✓';
-                    copyText.textContent = 'Copied!';
-                    showToast('✅ Đã copy project.txt vào clipboard!', 'success');
-                    setTimeout(() => {
-                        copyBtn.classList.remove('copied');
-                        copyIcon.textContent = '📋';
-                        copyText.textContent = 'Copy to Clipboard';
-                    }, 2000);
-                } catch (fallbackErr) {
-                    showToast('❌ Lỗi copy: ' + fallbackErr.message, 'error');
-                }
+                showToast('Please analyze first', 'error');
+                return;
             }
-        }
-        async function copyAsFile(filename, content) {
-            const blob = new Blob([content], {
-                type: "application/octet-stream"
-            });
-            // ClipboardItem cần type key phải trùng blob.type
-            const item = new ClipboardItem(
-                { [blob.type]: blob },
-                {
-                    // Không phải chuẩn, nhưng Chrome hỗ trợ unofficial metadata
-                    type: "application/octet-stream",
-                    presentationStyle: "attachment",
-                    name: filename
-                }
-            );
-            await navigator.clipboard.write([item]);
+            copyToClipboard(lastAnalyzeResult, btn, 'analyze-copy-icon', 'analyze-copy-text');
         }
         async function copyAnalyzeAsFile() {
-            const copyBtn = event.target.closest('.btn-copy');
-            const copyIcon = document.getElementById('analyze-file-icon');
-            const copyText = document.getElementById('analyze-file-text');
+            const btn = event.target.closest('.btn');
             if (!lastAnalyzeResult) {
-                // Fetch if not already analyzed
-                const path = document.getElementById('analyze-path').value;
-                showLoading(copyBtn, '<span id="analyze-file-icon">📄</span><span id="analyze-file-text">Copy as File</span>');
-                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 project.txt như file!', 'success');
-                setTimeout(() => {
-                    copyBtn.classList.remove('copied');
-                    copyIcon.textContent = '📄';
-                    copyText.textContent = 'Copy as File';
-                }, 2000);
-            } catch (err) {
-                showToast('❌ Lỗi copy: ' + err.message, 'error');
+                showToast('Please analyze first', 'error');
+                return;
             }
+            copyToClipboard(lastAnalyzeResult, btn, 'analyze-file-icon', 'analyze-file-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');
-            if (!bash.trim()) {
-                showToast('⚠️ Vui lòng nhập bash script!', 'error');
-                return;
-            }
-            showLoading(btn, '<span>▶️</span><span>Execute Script</span>');
+            showLoading(btn, btn.innerHTML);
             try {
                 const res = await fetch(`${API_BASE}/api/execute`, {
                     method: 'POST',
@@ -768,100 +604,42 @@ API sẽ:
                     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');
-                }
+                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);
-                showToast('❌ Lỗi: ' + err.message, 'error');
             }
             resetButton(btn);
         }
         async function executeFromClipboard() {
             const btn = event.target.closest('.btn');
-            showLoading(btn, '<span>📋</span><span>Execute from Clipboard</span>');
             try {
-                // Read from clipboard
-                const clipboardText = await navigator.clipboard.readText();
-                // Check if clipboard is empty
-                if (!clipboardText || !clipboardText.trim()) {
-                    showToast('⚠️ Clipboard trống! Vui lòng copy bash script trước.', 'error');
-                    showResponse('execute-response', {
-                        error: 'Clipboard is empty',
-                        message: 'Please copy a bash script to clipboard first'
-                    }, true);
-                    resetButton(btn);
-                    return;
-                }
+                const text = await navigator.clipboard.readText();
+                if (!text.trim()) return showToast('Clipboard is empty', 'error');
-                // Display clipboard content in textarea for reference
-                document.getElementById('execute-bash').value = clipboardText;
-                // Execute the script (API will validate syntax first)
-                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 thành công!', 'success');
-                } else {
-                    // Check if it's a syntax error
-                    if (data.syntaxError) {
-                        showToast('❌ Lỗi syntax! Kiểm tra bash script.', 'error');
-                    } else {
-                        showToast('❌ Thực thi thất bại!', 'error');
-                    }
-                }
+                document.getElementById('execute-bash').value = text;
+                showToast('Pasted from clipboard');
             } catch (err) {
-                // Handle clipboard permission errors
-                if (err.name === 'NotAllowedError') {
-                    showToast('❌ Không có quyền truy cập clipboard!', 'error');
-                    showResponse('execute-response', {
-                        error: 'Clipboard permission denied',
-                        message: 'Please allow clipboard access in your browser settings'
-                    }, true);
-                } else {
-                    showResponse('execute-response', { error: err.message }, true);
-                    showToast('❌ Lỗi: ' + err.message, 'error');
-                }
+                showToast('Clipboard permission denied', 'error');
             }
-            resetButton(btn);
         }
-        function showToast(message, type = 'success') {
-            const toast = document.getElementById('toast');
-            toast.textContent = message;
-            toast.className = `toast ${type}`;
-            toast.classList.add('show');
-            setTimeout(() => toast.classList.remove('show'), 3000);
-        }
-        // Check server status ONCE on page load
+        // Init Check
         (async () => {
+            const statusBadge = document.getElementById('status');
             try {
                 const res = await fetch(`${API_BASE}/health`);
                 if (res.ok) {
-                    document.getElementById('status').textContent = '● Server Running';
-                    document.getElementById('status').style.background = '#10b981';
+                    statusBadge.textContent = '● Online';
+                    statusBadge.style.backgroundColor = 'var(--ios-green)';
                 }
             } catch {
-                document.getElementById('status').textContent = '● Server Offline';
-                document.getElementById('status').style.background = '#ef4444';
+                statusBadge.textContent = '● Offline';
+                statusBadge.style.backgroundColor = 'var(--ios-text-secondary)';
             }
         })();
     </script>
 </body>