claude-mpm 4.2.44__py3-none-any.whl → 4.2.51__py3-none-any.whl

claude_mpm/dashboard/static/built/shared/logger.js

@@ -0,0 +1,385 @@
+/**
+ * Logger Service
+ * 
+ * Centralized logging service with levels, formatting, and performance timing.
+ * Provides consistent logging across dashboard components.
+ * 
+ * @module logger
+ */
+
+class Logger {
+    constructor() {
+        this.logLevels = {
+            DEBUG: 0,
+            INFO: 1,
+            WARN: 2,
+            ERROR: 3,
+            NONE: 4
+        };
+        
+        this.currentLevel = this.logLevels.INFO;
+        this.enableTimestamps = true;
+        this.enableColors = true;
+        this.logHistory = [];
+        this.maxHistorySize = 500;
+        this.performanceMarks = new Map();
+        this.componentLoggers = new Map();
+    }
+
+    /**
+     * Set the current log level
+     * @param {string|number} level - Log level name or value
+     */
+    setLevel(level) {
+        if (typeof level === 'string') {
+            level = level.toUpperCase();
+            if (level in this.logLevels) {
+                this.currentLevel = this.logLevels[level];
+            }
+        } else if (typeof level === 'number') {
+            this.currentLevel = level;
+        }
+    }
+
+    /**
+     * Create a logger for a specific component
+     * @param {string} componentName - Name of the component
+     * @returns {Object} Component logger instance
+     */
+    createComponentLogger(componentName) {
+        if (this.componentLoggers.has(componentName)) {
+            return this.componentLoggers.get(componentName);
+        }
+
+        const componentLogger = {
+            debug: (...args) => this.debug(`[${componentName}]`, ...args),
+            info: (...args) => this.info(`[${componentName}]`, ...args),
+            warn: (...args) => this.warn(`[${componentName}]`, ...args),
+            error: (...args) => this.error(`[${componentName}]`, ...args),
+            time: (label) => this.time(`${componentName}:${label}`),
+            timeEnd: (label) => this.timeEnd(`${componentName}:${label}`),
+            group: (label) => this.group(`${componentName}: ${label}`),
+            groupEnd: () => this.groupEnd()
+        };
+
+        this.componentLoggers.set(componentName, componentLogger);
+        return componentLogger;
+    }
+
+    /**
+     * Debug level logging
+     * @param {...any} args - Arguments to log
+     */
+    debug(...args) {
+        if (this.currentLevel <= this.logLevels.DEBUG) {
+            this.log('DEBUG', args, '#6c757d');
+        }
+    }
+
+    /**
+     * Info level logging
+     * @param {...any} args - Arguments to log
+     */
+    info(...args) {
+        if (this.currentLevel <= this.logLevels.INFO) {
+            this.log('INFO', args, '#0d6efd');
+        }
+    }
+
+    /**
+     * Warning level logging
+     * @param {...any} args - Arguments to log
+     */
+    warn(...args) {
+        if (this.currentLevel <= this.logLevels.WARN) {
+            this.log('WARN', args, '#ffc107');
+        }
+    }
+
+    /**
+     * Error level logging
+     * @param {...any} args - Arguments to log
+     */
+    error(...args) {
+        if (this.currentLevel <= this.logLevels.ERROR) {
+            this.log('ERROR', args, '#dc3545');
+        }
+    }
+
+    /**
+     * Core logging function
+     * @private
+     * @param {string} level - Log level
+     * @param {Array} args - Arguments to log
+     * @param {string} color - Color for the log level
+     */
+    log(level, args, color) {
+        const timestamp = this.enableTimestamps ? new Date().toISOString() : '';
+        const prefix = this.formatPrefix(level, timestamp, color);
+        
+        // Console output
+        const method = level === 'ERROR' ? 'error' : level === 'WARN' ? 'warn' : 'log';
+        if (this.enableColors && color) {
+            console[method](`%c${prefix}`, `color: ${color}; font-weight: bold;`, ...args);
+        } else {
+            console[method](prefix, ...args);
+        }
+        
+        // Add to history
+        this.addToHistory(level, timestamp, args);
+    }
+
+    /**
+     * Format log prefix
+     * @private
+     * @param {string} level - Log level
+     * @param {string} timestamp - Timestamp
+     * @param {string} color - Color
+     * @returns {string} Formatted prefix
+     */
+    formatPrefix(level, timestamp, color) {
+        const parts = [];
+        if (timestamp) {
+            parts.push(`[${timestamp}]`);
+        }
+        parts.push(`[${level}]`);
+        return parts.join(' ');
+    }
+
+    /**
+     * Add log entry to history
+     * @private
+     * @param {string} level - Log level
+     * @param {string} timestamp - Timestamp
+     * @param {Array} args - Log arguments
+     */
+    addToHistory(level, timestamp, args) {
+        this.logHistory.push({
+            level,
+            timestamp,
+            message: args.map(arg => 
+                typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
+            ).join(' ')
+        });
+        
+        // Limit history size
+        if (this.logHistory.length > this.maxHistorySize) {
+            this.logHistory.shift();
+        }
+    }
+
+    /**
+     * Start a performance timer
+     * @param {string} label - Timer label
+     */
+    time(label) {
+        this.performanceMarks.set(label, {
+            start: performance.now(),
+            memory: performance.memory ? performance.memory.usedJSHeapSize : null
+        });
+        this.debug(`Timer started: ${label}`);
+    }
+
+    /**
+     * End a performance timer and log the result
+     * @param {string} label - Timer label
+     * @returns {number} Elapsed time in milliseconds
+     */
+    timeEnd(label) {
+        const mark = this.performanceMarks.get(label);
+        if (!mark) {
+            this.warn(`Timer not found: ${label}`);
+            return null;
+        }
+        
+        const elapsed = performance.now() - mark.start;
+        const memoryDelta = performance.memory 
+            ? performance.memory.usedJSHeapSize - mark.memory 
+            : null;
+        
+        this.performanceMarks.delete(label);
+        
+        const message = [`Timer ended: ${label} - ${elapsed.toFixed(2)}ms`];
+        if (memoryDelta !== null) {
+            message.push(`(Memory: ${this.formatBytes(memoryDelta)})`);
+        }
+        
+        this.info(...message);
+        return elapsed;
+    }
+
+    /**
+     * Log a performance mark
+     * @param {string} name - Mark name
+     */
+    mark(name) {
+        if (performance.mark) {
+            performance.mark(name);
+            this.debug(`Performance mark: ${name}`);
+        }
+    }
+
+    /**
+     * Log a performance measure
+     * @param {string} name - Measure name
+     * @param {string} startMark - Start mark name
+     * @param {string} endMark - End mark name
+     */
+    measure(name, startMark, endMark) {
+        if (performance.measure) {
+            try {
+                performance.measure(name, startMark, endMark);
+                const entries = performance.getEntriesByName(name);
+                if (entries.length > 0) {
+                    const duration = entries[entries.length - 1].duration;
+                    this.info(`Performance measure: ${name} - ${duration.toFixed(2)}ms`);
+                }
+            } catch (error) {
+                this.error(`Failed to measure performance: ${error.message}`);
+            }
+        }
+    }
+
+    /**
+     * Create a log group
+     * @param {string} label - Group label
+     */
+    group(label) {
+        if (console.group) {
+            console.group(label);
+        }
+    }
+
+    /**
+     * Create a collapsed log group
+     * @param {string} label - Group label
+     */
+    groupCollapsed(label) {
+        if (console.groupCollapsed) {
+            console.groupCollapsed(label);
+        }
+    }
+
+    /**
+     * End a log group
+     */
+    groupEnd() {
+        if (console.groupEnd) {
+            console.groupEnd();
+        }
+    }
+
+    /**
+     * Log a table
+     * @param {Array|Object} data - Data to display as table
+     * @param {Array} columns - Optional column names
+     */
+    table(data, columns) {
+        if (console.table) {
+            console.table(data, columns);
+        }
+    }
+
+    /**
+     * Clear the console
+     */
+    clear() {
+        if (console.clear) {
+            console.clear();
+        }
+    }
+
+    /**
+     * Get log history
+     * @param {string} level - Optional level filter
+     * @returns {Array} Log history
+     */
+    getHistory(level) {
+        if (level) {
+            return this.logHistory.filter(entry => entry.level === level);
+        }
+        return this.logHistory.slice();
+    }
+
+    /**
+     * Export log history as text
+     * @returns {string} Log history as text
+     */
+    exportHistory() {
+        return this.logHistory
+            .map(entry => `${entry.timestamp} [${entry.level}] ${entry.message}`)
+            .join('\n');
+    }
+
+    /**
+     * Clear log history
+     */
+    clearHistory() {
+        this.logHistory = [];
+    }
+
+    /**
+     * Format bytes for display
+     * @private
+     * @param {number} bytes - Number of bytes
+     * @returns {string} Formatted string
+     */
+    formatBytes(bytes) {
+        const sign = bytes < 0 ? '-' : '+';
+        bytes = Math.abs(bytes);
+        
+        if (bytes === 0) return '0 B';
+        
+        const units = ['B', 'KB', 'MB', 'GB'];
+        const index = Math.floor(Math.log(bytes) / Math.log(1024));
+        const value = bytes / Math.pow(1024, index);
+        
+        return `${sign}${value.toFixed(2)} ${units[index]}`;
+    }
+
+    /**
+     * Assert a condition
+     * @param {boolean} condition - Condition to assert
+     * @param {string} message - Error message if condition is false
+     */
+    assert(condition, message) {
+        if (!condition) {
+            this.error(`Assertion failed: ${message}`);
+            if (console.trace) {
+                console.trace();
+            }
+        }
+    }
+
+    /**
+     * Count occurrences
+     * @param {string} label - Counter label
+     */
+    count(label = 'default') {
+        if (console.count) {
+            console.count(label);
+        }
+    }
+
+    /**
+     * Reset a counter
+     * @param {string} label - Counter label
+     */
+    countReset(label = 'default') {
+        if (console.countReset) {
+            console.countReset(label);
+        }
+    }
+}
+
+// Create singleton instance
+const logger = new Logger();
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = logger;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => logger);
+} else {
+    window.logger = logger;
+}

