feat(mnemosyne): wire memory search UI - toggle, render, fly-to, keyboard shortcut (#1208)

app.js

@@ -717,6 +717,11 @@ async function init() {
     MemoryOptimizer.optimize(SpatialMemory);
   }, 1000 * 60 * 10); // Every 10 minutes
 
+  
+// Wire memory search input
+const searchInput = document.getElementById('memory-search-input');
+if (searchInput) searchInput.addEventListener('input', onMemorySearchInput);
+
   fetchGiteaData();
   setInterval(fetchGiteaData, 30000); // Refresh every 30s
 
@@ -2122,6 +2127,104 @@ function handleHermesMessage(data) {
 
 
 // ═══════════════════════════════════════════
+
+// ═══ MNEMOSYNE — MEMORY SEARCH (#1208) ═══
+let memorySearchVisible = false;
+let memorySearchDebounce = null;
+
+function toggleMemorySearch() {
+  const panel = document.getElementById('memory-search-panel');
+  const input = document.getElementById('memory-search-input');
+  if (!panel) return;
+
+  memorySearchVisible = !memorySearchVisible;
+  panel.style.display = memorySearchVisible ? 'block' : 'none';
+
+  if (memorySearchVisible && input) {
+    input.value = '';
+    input.focus();
+    renderMemorySearchResults([]);
+  }
+}
+
+function renderMemorySearchResults(results) {
+  const container = document.getElementById('memory-search-results');
+  if (!container) return;
+
+  if (results.length === 0) {
+    container.innerHTML = '<div class="memory-search-empty">' +
+      (document.getElementById('memory-search-input')?.value ? 'No memories found' : 'Type to search your archive...') +
+      '</div>';
+    return;
+  }
+
+  container.innerHTML = results.map(r => {
+    const regionDef = SpatialMemory.REGIONS[r.category] || SpatialMemory.REGIONS.working;
+    const dotColor = '#' + regionDef.color.toString(16).padStart(6, '0');
+    const truncated = r.content.length > 55 ? r.content.slice(0, 55) + '\u2026' : r.content;
+    return '<div class="memory-search-result" onclick="flyToMemory(\'' + r.id + '\')">' +
+      '<div class="memory-search-dot" style="background:' + dotColor + '"></div>' +
+      '<span class="memory-search-text">' + truncated + '</span>' +
+      '<span class="memory-search-meta">' + r.category + '</span>' +
+      '</div>';
+  }).join('');
+}
+
+function onMemorySearchInput(e) {
+  const query = e.target.value;
+  if (memorySearchDebounce) clearTimeout(memorySearchDebounce);
+
+  memorySearchDebounce = setTimeout(() => {
+    if (!query || query.trim().length === 0) {
+      renderMemorySearchResults([]);
+      return;
+    }
+    const results = SpatialMemory.searchByContent(query, { maxResults: 15 });
+    renderMemorySearchResults(results);
+  }, 150);
+}
+
+function flyToMemory(memId) {
+  const memories = SpatialMemory.getAllMemories();
+  const mem = memories.find(m => m.id === memId);
+  if (!mem) return;
+
+  // Highlight the crystal
+  SpatialMemory.highlightMemory(memId);
+
+  // Fly camera to memory position (if camera controls exist)
+  if (typeof camera !== 'undefined' && camera.position) {
+    const target = new THREE.Vector3(mem.position[0], mem.position[1] + 3, mem.position[2] + 5);
+    // Simple lerp animation
+    const start = camera.position.clone();
+    let t = 0;
+    const flyAnim = () => {
+      t += 0.03;
+      if (t > 1) t = 1;
+      camera.position.lerpVectors(start, target, t);
+      if (t < 1) requestAnimationFrame(flyAnim);
+    };
+    flyAnim();
+  }
+
+  // Close search panel
+  if (memorySearchVisible) toggleMemorySearch();
+
+  // Show in memory feed
+  addMemoryFeedEntry('update', { content: 'Navigated to: ' + (mem.content || mem.id).slice(0, 40), id: memId });
+}
+
+// Keyboard shortcut: Ctrl+K or / to toggle search
+document.addEventListener('keydown', (e) => {
+  if ((e.ctrlKey && e.key === 'k') || (e.key === '/' && !e.target.matches('input, textarea'))) {
+    e.preventDefault();
+    toggleMemorySearch();
+  }
+  if (e.key === 'Escape' && memorySearchVisible) {
+    toggleMemorySearch();
+  }
+});
+
 //  MNEMOSYNE — LIVE MEMORY BRIDGE
 // ═══════════════════════════════════════════
 
@@ -3230,6 +3333,11 @@ init().then(() => {
   ];
   demoMemories.forEach(m => SpatialMemory.placeMemory(m));
 
+  
+// Wire memory search input
+const searchInput = document.getElementById('memory-search-input');
+if (searchInput) searchInput.addEventListener('input', onMemorySearchInput);
+
   fetchGiteaData();
   setInterval(fetchGiteaData, 30000);
   runWeeklyAudit();

index.html

@@ -441,7 +441,18 @@ index.html
 </script>
 
   <!-- Memory Activity Feed (Mnemosyne) -->
-  <div id="memory-feed" class="memory-feed" style="display:none;">
+  
+    <!-- Mnemosyne Memory Search Panel (#1208) -->
+    <div id="memory-search-panel" style="display:none;">
+      <div class="memory-search-header">
+        <span class="memory-search-icon">🔍</span>
+        <input type="text" id="memory-search-input" placeholder="Search archive..." autocomplete="off" spellcheck="false" />
+        <span class="memory-search-close" onclick="toggleMemorySearch()">✕</span>
+      </div>
+      <div id="memory-search-results"></div>
+    </div>
+
+    <div id="memory-feed" class="memory-feed" style="display:none;">
     <div class="memory-feed-header">
       <span class="memory-feed-title">✨ Memory Feed</span>
       <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>

nexus/components/spatial-memory.js

@@ -285,6 +285,70 @@ const SpatialMemory = (() => {
     });
   }
 
+
+  // ─── CONTENT SEARCH (Mnemosyne #1208) ──────────────────
+  /**
+   * Search memories by text content. Case-insensitive substring match.
+   * @param {string} query - Search query
+   * @param {object} options - { category: string, maxResults: number, minStrength: number }
+   * @returns {Array} Matching memories sorted by relevance (strength desc, then match position)
+   */
+  function searchByContent(query, options) {
+    options = options || {};
+    const maxResults = options.maxResults || 20;
+    const minStrength = options.minStrength || 0;
+    const categoryFilter = options.category || null;
+
+    if (!query || query.trim().length === 0) return [];
+
+    const lowerQuery = query.toLowerCase().trim();
+    const terms = lowerQuery.split(/\s+/);
+    const results = [];
+
+    Object.values(_memoryObjects).forEach(obj => {
+      const data = obj.data;
+      if (!data.content) return;
+
+      // Category filter
+      if (categoryFilter && obj.region !== categoryFilter) return;
+
+      // Strength filter
+      const strength = obj.mesh.userData.strength || 0.7;
+      if (strength < minStrength) return;
+
+      const lowerContent = data.content.toLowerCase();
+
+      // Score: count how many terms match, weight by first-match position
+      let matchCount = 0;
+      let firstMatchPos = Infinity;
+      terms.forEach(term => {
+        const pos = lowerContent.indexOf(term);
+        if (pos !== -1) {
+          matchCount++;
+          if (pos < firstMatchPos) firstMatchPos = pos;
+        }
+      });
+
+      if (matchCount > 0) {
+        const relevance = matchCount * 100 + strength * 10 - firstMatchPos * 0.01;
+        results.push({
+          id: data.id,
+          content: data.content,
+          category: obj.region,
+          strength: strength,
+          position: [obj.mesh.position.x, obj.mesh.position.y - 1.5, obj.mesh.position.z],
+          relevance: relevance,
+          matchCount: matchCount,
+          source: data.source || 'unknown',
+          timestamp: data.timestamp || obj.mesh.userData.createdAt
+        });
+      }
+    });
+
+    results.sort((a, b) => b.relevance - a.relevance);
+    return results.slice(0, maxResults);
+  }
+
   return { ring, disc, glowDisc, sprite };
   }
 
@@ -829,7 +893,7 @@ const SpatialMemory = (() => {
     getCrystalMeshes, getMemoryFromMesh, highlightMemory, clearHighlight, getSelectedId,
     exportIndex, importIndex, searchNearby, REGIONS,
     saveToStorage, loadFromStorage, clearStorage,
-    runGravityLayout
+    runGravityLayout, searchByContent
   };
 })();
 

