{% extends "base.html" %}
{% block title %}{{ app_name }} — Bayesian Autoresearch{% endblock %}
{% block content %}

<h1>Bayesian Autoresearch</h1>

<div class="intro-panel">
    <p>Autonomous experiment engine inspired by Karpathy's Autoresearch, guided by Bayesian Teaching Intelligence.
    The system picks the most informative experiment, executes it time-boxed, measures the metric delta, and keeps or discards via git.</p>
</div>

<!-- Stat Grid -->
<div class="stat-grid" id="ar-stats">
    <div class="stat-card">
        <div class="stat-value" id="ar-total">--</div>
        <div class="stat-label">Total Experiments</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="ar-rate">--%</div>
        <div class="stat-label">Acceptance Rate</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="ar-domains">--</div>
        <div class="stat-label">Active Domains</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="ar-best">--%</div>
        <div class="stat-label">Best Improvement</div>
    </div>
</div>

<!-- Experiments Table -->
<div class="section-card">
    <h2>Experiment Results</h2>
    <div class="table-container">
        <table class="data-table" id="ar-experiments-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Domain</th>
                    <th>Category</th>
                    <th>Hypothesis</th>
                    <th>Pre</th>
                    <th>Post</th>
                    <th>Delta</th>
                    <th>Decision</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody id="ar-experiments-body">
                <tr><td colspan="9" style="text-align:center; color:#666;">No experiments yet. Run <code>python tools/autoresearch/experiment_engine.py --loop --domain compliance --json</code> to start.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Configuration -->
<div class="section-card">
    <h2>Experiment Domains</h2>
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Domain</th>
                    <th>Metric</th>
                    <th>Direction</th>
                    <th>Keep Threshold</th>
                    <th>Time Budget</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>compliance</td><td>gate_pass_rate</td><td>maximize</td><td>1%</td><td>5 min</td></tr>
                <tr><td>code_quality</td><td>maintainability_score</td><td>maximize</td><td>0.5%</td><td>5 min</td></tr>
                <tr><td>security</td><td>inverse_vulnerability_density</td><td>maximize</td><td>0.5%</td><td>5 min</td></tr>
                <tr><td>rag_quality</td><td>retrieval_relevance@5</td><td>maximize</td><td>1%</td><td>5 min</td></tr>
                <tr><td>pulse_quality</td><td>writeguard_score</td><td>maximize</td><td>2%</td><td>3 min</td></tr>
                <tr><td>skill_quality</td><td>assertion_pass_rate</td><td>maximize</td><td>1%</td><td>5 min</td></tr>
            </tbody>
        </table>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function() {
    function loadStats() {
        fetch('/api/autoresearch/summary')
            .then(r => r.json())
            .then(data => {
                document.getElementById('ar-total').textContent = data.total_experiments || 0;
                document.getElementById('ar-rate').textContent = (data.acceptance_rate || 0) + '%';
                document.getElementById('ar-domains').textContent = data.active_domains || 0;
                document.getElementById('ar-best').textContent = (data.best_improvement || 0) + '%';
            })
            .catch(() => {});
    }

    function loadExperiments() {
        fetch('/api/autoresearch/experiments')
            .then(r => r.json())
            .then(data => {
                const tbody = document.getElementById('ar-experiments-body');
                if (!data.experiments || data.experiments.length === 0) return;
                tbody.innerHTML = '';
                data.experiments.forEach(exp => {
                    const tr = document.createElement('tr');
                    const decision_class = exp.decision === 'keep' ? 'color:#28a745;font-weight:600' : 'color:#dc3545';
                    tr.innerHTML = `
                        <td>${(exp.id || '').substring(0, 12)}</td>
                        <td>${exp.domain || ''}</td>
                        <td>${exp.category || '-'}</td>
                        <td title="${exp.hypothesis || ''}">${(exp.hypothesis || '').substring(0, 60)}${(exp.hypothesis || '').length > 60 ? '...' : ''}</td>
                        <td>${exp.pre_metric != null ? exp.pre_metric.toFixed(4) : '-'}</td>
                        <td>${exp.post_metric != null ? exp.post_metric.toFixed(4) : '-'}</td>
                        <td>${exp.metric_delta != null ? (exp.metric_delta >= 0 ? '+' : '') + exp.metric_delta.toFixed(4) : '-'}</td>
                        <td style="${decision_class}">${exp.decision || '-'}</td>
                        <td>${exp.created_at ? new Date(exp.created_at).toLocaleDateString() : '-'}</td>
                    `;
                    tbody.appendChild(tr);
                });
            })
            .catch(() => {});
    }

    loadStats();
    loadExperiments();
    setInterval(loadStats, 30000);
})();
</script>
{% endblock %}