vg-coder-cli 2.0.30 → 2.0.32

package/src/server/views/js/event-protocol.js

@@ -0,0 +1,263 @@
+/**
+ * VG Coder Event Protocol
+ * 
+ * Standardized event communication system for cross-context messaging.
+ * Supports: window, shadow-root, iframe contexts.
+ */
+
+// Event Types Registry
+export const EVENT_TYPES = {
+    PASTE_RUN: 'vg:paste-run',
+    TERMINAL_NEW: 'vg:terminal-new',
+    TERMINAL_EXECUTE: 'vg:terminal-execute',
+    FEATURE_TOGGLE: 'vg:feature-toggle',
+};
+
+/**
+ * EventProtocol - Standardized event format
+ */
+export class EventProtocol {
+    constructor({ type, source, target, payload = {}, context = 'window' }) {
+        this.type = type;
+        this.source = source;
+        this.target = target;
+        this.payload = payload;
+        this.timestamp = Date.now();
+        this.context = context;
+        this.id = `${type}-${this.timestamp}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    /**
+     * Validate event structure
+     */
+    isValid() {
+        return !!(this.type && this.source && this.target);
+    }
+
+    /**
+     * Convert to plain object
+     */
+    toObject() {
+        return {
+            id: this.id,
+            type: this.type,
+            source: this.source,
+            target: this.target,
+            payload: this.payload,
+            timestamp: this.timestamp,
+            context: this.context,
+        };
+    }
+}
+
+/**
+ * EventDispatcher - Multi-context event dispatcher
+ * 
+ * Supports communication across:
+ * - Window context
+ * - Shadow DOM context  
+ * - Iframe context
+ */
+export class EventDispatcher {
+    constructor(options = {}) {
+        this.listeners = new Map();
+        this.contexts = options.contexts || ['window'];
+        this.debug = options.debug || false;
+        this.eventHistory = [];
+        this.maxHistorySize = options.maxHistorySize || 100;
+
+        // Make available globally for debugging
+        if (typeof window !== 'undefined') {
+            window.__VG_EVENT_DISPATCHER__ = this;
+        }
+    }
+
+    /**
+     * Register event listener
+     * @param {string} eventType - Event type to listen for
+     * @param {Function} handler - Handler function
+     * @param {Object} options - Listener options
+     */
+    on(eventType, handler, options = {}) {
+        if (!this.listeners.has(eventType)) {
+            this.listeners.set(eventType, []);
+        }
+
+        const listener = {
+            handler,
+            context: options.context || 'all',
+            priority: options.priority || 0,
+            once: options.once || false,
+        };
+
+        this.listeners.get(eventType).push(listener);
+
+        // Sort by priority (higher first)
+        this.listeners.get(eventType).sort((a, b) => b.priority - a.priority);
+
+        if (this.debug) {
+            console.log(`[EventDispatcher] Registered listener for: ${eventType}`, listener);
+        }
+
+        // Return unsubscribe function
+        return () => this.off(eventType, handler);
+    }
+
+    /**
+     * Register one-time event listener
+     */
+    once(eventType, handler, options = {}) {
+        return this.on(eventType, handler, { ...options, once: true });
+    }
+
+    /**
+     * Unregister event listener
+     */
+    off(eventType, handler) {
+        if (!this.listeners.has(eventType)) return;
+
+        const listeners = this.listeners.get(eventType);
+        const index = listeners.findIndex(l => l.handler === handler);
+        
+        if (index !== -1) {
+            listeners.splice(index, 1);
+            if (this.debug) {
+                console.log(`[EventDispatcher] Unregistered listener for: ${eventType}`);
+            }
+        }
+
+        // Clean up empty listener arrays
+        if (listeners.length === 0) {
+            this.listeners.delete(eventType);
+        }
+    }
+
+    /**
+     * Dispatch event
+     * @param {Object|EventProtocol} event - Event to dispatch
+     */
+    async dispatch(event) {
+        // Convert to EventProtocol if needed
+        const eventObj = event instanceof EventProtocol 
+            ? event 
+            : new EventProtocol(event);
+
+        if (!eventObj.isValid()) {
+            console.error('[EventDispatcher] Invalid event:', eventObj);
+            return false;
+        }
+
+        // Add to history
+        this.eventHistory.push(eventObj.toObject());
+        if (this.eventHistory.length > this.maxHistorySize) {
+            this.eventHistory.shift();
+        }
+
+        if (this.debug) {
+            console.log('[EventDispatcher] Dispatching:', eventObj.toObject());
+        }
+
+        // Get listeners for this event type
+        const listeners = this.listeners.get(eventObj.type) || [];
+        
+        // Filter by context
+        const contextListeners = listeners.filter(l => 
+            l.context === 'all' || l.context === eventObj.context
+        );
+
+        if (contextListeners.length === 0) {
+            if (this.debug) {
+                console.warn(`[EventDispatcher] No listeners for: ${eventObj.type}`);
+            }
+            return false;
+        }
+
+        // Execute handlers
+        const results = [];
+        for (const listener of contextListeners) {
+            try {
+                const result = await listener.handler(eventObj.toObject());
+                results.push({ success: true, result });
+
+                // Remove if once
+                if (listener.once) {
+                    this.off(eventObj.type, listener.handler);
+                }
+            } catch (error) {
+                console.error(`[EventDispatcher] Handler error for ${eventObj.type}:`, error);
+                results.push({ success: false, error });
+            }
+        }
+
+        return results;
+    }
+
+    /**
+     * Dispatch event across contexts (window + shadow root + iframes)
+     */
+    async dispatchCrossContext(event) {
+        const eventObj = event instanceof EventProtocol 
+            ? event 
+            : new EventProtocol(event);
+
+        const results = [];
+
+        // Dispatch in current context
+        results.push(await this.dispatch(eventObj));
+
+        // Dispatch to shadow roots if available
+        if (typeof window !== 'undefined' && window.__VG_CODER_ROOT__) {
+            const shadowDispatcher = window.__VG_CODER_ROOT__.__VG_EVENT_DISPATCHER__;
+            if (shadowDispatcher && shadowDispatcher !== this) {
+                results.push(await shadowDispatcher.dispatch(eventObj));
+            }
+        }
+
+        // Dispatch to iframes (if needed in future)
+        // TODO: Add iframe support
+
+        return results.flat();
+    }
+
+    /**
+     * Get event history
+     */
+    getHistory(limit = 10) {
+        return this.eventHistory.slice(-limit);
+    }
+
+    /**
+     * Clear event history
+     */
+    clearHistory() {
+        this.eventHistory = [];
+    }
+
+    /**
+     * Get all registered event types
+     */
+    getRegisteredEvents() {
+        return Array.from(this.listeners.keys());
+    }
+
+    /**
+     * Get listener count for event type
+     */
+    getListenerCount(eventType) {
+        return this.listeners.get(eventType)?.length || 0;
+    }
+
+    /**
+     * Enable/disable debug mode
+     */
+    setDebug(enabled) {
+        this.debug = enabled;
+        console.log(`[EventDispatcher] Debug mode: ${enabled ? 'ON' : 'OFF'}`);
+    }
+}
+
+// Create and export singleton instance
+export const globalDispatcher = new EventDispatcher({
+    contexts: ['window', 'shadow-root', 'iframe'],
+    debug: false,
+});

package/src/server/views/js/features/bubble-features/index.js

@@ -0,0 +1,125 @@
+/**
+ * Bubble Features Registry
+ * 
+ * Central registry for all bubble menu features.
+ * Makes it easy to add/remove features without modifying core code.
+ */
+
+import { PasteRunFeature } from './paste-run-feature.js';
+import { TerminalFeature } from './terminal-feature.js';
+
+/**
+ * FeatureRegistry - Manages bubble menu features
+ */
+export class FeatureRegistry {
+    constructor() {
+        this.features = new Map();
+
+        // Make available globally for debugging
+        if (typeof window !== 'undefined') {
+            window.__VG_FEATURE_REGISTRY__ = this;
+        }
+    }
+
+    /**
+     * Register a feature
+     * @param {Object} feature - Feature definition
+     */
+    register(feature) {
+        if (!feature.id) {
+            console.error('[FeatureRegistry] Feature must have an id', feature);
+            return false;
+        }
+
+        if (this.features.has(feature.id)) {
+            console.warn(`[FeatureRegistry] Feature ${feature.id} already registered. Overwriting.`);
+        }
+
+        this.features.set(feature.id, feature);
+        return true;
+    }
+
+    /**
+     * Unregister a feature
+     * @param {string} id - Feature id
+     */
+    unregister(id) {
+        return this.features.delete(id);
+    }
+
+    /**
+     * Get all features
+     * @returns {Array} Array of feature objects
+     */
+    getFeatures() {
+        return Array.from(this.features.values());
+    }
+
+    /**
+     * Get enabled features only
+     * @returns {Array} Array of enabled feature objects
+     */
+    getEnabledFeatures() {
+        return this.getFeatures()
+            .filter(f => f.enabled)
+            .sort((a, b) => a.order - b.order);
+    }
+
+    /**
+     * Get feature by id
+     * @param {string} id - Feature id
+     * @returns {Object|null} Feature object or null
+     */
+    getFeature(id) {
+        return this.features.get(id) || null;
+    }
+
+    /**
+     * Check if feature is enabled
+     * @param {string} id - Feature id
+     * @returns {boolean}
+     */
+    isFeatureEnabled(id) {
+        const feature = this.features.get(id);
+        return feature ? feature.enabled : false;
+    }
+
+    /**
+     * Enable/disable a feature
+     * @param {string} id - Feature id
+     * @param {boolean} enabled - Enable state
+     */
+    setFeatureEnabled(id, enabled) {
+        const feature = this.features.get(id);
+        if (feature) {
+            feature.enabled = enabled;
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Get feature count
+     * @returns {number}
+     */
+    getFeatureCount() {
+        return this.features.size;
+    }
+
+    /**
+     * Clear all features
+     */
+    clear() {
+        this.features.clear();
+    }
+}
+
+// Create singleton registry
+export const featureRegistry = new FeatureRegistry();
+
+// Register built-in features
+featureRegistry.register(PasteRunFeature);
+featureRegistry.register(TerminalFeature);
+
+// Export for external registration
+export { PasteRunFeature, TerminalFeature };

package/src/server/views/js/features/bubble-features/paste-run-feature.js

@@ -0,0 +1,16 @@
+/**
+ * Bubble Features - Paste & Run Feature
+ */
+
+import { EVENT_TYPES } from '../../event-protocol.js';
+
+export const PasteRunFeature = {
+    id: 'paste-run',
+    icon: '📋',
+    label: 'Paste & Run from Clipboard',
+    tooltip: 'Paste & Run from Clipboard',
+    eventType: EVENT_TYPES.PASTE_RUN,
+    permissions: ['clipboard-read'],
+    enabled: true,
+    order: 1,
+};

package/src/server/views/js/features/bubble-features/terminal-feature.js

@@ -0,0 +1,16 @@
+/**
+ * Bubble Features - Terminal Feature
+ */
+
+import { EVENT_TYPES } from '../../event-protocol.js';
+
+export const TerminalFeature = {
+    id: 'terminal-new',
+    icon: '🖥️',
+    label: 'New Terminal',
+    tooltip: 'Open New Terminal',
+    eventType: EVENT_TYPES.TERMINAL_NEW,
+    permissions: [],
+    enabled: true,
+    order: 2,
+};

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

@@ -0,0 +1,175 @@
+import { getById, showToast } from '../utils.js';
+import { globalDispatcher } from '../event-protocol.js';
+import { featureRegistry } from './bubble-features/index.js';
+
+export function initBubble() {
+    const bubble = getById('vg-bubble');
+    const appRoot = getById('vg-app-root');
+    const bubbleMenu = bubble?.querySelector('.vg-bubble-menu');
+
+    if (!bubble || !appRoot) return;
+
+    // --- RENDER FEATURES DYNAMICALLY ---
+    if (bubbleMenu) {
+        renderFeatures(bubbleMenu);
+    }
+
+    // --- DRAG LOGIC ---
+    let isDragging = false;
+    let startX, startY, initialLeft, initialTop;
+    let hasMoved = false; // To distinguish click vs drag
+    let mouseDownTarget = null; // Track where mousedown started
+
+    bubble.addEventListener('mousedown', (e) => {
+        isDragging = true;
+        hasMoved = false;
+        mouseDownTarget = e.target; // Remember click target
+        startX = e.clientX;
+        startY = e.clientY;
+        
+        // Get computed style for accurate position
+        const rect = bubble.getBoundingClientRect();
+        initialLeft = rect.left;
+        initialTop = rect.top;
+
+        // Prevent text selection
+        e.preventDefault();
+        
+        // Set cursor
+        bubble.style.cursor = 'grabbing';
+    });
+
+    // Use window events to handle drag outside shadow root if needed, 
+    // but here we are inside Shadow DOM, so document/root events work
+    // We attach to root to capture movement
+    const root = window.__VG_CODER_ROOT__ || document;
+
+    root.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        // Threshold to consider it a move
+        if (Math.abs(dx) > 2 || Math.abs(dy) > 2) hasMoved = true;
+
+        bubble.style.left = `${initialLeft + dx}px`;
+        bubble.style.top = `${initialTop + dy}px`;
+        bubble.style.bottom = 'auto'; // Clear bottom/right if set by CSS
+        bubble.style.right = 'auto';
+    });
+
+    root.addEventListener('mouseup', (e) => {
+        if (!isDragging) return;
+        isDragging = false;
+        bubble.style.cursor = 'grab';
+
+        if (hasMoved) {
+            snapToEdge(bubble);
+        } else {
+            // Click logic - only toggle if clicked on bubble icon, NOT on menu buttons
+            const clickedOnMenu = mouseDownTarget?.closest('.vg-bubble-menu');
+            const clickedOnIcon = mouseDownTarget?.closest('.vg-bubble-icon');
+            
+            // Only toggle dashboard if clicked on icon or bubble itself, but NOT on menu
+            if (!clickedOnMenu && (clickedOnIcon || mouseDownTarget === bubble)) {
+                toggleDashboard(appRoot);
+            }
+        }
+        
+        // Reset
+        mouseDownTarget = null;
+    });
+}
+
+/**
+ * Render features dynamically from feature registry
+ */
+function renderFeatures(container) {
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Get enabled features
+    const features = featureRegistry.getEnabledFeatures();
+
+    if (features.length === 0) {
+        console.warn('[Bubble] No enabled features found');
+        return;
+    }
+
+    // Render each feature
+    features.forEach(feature => {
+        const btn = document.createElement('button');
+        btn.id = `bubble-feature-${feature.id}`;
+        btn.className = 'bubble-action-btn';
+        btn.title = feature.tooltip;
+        btn.textContent = feature.label;
+
+        // Add click handler to dispatch event
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent toggling dashboard
+
+            // Dispatch event via event protocol
+            globalDispatcher.dispatch({
+                type: feature.eventType,
+                source: 'bubble-menu',
+                target: 'handlers',
+                payload: { 
+                    featureId: feature.id,
+                    label: feature.label,
+                },
+                context: 'shadow-root',
+            });
+        });
+
+        container.appendChild(btn);
+    });
+
+    console.log(`[Bubble] Rendered ${features.length} features`);
+}
+
+function snapToEdge(bubble) {
+    const rect = bubble.getBoundingClientRect();
+    const winWidth = window.innerWidth;
+    const winHeight = window.innerHeight;
+
+    // Determine nearest horizontal edge
+    const distLeft = rect.left;
+    const distRight = winWidth - rect.right;
+
+    let targetLeft;
+    if (distLeft < distRight) {
+        targetLeft = 20; // 20px padding
+    } else {
+        targetLeft = winWidth - rect.width - 20;
+    }
+
+    // Keep vertical within bounds
+    let targetTop = rect.top;
+    if (targetTop < 20) targetTop = 20;
+    if (targetTop > winHeight - rect.height - 20) targetTop = winHeight - rect.height - 20;
+
+    // Animate snap
+    bubble.style.transition = 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)';
+    bubble.style.left = `${targetLeft}px`;
+    bubble.style.top = `${targetTop}px`;
+
+    // Remove transition after snap to allow immediate drag next time
+    setTimeout(() => {
+        bubble.style.transition = '';
+    }, 300);
+}
+
+function toggleDashboard(appRoot) {
+    const isVisible = appRoot.classList.contains('visible');
+    
+    if (isVisible) {
+        // Hide
+        appRoot.classList.remove('visible');
+        // Pointer events auto is handled by CSS (when hidden opacity=0, pointer-events usually stay but size is 0x0)
+        // Our gulpfile sets width:0, height:0 for base state, so clicks pass through
+    } else {
+        // Show
+        appRoot.classList.add('visible');
+    }
+}

package/src/server/views/js/features/code-viewer.js

@@ -0,0 +1,90 @@
+import { API_BASE } from '../config.js';
+import { showToast, getById } from '../utils.js';
+// Import Highlight.js core
+import hljs from 'highlight.js/lib/core';
+
+// Import common languages to reduce bundle size
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import bash from 'highlight.js/lib/languages/bash';
+import java from 'highlight.js/lib/languages/java';
+import python from 'highlight.js/lib/languages/python';
+import sql from 'highlight.js/lib/languages/sql';
+import markdown from 'highlight.js/lib/languages/markdown';
+
+// Register languages
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('markdown', markdown);
+
+export async function openFileInViewer(path) {
+    const container = getById('code-viewer-container');
+    if (!container) return;
+
+    // Show loading state
+    container.innerHTML = '<div class="cv-loading">Loading file content...</div>';
+
+    try {
+        const res = await fetch(`${API_BASE}/api/read-file?path=${encodeURIComponent(path)}`);
+        const data = await res.json();
+
+        if (res.ok) {
+            const ext = path.split('.').pop().toLowerCase();
+            const language = getLanguageFromExt(ext);
+            
+            // Escape HTML tags to prevent XSS and ensure correct rendering
+            const escapedCode = escapeHtml(data.content);
+            
+            // Render Code Block
+            container.innerHTML = `
+                <div class="cv-wrapper">
+                    <pre><code class="language-${language}">${escapedCode}</code></pre>
+                </div>
+            `;
+
+            // Apply Highlight.js
+            const codeBlock = container.querySelector('code');
+            if(codeBlock) {
+                hljs.highlightElement(codeBlock);
+            }
+
+        } else {
+            container.innerHTML = `<div class="cv-error">Error: ${data.error}</div>`;
+            showToast(`Error opening file: ${data.error}`, 'error');
+        }
+    } catch (err) {
+        container.innerHTML = `<div class="cv-error">Failed: ${err.message}</div>`;
+        showToast(`Failed to load file: ${err.message}`, 'error');
+    }
+}
+
+function getLanguageFromExt(ext) {
+    const map = {
+        js: 'javascript', ts: 'typescript', jsx: 'javascript', tsx: 'typescript',
+        html: 'xml', xml: 'xml', css: 'css', scss: 'css',
+        json: 'json', java: 'java', py: 'python', sh: 'bash', sql: 'sql',
+        md: 'markdown'
+    };
+    return map[ext] || 'plaintext';
+}
+
+function escapeHtml(text) {
+    if (!text) return '';
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}