/**
* 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 = `
${(this.memorySystem.totalMemories / 1000000).toFixed(1)}M
Total Memories
${this.memorySystem.latency}μs
Latency
-${this.memorySystem.tokenReduction}%
Token Reduction
${this.memorySystem.retrievalAccuracy.toFixed(1)}%
Accuracy
Memory Categories
${this.renderCategories()}
${this.renderActivity()}
${this.vectorIndex.dimensions}D
•
${this.vectorIndex.indexType}
•
Similarity: ${this.vectorIndex.similarityThreshold}
`;
}
renderCategories() {
const total = this.memorySystem.totalMemories;
return this.memoryCategories.map(cat => {
const percentage = (this.memorySystem.categories[cat.id] / total * 100).toFixed(1);
return `
${this.formatNumber(this.memorySystem.categories[cat.id])}
`;
}).join('');
}
getIconPath(icon) {
const icons = {
eye: '',
book: '',
cpu: '',
box: ''
};
return icons[icon] || icons.box;
}
renderActivity() {
if (this.memorySystem.recentActivity.length === 0) {
return 'En attente d\'activité...
';
}
return this.memorySystem.recentActivity.map(activity => `
${activity.type}
${activity.action}
${activity.agent}
${this.formatTime(activity.timestamp)}
`).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);