claude_mpm/dashboard/static/built/shared/page-structure.js

@@ -0,0 +1,251 @@
+/**
+ * Shared Page Structure Component
+ * Provides consistent header and navigation across all dashboard pages
+ */
+
+export class PageStructure {
+    constructor() {
+        this.pages = [
+            { id: 'main', label: '📈 Main Dashboard', href: '/static/' },
+            { id: 'monitors', label: '📋 All Monitors', href: '/static/monitors-index.html' },
+            { id: 'events', label: '📊 Events', href: '/static/events.html' },
+            { id: 'agents', label: '🤖 Agents', href: '/static/agents.html' },
+            { id: 'tools', label: '🔧 Tools', href: '/static/tools.html' },
+            { id: 'files', label: '📁 Files', href: '/static/files.html' },
+            { id: 'activity', label: '🌳 Activity', href: '/static/activity.html' }
+        ];
+    }
+
+    getCurrentPage() {
+        const path = window.location.pathname;
+
+        if (path.includes('events.html')) return 'events';
+        if (path.includes('agents.html')) return 'agents';
+        if (path.includes('tools.html')) return 'tools';
+        if (path.includes('files.html')) return 'files';
+        if (path.includes('activity.html')) return 'activity';
+        if (path.includes('monitors-index.html')) return 'monitors';
+        if (path.includes('index.html') || path.endsWith('/static/') || path.endsWith('/')) return 'main';
+
+        return 'main';
+    }
+
+    generateNavigation() {
+        const currentPage = this.getCurrentPage();
+
+        const navItems = this.pages.map(page => {
+            const isActive = page.id === currentPage;
+            return `
+                <a href="${page.href}" class="nav-item ${isActive ? 'active' : ''}" data-page="${page.id}">
+                    ${page.label}
+                </a>
+            `;
+        }).join('');
+
+        return `
+            <div class="page-header">
+                <div class="header-brand">
+                    <h1>🚀 Claude MPM Monitor</h1>
+                    <p>Real-time monitoring for agents, tools, files, and events</p>
+                </div>
+                <div class="header-navigation">
+                    ${navItems}
+                </div>
+                <div class="header-status">
+                    <div id="page-connection-status" class="connection-status">
+                        <span class="status-indicator">●</span>
+                        <span class="status-text">Checking...</span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    generateCSS() {
+        return `
+            <style id="page-structure-styles">
+                .page-header {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    color: white;
+                    padding: 2rem;
+                    text-align: center;
+                    margin-bottom: 2rem;
+                    border-radius: 12px;
+                    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+                }
+
+                .header-brand h1 {
+                    margin: 0 0 0.5rem 0;
+                    font-size: 2.5rem;
+                    font-weight: 700;
+                    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                }
+
+                .header-brand p {
+                    margin: 0 0 1.5rem 0;
+                    opacity: 0.9;
+                    font-size: 1.1rem;
+                }
+
+                .header-navigation {
+                    display: flex;
+                    justify-content: center;
+                    gap: 1rem;
+                    flex-wrap: wrap;
+                    margin-bottom: 1.5rem;
+                }
+
+                .nav-item {
+                    padding: 0.75rem 1.5rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    backdrop-filter: blur(10px);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    border-radius: 25px;
+                    color: white;
+                    text-decoration: none;
+                    font-size: 0.9rem;
+                    font-weight: 500;
+                    transition: all 0.3s ease;
+                    display: inline-block;
+                }
+
+                .nav-item:hover {
+                    background: rgba(255, 255, 255, 0.2);
+                    transform: translateY(-2px);
+                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+                }
+
+                .nav-item.active {
+                    background: rgba(255, 255, 255, 0.25);
+                    border-color: rgba(255, 255, 255, 0.4);
+                    font-weight: 600;
+                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+                }
+
+                .header-status {
+                    display: flex;
+                    justify-content: center;
+                }
+
+                .connection-status {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    border-radius: 20px;
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    font-size: 0.9rem;
+                }
+
+                .status-indicator {
+                    font-size: 1.2rem;
+                }
+
+                .connection-status.connected .status-indicator {
+                    color: #22c55e;
+                    text-shadow: 0 0 10px #22c55e;
+                }
+
+                .connection-status.connecting .status-indicator {
+                    color: #fbbf24;
+                    text-shadow: 0 0 10px #fbbf24;
+                    animation: pulse 1s infinite;
+                }
+
+                .connection-status.disconnected .status-indicator {
+                    color: #ef4444;
+                    text-shadow: 0 0 10px #ef4444;
+                }
+
+                @keyframes pulse {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.5; }
+                }
+
+                @media (max-width: 768px) {
+                    .page-header {
+                        padding: 1.5rem;
+                    }
+
+                    .header-brand h1 {
+                        font-size: 2rem;
+                    }
+
+                    .header-navigation {
+                        gap: 0.5rem;
+                    }
+
+                    .nav-item {
+                        padding: 0.5rem 1rem;
+                        font-size: 0.8rem;
+                    }
+                }
+            </style>
+        `;
+    }
+
+    insertIntoPage(containerId = 'page-header') {
+        // Insert CSS
+        const existingStyles = document.getElementById('page-structure-styles');
+        if (!existingStyles) {
+            document.head.insertAdjacentHTML('beforeend', this.generateCSS());
+        }
+
+        // Insert HTML
+        const container = document.getElementById(containerId);
+        if (container) {
+            container.innerHTML = this.generateNavigation();
+            this.setupEventListeners();
+        } else {
+            // If no container found, create one at the top of the body
+            document.body.insertAdjacentHTML('afterbegin', `
+                <div id="${containerId}">
+                    ${this.generateNavigation()}
+                </div>
+            `);
+            this.setupEventListeners();
+        }
+    }
+
+    setupEventListeners() {
+        // Listen for connection status changes
+        document.addEventListener('socketConnectionStatus', (e) => {
+            this.updateConnectionStatus(e.detail.status, e.detail.type);
+        });
+    }
+
+    updateConnectionStatus(status, type) {
+        const statusElement = document.getElementById('page-connection-status');
+        if (statusElement) {
+            const indicator = statusElement.querySelector('.status-indicator');
+            const text = statusElement.querySelector('.status-text');
+
+            if (text) text.textContent = status;
+
+            statusElement.className = `connection-status ${type}`;
+        }
+    }
+
+    initialize() {
+        // Auto-initialize when DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                this.insertIntoPage();
+            });
+        } else {
+            this.insertIntoPage();
+        }
+    }
+}
+
+// Auto-initialize
+const pageStructure = new PageStructure();
+pageStructure.initialize();
+
+// Export for manual use
+export default PageStructure;
+window.PageStructure = PageStructure;