web/orchestrator.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Orchestrator — HyperKitty</title>
  <style>
    body { background: #050507; color: #9effa7; font-family: monospace; padding: 16px; }
    h1 { color: #7cffb2; margin-bottom: 4px; }
    .sub { color: #555; font-size: 12px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 16px 0; }
    .card { border: 1px solid #1e1e26; background: #0c0c10; padding: 12px; border-radius: 10px; transition: border-color 0.2s; }
    .card.active { border-color: #00ff88; }
    .card.absorbed { border-color: #ff4444; opacity: 0.6; }
    .card b { display: block; color: #fff; margin-bottom: 6px; }
    .on { color: #0f0; } .off { color: #555; } .abs { color: #ff6666; }
    .meta { font-size: 11px; margin-top: 8px; color: #666; line-height: 1.6; }
    input { padding: 10px; background: #111; color: #0f0; border: 1px solid #333; width: 320px; margin-top: 10px; border-radius: 6px; }
    .controls { margin: 12px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    button { padding: 8px 16px; background: #1a2a1a; color: #7cffb2; border: 1px solid #2a4a2a; border-radius: 6px; cursor: pointer; font-family: monospace; }
    button:hover { background: #2a3a2a; }
    #iso-panel { background: #0a0a0f; border: 1px solid #1e1e26; padding: 12px; border-radius: 8px; margin-bottom: 16px; font-size: 12px; line-height: 1.8; }
    .valid { color: #00ff88; } .invalid { color: #ff4444; }
  </style>
</head>
<body>
  <h1>🐱 HyperKitty Fleet Orchestrator — 16 Agents A-P</h1>
  <p class="sub" id="wasm-status">Loading WASM...</p>

  <div id="iso-panel">Initializing isomorphism check...</div>

  <div class="controls">
    <div>
      OpenRouter Key: <input id="key" placeholder="sk-or-v1-..." type="password">
    </div>
    <button onclick="stepAll()">▶ Step All Agents</button>
    <button onclick="resetAll()">↺ Reset</button>
  </div>

  <div class="grid" id="grid"></div>

  <script type="module">
    import init, {
      qra_next, glyph_name_for, glyph_wire_byte,
      reconcile_all_json, validate_isomorphism,
      qra_validate_exhaustion, agent_route
    } from './pkg/hyperkitty_wasm.js';

    const GLYPH_NAMES = ['Pi','Gamma','Delta','Omega','Lambda','Psi'];
    const GLYPH_COLORS = ['#88aaff','#aaffaa','#ffcc44','#ff4444','#ffffff','#ff88ff'];

    // Agent state: current glyph index (0-5), previous glyph index, step count
    const state = Array.from({length: 16}, (_, i) => ({
      curr: i % 6,
      prev: (i + 1) % 6,
      steps: 0,
      absorbed: false,
      worm: []
    }));

    const cards = [];

    function buildGrid() {
      const g = document.getElementById('grid');
      g.innerHTML = '';
      for (let i = 0; i < 16; i++) {
        const l = String.fromCharCode(65 + i);
        const d = document.createElement('div');
        d.className = 'card';
        d.id = `card-${i}`;
        g.appendChild(d);
        cards.push(d);
      }
      updateCards();
    }

    function updateCards() {
      for (let i = 0; i < 16; i++) {
        const l = String.fromCharCode(65 + i);
        const s = state[i];
        const gName = glyph_name_for(s.curr);
        const gColor = GLYPH_COLORS[s.curr] || '#888';
        const card = cards[i];
        card.className = 'card' + (s.absorbed ? ' absorbed' : (s.steps > 0 ? ' active' : ''));
        card.innerHTML = `
          <b>Agent ${l}</b>
          <span class="${s.absorbed ? 'abs' : (i < 2 ? 'on' : 'off')}">
            ${s.absorbed ? '● ABSORBED' : (i < 2 ? '● ONLINE' : '○ STANDBY')}
          </span>
          <div class="meta">
            Glyph: <span style="color:${gColor}">${gName}</span><br>
            Wire: ${glyph_wire_byte(s.curr).toString(16).padStart(2,'0').toUpperCase()}<br>
            Queue: ${Math.min(s.steps * 3, 256)}/256<br>
            Steps: ${s.steps}<br>
            WORM: ${s.worm.length > 0 ? s.worm[s.worm.length-1] : 'idle'}
          </div>`;
      }
    }

    window.stepAll = function() {
      for (let i = 0; i < 16; i++) {
        if (state[i].absorbed) continue;
        const s = state[i];
        const nextGlyph = qra_next(s.curr, s.prev);
        s.prev = s.curr;
        s.curr = nextGlyph;
        s.steps++;
        s.worm.push('0x' + ((i << 16 | s.steps << 8 | nextGlyph) >>> 0).toString(16).toUpperCase());
        if (s.worm.length > 5) s.worm.shift();
        if (nextGlyph === 3) s.absorbed = true; // Omega = absorbed
      }
      updateCards();
    };

    window.resetAll = function() {
      for (let i = 0; i < 16; i++) {
        state[i] = { curr: i % 6, prev: (i + 1) % 6, steps: 0, absorbed: false, worm: [] };
      }
      updateCards();
    };

    init('./pkg/hyperkitty_wasm_bg.wasm').then(() => {
      document.getElementById('wasm-status').textContent =
        'WASM active — QRA tensor live';

      const iso = validate_isomorphism();
      const exhaustion = qra_validate_exhaustion();
      const certs = JSON.parse(reconcile_all_json());

      const panel = document.getElementById('iso-panel');
      panel.innerHTML = `
        <span class="${iso ? 'valid' : 'invalid'}">
          K_QLG = ω_SLA = target_QRA: ${iso ? '✓ VERIFIED — all 6 glyphs' : '✗ FAILED'}
        </span><br>
        Witness exhaustion in exactly 2 steps: <span class="${exhaustion ? 'valid' : 'invalid'}">${exhaustion ? '✓' : '✗'}</span><br>
        ${certs.map(c =>
          `<span style="color:${c.valid ? '#00ff88' : '#ff4444'}">${c.glyph}→${c.qra_target}(ω=${c.sla_omega})</span>`
        ).join('  ')}
      `;

      buildGrid();
    }).catch(e => {
      document.getElementById('wasm-status').textContent = 'WASM load failed: ' + e;
    });
  </script>
</body>
</html>