feat(mnemosyne): add memory crystal inspection panel styles

app.js

@@ -1883,7 +1883,7 @@ function setupControls() {
       orbitState.lastX = e.clientX;
       orbitState.lastY = e.clientY;
       
-      // Raycasting for portals
+      // Raycasting for portals and memory crystals
       if (!portalOverlayActive) {
         const mouse = new THREE.Vector2(
           (e.clientX / window.innerWidth) * 2 - 1,
@@ -1891,12 +1891,32 @@ function setupControls() {
         );
         const raycaster = new THREE.Raycaster();
         raycaster.setFromCamera(mouse, camera);
-        const intersects = raycaster.intersectObjects(portals.map(p => p.ring));
-        if (intersects.length > 0) {
-          const clickedRing = intersects[0].object;
+
+        // Priority 1: Portals
+        const portalHits = raycaster.intersectObjects(portals.map(p => p.ring));
+        if (portalHits.length > 0) {
+          const clickedRing = portalHits[0].object;
           const portal = portals.find(p => p.ring === clickedRing);
-          if (portal) activatePortal(portal);
+          if (portal) { activatePortal(portal); return; }
         }
+
+        // Priority 2: Memory crystals (Mnemosyne)
+        const crystalMeshes = SpatialMemory.getCrystalMeshes();
+        if (crystalMeshes.length > 0) {
+          const crystalHits = raycaster.intersectObjects(crystalMeshes, false);
+          if (crystalHits.length > 0) {
+            const hitMesh = crystalHits[0].object;
+            const memInfo = SpatialMemory.getMemoryFromMesh(hitMesh);
+            if (memInfo) {
+              SpatialMemory.highlightMemory(memInfo.data.id);
+              showMemoryPanel(memInfo);
+              return;
+            }
+          }
+        }
+
+        // Clicked empty space — dismiss panel
+        dismissMemoryPanel();
       }
     }
   });