style.css

@@ -1344,3 +1344,113 @@ canvas#nexus-canvas {
 .memory-feed-remove { border-left: 2px solid #ff4466; }
 .memory-feed-update { border-left: 2px solid #ffd700; }
 .memory-feed-sync { border-left: 2px solid #7b5cff; }
+
+/* ═══ MNEMOSYNE — Memory Search Panel (#1208) ═══ */
+#memory-search-panel {
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 420px;
+  max-height: 400px;
+  background: rgba(10, 14, 26, 0.95);
+  border: 1px solid rgba(74, 240, 192, 0.3);
+  border-radius: 8px;
+  z-index: 1000;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(74, 240, 192, 0.1);
+  overflow: hidden;
+}
+
+.memory-search-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid rgba(74, 240, 192, 0.15);
+  gap: 8px;
+}
+
+.memory-search-icon {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+#memory-search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #c0ffe0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  outline: none;
+}
+
+#memory-search-input::placeholder {
+  color: rgba(192, 255, 224, 0.35);
+}
+
+.memory-search-close {
+  cursor: pointer;
+  color: rgba(192, 255, 224, 0.4);
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.memory-search-close:hover {
+  color: #ff4466;
+  background: rgba(255, 68, 102, 0.15);
+}
+
+#memory-search-results {
+  max-height: 340px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(74, 240, 192, 0.2) transparent;
+}
+
+.memory-search-result {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+  transition: background 0.15s;
+}
+
+.memory-search-result:hover {
+  background: rgba(74, 240, 192, 0.08);
+}
+
+.memory-search-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.memory-search-text {
+  flex: 1;
+  font-size: 12px;
+  color: rgba(192, 255, 224, 0.75);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.memory-search-meta {
+  font-size: 10px;
+  color: rgba(192, 255, 224, 0.35);
+  flex-shrink: 0;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.memory-search-empty {
+  padding: 20px;
+  text-align: center;
+  color: rgba(192, 255, 224, 0.3);
+  font-size: 12px;
+  font-family: 'JetBrains Mono', monospace;
+}