vg-coder-cli 2.0.35 → 2.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vg-coder-cli",
-  "version": "2.0.35",
+  "version": "2.0.36",
   "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
   "main": "src/index.js",
   "bin": {

package/src/server/api-server.js

@@ -136,6 +136,25 @@ class ApiServer {
         res.send(content);
     });
 
+    // Count tokens using TokenManager (tiktoken)
+    this.app.post('/api/count-tokens', async (req, res) => {
+      try {
+        const { text } = req.body;
+        
+        if (!text) {
+          return res.json({ tokens: 0 });
+        }
+        
+        const tokenManager = new TokenManager();
+        const tokens = tokenManager.countTokens(text);
+        
+        res.json({ tokens });
+      } catch (error) {
+        console.error('Token counting error:', error);
+        res.status(500).json({ error: error.message, tokens: 0 });
+      }
+    });
+
     // --- PROJECT MANAGEMENT APIS (FIXED) ---
     
     // List all projects

package/src/server/views/css/shortcuts-help.css

@@ -0,0 +1,165 @@
+/* Keyboard Shortcuts Help Panel */
+.vg-shortcuts-help {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 2147483646; /* Just below bubble */
+    animation: fadeIn 0.2s ease;
+}
+
+.vg-shortcuts-help.visible {
+    display: flex;
+}
+
+.vg-shortcuts-panel {
+    background: var(--bg-secondary, #1e1e1e);
+    border-radius: 12px;
+    padding: 32px;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    animation: slideUp 0.3s ease;
+    position: relative;
+}
+
+.vg-shortcuts-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid var(--border-color, #333);
+}
+
+.vg-shortcuts-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary, #fff);
+}
+
+.vg-shortcuts-close {
+    background: transparent;
+    border: none;
+    font-size: 28px;
+    cursor: pointer;
+    color: var(--text-secondary, #888);
+    transition: all 0.2s;
+    padding: 4px 8px;
+    border-radius: 6px;
+    line-height: 1;
+}
+
+.vg-shortcuts-close:hover {
+    background: var(--bg-hover, #333);
+    color: var(--text-primary, #fff);
+}
+
+.vg-shortcuts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.vg-shortcut-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: var(--bg-primary, #2a2a2a);
+    border-radius: 8px;
+    transition: all 0.2s;
+}
+
+.vg-shortcut-item:hover {
+    background: var(--bg-hover, #333);
+    transform: translateX(4px);
+}
+
+.vg-shortcut-desc {
+    color: var(--text-primary, #fff);
+    font-size: 15px;
+}
+
+.vg-shortcut-keys {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.vg-shortcut-key {
+    background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
+    border: 1px solid #555;
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+    color: var(--text-primary, #fff);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    min-width: 32px;
+    text-align: center;
+}
+
+.vg-shortcut-plus {
+    color: var(--text-secondary, #888);
+    font-size: 12px;
+}
+
+.vg-shortcuts-footer {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color, #333);
+    text-align: center;
+    color: var(--text-secondary, #888);
+    font-size: 13px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dark theme compatibility */
+[data-theme="dark"] .vg-shortcuts-help {
+    --bg-primary: #1e1e1e;
+    --bg-secondary: #2a2a2a;
+    --bg-hover: #333;
+    --text-primary: #fff;
+    --text-secondary: #888;
+    --border-color: #444;
+}
+
+/* Light theme */
+[data-theme="light"] .vg-shortcuts-help {
+    --bg-primary: #f5f5f5;
+    --bg-secondary: #fff;
+    --bg-hover: #e8e8e8;
+    --text-primary: #333;
+    --text-secondary: #666;
+    --border-color: #ddd;
+}

package/src/server/views/dashboard.html

@@ -130,6 +130,25 @@
         </div>
     </div>
     
+    <!-- Keyboard Shortcuts Help Overlay -->
+    <div id="shortcuts-help" class="vg-shortcuts-help">
+        <div class="vg-shortcuts-panel">
+            <div class="vg-shortcuts-header">
+                <div class="vg-shortcuts-title">
+                    <span>⌨️</span>
+                    <span>Keyboard Shortcuts</span>
+                </div>
+                <button class="vg-shortcuts-close" onclick="window.toggleShortcutsHelp()">×</button>
+            </div>
+            <div id="shortcuts-list" class="vg-shortcuts-list">
+                <!-- Shortcuts will be rendered dynamically by keyboard-shortcuts.js -->
+            </div>
+            <div class="vg-shortcuts-footer">
+                Press <kbd class="vg-shortcut-key">Cmd</kbd> + <kbd class="vg-shortcut-key">/</kbd> to toggle this help
+            </div>
+        </div>
+    </div>
+    
     <!-- Scripts injected via Gulp -->
 </body>
 </html>

package/src/server/views/js/api.js

@@ -144,3 +144,16 @@ export async function copyToClipboard(text) {
 export async function readFromClipboard() {
     return await navigator.clipboard.readText();
 }
+
+export async function countTokens(text) {
+    const res = await fetch(`${API_BASE}/api/count-tokens`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text })
+    });
+    if (!res.ok) {
+        throw new Error('Failed to count tokens');
+    }
+    const data = await res.json();
+    return data.tokens || 0;
+}

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

@@ -0,0 +1,333 @@
+/**
+ * VG Coder Keyboard Shortcuts Module (Shadow DOM Compatible)
+ * 
+ * Global keyboard shortcuts that work when VG Coder is injected via extension.
+ * Uses document-level listeners and composedPath() to check Shadow DOM isolation.
+ */
+
+import { getById, getRoot } from '../utils.js';
+
+/**
+ * Centralized keyboard shortcuts configuration
+ * Single source of truth for all shortcuts
+ */
+const SHORTCUTS_CONFIG = [
+    {
+        key: '3',
+        action: 'toggle-dashboard',
+        description: 'Toggle VG Coder Dashboard (Open/Close)',
+    },
+    {
+        key: '4',
+        action: 'open-git-panel',
+        description: 'Open VG Coder & Activate Git Panel',
+    },
+    {
+        key: '/',
+        action: 'help-shortcuts',
+        description: 'Show/Hide Keyboard Shortcuts Help',
+    },
+];
+
+/**
+ * Generate shortcuts registry from config
+ * Automatically creates CMD+key and CTRL+key variants
+ */
+const SHORTCUTS = {};
+SHORTCUTS_CONFIG.forEach(({ key, action }) => {
+    SHORTCUTS[`CMD+${key.toUpperCase()}`] = action;
+    SHORTCUTS[`CTRL+${key.toUpperCase()}`] = action;
+});
+
+// Platform detection
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
+
+/**
+ * Convert keyboard event to shortcut key string
+ * @param {KeyboardEvent} event - Keyboard event
+ * @returns {string|null} Shortcut key string (e.g., "CMD+4")
+ */
+function getShortcutKey(event) {
+    const parts = [];
+    
+    // Add modifier keys
+    if (event.metaKey) parts.push('CMD');
+    if (event.ctrlKey) parts.push('CTRL');
+    if (event.altKey) parts.push('ALT');
+    if (event.shiftKey) parts.push('SHIFT');
+    
+    // Add main key (use event.key for number keys)
+    const key = event.key;
+    
+    // Skip if only modifiers were pressed
+    if (['Meta', 'Control', 'Alt', 'Shift'].includes(key)) {
+        return null;
+    }
+    
+    parts.push(key.toUpperCase());
+    
+    return parts.join('+');
+}
+
+/**
+ * Check if event originated from VG Coder Shadow DOM
+ * @param {KeyboardEvent} event - Keyboard event
+ * @returns {boolean} True if event is from VG Coder
+ */
+function isFromVGCoder(event) {
+    try {
+        // SIMPLIFIED APPROACH: Since we're in shadow DOM context,
+        // just check if VG Coder elements exist (we're always "in" VG Coder)
+        // This works because the bundle is only loaded when VG Coder is active
+        const appRoot = getById('vg-app-root');
+        const bubble = getById('vg-bubble');
+        
+        // If VG Coder is loaded, we should handle ALL keyboard events
+        // (We're in isolated shadow DOM, so we won't interfere with page events)
+        const vgCoderExists = !!(appRoot || bubble);
+        
+        if (!vgCoderExists) {
+            console.warn('[Keyboard] VG Coder elements not found');
+            return false;
+        }
+        
+        return true;
+    } catch (err) {
+        console.warn('[Keyboard] Error checking VG Coder:', err);
+        return false;
+    }
+}
+
+/**
+ * Toggle VG Coder dashboard visibility
+ */
+function toggleDashboard() {
+    const appRoot = getById('vg-app-root');
+    if (!appRoot) {
+        console.warn('[Keyboard] Cannot toggle dashboard: vg-app-root not found');
+        return;
+    }
+    
+    const isVisible = appRoot.classList.contains('visible');
+    
+    if (isVisible) {
+        appRoot.classList.remove('visible');
+        console.log('[Keyboard] Dashboard hidden');
+    } else {
+        appRoot.classList.add('visible');
+        console.log('[Keyboard] Dashboard shown');
+    }
+}
+
+/**
+ * Open VG Coder and activate Git panel
+ */
+function openGitPanel() {
+    const appRoot = getById('vg-app-root');
+    if (!appRoot) {
+        console.warn('[Keyboard] Cannot open Git panel: vg-app-root not found');
+        return;
+    }
+    
+    // First, make sure dashboard is visible
+    if (!appRoot.classList.contains('visible')) {
+        appRoot.classList.add('visible');
+        console.log('[Keyboard] Dashboard opened');
+    }
+    
+    // Then activate Git panel using getRoot() to query in Shadow DOM
+    const root = getRoot();
+    const gitButton = root.querySelector('.tool-window-icon[data-panel="git"]');
+    if (gitButton) {
+        gitButton.click();
+        console.log('[Keyboard] Git panel activated');
+    } else {
+        console.warn('[Keyboard] Git panel button not found');
+    }
+}
+
+/**
+ * Create new terminal
+ */
+function createNewTerminal() {
+    if (typeof window.createNewTerminal === 'function') {
+        window.createNewTerminal();
+        console.log('[Keyboard] New terminal created');
+    } else {
+        console.warn('[Keyboard] Terminal feature not available');
+    }
+}
+
+/**
+ * Handle keyboard event
+ * @param {KeyboardEvent} event - Keyboard event
+ */
+function handleKeyDown(event) {
+    // Debug: Log all keyboard events
+    const key = event.key;
+    const meta = event.metaKey;
+    const ctrl = event.ctrlKey;
+    
+    // Only log if Cmd or Ctrl is pressed (to reduce noise)
+    if (meta || ctrl) {
+        console.log('[Keyboard] Key event:', { key, meta, ctrl, alt: event.altKey, shift: event.shiftKey });
+    }
+    
+    // Check if event is from VG Coder shadow DOM
+    const fromVGCoder = isFromVGCoder(event);
+    if (!fromVGCoder) {
+        if (meta || ctrl) {
+            console.log('[Keyboard] Event ignored - not from VG Coder');
+        }
+        return;
+    }
+    
+    const shortcutKey = getShortcutKey(event);
+    console.log('[Keyboard] Shortcut key detected:', shortcutKey);
+    
+    if (!shortcutKey) return;
+    
+    // Check if shortcut is registered
+    const action = SHORTCUTS[shortcutKey];
+    
+    if (!action) {
+        console.log('[Keyboard] No action registered for:', shortcutKey);
+        return;
+    }
+    
+    // Prevent default browser behavior
+    event.preventDefault();
+    event.stopPropagation();
+    
+    console.log(`[Keyboard] Shortcut triggered: ${shortcutKey} -> ${action}`);
+    
+    // Execute action
+    switch (action) {
+        case 'toggle-dashboard':
+            toggleDashboard();
+            break;
+        case 'open-git-panel':
+            openGitPanel();
+            break;
+        case 'help-shortcuts':
+            toggleShortcutsHelp();
+            break;
+        default:
+            console.warn(`[Keyboard] Unknown action: ${action}`);
+    }
+}
+
+/**
+ * Toggle shortcuts help panel
+ */
+function toggleShortcutsHelp() {
+    const helpPanel = getById('shortcuts-help');
+    if (!helpPanel) {
+        console.warn('[Keyboard] Help panel not found');
+        return;
+    }
+    
+    const isVisible = helpPanel.classList.contains('visible');
+    
+    if (isVisible) {
+        helpPanel.classList.remove('visible');
+        console.log('[Keyboard] Help panel hidden');
+    } else {
+        // Render shortcuts before showing
+        renderHelpPanel();
+        helpPanel.classList.add('visible');
+        console.log('[Keyboard] Help panel shown');
+    }
+}
+
+/**
+ * Render shortcuts in help panel
+ */
+function renderHelpPanel() {
+    const container = getById('shortcuts-list');
+    if (!container) return;
+    
+    // Auto-generate shortcuts list from config
+    const prefix = isMac ? 'Cmd' : 'Ctrl';
+    const shortcuts = SHORTCUTS_CONFIG.map(({ key, description }) => ({
+        key: `${prefix}+${key}`,
+        desc: description,
+    }));
+    
+    container.innerHTML = shortcuts.map(({ key, desc }) => {
+        const keys = key.split('+').map(k => `<span class="vg-shortcut-key">${k}</span>`);
+        const keysHtml = keys.join('<span class="vg-shortcut-plus">+</span>');
+        
+        return `
+            <div class="vg-shortcut-item">
+                <div class="vg-shortcut-desc">${desc}</div>
+                <div class="vg-shortcut-keys">${keysHtml}</div>
+            </div>
+        `;
+    }).join('');
+}
+
+/**
+ * Create new terminal (continued from above)
+ */
+function continueCreateNewTerminal() {
+    // This function placeholder ensures proper code flow
+    // The actual implementation is below
+}
+
+// Fix the switch statement continuation
+function handleKeyDownContinued(action) {
+    switch (action) {
+        case 'terminal-new':
+            createNewTerminal();
+            break;
+        default:
+            console.warn(`[Keyboard] Unknown action: ${action}`);
+    }
+}
+
+/**
+ * Initialize keyboard shortcuts
+ */
+export function initKeyboardShortcuts() {
+    console.log('[Keyboard] Initializing keyboard shortcuts...');
+    console.log(`[Keyboard] Platform: ${isMac ? 'macOS' : 'Windows/Linux'}`);
+    
+    // Register global keydown listener at document level
+    // Using capture phase (true) to catch events before they reach target
+    document.addEventListener('keydown', handleKeyDown, true);
+    
+    // Log registered shortcuts
+    const shortcuts = Object.keys(SHORTCUTS)
+        .filter(key => isMac ? key.startsWith('CMD') : key.startsWith('CTRL'))
+        .map(key => `${key} → ${SHORTCUTS[key]}`);
+    
+    console.log('[Keyboard] Registered shortcuts:', shortcuts);
+    console.log('[Keyboard] Keyboard shortcuts initialized ✓');
+    
+    // Make available for debugging and HTML onclick handlers
+    if (typeof window !== 'undefined') {
+        window.__VG_KEYBOARD_SHORTCUTS__ = {
+            shortcuts: SHORTCUTS,
+            platform: isMac ? 'mac' : 'win',
+            toggle: toggleDashboard,
+            terminal: createNewTerminal,
+            help: toggleShortcutsHelp,
+        };
+        
+        // Expose for HTML onclick handler
+        window.toggleShortcutsHelp = toggleShortcutsHelp;
+    }
+}
+
+/**
+ * Get help text for shortcuts (for future help UI)
+ * @returns {Array} Array of shortcut descriptions
+ */
+export function getShortcutsHelp() {
+    const prefix = isMac ? 'Cmd' : 'Ctrl';
+    return [
+        { key: `${prefix}+4`, description: 'Toggle VG Coder Dashboard (Open/Close)' },
+        { key: `${prefix}+5`, description: 'Create New Terminal' },
+    ];
+}

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

@@ -2,6 +2,7 @@ import { io } from 'socket.io-client';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { getById, showToast } from '../utils.js';
+import { countTokens as countTokensAPI } from '../api.js';
 
 let socket;
 const activeTerminals = new Map();
@@ -43,8 +44,12 @@ export function createNewTerminal() {
     // --- HTML STRUCTURE: Header + Body + Separate Input ---
     wrapper.innerHTML = `
         <div class="terminal-header" id="header-${termId}">
-            <div class="terminal-title-group"><span>>_</span> Terminal (${activeTerminals.size + 1})</div>
+            <div class="terminal-title-group">
+                <span>>_</span> Terminal (${activeTerminals.size + 1})
+                <span class="terminal-token-count" id="token-count-${termId}">0 tokens</span>
+            </div>
             <div class="terminal-controls">
+                <button class="term-btn copy-logs" onclick="window.copyTerminalLogs('${termId}')" title="Copy Logs">📋</button>
                 <button class="term-btn minimize" onclick="window.toggleMinimize('${termId}')">-</button>
                 <button class="term-btn maximize" onclick="window.toggleMaximize('${termId}')">+</button>
                 <button class="term-btn close" onclick="window.closeTerminal('${termId}')">x</button>
@@ -173,6 +178,73 @@ export function toggleMaximize(termId) {
     }
 }
 
+/**
+ * Copy terminal logs to clipboard with token count
+ */
+export async function copyTerminalLogs(termId) {
+    const session = activeTerminals.get(termId);
+    if (!session) {
+        showToast('Terminal not found', 'error');
+        return;
+    }
+    
+    try {
+        // Get terminal buffer content
+        const term = session.term;
+        const buffer = term.buffer.active;
+        const lines = [];
+        
+        // Extract all lines from buffer
+        for (let i = 0; i < buffer.length; i++) {
+            const line = buffer.getLine(i);
+            if (line) {
+                lines.push(line.translateToString(true));
+            }
+        }
+        
+        const logsText = lines.join('\n').trim();
+        
+        if (!logsText) {
+            showToast('No logs to copy', 'info');
+            return;
+        }
+        
+        // Copy to clipboard first (fast)
+        await navigator.clipboard.writeText(logsText);
+        
+        // Then count tokens via API (accurate)
+        try {
+            const tokens = await countTokensAPI(logsText);
+            
+            // Update token count display
+            updateTokenCount(termId, tokens);
+            
+            // Show toast
+            showToast(`📋 Copied ${tokens.toLocaleString()} tokens`, 'success');
+        } catch (err) {
+            console.error('[Terminal] Token counting error:', err);
+            // Still copied to clipboard, just show basic message
+            showToast('📋 Copied to clipboard', 'success');
+        }
+        
+    } catch (err) {
+        console.error('[Terminal] Copy logs error:', err);
+        showToast('Error copying logs', 'error');
+    }
+}
+
+/**
+ * Update token count display in terminal header
+ */
+function updateTokenCount(termId, tokens) {
+    const tokenEl = getById(`token-count-${termId}`);
+    if (tokenEl) {
+        tokenEl.textContent = `${tokens.toLocaleString()} tokens`;
+    }
+}
+
+// Remove old simple countTokens function - no longer needed
+
 function makeDraggable(element, handle) {
     let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
     handle.onmousedown = dragMouseDown;
@@ -206,3 +278,4 @@ window.createNewTerminal = createNewTerminal;
 window.closeTerminal = closeTerminalUI;
 window.toggleMinimize = toggleMinimize;
 window.toggleMaximize = toggleMaximize;
+window.copyTerminalLogs = copyTerminalLogs;

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

@@ -23,7 +23,13 @@ export function initToolWindow() {
         });
     });
 
-    console.log('[ToolWindow] Initialized');
+    // 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');
 }
 
 /**