feat(mnemosyne): add memory filter panel with category toggles

- Filter panel with toggle switches per memory region
- Show All / Hide All bulk controls
- Memory count per category
- Frosted glass UI matching Mnemosyne design

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>