{% extends "base.html" %}
{% block title %}Cluster — CoderAI{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Cluster</h1>
    <p>Everything this coderai can send work to — engines here, nodes on your network, RPC servers, hosts, remotes and pods — and whether it answers right now.</p>
  </div>
  <div class="header-actions">
    <span id="cl-updated" class="dim small"></span>
    <button class="btn btn-secondary" onclick="clRefresh()">Refresh</button>
  </div>
</div>

<div id="cl-note" style="display:none;margin:0 0 1rem;padding:.7rem .9rem;border-radius:8px;
     background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.4);font-size:13px"></div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1rem">
  <div class="card"><div class="dim small">Engines here</div><div id="cl-n-engines" style="font-size:1.6rem;font-weight:700">—</div></div>
  <div class="card"><div class="dim small">Cluster nodes</div><div id="cl-n-nodes" style="font-size:1.6rem;font-weight:700">—</div><div id="cl-n-nodes-sub" class="dim small"></div></div>
  <div class="card"><div class="dim small">RPC servers</div><div id="cl-n-rpc" style="font-size:1.6rem;font-weight:700">—</div><div id="cl-n-rpc-sub" class="dim small"></div></div>
  <div class="card"><div class="dim small">Hosts + remotes</div><div id="cl-n-hosts" style="font-size:1.6rem;font-weight:700">—</div><div id="cl-n-hosts-sub" class="dim small"></div></div>
  <div class="card"><div class="dim small">Pods</div><div id="cl-n-pods" style="font-size:1.6rem;font-weight:700">—</div></div>
</div>

<div class="card" style="margin-bottom:1rem">
  <div class="card-title">Cluster nodes <span class="dim small">— other coderai installs used as engines of this one</span></div>
  <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)">
        <th>Node</th><th>URL</th><th>State</th><th>Capabilities</th><th>VRAM</th><th>Its engines</th><th>Loaded</th><th>Assigned</th><th>In-flight</th><th></th>
      </tr></thead>
      <tbody id="cl-nodes"><tr><td colspan="10" class="dim">No nodes configured — Settings → Cluster.</td></tr></tbody>
    </table>
  </div>
</div>

<div class="card" style="margin-bottom:1rem">
  <div class="card-title">Seen on the network <span class="dim small">— mDNS <code>_coderai._tcp</code>; members hold this cluster's token and join by themselves</span></div>
  <div id="cl-disc-note" class="dim small" style="margin-bottom:.4rem"></div>
  <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)">
        <th>Name</th><th>URL</th><th>Version</th><th>Capabilities</th><th>Member</th><th>Joined</th><th>Last seen</th>
      </tr></thead>
      <tbody id="cl-disc"><tr><td colspan="7" class="dim">—</td></tr></tbody>
    </table>
  </div>
</div>

<div class="card" style="margin-bottom:1rem">
  <div class="card-title">Engines on this machine <button class="btn btn-secondary" style="float:right;padding:.15rem .5rem;font-size:12px" onclick="clLogs('')">This front's log</button></div>
  <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)">
        <th>Engine</th><th>Backend</th><th>State</th><th>Capabilities</th><th>VRAM</th><th>Loaded</th><th>In-flight</th><th>PID</th>
      </tr></thead>
      <tbody id="cl-engines"><tr><td colspan="8" class="dim">—</td></tr></tbody>
    </table>
  </div>
</div>

