vg-coder-cli 2.0.34 → 2.0.36

package/src/server/views/js/features/tool-window.js

@@ -0,0 +1,154 @@
+import { getById, qsa } from '../utils.js';
+
+let activePanel = null;
+
+/**
+ * Initialize Tool Window system
+ */
+export function initToolWindow() {
+    const toolWindowBar = getById('tool-window-bar');
+    if (!toolWindowBar) {
+        console.warn('[ToolWindow] Tool window bar not found');
+        return;
+    }
+
+    // Attach event listeners to all tool window icons
+    const icons = qsa('.tool-window-icon');
+    icons.forEach(icon => {
+        icon.addEventListener('click', () => {
+            const panelId = icon.dataset.panel;
+            if (panelId) {
+                togglePanel(panelId);
+            }
+        });
+    });
+
+    // Open Project panel by default after a short delay
+    // This ensures all panel listeners are registered first
+    setTimeout(() => {
+        togglePanel('project');
+    }, 100);
+
+    console.log('[ToolWindow] Initialized with Project panel active');
+}
+
+/**
+ * Toggle a specific panel
+ * @param {string} panelId - Panel ID to toggle (e.g., 'project', 'git')
+ */
+export function togglePanel(panelId) {
+    const panel = getById(`tool-panel-${panelId}`);
+    const container = getById('tool-panel-container');
+    const icon = qsa(`.tool-window-icon[data-panel="${panelId}"]`)[0];
+
+    if (!panel || !container) {
+        console.error('[ToolWindow] Panel or container not found:', panelId);
+        return;
+    }
+
+    // If clicking the same active panel, close it
+    if (activePanel === panelId) {
+        closeAllPanels();
+        return;
+    }
+
+    // Close all panels first
+    closeAllPanels();
+
+    // Open the new panel
+    setActivePanel(panelId);
+    container.classList.add('expanded');
+    panel.classList.add('active');
+    if (icon) icon.classList.add('active');
+
+    activePanel = panelId;
+
+    // Trigger panel-specific initialization if needed
+    triggerPanelInit(panelId);
+
+    console.log('[ToolWindow] Opened panel:', panelId);
+}
+
+/**
+ * Close all open panels
+ */
+export function closeAllPanels() {
+    const container = getById('tool-panel-container');
+    const panels = qsa('.tool-panel');
+    const icons = qsa('.tool-window-icon');
+
+    if (container) {
+        container.classList.remove('expanded');
+    }
+
+    panels.forEach(panel => {
+        panel.classList.remove('active');
+    });
+
+    icons.forEach(icon => {
+        icon.classList.remove('active');
+    });
+
+    activePanel = null;
+
+    console.log('[ToolWindow] Closed all panels');
+}
+
+/**
+ * Set a panel as active (internal use)
+ * @param {string} panelId - Panel ID
+ */
+function setActivePanel(panelId) {
+    const panels = qsa('.tool-panel');
+    panels.forEach(panel => {
+        if (panel.id === `tool-panel-${panelId}`) {
+            panel.classList.add('active');
+        } else {
+            panel.classList.remove('active');
+        }
+    });
+}
+
+/**
+ * Trigger initialization for panel-specific features
+ * @param {string} panelId - Panel ID
+ */
+function triggerPanelInit(panelId) {
+    // Dispatch custom event that panel modules can listen to
+    const event = new CustomEvent('tool-panel-opened', {
+        detail: { panelId }
+    });
+    document.dispatchEvent(event);
+}
+
+/**
+ * Get the currently active panel ID
+ * @returns {string|null} Active panel ID or null
+ */
+export function getActivePanel() {
+    return activePanel;
+}
+
+/**
+ * Register a callback for when a panel is closed
+ * @param {Function} callback - Callback function
+ */
+export function onPanelClose(callback) {
+    const container = getById('tool-panel-container');
+    if (container) {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'class') {
+                    if (!container.classList.contains('expanded')) {
+                        callback();
+                    }
+                }
+            });
+        });
+        observer.observe(container, { attributes: true });
+    }
+}
+
+// Expose to window for HTML onclick if needed
+window.toggleToolPanel = togglePanel;
+window.closeToolPanels = closeAllPanels;

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

@@ -36,6 +36,17 @@ export function initEventHandlers() {
         }
     });
 
+    // Copy System Prompt
+    globalDispatcher.on(EVENT_TYPES.COPY_PROMPT, async (event) => {
+        console.log('[Handlers] Copy Prompt event received:', event);
+        try {
+            await navigator.clipboard.writeText(SYSTEM_PROMPT);
+            showToast('📋 Copied System Prompt', 'success');
+        } catch (err) {
+            showToast('Failed to copy: ' + err.message, 'error');
+        }
+    });
+
     console.log('[Handlers] Event handlers initialized');
 }
 
