🐳 25/07 - 21:28 - Cerveau Holographique Fédéré. corrige donne lui accé partout et memoire et mem0

agent.html

@@ -132,6 +132,15 @@
         <a href="cognitive-hive.html" class="flex items-center gap-2 text-dark-400 hover:text-white transition" title="Cognitive Hive">
           <i data-lucide="hexagon" class="w-4 h-4"></i>
         </a>
+        <a href="content-scan.html" class="text-dark-400 hover:text-white transition" title="Content Scan"><i data-lucide="scan-search" class="w-4 h-4"></i></a>
+        <a href="anti-parasite.html" class="text-dark-400 hover:text-white transition" title="Anti-Parasite"><i data-lucide="bug-off" class="w-4 h-4"></i></a>
+        <a href="stop-net.html" class="text-dark-400 hover:text-white transition" title="Stop Net"><i data-lucide="shield-off" class="w-4 h-4"></i></a>
+        <a href="web-cleaner.html" class="text-dark-400 hover:text-white transition" title="WEB CLEANER"><i data-lucide="scan-eye" class="w-4 h-4"></i></a>
+        <a href="mailing-seo-geo.html" class="text-dark-400 hover:text-white transition" title="SEO GEO"><i data-lucide="map-pinned" class="w-4 h-4"></i></a>
+        <a href="cerveau-hologramme.html" class="text-dark-400 hover:text-white transition" title="Hologramme"><i data-lucide="radio" class="w-4 h-4"></i></a>
+        <a href="soe.html" class="text-dark-400 hover:text-white transition" title="SOE"><i data-lucide="search" class="w-4 h-4"></i></a>
+        <a href="tracker.html" class="text-dark-400 hover:text-white transition" title="IP Tracker"><i data-lucide="map-pin" class="w-4 h-4"></i></a>
+        <a href="navigateur.html" class="text-dark-400 hover:text-white transition" title="Navigateur Virtuel"><i data-lucide="globe" class="w-4 h-4"></i></a>
         <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-neon-amber to-neon-orange flex items-center justify-center shadow-lg shadow-neon-amber/20 pulse-glow">
           <i data-lucide="brain" class="w-5 h-5 text-dark-950"></i>
         </div>

cerveau-hologramme.html

@@ -77,10 +77,19 @@
 
     <!-- TOP BAR -->
     <div class="flex items-center justify-between py-4 border-b border-glass-border anim-up">
-      <div class="flex items-center gap-3">
-        <a href="dashboard.html" class="text-dark-400 hover:text-white transition" title="Dashboard"><i data-lucide="layout-dashboard" class="w-5 h-5"></i></a>
-        <a href="index.html" class="text-dark-400 hover:text-white transition" title="Fast Takedown"><i data-lucide="shield-alert" class="w-5 h-5"></i></a>
-        <a href="agent.html" class="text-dark-400 hover:text-white transition" title="Agent Hybride"><i data-lucide="brain" class="w-5 h-5"></i></a>
+      <div class="flex items-center gap-3 flex-wrap">
+        <a href="dashboard.html" class="text-dark-400 hover:text-white transition" title="Dashboard"><i data-lucide="layout-dashboard" class="w-4 h-4"></i></a>
+        <a href="index.html" class="text-dark-400 hover:text-white transition" title="Fast Takedown"><i data-lucide="shield-alert" class="w-4 h-4"></i></a>
+        <a href="soe.html" class="text-dark-400 hover:text-white transition" title="SOE Inverse"><i data-lucide="search" class="w-4 h-4"></i></a>
+        <a href="tracker.html" class="text-dark-400 hover:text-white transition" title="IP Tracker"><i data-lucide="map-pin" class="w-4 h-4"></i></a>
+        <a href="agent.html" class="text-dark-400 hover:text-white transition" title="Agent Hybride"><i data-lucide="brain" class="w-4 h-4"></i></a>
+        <a href="content-scan.html" class="text-dark-400 hover:text-white transition" title="Content Scan"><i data-lucide="scan-search" class="w-4 h-4"></i></a>
+        <a href="anti-parasite.html" class="text-dark-400 hover:text-white transition" title="Anti-Parasite"><i data-lucide="bug-off" class="w-4 h-4"></i></a>
+        <a href="stop-net.html" class="text-dark-400 hover:text-white transition" title="Stop Net"><i data-lucide="shield-off" class="w-4 h-4"></i></a>
+        <a href="web-cleaner.html" class="text-dark-400 hover:text-white transition" title="WEB CLEANER"><i data-lucide="scan-eye" class="w-4 h-4"></i></a>
+        <a href="mailing-seo-geo.html" class="text-dark-400 hover:text-white transition" title="SEO GEO"><i data-lucide="map-pinned" class="w-4 h-4"></i></a>
+        <a href="cognitive-hive.html" class="text-dark-400 hover:text-white transition" title="Cognitive Hive"><i data-lucide="hexagon" class="w-4 h-4"></i></a>
+        <a href="cognitive-os.html" class="text-dark-400 hover:text-white transition" title="Cognitive OS"><i data-lucide="cpu" class="w-4 h-4"></i></a>
         <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-neon-purple to-neon-cyan flex items-center justify-center shadow-lg shadow-neon-purple/20">
           <i data-lucide="radio" class="w-5 h-5 text-white"></i>
         </div>
