import React from 'react';
const LAYER_INFO = {
L1: { name: 'Working', icon: '💭', color: '#58a6ff' },
L2: { name: 'Episodic', icon: '📅', color: '#a371f7' },
L3: { name: 'Semantic', icon: '📚', color: '#3fb950' },
L4: { name: 'Intent', icon: '🎯', color: '#d29922' },
L5: { name: 'Provenance', icon: '🔗', color: '#f85149' },
L6: { name: 'Policy', icon: '⚖️', color: '#39d353' }
};
function MemoryLayers({ stats }) {
const maxCount = Math.max(...Object.values(stats.byLayer));
return (
<div className="memory-layers">
<h3>6-Layer Sovereign Memory</h3>
<div className="layers-grid">
{Object.entries(stats.byLayer).map(([layer, count]) => (
<div key={layer} className="layer-card">
<div className="layer-id" style={{ color: LAYER_INFO[layer].color }}>
{LAYER_INFO[layer].icon} {layer}
</div>
<div className="layer-name">{LAYER_INFO[layer].name}</div>
<div className="layer-count">{count}</div>
<div className="layer-bar">
<div
className="layer-bar-fill"
style={{
width: `${(count / maxCount) * 100}%`,
background: LAYER_INFO[layer].color
}}
/>
</div>
</div>
))}
</div>
</div>
);
}
export default MemoryLayers;
