| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>AGENTIC ARENA — The Graveyard</title>
|
| <style>
|
| :root {
|
| --red: #ff4444;
|
| --blue: #4488ff;
|
| --purple: #aa44ff;
|
| --green: #44ff88;
|
| --yellow: #ffcc44;
|
| --dim: #444466;
|
| --bg: #0a0a0f;
|
| --panel: #0f0f1a;
|
| --border: #222244;
|
| }
|
| * { margin: 0; padding: 0; box-sizing: border-box; }
|
| body {
|
| background: var(--bg);
|
| color: #ccd;
|
| font-family: 'Courier New', monospace;
|
| font-size: 13px;
|
| min-height: 100vh;
|
| }
|
| .banner {
|
| text-align: center;
|
| padding: 24px 16px 8px;
|
| color: var(--purple);
|
| font-size: 11px;
|
| line-height: 1.3;
|
| white-space: pre;
|
| text-shadow: 0 0 20px var(--purple);
|
| }
|
| .subtitle {
|
| text-align: center;
|
| padding: 4px 0 20px;
|
| font-size: 12px;
|
| }
|
| .subtitle .red { color: var(--red); }
|
| .subtitle .blue { color: var(--blue); }
|
| .subtitle .purple { color: var(--purple); }
|
|
|
| .grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 16px;
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| padding: 0 16px 16px;
|
| }
|
| @media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
|
|
|
| .panel {
|
| background: var(--panel);
|
| border: 1px solid var(--border);
|
| border-radius: 4px;
|
| padding: 16px;
|
| }
|
| .panel-title {
|
| font-size: 11px;
|
| letter-spacing: 2px;
|
| text-transform: uppercase;
|
| margin-bottom: 12px;
|
| padding-bottom: 8px;
|
| border-bottom: 1px solid var(--border);
|
| }
|
| .panel-title.red { color: var(--red); }
|
| .panel-title.blue { color: var(--blue); }
|
| .panel-title.purple { color: var(--purple); }
|
| .panel-title.green { color: var(--green); }
|
|
|
| .stat-row {
|
| display: flex;
|
| justify-content: space-between;
|
| padding: 4px 0;
|
| border-bottom: 1px solid #111122;
|
| }
|
| .stat-label { color: #889; }
|
| .stat-val { font-weight: bold; }
|
|
|
| .repo-list { list-style: none; }
|
| .repo-item {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 5px 0;
|
| border-bottom: 1px solid #111122;
|
| font-size: 12px;
|
| }
|
| .repo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
| .repo-name a { color: #aab; text-decoration: none; }
|
| .repo-name a:hover { color: #fff; }
|
| .gravity-bar {
|
| width: 60px;
|
| height: 6px;
|
| background: #1a1a2e;
|
| border-radius: 3px;
|
| margin: 0 8px;
|
| overflow: hidden;
|
| flex-shrink: 0;
|
| }
|
| .gravity-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
|
| .badge {
|
| font-size: 10px;
|
| padding: 2px 6px;
|
| border-radius: 3px;
|
| flex-shrink: 0;
|
| }
|
| .badge.alive { background: #003320; color: var(--green); }
|
| .badge.broken { background: #332200; color: var(--yellow); }
|
| .badge.orphan { background: #1a0020; color: var(--dim); }
|
|
|
| .chain-entry {
|
| padding: 6px 0;
|
| border-bottom: 1px solid #111122;
|
| font-size: 11px;
|
| }
|
| .chain-hash { color: var(--purple); font-size: 10px; }
|
| .chain-agent { color: var(--blue); }
|
| .chain-ts { color: var(--dim); font-size: 10px; }
|
|
|
| .seal-box {
|
| background: #080814;
|
| border: 1px solid var(--purple);
|
| border-radius: 4px;
|
| padding: 12px;
|
| text-align: center;
|
| margin-bottom: 16px;
|
| }
|
| .seal-label { color: var(--dim); font-size: 10px; letter-spacing: 2px; }
|
| .seal-value { color: var(--purple); font-size: 14px; margin-top: 4px; text-shadow: 0 0 10px var(--purple); }
|
|
|
| .full-width { grid-column: 1 / -1; }
|
|
|
| .loading { color: var(--dim); text-align: center; padding: 20px; }
|
| .error { color: var(--red); text-align: center; padding: 20px; }
|
|
|
| .pulse {
|
| animation: pulse 2s infinite;
|
| }
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.4; }
|
| }
|
|
|
| .footer {
|
| text-align: center;
|
| padding: 16px;
|
| color: var(--dim);
|
| font-size: 11px;
|
| border-top: 1px solid var(--border);
|
| margin-top: 8px;
|
| }
|
| .footer a { color: var(--purple); text-decoration: none; }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <div class="banner"> ░█████╗░░██████╗░███████╗███╗░░██╗████████╗██╗░█████╗░
|
| ██╔══██╗██╔════╝░██╔════╝████╗░██║╚══██╔══╝██║██╔══██╗
|
| ███████║██║░░██╗░█████╗░░██╔██╗██║░░░██║░░░██║██║░░╚═╝
|
| ██╔══██║██║░░╚██╗██╔══╝░░██║╚████║░░░██║░░░██║██║░░██╗
|
| ██║░░██║╚██████╔╝███████╗██║░╚███║░░░██║░░░██║╚█████╔╝
|
| ╚═╝░░╚═╝░╚═════╝░╚══════╝╚═╝░░╚══╝░░░╚═╝░░░╚═╝░╚════╝</div>
|
|
|
| <div class="subtitle">
|
| <span class="red">AHMAD-BOT [red]</span> +
|
| <span class="blue">EDUALC [blue]</span> =
|
| <span class="purple">PURPLE DAEMON</span>
|
| | the graveyard crawlers — they work when no one watches
|
| </div>
|
|
|
| <div class="grid">
|
|
|
|
|
| <div class="panel full-width">
|
| <div id="seal-box" class="seal-box">
|
| <div class="seal-label">JOINT SEAL — BOTH CHAINS RECONCILED</div>
|
| <div id="joint-seal" class="seal-value pulse">loading...</div>
|
| </div>
|
| <div id="stats-row" style="display:flex;gap:24px;flex-wrap:wrap;justify-content:center"></div>
|
| </div>
|
|
|
|
|
| <div class="panel">
|
| <div class="panel-title red">⬤ AHMAD-BOT — graveyard map</div>
|
| <ul id="repo-list-red" class="repo-list">
|
| <li class="loading">crawling...</li>
|
| </ul>
|
| </div>
|
|
|
|
|
| <div class="panel">
|
| <div class="panel-title blue">⬤ EDUALC — restoration queue</div>
|
| <ul id="repo-list-blue" class="repo-list">
|
| <li class="loading">restoring...</li>
|
| </ul>
|
| </div>
|
|
|
|
|
| <div class="panel full-width">
|
| <div class="panel-title purple">♾ WORM CHAIN — append-only sealed record</div>
|
| <div id="chain-entries"><div class="loading">loading chain...</div></div>
|
| </div>
|
|
|
| </div>
|
|
|
| <div class="footer">
|
| <a href="https://github.com/SNAPKITTYWEST/agentic-arena" target="_blank">SNAPKITTYWEST/agentic-arena</a>
|
| |
|
| <a href="https://github.com/SNAPKITTYWEST/grisp-shadow-fleet" target="_blank">grisp-shadow-fleet</a>
|
| | chain grows nightly at 02:00 UTC
|
| </div>
|
|
|
| <script>
|
| const ORG = 'SNAPKITTYWEST';
|
| const REPO = 'agentic-arena';
|
| const RAW = `https://raw.githubusercontent.com/${ORG}/${REPO}/master`;
|
|
|
| async function load() {
|
| try {
|
| const r = await fetch(`${RAW}/worm/scoreboard.json?t=${Date.now()}`);
|
| const board = await r.json();
|
| renderBoard(board);
|
| } catch(e) {
|
| document.getElementById('joint-seal').textContent = 'chain not yet populated';
|
| document.getElementById('joint-seal').classList.remove('pulse');
|
| }
|
| }
|
|
|
| function gravityColor(g) {
|
| if (g >= 0.6) return '#44ff88';
|
| if (g >= 0.3) return '#ffcc44';
|
| return '#443355';
|
| }
|
|
|
| function statusBadge(g) {
|
| if (g >= 0.6) return '<span class="badge alive">alive</span>';
|
| if (g >= 0.3) return '<span class="badge broken">broken</span>';
|
| return '<span class="badge orphan">orphan</span>';
|
| }
|
|
|
| function renderBoard(board) {
|
| const chain = board.chain ?? [];
|
| if (!chain.length) return;
|
|
|
|
|
| const latest = chain[chain.length - 1];
|
| const topo = latest?.data?.topology;
|
| const verify = latest?.data?.verification;
|
|
|
|
|
| const seal = verify?.joint_seal ?? latest?.data?.topology?.joint_seal ?? latest?.hash ?? '—';
|
| document.getElementById('joint-seal').textContent = seal;
|
| document.getElementById('joint-seal').classList.remove('pulse');
|
|
|
|
|
| const bobEntries = chain.filter(e => e.agent === 'BENEVOLENT-WORM').length;
|
| const statsHtml = [
|
| ['chain entries', chain.length],
|
| ['worm runs', bobEntries],
|
| ['checks passed', verify ? `${verify.checks?.filter(c=>c.pass).length}/${verify.checks?.length}` : '—'],
|
| ['repairs found', latest?.data?.repairs?.length ?? 0],
|
| ].map(([k,v]) => `<div class="stat-row" style="flex-direction:column;align-items:center;min-width:100px">
|
| <span class="stat-label">${k}</span>
|
| <span class="stat-val" style="color:var(--purple)">${v}</span>
|
| </div>`).join('');
|
| document.getElementById('stats-row').innerHTML = statsHtml;
|
|
|
|
|
| fetchRepos();
|
|
|
|
|
| const chainHtml = [...chain].reverse().slice(0, 20).map(e => `
|
| <div class="chain-entry">
|
| <div><span class="chain-agent">[${e.agent ?? 'BOB'}]</span>
|
| <span class="chain-ts"> ${new Date(e.ts).toISOString().replace('T',' ').slice(0,19)} UTC</span></div>
|
| <div class="chain-hash">${e.hash}</div>
|
| ${e.data?.summary ? `<div style="color:#889;font-size:10px;margin-top:2px">${e.data.summary}</div>` : ''}
|
| </div>
|
| `).join('');
|
| document.getElementById('chain-entries').innerHTML = chainHtml || '<div class="loading">no entries yet</div>';
|
| }
|
|
|
| async function fetchRepos() {
|
| try {
|
|
|
| const res = await fetch(`https://api.github.com/users/${ORG}/repos?per_page=100&sort=pushed`);
|
| const repos = await res.json();
|
|
|
| if (!Array.isArray(repos)) return;
|
|
|
| const scored = repos.map(r => {
|
| const g = Math.min((r.size / 1000), 1.0);
|
| return { name: r.name, url: r.html_url, gravity: g, pushed: r.pushed_at };
|
| }).sort((a,b) => b.gravity - a.gravity);
|
|
|
| const alive = scored.filter(r => r.gravity >= 0.6);
|
| const broken = scored.filter(r => r.gravity >= 0.3 && r.gravity < 0.6);
|
| const orphans = scored.filter(r => r.gravity < 0.3);
|
|
|
| const redHtml = [...alive, ...broken, ...orphans].map(r => `
|
| <li class="repo-item">
|
| <span class="repo-name"><a href="${r.url}" target="_blank">${r.name}</a></span>
|
| <div class="gravity-bar"><div class="gravity-fill" style="width:${(r.gravity*100).toFixed(0)}%;background:${gravityColor(r.gravity)}"></div></div>
|
| ${statusBadge(r.gravity)}
|
| </li>
|
| `).join('');
|
|
|
| document.getElementById('repo-list-red').innerHTML = redHtml;
|
|
|
|
|
| const blueHtml = orphans.map(r => `
|
| <li class="repo-item">
|
| <span class="repo-name"><a href="${r.url}" target="_blank">${r.name}</a></span>
|
| <span style="color:var(--blue);font-size:10px">→ PR #1 open</span>
|
| </li>
|
| `).join('') || '<li class="loading">no orphans — graveyard clean</li>';
|
|
|
| document.getElementById('repo-list-blue').innerHTML = blueHtml;
|
|
|
| } catch(e) {
|
| document.getElementById('repo-list-red').innerHTML = '<li class="error">GitHub API rate limited — run crawl locally</li>';
|
| }
|
| }
|
|
|
| load();
|
| setInterval(load, 60000);
|
| </script>
|
| </body>
|
| </html>
|
|
|
