nexo-brain 5.3.26 → 5.3.28

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

@@ -1,420 +0,0 @@
-{% 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 %}