{% 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>

<!-- Memory Observations -->
<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-sky-400 glow-dot" style="color:#38bdf8"></span>
        Memory Observations
      </h2>
      <p class="text-xs text-slate-600 mt-1">Evidence-backed operational memory captured from tasks, edits, and durable context.</p>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <input type="text" id="obs-query" placeholder="Search observations..."
        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-sky-500 w-56"
        onkeydown="if(event.key==='Enter')loadMemoryObservations()">
      <input type="text" id="obs-project" placeholder="Project"
        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-sky-500 w-32"
        onkeydown="if(event.key==='Enter')loadMemoryObservations()">
      <button onclick="loadMemoryObservations()" class="px-3 py-1.5 text-xs bg-sky-600 text-white rounded-lg hover:bg-sky-500 transition-colors font-medium">Refresh</button>
      <button onclick="runMemoryBackfill()" class="px-3 py-1.5 text-xs bg-slate-800 text-slate-200 border border-slate-700 rounded-lg hover:bg-slate-700 transition-colors font-medium">Backfill</button>
    </div>
  </div>

  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
    <div class="bg-slate-900/50 border border-slate-800/60 rounded-xl p-3">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Observations</div>
      <div class="text-2xl font-display font-bold text-sky-300" id="obs-count">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/60 rounded-xl p-3">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Raw Events</div>
      <div class="text-2xl font-display font-bold text-violet-300" id="obs-event-count">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/60 rounded-xl p-3">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Queue Pending</div>
      <div class="text-2xl font-display font-bold text-amber-300" id="obs-queue-count">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/60 rounded-xl p-3">
      <div class="text-[10px] uppercase tracking-wider text-slate-500">Last Process</div>
      <div class="text-2xl font-display font-bold text-emerald-300" id="obs-processed-count">--</div>
    </div>
  </div>

  <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
    <div class="bg-sky-500/5 border border-sky-500/20 rounded-xl p-4">
      <div class="flex items-center justify-between mb-3">
        <div class="text-xs uppercase tracking-wider text-sky-400 font-semibold">Observations</div>
        <div class="text-[10px] text-slate-500 font-mono" id="obs-list-count">--</div>
      </div>
      <div class="space-y-2" id="obs-list">
        <div class="text-xs text-slate-600 text-center py-6">Loading...</div>
      </div>
    </div>

    <div class="bg-violet-500/5 border border-violet-500/20 rounded-xl p-4">
      <div class="flex items-center justify-between mb-3">
        <div class="text-xs uppercase tracking-wider text-violet-400 font-semibold">Evidence Events</div>
        <div class="text-[10px] text-slate-500 font-mono" id="obs-raw-count">--</div>
      </div>
      <div class="space-y-2" id="obs-events">
        <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>`;
  }

  function renderObservationCard(item) {
    const refs = item.evidence_refs || [];
    const entities = item.entities || [];
    const created = item.created_at ? recentTime(item.created_at) : '';
    const score = item.salience != null ? Number(item.salience).toFixed(2) : '--';
    return `<div class="bg-slate-900/50 border border-sky-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-sky-500/10 text-sky-400 font-medium">${escapeHtml(item.observation_type || 'observation')}</span>
        ${item.project_key ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${escapeHtml(item.project_key)}</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(item.summary || '')}</div>
      <div class="flex items-center gap-2 mt-2 flex-wrap">
        <span class="text-[10px] text-slate-600 font-mono">score ${escapeHtml(score)}</span>
        ${entities.slice(0, 3).map(e => `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-500">${escapeHtml(e)}</span>`).join('')}
      </div>
      <div class="text-[10px] text-slate-600 font-mono mt-2 break-all">${escapeHtml(refs.slice(0, 3).join(' | '))}</div>
    </div>`;
  }

  function renderMemoryEventCard(item) {
    const created = item.created_at ? recentTime(item.created_at) : '';
    const paths = item.file_paths || [];
    const source = `${item.source_type || '?'}:${item.source_id || ''}`;
    return `<div class="bg-slate-900/50 border border-violet-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-violet-500/10 text-violet-400 font-medium">${escapeHtml(item.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(source)}</div>
      ${paths.length ? `<div class="text-xs text-slate-500 mt-2">${escapeHtml(paths.slice(0, 4).join(', '))}</div>` : ''}
      <div class="text-[10px] text-slate-600 font-mono mt-2 break-all">${escapeHtml(item.event_uid || '')}</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 loadMemoryObservations() {
    const q = document.getElementById('obs-query').value.trim();
    const project = document.getElementById('obs-project').value.trim();
    const url = '/api/memory/observations?limit=12'
      + (q ? `&q=${encodeURIComponent(q)}` : '')
      + (project ? `&project_key=${encodeURIComponent(project)}` : '');
    const data = await fetchJSON(url);
    if (!data) return;

    const stats = data.stats || {};
    const queue = stats.queue || {};
    const processed = (data.queue && data.queue.processed) || 0;
    const observations = data.observations || [];
    const events = data.events || [];
    document.getElementById('obs-count').textContent = formatNumber(stats.total || observations.length);
    document.getElementById('obs-event-count').textContent = formatNumber((data.event_stats && data.event_stats.total) || events.length);
    document.getElementById('obs-queue-count').textContent = formatNumber(queue.pending || 0);
    document.getElementById('obs-processed-count').textContent = formatNumber(processed);
    document.getElementById('obs-list-count').textContent = formatNumber(observations.length);
    document.getElementById('obs-raw-count').textContent = formatNumber(events.length);
    document.getElementById('obs-list').innerHTML = observations.length === 0
      ? '<div class="text-xs text-slate-600 text-center py-6">No observations found</div>'
      : observations.map(renderObservationCard).join('');
    document.getElementById('obs-events').innerHTML = events.length === 0
      ? '<div class="text-xs text-slate-600 text-center py-6">No evidence events found</div>'
      : events.map(renderMemoryEventCard).join('');
  }

  async function runMemoryBackfill() {
    const res = await fetch('/api/memory/backfill?sources=protocol_tasks,change_log,session_diary,recent_events&limit=200', { method: 'POST' });
    if (!res.ok) {
      showToast('Backfill failed');
      return;
    }
    const data = await res.json();
    showToast(`Backfill ${data.created_or_updated || 0}/${data.seen || 0}`);
    loadMemoryObservations();
  }

  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();
  loadMemoryObservations();
  loadFlow();
  setInterval(loadRecentContext, REFRESH_MS);
  setInterval(loadMemoryObservations, REFRESH_MS);
  setInterval(loadFlow, REFRESH_MS);
</script>
{% endblock %}