{% extends "base.html" %}
{% block title %}RunPod — CoderAI{% endblock %}
{# Twelve columns of live fleet state: the 1100px reading column fits a page of
   prose, not a table an operator scans across. Same full-width wrapper the
   Models page uses. #}
{% block wrapper_class %}container container--full{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>RunPod</h1>
    <p>Remote-GPU pods, live cost, and spend against your budgets.</p>
  </div>
  <div class="header-actions">
    <span id="rp-updated" class="dim small"></span>
    <button class="btn btn-secondary" onclick="rpRefresh()">Refresh</button>
  </div>
</div>

<div id="rp-disabled" 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">
  RunPod is not enabled. Turn it on in <a href="{{ root_path }}/admin/settings">Settings → RunPod</a>.
</div>

<!-- Cost tiles -->
<div id="rp-tiles" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin-bottom:1rem">
  <div class="card"><div class="dim small">Running pods</div><div id="rp-podcount" style="font-size:1.6rem;font-weight:700">—</div><div id="rp-served" class="dim small"></div></div>
  <div class="card"><div class="dim small">Live rate ($/hr)</div><div id="rp-rate" style="font-size:1.6rem;font-weight:700">—</div><div id="rp-rate-cap" class="dim small"></div></div>
  <div class="card"><div class="dim small">Uncommitted cost</div><div id="rp-uncommitted" style="font-size:1.6rem;font-weight:700">—</div><div class="dim small">pods running, not yet billed to the ledger</div></div>
  <div class="card"><div class="dim small">Global spend (period)</div><div id="rp-global-spend" style="font-size:1.6rem;font-weight:700">—</div><div id="rp-global-cap" class="dim small"></div></div>
</div>

<!-- Running pods -->
<div class="card" style="margin-bottom:1rem">
  <div class="card-title">Running pods</div>
  <div style="overflow-x:auto">
    <table class="table--dense" style="width:100%;border-collapse:collapse;font-size:13px">
      <thead><tr style="text-align:left;color:var(--text-3);white-space:nowrap">
        <th>Model</th><th>GPU</th><th>Load</th><th>Memory</th><th>In flight</th><th>Served</th><th>$/hr</th><th>Uptime</th><th>Cost</th><th>Health</th><th>Logs</th>
      </tr></thead>
      <tbody id="rp-pods"><tr><td colspan="11" class="dim">No pods running.</td></tr></tbody>
    </table>
  </div>
</div>

<!-- Spend per model -->
<div class="card">
  <div class="card-title">Spend by model (trailing)</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>Model</th><th>Hour</th><th>Day</th><th>Week</th><th>Month</th>
      </tr></thead>
      <tbody id="rp-spend"><tr><td colspan="5" class="dim">No spend recorded yet.</td></tr></tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function _fmtDur(s){ s=Math.max(0,s|0); const h=(s/3600)|0, m=((s%3600)/60)|0; return h?`${h}h ${m}m`:`${m}m ${s%60}s`; }
function _usd(v){ return (v==null)?'—':('$'+Number(v).toFixed(v<1?4:2)); }
/* A proportion as a number plus a bar. Colour marks the band an operator acts
   on: green is working, amber is close to the limit, red is at it.
   `tag` names the quantity when a cell draws more than one bar, so two bars are
   never left to be told apart by their order. `band:false` keeps a bar neutral:
   a reserved share is high by design, and painting it red would raise an alarm
   on every healthy pod -- the colour is then just noise an operator learns to
   ignore, which is worse than no colour at all. */
function _meter(pct, label, opts){
  const o = opts || {};
  const v = Math.max(0, Math.min(100, Number(pct)||0));
  const col = (o.band === false) ? 'var(--accent,#60a5fa)'
            : (v >= 90 ? '#ef4444' : (v >= 70 ? '#f59e0b' : '#22c55e'));
  const tag = o.tag
    ? `<span style="font-size:10px;color:var(--text-3);width:2.4rem;flex:none">${o.tag}</span>` : '';
  return `<div style="display:flex;align-items:center;gap:.4rem;min-width:7rem">
    ${tag}
    <div style="flex:1;height:5px;border-radius:3px;background:var(--surface-2,#333);overflow:hidden">
      <div style="width:${v}%;height:100%;background:${col}"></div>
    </div>
    <span style="font-family:var(--mono,monospace);font-size:11px;white-space:nowrap">${label}</span>
  </div>`;
}
/* Telemetry is read from the pod itself, so a pod that is booting, saturated or
   unreachable legitimately has none. Say so with a dash rather than drawing an
   empty bar, which reads as "idle" when the truth is "not known". */
/* How close this pod is to its SERVING ceiling. Not reserved VRAM: vLLM claims
   its gpu_memory_utilization share up front, so that reads ~90% from boot
   whether the pod is serving one request or sixty-four. KV cache occupancy is
   what moves with load, and a preemption is the proof the cache ran out — vLLM
   evicts a running request and recomputes it later, so throughput collapses
   while every other counter still looks busy. */
function _loadCell(p){
  const bits = [];
  if (p.running != null) bits.push(`${p.running} run`);
  if (p.waiting) bits.push(`<span style="color:#f59e0b">${p.waiting} wait</span>`);
  if (p.gpu_util != null) bits.push(`${Math.round(p.gpu_util)}% gpu`);
  if (p.gpu_temp_c != null) bits.push(`${Math.round(p.gpu_temp_c)}°C`);
  const pre = p.preemptions ? `<div style="font-size:10px;color:#ef4444">${p.preemptions} preempted — past the KV ceiling</div>` : '';
  if (p.kv_cache_pct == null) {
    return (bits.length ? `<span style="font-size:11px">${bits.join(' · ')}</span>` : '<span class="dim">—</span>') + pre;
  }
  return _meter(p.kv_cache_pct, `${Math.round(p.kv_cache_pct)}% KV`) +
    (bits.length ? `<div style="font-size:10px;color:var(--text-3)">${bits.join(' · ')}</div>` : '') + pre;
}
/* Two bars, because they are two different ceilings and only one of them is a
   warning sign. HOST RAM is the ceiling that actually bites -- an OCR pod was
   OOM-killed at 128 in-flight with the GPU never the constraint -- so it keeps
   the green/amber/red bands. VRAM is what the engine RESERVED, not what it is
   using: vLLM claims its gpu_memory_utilization share at boot, so it reads ~90%
   from the first second whether the pod serves one request or sixty-four. It
   gets its own neutral bar and says "reserved" in the label, so the number is
   there to read without pretending to be a load the operator can act on.
   Either bar is omitted when its telemetry is missing: a booting or unreachable
   pod has none, and an empty bar reads as "idle" when the truth is "unknown". */
function _memCell(p){
  const bars = [];
  if (p.ram_used_gb != null && p.ram_total_gb) {
    bars.push(_meter(100 * p.ram_used_gb / p.ram_total_gb,
                     `${p.ram_used_gb.toFixed(1)}/${Math.round(p.ram_total_gb)} GB`,
                     {tag: 'RAM'}));
  }
  if (p.vram_used_gb != null && p.vram_total_gb) {
    bars.push(_meter(100 * p.vram_used_gb / p.vram_total_gb,
                     `${p.vram_used_gb.toFixed(1)}/${Math.round(p.vram_total_gb)} GB reserved`,
                     {tag: 'VRAM', band: false}));
  }
  return bars.length ? bars.join('') : '<span class="dim">—</span>';
}
/* Counts, not rates: how many requests this pod has finished and how many
   tokens went through it since it booted. In-flight next to it is the instant;
   this is the pod's whole working life, and it is what says whether a pod
   billed by the hour has earned it -- a healthy pod at 0 served is pure cost.
   vLLM's counters rewind when the engine process is replaced, so the pod
   carries them forward (codai.api.serving_load._accumulate) and this column
   never goes backwards while the pod lives. */
function _fmtCount(n){
  if (n == null) return null;
  if (n >= 1e9) return (n/1e9).toFixed(1) + 'B';
  if (n >= 1e6) return (n/1e6).toFixed(1) + 'M';
  if (n >= 1e3) return (n/1e3).toFixed(1) + 'k';
  return String(n);
}
function _servedCell(p){
  if (p.requests_done == null && p.generation_tokens == null) return '<span class="dim">—</span>';
  const req = p.requests_done != null
    ? `<div>${_fmtCount(p.requests_done)} <span style="color:var(--text-3)">req</span></div>` : '';
  const tok = [];
  if (p.prompt_tokens != null) tok.push(`${_fmtCount(p.prompt_tokens)} in`);
  if (p.generation_tokens != null) tok.push(`${_fmtCount(p.generation_tokens)} out`);
  return req + (tok.length
    ? `<div style="font-size:10px;color:var(--text-3)">${tok.join(' · ')} tok</div>` : '');
}

async function rpRefresh(){
  let d;
  try {
    const r = await fetch(ROOT_PATH + '/admin/api/runpod/stats');
    d = await r.json();
    if(!r.ok) throw new Error(d.detail || ('HTTP '+r.status));
  } catch(e){
    document.getElementById('rp-updated').textContent = 'error: ' + e.message;
    return;
  }
  const caps = d.caps || {};
  document.getElementById('rp-disabled').style.display = caps.enabled ? 'none' : '';
  const pods = d.pods || [];
  const running = pods.filter(p=>p.healthy);
  document.getElementById('rp-podcount').textContent = running.length + (pods.length>running.length ? ` (+${pods.length-running.length} unhealthy)` : '');
  // What the pods now running have served between them. Pods that have already
  // been released are not in this listing, so this is the live fleet's work,
  // not the account's history -- the ledger below is the history.
  const served = pods.reduce((a,p)=> a + (p.requests_done||0), 0);
  const servedTok = pods.reduce((a,p)=> a + (p.generation_tokens||0), 0);
  document.getElementById('rp-served').textContent = served
    ? `${_fmtCount(served)} requests served · ${_fmtCount(servedTok)} tokens out`
    : (pods.length ? 'nothing served yet' : '');
  document.getElementById('rp-rate').textContent = _usd(d.live_hourly_usd);
  // The rate now counts BOOTING pods too, because RunPod bills from creation.
  // Say how much of it is boot: a fleet that is mostly boot is a ramp that is
  // too steep, and that was invisible while the figure excluded them.
  const boot = d.live_hourly_booting_usd || 0;
  const capTxt = caps.global_max_hourly_usd ? ('cap ' + _usd(caps.global_max_hourly_usd) + '/hr') : 'no rate cap';
  document.getElementById('rp-rate-cap').textContent =
    boot > 0 ? (capTxt + ' · ' + _usd(boot) + '/hr still booting') : capTxt;
  document.getElementById('rp-uncommitted').textContent = _usd(d.live_uncommitted_usd);
  const gperiod = caps.global_cost_period || 'unlimited';
  const gspend = (d.ledger && d.ledger.global && gperiod!=='unlimited') ? d.ledger.global[gperiod] : null;
  document.getElementById('rp-global-spend').textContent = (gperiod==='unlimited') ? 'unlimited' : _usd(gspend);
  document.getElementById('rp-global-cap').textContent = (caps.global_cost_limit_usd && gperiod!=='unlimited') ? ('cap ' + _usd(caps.global_cost_limit_usd) + ' / ' + gperiod) : 'no spend cap';

  // pods table
  const tb = document.getElementById('rp-pods');
  if(!pods.length){ tb.innerHTML = '<tr><td colspan="11" class="dim">No pods running.</td></tr>'; }
  else {
    tb.innerHTML = pods.map(p => `<tr>
      <td>${p.model||''}</td>
      <td>${p.gpu||''}${p.is_spot?' <span class="dim">(spot)</span>':''}</td>
      <td>${_loadCell(p)}</td>
      <td>${_memCell(p)}</td>
      <td>${p.inflight||0}</td>
      <td>${_servedCell(p)}</td>
      <td>${_usd(p.hourly_usd)}</td>
      <td>${_fmtDur(p.uptime_s)}</td>
      <td>${_usd(p.live_cost_usd)}</td>
      <td>${p.state==='provisioning'?'<span style="color:#f59e0b">provisioning…</span>':(p.healthy?'<span style="color:#22c55e">healthy</span>':'<span style="color:#ef4444">down</span>')}</td>
      <td><a href="#" onclick="rpLogs('${p.pod_id}');return false">view</a>${p.console_url?` · <a href="${p.console_url}" target="_blank" rel="noopener">console</a>`:''}</td>
    </tr>`).join('');
  }

  // spend by model
  const sb = document.getElementById('rp-spend');
  const per = (d.ledger && d.ledger.per_model) || {};
  const keys = Object.keys(per);
  if(!keys.length){ sb.innerHTML = '<tr><td colspan="5" class="dim">No spend recorded yet.</td></tr>'; }
  else {
    sb.innerHTML = keys.map(k => {
      const m = per[k] || {};
      return `<tr><td>${k}</td><td>${_usd(m.hour)}</td><td>${_usd(m.day)}</td><td>${_usd(m.week)}</td><td>${_usd(m.month)}</td></tr>`;
    }).join('');
  }
  const now = new Date();
  document.getElementById('rp-updated').textContent = 'updated ' + now.toLocaleTimeString();
}
async function rpLogs(podId){
  const modal = document.getElementById('rp-log-modal');
  const pre = document.getElementById('rp-log-pre');
  const title = document.getElementById('rp-log-title');
  title.textContent = 'Logs — pod ' + podId;
  pre.textContent = 'loading…';
  modal.style.display = 'flex';
  try {
    const r = await fetch(ROOT_PATH + '/admin/api/runpod/pod-logs?pod_id=' + encodeURIComponent(podId) + '&tail=300');
    const d = await r.json();
    let txt = d.logs || '';
    if (!txt && d.error) txt = '(' + d.error + ')';
    if (!txt) txt = '(no logs returned by the API)';
    pre.textContent = txt;
    const link = document.getElementById('rp-log-console');
    if (d.console_url) { link.href = d.console_url; link.style.display = ''; }
    else link.style.display = 'none';
  } catch(e){ pre.textContent = 'error: ' + e.message; }
}
function rpCloseLogs(){ document.getElementById('rp-log-modal').style.display = 'none'; }
rpRefresh();
setInterval(rpRefresh, 10000);
</script>

<div id="rp-log-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
     z-index:1000;align-items:center;justify-content:center" onclick="if(event.target===this)rpCloseLogs()">
  <div style="background:var(--bg-1,#1a1a1a);border:1px solid var(--border,#333);border-radius:10px;
       width:min(900px,92vw);max-height:80vh;display:flex;flex-direction:column;padding:1rem">
    <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem">
      <b id="rp-log-title">Logs</b>
      <a id="rp-log-console" href="#" target="_blank" rel="noopener" class="dim small" style="display:none">open in RunPod console →</a>
      <button class="btn btn-secondary" style="margin-left:auto" onclick="rpCloseLogs()">Close</button>
    </div>
    <pre id="rp-log-pre" style="overflow:auto;flex:1;font-size:12px;white-space:pre-wrap;
         background:var(--bg-0,#111);padding:.6rem;border-radius:6px;margin:0"></pre>
  </div>
</div>
{% endblock %}