components/phoenix-memory.js

/**
 * Phoenix Memory Web Component
 * Advanced Memory System Visualization with MEM0 Integration
 */

class PhoenixMemoryDisplay extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.memorySystem = {
            type: 'MEM0',
            totalMemories: 1200000,
            activeConnections: 128,
            latency: 500, // microseconds
            tokenReduction: 90,
            retrievalAccuracy: 98.7,
            categories: {
                episodic: 450000,
                semantic: 380000,
                procedural: 220000,
                working: 150000
            },
            recentActivity: []
        };
        
        this.memoryGraph = {
            nodes: [],
            edges: []
        };
        
        this.vectorIndex = {
            dimensions: 4096,
            totalVectors: 2500000,
            indexType: 'HNSW',
            similarityThreshold: 0.85
        };
    }

    connectedCallback() {
        this.render();
        this.initializeMemorySystem();
        this.startMemoryMonitoring();
        this.loadRecentMemories();
    }

    initializeMemorySystem() {
        // Initialize memory categories
        this.memoryCategories = [
            { 
                id: 'episodic',
                name: 'Mémoire Épisodique',
                color: '#22d3ee',
                icon: 'eye',
                description: 'Expériences et événements'
            },
            {
                id: 'semantic',
                name: 'Mémoire Sémantique',
                color: '#a855f7',
                icon: 'book',
                description: 'Connaissances et faits'
            },
            {
                id: 'procedural',
                name: 'Mémoire Procédurale',
                color: '#f97316',
                icon: 'cpu',
                description: 'Compétences et processus'
            },
            {
                id: 'working',
                name: 'Mémoire de Travail',
                color: '#4ade80',
                icon: 'box',
                description: 'Contexte actuel'
            }
        ];
        
        // Generate initial activity
        this.generateActivity();
    }

    generateActivity() {
        const activities = [
            { type: 'STORE', category: 'episodic', action: 'Nouvelle expérience capturée', agent: 'Llama v4' },
            { type: 'RETRIEVE', category: 'semantic', action: 'Rappel de connaissances', agent: 'GPT-4.5' },
            { type: 'UPDATE', category: 'procedural', action: 'Processus optimisé', agent: 'Bloom-IC' },
            { type: 'ENHANCE', category: 'working', action: 'Contexte enrichi', agent: 'Phoenix Core' }
        ];
        
        setInterval(() => {
            if (Math.random() > 0.6) {
                const activity = activities[Math.floor(Math.random() * activities.length)];
                this.memorySystem.recentActivity.unshift({
                    ...activity,
                    timestamp: new Date(),
                    id: Date.now()
                });
                this.memorySystem.recentActivity = this.memorySystem.recentActivity.slice(0, 10);
                this.renderActivity();
            }
        }, 2000);
    }

    startMemoryMonitoring() {
        setInterval(() => {
            this.updateMemoryMetrics();
            this.updateVectorIndex();
        }, 1000);
    }

    updateMemoryMetrics() {
        // Simulate memory growth
        this.memorySystem.totalMemories += Math.floor(Math.random() * 10);
        this.memorySystem.activeConnections = 100 + Math.floor(Math.random() * 50);
        this.memorySystem.retrievalAccuracy = 97 + Math.random() * 2;
        
        this.dispatchEvent(new CustomEvent('memory-update', {
            detail: this.memorySystem,
            bubbles: true,
            composed: true
        }));
    }

    updateVectorIndex() {
        this.vectorIndex.totalVectors += Math.floor(Math.random() * 100);
    }

    loadRecentMemories() {
        this.memorySystem.recentActivity = [
            { type: 'STORE', category: 'episodic', action: 'Analyse sécurité réseau', agent: 'Guard', timestamp: new Date(Date.now() - 60000) },
            { type: 'RETRIEVE', category: 'semantic', action: 'Rappel protocole collaboration', agent: 'Federation', timestamp: new Date(Date.now() - 120000) },
            { type: 'UPDATE', category: 'procedural', action: 'Optimisation mémoire', agent: 'Core', timestamp: new Date(Date.now() - 180000) },
            { type: 'ENHANCE', category: 'working', action: 'Contexte utilisateur', agent: 'Llama', timestamp: new Date(Date.now() - 240000) }
        ];
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    font-family: 'Rajdhani', sans-serif;
                }
                
                .memory-container {
                    background: linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(2,6,23,0.9) 100%);
                    border: 1px solid rgba(168,85,247,0.3);
                    border-radius: 1rem;
                    padding: 1.5rem;
                }
                
                .memory-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 1.5rem;
                }
                
                .memory-title {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }
                
                .memory-icon {
                    width: 40px;
                    height: 40px;
                    background: linear-gradient(135deg, #a855f7, #7c3aed);
                    border-radius: 0.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .memory-name {
                    font-family: 'Orbitron', sans-serif;
                    font-size: 1.125rem;
                    font-weight: 700;
                    color: #c084fc;
                }
                
                .memory-subtitle {
                    font-size: 0.7rem;
                    color: rgba(192,132,252,0.6);
                }
                
                .stats-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 0.75rem;
                    margin-bottom: 1.5rem;
                }
                
                .stat-card {
                    background: rgba(15,23,42,0.5);
                    border: 1px solid rgba(168,85,247,0.2);
                    border-radius: 0.5rem;
                    padding: 0.75rem;
                    text-align: center;
                }
                
                .stat-value {
                    font-family: 'Monaco', monospace;
                    font-size: 1.25rem;
                    font-weight: 700;
                    color: #c084fc;
                }
                
                .stat-label {
                    font-size: 0.65rem;
                    color: rgba(192,132,252,0.6);
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                
                .categories-section {
                    margin-bottom: 1.5rem;
                }
                
                .section-title {
                    font-size: 0.75rem;
                    color: rgba(192,132,252,0.8);
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    margin-bottom: 0.75rem;
                }
                
                .category-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 0.5rem;
                }
                
                .category-card {
                    background: rgba(15,23,42,0.3);
                    border: 1px solid rgba(168,85,247,0.1);
                    border-radius: 0.5rem;
                    padding: 0.5rem;
                    transition: all 0.3s ease;
                }
                
                .category-card:hover {
                    border-color: rgba(168,85,247,0.4);
                    background: rgba(168,85,247,0.1);
                }
                
                .category-header {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-bottom: 0.5rem;
                }
                
                .category-icon {
                    width: 24px;
                    height: 24px;
                    border-radius: 0.25rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .category-name {
                    font-size: 0.7rem;
                    color: rgba(192,132,252,0.9);
                    font-weight: 600;
                }
                
                .category-count {
                    font-family: 'Monaco', monospace;
                    font-size: 1rem;
                    color: #c084fc;
                }
                
                .category-bar {
                    height: 3px;
                    background: rgba(15,23,42,0.5);
                    border-radius: 1.5px;
                    overflow: hidden;
                    margin-top: 0.5rem;
                }
                
                .category-bar-fill {
                    height: 100%;
                    transition: width 0.5s ease;
                }
                
                .activity-section {
                    background: rgba(15,23,42,0.3);
                    border: 1px solid rgba(168,85,247,0.1);
                    border-radius: 0.5rem;
                    padding: 0.75rem;
                    max-height: 200px;
                    overflow-y: auto;
                }
                
                .activity-item {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem;
                    border-bottom: 1px solid rgba(168,85,247,0.1);
                    font-size: 0.75rem;
                }
                
                .activity-item:last-child {
                    border-bottom: none;
                }
                
                .activity-type {
                    padding: 0.125rem 0.375rem;
                    border-radius: 0.25rem;
                    font-size: 0.6rem;
                    font-weight: 600;
                    min-width: 60px;
                    text-align: center;
                }
                
                .activity-store { background: rgba(34,211,238,0.2); color: #22d3ee; }
                .activity-retrieve { background: rgba(168,85,247,0.2); color: #c084fc; }
                .activity-update { background: rgba(249,115,22,0.2); color: #f97316; }
                .activity-enhance { background: rgba(74,222,128,0.2); color: #4ade80; }
                
                .activity-action {
                    flex: 1;
                    color: rgba(192,132,252,0.9);
                }
                
                .activity-agent {
                    color: rgba(192,132,252,0.6);
                    font-size: 0.65rem;
                }
                
                .activity-time {
                    color: rgba(192,132,252,0.4);
                    font-size: 0.65rem;
                    font-family: 'Monaco', monospace;
                }
                
                .vector-section {
                    margin-top: 1rem;
                    padding: 0.75rem;
                    background: rgba(15,23,42,0.3);
                    border: 1px solid rgba(168,85,247,0.1);
                    border-radius: 0.5rem;
                }
                
                .vector-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 0.5rem;
                }
                
                .vector-title {
                    font-size: 0.7rem;
                    color: rgba(192,132,252,0.8);
                }
                
                .vector-value {
                    font-family: 'Monaco', monospace;
                    font-size: 0.9rem;
                    color: #c084fc;
                }
            </style>
            
            <div class="memory-container">
                <div class="memory-header">
                    <div class="memory-title">
                        <div class="memory-icon">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
                                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="memory-name">Phoenix Memory</div>
                            <div class="memory-subtitle">${this.memorySystem.type} + Vector Index</div>
                        </div>
                    </div>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">${(this.memorySystem.totalMemories / 1000000).toFixed(1)}M</div>
                        <div class="stat-label">Total Memories</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${this.memorySystem.latency}μs</div>
                        <div class="stat-label">Latency</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">-${this.memorySystem.tokenReduction}%</div>
                        <div class="stat-label">Token Reduction</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">${this.memorySystem.retrievalAccuracy.toFixed(1)}%</div>
                        <div class="stat-label">Accuracy</div>
                    </div>
                </div>
                
                <div class="categories-section">
                    <div class="section-title">Memory Categories</div>
                    <div class="category-grid" id="category-grid">
                        ${this.renderCategories()}
                    </div>
                </div>
                
                <div class="activity-section" id="activity-section">
                    ${this.renderActivity()}
                </div>
                
                <div class="vector-section">
                    <div class="vector-header">
                        <span class="vector-title">Vector Index</span>
                        <span class="vector-value">${(this.vectorIndex.totalVectors / 1000000).toFixed(1)}M vectors</span>
                    </div>
                    <div style="display: flex; gap: 0.5rem; font-size: 0.65rem; color: rgba(192,132,252,0.6);">
                        <span>${this.vectorIndex.dimensions}D</span>
                        <span>•</span>
                        <span>${this.vectorIndex.indexType}</span>
                        <span>•</span>
                        <span>Similarity: ${this.vectorIndex.similarityThreshold}</span>
                    </div>
                </div>
            </div>
        `;
    }

    renderCategories() {
        const total = this.memorySystem.totalMemories;
        return this.memoryCategories.map(cat => {
            const percentage = (this.memorySystem.categories[cat.id] / total * 100).toFixed(1);
            return `
                <div class="category-card">
                    <div class="category-header">
                        <div class="category-icon" style="background: ${cat.color}20; color: ${cat.color}">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="${cat.color}" stroke-width="2">
                                <${this.getIconPath(cat.icon)}/>
                            </svg>
                        </div>
                        <span class="category-name">${cat.name.split(' ')[1]}</span>
                    </div>
                    <div class="category-count">${this.formatNumber(this.memorySystem.categories[cat.id])}</div>
                    <div class="category-bar">
                        <div class="category-bar-fill" style="width: ${percentage}%; background: ${cat.color}"></div>
                    </div>
                </div>
            `;
        }).join('');
    }

    getIconPath(icon) {
        const icons = {
            eye: '<circle cx="12" cy="12" r="3"/><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>',
            book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
            cpu: '<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/>',
            box: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>'
        };
        return icons[icon] || icons.box;
    }

    renderActivity() {
        if (this.memorySystem.recentActivity.length === 0) {
            return '<div style="color: rgba(192,132,252,0.4); text-align: center; padding: 1rem;">En attente d\'activité...</div>';
        }
        
        return this.memorySystem.recentActivity.map(activity => `
            <div class="activity-item">
                <span class="activity-type activity-${activity.type.toLowerCase()}">${activity.type}</span>
                <span class="activity-action">${activity.action}</span>
                <span class="activity-agent">${activity.agent}</span>
                <span class="activity-time">${this.formatTime(activity.timestamp)}</span>
            </div>
        `).join('');
    }

    renderActivityItem() {
        const container = this.shadowRoot.getElementById('activity-section');
        if (container) {
            container.innerHTML = this.renderActivity();
        }
    }

    formatNumber(num) {
        if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
        if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
        return num.toString();
    }

    formatTime(date) {
        const diff = Date.now() - date.getTime();
        if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
        if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
        return `${Math.floor(diff / 3600000)}h`;
    }

    // Public API
    async store(memory) {
        // Store new memory
        console.log('📦 Storing memory:', memory);
        return { success: true, id: Date.now() };
    }

    async retrieve(query) {
        // Retrieve memories based on query
        console.log('🔍 Retrieving memories for:', query);
        return [];
    }

    async enhance(context) {
        // Enhance memories with context
        console.log('✨ Enhancing memories with context');
    }
}

customElements.define('phoenix-memory-display', PhoenixMemoryDisplay);