{% extends "_base.html" %}
{% block content %}
<style>
  .cl-summary{display:flex;gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:0 0 24px;background:var(--paper-2)}
  .cl-summary > div{flex:1;padding:16px 20px;border-right:1px solid var(--rule-soft)}
  .cl-summary > div:last-child{border-right:0}
  .cl-summary .num{font-family:var(--mono);font-size:22px;color:var(--ink);display:block;line-height:1}
  .cl-summary .num.ok{color:var(--accent)} .cl-summary .num.warn{color:var(--warn)}
  .cl-summary .lbl{font-family:var(--mono);font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin-top:7px;display:block}
  .topo-card{padding:0;overflow:hidden}
  .topo-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule-soft);font-family:var(--mono);font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
  .btn-mini{font-family:var(--mono);font-size:11px;background:transparent;border:1px solid var(--rule);border-radius:5px;padding:4px 10px;cursor:pointer;color:var(--ink-2)}
  .btn-mini:hover{border-color:var(--accent);color:var(--accent)}
  .topo-stage{padding:40px 28px;background:radial-gradient(circle at 1px 1px,rgba(19,19,18,.04) 1px,transparent 0);background-size:22px 22px}
  .topo-empty{text-align:center;color:var(--mute);font-size:14px;padding:32px}
  .topo-row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
  .topo-node{width:210px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);padding:18px;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.03)}
  .topo-node.self{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
  .tn-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
  .tn-rank{font-family:var(--mono);font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
  .tn-self-badge{font-family:var(--mono);font-size:9px;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
  .tn-chip{font-family:var(--display);font-variation-settings:"opsz" 36,"wght" 500;font-size:26px;color:var(--ink);line-height:1;letter-spacing:-.02em}
  .tn-name{font-family:var(--mono);font-size:11px;color:var(--mute);margin:4px 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tn-ram-bar{height:7px;border-radius:4px;background:var(--paper-3);overflow:hidden;margin-bottom:5px}
  .tn-ram-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .5s}
  .tn-meta{font-family:var(--mono);font-size:10.5px;color:var(--mute);display:flex;justify-content:space-between}
  .tn-share{margin-top:10px;font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.04em}
  /* link between nodes */
  .topo-link{width:130px;height:70px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .topo-link svg{width:100%;height:38px;overflow:visible}
  .topo-link .lk-rtt{font-family:var(--mono);font-size:10.5px;margin-bottom:2px;letter-spacing:.03em}
  .topo-link .lk-kind{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
  .lk-fast .lk-rtt,.lk-fast .lk-kind{color:var(--accent)}
  .lk-slow .lk-rtt,.lk-slow .lk-kind{color:var(--warn)}
  .lk-wire{stroke-width:2.5;fill:none}
  .lk-fast .lk-wire{stroke:var(--accent);stroke-dasharray:7 5;animation:march 0.7s linear infinite}
  .lk-slow .lk-wire{stroke:#b8a98e;stroke-dasharray:3 6}
  @keyframes march{to{stroke-dashoffset:-24}}
  .lk-dot{fill:var(--accent)}
  .lk-fast .lk-flow{animation:flow 1.6s ease-in-out infinite}
  @keyframes flow{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(112px);opacity:0}}
  @media (prefers-reduced-motion:reduce){.lk-fast .lk-wire,.lk-fast .lk-flow{animation:none}}
  .cl-serve{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
  .cl-serve input{flex:1;min-width:260px;font-family:var(--mono);font-size:13px;padding:9px 12px;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
  .cl-err{color:var(--warn);font-family:var(--mono);font-size:12px;margin-top:10px;white-space:pre-wrap}
  .cl-active{margin-top:16px;border:1px solid var(--accent);background:var(--accent-soft);
    border-radius:10px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .cl-active-title{font-weight:600;color:var(--ink);font-size:15px}
  .cl-active-sub{color:var(--ink-2);font-size:13px;margin-top:3px}
  .cl-chat{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:14px}
  .cl-msgs{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;max-height:340px;overflow-y:auto}
  .cl-msg{padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.5;max-width:85%}
  .cl-msg.user{align-self:flex-end;background:var(--accent);color:var(--paper)}
  .cl-msg.bot{align-self:flex-start;background:var(--paper-2);border:1px solid var(--rule-soft)}
  .cl-msg .via{font-family:var(--mono);font-size:9.5px;color:var(--mute);margin-top:6px;letter-spacing:.04em}
</style>

<div x-data="clusterPanel()" x-init="init()">
  <span class="page-eyebrow">Distributed · inference</span>
  <h1 class="page-title">Cluster</h1>
  <p class="page-lead">
    Run a quant too big for one Mac across every Mac on your Thunderbolt ring.
    Peers are discovered automatically — no IPs, no hostfiles. A model's layers
    split across the machines by RAM and run <em>resident</em>, so a 46&nbsp;GB
    quant that SSD-streams on one Mac runs in memory across two.
  </p>

  <div class="cl-summary" x-show="nodes.length">
    <div><span class="num" x-text="nodes.length"></span><span class="lbl">nodes</span></div>
    <div><span class="num" x-text="combinedRam"></span><span class="lbl">combined&nbsp;RAM</span></div>
    <div><span class="num" :class="tbUp?'ok':'warn'" x-text="tbUp?'⚡ up':'down'"></span><span class="lbl">thunderbolt</span></div>
    <div><span class="num" :class="serving?'ok':''" x-text="serving?'serving':'idle'"></span><span class="lbl">status</span></div>
  </div>

  <!-- TOPOLOGY -->
  <div class="card topo-card">
    <div class="topo-head">
      <span>Topology</span>
      <button class="btn-mini" @click="refresh()" x-text="loading?'…':'↻ refresh'"></button>
    </div>
    <div class="topo-stage">
      <template x-if="!nodes.length">
        <div class="topo-empty">
          Searching for Macs on the local links…<br>
          Run <code>optiq cluster up</code> on your other Mac(s), on the same Thunderbolt/LAN.
        </div>
      </template>
      <div class="topo-row" x-show="nodes.length">
        <template x-for="(n, i) in nodes" :key="n.name + i">
          <div style="display:flex;align-items:center">
            <template x-if="i > 0">
              <div class="topo-link" :class="linkClass(n)">
                <span class="lk-rtt" x-text="rttLabel(n)"></span>
                <svg viewBox="0 0 112 20" preserveAspectRatio="none">
                  <line class="lk-wire" x1="0" y1="10" x2="112" y2="10"/>
                  <circle class="lk-dot lk-flow" cx="0" cy="10" r="3.5"/>
                </svg>
                <span class="lk-kind" x-text="n.link"></span>
              </div>
            </template>
            <div class="topo-node" :class="{self:n.is_self}">
              <div class="tn-top">
                <span class="tn-rank">rank <span x-text="i"></span></span>
                <template x-if="n.is_self"><span class="tn-self-badge">this mac</span></template>
              </div>
              <div class="tn-chip" x-text="n.chip"></div>
              <div class="tn-name" x-text="n.name"></div>
              <div class="tn-ram-bar"><div class="tn-ram-fill" :style="`width:${ramPct(n)}%`"></div></div>
              <div class="tn-meta"><span x-text="n.ram + ' GB'"></span><span x-text="'usable ' + usable(n) + ' GB'"></span></div>
              <div class="tn-share" x-text="'≈ ' + sharePct(i) + '% of layers'"></div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>

  <!-- SERVE CONTROL -->
  <div class="card" style="margin-top:20px">
    <h2 style="margin-top:0">Serve a model on the cluster</h2>
    <p class="muted" style="font-size:14px;margin-bottom:14px">
      Launches pipeline-parallel serving with an OpenAI endpoint. Refuses a slow
      link by default (pipeline over Wi-Fi is slower than one Mac) — pass a fast
      Thunderbolt ring and it flies.
    </p>
    <div class="cl-serve">
      <input x-model="model" placeholder="mlx-community/Qwen3.5-122B-A10B-OptiQ-2bit"/>
      <template x-if="!serving">
        <button class="btn btn-primary" @click="startServe()" x-text="starting?'starting…':'Start serving'"></button>
      </template>
      <template x-if="serving">
        <button class="btn btn-outline" @click="stopServe()">Stop</button>
      </template>
    </div>
    <div class="cl-err" x-show="err" x-text="err"></div>

    <!-- ACTIVE BACKEND BANNER -->
    <div class="cl-active" x-show="serving">
      <div>
        <div class="cl-active-title">This cluster is your active inference backend</div>
        <div class="cl-active-sub">Chat and Arena now run across the ring — nothing else to switch.</div>
      </div>
      <a class="btn btn-primary" href="{{ url_for('chat.chat_page') }}">Open Chat →</a>
    </div>
  </div>
</div>

<script>
function clusterPanel(){
  return {
    nodes:[], tbUp:false, serving:false, endpoint:null, model:'', loading:false,
    starting:false, err:'', _timer:null,
    init(){ this.refresh(); this._timer=setInterval(()=>this.refresh(true), 4000); },
    async refresh(quiet){
      if(!quiet) this.loading=true;
      try{
        const r=await fetch('/api/cluster/peers'); const d=await r.json();
        this.nodes=d.nodes||[]; this.tbUp=!!d.thunderbolt_up;
        this.serving=!!d.serving; this.endpoint=d.endpoint;
        if(d.model && !this.model) this.model=d.model;
      }catch(e){}
      this.loading=false;
    },
    get combinedRam(){ let s=this.nodes.reduce((a,n)=>a+(parseInt(n.ram)||0),0); return s?s+' GB':'—'; },
    usable(n){ return Math.max(2, (parseInt(n.ram)||16)-8); },
    ramPct(n){ let r=parseInt(n.ram)||16; return Math.min(100, Math.round(this.usable(n)/r*100)); },
    sharePct(i){ let w=this.nodes.map(n=>this.usable(n)); let t=w.reduce((a,b)=>a+b,0)||1; return Math.round(w[i]/t*100); },
    linkClass(n){ return (n.rtt!==null && n.rtt<=5) ? 'lk-fast' : 'lk-slow'; },
    rttLabel(n){ return n.rtt===null ? 'unreachable' : (n.link==='Thunderbolt'?'⚡ ':'')+n.rtt+' ms'; },
    async startServe(){
      this.err=''; this.starting=true;
      try{
        const r=await fetch('/api/cluster/serve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:this.model})});
        const d=await r.json();
        if(!d.ok){ this.err=(d.error||'failed')+(d.log?('\n\n'+d.log):''); }
        else{ this.endpoint=d.endpoint; this.serving=true; }
      }catch(e){ this.err=String(e); }
      this.starting=false; this.refresh();
    },
    async stopServe(){ await fetch('/api/cluster/stop',{method:'POST'}); this.serving=false; this.refresh(); },
  };
}
</script>
{% endblock %}