Merge pull request '[Mnemosyne] Memory filter panel — toggle categories by region' (#1213) from feat/mnemosyne-memory-filter into main

Merged PR #1213: [Mnemosyne] Memory filter panel — toggle categories by region

app.js

@@ -46,6 +46,7 @@ let debugOverlay;
 let frameCount = 0, lastFPSTime = 0, fps = 0;
 let chatOpen = true;
 let memoryFeedEntries = [];  // Mnemosyne: recent memory events for feed panel
+let _memoryFilterOpen = false;  // Mnemosyne: filter panel state
 let loadProgress = 0;
 let performanceTier = 'high';
 
@@ -1871,6 +1872,7 @@ function setupControls() {
       if (visionOverlayActive) closeVisionOverlay();
       if (atlasOverlayActive) closePortalAtlas();
       if (_archiveDashboardOpen) toggleArchiveHealthDashboard();
+      if (_memoryFilterOpen) closeMemoryFilter();
     }
     if (e.key.toLowerCase() === 'v' && document.activeElement !== document.getElementById('chat-input')) {
       cycleNavMode();
@@ -1884,6 +1886,9 @@ function setupControls() {
     if (e.key.toLowerCase() === 'h' && document.activeElement !== document.getElementById('chat-input')) {
       toggleArchiveHealthDashboard();
     }
+    if (e.key.toLowerCase() === 'g' && document.activeElement !== document.getElementById('chat-input')) {
+      toggleMemoryFilter();
+    }
   });
   document.addEventListener('keyup', (e) => {
     keys[e.key.toLowerCase()] = false;
@@ -2254,6 +2259,15 @@ function toggleArchiveHealthDashboard() {
  * Render current archive statistics into the dashboard panel.
  * Reads live from SpatialMemory.getAllMemories() — no backend needed.
  */
+function toggleMemoryFilter() {
+  _memoryFilterOpen = !_memoryFilterOpen;
+  if (_memoryFilterOpen) {
+    openMemoryFilter();
+  } else {
+    closeMemoryFilter();
+  }
+}
+
 function updateArchiveHealthDashboard() {
   const container = document.getElementById('archive-health-content');
   if (!container) return;

index.html

@@ -457,7 +457,67 @@ index.html
       <div class="memory-feed-actions"><button class="memory-feed-clear" onclick="clearMemoryFeed()">Clear</button><button class="memory-feed-toggle" onclick="document.getElementById('memory-feed').style.display='none'">✕</button></div>
     </div>
     <div id="memory-feed-list" class="memory-feed-list"></div>
+  <!-- ═══ MNEMOSYNE MEMORY FILTER ═══ -->
+  <div id="memory-filter" class="memory-filter" style="display:none;">
+    <div class="filter-header">
+      <span class="filter-title">⬡ Memory Filter</span>
+      <button class="filter-close" onclick="closeMemoryFilter()">✕</button>
+    </div>
+    <div class="filter-controls">
+      <button class="filter-btn" onclick="setAllFilters(true)">Show All</button>
+      <button class="filter-btn" onclick="setAllFilters(false)">Hide All</button>
+    </div>
+    <div class="filter-list" id="filter-list"></div>
   </div>
 
+
+  </div>
+
+
+<script>
+// ─── MNEMOSYNE: Memory Filter Panel ───────────────────
+function openMemoryFilter() {
+  renderFilterList();
+  document.getElementById('memory-filter').style.display = 'flex';
+}
+function closeMemoryFilter() {
+  document.getElementById('memory-filter').style.display = 'none';
+}
+function renderFilterList() {
+  const counts = SpatialMemory.getMemoryCountByRegion();
+  const regions = SpatialMemory.REGIONS;
+  const list = document.getElementById('filter-list');
+  list.innerHTML = '';
+  for (const [key, region] of Object.entries(regions)) {
+    const count = counts[key] || 0;
+    const visible = SpatialMemory.isRegionVisible(key);
+    const colorHex = '#' + region.color.toString(16).padStart(6, '0');
+    const item = document.createElement('div');
+    item.className = 'filter-item';
+    item.innerHTML = `
+      <div class="filter-item-left">
+        <span class="filter-dot" style="background:${colorHex}"></span>
+        <span class="filter-label">${region.glyph} ${region.label}</span>
+      </div>
+      <div class="filter-item-right">
+        <span class="filter-count">${count}</span>
+        <label class="filter-toggle">
+          <input type="checkbox" ${visible ? 'checked' : ''} 
+                 onchange="toggleRegion('${key}', this.checked)">
+          <span class="filter-slider"></span>
+        </label>
+      </div>
+    `;
+    list.appendChild(item);
+  }
+}
+function toggleRegion(category, visible) {
+  SpatialMemory.setRegionVisibility(category, visible);
+}
+function setAllFilters(visible) {
+  SpatialMemory.setAllRegionsVisible(visible);
+  renderFilterList();
+}
+</script>
 </body>
 </html>

nexus/components/spatial-memory.js

@@ -1,4 +1,41 @@
-// ═══════════════════════════════════════════
+// ═══
+  // ─── REGION VISIBILITY (Memory Filter) ──────────────
+  let _regionVisibility = {};  // category -> boolean (undefined = visible)
+  
+  setRegionVisibility(category, visible) {
+    _regionVisibility[category] = visible;
+    for (const obj of Object.values(_memoryObjects)) {
+      if (obj.data.category === category && obj.mesh) {
+        obj.mesh.visible = visible !== false;
+      }
+    }
+  },
+
+  setAllRegionsVisible(visible) {
+    const cats = Object.keys(REGIONS);
+    for (const cat of cats) {
+      _regionVisibility[cat] = visible;
+      for (const obj of Object.values(_memoryObjects)) {
+        if (obj.data.category === cat && obj.mesh) {
+          obj.mesh.visible = visible;
+        }
+      }
+    }
+  },
+
+  getMemoryCountByRegion() {
+    const counts = {};
+    for (const obj of Object.values(_memoryObjects)) {
+      const cat = obj.data.category || 'working';
+      counts[cat] = (counts[cat] || 0) + 1;
+    }
+    return counts;
+  },
+
+  isRegionVisible(category) {
+    return _regionVisibility[category] !== false;
+  },
+════════════════════════════════════════
 //  PROJECT MNEMOSYNE — SPATIAL MEMORY SCHEMA
 // ═══════════════════════════════════════════
 //

style.css

@@ -1546,3 +1546,170 @@ canvas#nexus-canvas {
   padding-top: 4px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
+
+
+/* ═══ MNEMOSYNE: Memory Filter Panel ═══ */
+.memory-filter {
+  position: fixed;
+  top: 50%;
+  right: 20px;
+  transform: translateY(-50%);
+  width: 300px;
+  max-height: 70vh;
+  background: rgba(10, 12, 20, 0.92);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(74, 240, 192, 0.2);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  animation: slideInRight 0.3s ease;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+}
+
+@keyframes slideInRight {
+  from { transform: translateY(-50%) translateX(30px); opacity: 0; }
+  to { transform: translateY(-50%) translateX(0); opacity: 1; }
+}
+
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid rgba(74, 240, 192, 0.1);
+}
+
+.filter-title {
+  color: #4af0c0;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.filter-close {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+.filter-close:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.filter-controls {
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px;
+}
+
+.filter-btn {
+  flex: 1;
+  padding: 6px 0;
+  background: rgba(74, 240, 192, 0.08);
+  border: 1px solid rgba(74, 240, 192, 0.2);
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.filter-btn:hover {
+  background: rgba(74, 240, 192, 0.15);
+  color: #fff;
+}
+
+.filter-list {
+  overflow-y: auto;
+  padding: 6px 8px 12px;
+  flex: 1;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 8px;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+.filter-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.filter-item-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.filter-label {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+}
+
+.filter-item-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-count {
+  color: rgba(255, 255, 255, 0.35);
+  font-size: 12px;
+  min-width: 20px;
+  text-align: right;
+}
+
+/* Toggle switch */
+.filter-toggle {
+  position: relative;
+  width: 34px;
+  height: 18px;
+  display: inline-block;
+}
+.filter-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.filter-slider {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 9px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.filter-slider::before {
+  content: '';
+  position: absolute;
+  height: 14px;
+  width: 14px;
+  left: 2px;
+  bottom: 2px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+.filter-toggle input:checked + .filter-slider {
+  background: rgba(74, 240, 192, 0.4);
+}
+.filter-toggle input:checked + .filter-slider::before {
+  transform: translateX(16px);
+  background: #4af0c0;
+}