mcp-web-ui/dist/server/VanillaUIServer.js

Ultra-lightweight vanilla JavaScript framework for MCP servers - Zero dependencies, perfect security, 2-3KB bundle size

import express from 'express';
import path from 'path';
import fs from 'fs';
import crypto from 'crypto';
import { fileURLToPath } from 'url';
// Add HTML escaping utility
const escapeHtml = (unsafe) => {
    return unsafe
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
};
// Add JSON sanitization for safe embedding
const safeJsonStringify = (data) => {
    return JSON.stringify(data)
        .replace(/</g, '\\u003c')
        .replace(/>/g, '\\u003e')
        .replace(/&/g, '\\u0026');
};
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
/**
 * VanillaUIServer - Secure Vanilla JS UI Server Implementation
 *
 * This is the enhanced UIServer that uses the vanilla JS framework instead of Alpine.js.
 * It provides:
 * - Perfect CSP compliance (no eval, no unsafe scripts)
 * - Zero external dependencies (no Alpine.js or other frameworks)
 * - Built-in XSS protection for all content
 * - Schema-driven component initialization
 * - Comprehensive security headers
 * - AI-friendly documentation and error messages
 *
 * SECURITY IMPROVEMENTS:
 * - Eliminates Alpine.js runtime errors under strict CSP
 * - No framework dependencies = no external attack vectors
 * - Built-in content sanitization for LLM-generated content
 * - Session-based authentication with timing-safe comparisons
 * - Rate limiting and input validation
 *
 * PERFORMANCE BENEFITS:
 * - Lightweight: ~2-3KB
 * - No framework overhead or runtime compilation
 * - Efficient DOM updates with smart diffing
 * - Optimized polling that respects page visibility
 *
 * AI INTEGRATION READY:
 * - Handles LLM-generated content safely
 * - Extensive logging for debugging AI interactions
 * - Clear error messages for AI agents to understand
 * - Schema-driven configuration for AI-generated UIs
 */