@@ -177,6 +186,42 @@
       </div>
     </div>
 
+    <!-- ═══ MEMORY & MEM0 PANELS ═══ -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-6 anim-up anim-up-3">
+
+      <!-- 8 Memory Systems -->
+      <div class="glow-card rounded-xl p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center gap-2">
+            <i data-lucide="database" class="w-4 h-4 text-neon-purple"></i>
+            <span class="text-xs font-semibold text-white uppercase tracking-wider">8 Mémoires</span>
+          </div>
+          <button onclick="resetMemories()" class="text-[10px] text-dark-500 hover:text-white transition">Reset</button>
+        </div>
+        <div class="space-y-1.5" id="memoryGrid"></div>
+      </div>
+
+      <!-- 2 Mem0 Instances -->
+      <div class="glow-card rounded-xl p-4">
+        <div class="flex items-center gap-2 mb-3">
+          <i data-lucide="hard-drive" class="w-4 h-4 text-neon-cyan"></i>
+          <span class="text-xs font-semibold text-white uppercase tracking-wider">2× Mem0</span>
+        </div>
+        <div class="space-y-2.5" id="mem0Grid"></div>
+      </div>
+    </div>
+
+    <!-- Active Context -->
+    <div class="glow-card rounded-xl p-4 mt-4 anim-up anim-up-4">
+      <div class="flex items-center gap-2 mb-3">
+        <i data-lucide="eye" class="w-4 h-4 text-neon-green"></i>
+        <span class="text-xs font-semibold text-white uppercase tracking-wider">Contexte actif</span>
+      </div>
+      <div id="activeContext" class="text-[11px] text-dark-400 space-y-1">
+        <div class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-dark-500"></span>Aucun contexte chargé</div>
+      </div>
+    </div>
+
   </div>
 
   <!-- TOAST -->
@@ -407,6 +452,122 @@ function enableSpeakButton(text) {
   document.getElementById('speakBtn').classList.remove('cursor-not-allowed', 'opacity-40');
 }
 