<div class="card" style="margin-bottom:1rem">
  <div class="card-title">llama.cpp RPC servers <span class="dim small">— cards lent to a GGUF loaded elsewhere (per model: <em>Cards on other machines</em>)</span></div>
  <div style="overflow-x:auto">
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)">
        <th>Where</th><th>Endpoint</th><th>Device</th><th>Mem cap</th><th>Process</th><th>Reachable</th><th>Last log line</th>
      </tr></thead>
      <tbody id="cl-rpc"><tr><td colspan="7" class="dim">None advertised — Settings → Cluster → RPC servers on this machine or on a node.</td></tr></tbody>
    </table>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
  <div class="card">
    <div class="card-title">Hosts <span class="dim small">— <code>backend: host</code> models</span></div>
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)"><th>Model</th><th>URL</th><th>Mode</th><th>Answers</th></tr></thead>
      <tbody id="cl-hosts"><tr><td colspan="4" class="dim">None.</td></tr></tbody>
    </table>
  </div>
  <div class="card">
    <div class="card-title">Capability remotes <span class="dim small">— Settings → Remote capabilities</span></div>
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)"><th>Capability</th><th>URL</th><th>Answers</th></tr></thead>
      <tbody id="cl-remotes"><tr><td colspan="3" class="dim">None.</td></tr></tbody>
    </table>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
  <div class="card">
    <div class="card-title">Usage by API key <span class="dim small">— since the front started; the same numbers <code>/metrics</code> exports</span></div>
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)"><th>Key</th><th>Requests</th><th>Errors</th><th>Time</th><th>Kinds</th><th>Where</th></tr></thead>
      <tbody id="cl-usage-key"><tr><td colspan="6" class="dim">No requests yet.</td></tr></tbody>
    </table>
  </div>
  <div class="card">
    <div class="card-title">Usage by model</div>
    <table style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3)"><th>Model</th><th>Requests</th><th>Errors</th><th>Time</th><th>Where</th></tr></thead>
      <tbody id="cl-usage-model"><tr><td colspan="5" class="dim">No requests yet.</td></tr></tbody>
    </table>
  </div>
</div>

<div id="cl-logbox" class="card" style="display:none;margin-bottom:1rem">
  <div class="card-title"><span id="cl-log-title">Log</span> <button class="btn btn-secondary" style="float:right;padding:.15rem .5rem;font-size:12px" onclick="document.getElementById('cl-logbox').style.display='none'">close</button>
    <button class="btn btn-secondary" style="float:right;margin-right:.4rem;padding:.15rem .5rem;font-size:12px" onclick="clLogs(_logNode)">refresh</button></div>
  <pre id="cl-log" style="max-height:420px;overflow:auto;font-size:11px;line-height:1.35;margin:0;white-space:pre-wrap"></pre>
</div>

<div class="card">
  <div class="card-title">RunPod pods <span class="dim small">— live list, costs on the <a href="{{ root_path }}/admin/runpod">RunPod page</a></span></div>
  <table style="width:100%;border-collapse:collapse;font-size:13px">
    <thead><tr style="text-align:left;color:var(--text-3)"><th>Model / capability</th><th>Pod</th><th>GPU</th><th>State</th><th>In-flight</th><th>$/hr</th></tr></thead>
    <tbody id="cl-pods"><tr><td colspan="6" class="dim">None running.</td></tr></tbody>
  </table>
</div>