@@ -2551,6 +2571,54 @@ function focusPortal(portal) {
 let lastThoughtTime = 0;
 let pulseTimer = 0;
 
+
+// ═══════════════════════════════════════════
+//  MNEMOSYNE — MEMORY CRYSTAL INSPECTION
+// ═══════════════════════════════════════════
+
+/**
+ * Show the memory inspection panel with data from a clicked crystal.
+ */
+function showMemoryPanel(memInfo) {
+  const panel = document.getElementById('memory-panel');
+  if (!panel) return;
+
+  const { data, region } = memInfo;
+  const regionDef = SpatialMemory.REGIONS[region] || SpatialMemory.REGIONS.working;
+
+  document.getElementById('memory-panel-region').textContent = regionDef.label;
+  document.getElementById('memory-panel-region-dot').style.background = '#' + regionDef.color.toString(16).padStart(6, '0');
+  document.getElementById('memory-panel-content').textContent = data.content || '(empty)';
+  document.getElementById('memory-panel-id').textContent = data.id || '\u2014';
+  document.getElementById('memory-panel-source').textContent = data.source || 'unknown';
+  document.getElementById('memory-panel-time').textContent = data.timestamp ? new Date(data.timestamp).toLocaleString() : '\u2014';
+
+  const connEl = document.getElementById('memory-panel-connections');
+  connEl.innerHTML = '';
+  if (data.connections && data.connections.length > 0) {
+    data.connections.forEach(cid => {
+      const tag = document.createElement('span');
+      tag.className = 'memory-conn-tag';
+      tag.textContent = cid;
+      connEl.appendChild(tag);
+    });
+  } else {
+    connEl.innerHTML = '<span style="color:var(--color-text-muted)">None</span>';
+  }
+
+  panel.style.display = 'flex';
+}
+
+/**
+ * Dismiss the memory panel and clear any crystal highlight.
+ */
+function dismissMemoryPanel() {
+  SpatialMemory.clearHighlight();
+  const panel = document.getElementById('memory-panel');
+  if (panel) panel.style.display = 'none';
+}
+
+
 function gameLoop() {
   requestAnimationFrame(gameLoop);
   const delta = Math.min(clock.getDelta(), 0.1);

index.html

@@ -207,6 +207,25 @@
     </div>
   </div>
 
+
+  <!-- Memory Crystal Inspection Panel (Mnemosyne) -->
+  <div id="memory-panel" class="memory-panel" style="display:none;">
+    <div class="memory-panel-content">
+      <div class="memory-panel-header">
+        <div class="memory-panel-region-dot" id="memory-panel-region-dot"></div>
+        <div class="memory-panel-region" id="memory-panel-region">MEMORY</div>
+        <button id="memory-panel-close" class="memory-panel-close" onclick="dismissMemoryPanel()">\u2715</button>
+      </div>
+      <div class="memory-panel-body" id="memory-panel-content">(empty)</div>
+      <div class="memory-panel-meta">
+        <div class="memory-meta-row"><span class="memory-meta-label">ID</span><span id="memory-panel-id">\u2014</span></div>
+        <div class="memory-meta-row"><span class="memory-meta-label">Source</span><span id="memory-panel-source">\u2014</span></div>
+        <div class="memory-meta-row"><span class="memory-meta-label">Time</span><span id="memory-panel-time">\u2014</span></div>
+        <div class="memory-meta-row"><span class="memory-meta-label">Links</span><span id="memory-panel-connections">\u2014</span></div>
+      </div>
+    </div>
+  </div>
+
   <!-- Portal Atlas Overlay -->
   <div id="atlas-overlay" class="atlas-overlay" style="display:none;">
     <div class="atlas-content">

nexus/components/spatial-memory.js

@@ -471,9 +471,50 @@ const SpatialMemory = (() => {
     return results.slice(0, maxResults);
   }
 
+
+  // ─── CRYSTAL MESH COLLECTION (for raycasting) ────────
+  function getCrystalMeshes() {
+    return Object.values(_memoryObjects).map(o => o.mesh);
+  }
+
+  // ─── MEMORY DATA FROM MESH ───────────────────────────
+  function getMemoryFromMesh(mesh) {
+    const entry = Object.values(_memoryObjects).find(o => o.mesh === mesh);
+    return entry ? { data: entry.data, region: entry.region } : null;
+  }
+
+  // ─── HIGHLIGHT / SELECT ──────────────────────────────
+  let _selectedId = null;
+  let _selectedOriginalEmissive = null;
+
+  function highlightMemory(memId) {
+    clearHighlight();
+    const obj = _memoryObjects[memId];
+    if (!obj) return;
+    _selectedId = memId;
+    _selectedOriginalEmissive = obj.mesh.material.emissiveIntensity;
+    obj.mesh.material.emissiveIntensity = 4.0;
+    obj.mesh.userData.selected = true;
+  }
+
+  function clearHighlight() {
+    if (_selectedId && _memoryObjects[_selectedId]) {
+      const obj = _memoryObjects[_selectedId];
+      obj.mesh.material.emissiveIntensity = _selectedOriginalEmissive || (obj.data.strength || 0.7) * 2.5;
+      obj.mesh.userData.selected = false;
+    }
+    _selectedId = null;
+    _selectedOriginalEmissive = null;
+  }
+
+  function getSelectedId() {
+    return _selectedId;
+  }
+
   return {
     init, placeMemory, removeMemory, update,
     getMemoryAtPosition, getRegionAtPosition, getMemoriesInRegion, getAllMemories,
+    getCrystalMeshes, getMemoryFromMesh, highlightMemory, clearHighlight, getSelectedId,
     exportIndex, importIndex, searchNearby, REGIONS,
     saveToStorage, loadFromStorage, clearStorage
   };

style.css

@@ -1223,3 +1223,126 @@ canvas#nexus-canvas {
 .l402-msg { color: #fff; }
 
 .pse-status { color: #4af0c0; font-weight: 600; }
+
+
+/* ═══════════════════════════════════════════
+   MNEMOSYNE — MEMORY CRYSTAL INSPECTION PANEL
+   ═══════════════════════════════════════════ */
+
+.memory-panel {
+  position: fixed;
+  top: 50%;
+  right: 24px;
+  transform: translateY(-50%);
+  z-index: 120;
+  animation: memoryPanelIn 0.25s ease-out;
+}
+
+@keyframes memoryPanelIn {
+  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
+  to { opacity: 1; transform: translateY(-50%) translateX(0); }
+}
+
+.memory-panel-content {
+  width: 320px;
+  background: rgba(8, 8, 24, 0.92);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(74, 240, 192, 0.25);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 0 30px rgba(74, 240, 192, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.memory-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.memory-panel-region-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.memory-panel-region {
+  font-family: var(--font-display, monospace);
+  font-size: 11px;
+  letter-spacing: 0.15em;
+  color: var(--color-primary, #4af0c0);
+  text-transform: uppercase;
+  flex: 1;
+}
+
+.memory-panel-close {
+  background: none;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--color-text-muted, #888);
+  font-size: 14px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.memory-panel-close:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+
+.memory-panel-body {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-text, #ccc);
+  margin-bottom: 14px;
+  max-height: 120px;
+  overflow-y: auto;
+  word-break: break-word;
+}
+
+.memory-panel-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 11px;
+}
+
+.memory-meta-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.memory-meta-label {
+  color: var(--color-text-muted, #666);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  min-width: 50px;
+  flex-shrink: 0;
+}
+
+.memory-meta-row span:last-child {
+  color: var(--color-text, #aaa);
+  word-break: break-all;
+}
+
+.memory-conn-tag {
+  display: inline-block;
+  background: rgba(74, 240, 192, 0.1);
+  border: 1px solid rgba(74, 240, 192, 0.2);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  color: var(--color-primary, #4af0c0);
+  margin: 1px 2px;
+}
+