vg-coder-cli 2.0.24 → 2.0.26

package/src/server/views/dashboard.css

@@ -94,44 +94,84 @@ body.resizing {
     padding-right: 0px;
 }
 
-/* --- COMPONENT STYLES --- */
+/* --- HEADER REDESIGN --- */
 .header {
     display: flex;
-    justify-content: space-between;
-    align-items: center; /* Align items vertically center */
+    flex-direction: column;
+    gap: 6px; /* Space between rows */
     margin-bottom: 15px;
 }
 
-.header-content {
+.header-top-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.header-left-group {
     display: flex;
     align-items: center;
     gap: 12px;
+    flex: 1; /* Take available space */
+    min-width: 0; /* Enable truncation */
 }
 
 .status {
     font-size: 14px;
     color: var(--ios-green);
     line-height: 1;
+    flex-shrink: 0;
 }
 
-/* NEW: Project Info Styles */
-.project-info {
+/* Project Switcher replaces Project Title */
+.project-switcher {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    line-height: 1.2;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
 }
 
-.project-name {
-    font-weight: 700;
-    font-size: 16px;
+.project-selector {
+    padding: 5px 10px;
+    background: var(--ios-input-bg);
+    border: 1px solid var(--ios-separator);
+    border-radius: 6px;
+    font-size: 14px; /* Slightly bigger font like a title */
+    font-weight: 700; /* Bold like a title */
     color: var(--text-primary);
+    cursor: pointer;
+    outline: none;
+    transition: all 0.2s;
+    max-width: 100%;
+    text-overflow: ellipsis;
 }
 
-.project-meta {
-    font-size: 11px;
+.project-selector:hover {
+    border-color: var(--ios-blue);
+}
+
+.project-selector:focus {
+    border-color: var(--ios-blue);
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
+}
+
+.project-count {
+    font-size: 10px;
     color: var(--text-secondary);
-    font-family: monospace;
+    background: var(--ios-gray-light);
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
 }
 
 .theme-toggle {
@@ -144,6 +184,45 @@ body.resizing {
     box-shadow: 0 2px 5px var(--shadow-color);
 }
 
+.stop-server-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: none;
+    background: var(--ios-red);
+    color: white;
+    cursor: pointer;
+    box-shadow: 0 2px 5px var(--shadow-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.stop-server-btn:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
+}
+
+/* Bottom Row - Full Width Metadata */
+.header-bottom-row {
+    width: 100%;
+    padding-left: 2px;
+}
+
+.project-meta {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-family: monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+    line-height: 1.4;
+}
+
 .system-prompt-card,
 .endpoint-card {
     background: var(--ios-card);
@@ -343,8 +422,304 @@ body.resizing {
         flex: none;
         width: 100%;
         max-width: 100%;
-        height: 50vh;
+        height: 100vh;
         border-right: none;
         border-bottom: 1px solid var(--ios-separator);
     }
 }
+
+/* --- SAVED COMMANDS STYLES --- */
+.saved-commands-panel {
+    margin-bottom: 12px;
+    background: var(--ios-card);
+}
+
+.saved-commands-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.saved-commands-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.command-icon-header {
+    font-size: 16px;
+}
+
+.saved-commands-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.btn-new-terminal {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: var(--ios-gray-light);
+    border: 1px solid var(--ios-separator);
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.btn-new-terminal:hover {
+    background: var(--ios-separator);
+    transform: scale(1.05);
+}
+
+.btn-add-command {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    background: var(--ios-blue);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: all 0.2s;
+}
+
+.btn-add-command:hover {
+    opacity: 0.8;
+    transform: scale(1.05);
+}
+
+.saved-commands-content {
+    margin-top: 0;
+}
+
+/* NEW: Grid Layout for Commands */
+.commands-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: 2px; /* For scrollbar */
+}
+
+/* Custom Scrollbar for list */
+.commands-list::-webkit-scrollbar {
+    width: 4px;
+}
+.commands-list::-webkit-scrollbar-thumb {
+    background: var(--ios-separator);
+    border-radius: 2px;
+}
+
+.command-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 8px; /* Tighter padding */
+    background: var(--ios-input-bg);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+    height: 42px; /* Fixed height for consistency */
+    overflow: hidden;
+}
+
+.command-card:hover {
+    background: var(--ios-gray-light);
+    border-color: var(--ios-blue);
+    transform: translateY(-1px);
+}
+
+.command-card-main {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0; /* Critical for truncation */
+}
+
+.command-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+}
+
+.command-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px; /* Tighter gap */
+    min-width: 0;
+    flex: 1;
+}
+
+.command-name {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+}
+
+.command-text {
+    font-family: monospace;
+    font-size: 10px;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+}
+
+.command-card-actions {
+    display: flex;
+    gap: 2px;
+    opacity: 0;
+    transition: opacity 0.2s;
+    margin-left: 4px;
+    flex-shrink: 0;
+    background: var(--ios-gray-light); /* Ensure visibility over background */
+    border-radius: 4px;
+}
+
+.command-card:hover .command-card-actions {
+    opacity: 1;
+}
+
+.command-action-btn {
+    width: 22px;
+    height: 22px;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+}
+
+.command-action-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: var(--text-primary);
+    transform: scale(1.1);
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background: var(--ios-card);
+    border-radius: 12px;
+    padding: 20px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.modal-content h3 {
+    margin: 0 0 15px 0;
+    font-size: 16px;
+    color: var(--text-primary);
+}
+
+.modal-content .form-group {
+    margin-bottom: 15px;
+}
+
+.modal-content .form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.modal-content .form-group input {
+    width: 100%;
+    padding: 8px 12px;
+    background: var(--ios-input-bg);
+    border: 1px solid var(--ios-separator);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.modal-content .form-group input:focus {
+    outline: none;
+    border-color: var(--ios-blue);
+}
+
+.modal-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.modal-actions .btn {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.modal-actions .btn:first-child {
+    background: var(--ios-gray-light);
+    color: var(--text-primary);
+}
+
+.modal-actions .btn:first-child:hover {
+    background: var(--ios-separator);
+}
+
+.modal-actions .btn-primary {
+    background: var(--ios-blue);
+    color: white;
+}
+
+.modal-actions .btn-primary:hover {
+    opacity: 0.9;
+}
+
+.endpoint-title-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.toggle-icon {
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: transform 0.2s;
+}

package/src/server/views/dashboard.html

@@ -60,30 +60,67 @@
         <!-- CỘT TRÁI: Giao diện VG Coder -->
         <div class="left-panel">
             <div class="container">
+                <!-- Header Layout Redesign -->
                 <div class="header">
-                    <div class="header-content">
-                        <!-- Status Dot -->
-                        <span class="status" id="status" style="font-size: 14px;">●</span>
-                        
-                        <!-- NEW: Project Info Section -->
-                        <div class="project-info">
-                            <div class="project-name" id="project-name">Loading...</div>
-                            <div class="project-meta" id="project-meta">...</div>
+                    <!-- Top Row: Status, Switcher (Title), Actions -->
+                    <div class="header-top-row">
+                        <div class="header-left-group">
+                            <span class="status" id="status" style="font-size: 14px;">●</span>
+                            
+                            <!-- Project Switcher takes primary spot -->
+                            <div class="project-switcher">
+                                <select id="project-selector" class="project-selector" onchange="window.switchProject(this.value)" title="Switch Project">
+                                    <option value="">Loading...</option>
+                                </select>
+                                <span class="project-count" id="project-count">1 project</span>
+                            </div>
+                        </div>
+
+                        <!-- Right Actions -->
+                        <div class="header-actions">
+                            <button class="stop-server-btn" id="stop-server-btn" onclick="window.stopServer()" title="Stop Server">
+                                🛑
+                            </button>
+                            <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
+                                <span id="theme-icon">🌙</span>
+                            </button>
                         </div>
                     </div>
-                    <button class="theme-toggle" id="theme-toggle" title="Toggle Dark Mode">
-                        <span id="theme-icon">🌙</span>
-                    </button>
+
+                    <!-- Bottom Row: Meta Info (Path/Type) -->
+                    <div class="header-bottom-row">
+                        <div class="project-meta" id="project-meta">...</div>
+                        <!-- Hidden element to keep JS happy -->
+                        <div id="project-name" style="display: none;"></div>
+                    </div>
                 </div>
 
-                <!-- Quick Actions -->
-                <div class="endpoint-card"
-                    style="display: flex; gap: 10px; align-items: center; justify-content: space-between;">
-                    <span style="font-weight: 600;">Tools:</span>
-                    <button class="btn" onclick="createNewTerminal()"
-                        style="background: #252526; border: 1px solid #444;">
-                        <span>🖥️</span> New Terminal
-                    </button>
+                <!-- Saved Commands Panel -->
+                <div class="endpoint-card saved-commands-panel">
+                    <div class="saved-commands-header">
+                        <div class="saved-commands-title">
+                            <span class="command-icon-header">💾</span>
+                            <span>Saved Commands</span>
+                        </div>
+                        <div class="saved-commands-actions">
+                            <button class="btn-new-terminal" onclick="createNewTerminal()" title="New Terminal">
+                                🖥️
+                            </button>
+                            <button class="btn-add-command" onclick="openAddCommandModal()" title="Add Command">
+                                ➕
+                            </button>
+                        </div>
+                    </div>
+                    <div class="saved-commands-content" id="saved-commands-content">
+                        <div id="commands-list" class="commands-list">
+                            <!-- Commands will be rendered here -->
+                        </div>
+                        <div class="empty-state" id="commands-empty-state" style="display: none;">
+                            <p style="color: #888; text-align: center; padding: 15px 10px; font-size: 12px; margin: 0;">
+                                Click ➕ to add a command
+                            </p>
+                        </div>
+                    </div>
                 </div>
 
                 <!-- System Prompt Section -->
@@ -280,6 +317,100 @@
 
     <div id="floating-terminals-layer"></div>
     <div class="toast" id="toast"></div>
+    
+    <!-- Add/Edit Command Modal -->
+    <div id="command-modal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3 id="modal-title">Add Command</h3>
+            <form id="command-form">
+                <div class="form-group">
+                    <label>Icon (emoji)</label>
+                    <input type="text" id="command-icon" placeholder="🚀" maxlength="2" required>
+                </div>
+                <div class="form-group">
+                    <label>Name</label>
+                    <input type="text" id="command-name" placeholder="Run Dev Server" required>
+                </div>
+                <div class="form-group">
+                    <label>Command</label>
+                    <input type="text" id="command-text" placeholder="npm run dev" required>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="btn" onclick="closeCommandModal()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <!-- VG Coder Parent Context Detector -->
+    <script>
+        // Listener for nested iframe detection
+        // When extension's controller.ts sends VG_CODER_PING, we reply with VG_CODER_PARENT
+        window.addEventListener('message', (event) => {
+            if (event.data?.type === 'VG_CODER_PING') {
+                // Confirm this is VG Coder parent context
+                event.source.postMessage({ type: 'VG_CODER_PARENT' }, '*');
+                console.log('📡 Responded to VG_CODER_PING from iframe:', event.origin);
+            }
+        });
+    </script>
+    
+    <!-- Embedded Mode Detection -->
+    <script>
+        // When dashboard is loaded with ?embedded=true (inside AI chat page),
+        // hide the AI tab and iframe to prevent nested structure
+        (function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const isEmbedded = urlParams.has('embedded');
+            
+            if (isEmbedded) {
+                console.log('🎯 Embedded mode detected - hiding AI iframe tab');
+                
+                // Wait for DOM to be ready
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', hideAITab);
+                } else {
+                    hideAITab();
+                }
+                
+                function hideAITab() {
+                    // Hide AI tab
+                    const aiTab = document.getElementById('ai-tab');
+                    if (aiTab) {
+                        aiTab.style.display = 'none';
+                        console.log('✅ AI tab hidden');
+                    }
+                    
+                    // Hide AI iframe container
+                    const aiContainer = document.querySelector('.ai-iframe-container');
+                    if (aiContainer) {
+                        aiContainer.style.display = 'none';
+                        console.log('✅ AI iframe container hidden');
+                    }
+                    
+                    // Switch to first editor tab if exists, or show monaco by default
+                    const fileTabsContainer = document.getElementById('file-tabs-container');
+                    if (fileTabsContainer && fileTabsContainer.children.length > 0) {
+                        // Click first file tab
+                        const firstTab = fileTabsContainer.children[0];
+                        if (firstTab) firstTab.click();
+                    } else {
+                        // Show monaco editor as default
+                        const monacoContainer = document.getElementById('monaco-container');
+                        if (monacoContainer) {
+                            monacoContainer.classList.remove('view-mode-hidden');
+                        }
+                    }
+                }
+            }
+        })();
+    </script>
+    
+    <!-- Smart Log Copy Utilities -->
+    <script src="/js/utils/log-utils.js"></script>
+    <script src="/js/utils/smart-copy-engine.js"></script>
+    
     <script type="module" src="/js/main.js"></script>
 </body>