export class VanillaUIServer {
    session;
    schema;
    dataSource;
    onUpdate;
    pollInterval;
    bindAddress;
    app;
    server = null;
    dataPollingInterval = null;
    constructor(session, schema, dataSource, onUpdate, pollInterval = 2000, bindAddress = 'localhost') {
        this.session = session;
        this.schema = schema;
        this.dataSource = dataSource;
        this.onUpdate = onUpdate;
        this.pollInterval = pollInterval;
        this.bindAddress = bindAddress;
        this.app = express();
        this.setupMiddleware();
        this.setupRoutes();
    }
    /**
     * Start the server on the session's assigned port
     */
    async start() {
        return new Promise((resolve, reject) => {
            try {
                this.server = this.app.listen(this.session.port, this.bindAddress, () => {
                    this.log('INFO', `Vanilla JS UI server started on ${this.bindAddress}:${this.session.port}`);
                    this.startDataPolling();
                    resolve();
                });
                this.server.on('error', (error) => {
                    if (error.code === 'EADDRINUSE') {
                        this.log('ERROR', `Port ${this.session.port} already in use`);
                        reject(new Error(`Port ${this.session.port} already in use`));
                    }
                    else {
                        reject(error);
                    }
                });
            }
            catch (error) {
                reject(error);
            }
        });
    }
    /**
     * Stop the server and cleanup
     */
    async stop() {
        return new Promise((resolve) => {
            // Stop data polling
            if (this.dataPollingInterval) {
                clearInterval(this.dataPollingInterval);
                this.dataPollingInterval = null;
            }
            // Close HTTP server
            if (this.server) {
                this.server.close(() => {
                    this.log('INFO', `Vanilla JS UI server stopped on port ${this.session.port}`);
                    resolve();
                });
            }
            else {
                resolve();
            }
        });
    }
    /**
     * Setup Express middleware with enhanced security
     */
    setupMiddleware() {
        // Security headers - PERFECT CSP compliance
        this.app.use((req, res, next) => {
            // Generate nonce for each request
            const nonce = this.generateNonce();
            res.locals.nonce = nonce;
            res.setHeader('X-Content-Type-Options', 'nosniff');
            res.setHeader('X-Frame-Options', 'DENY');
            res.setHeader('X-XSS-Protection', '1; mode=block');
            res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
            // PERFECT CSP - No eval, no unsafe-inline scripts, no external dependencies
            res.setHeader('Content-Security-Policy', "default-src 'self'; " +
                `script-src 'self' 'nonce-${nonce}'; ` +
                "style-src 'self' 'unsafe-inline'; " +
                "connect-src 'self'; " +
                "img-src 'self' data:; " +
                "font-src 'self';");
            next();
        });
        // Body parser with limits
        this.app.use(express.json({ limit: '1mb' }));
        this.app.use(express.urlencoded({ extended: true, limit: '1mb' }));
        // Enhanced token-based authentication middleware
        this.app.use((req, res, next) => {
            // Allow static files without token
            if (req.path.startsWith('/static/')) {
                return next();
            }
            const token = req.query.token || req.headers.authorization?.replace('Bearer ', '');
            if (!token) {
                return res.status(401).json({
                    success: false,
                    error: 'Authentication token required',
                    timestamp: new Date().toISOString(),
                    hint: 'Include token as query parameter or Authorization header'
                });
            }
            // Timing-safe token comparison to prevent timing attacks
            const expectedToken = this.session.token;
            if (token.length !== expectedToken.length) {
                return res.status(403).json({
                    success: false,
                    error: 'Invalid token',
                    timestamp: new Date().toISOString()
                });
            }
            let isValid = true;
            for (let i = 0; i < token.length; i++) {
                if (token[i] !== expectedToken[i]) {
                    isValid = false;
                }
            }
            if (!isValid) {
                return res.status(403).json({
                    success: false,
                    error: 'Invalid token',
                    timestamp: new Date().toISOString()
                });
            }
            // Check if this is a user action vs polling
            const isUserAction = req.method === 'POST' ||
                req.path.includes('/update') ||
                req.path.includes('/extend');
            // Update activity only for user actions
            if (isUserAction) {
                this.session.lastActivity = new Date();
                this.log('INFO', `User action: ${req.method} ${req.path}`);
            }
            next();
        });
    }
    /**
     * Setup API routes
     */
    setupRoutes() {
        // Main UI route - VANILLA JS TEMPLATE
        this.app.get('/', async (req, res) => {
            try {
                const initialData = await this.dataSource(this.session.userId);
                const templateData = {
                    session: this.session,
                    schema: this.schema,
                    initialData,
                    config: {
                        pollInterval: this.pollInterval,
                        apiBase: `/api`
                    },
                    nonce: res.locals.nonce
                };
                // Render VANILLA JS template
                const html = this.renderVanillaTemplate(templateData);
                res.send(html);
            }
            catch (error) {
                this.log('ERROR', `Failed to render UI: ${error}`);
                res.status(500).send(this.renderErrorPage(error));
            }
        });
        // API endpoint to get current data
        this.app.get('/api/data', async (req, res) => {
            try {
                const data = await this.dataSource(this.session.userId);
                const response = {
                    success: true,
                    data,
                    timestamp: new Date().toISOString()
                };
                res.json(response);
            }
            catch (error) {
                const response = {
                    success: false,
                    error: error instanceof Error ? error.message : 'Unknown error',
                    timestamp: new Date().toISOString()
                };
                res.status(500).json(response);
            }
        });
        // API endpoint to handle updates with enhanced validation
        this.app.post('/api/update', async (req, res) => {
            try {
                const { action, data } = req.body;
                // Enhanced input validation
                if (!action || typeof action !== 'string') {
                    return res.status(400).json({
                        success: false,
                        error: 'Invalid action parameter',
                        timestamp: new Date().toISOString()
                    });
                }
                // Sanitize and validate data
                const sanitizedData = this.sanitizeUpdateData(data);
                const result = await this.onUpdate(action, sanitizedData, this.session.userId);
                const response = {
                    success: true,
                    data: result,
                    timestamp: new Date().toISOString()
                };
                res.json(response);
            }
            catch (error) {
                this.log('ERROR', `Update failed: ${error}`);
                const response = {
                    success: false,
                    error: error instanceof Error ? error.message : 'Update operation failed',
                    timestamp: new Date().toISOString()
                };
                res.status(500).json(response);
            }
        });
        // API endpoint to extend session
        this.app.post('/api/extend-session', (req, res) => {
            const { minutes = 30 } = req.body;
            // Validate extension minutes
            if (typeof minutes !== 'number' || minutes < 5 || minutes > 120) {
                return res.status(400).json({
                    success: false,
                    error: 'Extension minutes must be between 5 and 120',
                    timestamp: new Date().toISOString()
                });
            }
            // Check if session can be extended
            if (new Date() > this.session.expiresAt) {
                return res.status(410).json({
                    success: false,
                    error: 'Session has already expired',
                    timestamp: new Date().toISOString()
                });
            }
            this.session.expiresAt = new Date(this.session.expiresAt.getTime() + minutes * 60 * 1000);
            this.session.lastActivity = new Date();
            const response = {
                success: true,
                data: { expiresAt: this.session.expiresAt },
                timestamp: new Date().toISOString()
            };
            res.json(response);
        });
        // Health check endpoint
        this.app.get('/api/health', (req, res) => {
            res.json({
                success: true,
                data: {
                    status: 'active',
                    framework: 'vanilla-js',
                    version: '1.0.0',
                    expiresAt: this.session.expiresAt,
                    uptime: Date.now() - this.session.startTime.getTime(),
                    components: this.schema.components.length
                },
                timestamp: new Date().toISOString()
            });
        });
        // Serve static files (vanilla JS framework and styles)
        this.setupStaticFiles();
    }
    /**
     * Setup static file serving for vanilla JS framework
     */
    setupStaticFiles() {
        // Serve vanilla JS framework files
        // Find the project root by looking for package.json
        let currentDir = __dirname;
        let projectRoot = '';
        // Walk up the directory tree to find package.json
        while (currentDir !== path.dirname(currentDir)) {
            const packagePath = path.join(currentDir, 'package.json');
            if (fs.existsSync(packagePath)) {
                projectRoot = currentDir;
                break;
            }
            currentDir = path.dirname(currentDir);
        }
        const vanillaPath = path.join(projectRoot, 'src', 'vanilla');
        const templatesPath = path.join(projectRoot, 'templates', 'static');
        this.log('INFO', `Serving vanilla JS files from: ${vanillaPath}`);
        this.log('INFO', `Serving static files from: ${templatesPath}`);
        // Framework files
        this.app.get('/static/mcp-framework.js', (req, res) => {
            res.type('application/javascript');
            try {
                // Concatenate all framework files for single request
                const frameworkFiles = [
                    path.join(vanillaPath, 'core', 'BaseComponent.js'),
                    path.join(vanillaPath, 'components', 'TodoListComponent.js'),
                    path.join(vanillaPath, 'components', 'TableComponent.js'),
                    path.join(vanillaPath, 'components', 'StatsComponent.js'),
                    path.join(vanillaPath, 'MCPFramework.js')
                ];
                let combinedJS = '// MCP Vanilla JS Framework - Combined Bundle\n';
                combinedJS += '// Built for perfect CSP compliance and zero dependencies\n\n';
                frameworkFiles.forEach(filePath => {
                    if (fs.existsSync(filePath)) {
                        combinedJS += fs.readFileSync(filePath, 'utf8') + '\n\n';
                    }
                    else {
                        this.log('WARN', `Framework file not found: ${filePath}`);
                    }
                });
                res.send(combinedJS);
            }
            catch (error) {
                this.log('ERROR', `Error serving framework files: ${error}`);
                res.status(500).send('// Error loading framework');
            }
        });
        // CSS files
        if (fs.existsSync(templatesPath)) {
            this.app.use('/static', express.static(templatesPath));
        }
        else {
            this.log('WARN', `Templates directory not found: ${templatesPath}`);
            // Fallback CSS
            this.app.get('/static/styles.css', (req, res) => {
                res.type('text/css');
                res.send(this.getFallbackCSS());
            });
        }
    }
    /**
     * Render the main HTML template using vanilla JS framework
     */
    renderVanillaTemplate(data) {
        const safeTitle = escapeHtml(data.schema.title);
        const safeDescription = data.schema.description ? escapeHtml(data.schema.description) : '';
        const nonce = data.nonce || this.generateNonce();
        return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${safeTitle}</title>
    <link href="/static/styles.css" rel="stylesheet">
    <style nonce="${nonce}">
        /* Enhanced styles for vanilla JS framework */
        .mcp-loading { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            padding: 2rem; 
            color: #64748b; 
        }
        .mcp-error { 
            background: #fef2f2; 
            border: 1px solid #fecaca; 
            color: #dc2626; 
            padding: 1rem; 
            border-radius: 0.5rem; 
            margin: 1rem 0; 
        }
        .mcp-notification-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            max-width: 400px;
        }
        .mcp-notification {
            background: white;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            animation: slideIn 0.3s ease;
        }
        .mcp-notification-success { border-left: 4px solid #10b981; }
        .mcp-notification-error { border-left: 4px solid #dc2626; }
        .mcp-notification-info { border-left: 4px solid #3b82f6; }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    </style>
</head>
<body>
    <!-- Vanilla JS MCP UI Container -->
    <div id="mcp-app">
        <header class="header">
            <h1>${safeTitle}</h1>
            ${safeDescription ? `<p class="description">${safeDescription}</p>` : ''}
            <div class="session-info">
                <span>Session expires: <span id="expire-time">Loading...</span></span>
                <button id="extend-btn" class="btn-extend">Extend</button>
            </div>
        </header>

        <main class="main">
            <!-- Loading state -->
            <div id="mcp-loading" class="mcp-loading" style="display: none;">
                <div class="loading-spinner"></div>
                <span>Loading...</span>
            </div>

            <!-- Error state -->
            <div id="mcp-error" class="mcp-error" style="display: none;"></div>

            <!-- Component containers -->
            ${this.renderComponentContainers(data.schema.components)}
        </main>
    </div>

    <!-- Vanilla JS MCP Framework -->
    <script nonce="${nonce}" src="/static/mcp-framework.js"></script>
    
    <!-- Component Initialization -->
    <script nonce="${nonce}">
        // Global configuration
        const mcpConfig = {
            sessionToken: '${data.session.token}',
            pollInterval: ${data.config.pollInterval},
            apiBase: '${data.config.apiBase}',
            userId: '${data.session.userId}',
            security: {
                sanitizeInput: true,
                validateEvents: true,
                enableRateLimit: true,
                maxInputLength: 1000
            }
        };

        // Initial data (safely embedded)
        const mcpInitialData = ${safeJsonStringify(data.initialData)};

        // UI Schema (for component initialization)
        const mcpSchema = ${safeJsonStringify(data.schema)};

        // Initialize the MCP UI when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            try {
                console.log('🚀 Initializing MCP Vanilla JS UI Framework');

                // Initialize components from schema
                const components = MCP.initFromSchema(mcpSchema, { default: mcpInitialData }, mcpConfig);
                
                console.log('✅ MCP Components initialized:', components.length);

                // Setup session management
                MCP.updateExpirationTime('${data.session.expiresAt.toISOString()}');

                // Setup extend session button
                const extendBtn = document.getElementById('extend-btn');
                if (extendBtn) {
                    extendBtn.addEventListener('click', async function() {
                        try {
                            extendBtn.disabled = true;
                            extendBtn.textContent = 'Extending...';
                            
                            await MCP.extendSession(30, mcpConfig.sessionToken);
                            
                            extendBtn.textContent = 'Extended!';
                            setTimeout(() => {
                                extendBtn.disabled = false;
                                extendBtn.textContent = 'Extend';
                            }, 2000);
                        } catch (error) {
                            console.error('Failed to extend session:', error);
                            extendBtn.disabled = false;
                            extendBtn.textContent = 'Extend';
                            MCP.utils.showNotification('Failed to extend session', 'error');
                        }
                    });
                }

                // Show success notification
                MCP.utils.showNotification('UI loaded successfully!', 'success', 2000);

            } catch (error) {
                console.error('❌ Failed to initialize MCP UI:', error);
                
                // Show error state
                const errorDiv = document.getElementById('mcp-error');
                if (errorDiv) {
                    errorDiv.textContent = 'Failed to load UI: ' + error.message;
                    errorDiv.style.display = 'block';
                }
            }
        });