+// ═══ MEMORY & MEM0 STATE ══════════════════════════════════════════
+const MEMORY_SYSTEMS = [
+  { id: "working",       name: "Mémoire de travail",     icon: "cpu",         color: "#fbbf24", desc: "Contexte immédiat de la conversation" },
+  { id: "episodic",      name: "Mémoire épisodique",     icon: "calendar",    color: "#a78bfa", desc: "Événements et interactions passées" },
+  { id: "semantic",      name: "Mémoire sémantique",     icon: "book-open",   color: "#60a5fa", desc: "Connaissances et faits structurés" },
+  { id: "procedural",    name: "Mémoire procédurale",    icon: "settings",    color: "#34d399", desc: "Procédures et workflows appris" },
+  { id: "longterm",      name: "Mémoire long terme",     icon: "archive",     color: "#f472b6", desc: "Persistance cross-sessions" },
+  { id: "sensory",       name: "Mémoire sensorielle",    icon: "eye",         color: "#fb923c", desc: "Patterns visuels et IOCs" },
+  { id: "metacognitive", name: "Métacognition",          icon: "brain",       color: "#22d3ee", desc: "Auto-évaluation et stratégies" },
+  { id: "social",        name: "Mémoire sociale",         icon: "users",       color: "#f87171", desc: "Profils d'acteurs et relations" },
+];
+
+const MEM0_INSTANCES = [
+  { id: "mem0-personal",       name: "Mem0 Personnel",     icon: "user",      color: "#fbbf24", desc: "Préférences opérateur, historique", entries: 0 },
+  { id: "mem0-organizational", name: "Mem0 Organisation",  icon: "building",  color: "#22d3ee", desc: "Base de connaissances SentinelAI", entries: 0 },
+];
+
+let hologramMemories = {};
+MEMORY_SYSTEMS.forEach(m => { hologramMemories[m.id] = []; });
+let hologramMem0 = { personal: [], organizational: [] };
+
+function renderMemoryGrid() {
+  const el = document.getElementById("memoryGrid");
+  if (!el) return;
+  el.innerHTML = MEMORY_SYSTEMS.map(m => {
+    const count = hologramMemories[m.id]?.length || 0;
+    const hasData = count > 0;
+    return `<div class="flex items-center gap-2 py-1.5 px-2 rounded-md ${hasData ? 'bg-white/[0.03]' : ''} transition">
+      <i data-lucide="${m.icon}" class="w-3.5 h-3.5 shrink-0" style="color:${m.color}"></i>
+      <div class="flex-1 min-w-0">
+        <div class="text-[11px] text-dark-200 truncate">${m.name}</div>
+        <div class="text-[9px] text-dark-500">${m.desc}</div>
+      </div>
+      <div class="flex items-center gap-1">
+        ${hasData ? `<span class="text-[10px] font-mono" style="color:${m.color}">${count}</span>` : '<span class="text-[10px] text-dark-600">∅</span>'}
+        <span class="w-1.5 h-1.5 rounded-full ${hasData ? 'animate-pulse' : ''}" style="background:${hasData ? m.color : '#3a3e52'}"></span>
+      </div>
+    </div>`;
+  }).join("");
+  lucide.createIcons();
+}
+
+function renderMem0Grid() {
+  const el = document.getElementById("mem0Grid");
+  if (!el) return;
+  el.innerHTML = MEM0_INSTANCES.map(m => {
+    const data = m.id === "mem0-personal" ? hologramMem0.personal : hologramMem0.organizational;
+    const count = data?.length || 0;
+    return `<div class="p-3 rounded-lg border border-glass-border bg-white/[0.02]">
+      <div class="flex items-center gap-2 mb-1.5">
+        <i data-lucide="${m.icon}" class="w-4 h-4" style="color:${m.color}"></i>
+        <span class="text-[11px] font-semibold text-white">${m.name}</span>
+        <span class="text-[10px] font-mono px-1.5 py-0.5 rounded" style="background:${m.color}15;color:${m.color}">${count} entrées</span>
+      </div>
+      <div class="text-[10px] text-dark-500">${m.desc}</div>
+      <div class="mt-1.5 h-1 rounded-full bg-dark-700 overflow-hidden">
+        <div class="h-full rounded-full transition-all duration-500" style="width:${Math.min(count * 5, 100)}%;background:${m.color}"></div>
+      </div>
+    </div>`;
+  }).join("");
+  lucide.createIcons();
+}
+
+function storeInMemories(query, response, modelUsed) {
+  const safeModel = modelUsed || 'Holographe IA';
+  const safeQuery = query || '';
+  const safeResponse = response || '';
+
+  // Working memory
+  hologramMemories.working.push({ type: "ai_response", model: safeModel, ts: Date.now() });
+  // Episodic
+  hologramMemories.episodic.push({ event: "voice_query", query: safeQuery, ts: Date.now() });
+  // Long-term
+  hologramMemories.longterm.push({ query: safeQuery, response: safeResponse.substring(0, 500), model: safeModel, ts: Date.now() });
+  // Semantic
+  hologramMemories.semantic.push({ topic: safeQuery, fact: safeResponse.substring(0, 200), ts: Date.now() });
+  // Procedural
+  hologramMemories.procedural.push({ mode: "voice", model: safeModel, success: true, ts: Date.now() });
+  // Metacognitive
+  hologramMemories.metacognitive.push({ self_eval: "response_generated", ts: Date.now() });
+  // Sensory
+  hologramMemories.sensory.push({ input_type: "voice", content: safeQuery.substring(0, 100), ts: Date.now() });
+  // Social
+  hologramMemories.social.push({ actor: "user", action: "query", ts: Date.now() });
+
+  // Mem0 Personal
+  hologramMem0.personal.push({ query: safeQuery, model: safeModel, ts: Date.now() });
+  // Mem0 Organizational
+  hologramMem0.organizational.push({ category: "hologram_interaction", model: safeModel, ts: Date.now() });
+
+  renderMemoryGrid();
+  renderMem0Grid();
+  updateActiveContext(safeQuery);
+}
+
+function updateActiveContext(msg) {
+  const el = document.getElementById("activeContext");
+  if (!el) return;
+  const words = (msg || '').split(/\s+/).slice(0, 8).join(" ");
+  el.innerHTML = `
+    <div class="flex items-center gap-2 py-0.5"><span class="w-1.5 h-1.5 rounded-full bg-neon-green"></span><span class="truncate">Contexte: ${words || 'Aucun'}…</span></div>
+    <div class="flex items-center gap-2 py-0.5"><span class="w-1.5 h-1.5 rounded-full bg-neon-purple"></span>Mode: Voice + Chat</div>
+    <div class="flex items-center gap-2 py-0.5"><span class="w-1.5 h-1.5 rounded-full bg-neon-cyan"></span>Mémoires: ${Object.values(hologramMemories).reduce((a,b) => a + b.length, 0)} entrées</div>
+    <div class="flex items-center gap-2 py-0.5"><span class="w-1.5 h-1.5 rounded-full bg-neon-amber"></span>Mem0: ${hologramMem0.personal.length + hologramMem0.organizational.length} entrées</div>
+  `;
+}
+
+function resetMemories() {
+  MEMORY_SYSTEMS.forEach(m => { hologramMemories[m.id] = []; });
+  hologramMem0 = { personal: [], organizational: [] };
+  renderMemoryGrid();
+  renderMem0Grid();
+  updateActiveContext('');
+  showToast("Mémoires réinitialisées");
+}
+
 // ═══ OPENROUTER CHAT ══════════════════════════════════════════
 async function openRouterChat(messages, { model = "x-ai/grok-4-1-fast", temperature = 0.4, max_tokens = 2048 }) {
   const cfg = window.SENTINEL_CONFIG?.openRouter;
@@ -453,6 +614,7 @@ async function sendMessage(auto = false) {
     const reply = await openRouterChat(messages, {});
     addChatBubble(reply, "ai");
     enableSpeakButton(reply);
+    storeInMemories(msg, reply, "Holographe IA");
   } catch (e) {
     addChatBubble("❌ Erreur : " + e.message, "ai");
   }
@@ -519,6 +681,8 @@ function showToast(msg) {
 
 // ═══ INIT ═════════════════════════════════════════════════════════
 lucide.createIcons();
+renderMemoryGrid();
+renderMem0Grid();
 </script>
 </body>
 </html>