vg-coder-cli 2.0.40 → 2.0.42

package/src/server/views/js/features/browser-panel.js

@@ -0,0 +1,130 @@
+import { getById } from '../utils.js';
+
+const STORAGE_KEY_BROWSER_URL = 'vg-coder-browser-url';
+const DEFAULT_URL = 'https://www.google.com';
+
+/**
+ * Initialize Browser Panel
+ */
+export function initBrowserPanel() {
+    // Listen for panel open event
+    document.addEventListener('tool-panel-opened', (e) => {
+        if (e.detail.panelId === 'browser' && e.detail.side === 'right') {
+            renderBrowserPanel();
+        }
+    });
+
+    console.log('[BrowserPanel] Initialized');
+}
+
+/**
+ * Render browser panel content
+ */
+function renderBrowserPanel() {
+    const container = getById('browser-panel-content');
+    if (!container) {
+        console.error('[BrowserPanel] Container not found');
+        return;
+    }
+
+    // Check if already rendered
+    if (container.querySelector('.browser-panel-wrapper')) {
+        return;
+    }
+
+    // Get saved URL or use default
+    const savedUrl = localStorage.getItem(STORAGE_KEY_BROWSER_URL) || DEFAULT_URL;
+
+    // Create browser panel UI
+    container.innerHTML = `
+        <div class="browser-panel-wrapper">
+            <div class="browser-toolbar">
+                <input 
+                    type="text" 
+                    id="browser-url-input" 
+                    class="browser-url-input" 
+                    placeholder="Enter URL..." 
+                    value="${savedUrl}"
+                />
+                <button id="browser-go-btn" class="browser-go-btn" title="Go">→</button>
+                <button id="browser-refresh-btn" class="browser-refresh-btn" title="Refresh">🔄</button>
+            </div>
+            <iframe 
+                id="browser-iframe" 
+                class="browser-iframe" 
+                src="${savedUrl}"
+                sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+            ></iframe>
+        </div>
+    `;
+
+    // Attach event listeners
+    attachBrowserListeners();
+
+    console.log('[BrowserPanel] Rendered with URL:', savedUrl);
+}
+
+/**
+ * Attach event listeners for browser controls
+ */
+function attachBrowserListeners() {
+    const urlInput = getById('browser-url-input');
+    const goBtn = getById('browser-go-btn');
+    const refreshBtn = getById('browser-refresh-btn');
+    const iframe = getById('browser-iframe');
+
+    if (!urlInput || !goBtn || !iframe) {
+        console.error('[BrowserPanel] UI elements not found');
+        return;
+    }
+
+    // Navigate on button click
+    goBtn.addEventListener('click', () => {
+        navigateToUrl(urlInput.value, iframe);
+    });
+
+    // Navigate on Enter key
+    urlInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            navigateToUrl(urlInput.value, iframe);
+        }
+    });
+
+    // Refresh iframe
+    if (refreshBtn) {
+        refreshBtn.addEventListener('click', () => {
+            iframe.src = iframe.src; // Reload current URL
+        });
+    }
+
+    console.log('[BrowserPanel] Event listeners attached');
+}
+
+/**
+ * Navigate to URL
+ */
+function navigateToUrl(url, iframe) {
+    if (!url) return;
+
+    // Add protocol if missing
+    let finalUrl = url;
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        finalUrl = 'https://' + url;
+    }
+
+    try {
+        iframe.src = finalUrl;
+        // Save URL to localStorage
+        localStorage.setItem(STORAGE_KEY_BROWSER_URL, finalUrl);
+        
+        // Update input with final URL
+        const urlInput = getById('browser-url-input');
+        if (urlInput) {
+            urlInput.value = finalUrl;
+        }
+
+        console.log('[BrowserPanel] Navigated to:', finalUrl);
+    } catch (e) {
+        console.error('[BrowserPanel] Navigation failed:', e);
+    }
+}

package/src/server/views/js/features/git-view.js

@@ -1,6 +1,6 @@
 import { getById, qsa, showToast } from '../utils.js';
 import { getGitDiff } from '../api.js';
-import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui';
+import { Diff2HtmlUI } from 'diff2html/lib-esm/src/ui/js/diff2html-ui';
 
 let isGitMode = false;
 

package/src/server/views/js/features/keyboard-shortcuts.js

