feat(mnemosyne): add crystal click detection + inspector functions

app.js

@@ -46,7 +46,6 @@ 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';
 
@@ -708,7 +707,6 @@ async function init() {
   createWorkshopTerminal();
   createAshStorm();
   SpatialMemory.init(scene);
-  SpatialMemory.setCamera(camera);
   updateLoad(90);
 
   loadSession();
@@ -1872,7 +1870,6 @@ 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();
@@ -1886,9 +1883,6 @@ 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;
@@ -1916,6 +1910,16 @@ function setupControls() {
           if (portal) activatePortal(portal);
         }
       }
+      // MNEMOSYNE: Crystal click → Inspector
+      const crystalMeshes = SpatialMemory.getCrystalMeshes();
+      if (crystalMeshes && crystalMeshes.length > 0) {
+        const crystalHits = raycaster.intersectObjects(crystalMeshes);
+        if (crystalHits.length > 0) {
+          const hitMesh = crystalHits[0].object;
+          const memData = SpatialMemory.getMemoryFromMesh(hitMesh);
+          if (memData) showInspector(memData);
+        }
+      }
     }
   });
   document.addEventListener('mouseup', () => { mouseDown = false; });
@@ -2259,15 +2263,6 @@ 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;
@@ -3590,3 +3585,49 @@ init().then(() => {
   connectMemPalace();
   mineMemPalaceContent();
 });
+
+
+// MNEMOSYNE — MEMORY INSPECTOR
+function showInspector(memData) {
+  const panel = document.getElementById('memory-inspector');
+  if (!panel) return;
+  const data = memData.data || memData;
+  const region = memData.region || data.category || 'working';
+  const regionDef = SpatialMemory.REGIONS[region] || SpatialMemory.REGIONS.working;
+  const strength = Math.max(0.05, Math.min(1, data.strength != null ? data.strength : 0.7));
+  const colorHex = '#' + new THREE.Color(regionDef.color).getHexString();
+  document.getElementById('inspector-dot').style.background = colorHex;
+  document.getElementById('inspector-dot').style.color = colorHex;
+  document.getElementById('inspector-title').textContent = data.title || data.id || 'Memory';
+  document.getElementById('inspector-region').textContent = regionDef.label || region;
+  document.getElementById('inspector-content').textContent = data.content || '(no content)';
+  const strengthEl = document.getElementById('inspector-strength');
+  strengthEl.style.width = (strength * 100) + '%';
+  strengthEl.style.background = colorHex;
+  const created = data.timestamp || data.createdAt || '';
+  document.getElementById('inspector-created').textContent = created ? new Date(created).toLocaleString() : '—';
+  document.getElementById('inspector-id').textContent = data.id || '—';
+  const connSection = document.getElementById('inspector-connections');
+  const connList = document.getElementById('inspector-connections-list');
+  if (data.connections && data.connections.length > 0) {
+    connSection.style.display = 'block';
+    connList.innerHTML = data.connections.map(cid => {
+      const allMems = SpatialMemory.getAllMemories();
+      const connMem = allMems ? allMems.find(m => m.id === cid) : null;
+      const label = connMem ? (connMem.data.title || connMem.data.id || cid) : cid;
+      return `<div class="inspector-connection-item" onclick="focusMemoryById('${cid}')">${label}</div>`;
+    }).join('');
+  } else { connSection.style.display = 'none'; }
+  if (data.id) SpatialMemory.highlightMemory(data.id);
+  panel.style.display = 'block';
+}
+function closeInspector() {
+  document.getElementById('memory-inspector').style.display = 'none';
+  SpatialMemory.clearHighlight();
+}
+function focusMemoryById(id) {
+  const allMems = SpatialMemory.getAllMemories();
+  if (!allMems) return;
+  const found = allMems.find(m => m.id === id || (m.data && m.data.id === id));
+  if (found) showInspector(found);
+}

index.html

@@ -457,67 +457,39 @@ 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>
 
 
+  <!-- ═══ MNEMOSYNE MEMORY INSPECTOR ═══ -->
+  <div id="memory-inspector" class="memory-inspector" style="display:none;">
+    <div class="inspector-header">
+      <div class="inspector-category-dot" id="inspector-dot"></div>
+      <span class="inspector-title" id="inspector-title">Memory</span>
+      <button class="inspector-close" onclick="closeInspector()">✕</button>
+    </div>
+    <div class="inspector-region" id="inspector-region">Region</div>
+    <div class="inspector-content" id="inspector-content">Content</div>
+    <div class="inspector-meta">
+      <div class="inspector-meta-item">
+        <span class="inspector-meta-label">Strength</span>
+        <div class="inspector-strength-bar">
+          <div class="inspector-strength-fill" id="inspector-strength"></div>
+        </div>
+      </div>
+      <div class="inspector-meta-item">
+        <span class="inspector-meta-label">Created</span>
+        <span class="inspector-meta-value" id="inspector-created">—</span>
+      </div>
+      <div class="inspector-meta-item">
+        <span class="inspector-meta-label">ID</span>
+        <span class="inspector-meta-value inspector-id" id="inspector-id">—</span>
+      </div>
+    </div>
+    <div class="inspector-connections" id="inspector-connections" style="display:none;">
+      <div class="inspector-section-title">Connections</div>
+      <div id="inspector-connections-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,41 +1,4 @@
-// ═══
-  // ─── 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
 // ═══════════════════════════════════════════
 //
@@ -866,7 +829,7 @@ const SpatialMemory = (() => {
     getCrystalMeshes, getMemoryFromMesh, highlightMemory, clearHighlight, getSelectedId,
     exportIndex, importIndex, searchNearby, REGIONS,
     saveToStorage, loadFromStorage, clearStorage,
-    runGravityLayout, setCamera
+    runGravityLayout
   };
 })();
 

style.css

@@ -1548,168 +1548,45 @@ canvas#nexus-canvas {
 }
 
 
-/* ═══ MNEMOSYNE: Memory Filter Panel ═══ */
-.memory-filter {
+/* ═══ MNEMOSYNE MEMORY INSPECTOR ═══ */
+.memory-inspector {
   position: fixed;
-  top: 50%;
   right: 20px;
+  top: 50%;
   transform: translateY(-50%);
-  width: 300px;
-  max-height: 70vh;
+  width: 320px;
   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);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   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);
+  z-index: 90;
+  font-family: 'JetBrains Mono', monospace;
+  color: #e0e0e0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(74, 240, 192, 0.05);
+  animation: inspectorSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   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;
+@keyframes inspectorSlideIn {
+  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
+  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
 }
+.inspector-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
+.inspector-category-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
+.inspector-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.inspector-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.15s; }
+.inspector-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
+.inspector-region { padding: 6px 16px 10px; font-size: 11px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; }
+.inspector-content { padding: 0 16px 14px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-height: 200px; overflow-y: auto; word-break: break-word; }
+.inspector-content::-webkit-scrollbar { width: 4px; }
+.inspector-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
+.inspector-meta { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 8px; }
+.inspector-meta-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.inspector-meta-label { font-size: 10px; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
+.inspector-meta-value { font-size: 11px; color: rgba(255, 255, 255, 0.6); text-align: right; }
+.inspector-id { font-size: 10px; opacity: 0.5; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.inspector-strength-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; max-width: 120px; }
+.inspector-strength-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }
+.inspector-connections { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
+.inspector-section-title { font-size: 10px; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+.inspector-connection-item { font-size: 11px; color: rgba(255, 255, 255, 0.6); padding: 4px 0; cursor: pointer; transition: color 0.15s; }
+.inspector-connection-item:hover { color: #4af0c0; }