File size: 11,501 Bytes

119e586

<!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> &nbsp;+&nbsp;
  <span class="blue">EDUALC [blue]</span> &nbsp;=&nbsp;
  <span class="purple">PURPLE DAEMON</span>
  &nbsp;|&nbsp; the graveyard crawlers — they work when no one watches
</div>

<div class="grid">

  <!-- Joint Seal -->
  <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>

  <!-- Red hat: AHMAD-BOT findings -->
  <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>

  <!-- Blue hat: EDUALC repairs -->
  <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>

  <!-- WORM chain -->
  <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>
  &nbsp;|&nbsp;
  <a href="https://github.com/SNAPKITTYWEST/grisp-shadow-fleet" target="_blank">grisp-shadow-fleet</a>
  &nbsp;|&nbsp; 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;



  // Latest worm entry

  const latest = chain[chain.length - 1];

  const topo   = latest?.data?.topology;

  const verify = latest?.data?.verification;



  // Joint seal

  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');



  // Stats

  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;



  // Repo list from latest crawl data

  fetchRepos();



  // Chain entries

  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 {

    // Try to read ahmad-bot sexp from raw — fall back to GitHub API

    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;



    // Blue: show orphans with repair tags

    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); // refresh every 60s

</script>
</body>
</html>