{{define "title"}}Binary & Archive - XPFarm{{end}}
{{template "layout.html" .}}
{{define "content"}}
<style>
    .ba-container {
        display: flex;
        height: calc(100vh - 80px);
        gap: 0;
    }

    .ba-sidebar {
        width: 260px;
        border-right: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        flex-shrink: 0;
    }

    .ba-sidebar-header {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ba-file-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
    }

    .ba-file-item {
        padding: 8px 12px;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.8rem;
        color: var(--color-muted);
        cursor: pointer;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ba-file-item:hover {
        background: var(--bg-hover);
        color: var(--color-text);
    }

    .ba-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .ba-header {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }

    .ba-output-area {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Main analysis output — rendered markdown */
    .ba-analysis-panel {
        flex: 7;
        overflow-y: auto;
        min-height: 60px;
    }

    .ba-analysis {
        padding: 24px 28px;
        font-size: 0.9rem;
        line-height: 1.7;
        color: var(--color-text);
    }

    .ba-analysis:empty::before {
        content: '';
        display: none;
    }

    /* Markdown rendering styles */
    .ba-analysis h1, .ba-analysis h2, .ba-analysis h3,
    .ba-analysis h4, .ba-analysis h5, .ba-analysis h6 {
        color: var(--color-text);
        margin: 1.2em 0 0.5em;
        font-weight: 600;
    }
    .ba-analysis h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
    .ba-analysis h2 { font-size: 1.2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 6px; }
    .ba-analysis h3 { font-size: 1.05rem; }
    .ba-analysis h1:first-child, .ba-analysis h2:first-child { margin-top: 0; }

    .ba-analysis p { margin: 0.6em 0; }

    .ba-analysis ul, .ba-analysis ol {
        margin: 0.5em 0;
        padding-left: 1.5em;
    }
    .ba-analysis li { margin: 0.25em 0; }

    .ba-analysis code {
        background: rgba(139, 92, 246, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'SF Mono', 'Fira Code', monospace;
        font-size: 0.85em;
        color: #c4b5fd;
    }

    .ba-analysis pre {
        background: #0a0a0a;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 14px 18px;
        overflow-x: auto;
        margin: 0.8em 0;
    }
    .ba-analysis pre code {
        background: none;
        padding: 0;
        color: #e2e8f0;
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .ba-analysis table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.8em 0;
        font-size: 0.85rem;
    }
    .ba-analysis th {
        background: rgba(139, 92, 246, 0.08);
        text-align: left;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        font-weight: 600;
        color: var(--color-text);
    }
    .ba-analysis td {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        color: var(--color-text);
    }
    .ba-analysis tr:hover td {
        background: rgba(255, 255, 255, 0.02);
    }

    .ba-analysis blockquote {
        border-left: 3px solid #8b5cf6;
        margin: 0.8em 0;
        padding: 8px 16px;
        color: var(--color-muted);
        background: rgba(139, 92, 246, 0.04);
        border-radius: 0 6px 6px 0;
    }

    .ba-analysis hr {
        border: none;
        border-top: 1px solid var(--border-color);
        margin: 1.5em 0;
    }

    .ba-analysis strong { color: var(--color-text); font-weight: 600; }
    .ba-analysis a { color: #8b5cf6; text-decoration: underline; }

    /* Drag handle between panels */
    .ba-drag-handle {
        height: 6px;
        background: var(--border-color);
        cursor: row-resize;
        flex-shrink: 0;
        position: relative;
        transition: background 0.15s;
    }

    .ba-drag-handle:hover,
    .ba-drag-handle.dragging {
        background: #8b5cf6;
    }

    .ba-drag-handle::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255,255,255,0.15);
    }

    .ba-drag-handle:hover::after,
    .ba-drag-handle.dragging::after {
        background: rgba(255,255,255,0.4);
    }

    /* Activity log section */
    .ba-activity-panel {
        flex: 3;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 40px;
    }

    .ba-activity-header {
        padding: 8px 20px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-muted);
        background: rgba(0, 0, 0, 0.15);
        user-select: none;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border-top: 1px solid var(--border-color);
    }

    .ba-activity-count {
        background: rgba(139, 92, 246, 0.2);
        color: #a78bfa;
        font-size: 0.7rem;
        padding: 1px 7px;
        border-radius: 10px;
        font-weight: 500;
    }

    .ba-activity-log {
        flex: 1;
        overflow-y: auto;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .ba-activity-item {
        padding: 6px 10px;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.78rem;
        color: var(--color-muted);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ba-activity-item details summary {
        padding: 0;
        background: none;
        font-size: 0.78rem;
        color: var(--color-muted);
        font-weight: 500;
    }

    .ba-activity-item details summary:hover {
        color: var(--color-text);
    }

    .ba-activity-item pre {
        margin: 6px 0 0;
        white-space: pre-wrap;
        font-size: 0.72rem;
        max-height: 200px;
        overflow-y: auto;
        background: #0a0a0a;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        color: #e2e8f0;
    }

    .ba-activity-agent {
        font-style: italic;
        color: #a78bfa;
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .ba-activity-step {
        border-top: 1px dashed var(--border-color);
        margin: 4px 0;
        opacity: 0.3;
    }

    .ba-activity-cost {
        text-align: center;
        font-size: 0.65rem;
        color: var(--color-muted);
        padding: 2px 0;
    }

    /* Empty state */
    .ba-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: var(--color-muted);
        text-align: center;
        padding: 40px;
    }

    /* Input area */
    .ba-input-area {
        padding: 15px 20px;
        border-top: 1px solid var(--border-color);
        display: flex;
        gap: 10px;
        flex-shrink: 0;
    }

    .ba-input {
        flex: 1;
        padding: 12px 16px;
        background: #050505;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        outline: none;
        resize: none;
    }

    .ba-input:focus {
        border-color: var(--color-primary);
    }

    .ba-send-btn {
        padding: 12px 24px;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        border: none;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .ba-send-btn:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
    }

    .ba-send-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* Upload zone */
    .ba-upload-zone {
        padding: 15px;
        border-top: 1px solid var(--border-color);
    }

    .ba-upload-btn {
        width: 100%;
        padding: 10px;
        background: var(--bg-hover);
        border: 1px dashed var(--border-color);
        border-radius: 6px;
        color: var(--color-muted);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
    }

    .ba-upload-btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* Reasoning block in activity */
    .ba-reasoning-pre {
        margin: 6px 0 0;
        white-space: pre-wrap;
        font-size: 0.72rem;
        max-height: 200px;
        overflow-y: auto;
        background: #0a0a0a;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        color: #e2e8f0;
    }

    /* Model selector */
    .ba-model-select {
        padding: 4px 8px;
        background: #050505;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--color-text);
        font-size: 0.75rem;
        outline: none;
        max-width: 260px;
        cursor: pointer;
    }
    .ba-model-select:focus {
        border-color: var(--color-primary);
    }
    .ba-model-select option {
        background: #0a0a0a;
        color: var(--color-text);
    }
    .ba-model-select optgroup {
        color: var(--color-primary);
        font-style: normal;
    }
</style>

<!-- marked.js for markdown rendering -->
<script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"></script>

<div class="ba-container">
    <!-- File Sidebar -->
    <div class="ba-sidebar">
        <div class="ba-sidebar-header">
            <span>📁 Binaries</span>
            <span style="font-size: 0.75rem; color: var(--color-muted);">{{len .Binaries}} files</span>
        </div>
        <div class="ba-file-list" id="file-list">
            {{range .Binaries}}
            <div class="ba-file-item" onclick="insertBinaryPath('{{.}}')">
                <span style="opacity: 0.5;">📄</span> {{.}}
            </div>
            {{else}}
            <div style="padding: 20px; text-align: center; color: var(--color-muted); font-size: 0.85rem;">
                No binaries yet.<br>Upload below.
            </div>
            {{end}}
        </div>
        <div class="ba-upload-zone">
            <input type="file" id="binary-upload" style="display: none;" onchange="uploadBinary(this)">
            <button class="ba-upload-btn" onclick="document.getElementById('binary-upload').click()">
                ⬆ Upload Binary
            </button>
        </div>

        <div class="ba-sidebar-header" style="border-top: 1px solid var(--border-color);">
            <span>📂 Output</span>
            <span style="font-size: 0.75rem; color: var(--color-muted);">{{len .Outputs}} items</span>
        </div>
        <div class="ba-file-list" style="max-height: 200px;">
            {{range .Outputs}}
            <div class="ba-file-item">
                <span style="opacity: 0.5;">📄</span> {{.}}
            </div>
            {{else}}
            <div style="padding: 15px; text-align: center; color: var(--color-muted); font-size: 0.8rem;">
                No output yet.
            </div>
            {{end}}
        </div>
    </div>

    <!-- Main Content -->
    <div class="ba-main">
        <div class="ba-header">
            <div>
                <span style="font-weight: 600;">Binary & Archive</span>
                <span id="session-indicator"
                    style="font-size: 0.75rem; color: var(--color-muted); margin-left: 10px;"></span>
            </div>
            <div style="display: flex; gap: 8px; align-items: center;">
                <select class="ba-model-select" id="model-select" onchange="saveModelSelection()" title="Select AI model">
                    <option value="">Loading models...</option>
                </select>
                <div id="conn-badge"
                    style="display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; background: {{if .Connection.Connected}}rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2);{{else}}rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2);{{end}}">
                    <div
                        style="width: 6px; height: 6px; border-radius: 50%; background: {{if .Connection.Connected}}#10b981{{else}}#ef4444{{end}};">
                    </div>
                    {{if .Connection.Connected}}Online{{else}}Offline{{end}}
                </div>
                <div style="position: relative;">
                    <button class="badge" id="sessions-btn"
                        style="background: none; border: 1px solid var(--border-color); color: var(--color-muted); cursor: pointer; padding: 4px 10px;"
                        onclick="toggleSessionsPanel()">📋 History</button>
                    <div id="sessions-panel" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 6px; width: 300px; max-height: 400px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 100;">
                        <div style="padding: 10px 14px; border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center;">
                            <span>Sessions</span>
                            <button onclick="newSession(); toggleSessionsPanel();" style="background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: 0.8rem;">+ New</button>
                        </div>
                        <div id="sessions-list" style="padding: 6px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ba-output-area" id="output-area">
            <div class="ba-empty" id="empty-state">
                <div style="font-size: 2.5rem; margin-bottom: 15px; opacity: 0.3;">🔬</div>
                <p style="font-size: 1rem; margin-bottom: 5px;">Ready to analyze</p>
                <p style="font-size: 0.85rem;">Upload a binary and describe what you want to investigate.</p>
            </div>

            <!-- Analysis output (markdown rendered) -->
            <div class="ba-analysis-panel" id="analysis-panel" style="display: none;">
                <div class="ba-analysis" id="analysis-output"></div>
            </div>

            <!-- Drag handle -->
            <div class="ba-drag-handle" id="drag-handle" style="display: none;"></div>

            <!-- Activity log (tools, reasoning, agents) -->
            <div class="ba-activity-panel" id="activity-section" style="display: none;">
                <div class="ba-activity-header">
                    ⚙ Activity
                    <span class="ba-activity-count" id="activity-count">0</span>
                </div>
                <div class="ba-activity-log" id="activity-log"></div>
            </div>
        </div>

        <div class="ba-input-area">
            <textarea class="ba-input" id="chat-input" rows="1"
                placeholder="Analyze /workspace/binaries/target for vulnerabilities..."
                onkeydown="if(event.key==='Enter' && !event.shiftKey){event.preventDefault(); sendMessage();}"></textarea>
            <button class="ba-send-btn" id="stop-btn" onclick="stopPrompt()" style="display:none; background:#ef4444;">Stop</button>
            <button class="ba-send-btn" id="send-btn" onclick="sendMessage()">Send</button>
        </div>
    </div>
</div>

<script>
    let currentSession = null;
    let isStreaming = false;
    let eventSource = null;
    const STORAGE_KEY = 'overlord_last_session';
    let activityCounter = 0;
    let savedModel = '{{.ActiveModel}}';
    const enabledProvidersList = '{{.EnabledProviders}}'.split(',').filter(Boolean);

    // --- Model Selector ---
    async function loadModels() {
        const select = document.getElementById('model-select');
        try {
            const resp = await fetch('/api/overlord/providers');
            if (!resp.ok) throw new Error('offline');
            const data = await resp.json();
            const connected = data.connected || [];

            // Show models from enabled providers (user preference).
            // If no enabled list saved, fall back to connected providers.
            const hasEnabledList = enabledProvidersList.length > 0;
            const providers = (data.all || []).filter(p =>
                hasEnabledList ? enabledProvidersList.includes(p.id) : connected.includes(p.id)
            );

            select.innerHTML = '';
            if (providers.length === 0) {
                select.innerHTML = '<option value="">No providers enabled</option>';
                return;
            }

            // Add default option
            const defaultOpt = document.createElement('option');
            defaultOpt.value = '';
            defaultOpt.textContent = '\u26a1 Auto (server default)';
            select.appendChild(defaultOpt);

            providers.forEach(provider => {
                const models = provider.models || {};
                const modelEntries = Object.values(models).filter(m => m.capabilities && m.capabilities.toolcall);
                if (modelEntries.length === 0) return;

                const group = document.createElement('optgroup');
                group.label = provider.name;
                modelEntries.forEach(m => {
                    const opt = document.createElement('option');
                    opt.value = provider.id + '/' + m.id;
                    const cost = m.cost ? `$${m.cost.input.toFixed(2)}/$${m.cost.output.toFixed(2)}` : '';
                    opt.textContent = (m.name || m.id) + (cost ? ' (' + cost + ')' : '');
                    if (savedModel === opt.value) opt.selected = true;
                    group.appendChild(opt);
                });
                select.appendChild(group);
            });
        } catch (e) {
            select.innerHTML = '<option value="">⚠ Offline</option>';
        }
    }

    async function saveModelSelection() {
        const select = document.getElementById('model-select');
        savedModel = select.value;
        try {
            await fetch('/api/overlord/model', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ model: savedModel })
            });
        } catch (e) { /* ignore save failure */ }
    }

    // Load models on page load
    loadModels();

    // Configure marked for safe rendering
    if (typeof marked !== 'undefined') {
        marked.setOptions({
            breaks: true,
            gfm: true
        });
    }

    function renderMarkdown(text) {
        if (typeof marked !== 'undefined' && text) {
            try { return marked.parse(text); }
            catch (e) { return escapeHtml(text); }
        }
        return escapeHtml(text);
    }

    function insertBinaryPath(name) {
        const input = document.getElementById('chat-input');
        input.value += '/workspace/binaries/' + name + ' ';
        input.focus();
    }

    async function uploadBinary(input) {
        if (!input.files.length) return;
        const form = new FormData();
        form.append('file', input.files[0]);
        try {
            const resp = await fetch('/api/overlord/binaries/upload', { method: 'POST', body: form });
            const data = await resp.json();
            if (data.status === 'uploaded') location.reload();
        } catch (e) {
            showAnalysis('<p style="color:#ef4444;">Upload failed: ' + escapeHtml(e.message) + '</p>');
        }
        input.value = '';
    }

    function newSession() {
        if (eventSource) { eventSource.close(); eventSource = null; }
        currentSession = null;
        localStorage.removeItem(STORAGE_KEY);
        resetUI();
    }

    function resetUI() {
        document.getElementById('analysis-output').innerHTML = '';
        document.getElementById('analysis-panel').style.display = 'none';
        document.getElementById('drag-handle').style.display = 'none';
        document.getElementById('activity-log').innerHTML = '';
        document.getElementById('activity-section').style.display = 'none';
        document.getElementById('empty-state').style.display = '';
        document.getElementById('session-indicator').textContent = '';
        activityCounter = 0;
        updateActivityCount();
        setStreamingUI(false);
    }

    function setStreamingUI(streaming) {
        isStreaming = streaming;
        document.getElementById('send-btn').style.display = streaming ? 'none' : '';
        document.getElementById('stop-btn').style.display = streaming ? '' : 'none';
    }

    function showAnalysis(html) {
        document.getElementById('empty-state').style.display = 'none';
        document.getElementById('analysis-panel').style.display = '';
        const out = document.getElementById('analysis-output');
        out.innerHTML = html;
        scrollOutput();
    }

    function appendAnalysis(html) {
        document.getElementById('empty-state').style.display = 'none';
        document.getElementById('analysis-panel').style.display = '';
        const out = document.getElementById('analysis-output');
        out.innerHTML = html;
        scrollOutput();
    }

    function addActivity(html) {
        document.getElementById('empty-state').style.display = 'none';
        const section = document.getElementById('activity-section');
        section.style.display = '';
        document.getElementById('drag-handle').style.display = '';
        const log = document.getElementById('activity-log');
        const div = document.createElement('div');
        div.innerHTML = html;
        log.appendChild(div.firstElementChild || div);
        activityCounter++;
        updateActivityCount();
        scrollActivity();
        return log.lastElementChild;
    }

    function updateActivityCount() {
        document.getElementById('activity-count').textContent = activityCounter;
    }

    function scrollOutput() {
        const panel = document.getElementById('analysis-panel');
        panel.scrollTop = panel.scrollHeight;
    }

    function scrollActivity() {
        const log = document.getElementById('activity-log');
        log.scrollTop = log.scrollHeight;
    }

    function escapeHtml(str) {
        if (typeof str !== 'string') str = String(str);
        const d = document.createElement('div');
        d.textContent = str;
        return d.innerHTML;
    }

    // --- Session History ---
    let sessionsPanelOpen = false;

    function toggleSessionsPanel() {
        sessionsPanelOpen = !sessionsPanelOpen;
        const panel = document.getElementById('sessions-panel');
        panel.style.display = sessionsPanelOpen ? 'block' : 'none';
        if (sessionsPanelOpen) loadSessionsList();
    }

    document.addEventListener('click', (e) => {
        const panel = document.getElementById('sessions-panel');
        const btn = document.getElementById('sessions-btn');
        if (sessionsPanelOpen && !panel.contains(e.target) && !btn.contains(e.target)) {
            sessionsPanelOpen = false;
            panel.style.display = 'none';
        }
    });

    async function loadSessionsList() {
        const list = document.getElementById('sessions-list');
        list.innerHTML = '<div style="padding: 12px; text-align: center; color: var(--color-muted); font-size: 0.8rem;">Loading...</div>';
        try {
            const resp = await fetch('/api/overlord/sessions');
            const sessions = await resp.json();
            if (!sessions || sessions.length === 0) {
                list.innerHTML = '<div style="padding: 12px; text-align: center; color: var(--color-muted); font-size: 0.8rem;">No sessions yet.</div>';
                return;
            }
            sessions.sort((a, b) => (b.time?.updated || 0) - (a.time?.updated || 0));
            list.innerHTML = sessions.map(s => {
                const isActive = currentSession === s.id;
                const date = s.time?.updated ? new Date(s.time.updated * 1000).toLocaleString() : '';
                return `<div onclick="loadSession('${s.id}')" style="padding: 8px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; font-size: 0.8rem; ${isActive ? 'background: rgba(139,92,246,0.15); border-left: 2px solid #8b5cf6;' : ''} transition: background 0.15s;" onmouseenter="this.style.background=this.style.background||'var(--bg-hover)'" onmouseleave="this.style.background='${isActive ? 'rgba(139,92,246,0.15)' : ''}'">` 
                    + `<div style="font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${escapeHtml(s.title || 'Untitled')}</div>`
                    + `<div style="font-size: 0.7rem; color: var(--color-muted); margin-top: 2px;">${s.id.slice(0, 8)} • ${date}</div>`
                    + `</div>`;
            }).join('');
        } catch (e) {
            list.innerHTML = '<div style="padding: 12px; text-align: center; color: #ef4444; font-size: 0.8rem;">Failed to load sessions</div>';
        }
    }

    async function loadSession(sessionID) {
        if (eventSource) { eventSource.close(); eventSource = null; }
        currentSession = sessionID;
        localStorage.setItem(STORAGE_KEY, sessionID);
        document.getElementById('session-indicator').textContent = 'Session: ' + sessionID.slice(0, 8);
        sessionsPanelOpen = false;
        document.getElementById('sessions-panel').style.display = 'none';

        // Reset UI
        document.getElementById('empty-state').style.display = 'none';
        document.getElementById('analysis-panel').style.display = '';
        const analysisOut = document.getElementById('analysis-output');
        analysisOut.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--color-muted);">Loading messages...</div>';
        document.getElementById('activity-log').innerHTML = '';
        document.getElementById('drag-handle').style.display = 'none';
        document.getElementById('activity-section').style.display = 'none';
        activityCounter = 0;
        updateActivityCount();

        try {
            const resp = await fetch('/api/overlord/sessions/' + sessionID + '/messages');
            const messages = await resp.json();

            let combinedText = '';
            const activityItems = [];

            if (!messages || messages.length === 0) {
                analysisOut.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--color-muted); font-size: 0.85rem;">No messages in this session yet.</div>';
            } else {
                messages.forEach(msg => {
                    const info = msg.info;
                    const parts = msg.parts || [];
                    if (info?.role === 'assistant') {
                        const textParts = parts.filter(p => p.type === 'text');
                        const toolParts = parts.filter(p => p.type === 'tool');
                        if (textParts.length > 0) {
                            combinedText += textParts.map(p => p.text || '').join('\n');
                        }
                        toolParts.forEach(p => {
                            const state = p.state || {};
                            const statusIcon = state.status === 'completed' ? '✅' : state.status === 'error' ? '❌' : '⏳';
                            const title = state.title || p.tool || 'tool';
                            const output = state.output ? state.output.substring(0, 500) : state.error || JSON.stringify(state.input, null, 2);
                            activityItems.push(`<div class="ba-activity-item"><details><summary>${statusIcon} ${escapeHtml(title)}</summary><pre>${escapeHtml(output)}</pre></details></div>`);
                        });
                    }
                    // Skip user messages — no echo
                });

                if (combinedText) {
                    analysisOut.innerHTML = renderMarkdown(combinedText);
                } else {
                    analysisOut.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--color-muted); font-size: 0.85rem;">No analysis output yet.</div>';
                }

                if (activityItems.length > 0) {
                    const section = document.getElementById('activity-section');
                    section.style.display = '';
                    document.getElementById('drag-handle').style.display = '';
                    document.getElementById('activity-log').innerHTML = activityItems.join('');
                    activityCounter = activityItems.length;
                    updateActivityCount();
                }
            }
            connectSSE();
        } catch (e) {
            analysisOut.innerHTML = '<div style="padding: 20px; text-align: center; color: #ef4444;">Failed to load session: ' + escapeHtml(e.message) + '</div>';
        }
    }

    // --- SSE Event Handling ---
    const toolDivs = {};
    let reasoningDiv = null;
    let reasoningText = '';
    let fullText = '';

    function connectSSE() {
        if (eventSource) eventSource.close();
        eventSource = new EventSource('/api/overlord/events');
        reasoningDiv = null;
        reasoningText = '';

        eventSource.onmessage = (event) => {
            try {
                const data = JSON.parse(event.data);
                if (!currentSession) return;

                if (data.type === 'message.part.updated') {
                    const part = data.properties?.part;
                    if (!part || part.sessionID !== currentSession) return;

                    if (part.type === 'text') {
                        document.getElementById('empty-state').style.display = 'none';
                        document.getElementById('analysis-panel').style.display = '';
                        const out = document.getElementById('analysis-output');

                        if (data.properties.delta) {
                            fullText += data.properties.delta;
                        } else {
                            fullText = part.text || fullText;
                        }
                        out.innerHTML = renderMarkdown(fullText);
                        scrollOutput();

                    } else if (part.type === 'tool') {
                        const state = part.state || {};
                        const callID = part.callID || part.id;
                        const toolName = part.tool || 'tool';

                        if (!toolDivs[callID]) {
                            const div = document.createElement('div');
                            div.className = 'ba-activity-item';
                            toolDivs[callID] = div;
                            document.getElementById('empty-state').style.display = 'none';
                            const section = document.getElementById('activity-section');
                            section.style.display = '';
                            document.getElementById('activity-log').appendChild(div);
                            activityCounter++;
                            updateActivityCount();
                        }

                        const div = toolDivs[callID];
                        const statusIcon = state.status === 'running' ? '⏳' : state.status === 'completed' ? '✅' : state.status === 'error' ? '❌' : '⏳';
                        const title = state.title || toolName;

                        if (state.status === 'pending' || state.status === 'running') {
                            div.innerHTML = '<div style="display:flex;align-items:center;gap:6px;">' + statusIcon + ' <strong>' + escapeHtml(title) + '</strong> <span style="color:var(--color-muted);font-size:0.7rem;">running...</span></div>';
                        } else if (state.status === 'completed') {
                            const output = state.output ? state.output.substring(0, 500) : '';
                            div.innerHTML = '<details><summary>' + statusIcon + ' ' + escapeHtml(title) + '</summary><pre>' + escapeHtml(output) + '</pre></details>';
                        } else if (state.status === 'error') {
                            div.innerHTML = '<details open><summary style="color:#ef4444;">' + statusIcon + ' ' + escapeHtml(title) + ' — error</summary><pre style="color:#ef4444;">' + escapeHtml(state.error || '') + '</pre></details>';
                        }
                        scrollActivity();

                    } else if (part.type === 'reasoning') {
                        if (!reasoningDiv) {
                            reasoningDiv = document.createElement('div');
                            reasoningDiv.className = 'ba-activity-item';
                            reasoningDiv.innerHTML = '<details open><summary>💭 Thinking...</summary><pre class="ba-reasoning-pre"></pre></details>';
                            document.getElementById('empty-state').style.display = 'none';
                            const section = document.getElementById('activity-section');
                            section.style.display = '';
                            document.getElementById('drag-handle').style.display = '';
                            document.getElementById('activity-log').appendChild(reasoningDiv);
                            reasoningText = '';
                            activityCounter++;
                            updateActivityCount();
                        }
                        const delta = data.properties.delta || part.text || '';
                        reasoningText += delta;
                        reasoningDiv.querySelector('.ba-reasoning-pre').textContent = reasoningText;
                        scrollActivity();

                    } else if (part.type === 'agent') {
                        const div = document.createElement('div');
                        div.className = 'ba-activity-agent';
                        div.textContent = '↪ Agent: ' + (part.name || 'subagent');
                        document.getElementById('empty-state').style.display = 'none';
                        const section = document.getElementById('activity-section');
                        section.style.display = '';
                        document.getElementById('drag-handle').style.display = '';
                        document.getElementById('activity-log').appendChild(div);
                        activityCounter++;
                        updateActivityCount();
                        scrollActivity();

                    } else if (part.type === 'step-start') {
                        const div = document.createElement('div');
                        div.className = 'ba-activity-step';
                        document.getElementById('activity-log').appendChild(div);

                    } else if (part.type === 'step-finish') {
                        const cost = part.cost ? ' • $' + part.cost.toFixed(4) : '';
                        const tokens = part.tokens ? ' • ' + part.tokens.input + ' in / ' + part.tokens.output + ' out' : '';
                        if (cost || tokens) {
                            const div = document.createElement('div');
                            div.className = 'ba-activity-cost';
                            div.textContent = 'Step complete' + cost + tokens;
                            document.getElementById('activity-log').appendChild(div);
                        }
                    }

                } else if (data.type === 'session.idle') {
                    if (data.properties?.sessionID === currentSession) {
                        fullText = '';
                        reasoningDiv = null;
                        reasoningText = '';
                        Object.keys(toolDivs).forEach(k => delete toolDivs[k]);
                        setStreamingUI(false);
                    }

                } else if (data.type === 'session.status') {
                    if (data.properties?.sessionID === currentSession) {
                        const status = data.properties.status;
                        if (status?.type === 'busy') {
                            document.getElementById('session-indicator').textContent = 'Session: ' + currentSession.slice(0, 8) + ' • Processing...';
                            setStreamingUI(true);
                        } else if (status?.type === 'idle') {
                            document.getElementById('session-indicator').textContent = 'Session: ' + currentSession.slice(0, 8);
                        }
                    }

                } else if (data.type === 'message.updated') {
                    const msg = data.properties?.info;
                    if (msg && msg.sessionID === currentSession && msg.role === 'assistant' && msg.tokens) {
                        const cost = msg.cost ? '$' + msg.cost.toFixed(4) : '';
                        const tokens = 'In: ' + msg.tokens.input + ' / Out: ' + msg.tokens.output;
                        document.getElementById('session-indicator').textContent = 'Session: ' + currentSession.slice(0, 8) + (cost ? ' • ' + cost : '') + ' • ' + tokens;
                    }
                }
            } catch (e) {
                // Non-JSON event, ignore
            }
        };

        eventSource.onerror = () => {};
    }

    // --- Stop Button ---
    async function stopPrompt() {
        if (!currentSession) return;
        try {
            await fetch('/api/overlord/sessions/' + currentSession + '/abort', { method: 'POST' });
        } catch (e) { /* ignore */ }
        setStreamingUI(false);
    }

    // --- Send Message ---
    async function sendMessage() {
        const input = document.getElementById('chat-input');
        const message = input.value.trim();
        if (!message || isStreaming) return;

        input.value = '';
        setStreamingUI(true);

        // Reset output for new analysis
        fullText = '';

        try {
            // Create session if needed
            if (!currentSession) {
                const createResp = await fetch('/api/overlord/sessions', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ message: 'Binary Analysis' })
                });
                const session = await createResp.json();
                if (session && session.id) {
                    currentSession = session.id;
                    localStorage.setItem(STORAGE_KEY, session.id);
                    document.getElementById('session-indicator').textContent = 'Session: ' + session.id.slice(0, 8);
                    connectSSE();
                    // Small delay to ensure SSE is connected before prompt fires
                    await new Promise(r => setTimeout(r, 300));
                } else {
                    const errMsg = (session && session.error) ? session.error : 'Failed to create session. Is the Overlord container running?';
                    showAnalysis('<p style="color:#ef4444;">' + escapeHtml(errMsg) + '</p>');
                    setStreamingUI(false);
                    return;
                }
            }

            // Send async prompt — returns immediately, content streams via SSE
            const promptPayload = { message };
            if (savedModel) promptPayload.model = savedModel;
            const promptResp = await fetch('/api/overlord/sessions/' + currentSession + '/prompt', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(promptPayload)
            });
            const result = await promptResp.json();
            if (result && result.error) {
                showAnalysis('<p style="color:#ef4444;">Error: ' + escapeHtml(result.error) + '</p>');
                setStreamingUI(false);
            }
            // All content arrives via SSE — session.idle re-enables send
        } catch (e) {
            showAnalysis('<p style="color:#ef4444;">Failed to connect to Overlord: ' + escapeHtml(e.message) + '</p>');
            setStreamingUI(false);
        }
    }

    // --- Auto-restore last session on page load (with validation) ---
    (async function() {
        const saved = localStorage.getItem(STORAGE_KEY);
        if (!saved) return;

        // Validate session still exists before loading
        try {
            const resp = await fetch('/api/overlord/sessions');
            if (!resp.ok) {
                localStorage.removeItem(STORAGE_KEY);
                return;
            }
            const sessions = await resp.json();
            if (Array.isArray(sessions) && sessions.some(s => s.id === saved)) {
                loadSession(saved);
            } else {
                // Stale session — clear it
                localStorage.removeItem(STORAGE_KEY);
            }
        } catch (e) {
            // Can't reach server — clear stale reference
            localStorage.removeItem(STORAGE_KEY);
        }
    })();

    // --- Drag Handle Resize Logic ---
    (function() {
        const handle = document.getElementById('drag-handle');
        const analysisPanel = document.getElementById('analysis-panel');
        const activityPanel = document.getElementById('activity-section');
        const outputArea = document.getElementById('output-area');
        let isDragging = false;

        handle.addEventListener('mousedown', (e) => {
            isDragging = true;
            handle.classList.add('dragging');
            document.body.style.cursor = 'row-resize';
            document.body.style.userSelect = 'none';
            e.preventDefault();
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const rect = outputArea.getBoundingClientRect();
            const totalHeight = rect.height - handle.offsetHeight;
            const offset = e.clientY - rect.top;
            const topRatio = Math.max(0.1, Math.min(0.9, offset / rect.height));
            const bottomRatio = 1 - topRatio;
            analysisPanel.style.flex = topRatio;
            activityPanel.style.flex = bottomRatio;
        });

        document.addEventListener('mouseup', () => {
            if (!isDragging) return;
            isDragging = false;
            handle.classList.remove('dragging');
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        });
    })();
</script>
{{end}}