nexo-brain 5.3.13 → 5.3.15

package/src/dashboard/templates/memory 2.html

@@ -0,0 +1,420 @@
+{% extends "base.html" %}
+
+{% block title %}Memory Flow{% endblock %}
+{% block page_title %}Memory Flow{% endblock %}
+
+{% block head %}
+<style>
+  .flow-connector {
+    position: absolute;
+    height: 3px;
+    background: linear-gradient(90deg, var(--from), var(--to));
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .flow-connector::after {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%; width: 60%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+    animation: flowPulse 2s ease-in-out infinite;
+  }
+  @keyframes flowPulse {
+    0% { left: -60%; }
+    100% { left: 160%; }
+  }
+  .flow-box {
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .flow-box:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+  }
+  .memory-card {
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+  .memory-card:hover {
+    border-color: rgba(124,58,237,0.4);
+    box-shadow: 0 0 20px rgba(124,58,237,0.1);
+  }
+  .memory-card .full-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+  }
+  .memory-card.expanded .full-content {
+    max-height: 500px;
+  }
+  .strength-bar {
+    transition: width 0.8s ease-out;
+  }
+  @keyframes countUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .count-animate {
+    animation: countUp 0.5s ease-out forwards;
+  }
+</style>
+{% endblock %}
+
+{% block header_actions %}
+<div class="flex items-center gap-2">
+  <input type="text" id="search-input" placeholder="Search memories..."
+    class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 w-64"
+    onkeydown="if(event.key==='Enter')searchMemories()">
+  <button onclick="searchMemories()" class="px-3 py-1.5 text-xs bg-violet-600 text-white rounded-lg hover:bg-violet-500 transition-colors font-medium">Search</button>
+</div>
+{% endblock %}
+
+{% block content %}
+<!-- Flow Diagram -->
+<div class="mb-6">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Memory Pipeline</h2>
+  <div class="relative flex items-center justify-center gap-0 py-6 px-4" id="flow-diagram">
+    <!-- STM Box -->
+    <div class="flow-box bg-cyan-500/10 border border-cyan-500/30 rounded-xl p-5 text-center min-w-[140px] z-10">
+      <div class="text-xs uppercase tracking-wider text-cyan-400 font-semibold mb-1">STM</div>
+      <div class="text-3xl font-display font-bold text-cyan-300 count-animate" id="count-stm">--</div>
+      <div class="text-[10px] text-cyan-500/60 mt-1">Short-Term</div>
+    </div>
+
+    <!-- Arrow STM -> LTM -->
+    <div class="flex flex-col items-center mx-2 z-10">
+      <div class="text-[10px] text-emerald-400 font-mono font-semibold mb-1" id="count-promoted">--</div>
+      <div class="w-24 h-[3px] rounded-full relative overflow-hidden bg-gradient-to-r from-cyan-500 to-violet-500">
+        <div class="absolute top-0 left-0 w-1/2 h-full bg-gradient-to-r from-transparent via-white/40 to-transparent" style="animation: flowPulse 2s ease-in-out infinite;"></div>
+      </div>
+      <div class="text-[10px] text-slate-600 mt-1">promoted</div>
+    </div>
+
+    <!-- LTM Box -->
+    <div class="flow-box bg-violet-500/10 border border-violet-500/30 rounded-xl p-5 text-center min-w-[140px] z-10">
+      <div class="text-xs uppercase tracking-wider text-violet-400 font-semibold mb-1">LTM</div>
+      <div class="text-3xl font-display font-bold text-violet-300 count-animate" id="count-ltm">--</div>
+      <div class="text-[10px] text-violet-500/60 mt-1">Long-Term</div>
+    </div>
+
+    <!-- Arrow to Dreamed -->
+    <div class="flex flex-col items-center mx-2 z-10">
+      <div class="text-[10px] text-indigo-400 font-mono font-semibold mb-1" id="count-dreamed">--</div>
+      <div class="w-16 h-[3px] rounded-full bg-gradient-to-r from-violet-500 to-indigo-500 relative overflow-hidden">
+        <div class="absolute top-0 left-0 w-1/2 h-full bg-gradient-to-r from-transparent via-white/30 to-transparent" style="animation: flowPulse 3s ease-in-out infinite;"></div>
+      </div>
+      <div class="text-[10px] text-slate-600 mt-1">dreamed</div>
+    </div>
+
+    <!-- Dreamed Box -->
+    <div class="flow-box bg-indigo-500/10 border border-indigo-500/30 rounded-xl p-5 text-center min-w-[130px] z-10">
+      <div class="text-xs uppercase tracking-wider text-indigo-400 font-semibold mb-1">Dreamed</div>
+      <div class="text-3xl font-display font-bold text-indigo-300 count-animate" id="count-dreamed-box">--</div>
+      <div class="text-[10px] text-indigo-500/60 mt-1">Insights</div>
+    </div>
+
+    <!-- Quarantine Branch (below STM) -->
+    <div class="absolute left-[calc(50%-280px)] top-[calc(100%-10px)] flex flex-col items-center z-10" id="quarantine-branch">
+      <div class="w-[3px] h-8 bg-gradient-to-b from-cyan-500/50 to-amber-500/50 rounded-full"></div>
+      <div class="flow-box bg-amber-500/10 border border-amber-500/30 rounded-xl p-4 text-center min-w-[120px]">
+        <div class="text-xs uppercase tracking-wider text-amber-400 font-semibold mb-1">Quarantine</div>
+        <div class="text-2xl font-display font-bold text-amber-300 count-animate" id="count-quarantine">--</div>
+        <div class="text-[10px] text-amber-500/60 mt-1">Pending Review</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Hot Context -->
+<div class="mb-6">
+  <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between mb-3">
+    <div>
+      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-2">
+        <span class="w-2 h-2 rounded-full bg-emerald-400 glow-dot" style="color:#34d399"></span>
+        Hot Context 24h
+      </h2>
+      <p class="text-xs text-slate-600 mt-1">Recent operational memory shared across sessions, clients, and channels.</p>
+    </div>
+    <div class="flex items-center gap-2">
+      <input type="text" id="context-query" placeholder="Search recent context..."
+        class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 w-64"
+        onkeydown="if(event.key==='Enter')loadRecentContext()">
+      <button onclick="loadRecentContext()" class="px-3 py-1.5 text-xs bg-emerald-600 text-white rounded-lg hover:bg-emerald-500 transition-colors font-medium">Refresh</button>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
+    <div class="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="text-xs uppercase tracking-wider text-emerald-400 font-semibold">Active Contexts</div>
+        <div class="text-[10px] text-slate-500 font-mono" id="hot-context-count">--</div>
+      </div>
+      <div class="space-y-2" id="hot-context-list">
+        <div class="text-xs text-slate-600 text-center py-6">Loading...</div>
+      </div>
+    </div>
+
+    <div class="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-4">
+      <div class="flex items-center justify-between mb-3">
+        <div class="text-xs uppercase tracking-wider text-emerald-400 font-semibold">Recent Events</div>
+        <div class="text-[10px] text-slate-500 font-mono" id="hot-event-count">--</div>
+      </div>
+      <div class="space-y-2" id="hot-event-list">
+        <div class="text-xs text-slate-600 text-center py-6">Loading...</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Two-column: STM and LTM Recent -->
+<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6" id="columns-area">
+  <!-- Recent STM -->
+  <div>
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3 flex items-center gap-2">
+      <span class="w-2 h-2 rounded-full bg-cyan-400 glow-dot" style="color:#22d3ee"></span>
+      Recent STM
+    </h2>
+    <div class="space-y-2" id="stm-list">
+      <div class="text-xs text-slate-600 text-center py-8">Loading...</div>
+    </div>
+  </div>
+
+  <!-- Recent LTM -->
+  <div>
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3 flex items-center gap-2">
+      <span class="w-2 h-2 rounded-full bg-violet-400 glow-dot" style="color:#a78bfa"></span>
+      Recent LTM
+    </h2>
+    <div class="space-y-2" id="ltm-list">
+      <div class="text-xs text-slate-600 text-center py-8">Loading...</div>
+    </div>
+  </div>
+</div>
+
+<!-- Quarantine Items -->
+<div class="mb-6" id="quarantine-section">
+  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3 flex items-center gap-2">
+    <span class="w-2 h-2 rounded-full bg-amber-400 glow-dot" style="color:#fbbf24"></span>
+    Quarantine Queue
+  </h2>
+  <div class="space-y-2" id="quarantine-list">
+    <div class="text-xs text-slate-600 text-center py-4">Loading...</div>
+  </div>
+</div>
+
+<!-- Search Results (hidden by default) -->
+<div class="mb-6 hidden" id="search-results-section">
+  <div class="flex items-center justify-between mb-3">
+    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold flex items-center gap-2">
+      Search Results
+      <span class="text-violet-400 font-mono" id="search-count"></span>
+    </h2>
+    <button onclick="clearSearch()" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">Clear</button>
+  </div>
+  <div class="space-y-2" id="search-results"></div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const REFRESH_MS = 60000;
+
+  function sourceTypeBadge(type) {
+    const map = {
+      learning: 'bg-blue-500/10 text-blue-400',
+      feedback: 'bg-pink-500/10 text-pink-400',
+      preference: 'bg-violet-500/10 text-violet-400',
+      diary: 'bg-cyan-500/10 text-cyan-400',
+      decision: 'bg-amber-500/10 text-amber-400',
+    };
+    return map[type] || 'bg-slate-700 text-slate-400';
+  }
+
+  function renderMemoryCard(m) {
+    const content = m.content || '';
+    const snippet = content.length > 180 ? content.substring(0, 180) + '...' : content;
+    const hasMore = content.length > 180;
+    const strength = m.strength != null ? m.strength : null;
+    const sourceType = m.source_type || 'unknown';
+    const domain = m.domain || '';
+    const created = m.created_at ? relativeTime(m.created_at) : '';
+
+    return `<div class="memory-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-4" onclick="this.classList.toggle('expanded')">
+      <div class="flex items-center gap-2 mb-2 flex-wrap">
+        <span class="text-[10px] px-1.5 py-0.5 rounded font-medium ${sourceTypeBadge(sourceType)}">${escapeHtml(sourceType)}</span>
+        ${domain ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${escapeHtml(domain)}</span>` : ''}
+        <span class="text-[10px] text-slate-600 ml-auto font-mono">${escapeHtml(created)}</span>
+      </div>
+      <p class="text-sm text-slate-300 leading-relaxed">${escapeHtml(snippet)}</p>
+      ${hasMore ? `<div class="full-content mt-2 pt-2 border-t border-slate-800/50">
+        <p class="text-sm text-slate-300 leading-relaxed whitespace-pre-wrap">${escapeHtml(content)}</p>
+      </div>
+      <div class="text-[10px] text-violet-400 mt-1">Click to expand</div>` : ''}
+      ${strength != null ? `<div class="mt-2 flex items-center gap-2">
+        <span class="text-[10px] text-slate-600">Strength</span>
+        <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
+          <div class="strength-bar h-full rounded-full ${strength > 0.7 ? 'bg-emerald-500' : strength > 0.4 ? 'bg-violet-500' : 'bg-amber-500'}" style="width:${(strength * 100).toFixed(0)}%"></div>
+        </div>
+        <span class="text-[10px] text-slate-500 font-mono">${strength.toFixed(2)}</span>
+      </div>` : ''}
+    </div>`;
+  }
+
+  function renderQuarantineCard(m) {
+    const content = m.content || '';
+    const reason = m.quarantine_reason || m.reason || 'Unknown reason';
+    return `<div class="bg-amber-500/5 border border-amber-500/20 rounded-xl p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400 font-medium">quarantine</span>
+        <span class="text-[10px] text-amber-500/60 ml-auto">${escapeHtml(reason)}</span>
+      </div>
+      <p class="text-sm text-slate-400 leading-relaxed">${escapeHtml(content.length > 200 ? content.substring(0, 200) + '...' : content)}</p>
+    </div>`;
+  }
+
+  function recentTime(value) {
+    if (value === null || value === undefined || value === '') return '--';
+    if (typeof value === 'number') return relativeTime(new Date(value * 1000).toISOString());
+    if (/^\d+(\.\d+)?$/.test(String(value))) return relativeTime(new Date(parseFloat(value) * 1000).toISOString());
+    return relativeTime(value);
+  }
+
+  function renderHotContextCard(item) {
+    const title = item.title || item.context_key || '(untitled)';
+    const summary = item.summary || '';
+    const state = item.state || 'active';
+    const owner = item.owner || '';
+    const lastEvent = item.last_event_at ? recentTime(item.last_event_at) : '';
+    return `<div class="bg-slate-900/50 border border-emerald-500/15 rounded-xl p-4">
+      <div class="flex items-center gap-2 mb-2 flex-wrap">
+        <span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-medium">${escapeHtml(state)}</span>
+        ${owner ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${escapeHtml(owner)}</span>` : ''}
+        <span class="text-[10px] text-slate-600 ml-auto font-mono">${escapeHtml(lastEvent)}</span>
+      </div>
+      <div class="text-sm text-slate-200 leading-relaxed">${escapeHtml(title)}</div>
+      ${summary ? `<div class="text-xs text-slate-400 leading-relaxed mt-2">${escapeHtml(summary)}</div>` : ''}
+      <div class="text-[10px] text-slate-600 font-mono mt-2">${escapeHtml(item.context_key || '')}</div>
+    </div>`;
+  }
+
+  function renderHotEventCard(event) {
+    const title = event.title || event.context_key || '(event)';
+    const summary = event.summary || event.body || '';
+    const created = event.created_at ? recentTime(event.created_at) : '';
+    return `<div class="bg-slate-900/50 border border-emerald-500/15 rounded-xl p-4">
+      <div class="flex items-center gap-2 mb-2 flex-wrap">
+        <span class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-medium">${escapeHtml(event.event_type || 'event')}</span>
+        <span class="text-[10px] text-slate-600 ml-auto font-mono">${escapeHtml(created)}</span>
+      </div>
+      <div class="text-sm text-slate-200 leading-relaxed">${escapeHtml(title)}</div>
+      ${summary ? `<div class="text-xs text-slate-400 leading-relaxed mt-2 whitespace-pre-wrap">${escapeHtml(summary)}</div>` : ''}
+      <div class="text-[10px] text-slate-600 font-mono mt-2">${escapeHtml(event.context_key || '')}</div>
+    </div>`;
+  }
+
+  async function loadRecentContext() {
+    const q = document.getElementById('context-query').value.trim();
+    const url = '/api/recent-context?hours=24&limit=8' + (q ? `&query=${encodeURIComponent(q)}` : '');
+    const data = await fetchJSON(url);
+    if (!data) return;
+
+    document.getElementById('hot-context-count').textContent = formatNumber((data.counts && data.counts.contexts) || 0);
+    document.getElementById('hot-event-count').textContent = formatNumber((data.counts && data.counts.events) || 0);
+
+    const contexts = data.contexts || [];
+    const events = data.events || [];
+    document.getElementById('hot-context-list').innerHTML = contexts.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No active hot context in the last 24h</div>'
+      : contexts.map(renderHotContextCard).join('');
+    document.getElementById('hot-event-list').innerHTML = events.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No recent events in the last 24h</div>'
+      : events.map(renderHotEventCard).join('');
+  }
+
+  async function loadFlow() {
+    const data = await fetchJSON('/api/memory/flow');
+    if (!data) return;
+
+    const c = data.counts || {};
+    animateCount('count-stm', c.stm || 0);
+    animateCount('count-ltm', c.ltm || 0);
+    animateCount('count-quarantine', c.quarantine || 0);
+    animateCount('count-dreamed-box', c.dreamed || 0);
+    document.getElementById('count-promoted').textContent = formatNumber(c.promoted || 0);
+    document.getElementById('count-dreamed').textContent = formatNumber(c.dreamed || 0);
+
+    // STM recent
+    const stmList = document.getElementById('stm-list');
+    const stmItems = data.stm_recent || [];
+    stmList.innerHTML = stmItems.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No recent STM memories</div>'
+      : stmItems.map(renderMemoryCard).join('');
+
+    // LTM recent
+    const ltmList = document.getElementById('ltm-list');
+    const ltmItems = data.ltm_recent || [];
+    ltmList.innerHTML = ltmItems.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No recent LTM memories</div>'
+      : ltmItems.map(renderMemoryCard).join('');
+
+    // Quarantine
+    const qList = document.getElementById('quarantine-list');
+    const qItems = data.quarantine || [];
+    qList.innerHTML = qItems.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-4">No items in quarantine</div>'
+      : qItems.map(renderQuarantineCard).join('');
+  }
+
+  function animateCount(id, target) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const start = parseInt(el.textContent) || 0;
+    if (start === target) { el.textContent = formatNumber(target); return; }
+    const duration = 600;
+    const startTime = performance.now();
+    function step(now) {
+      const progress = Math.min((now - startTime) / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      el.textContent = formatNumber(Math.round(start + (target - start) * eased));
+      if (progress < 1) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
+
+  async function searchMemories() {
+    const q = document.getElementById('search-input').value.trim();
+    if (!q) return;
+
+    const section = document.getElementById('search-results-section');
+    const results = document.getElementById('search-results');
+    const count = document.getElementById('search-count');
+
+    section.classList.remove('hidden');
+    results.innerHTML = '<div class="text-xs text-slate-500 text-center py-4">Searching...</div>';
+
+    const data = await fetchJSON(`/api/memories?q=${encodeURIComponent(q)}&limit=30`);
+    if (!data) {
+      results.innerHTML = '<div class="text-xs text-red-400 text-center py-4">Search failed</div>';
+      return;
+    }
+
+    const items = data.results || [];
+    count.textContent = `(${items.length})`;
+    results.innerHTML = items.length === 0
+      ? '<div class="text-xs text-slate-600 text-center py-6">No memories found</div>'
+      : items.map(renderMemoryCard).join('');
+  }
+
+  function clearSearch() {
+    document.getElementById('search-results-section').classList.add('hidden');
+    document.getElementById('search-input').value = '';
+  }
+
+  // Init
+  loadRecentContext();
+  loadFlow();
+  setInterval(loadRecentContext, REFRESH_MS);
+  setInterval(loadFlow, REFRESH_MS);
+</script>
+{% endblock %}