<style>
  #cl-nodes td, #cl-engines td, #cl-rpc td, #cl-hosts td, #cl-remotes td, #cl-pods td, #cl-disc td, #cl-usage-key td, #cl-usage-model td { padding:.35rem .4rem; border-top:1px solid var(--border,#333); vertical-align:top }
  .cl-ok { color:#2ecc71; font-weight:600 } .cl-bad { color:#e74c3c; font-weight:600 } .cl-dim { color:var(--text-3) }
  .cl-pill { display:inline-block; padding:.05rem .4rem; border-radius:999px; border:1px solid var(--border,#444); font-size:11px; margin:0 .15rem .15rem 0 }
</style>
<script>
const esc = v => (v == null ? '' : String(v)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
const ok = (b, yes, no) => b === null || b === undefined ? '<span class="cl-dim">n/a</span>' : (b ? '<span class="cl-ok">' + (yes || 'up') + '</span>' : '<span class="cl-bad">' + (no || 'down') + '</span>');
const gb = v => (v == null ? '—' : (Math.round(v * 10) / 10) + ' GB');
const vram = v => v ? (gb(v.free) + ' free / ' + gb(v.total)) : '—';
const pills = a => (a || []).map(x => '<span class="cl-pill">' + esc(x) + '</span>').join('') || '<span class="cl-dim">—</span>';
const short = a => (a || []).length ? (a.length <= 3 ? a.map(esc).join('<br>') : esc(a.slice(0,3).join(', ')) + ' <span class="cl-dim">+' + (a.length - 3) + '</span>') : '<span class="cl-dim">—</span>';

async function clRefresh(){
  let d;
  try {
    const r = await fetch(ROOT_PATH + '/admin/api/cluster');
    if (!r.ok) throw new Error('HTTP ' + r.status);
    d = await r.json();
  } catch (e) { document.getElementById('cl-updated').textContent = 'error: ' + e.message; return; }
  document.getElementById('cl-updated').textContent = 'updated ' + new Date().toLocaleTimeString();
  const note = document.getElementById('cl-note');
  const notes = [];
  if (!d.cluster_enabled) notes.push('Cluster nodes are <b>not enabled</b> (Settings → Cluster) — nodes listed there are ignored until then.');
  if (d.serve === false) notes.push('This install does <b>not</b> answer other heads (cluster.serve is off).');
  if (d.node_name) notes.push('This install calls itself <b>' + esc(d.node_name) + '</b> as a node.');
  note.innerHTML = notes.join('<br>'); note.style.display = notes.length ? '' : 'none';

  const nodes = d.nodes || [], engines = d.engines || [], rpc = d.rpc_servers || [], hosts = d.hosts || [], remotes = d.remotes || [], pods = d.pods || [];
  document.getElementById('cl-n-engines').textContent = engines.length;
  document.getElementById('cl-n-nodes').textContent = nodes.length;
  document.getElementById('cl-n-nodes-sub').textContent = nodes.length ? (nodes.filter(n => n.healthy).length + ' reachable') : '';
  document.getElementById('cl-n-rpc').textContent = rpc.length;
  document.getElementById('cl-n-rpc-sub').textContent = rpc.length ? (rpc.filter(r => r.reachable).length + ' reachable') : '';
  document.getElementById('cl-n-hosts').textContent = hosts.length + remotes.length;
  document.getElementById('cl-n-hosts-sub').textContent = (hosts.length + remotes.length) ? ((hosts.filter(h => h.ok).length + remotes.filter(r => r.ok).length) + ' answering') : '';
  document.getElementById('cl-n-pods').textContent = pods.length;

  document.getElementById('cl-nodes').innerHTML = nodes.length ? nodes.map(n => `<tr>
    <td><b>${esc(n.name)}</b>${n.discovered ? ' <span class="cl-pill" title="found over mDNS with the cluster token">mDNS</span>' : ''}</td><td class="cl-dim">${esc(n.url)}</td>
    <td>${ok(n.healthy, 'reachable', 'unreachable')}${n.last_error ? '<br><span class="cl-dim" style="font-size:11px">' + esc(n.last_error) + '</span>' : ''}</td>
    <td>${pills(n.capabilities)}</td><td>${vram(n.vram)}</td>
    <td>${(n.node_engines || []).map(e => '<span class="cl-pill" title="' + esc(vram(e.vram)) + '">' + esc(e.name) + (e.healthy ? '' : ' ✗') + '</span>').join('') || '<span class="cl-dim">—</span>'}</td>
    <td>${short(n.loaded_models)}</td><td>${short(n.assigned_models)}</td><td>${n.inflight || 0}</td>
    <td><button class="btn btn-secondary" style="padding:.1rem .45rem;font-size:11px" onclick="clLogs(${JSON.stringify(n.name)})">log</button></td></tr>`).join('')
    : '<tr><td colspan="10" class="dim">No nodes configured — Settings → Cluster (or turn on discovery and share a cluster token).</td></tr>';

  const disc = d.discovery || {};
  const dn = [];
  if (!disc.enabled) dn.push('Discovery is <b>off</b> — Settings → Cluster → <em>Find nodes on the LAN</em>.');
  else if (!disc.available) dn.push('Discovery is on but the <code>zeroconf</code> package is missing in this install.');
  else if (disc.error) dn.push('Discovery error: ' + esc(disc.error));
  else if (disc.running) dn.push('Announcing as <b>' + esc(disc.name) + '</b> on port ' + esc(disc.port) + (disc.token_set ? '' : ' — <b>no cluster token set</b>: this install is visible but joins nothing and nobody joins it') + (disc.auto_join ? '' : '; auto-join is off (members are listed, not used)') + '.');
  document.getElementById('cl-disc-note').innerHTML = dn.join(' ');
  const peers = disc.peers || [];
  document.getElementById('cl-disc').innerHTML = peers.length ? peers.map(p => `<tr>
    <td><b>${esc(p.name)}</b></td><td class="cl-dim">${esc(p.url)}</td><td>${esc(p.version)}</td><td>${pills(p.capabilities)}</td>
    <td>${p.member ? '<span class="cl-ok">same token</span>' : '<span class="cl-dim">other token</span>'}${p.serve === false ? ' <span class="cl-dim">(does not serve)</span>' : ''}</td>
    <td>${p.joined ? '<span class="cl-ok">node</span>' : (p.member ? (disc.auto_join ? '<span class="cl-dim">joining…</span>' : '<span class="cl-dim">auto-join off</span>') : '<span class="cl-dim">—</span>')}</td>
    <td class="cl-dim">${Math.max(0, Math.round((Date.now()/1000) - p.seen))}s ago</td></tr>`).join('')
    : '<tr><td colspan="7" class="dim">' + (disc.running ? 'No other coderai announcing on this link.' : '—') + '</td></tr>';

  const usage = d.usage || {};
  const byKey = usage.by_key || {}, byModel = usage.by_model || {};
  const mins = s => (s >= 3600 ? (s/3600).toFixed(1) + ' h' : s >= 60 ? (s/60).toFixed(1) + ' min' : s.toFixed(1) + ' s');
  const kv = o => Object.entries(o || {}).sort((a,b) => b[1]-a[1]).map(([k,v]) => esc(k) + ' ' + v).join(', ') || '—';
  const keys = Object.entries(byKey).sort((a,b) => b[1].requests - a[1].requests);
  document.getElementById('cl-usage-key').innerHTML = keys.length ? keys.map(([k, r]) => `<tr>
    <td><b>${esc(k)}</b></td><td>${r.requests}</td><td>${r.errors ? '<span class="cl-bad">' + r.errors + '</span>' : 0}</td><td>${mins(r.seconds)}</td><td class="cl-dim">${kv(r.kinds)}</td><td class="cl-dim">${kv(r.engines)}</td></tr>`).join('')
    : '<tr><td colspan="6" class="dim">No requests yet.</td></tr>';
  const models = Object.entries(byModel).sort((a,b) => b[1].requests - a[1].requests);
  document.getElementById('cl-usage-model').innerHTML = models.length ? models.map(([k, r]) => `<tr>
    <td><b>${esc(k)}</b></td><td>${r.requests}</td><td>${r.errors ? '<span class="cl-bad">' + r.errors + '</span>' : 0}</td><td>${mins(r.seconds)}</td><td class="cl-dim">${kv(r.engines)}</td></tr>`).join('')
    : '<tr><td colspan="5" class="dim">No requests yet.</td></tr>';

  document.getElementById('cl-engines').innerHTML = engines.length ? engines.map(e => `<tr>
    <td><b>${esc(e.name)}</b>${e.primary ? ' <span class="cl-dim">(primary)</span>' : ''}</td><td>${esc(e.backend)}</td>
    <td>${ok(e.healthy, 'ready', e.processing ? 'busy' : 'not responding')}${e.cooling ? ' <span class="cl-dim">cooling</span>' : ''}</td>
    <td>${pills(e.capabilities)}</td><td>${vram(e.vram)}</td><td>${short(e.loaded_models)}</td><td>${e.inflight || 0}</td><td class="cl-dim">${esc(e.pid || '')}</td></tr>`).join('')
    : '<tr><td colspan="8" class="dim">—</td></tr>';

  document.getElementById('cl-rpc').innerHTML = rpc.length ? rpc.map(r => `<tr>
    <td>${esc(r.node)}</td><td><code>${esc(r.endpoint)}</code></td><td>${esc(r.device || 'default')}</td><td>${r.mem_gb ? gb(r.mem_gb) : 'all'}</td>
    <td>${r.node === '(this machine)' ? ok(r.alive, 'running' + (r.pid ? ' (pid ' + r.pid + ')' : ''), 'not running') : '<span class="cl-dim">on the node</span>'}</td>
    <td>${ok(r.reachable, 'yes', 'no')}</td><td class="cl-dim" style="font-size:11px">${esc(r.last_log || '')}</td></tr>`).join('')
    : '<tr><td colspan="7" class="dim">None advertised — Settings → Cluster → RPC servers on this machine or on a node.</td></tr>';

  document.getElementById('cl-hosts').innerHTML = hosts.length ? hosts.map(h => `<tr>
    <td>${esc(h.model)}</td><td class="cl-dim">${esc(h.url)}</td><td>${h.on_demand ? 'on demand' : 'always on'}</td>
    <td>${ok(h.ok, 'yes', h.on_demand ? 'off (started on request)' : 'no')} <span class="cl-dim" style="font-size:11px">${esc(h.detail)}</span></td></tr>`).join('')
    : '<tr><td colspan="4" class="dim">None.</td></tr>';

  document.getElementById('cl-remotes').innerHTML = remotes.length ? remotes.map(r => `<tr>
    <td>${esc(r.capability)}</td><td class="cl-dim">${esc(r.url)}</td>
    <td>${ok(r.ok, 'yes', 'no')} <span class="cl-dim" style="font-size:11px">${esc(r.detail)}</span></td></tr>`).join('')
    : '<tr><td colspan="3" class="dim">None.</td></tr>';

  document.getElementById('cl-pods').innerHTML = pods.length ? pods.map(p => `<tr>
    <td>${esc(p.model)}</td><td class="cl-dim">${esc(p.pod_id)}</td><td>${esc(p.gpu)}</td>
    <td>${esc(p.state)}${p.healthy ? ' <span class="cl-ok">healthy</span>' : ''}</td><td>${p.inflight || 0}</td><td>${p.hourly_usd != null ? '$' + p.hourly_usd : '—'}</td></tr>`).join('')
    : '<tr><td colspan="6" class="dim">None running.</td></tr>';
}
let _logNode = '';
async function clLogs(node){
  _logNode = node || '';
  const box = document.getElementById('cl-logbox'), pre = document.getElementById('cl-log');
  box.style.display = '';
  document.getElementById('cl-log-title').textContent = node ? 'Log of node ' + node : "This front's log";
  pre.textContent = 'loading…';
  try {
    const r = await fetch(ROOT_PATH + '/admin/api/cluster/logs?lines=300' + (node ? '&node=' + encodeURIComponent(node) : ''));
    const d = await r.json();
    pre.textContent = (d.error ? '[' + d.error + ']\n' : '') + (d.lines || []).join('\n');
    pre.scrollTop = pre.scrollHeight;
  } catch (e) { pre.textContent = 'error: ' + e.message; }
}
clRefresh();
setInterval(clRefresh, 10000);
</script>
{% endblock %}