@@ -101,7 +101,7 @@ function isFromVGCoder(event) {
 /**
  * Toggle VG Coder dashboard visibility
  */
-function toggleDashboard() {
+export function toggleDashboard() {
     const appRoot = getById('vg-app-root');
     if (!appRoot) {
         console.warn('[Keyboard] Cannot toggle dashboard: vg-app-root not found');

package/src/server/views/js/features/resize.js

@@ -1,6 +1,50 @@
 import { qs, getById } from '../utils.js';
 
+const STORAGE_KEY_LEFT_WIDTH = 'vg-coder-left-panel-width';
+const STORAGE_KEY_RIGHT_WIDTH = 'vg-coder-right-panel-width';
+
 export function initResizeHandler() {
+    initLeftResizeHandler();
+    initRightResizeHandler();
+    loadSavedWidths();
+}
+
+/**
+ * Load saved panel widths from localStorage
+ */
+function loadSavedWidths() {
+    const leftWidth = localStorage.getItem(STORAGE_KEY_LEFT_WIDTH);
+    const rightWidth = localStorage.getItem(STORAGE_KEY_RIGHT_WIDTH);
+
+    const leftContainer = getById('tool-panel-container');
+    const rightContainer = getById('tool-panel-container-right');
+
+    if (leftWidth && leftContainer) {
+        leftContainer.style.width = leftWidth;
+        console.log('[Resize] Loaded left panel width:', leftWidth);
+    }
+
+    if (rightWidth && rightContainer) {
+        rightContainer.style.width = rightWidth;
+        console.log('[Resize] Loaded right panel width:', rightWidth);
+    }
+}
+
+/**
+ * Save panel width to localStorage
+ */
+function saveWidth(key, width) {
+    try {
+        localStorage.setItem(key, `${width}px`);
+    } catch (e) {
+        console.warn('[Resize] Failed to save width:', e);
+    }
+}
+
+/**
+ * Initialize resize handler for left tool panel
+ */
+function initLeftResizeHandler() {
     const toolPanelContainer = getById('tool-panel-container');
     const handle = getById('resize-handler');
 
@@ -38,6 +82,64 @@ export function initResizeHandler() {
         if (isResizing) {
             isResizing = false;
             document.body.classList.remove('resizing');
+            
+            // Save width to localStorage
+            const finalWidth = toolPanelContainer.getBoundingClientRect().width;
+            saveWidth(STORAGE_KEY_LEFT_WIDTH, finalWidth);
+        }
+    });
+
+    console.log('[Resize] Left resize handler initialized');
+}
+
+/**
+ * Initialize resize handler for right tool panel
+ */
+function initRightResizeHandler() {
+    const toolPanelContainerRight = getById('tool-panel-container-right');
+    const handleRight = getById('resize-handler-right');
+
+    if (!toolPanelContainerRight || !handleRight) {
+        return;
+    }
+
+    let isResizing = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    handleRight.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        startX = e.clientX;
+        startWidth = toolPanelContainerRight.getBoundingClientRect().width;
+        
+        document.body.classList.add('resizing');
+        e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        if (!isResizing) return;
+
+        requestAnimationFrame(() => {
+            const currentX = e.clientX;
+            // For right panel, dragging left (negative diff) should increase width
+            const diffX = startX - currentX; // Inverted direction
+            const newWidth = Math.max(250, Math.min(600, startWidth + diffX)); // Min 250px, Max 600px
+            
+            // Update width of tool-panel-container-right
+            toolPanelContainerRight.style.width = `${newWidth}px`;
+        });
+    });
+
+    document.addEventListener('mouseup', () => {
+        if (isResizing) {
+            isResizing = false;
+            document.body.classList.remove('resizing');
+            
+            // Save width to localStorage
+            const finalWidth = toolPanelContainerRight.getBoundingClientRect().width;
+            saveWidth(STORAGE_KEY_RIGHT_WIDTH, finalWidth);
         }
     });
+
+    console.log('[Resize] Right resize handler initialized');
 }

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

@@ -1,19 +1,25 @@
 import { getById, qsa } from '../utils.js';
+import { toggleDashboard } from './keyboard-shortcuts.js';
 
 let activePanel = null;
+let activePanelRight = null;
+
+const STORAGE_KEY_ACTIVE_PANEL_LEFT = 'vg-coder-active-panel-left';
+const STORAGE_KEY_ACTIVE_PANEL_RIGHT = 'vg-coder-active-panel-right';
 
 /**
  * Initialize Tool Window system
  */
 export function initToolWindow() {
+    // Initialize left tool window bar
     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');
+    // Attach event listeners to all tool window icons (left side)
+    const icons = qsa('#tool-window-bar .tool-window-icon');
     icons.forEach(icon => {
         icon.addEventListener('click', () => {
             const panelId = icon.dataset.panel;
@@ -23,23 +29,69 @@ export function initToolWindow() {
         });
     });
 
-    // Open Project panel by default after a short delay
-    // This ensures all panel listeners are registered first
+    // Initialize right tool window bar
+    const toolWindowBarRight = getById('tool-window-bar-right');
+    if (toolWindowBarRight) {
+        const iconsRight = qsa('#tool-window-bar-right .tool-window-icon');
+        iconsRight.forEach(icon => {
+            icon.addEventListener('click', () => {
+                const panelId = icon.dataset.panel;
+                if (panelId) {
+                    togglePanelRight(panelId);
+                }
+            });
+        });
+        console.log('[ToolWindow] Right tool window bar initialized');
+    }
+    
+    // Initialize exit button
+    const exitBtn = getById('exit-dashboard-btn');
+    if (exitBtn) {
+        exitBtn.addEventListener('click', () => {
+            toggleDashboard();
+            console.log('[ToolWindow] Dashboard toggled via exit button');
+        });
+        console.log('[ToolWindow] Exit button initialized');
+    }
+
+    // Restore saved panel states after a short delay
     setTimeout(() => {
-        togglePanel('project');
+        restorePanelStates();
     }, 100);
 
-    console.log('[ToolWindow] Initialized with Project panel active');
+    console.log('[ToolWindow] Initialized');
+}
+
+/**
+ * Restore previously active panels from localStorage
+ */
+function restorePanelStates() {
+    // Restore left panel
+    const savedLeftPanel = localStorage.getItem(STORAGE_KEY_ACTIVE_PANEL_LEFT);
+    if (savedLeftPanel) {
+        togglePanel(savedLeftPanel);
+    } else {
+        // Default to project panel if no saved state
+        togglePanel('project');
+    }
+
+    // Restore right panel
+    const savedRightPanel = localStorage.getItem(STORAGE_KEY_ACTIVE_PANEL_RIGHT);
+    if (savedRightPanel) {
+        togglePanelRight(savedRightPanel);
+    }
+
+    console.log('[ToolWindow] Restored panel states - Left:', savedLeftPanel || 'project', 'Right:', savedRightPanel || 'none');
 }
 
 /**
- * Toggle a specific panel
+ * Toggle a specific panel (left side)
  * @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];
+    const icon = qsa(`#tool-window-bar .tool-window-icon[data-panel="${panelId}"]`)[0];
 
     if (!panel || !container) {
         console.error('[ToolWindow] Panel or container not found:', panelId);
@@ -58,10 +110,22 @@ export function togglePanel(panelId) {
     // Open the new panel
     setActivePanel(panelId);
     container.classList.add('expanded');
+    
+    // Restore saved width from localStorage (or use default)
+    const savedWidth = localStorage.getItem('vg-coder-left-panel-width');
+    if (savedWidth) {
+        container.style.width = savedWidth;
+    } else {
+        container.style.width = '520px'; // Default width
+    }
+    
     panel.classList.add('active');
     if (icon) icon.classList.add('active');
 
     activePanel = panelId;
+    
+    // Save active panel state to localStorage
+    localStorage.setItem(STORAGE_KEY_ACTIVE_PANEL_LEFT, panelId);
 
     // Trigger panel-specific initialization if needed
     triggerPanelInit(panelId);
@@ -70,15 +134,65 @@ export function togglePanel(panelId) {
 }
 
 /**
- * Close all open panels
+ * Toggle a specific panel (right side)
+ * @param {string} panelId - Panel ID to toggle (e.g., 'agent', 'browser')
+ */
+export function togglePanelRight(panelId) {
+    const panel = getById(`tool-panel-${panelId}`);
+    const container = getById('tool-panel-container-right');
+    const icon = qsa(`#tool-window-bar-right .tool-window-icon[data-panel="${panelId}"]`)[0];
+
+    if (!panel || !container) {
+        console.error('[ToolWindow] Right panel or container not found:', panelId);
+        return;
+    }
+
+    // If clicking the same active panel, close it
+    if (activePanelRight === panelId) {
+        closeAllPanelsRight();
+        return;
+    }
+
+    // Close all right panels first
+    closeAllPanelsRight();
+
+    // Open the new panel
+    container.classList.add('expanded');
+    
+    // Restore saved width from localStorage (or use default)
+    const savedWidth = localStorage.getItem('vg-coder-right-panel-width');
+    if (savedWidth) {
+        container.style.width = savedWidth;
+    } else {
+        container.style.width = '520px'; // Default width
+    }
+    
+    panel.classList.add('active');
+    if (icon) icon.classList.add('active');
+
+    activePanelRight = panelId;
+    
+    // Save active right panel state to localStorage
+    localStorage.setItem(STORAGE_KEY_ACTIVE_PANEL_RIGHT, panelId);
+
+    // Trigger panel-specific initialization if needed
+    triggerPanelInit(panelId, 'right');
+
+    console.log('[ToolWindow] Opened right panel:', panelId);
+}
+
+/**
+ * Close all open panels (left side)
  */
 export function closeAllPanels() {
     const container = getById('tool-panel-container');
-    const panels = qsa('.tool-panel');
-    const icons = qsa('.tool-window-icon');
+    const panels = qsa('#tool-panel-container .tool-panel');
+    const icons = qsa('#tool-window-bar .tool-window-icon');
 
     if (container) {
         container.classList.remove('expanded');
+        // Set width to 0 to collapse panel (saved width will be restored on open)
+        container.style.width = '0';
     }
 
     panels.forEach(panel => {
@@ -90,16 +204,52 @@ export function closeAllPanels() {
     });
 
     activePanel = null;
+    
+    // Clear saved panel state
+    localStorage.removeItem(STORAGE_KEY_ACTIVE_PANEL_LEFT);
 
     console.log('[ToolWindow] Closed all panels');
 }
 
+
+/**
+ * Close all open panels (right side)
+ */
+export function closeAllPanelsRight() {
+    const container = getById('tool-panel-container-right');
+    const panels = qsa('#tool-panel-container-right .tool-panel');
+    const icons = qsa('#tool-window-bar-right .tool-window-icon');
+
+    if (container) {
+        container.classList.remove('expanded');
+        // Set width to 0 to collapse panel (saved width will be restored on open)
+        container.style.width = '0';
+    }
+
+    panels.forEach(panel => {
+        panel.classList.remove('active');
+    });
+
+    icons.forEach(icon => {
+        icon.classList.remove('active');
+    });
+
+    activePanelRight = null;
+    
+    // Clear saved right panel state
+    localStorage.removeItem(STORAGE_KEY_ACTIVE_PANEL_RIGHT);
+
+    console.log('[ToolWindow] Closed all right panels');
+}
+
+
 /**
  * Set a panel as active (internal use)
  * @param {string} panelId - Panel ID
  */
 function setActivePanel(panelId) {
-    const panels = qsa('.tool-panel');
+    // Only select panels from left container to avoid affecting right panels
+    const panels = qsa('#tool-panel-container .tool-panel');
     panels.forEach(panel => {
         if (panel.id === `tool-panel-${panelId}`) {
             panel.classList.add('active');
@@ -109,14 +259,16 @@ function setActivePanel(panelId) {
     });
 }
 
+
 /**
  * Trigger initialization for panel-specific features
  * @param {string} panelId - Panel ID
+ * @param {string} side - 'left' or 'right'
  */
-function triggerPanelInit(panelId) {
+function triggerPanelInit(panelId, side = 'left') {
     // Dispatch custom event that panel modules can listen to
     const event = new CustomEvent('tool-panel-opened', {
-        detail: { panelId }
+        detail: { panelId, side }
     });
     document.dispatchEvent(event);
 }
@@ -129,6 +281,14 @@ export function getActivePanel() {
     return activePanel;
 }
 
+/**
+ * Get the currently active right panel ID
+ * @returns {string|null} Active right panel ID or null
+ */
+export function getActivePanelRight() {
+    return activePanelRight;
+}
+
 /**
  * Register a callback for when a panel is closed
  * @param {Function} callback - Callback function
@@ -152,3 +312,5 @@ export function onPanelClose(callback) {
 // Expose to window for HTML onclick if needed
 window.toggleToolPanel = togglePanel;
 window.closeToolPanels = closeAllPanels;
+window.toggleToolPanelRight = togglePanelRight;
+window.closeToolPanelsRight = closeAllPanelsRight;

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

@@ -17,6 +17,8 @@ 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';
+import { initBrowserPanel } from './features/browser-panel.js';
+import { initAgentPanel } from './features/agent-panel.js';
 
 export async function initMain() {
     console.log('VG Coder: Starting Main Logic...');
@@ -37,6 +39,8 @@ export async function initMain() {
         initProjectPanel();
         initGitPanel();
         initCommandsPanel();
+        initBrowserPanel();
+        initAgentPanel();
         
         initGitView();
         initTerminal();