web/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HyperKitty — Sovereign</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #060609; color: #c8ffca; font-family: ui-monospace, monospace; min-height: 100vh; }
    header { padding: 14px 18px; border-bottom: 1px solid #1c1c22; background: #0c0c10; display: flex; justify-content: space-between; align-items: center; }
    header b { color: #7cffb2; letter-spacing: 0.5px; }
    .live { color: #0f0; font-size: 12px; border: 1px solid #0f0; padding: 3px 8px; border-radius: 99px; }
    #chat { margin: 16px; height: 62vh; overflow: auto; border: 1px solid #1e1e26; background: #0a0a0f; padding: 14px; border-radius: 10px; }
    .line { margin: 10px 0; padding: 10px 12px; border-left: 3px solid #222; background: #0f0f14; border-radius: 6px; line-height: 1.4; }
    .you { border-color: #fff; color: #fff; }
    .kitty { border-color: #00ffaa; color: #7cffb2; }
    .sys { border-color: #ffaa00; color: #ffcc66; font-size: 12px; }
    .bar { margin: 0 16px 16px; display: flex; gap: 10px; }
    input { flex: 1; padding: 14px; background: #101016; color: #0f0; border: 1px solid #2a2a35; border-radius: 10px; outline: 0; }
    input:focus { border-color: #7cffb2; }
    button { padding: 14px 20px; background: #7cffb2; color: #000; border: 0; border-radius: 10px; font-weight: 900; cursor: pointer; }
    button:hover { background: #a0ffc8; }
    a { color: #7cffb2; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .footer { padding: 0 16px 16px; font-size: 11px; color: #555; }
  </style>
</head>
<body>
  <header>
    <b>🐱 HyperKitty — Sovereign Swarm (16 Agents A-P)</b>
    <span class="live" id="status">● LOADING WASM...</span>
  </header>
  <div id="chat"></div>
  <div class="bar">
    <input id="in" placeholder="Talk to the swarm..." disabled>
    <button onclick="send()" id="btn" disabled>SEND</button>
  </div>
  <div class="footer">
    Fleet: <a href="orchestrator.html">orchestrator.html</a> | QRA tensor live | WORM enabled | <span id="iso"></span>
  </div>

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

    const c = document.getElementById('chat');
    const inp = document.getElementById('in');
    const btn = document.getElementById('btn');

    function add(t, cls) {
      const d = document.createElement('div');
      d.className = 'line ' + cls;
      d.textContent = t;
      c.appendChild(d);
      c.scrollTop = 1e9;
    }

    // State: current glyph per agent (0-15), starts at Pi=0
    const agentState = new Uint8Array(16).fill(0);

    function routeMessage(text, fromAgent) {
      const prev = agentState[fromAgent];
      const routeJson = JSON.parse(agent_route(fromAgent, prev));
      agentState[fromAgent] = routeJson.glyph_next === 'Pi' ? 0
        : routeJson.glyph_next === 'Gamma' ? 1
        : routeJson.glyph_next === 'Delta' ? 2
        : routeJson.glyph_next === 'Omega' ? 3
        : routeJson.glyph_next === 'Lambda' ? 4 : 5;
      return routeJson;
    }

    function send() {
      const v = inp.value.trim();
      if (!v) return;
      add('YOU: ' + v, 'you');
      inp.value = '';

      // Hash the message to pick an agent (deterministic)
      let h = 0;
      for (let i = 0; i < v.length; i++) h = (h * 31 + v.charCodeAt(i)) >>> 0;
      const fromAgent = h % 16;
      const agentLabel = String.fromCharCode(65 + fromAgent);

      const route = routeMessage(v, fromAgent);
      const symHash = sla_hash_symbol(v);
      const wormId = route.worm_id;

      setTimeout(() => {
        const l = v.toLowerCase();
        let response;

        if (l.match(/^(hi|hello|hey)/)) {
          response = `Fleet A-P online. Routed via Agent ${agentLabel} → ${route.glyph_current}→${route.glyph_next} (wire:${route.wire_byte}). K_QLG=ω_SLA=target_QRA ✓`;
        } else if (l.includes('route') || l.includes('qra') || l.includes('tensor')) {
          const t = qra_tensor();
          response = `QRA tensor Q[${route.glyph_current}][prev]→${route.glyph_next}. Absorbed:${route.absorbed}. Tensor[0..5]: ${Array.from(t.slice(0,6)).join(',')}`;
        } else if (l.includes('reconcil') || l.includes('isomorphism') || l.includes('iso')) {
          const certs = JSON.parse(reconcile_all_json());
          const valid = certs.every(c => c.valid);
          response = `K_QLG=ω_SLA=target_QRA: ${valid ? '✓ ALL 6 GLYPHS VERIFIED' : '✗ MISMATCH'}. ${certs.map(c => c.glyph+'→'+c.qra_target).join(' ')}`;
        } else if (l.includes('witness')) {
          const w = qra_evolve_witness(0, 1, 2); // Pi,Gamma,Delta
          const w2 = qra_evolve_witness(w[0], w[1], w[2]);
          const names = i => glyph_name_for(i);
          response = `Witness [Pi,Ga,De]→[${names(w[0])},${names(w[1])},${names(w[2])}]→[${names(w2[0])},${names(w2[1])},${names(w2[2])}]. Exhausts in 2 steps: ${qra_validate_exhaustion()}`;
        } else if (l.includes('sla') || l.includes('ledger')) {
          const enc = sla_ledger_for_glyph(fromAgent % 6);
          response = `SLA ledger for Agent ${agentLabel} (${route.glyph_current}): balanced=${sla_is_balanced(enc)} ω=1. sym=${symHash.slice(0,8)}...`;
        } else if (l.includes('hash') || l.includes('worm')) {
          response = `WORM:${wormId} sym:${symHash.slice(0,12)} agent:${agentLabel} glyph:${route.glyph_current}→${route.glyph_next}`;
        } else if (l.includes('cert') || l.includes('proof')) {
          const cert = JSON.parse(reconcile_glyph(fromAgent % 6));
          response = `Cert[${agentLabel}]: QLG_norm²=${cert.qlg_norm_sq} SLA_ω=${cert.sla_omega} QRA_target=${cert.qra_target} valid=${cert.valid}`;
        } else {
          response = `[Agent ${agentLabel}|${route.glyph_current}→${route.glyph_next}] ${v} — WORM:${wormId} wire:${route.wire_byte}`;
        }

        add(`KITTY[${agentLabel}]: ${response}`, 'kitty');
      }, 180);
    }

    inp.addEventListener('keydown', e => { if (e.key === 'Enter') send(); });

    // Boot WASM
    init('./pkg/hyperkitty_wasm_bg.wasm').then(() => {
      const iso = validate_isomorphism();
      const exhaustion = qra_validate_exhaustion();
      document.getElementById('status').textContent = '● LIVE — QRA ACTIVE';
      document.getElementById('iso').textContent =
        `iso:${iso ? '✓' : '✗'} exhaustion:${exhaustion ? '✓' : '✗'}`;
      inp.disabled = false;
      btn.disabled = false;
      add('SYSTEM: HyperKitty WASM loaded — QRA tensor live, SLA ledger active, tripartite isomorphism verified', 'sys');
      add(`SYSTEM: K_QLG = ω_SLA = target_QRA: ${iso ? '✓ ALL 6 GLYPHS' : '✗ FAILED'} | Witness exhaustion in 2 steps: ${exhaustion}`, 'sys');
      add('SYSTEM: 16 agents A-P routing through Q[current][previous] tensor. WORM trace on every message.', 'sys');
    }).catch(e => {
      add('SYSTEM: WASM load failed — ' + e, 'sys');
    });
  </script>
</body>
</html>