development-engine-vector 0.3.0__py3-none-any.whl

dev/ui/static/web.js

@@ -0,0 +1,528 @@
+const safeArray = arr => Array.isArray(arr) ? arr : [];
+
+// Navigation
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.nav-item').forEach(item => {
+        item.addEventListener('click', () => showPage(item.dataset.page));
+    });
+    showPage('dashboard');
+});
+
+function showPage(page) {
+    if (!PAGE_REGISTRY[page]) page = 'dashboard';
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    document.querySelector(`[data-page="${page}"]`).classList.add('active');
+    document.getElementById('main-content').innerHTML = PAGE_REGISTRY[page]();
+    initializePage(page);
+    window.scrollTo(0, 0);
+}
+
+function initializePage(page) {
+    switch (page) {
+        case 'dashboard':  initDashboard();  break;
+        case 'runs':       initRuns();       break;
+        case 'health':     initHealth();     break;
+        case 'checks':     initChecks();     break;
+        case 'manifest':   initManifest();   break;
+        case 'identity':   initIdentity();   break;
+        case 'events':     initEvents();     break;
+        case 'query':      initQuery();      break;
+        default: break;
+    }
+}
+
+// ── Dashboard ────────────────────────────────────────────────────────────────
+
+function initDashboard() {
+    const container = document.getElementById('dashboard-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading overview...';
+    fetch('/api/overview').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const s = data.stats || {};
+        const recentRuns = safeArray(data.recent_runs);
+        const passRates = safeArray(data.check_pass_rates);
+
+        const lastStatus = s.last_exit_code === 0 ? '<span class="badge badge-success">PASS</span>'
+                         : s.last_exit_code === null ? '<span class="badge badge-warning">N/A</span>'
+                         : '<span class="badge badge-danger">FAIL</span>';
+
+        const html = `
+            <div class="grid-4">
+                <div class="card">
+                    <div class="card-header">Total Runs</div>
+                    <div class="card-value">${s.total_runs || 0}</div>
+                    <div class="card-label">Vet executions</div>
+                </div>
+                <div class="card">
+                    <div class="card-header">Last Run</div>
+                    <div class="card-value" style="font-size:20px;">${lastStatus}</div>
+                    <div class="card-label">${s.last_notes || 'No runs yet'}</div>
+                </div>
+                <div class="card">
+                    <div class="card-header">Clean Runs</div>
+                    <div class="card-value">${s.clean_runs || 0}</div>
+                    <div class="card-label">Exit code 0</div>
+                </div>
+                <div class="card">
+                    <div class="card-header">Checks Active</div>
+                    <div class="card-value">${s.enabled_checks || 0}</div>
+                    <div class="card-label">Manifest files: ${(s.manifest_files || 0).toLocaleString()}</div>
+                </div>
+            </div>
+            ${passRates.length ? `
+            <div class="card mb-20">
+                <div class="card-header">Check Pass Rates</div>
+                <table class="table">
+                    <thead><tr><th>Check</th><th>Total Runs</th><th>Passed</th><th>Pass Rate</th></tr></thead>
+                    <tbody>
+                        ${passRates.map(r => `
+                            <tr>
+                                <td><strong>${r.check_name}</strong></td>
+                                <td>${r.total}</td>
+                                <td>${r.passed}</td>
+                                <td><span class="badge badge-${r.pass_rate >= 90 ? 'success' : r.pass_rate >= 70 ? 'warning' : 'danger'}">${r.pass_rate}%</span></td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>` : ''}
+            <div class="card">
+                <div class="card-header">Recent Runs</div>
+                <table class="table">
+                    <thead><tr><th>#</th><th>Started</th><th>Duration</th><th>Status</th><th>Notes</th></tr></thead>
+                    <tbody>
+                        ${recentRuns.map(r => {
+                            const started = r.started_at ? new Date(r.started_at).toLocaleString() : '—';
+                            const dur = (r.started_at && r.finished_at)
+                                ? ((new Date(r.finished_at) - new Date(r.started_at)) / 1000).toFixed(1) + 's'
+                                : '—';
+                            const badge = r.exit_code === 0 ? 'badge-success' : r.exit_code === null ? 'badge-warning' : 'badge-danger';
+                            const label = r.exit_code === 0 ? 'PASS' : r.exit_code === null ? 'RUNNING' : 'FAIL';
+                            return `
+                                <tr class="clickable run-row" data-run-id="${r.id}">
+                                    <td>${r.id}</td>
+                                    <td>${started}</td>
+                                    <td>${dur}</td>
+                                    <td><span class="badge ${badge}">${label}</span></td>
+                                    <td>${r.notes || '—'}</td>
+                                </tr>
+                            `;
+                        }).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+        document.querySelectorAll('#dashboard-content .run-row').forEach(row => {
+            row.addEventListener('click', () => openRunDrawer(+row.dataset.runId));
+        });
+    }).catch(err => {
+        container.innerHTML = '<div class="alert alert-danger">Failed to load overview.</div>';
+    });
+}
+
+// ── Runs ─────────────────────────────────────────────────────────────────────
+
+function initRuns() {
+    const container = document.getElementById('runs-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading runs...';
+    fetch('/api/runs').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const runs = safeArray(data.runs);
+        const html = `
+            <div class="card">
+                <div class="card-header">All Runs (${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>#</th><th>Started</th><th>Finished</th><th>Trigger</th><th>Status</th><th>Notes</th></tr></thead>
+                    <tbody>
+                        ${runs.map(r => {
+                            const badge = r.exit_code === 0 ? 'badge-success' : r.exit_code === null ? 'badge-warning' : 'badge-danger';
+                            const label = r.exit_code === 0 ? 'PASS' : r.exit_code === null ? 'RUNNING' : 'FAIL';
+                            return `
+                                <tr class="clickable run-row" data-run-id="${r.id}">
+                                    <td><strong>${r.id}</strong></td>
+                                    <td>${r.started_at ? new Date(r.started_at).toLocaleString() : '—'}</td>
+                                    <td>${r.finished_at ? new Date(r.finished_at).toLocaleString() : '—'}</td>
+                                    <td>${r.trigger || '—'}</td>
+                                    <td><span class="badge ${badge}">${label}</span></td>
+                                    <td>${r.notes || '—'}</td>
+                                </tr>
+                            `;
+                        }).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+        document.querySelectorAll('#runs-content .run-row').forEach(row => {
+            row.addEventListener('click', () => openRunDrawer(+row.dataset.runId));
+        });
+    });
+}
+
+// ── Run detail drawer ────────────────────────────────────────────────────────
+
+function openRunDrawer(runId) {
+    const drawer = document.getElementById('detail-drawer');
+    const titleEl = document.getElementById('drawer-run-title');
+    const subtitleEl = document.getElementById('drawer-run-subtitle');
+    const body = document.getElementById('drawer-body');
+    const tabButtons = document.querySelectorAll('.drawer-tab');
+
+    titleEl.textContent = `Run #${runId}`;
+    subtitleEl.textContent = 'Loading...';
+    body.innerHTML = '<div class="spinner"></div> Loading run details...';
+    tabButtons.forEach(btn => btn.classList.remove('active'));
+    document.querySelector('.drawer-tab[data-tab="overview"]').classList.add('active');
+    drawer.classList.add('open');
+
+    fetch('/api/run?run_id=' + runId).then(r => r.json()).then(data => {
+        if (data.error) {
+            body.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        window.currentRunDetail = data;
+        const run = data.run || {};
+        titleEl.textContent = `Run #${run.id}`;
+        subtitleEl.textContent = `${run.trigger || 'manual'} · ${run.started_at ? new Date(run.started_at).toLocaleString() : ''}`;
+        body.innerHTML = renderRunTabContent('overview', data);
+    }).catch(() => {
+        body.innerHTML = '<div class="alert alert-danger">Error loading run details.</div>';
+    });
+}
+
+function switchRunTab(tab) {
+    document.querySelectorAll('.drawer-tab').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
+    const body = document.getElementById('drawer-body');
+    if (!window.currentRunDetail) {
+        body.innerHTML = '<div class="spinner"></div>';
+        return;
+    }
+    body.innerHTML = renderRunTabContent(tab, window.currentRunDetail);
+}
+
+function renderRunTabContent(tab, data) {
+    const run = data.run || {};
+    const health = safeArray(data.health);
+
+    const badge = run.exit_code === 0 ? 'badge-success' : run.exit_code === null ? 'badge-warning' : 'badge-danger';
+    const label = run.exit_code === 0 ? 'PASS' : run.exit_code === null ? 'RUNNING' : 'FAIL';
+    const dur = (run.started_at && run.finished_at)
+        ? ((new Date(run.finished_at) - new Date(run.started_at)) / 1000).toFixed(2) + 's'
+        : '—';
+
+    const metaSection = `
+        <div class="drawer-section">
+            <h3>Run Metadata</h3>
+            <div class="session-panel">
+                ${[
+                    ['Run ID', run.id],
+                    ['Trigger', run.trigger || '—'],
+                    ['Started', run.started_at ? new Date(run.started_at).toLocaleString() : '—'],
+                    ['Finished', run.finished_at ? new Date(run.finished_at).toLocaleString() : '—'],
+                    ['Duration', dur],
+                    ['Status', `<span class="badge ${badge}">${label}</span>`],
+                    ['Notes', run.notes || '—'],
+                ].map(([lbl, val]) => `
+                    <div class="data-row">
+                        <div class="data-label">${lbl}</div>
+                        <div class="data-value">${val}</div>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `;
+
+    if (tab === 'overview') {
+        const checksHtml = health.length
+            ? `<table class="table">
+                <thead><tr><th>Check</th><th>Result</th></tr></thead>
+                <tbody>
+                    ${health.map(h => `
+                        <tr>
+                            <td><strong>${h.check_name}</strong></td>
+                            <td><span class="badge ${h.passed ? 'badge-success' : 'badge-danger'}">${h.passed ? 'PASS' : 'FAIL'}</span></td>
+                        </tr>
+                    `).join('')}
+                </tbody>
+               </table>`
+            : '<div class="alert alert-info">No health records for this run.</div>';
+        return `
+            ${metaSection}
+            <div class="drawer-section">
+                <h3>Check Results (${health.length})</h3>
+                ${checksHtml}
+            </div>
+        `;
+    }
+
+    if (tab === 'output') {
+        const outputHtml = health.length
+            ? health.map(h => `
+                <div class="drawer-section">
+                    <h3>${h.check_name} — <span class="badge ${h.passed ? 'badge-success' : 'badge-danger'}">${h.passed ? 'PASS' : 'FAIL'}</span></h3>
+                    <pre class="code-block" style="white-space:pre-wrap;word-break:break-word;">${(h.message || 'ok').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
+                </div>
+            `).join('')
+            : '<div class="alert alert-info">No output recorded.</div>';
+        return outputHtml;
+    }
+
+    if (tab === 'raw') {
+        return `
+            <div class="drawer-section">
+                <h3>Raw Payload</h3>
+                <pre class="code-block" style="white-space:pre-wrap;word-break:break-word;">${JSON.stringify(data, null, 2).replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
+            </div>
+        `;
+    }
+
+    return '<p>Tab content unavailable.</p>';
+}
+
+function closeRunDrawer() {
+    document.getElementById('detail-drawer').classList.remove('open');
+}
+
+// ── Health ───────────────────────────────────────────────────────────────────
+
+function initHealth() {
+    const container = document.getElementById('health-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading health records...';
+    fetch('/api/health').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const rows = safeArray(data.health);
+        const html = `
+            <div class="card">
+                <div class="card-header">Health Records (${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>Run</th><th>Check</th><th>Result</th><th>Run At</th><th>Message</th></tr></thead>
+                    <tbody>
+                        ${rows.map(h => `
+                            <tr>
+                                <td>${h.run_id || '—'}</td>
+                                <td><strong>${h.check_name}</strong></td>
+                                <td><span class="badge ${h.passed ? 'badge-success' : 'badge-danger'}">${h.passed ? 'PASS' : 'FAIL'}</span></td>
+                                <td>${h.run_at ? new Date(h.run_at).toLocaleString() : '—'}</td>
+                                <td class="truncate">${(h.message || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+    });
+}
+
+// ── Checks ───────────────────────────────────────────────────────────────────
+
+function initChecks() {
+    const container = document.getElementById('checks-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading checks...';
+    fetch('/api/checks').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const rows = safeArray(data.checks);
+        const html = `
+            <div class="card">
+                <div class="card-header">Check Definitions (${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>Name</th><th>Kind</th><th>Command</th><th>Timeout</th><th>Enabled</th></tr></thead>
+                    <tbody>
+                        ${rows.map(c => `
+                            <tr>
+                                <td><strong>${c.name}</strong></td>
+                                <td>${c.kind}</td>
+                                <td class="truncate"><code>${c.command}</code></td>
+                                <td>${c.timeout}s</td>
+                                <td><span class="badge ${c.enabled ? 'badge-success' : 'badge-warning'}">${c.enabled ? 'ON' : 'OFF'}</span></td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+    });
+}
+
+// ── Manifest ─────────────────────────────────────────────────────────────────
+
+function initManifest() {
+    loadManifest('');
+    const input = document.getElementById('manifest-search');
+    if (input) {
+        input.addEventListener('keypress', e => { if (e.key === 'Enter') loadManifest(input.value); });
+    }
+}
+
+function loadManifest(q) {
+    const container = document.getElementById('manifest-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading manifest...';
+    fetch('/api/manifest?q=' + encodeURIComponent(q)).then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const files = safeArray(data.files);
+        const html = `
+            <div class="card">
+                <div class="card-header">Files (showing ${files.length} of ${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>Path</th><th>Type</th><th>Size</th><th>Tracked</th></tr></thead>
+                    <tbody>
+                        ${files.map(f => `
+                            <tr>
+                                <td class="truncate">${f.relative_path}</td>
+                                <td>${f.file_type || f.extension || '—'}</td>
+                                <td>${f.size_bytes ? (f.size_bytes / 1024).toFixed(1) + ' KB' : '—'}</td>
+                                <td><span class="badge ${f.is_tracked ? 'badge-success' : 'badge-warning'}">${f.is_tracked ? 'YES' : 'NO'}</span></td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+    });
+}
+
+// ── Identity ─────────────────────────────────────────────────────────────────
+
+function initIdentity() {
+    const container = document.getElementById('identity-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading identity...';
+    fetch('/api/identity').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const rows = safeArray(data.identity);
+        const html = `
+            <div class="card">
+                <div class="card-header">Identity Records (${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>Key</th><th>Value</th><th>Updated</th></tr></thead>
+                    <tbody>
+                        ${rows.map(r => `
+                            <tr>
+                                <td><strong>${r.key}</strong></td>
+                                <td class="truncate">${r.value !== null && r.value !== undefined ? String(r.value).replace(/</g, '&lt;') : '—'}</td>
+                                <td>${r.updated_at ? new Date(r.updated_at).toLocaleDateString() : '—'}</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+        container.innerHTML = html;
+    });
+}
+
+// ── Events ───────────────────────────────────────────────────────────────────
+
+function initEvents() {
+    const container = document.getElementById('events-content');
+    if (!container) return;
+    container.innerHTML = '<div class="spinner"></div> Loading events...';
+    fetch('/api/events').then(r => r.json()).then(data => {
+        if (data.error) {
+            container.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const rows = safeArray(data.events);
+        const html = rows.length
+            ? `<div class="card">
+                <div class="card-header">Events (${data.total || 0})</div>
+                <table class="table">
+                    <thead><tr><th>When</th><th>Kind</th><th>Actor</th><th>Subject</th><th>Detail</th></tr></thead>
+                    <tbody>
+                        ${rows.map(e => `
+                            <tr>
+                                <td>${e.occurred_at ? new Date(e.occurred_at).toLocaleString() : '—'}</td>
+                                <td><span class="badge badge-info">${e.kind}</span></td>
+                                <td>${e.actor || '—'}</td>
+                                <td class="truncate">${e.subject || '—'}</td>
+                                <td class="truncate">${(e.detail || '').replace(/</g, '&lt;')}</td>
+                            </tr>
+                        `).join('')}
+                    </tbody>
+                </table>
+               </div>`
+            : '<div class="card"><p class="text-muted">No events recorded yet.</p></div>';
+        container.innerHTML = html;
+    });
+}
+
+// ── Query ─────────────────────────────────────────────────────────────────────
+
+function initQuery() {
+    const results = document.getElementById('query-results');
+    if (results) results.classList.add('hidden');
+}
+
+function executeQuery() {
+    const sql = document.getElementById('query-input').value;
+    if (!sql) return alert('Enter a SQL query');
+    const results = document.getElementById('query-results');
+    if (!results) return;
+    results.classList.remove('hidden');
+    results.innerHTML = '<div class="spinner"></div> Running query...';
+    fetch('/api/query', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({sql}),
+    }).then(r => r.json()).then(data => {
+        if (data.error) {
+            results.innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>';
+            return;
+        }
+        const rows = data.rows || [];
+        if (!rows.length) {
+            results.innerHTML = '<div class="card"><p class="text-muted">No rows returned.</p></div>';
+            return;
+        }
+        let html = '<div class="card"><table class="table"><thead><tr>';
+        Object.keys(rows[0]).forEach(k => { html += '<th>' + k + '</th>'; });
+        html += '</tr></thead><tbody>';
+        rows.forEach(row => {
+            html += '<tr>';
+            Object.values(row).forEach(v => { html += '<td class="truncate">' + (v !== null && v !== undefined ? String(v).replace(/</g, '&lt;') : '') + '</td>'; });
+            html += '</tr>';
+        });
+        html += '</tbody></table></div>';
+        results.innerHTML = html;
+    });
+}
+
+// ── Vet action ────────────────────────────────────────────────────────────────
+
+function runVet() {
+    const status = document.getElementById('vet-status');
+    if (status) { status.classList.remove('hidden'); document.getElementById('vet-text').textContent = 'Running vet...'; }
+    fetch('/api/action', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({action: 'vet'}),
+    }).then(r => r.json()).then(data => {
+        if (status) document.getElementById('vet-text').textContent = data.message || 'Vet started.';
+    });
+}