        // Global error handling
        window.addEventListener('error', function(event) {
            console.error('MCP UI Error:', event.error);
            MCP.utils.showNotification('An error occurred. Please refresh the page.', 'error');
        });

        // Handle page visibility changes for polling optimization
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden) {
                console.log('🔄 Page visible - refreshing components');
                // Components will automatically refresh when page becomes visible
            }
        });
    </script>
</body>
</html>`;
    }
    /**
     * Render component containers based on schema
     */
    renderComponentContainers(components) {
        return components.map(component => {
            const containerClass = `component-container component-${component.type}`;
            return `<div id="${component.id}" class="${containerClass}"></div>`;
        }).join('\n            ');
    }
    /**
     * Render error page for server errors
     */
    renderErrorPage(error) {
        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
        const safeError = escapeHtml(errorMessage);
        return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error - MCP Web UI</title>
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; margin: 0; padding: 2rem; background: #f8fafc; }
        .error-container { max-width: 600px; margin: 0 auto; background: white; border-radius: 0.5rem; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .error-title { color: #dc2626; font-size: 1.5rem; margin-bottom: 1rem; }
        .error-message { color: #374151; margin-bottom: 1.5rem; }
        .error-actions { display: flex; gap: 1rem; }
        .btn { padding: 0.5rem 1rem; border-radius: 0.375rem; text-decoration: none; font-weight: 500; }
        .btn-primary { background: #3b82f6; color: white; }
        .btn-secondary { background: #f3f4f6; color: #374151; }
    </style>
</head>
<body>
    <div class="error-container">
        <h1 class="error-title">⚠️ Server Error</h1>
        <p class="error-message">Failed to load the MCP Web UI: ${safeError}</p>
        <div class="error-actions">
            <a href="javascript:location.reload()" class="btn btn-primary">Retry</a>
            <a href="/api/health" class="btn btn-secondary">Check Status</a>
        </div>
    </div>
</body>
</html>`;
    }
    /**
     * Sanitize update data to prevent injection attacks
     */
    sanitizeUpdateData(data) {
        if (!data || typeof data !== 'object') {
            return {};
        }
        const sanitized = {};
        for (const [key, value] of Object.entries(data)) {
            // Sanitize key names
            const cleanKey = key.replace(/[^a-zA-Z0-9_]/g, '');
            if (typeof value === 'string') {
                // Apply length limits and content sanitization
                const maxLength = 1000;
                sanitized[cleanKey] = this.sanitizeLLMContent(value.substring(0, maxLength), cleanKey);
            }
            else if (typeof value === 'boolean' || typeof value === 'number') {
                sanitized[cleanKey] = value;
            }
            else if (value === null || value === undefined) {
                sanitized[cleanKey] = value;
            }
            else if (Array.isArray(value)) {
                // Recursively sanitize arrays
                sanitized[cleanKey] = value.map(item => typeof item === 'object' ? this.sanitizeUpdateData(item) : item);
            }
            else {
                // Skip or recursively sanitize complex objects
                this.log('WARN', `Complex object sanitized for key: ${key}`);
                sanitized[cleanKey] = this.sanitizeUpdateData(value);
            }
        }
        return sanitized;
    }
    /**
     * Enhanced LLM content sanitization
     */
    sanitizeLLMContent(content, context = 'text') {
        if (!content || typeof content !== 'string') {
            return '';
        }
        // Layer 1: Remove dangerous script content
        let clean = content
            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
            .replace(/javascript:/gi, '')
            .replace(/on\w+\s*=/gi, '')
            .replace(/data:text\/html/gi, '');
        // Layer 2: Context-specific cleaning
        switch (context) {
            case 'text':
            case 'todo-text':
                return clean.replace(/[<>{}[\]\\]/g, '').substring(0, 500);
            case 'category':
                return clean.replace(/[^a-zA-Z0-9\s\-_]/g, '').substring(0, 50);
            case 'priority':
                const allowedPriorities = ['low', 'medium', 'high', 'urgent'];
                return allowedPriorities.includes(clean.toLowerCase()) ? clean.toLowerCase() : 'medium';
            default:
                return escapeHtml(clean);
        }
    }
    /**
     * Start polling for data changes (server-side tracking)
     */
    startDataPolling() {
        if (this.schema.polling?.enabled !== false) {
            this.dataPollingInterval = setInterval(async () => {
                // This could be used for server-side change detection
                // or triggering WebSocket updates in the future
                // For now, clients handle their own polling
            }, this.pollInterval);
        }
    }
    /**
     * Get fallback CSS if templates directory is missing
     */
    getFallbackCSS() {
        return `
/* MCP Vanilla JS UI - Fallback Styles */
* { box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; padding: 0; background: #f8fafc; color: #334155; line-height: 1.6; 
}
.header { 
    background: white; border-bottom: 1px solid #e2e8f0; padding: 1rem 2rem; 
    display: flex; justify-content: space-between; align-items: center; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}
.header h1 { margin: 0; color: #1e293b; font-size: 1.5rem; font-weight: 600; }
.session-info { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: #64748b; }
.btn-extend { 
    background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; 
    border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; 
}
.btn-extend:hover { background: #2563eb; }
.main { padding: 2rem; max-width: 1200px; margin: 0 auto; }
.component-container { 
    background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    margin-bottom: 2rem; overflow: hidden; 
}
.loading-spinner { 
    width: 2rem; height: 2rem; border: 3px solid #f3f3f3; border-top: 3px solid #3b82f6; 
    border-radius: 50%; animation: spin 1s linear infinite; margin-right: 1rem; 
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        `;
    }
    /**
     * Generate cryptographic nonce for CSP
     */
    generateNonce() {
        return crypto.randomBytes(16).toString('base64');
    }
    /**
     * Enhanced logging with component context
     */
    log(level, message) {
        const timestamp = new Date().toISOString();
        const sessionInfo = `Session:${this.session.id.substring(0, 8)}`;
        console.log(`[${timestamp}][${level}][VanillaUIServer][${sessionInfo}] ${message}`);
    }
}
//# sourceMappingURL=VanillaUIServer.js.map