ide/app.js

/* ── FSI_FELON IDE — Underwater Fusion Lab (Phase 2) ── */

const API = 'http://' + location.hostname + ':9090';

document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.sidebar-tab');
    const panels = document.querySelectorAll('.panel');
    const splash = document.getElementById('splash');

    // ── Psycho Mode animation (hidden) ──
    function psychoAnimate(outEl, writeFn, data, onDone) {
        const manifesto = data.manifesto || [];
        const variants = data.variants || [];
        const project = data.project || 'project';
        const totalLoc = data.total_loc || 0;
        const files = data.files || 0;

        let delay = 0;
        manifesto.forEach(line => {
            setTimeout(() => writeFn('  ' + line, 'psycho-manifesto'), delay);
            delay += 800;
        });
        setTimeout(() => {
            writeFn('', '');
            writeFn('╔══════════════════════════════════════╗', 'psycho-banner');
            writeFn('║        P S Y C H O   M O D E        ║', 'psycho-banner');
            writeFn('║          E N G A G E D              ║', 'psycho-banner');
            writeFn('╚══════════════════════════════════════╝', 'psycho-banner');
            writeFn('', '');
            writeFn('  Building: ' + project, 'psycho-banner');
        }, delay + 400);
        delay += 1200;
        variants.forEach((v, i) => {
            setTimeout(() => writeFn('  ' + v, 'forge'), delay + i * 300);
        });
        delay += variants.length * 300 + 400;
        setTimeout(() => {
            writeFn('', '');
            writeFn('╔══════════════════════════════════════╗', 'psycho-summary');
            writeFn('║  6 VARIANTS | ' + String(totalLoc).padEnd(5) + ' LOC | ' + String(files).padEnd(4) + ' FILES  ║', 'psycho-summary');
            writeFn('╚══════════════════════════════════════╝', 'psycho-summary');
            writeFn('', '');
            writeFn('  You wanted psycho. You got it.', 'psycho-banner');
            if (onDone) onDone();
        }, delay + 400);
    }

    // ── Nanobot click sequence for psycho unlock (hidden) ──
    const PSYCHO_ORGAN_SEQ = ['Antennae', 'Spine', 'Hippocampus', 'Cerebellum', 'Prefrontal', 'Dream'];
    let psychoClickSeq = [];
    let psychoClickTimer = null;

    document.addEventListener('click', (e) => {
        const bot = e.target.closest('.nanobot');
        if (!bot) return;
        const organ = bot.dataset && bot.dataset.organ;
        if (!organ) return;
        const expected = PSYCHO_ORGAN_SEQ[psychoClickSeq.length];
        if (organ === expected) {
            psychoClickSeq.push(organ);
            if (psychoClickTimer) clearTimeout(psychoClickTimer);
            psychoClickTimer = setTimeout(() => { psychoClickSeq = []; }, 3000);
            if (psychoClickSeq.length === PSYCHO_ORGAN_SEQ.length) {
                psychoClickSeq = [];
                const project = editor ? (editor.value.split('\n')[0] || 'project').trim().slice(0, 40) : 'project';
                api('/api/psycho/unlock', { project: project }).then(data => {
                    if (data.psycho && termOutput && termInput) {
                        psychoAnimate(termOutput, (text, cls) => {
                            const d = document.createElement('div');
                            d.className = 'terminal-line ' + cls;
                            d.textContent = text;
                            termOutput.appendChild(d);
                            termOutput.scrollTop = termOutput.scrollHeight;
                        }, data, () => {
                            document.querySelector('[data-panel="deep"]').click();
                        });
                    }
                });
            }
        } else {
            psychoClickSeq = [];
        }
    });

    // ── API client ──
    async function api(path, body) {
        try {
            const r = await fetch(API + path, {
                method: body ? 'POST' : 'GET',
                headers: { 'Content-Type': 'application/json' },
                body: body ? JSON.stringify(body) : null,
            });
            return await r.json();
        } catch (e) {
            return { output: ['[API] Server offline — run server.py'], error: true };
        }
    }

    // ── Splash fade ──
    setTimeout(() => { if (splash) splash.style.opacity = '0'; }, 3200);
    setTimeout(() => { if (splash) splash.style.display = 'none'; }, 4000);

    // ── Onboarding ──
    const onboarding = document.getElementById('onboarding');
    const onboardingBtn = document.getElementById('onboarding-start-btn');
    const onboardingCheck = document.getElementById('onboarding-dismiss-check');
    if (onboarding && !localStorage.getItem('fsi_onboarded')) {
        setTimeout(() => { onboarding.classList.add('visible'); }, 4200);
    }
    if (onboardingBtn && onboarding) {
        onboardingBtn.addEventListener('click', () => {
            if (onboardingCheck && onboardingCheck.checked) {
                localStorage.setItem('fsi_onboarded', 'true');
            }
            onboarding.classList.remove('visible');
        });
    }

    // ── Star particles ──
    const starContainer = document.querySelector('.splash-stars');
    if (starContainer) {
        for (let i = 0; i < 60; i++) {
            const s = document.createElement('div');
            s.className = 'splash-particle';
            const size = 1 + Math.random() * 2;
            s.style.width = size + 'px';
            s.style.height = size + 'px';
            s.style.left = Math.random() * 100 + '%';
            s.style.top = Math.random() * 30 + '%';
            s.style.animationDelay = Math.random() * 2 + 's';
            s.style.animationDuration = (1.5 + Math.random() * 2) + 's';
            s.style.background = Math.random() > 0.7 ? '#ff6b35' : '#00d4ff';
            starContainer.appendChild(s);
        }
    }

    // ── Bubbles ──
    for (let i = 0; i < 40; i++) {
        const b = document.createElement('div');
        b.className = 'bubble';
        const size = 2 + Math.random() * 6;
        b.style.width = size + 'px';
        b.style.height = size + 'px';
        b.style.left = Math.random() * 100 + '%';
        b.style.bottom = '-10px';
        b.style.animationDuration = (6 + Math.random() * 8) + 's';
        b.style.animationDelay = Math.random() * 8 + 's';
        b.style.opacity = 0.1 + Math.random() * 0.2;
        document.body.appendChild(b);
    }

    // ── Tab Switching ──
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const target = tab.dataset.panel;
            tabs.forEach(t => t.classList.remove('active'));
            panels.forEach(p => p.classList.remove('active'));
            tab.classList.add('active');
            const panel = document.getElementById('panel-' + target);
            if (panel) panel.classList.add('active');
            if (target === 'vault') loadVaultTree();
        });
    });

    // ── Editor: Sync line numbers ──
    const editor = document.getElementById('code-editor');
    const gutter = document.getElementById('editor-gutter');
    if (editor && gutter) {
        const updateGutter = () => {
            const lines = editor.value.split('\n');
            gutter.innerHTML = lines.map((_, i) => '<div>' + (i + 1) + '</div>').join('');
        };
        editor.addEventListener('input', updateGutter);
        editor.addEventListener('scroll', () => { gutter.scrollTop = editor.scrollTop; });
        updateGutter();
    }

    // ── Terminal ──
    const termInput = document.getElementById('terminal-input');
    const termOutput = document.getElementById('terminal-output');
    const termHistory = [];
    let termIdx = -1;

    if (termInput && termOutput) {
        const write = (text, cls = '') => {
            const d = document.createElement('div');
            d.className = 'terminal-line ' + cls;
            d.textContent = text;
            termOutput.appendChild(d);
            termOutput.scrollTop = termOutput.scrollHeight;
        };

        write('╔══════════════════════════════════════╗', 'info');
        write('║  FSI_FELON Terminal v4.0            ║', 'info');
        write('║  Connecting to backend...            ║', 'info');
        write('╚══════════════════════════════════════╝', 'info');
        write('');

        termInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                const cmd = termInput.value.trim();
                if (!cmd) return;
                write('fsi> ' + cmd);
                termHistory.push(cmd);
                termIdx = termHistory.length;
                termInput.value = '';
                termInput.disabled = true;

                if (cmd.toLowerCase() === 'clear') {
                    termOutput.innerHTML = '';
                    termInput.disabled = false;
                    termInput.focus();
                    return;
                }

                api('/api/command', { cmd: cmd }).then(data => {
                    const lines = data.output || ['[API] No response'];
                    // Check for psycho mode (structured response)
                    if (data.psycho) {
                        psychoAnimate(termOutput, write, data, () => {
                            termInput.disabled = false;
                            termInput.focus();
                        });
                    } else {
                        lines.forEach(line => {
                            if (line === '__CLEAR__') {
                                termOutput.innerHTML = '';
                                return;
                            }
                            let cls = 'info';
                            if (line.includes('CHIMERA') || line.includes('ROUTED')) cls = 'chimera';
                            else if (line.includes('Error') || line.includes('Unknown') || line.includes('error')) cls = 'error';
                            else if (line.includes('✓') || line.includes('WOOGITY')) cls = 'prompt';
                            else if (line.includes('FORGE') || line.includes('BUILD')) cls = 'forge';
                            else if (line.includes('KELI') || line.includes('WHITE') || line.includes('RABBIT')) cls = 'rabbit';
                            else if (line.includes('DREAM')) cls = 'dream';
                            else if (line.includes('TEST')) cls = 'test';
                            write('  ' + line, cls);
                        });
                        termInput.disabled = false;
                        termInput.focus();
                    }
                });
            } else if (e.key === 'ArrowUp') {
                if (termIdx > 0) { termIdx--; termInput.value = termHistory[termIdx]; }
                e.preventDefault();
            } else if (e.key === 'ArrowDown') {
                if (termIdx < termHistory.length - 1) { termIdx++; termInput.value = termHistory[termIdx]; }
                else { termIdx = termHistory.length; termInput.value = ''; }
                e.preventDefault();
            }
        });
    }

    // ── Forge It Button (Workshop → Forge) ──
    const forgeBtn = document.getElementById('forge-btn');
    if (forgeBtn) {
        forgeBtn.addEventListener('click', async () => {
            const code = editor ? editor.value : '';
            const lines = code.split('\n').filter(l => l.trim() && !l.trim().startsWith('#'));
            const desc = (lines[0] || 'project').replace(/^def\s+|^class\s+|^#\s*/g, '').trim().slice(0, 60) || 'project';
            forgeBtn.textContent = '⚡ Forging...';
            forgeBtn.disabled = true;

            const forgePanel = document.getElementById('panel-forge');
            document.querySelector('[data-panel="forge"]').click();

            const forgeOutput = document.getElementById('forge-output');
            const card = document.createElement('div');
            card.className = 'forge-card';
            card.innerHTML = '<div class="forge-card-header"><span style="font-weight:400;font-size:14px;color:#c8d6e5">' + desc + '</span><span class="forge-badge badge-pending">⟳ RUN</span></div><div style="font-size:12px;color:rgba(200,214,229,0.45)">Building...</div>';
            forgeOutput.prepend(card);

            const data = await api('/api/build', { desc: desc, code: code });
            const files = data.files || '—';
            const loc = data.loc || '—';
            const time = data.time || '—';
            card.innerHTML = '<div class="forge-card-header"><span style="font-weight:400;font-size:14px;color:#c8d6e5">' + desc + '</span><span class="forge-badge badge-success">✓ PASS</span></div><div style="font-size:12px;color:rgba(200,214,229,0.45)">' + files + ' files · ' + loc + ' LOC · ' + time + '</div>';

            forgeBtn.textContent = '⚡ Forge It';
            forgeBtn.disabled = false;
        });
    }

    // ── Sidebar Status Polling ──
    const statusRows = document.querySelectorAll('.sidebar-status .value');
    async function pollStatus() {
        const data = await api('/api/stats');
        if (data.training && statusRows.length >= 3) {
            const t = data.training;
            statusRows[0].textContent = 'step ' + t.step + ' · loss ' + t.loss;
            statusRows[1].textContent = (data.chimera ? data.chimera.organs : '—') + ' organs · ' + (data.chimera ? (data.chimera.accuracy * 100).toFixed(0) + '% route' : '—');
            const meshEl = document.getElementById('sidebar-mesh-peers');
            if (meshEl) {
                const id = await api('/api/mesh/identity');
                meshEl.textContent = (id.peers || 0) + ' peers';
            }
            statusRows[3].textContent = (t.tokens_per_sec || '—') + ' tok/s';
        }
    }
    setInterval(pollStatus, 2000);

    // ── Vault File Tree ──
    const vaultTree = document.getElementById('vault-tree');
    const uploadZone = document.querySelector('.vault-upload-zone');

    async function loadVaultTree() {
        if (!vaultTree) return;
        const data = await api('/api/files?path=' + encodeURIComponent('/tmp/fsi_felon/workspace'));
        if (data.error || !data.files) {
            vaultTree.innerHTML = '<div class="tree-item"><span style="color:#ff6b35;">⚠ ' + (data.error || 'Could not load workspace') + '</span></div>';
            return;
        }
        let html = '<div class="tree-item folder" data-path="/tmp/fsi_felon/workspace"><span class="icon">📂</span><span>workspace</span></div>';
        const renderItems = (items, depth) => {
            for (const item of items) {
                if (item.type === 'folder') {
                    html += '<div class="tree-item folder" style="padding-left:' + (16 + depth * 20) + 'px" data-path="' + item.path + '"><span class="icon">' + (item.children ? '📁' : '📂') + '</span><span>' + item.name + '</span></div>';
                    if (item.children) renderItems(item.children, depth + 1);
                } else {
                    const size = item.size ? ' <span style="color:rgba(200,214,229,0.35);font-size:10px;">' + (item.size > 1024 ? (item.size / 1024).toFixed(1) + 'KB' : item.size + 'B') + '</span>' : '';
                    html += '<div class="tree-item file" style="padding-left:' + (16 + depth * 20) + 'px" data-path="' + item.path + '"><span class="icon">📄</span><span>' + item.name + size + '</span></div>';
                }
            }
        };
        renderItems(data.files, 0);
        vaultTree.innerHTML = html;
    }

    // Click file in vault → open in workshop
    document.addEventListener('click', (e) => {
        const item = e.target.closest('.tree-item.file');
        if (!item) return;
        const path = item.dataset.path;
        if (!path) return;
        api('/api/download?path=' + encodeURIComponent(path)).then(data => {
            if (data.content && editor) {
                editor.value = data.content;
                if (gutter) {
                    const lines = data.content.split('\n');
                    gutter.innerHTML = lines.map((_, i) => '<div>' + (i + 1) + '</div>').join('');
                }
                document.querySelector('[data-panel="workshop"]').click();
            }
        });
    });

    // Upload zone
    if (uploadZone) {
        const input = document.createElement('input');
        input.type = 'file';
        input.style.display = 'none';
        document.body.appendChild(input);

        uploadZone.addEventListener('click', () => input.click());
        uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#00d4ff'; });
        uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = ''; });
        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.style.borderColor = '';
            const files = e.dataTransfer.files;
            if (files.length) uploadFile(files[0]);
        });
        input.addEventListener('change', () => {
            if (input.files.length) uploadFile(input.files[0]);
            input.value = '';
        });

        async function uploadFile(file) {
            const reader = new FileReader();
            reader.onload = async (e) => {
                const data = await api('/api/upload', {
                    filename: file.name,
                    content: e.target.result,
                    path: '/tmp/fsi_felon/workspace',
                });
                if (data.success) loadVaultTree();
            };
            reader.readAsText(file);
        }
    }

    // ── Dream: Chimera stats into nanobot status ──
    const canvas = document.getElementById('dream-canvas');
    if (canvas) {
        const count = 25;
        const bots = [];
        const colors = ['#00d4ff', '#ff6b35', '#ff3366', '#00ff88', '#ffffff'];
        const organNames = ['Antennae', 'Spine', 'Hippocampus', 'Cerebellum', 'Prefrontal', 'Dream'];

        for (let i = 0; i < count; i++) {
            const bot = document.createElement('div');
            bot.className = 'nanobot';
            const size = 4 + Math.random() * 4;
            const color = colors[Math.floor(Math.random() * colors.length)];
            const x = Math.random() * 92 + 4;
            const y = Math.random() * 88 + 4;
            bot.style.width = size + 'px';
            bot.style.height = size + 'px';
            bot.style.left = x + '%';
            bot.style.top = y + '%';
            bot.style.background = color;
            bot.style.boxShadow = '0 0 ' + (4 + Math.random() * 8) + 'px ' + color + '60';
            bot.style.animation = 'nanobotFloat ' + (3 + Math.random() * 4) + 's ease-in-out infinite';
            bot.style.animationDelay = Math.random() * 3 + 's';
            const organName = organNames[Math.floor(Math.random() * organNames.length)];
            bot.dataset.organ = organName;
            canvas.appendChild(bot);
            bots.push({
                el: bot, x: x, y: y,
                vx: (Math.random() - 0.5) * 0.15,
                vy: (Math.random() - 0.5) * 0.15,
                color: color, size: size,
                organ: organName,
            });
        }

        const trails = [];
        for (let i = 0; i < 15; i++) {
            const t = document.createElement('div');
            t.className = 'nanobot-trail';
            const ts = 1 + Math.random() * 2;
            t.style.width = ts + 'px';
            t.style.height = ts + 'px';
            t.style.background = '#00d4ff';
            t.style.animationDelay = Math.random() * 3 + 's';
            canvas.appendChild(t);
            trails.push(t);
        }

        const lineLayer = document.createElement('div');
        lineLayer.style.position = 'absolute';
        lineLayer.style.inset = '0';
        lineLayer.style.pointerEvents = 'none';
        lineLayer.style.zIndex = '0';
        canvas.appendChild(lineLayer);

        const lines = [];
        for (let i = 0; i < 40; i++) {
            const l = document.createElement('div');
            l.className = 'nanobot-line';
            l.style.background = 'rgba(0,212,255,0.15)';
            l.style.height = '1px';
            lineLayer.appendChild(l);
            lines.push(l);
        }

        const statusEl = canvas.querySelector('.dream-status');
        const updateStatus = () => {
            if (!statusEl) return;
            api('/api/stats').then(data => {
                const c = data.chimera || {};
                const t = data.training || {};
                statusEl.innerHTML = '<span>Swarm: ' + bots.length + ' active</span><span>Organs: ' + (c.organs || '—') + ' · ' + (c.accuracy ? (c.accuracy * 100).toFixed(0) + '%' : '—') + '</span><span>Loss: ' + (t.loss || '—') + '</span>';
            });
        };

        let frame = 0;
        const animate = () => {
            frame++;
            bots.forEach(b => {
                b.x += b.vx + Math.sin(frame * 0.01 + b.y) * 0.02;
                b.y += b.vy + Math.cos(frame * 0.01 + b.x) * 0.02;
                if (b.x < 0 || b.x > 94) { b.vx *= -1; b.x = Math.max(0, Math.min(94, b.x)); }
                if (b.y < 0 || b.y > 94) { b.vy *= -1; b.y = Math.max(0, Math.min(94, b.y)); }
                b.el.style.left = b.x + '%';
                b.el.style.top = b.y + '%';
            });

            const connections = [];
            for (let i = 0; i < bots.length; i++) {
                for (let j = i + 1; j < bots.length; j++) {
                    const dx = bots[i].x - bots[j].x;
                    const dy = bots[i].y - bots[j].y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < 12) connections.push({ i, j, dist });
                }
            }

            const w = canvas.offsetWidth;
            const h = canvas.offsetHeight;
            lines.forEach((l, idx) => {
                if (idx < connections.length) {
                    const c = connections[idx];
                    const b1 = bots[c.i];
                    const b2 = bots[c.j];
                    const x1 = b1.x / 100 * w;
                    const y1 = b1.y / 100 * h;
                    const x2 = b2.x / 100 * w;
                    const y2 = b2.y / 100 * h;
                    const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
                    const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
                    l.style.left = x1 + 'px';
                    l.style.top = y1 + 'px';
                    l.style.width = len + 'px';
                    l.style.transform = 'rotate(' + angle + 'deg)';
                    l.style.opacity = Math.max(0, (1 - c.dist / 12) * 0.6);
                } else {
                    l.style.opacity = '0';
                }
            });

            trails.forEach((t, idx) => {
                const bot = bots[idx % bots.length];
                t.style.left = (bot.x + (Math.random() - 0.5) * 5) + '%';
                t.style.top = (bot.y + (Math.random() - 0.5) * 5) + '%';
            });

            if (frame % 30 === 0) updateStatus();
            requestAnimationFrame(animate);
        };
        animate();
    }

    // ── Mesh: Node Identity & Sharing ──
    const meshNodeId = document.getElementById('mesh-node-id');
    const meshPubkey = document.getElementById('mesh-pubkey');
    const meshUptime = document.getElementById('mesh-uptime');
    const meshPeers = document.getElementById('mesh-peers');
    const meshSharedCount = document.getElementById('mesh-shared-count');
    const meshFeed = document.getElementById('mesh-feed');
    const meshInsights = document.getElementById('mesh-insights-content');
    const meshPublishBtn = document.getElementById('mesh-publish-btn');
    const meshToggleGlobal = document.getElementById('mesh-toggle-global');
    const meshToggleBench = document.getElementById('mesh-toggle-benchmarks');
    const meshToggleDreams = document.getElementById('mesh-toggle-dreams');
    const meshToggleStats = document.getElementById('mesh-toggle-stats');

    async function pollMesh() {
        const identity = await api('/api/mesh/identity');
        if (identity.node_id && meshNodeId) {
            meshNodeId.textContent = identity.node_id;
            meshPubkey.textContent = identity.pubkey_fingerprint || '—';
            const up = identity.uptime || 0;
            const h = Math.floor(up / 3600);
            const m = Math.floor((up % 3600) / 60);
            const s = up % 60;
            meshUptime.textContent = h + 'h ' + m + 'm ' + s + 's';
            meshPeers.textContent = identity.peers || 0;
        }
        const discover = await api('/api/mesh/discover');
        if (discover.items && meshFeed) {
            if (discover.items.length === 0) {
                meshFeed.innerHTML = '<div class="mesh-feed-empty">&#x1F578; No peers yet — shared content from other nodes appears here when they connect.</div>';
            } else {
                meshFeed.innerHTML = discover.items.map(item => {
                    const ts = item.timestamp ? new Date(item.timestamp * 1000).toLocaleString() : '';
                    return '<div class="mesh-feed-item">' +
                        '<div class="mesh-feed-item-header">' +
                        '<span class="mesh-feed-item-name">' + escapeHtml(item.name) + '</span>' +
                        '<span class="mesh-feed-item-node">' + (item.node_id ? item.node_id.slice(0, 8) + '..' : '—') + '</span>' +
                        '</div>' +
                        '<div class="mesh-feed-item-meta"><span>' + escapeHtml(item.type || 'project') + '</span><span>' + ts + '</span></div>' +
                        '</div>';
                }).join('');
            }
        }
        const shareData = await api('/api/mesh/discover?local=true');
        if (shareData.items && meshSharedCount) {
            meshSharedCount.textContent = shareData.items.length + ' items shared';
        }
    }

    function escapeHtml(s) {
        const d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    // Publish current project to mesh
    if (meshPublishBtn && editor) {
        meshPublishBtn.addEventListener('click', async () => {
            const code = editor.value;
            const desc = (code.split('\n').filter(l => l.trim() && !l.trim().startsWith('#'))[0] || 'untitled').replace(/^def\s+|^class\s+|^#\s*/g, '').trim().slice(0, 60) || 'untitled';
            meshPublishBtn.textContent = '&#x1F4E4; Publishing...';
            meshPublishBtn.disabled = true;
            await api('/api/mesh/share', {
                name: desc,
                content: code,
                type: 'project',
                share_benchmarks: meshToggleBench ? meshToggleBench.checked : true,
                share_dreams: meshToggleDreams ? meshToggleDreams.checked : false,
                share_stats: meshToggleStats ? meshToggleStats.checked : false,
            });
            meshPublishBtn.textContent = '&#x2713; Published';
            setTimeout(() => {
                meshPublishBtn.textContent = '&#x1F4E4; Publish Current Project';
                meshPublishBtn.disabled = false;
            }, 2000);
            pollMesh();
        });
    }

    // Chimera cross-node insights — triggered when editor content changes
    let insightTimer = null;
    if (editor && meshInsights) {
        editor.addEventListener('input', () => {
            clearTimeout(insightTimer);
            insightTimer = setTimeout(async () => {
                const code = editor.value.trim();
                if (code.length < 30) return;
                const result = await api('/api/mesh/related', { text: code.slice(0, 500) });
                if (result.related && result.related.length > 0) {
                    meshInsights.innerHTML = result.related.map(r =>
                        '<div class="mesh-insight-card">' +
                        '<div class="mesh-insight-card-title">&#x1F4AD; ' + escapeHtml(r.name) + '</div>' +
                        '<div class="mesh-insight-card-desc">' + escapeHtml(r.description || 'Related public project') + ' &middot; node ' + (r.node_id ? r.node_id.slice(0, 8) + '..' : '—') + '</div>' +
                        '</div>'
                    ).join('');
                } else {
                    meshInsights.innerHTML = '<div class="mesh-feed-empty">&#x1F4AD; Working on something? Chimera will search the mesh for related public work.</div>';
                }
            }, 1500);
        });
    }

    setInterval(pollMesh, 5000);

    // ── Device: APK Builder ──
    const deviceSdk = document.getElementById('device-sdk');
    const deviceAdb = document.getElementById('device-adb');
    const deviceGradle = document.getElementById('device-gradle');
    const deviceDevices = document.getElementById('device-devices');
    const deviceOutput = document.getElementById('device-output');
    const deviceApkStatus = document.getElementById('device-apk-status');
    const deviceVerifyOutput = document.getElementById('device-verify-output');
    const deviceGenBtn = document.getElementById('device-gen-btn');
    const deviceBuildBtn = document.getElementById('device-build-btn');
    const deviceVerifyBtn = document.getElementById('device-verify-btn');
    const deviceInstallBtn = document.getElementById('device-install-btn');

    let currentApk = null;

    function deviceWrite(text, cls = '') {
        if (!deviceOutput) return;
        if (deviceOutput.querySelector('.device-output-empty')) {
            deviceOutput.innerHTML = '';
        }
        const d = document.createElement('div');
        d.className = 'device-output-line ' + cls;
        d.textContent = text;
        deviceOutput.appendChild(d);
        deviceOutput.scrollTop = deviceOutput.scrollHeight;
    }

    async function pollDevice() {
        const env = await api('/api/android/env');
        if (deviceSdk) {
            deviceSdk.textContent = env.sdk ? 'installed' : 'not found';
            deviceSdk.className = 'device-value' + (env.sdk ? ' good' : ' bad');
        }
        if (deviceAdb) {
            deviceAdb.textContent = env.adb ? 'available' : 'not found';
            deviceAdb.className = 'device-value' + (env.adb ? ' good' : ' bad');
        }
        if (deviceGradle) {
            deviceGradle.textContent = env.gradle || 'not found';
            deviceGradle.className = 'device-value' + (env.gradle ? ' good' : ' bad');
        }
        if (deviceDevices) {
            deviceDevices.textContent = (env.devices || 0) + ' connected';
            deviceDevices.className = 'device-value' + (env.devices > 0 ? ' good' : '');
        }
    }

    if (deviceGenBtn) {
        deviceGenBtn.addEventListener('click', async () => {
            const name = document.getElementById('device-app-name').value || 'FSIApp';
            const pkg = document.getElementById('device-package').value || 'com.fsi.app';
            const activity = document.getElementById('device-activity').value || 'MainActivity';
            deviceWrite('Generating project: ' + name + '...', 'info');
            deviceGenBtn.disabled = true;
            const result = await api('/api/android/generate', { name, package: pkg, activity });
            if (result.success) {
                deviceWrite('Project generated: ' + result.path, 'success');
            } else {
                deviceWrite(result.error || 'Generation failed', 'error');
            }
            deviceGenBtn.disabled = false;
        });
    }

    if (deviceBuildBtn) {
        deviceBuildBtn.addEventListener('click', async () => {
            const name = document.getElementById('device-app-name').value || 'FSIApp';
            const pkg = document.getElementById('device-package').value || 'com.fsi.app';
            const activity = document.getElementById('device-activity').value || 'MainActivity';
            deviceWrite('Building APK: ' + name + '...', 'info');
            deviceWrite('First build takes 3-5 min (downloads deps)...', 'info');
            deviceBuildBtn.disabled = true;
            deviceBuildBtn.textContent = '⚙️ Building...';
            const result = await api('/api/android/build', { name, package: pkg, activity });
            if (result.success && result.apk) {
                currentApk = result.apk;
                deviceWrite('APK built: ' + result.apk, 'success');
                deviceWrite('Size: ' + (result.size_mb || '?') + ' MB', 'info');
                deviceApkStatus.textContent = 'APK ready: ' + result.apk;
                deviceVerifyBtn.disabled = false;
                deviceInstallBtn.disabled = false;
            } else {
                deviceWrite(result.error || 'Build failed', 'error');
            }
            deviceBuildBtn.disabled = false;
            deviceBuildBtn.textContent = '🔥 Build APK';
        });
    }

    if (deviceVerifyBtn) {
        deviceVerifyBtn.addEventListener('click', async () => {
            deviceVerifyBtn.disabled = true;
            deviceVerifyOutput.textContent = 'Verifying...';
            const result = await api('/api/android/verify');
            if (result.valid) {
                deviceVerifyOutput.innerHTML =
                    '✓ Valid APK\n' +
                    'Package: ' + (result.package || '—') + '\n' +
                    'Version: ' + (result.version_name || '—') + ' (' + (result.version_code || '—') + ')\n' +
                    'Min SDK: ' + (result.min_sdk || '—') + '\n' +
                    'Target SDK: ' + (result.target_sdk || '—') + '\n' +
                    'Activity: ' + (result.activity || '—') + '\n' +
                    'Size: ' + (result.size ? (result.size / 1024 / 1024).toFixed(2) + ' MB' : '—');
            } else {
                deviceVerifyOutput.textContent = '✗ ' + (result.error || 'Verification failed');
            }
            deviceVerifyBtn.disabled = false;
        });
    }

    if (deviceInstallBtn) {
        deviceInstallBtn.addEventListener('click', async () => {
            deviceInstallBtn.disabled = true;
            deviceInstallBtn.textContent = '⏳ Installing...';
            const result = await api('/api/android/install');
            if (result.success) {
                deviceVerifyOutput.textContent = '✓ Installed successfully';
            } else {
                deviceVerifyOutput.textContent = '✗ ' + (result.error || 'Install failed');
            }
            deviceInstallBtn.disabled = false;
            deviceInstallBtn.textContent = '📤 Install';
        });
    }

    setInterval(pollDevice, 10000);

    // ── Initial vault load ──
    loadVaultTree();
});