@@ -159,7 +170,8 @@ export async function testExecute(event) {
 export async function executeFromClipboard(event) {
     const btn = event?.target?.closest('.btn');
     const bashInput = getById('execute-bash');
-    if (!bashInput) return;
+    
+    // Don't return early if bashInput is missing - it's optional when called from bubble menu
 
     if (btn) showLoading(btn, btn.innerHTML);
     try {
@@ -169,13 +181,25 @@ export async function executeFromClipboard(event) {
             if (btn) resetButton(btn);
             return;
         }
-        bashInput.value = clipboardText;
+        
+        // Only populate bashInput if it exists (when called from dashboard)
+        if (bashInput) {
+            bashInput.value = clipboardText;
+        }
+        
         const data = await executeScript(clipboardText);
-        showResponse('execute-response', data, !data.success);
+        
+        // Only show response in execute-response container if it exists
+        const responseContainer = getById('execute-response');
+        if (responseContainer) {
+            showResponse('execute-response', data, !data.success);
+        }
         
         if (data.success) {
             showToast('Thực thi OK', 'success');
-            bashInput.value = '';
+            if (bashInput) {
+                bashInput.value = '';
+            }
         } else {
             data.syntaxError ? showToast('Lỗi syntax script', 'error') : showToast('Thực thi thất bại', 'error');
         }
@@ -183,7 +207,10 @@ export async function executeFromClipboard(event) {
         if (err.name === 'NotAllowedError') {
             showToast('Không có quyền clipboard', 'error');
         } else {
-            showResponse('execute-response', { error: err.message }, true);
+            const responseContainer = getById('execute-response');
+            if (responseContainer) {
+                showResponse('execute-response', { error: err.message }, true);
+            }
             showToast('Lỗi: ' + err.message, 'error');
         }
     }

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

@@ -8,9 +8,15 @@ import { initEditorTabs } from './features/editor-tabs.js';
 // REMOVED: initMonaco
 import { initResizeHandler } from './features/resize.js';
 import { initSavedCommands } from './features/commands.js';
-import { initProjectSwitcher } from './features/project-switcher.js';
 import './features/structure.js';
 import { initBubble } from './features/bubble.js';
+import { initKeyboardShortcuts } from './features/keyboard-shortcuts.js';
+
+// NEW: Import Tool Window modules
+import { initToolWindow } from './features/tool-window.js';
+import { initProjectPanel } from './features/project-panel.js';
+import { initGitPanel } from './features/git-panel.js';
+import { initCommandsPanel } from './features/commands-panel.js';
 
 export async function initMain() {
     console.log('VG Coder: Starting Main Logic...');
@@ -19,8 +25,6 @@ export async function initMain() {
         const promptEl = getById('prompt-text');
         if (promptEl) promptEl.textContent = SYSTEM_PROMPT;
         
-        await checkServerStatus();
-        await loadProjectInfo();
 
         initTheme();
         loadExtensionPath();
@@ -28,15 +32,24 @@ export async function initMain() {
         // Initialize event handlers FIRST (before bubble which dispatches events)
         initEventHandlers();
         
+        // NEW: Initialize Tool Window system
+        initToolWindow();
+        initProjectPanel();
+        initGitPanel();
+        initCommandsPanel();
+        
         initGitView();
         initTerminal();
         initEditorTabs();
         initResizeHandler();
         initSavedCommands();
-        await initProjectSwitcher();
+        // initProjectSwitcher(); // REMOVED: project-panel.js now handles project polling
         
         // Init Bubble (will use event protocol)
         initBubble();
+        
+        // Initialize keyboard shortcuts (global hotkeys for Shadow DOM)
+        initKeyboardShortcuts();
 
         console.log('✅ VG Coder: Initialization Complete');
     } catch (e) {
@@ -44,11 +57,9 @@ export async function initMain() {
     }
 }
 
-// ... (Giữ nguyên các hàm helper khác: switchProject, loadProjectInfo, initTheme...)
 // Để ngắn gọn, tôi copy lại phần còn lại của main.js
 window.addEventListener('project-switched', async (event) => {
     const { projectId, projectName } = event.detail;
-    await loadProjectInfo();
     if (window.updateTerminalVisibility) window.updateTerminalVisibility(projectId);
     if (window.loadSavedCommands) await window.loadSavedCommands();
     const treeContainer = getById('structure-tree');
@@ -57,31 +68,6 @@ window.addEventListener('project-switched', async (event) => {
     if (treeContent) treeContent.innerHTML = '';
 });
 
-async function checkServerStatus() {
-    const statusEl = getById('status');
-    if (!statusEl) return;
-    const isHealthy = await checkHealth();
-    if (isHealthy) {
-        statusEl.textContent = '●';
-        statusEl.style.background = 'transparent';
-        statusEl.style.color = 'var(--ios-green)';
-    } else {
-        statusEl.textContent = '●';
-        statusEl.style.background = 'transparent';
-        statusEl.style.color = 'var(--ios-red)';
-    }
-}
-
-async function loadProjectInfo() {
-    try {
-        const res = await fetch(`${API_BASE}/api/info?path=.`);
-        const data = await res.json();
-        const projectNameEl = getById('project-name');
-        const projectMetaEl = getById('project-meta');
-        if (projectNameEl) projectNameEl.textContent = data.path.split(/[\\/]/).pop();
-        if (projectMetaEl) projectMetaEl.textContent = `${data.primaryType} • ${data.path}`;
-    } catch (err) {}
-}
 
 function initTheme() {
     const themeBtn = getById('theme-toggle');