import React, { useState, useEffect } from 'react';
import MemoryLayers from './components/MemoryLayers';
import NeuralMeshMini from './components/NeuralMeshMini';
import TensionsList from './components/TensionsList';
import EngramStats from './components/EngramStats';
import RecentMemories from './components/RecentMemories';
import SearchBar from './components/SearchBar';
/**
* NEXUS Memory MCP App
* First sovereign memory dashboard for VS Code, Claude & ChatGPT
*
* This MCP App displays:
* - 6-Layer Memory Architecture (L1-L6)
* - Neural Mesh Status (8 Ganglions)
* - Active Tensions
* - ENGRAM O(1) Performance
* - Recent Memories with search
*/
function App() {
const [memories, setMemories] = useState([]);
const [tensions, setTensions] = useState([]);
const [stats, setStats] = useState({
total: 0,
byLayer: { L1: 0, L2: 0, L3: 0, L4: 0, L5: 0, L6: 0 },
engramLookupMs: 0.42,
ganglionsActive: 8
});
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [activeTab, setActiveTab] = useState('overview');
// Simulate loading data (in production, this connects to MCP Server)
useEffect(() => {
const loadData = async () => {
// Simulated data - in production, fetch from MCP Server
setTimeout(() => {
setStats({
total: 1247,
byLayer: { L1: 45, L2: 312, L3: 589, L4: 156, L5: 23, L6: 122 },
engramLookupMs: 0.38,
ganglionsActive: 8,
tensionsCount: 7,
lastSync: new Date().toISOString()
});
setMemories([
{ id: 1, content: 'MCP Apps standard released - build interactive dashboards', layer: 'L3', timestamp: '2026-02-04T10:30:00Z', score: 0.95 },
{ id: 2, content: 'VS Code 1.109 supports Claude Agent natively', layer: 'L3', timestamp: '2026-02-04T09:15:00Z', score: 0.92 },
{ id: 3, content: 'Copilot Memory limited to 28 days - opportunity for sovereign memory', layer: 'L4', timestamp: '2026-02-04T08:00:00Z', score: 0.89 },
{ id: 4, content: 'ENGRAM O(1) benchmark: 0.38ms lookup on 1M entries', layer: 'L3', timestamp: '2026-02-03T16:45:00Z', score: 0.87 },
{ id: 5, content: 'Neural Mesh 8 ganglions activated in production', layer: 'L2', timestamp: '2026-02-03T14:20:00Z', score: 0.85 }
]);
setTensions([
{ id: 1, type: 'CONTRADICTION', description: 'Memory says "use React" but also "avoid frameworks"', severity: 'medium', created: '2026-02-04T08:00:00Z' },
{ id: 2, type: 'OUTDATED', description: 'API endpoint changed but memory not updated', severity: 'low', created: '2026-02-03T12:00:00Z' },
{ id: 3, type: 'DUPLICATE', description: 'Similar memories about MCP Apps in L2 and L3', severity: 'low', created: '2026-02-04T09:30:00Z' }
]);
setLoading(false);
}, 500);
};
loadData();
}, []);
const handleSearch = (query) => {
setSearchQuery(query);
// In production, this triggers MCP Server search
};
const filteredMemories = memories.filter(m =>
searchQuery === '' || m.content.toLowerCase().includes(searchQuery.toLowerCase())
);
if (loading) {
return (
<div className="mcp-app loading">
<div className="loader">
<div className="loader-brain">🧠</div>
<div className="loader-text">Loading NEXUS Memory...</div>
</div>
</div>
);
}
return (
<div className="mcp-app">
{/* Header */}
<header className="mcp-header">
<div className="header-left">
<span className="logo">🧠</span>
<h1>NEXUS Memory</h1>
<span className="badge">Sovereign</span>
</div>
<div className="header-right">
<span className="sync-status">
<span className="sync-dot"></span>
Synced
</span>
</div>
</header>
{/* Tab Navigation */}
<nav className="mcp-tabs">
<button
className={`tab ${activeTab === 'overview' ? 'active' : ''}`}
onClick={() => setActiveTab('overview')}
>
Overview
</button>
<button
className={`tab ${activeTab === 'memories' ? 'active' : ''}`}
onClick={() => setActiveTab('memories')}
>
Memories
</button>
<button
className={`tab ${activeTab === 'tensions' ? 'active' : ''}`}
onClick={() => setActiveTab('tensions')}
>
Tensions
{tensions.length > 0 && <span className="tab-badge">{tensions.length}</span>}
</button>
<button
className={`tab ${activeTab === 'neural' ? 'active' : ''}`}
onClick={() => setActiveTab('neural')}
>
Neural Mesh
</button>
</nav>
{/* Main Content */}
<main className="mcp-content">
{activeTab === 'overview' && (
<div className="overview-grid">
{/* Stats Row */}
<div className="stats-row">
<div className="stat-card">
<div className="stat-value">{stats.total.toLocaleString()}</div>
<div className="stat-label">Total Memories</div>
</div>
<div className="stat-card engram">
<div className="stat-value">{stats.engramLookupMs}ms</div>
<div className="stat-label">ENGRAM O(1)</div>
</div>
<div className="stat-card">
<div className="stat-value">{stats.ganglionsActive}/8</div>
<div className="stat-label">Ganglions Active</div>
</div>
<div className="stat-card tensions">
<div className="stat-value">{tensions.length}</div>
<div className="stat-label">Active Tensions</div>
</div>
</div>
{/* Memory Layers */}
<MemoryLayers stats={stats} />
{/* Two Column Layout */}
<div className="two-column">
<NeuralMeshMini ganglions={stats.ganglionsActive} />
<EngramStats lookupMs={stats.engramLookupMs} />
</div>
{/* Recent Memories Preview */}
<div className="section">
<h3>Recent Memories</h3>
<RecentMemories memories={memories.slice(0, 3)} />
</div>
</div>
)}
{activeTab === 'memories' && (
<div className="memories-view">
<SearchBar onSearch={handleSearch} />
<RecentMemories memories={filteredMemories} expanded />
</div>
)}
{activeTab === 'tensions' && (
<div className="tensions-view">
<TensionsList tensions={tensions} />
</div>
)}
{activeTab === 'neural' && (
<div className="neural-view">
<NeuralMeshMini ganglions={stats.ganglionsActive} expanded />
</div>
)}
</main>
{/* Footer */}
<footer className="mcp-footer">
<div className="footer-left">
<span className="powered-by">Powered by NEXUS OS</span>
</div>
<div className="footer-right">
<a href="https://remembr.space" target="_blank" rel="noopener">remembr.space</a>
</div>
</footer>
</div>
);
}
export default App;
