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

app.js

@@ -1910,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; });
@@ -3575,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

@@ -459,5 +459,37 @@ index.html
     <div id="memory-feed-list" class="memory-feed-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>
+
 </body>
 </html>

style.css

@@ -1546,3 +1546,47 @@ canvas#nexus-canvas {
   padding-top: 4px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
 }
+
+
+/* ═══ MNEMOSYNE MEMORY INSPECTOR ═══ */
+.memory-inspector {
+  position: fixed;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 320px;
+  background: rgba(10, 12, 20, 0.92);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  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 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; }