{% extends "base.html" %}
{% block content %}
<h2 class="text-2xl font-semibold mb-4">Streaming search</h2>
<p class="text-sm text-slate-500 mb-3">
    Calls <code>/context/stream</code> (SSE). Results appear as the engine ranks them.
</p>

<form class="bg-white border border-slate-200 rounded p-3 flex gap-3 items-end mb-4"
      onsubmit="startSearch(event)">
    <div class="flex-1">
        <label class="block text-xs text-slate-500 mb-1">Query</label>
        <input id="s-q" type="text" value="{{ q }}"
               placeholder="what to recall…"
               class="w-full border border-slate-300 rounded px-2 py-1 text-sm">
    </div>
    <div>
        <label class="block text-xs text-slate-500 mb-1">top_k</label>
        <input id="s-k" type="number" min="1" max="100" value="20"
               class="w-20 border border-slate-300 rounded px-2 py-1 text-sm">
    </div>
    <button class="bg-slate-900 hover:bg-slate-700 text-white text-sm px-3 py-1.5 rounded" type="submit">
        stream
    </button>
</form>

<div id="s-meta" class="text-xs text-slate-500 mb-2"></div>
<ul id="s-results" class="bg-white border border-slate-200 rounded divide-y divide-slate-100"></ul>
<pre id="s-final" class="hidden mt-3 bg-white border border-slate-200 rounded p-3 text-xs"></pre>

<script>
let es = null;
function startSearch(evt) {
    if (evt) evt.preventDefault();
    const q = document.getElementById('s-q').value.trim();
    if (!q) return;
    const k = document.getElementById('s-k').value || 20;
    const params = new URLSearchParams({ q, top_k: k });
    document.getElementById('s-results').innerHTML = '';
    document.getElementById('s-final').classList.add('hidden');
    document.getElementById('s-meta').textContent = '… opening stream';

    if (es) es.close();
    es = new EventSource('/context/stream?' + params.toString());

    es.addEventListener('meta', (e) => {
        const m = JSON.parse(e.data);
        document.getElementById('s-meta').textContent =
            `live=${m.live} as_of=${m.as_of || '—'} query="${m.query}"`;
    });
    es.addEventListener('memory', (e) => {
        const m = JSON.parse(e.data);
        const li = document.createElement('li');
        li.className = 'p-3 hover:bg-slate-50 text-sm flex items-center gap-3';
        li.innerHTML = `
            <span class="pill pill-${m.type}">${m.type}</span>
            <a href="/ui/memories/${m.id}" class="flex-1 hover:underline text-slate-800">${m.summary}</a>
            <span class="text-xs tabular-nums text-slate-500">score ${(m.score || 0).toFixed(3)}</span>
            <span class="text-xs tabular-nums text-slate-400">sim ${(m.similarity || 0).toFixed(3)}</span>`;
        document.getElementById('s-results').appendChild(li);
    });
    es.addEventListener('context', (e) => {
        const ctx = JSON.parse(e.data);
        const pre = document.getElementById('s-final');
        pre.textContent = JSON.stringify(ctx, null, 2);
        pre.classList.remove('hidden');
    });
    es.addEventListener('done', () => {
        es.close();
        es = null;
    });
    es.onerror = () => {
        if (es) { es.close(); es = null; }
    };
}
{% if q %}startSearch();{% endif %}
</script>
{% endblock %}