File size: 7,792 Bytes

662ceed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>agents · holy-agents</title>
<style>

*{margin:0;padding:0;box-sizing:border-box}

body{background:#0a0a0a;color:#b0b0b0;font-family:'Courier New',monospace;min-height:100vh}

.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #1a1a1a}

.nav-brand{color:#e0e0e0;font-size:14px;letter-spacing:2px}

.nav-links a{color:#555;text-decoration:none;margin-left:16px;font-size:11px}

.nav-links a:hover,.nav-links a.active{color:#e0e0e0}

.container{max-width:900px;margin:0 auto;padding:32px 20px}

h1{color:#e0e0e0;font-size:18px;margin-bottom:8px}

p{color:#555;font-size:12px;margin-bottom:24px}

.query-box{display:flex;gap:8px;margin-bottom:24px}

.query-input{flex:1;background:#111;border:1px solid #1a1a1a;color:#e0e0e0;padding:12px 16px;font-family:'Courier New',monospace;font-size:14px;outline:none}

.query-input:focus{border-color:#333}

.btn{background:#1a1a1a;border:1px solid #333;color:#e0e0e0;padding:12px 24px;font-family:'Courier New',monospace;font-size:12px;cursor:pointer;text-transform:uppercase;letter-spacing:1px}

.btn:hover{background:#222}

.pipeline-canvas{border:1px solid #1a1a1a;margin-bottom:16px}

.agent-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}

.agent-card{border:1px solid #1a1a1a;padding:16px;text-align:center}

.agent-card.active{border-color:#4a9}

.agent-emoji{font-size:24px;margin-bottom:4px}

.agent-name{color:#e0e0e0;font-size:11px;font-weight:bold}

.agent-zone{color:#444;font-size:9px;margin-top:2px}

.agent-status{font-size:9px;margin-top:4px;color:#555}

.event-log{border:1px solid #1a1a1a;max-height:300px;overflow-y:auto;padding:12px}

.event{padding:4px 0;border-bottom:1px solid #0a0a0a;font-size:10px}

.event:last-child{border-bottom:none}

.event .time{color:#333}

.event .agent{font-weight:bold}

.event .scribe{color:#4a9}

.event .judge{color:#a84}

.event .prophet{color:#a44}

.event .sentinel{color:#44a}

.event .ledge{color:#888}

</style>
</head>
<body>
<nav class="nav">
  <div class="nav-brand">holy-agents</div>
  <div class="nav-links">
    <a href="index.html">home</a>
    <a href="query.html">query</a>
    <a href="twins.html">twins</a>
    <a href="agents.html" class="active">agents</a>
    <a href="geometry.html">geometry</a>
    <a href="debate.html">debate</a>
    <a href="repl.html">repl</a>
  </div>
</nav>
<div class="container">
  <h1>Agent Pipeline</h1>
  <p>Watch agents animate through the pipeline as each query runs.</p>

  <div class="query-box">
    <input class="query-input" id="query" placeholder="What is covenant?" />
    <button class="btn" id="run-btn">Run Pipeline</button>
  </div>

  <canvas class="pipeline-canvas" id="pipeline" width="860" height="160"></canvas>

  <div class="agent-grid">
    <div class="agent-card" id="card-scribe"><div class="agent-emoji">🔍📖</div><div class="agent-name">SCRIBE</div><div class="agent-zone">Library</div><div class="agent-status" id="status-scribe">idle</div></div>
    <div class="agent-card" id="card-judge"><div class="agent-emoji">⚖️🧠</div><div class="agent-name">JUDGE</div><div class="agent-zone">Court</div><div class="agent-status" id="status-judge">idle</div></div>
    <div class="agent-card" id="card-prophet"><div class="agent-emoji">🔥</div><div class="agent-name">PROPHET</div><div class="agent-zone">Forge</div><div class="agent-status" id="status-prophet">idle</div></div>
    <div class="agent-card" id="card-sentinel"><div class="agent-emoji">🛡️</div><div class="agent-name">SENTINEL</div><div class="agent-zone">Sentinel Gate</div><div class="agent-status" id="status-sentinel">idle</div></div>
    <div class="agent-card" id="card-ledge"><div class="agent-emoji">🧾🔐</div><div class="agent-name">LEDGE</div><div class="agent-zone">Ledger Vault</div><div class="agent-status" id="status-ledge">idle</div></div>
  </div>

  <div class="event-log" id="event-log"></div>
</div>

<script>

const canvas = document.getElementById('pipeline');

const ctx = canvas.getContext('2d');

const agentPositions = [

  { name: 'scribe', x: 80, y: 80, emoji: '🔍📖', color: '#4a9' },

  { name: 'judge', x: 240, y: 80, emoji: '⚖️🧠', color: '#a84' },

  { name: 'prophet', x: 400, y: 80, emoji: '🔥', color: '#a44' },

  { name: 'sentinel', x: 560, y: 80, emoji: '🛡️', color: '#44a' },

  { name: 'ledge', x: 720, y: 80, emoji: '🧾🔐', color: '#888' }

];

let activeAgent = -1;

let particles = [];

let logEntries = [];



function drawPipeline() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.strokeStyle = '#1a1a1a';

  ctx.beginPath();

  ctx.moveTo(80, 80);

  ctx.lineTo(720, 80);

  ctx.stroke();



  agentPositions.forEach((a, i) => {

    ctx.fillStyle = i === activeAgent ? a.color : '#1a1a1a';

    ctx.beginPath();

    ctx.arc(a.x, a.y, 20, 0, Math.PI * 2);

    ctx.fill();

    ctx.font = '16px serif';

    ctx.textAlign = 'center';

    ctx.fillStyle = '#fff';

    ctx.fillText(a.emoji, a.x, a.y + 6);

    ctx.font = '9px Courier New';

    ctx.fillStyle = i === activeAgent ? a.color : '#555';

    ctx.fillText(a.name, a.x, a.y + 35);

  });



  particles = particles.filter(p => p.life > 0);

  particles.forEach(p => {

    p.x += p.vx; p.y += p.vy; p.life--;

    ctx.globalAlpha = p.life / p.maxLife;

    ctx.fillStyle = p.color;

    ctx.fillRect(p.x, p.y, 2, 2);

  });

  ctx.globalAlpha = 1;

  requestAnimationFrame(drawPipeline);

}

drawPipeline();



function activateAgent(index) {

  activeAgent = index;

  const a = agentPositions[index];

  document.querySelectorAll('.agent-card').forEach(c => c.classList.remove('active'));

  document.getElementById(`card-${a.name}`).classList.add('active');

  document.getElementById(`status-${a.name}`).textContent = 'running';

  document.getElementById(`status-${a.name}`).style.color = a.color;



  if (index > 0) {

    const prev = agentPositions[index - 1];

    for (let i = 0; i < 5; i++) {

      particles.push({

        x: prev.x, y: prev.y,

        vx: (a.x - prev.x) / 30 + (Math.random() - 0.5) * 2,

        vy: (a.y - prev.y) / 30 + (Math.random() - 0.5) * 2,

        life: 30, maxLife: 30, color: a.color

      });

    }

  }



  addLog(a.name.toUpperCase(), `pipeline stage active`);

}



function addLog(agent, message) {

  const time = new Date().toLocaleTimeString();

  const cls = agent.toLowerCase();

  logEntries.unshift({ time, agent, message, cls });

  if (logEntries.length > 50) logEntries.pop();

  const el = document.getElementById('event-log');

  el.innerHTML = logEntries.map(e =>

    `<div class="event"><span class="time">[${e.time}]</span> <span class="agent ${e.cls}">${e.agent}</span> ${e.message}</div>`

  ).join('');

}



async function runPipeline() {

  const query = document.getElementById('query').value.trim() || 'What is covenant?';

  addLog('SYSTEM', `pipeline started: "${query}"`);



  for (let i = 0; i < agentPositions.length; i++) {

    await new Promise(r => setTimeout(r, 600));

    activateAgent(i);

  }



  await new Promise(r => setTimeout(r, 400));

  activeAgent = -1;

  agentPositions.forEach(a => {

    document.getElementById(`status-${a.name}`).textContent = 'complete';

    document.getElementById(`status-${a.name}`).style.color = '#4a9';

  });

  addLog('SYSTEM', 'pipeline complete — verdict: approve');

}



document.getElementById('run-btn').addEventListener('click', runPipeline);

document.getElementById('query').addEventListener('keydown', e => { if (e.key === 'Enter') runPipeline(); });

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