{% extends "base.html" %}
{% block title %}{{ agent.hostname }} · {{ org.name }}{% endblock %}
{% block content %}

<style>
  .ad-head { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
  .ad-status { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); }
  .ad-status .pulse { width:8px; height:8px; border-radius:50%; background:var(--muted-2); }
  .ad-status.is-online { color:var(--ok); border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.10); }
  .ad-status.is-online .pulse { background:var(--ok); animation:ad-pulse 1.6s ease-out infinite; }
  @keyframes ad-pulse { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }

  .live { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; margin-bottom:14px; box-shadow:var(--shadow-1); }
  .live-top { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
  @media (max-width:820px){ .live-top { grid-template-columns:1fr; } }
  .live h3 { margin:0 0 9px; font:700 11px/1 var(--font-sans); letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
  .mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

  .cores { display:grid; grid-template-columns:repeat(2,1fr); gap:5px 14px; }
  @media (max-width:560px){ .cores { grid-template-columns:1fr; } }
  .core { display:flex; align-items:center; gap:8px; font-size:11px; }
  .core .nm { color:var(--muted-2); width:26px; }
  .core .track { flex:1; height:9px; background:var(--surface-3); border-radius:3px; overflow:hidden; }
  .core .fill { height:100%; width:0; border-radius:3px; transition:width .25s ease, background .25s; }
  .core .pc { width:34px; text-align:right; color:var(--ink-2); }

  .gauges { display:flex; flex-direction:column; gap:10px; }
  .g { }
  .g-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; margin-bottom:3px; }
  .g-row .k { color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-size:10.5px; font-weight:700; }
  .g-row .v { color:var(--ink); } .g-row .v b { font-size:15px; }
  .g-row .sub { color:var(--muted-2); font-size:11px; }
  .bar { height:11px; background:var(--surface-3); border-radius:3px; overflow:hidden; }
  .bar > span { display:block; height:100%; width:0; border-radius:3px; transition:width .3s ease, background .3s; }

  .readouts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
  @media (max-width:560px){ .readouts { grid-template-columns:repeat(2,1fr); } }
  .ro { background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:9px 11px; }
  .ro .k { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
  .ro .v { font-size:15px; color:var(--ink); margin-top:3px; } .ro .v small { color:var(--muted); font-size:11px; }
  .ro canvas { width:100%; height:26px; display:block; margin-top:5px; }

  .procs { margin-top:12px; }
  .procs table { width:100%; border-collapse:collapse; font-size:12px; }
  .procs th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:4px 8px; border-bottom:1px solid var(--line); }
  .procs td { padding:4px 8px; border-bottom:1px solid var(--line-soft); }
  .procs td.num { text-align:right; }
  .procs .nm { color:var(--ink-2); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .procs .warm { color:var(--muted); padding:14px 8px; }

  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 16px 12px; box-shadow:var(--shadow-1); }
  .card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  .card-title { font-size:14px; font-weight:700; margin:0; }
  .ranges { display:flex; gap:5px; flex-wrap:wrap; }
  .ranges button, .legend button { cursor:pointer; font:600 12px/1 var(--font-sans); color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
  .ranges button.on { background:var(--accent-soft); border-color:var(--accent-ring); color:#fff; }
  .legend { display:flex; gap:6px; flex-wrap:wrap; }
  .legend button { display:inline-flex; align-items:center; gap:6px; } .legend button .sw { width:10px; height:10px; border-radius:3px; background:var(--c); } .legend button.off { opacity:.4; }
  .chart-head2 { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
  .canvas-wrap { position:relative; } #hist { width:100%; height:240px; display:block; }
  .tip { position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%); background:var(--surface-3); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:var(--shadow-2); white-space:nowrap; z-index:5; }
  .tip .tt { color:var(--muted); font-family:var(--font-mono); font-size:11px; margin-bottom:5px; }
  .tip .row { display:flex; align-items:center; gap:7px; margin:2px 0; } .tip .row .sw { width:8px; height:8px; border-radius:2px; } .tip .row b { margin-left:auto; }
  .foot { display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:11.5px; color:var(--muted-2); flex-wrap:wrap; }
</style>

<div class="ad-head">
  <div>
    <p class="crumb"><a href="/dashboard">Dashboard</a> &rsaquo; <a href="/orgs/{{ org.id }}">{{ org.name }}</a> &rsaquo;</p>
    <h1 class="page-title">{{ agent.hostname }}</h1>
    <p class="muted">{{ agent.os }} {{ agent.os_version or '' }} &middot; agent v{{ agent.agent_version or '?' }} &middot; enrolled {{ agent.enrolled_at| pt('%Y-%m-%d') }}</p>
  </div>
  <div style="margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap">
    {% if agent.isolated %}<span class="ad-status" style="color:#f97373; border-color:rgba(249,115,115,.4); background:rgba(249,115,115,.12)" title="Network isolated by EDR">&#9940; isolated</span>{% endif %}
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/security">Security{% if open_detections %} <span class="nav-badge">{{ open_detections }}</span>{% endif %}</a>
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/forensics" title="Forensic triage snapshot">Forensics</a>
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/software" title="Installed software">Software</a>
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/patches" title="OS updates">Patches</a>
    <a class="btn btn-ghost" href="/orgs/{{ org.id }}/agents/{{ agent.id }}/ssh" target="_blank" rel="noopener" title="Direct SSH terminal (LAN / WireGuard VPN) - no Mesh password">SSH &rsaquo;</a>
    {% if remote.configured %}
      {% set osl = (agent.os or '')|lower %}
      {% if osl == 'windows' or osl == 'darwin' %}
        <a class="btn btn-primary" href="{{ remote.url }}?type=desktop" target="_blank" rel="noopener" title="Remote desktop (GUI session)">Remote desktop &rsaquo;</a>
        <a class="btn btn-ghost" href="{{ remote.url }}?type=terminal" target="_blank" rel="noopener" title="Terminal / shell session">Terminal &rsaquo;</a>
      {% else %}
        <a class="btn btn-primary" href="{{ remote.url }}?type=terminal" target="_blank" rel="noopener" title="Shell access — the way to reach a headless Linux/server (no GUI to remote into)">Remote terminal &rsaquo;</a>
        <a class="btn btn-ghost" href="{{ remote.url }}?type=files" target="_blank" rel="noopener" title="Browse &amp; transfer files">Files &rsaquo;</a>
      {% endif %}
    {% else %}
      <a class="btn btn-ghost" href="{{ remote.url }}" target="_blank" rel="noopener" title="MeshCentral not configured — opens console">Remote control &rsaquo;</a>
    {% endif %}
  </div>
  <div class="ad-status" id="status"><span class="pulse"></span><span id="status-text">connecting…</span></div>
</div>

<!-- ===== LIVE (btop-style) ===== -->
<div class="live">
  <div class="live-top">
    <div>
      <h3>CPU &middot; per core <span id="cpu-agg" class="mono" style="float:right;color:var(--ink)"></span></h3>
      <div class="cores" id="cores"><span class="procs warm">warming up…</span></div>
    </div>
    <div class="gauges">
      <div class="g">
        <div class="g-row"><span class="k">Memory</span><span class="v"><b id="mem-pct">—</b>% <span class="sub" id="mem-sub"></span></span></div>
        <div class="bar"><span id="mem-bar"></span></div>
      </div>
      <div class="g">
        <div class="g-row"><span class="k">Swap</span><span class="v mono" id="swap-pct">—</span></div>
        <div class="bar"><span id="swap-bar"></span></div>
      </div>
      <div class="g">
        <div class="g-row"><span class="k">Disk /</span><span class="v"><b id="disk-pct">—</b>% <span class="sub" id="disk-sub"></span></span></div>
        <div class="bar"><span id="disk-bar"></span></div>
      </div>
    </div>
  </div>

  <div class="readouts">
    <div class="ro"><div class="k">Net ↓ down</div><div class="v mono" id="net-rx">—</div><canvas id="spark-rx"></canvas></div>
    <div class="ro"><div class="k">Net ↑ up</div><div class="v mono" id="net-tx">—</div><canvas id="spark-tx"></canvas></div>
    <div class="ro"><div class="k">Load avg</div><div class="v mono" id="load">—</div><canvas id="spark-cpu"></canvas></div>
    <div class="ro"><div class="k">Uptime</div><div class="v mono" id="uptime">—</div><div class="k" style="margin-top:6px">Mem trend</div><canvas id="spark-mem"></canvas></div>
  </div>

  <div class="procs">
    <h3 style="margin-top:14px">Top processes</h3>
    <table><thead><tr><th>PID</th><th>Process</th><th class="num">CPU%</th><th class="num">Mem%</th></tr></thead>
      <tbody id="procs"><tr><td colspan="4" class="warm">waiting for live samples…</td></tr></tbody>
    </table>
  </div>
</div>

<!-- ===== HISTORY ===== -->
<div class="card">
  <div class="card-head">
    <h2 class="card-title">Resource history</h2>
    <div class="ranges" id="ranges">
      <button data-r="24h" class="on">24h</button>
      <button data-r="48h">48h</button>
      <button data-r="7d">7d</button>
      <button data-r="ytd">YTD</button>
      <button data-r="5y">5y</button>
    </div>
  </div>
  <div class="chart-head2">
    <div class="legend" id="legend">
      <button data-k="cpu" style="--c:var(--accent)"><span class="sw"></span>CPU</button>
      <button data-k="ram" style="--c:var(--ok)"><span class="sw"></span>Memory</button>
      <button data-k="disk" style="--c:var(--info)"><span class="sw"></span>Disk</button>
    </div>
  </div>
  <div class="canvas-wrap"><canvas id="hist"></canvas><div class="tip" id="tip"></div></div>
  <div class="foot"><span id="hist-hint">&nbsp;</span><span id="hist-updated"></span></div>
</div>

<script>
(function(){
  "use strict";
  var ORG={{ org.id }}, AID="{{ agent.id }}";
  var METRICS="/orgs/"+ORG+"/agents/"+AID+"/metrics.json";
  var LIVE="/orgs/"+ORG+"/agents/"+AID+"/live.json";
  var COL={cpu:"#e63946",ram:"#4ade80",disk:"#60a5fa"};
  var NAME={cpu:"CPU",ram:"Memory",disk:"Disk"};
  function $(id){ return document.getElementById(id); }
  function pad2(n){ return n<10?"0"+n:""+n; }
  function hhmm(e){ var d=new Date(e*1000); return pad2(d.getHours())+":"+pad2(d.getMinutes()); }
  function sev(p){ return p>=85?"#f97373":p>=60?"#fbbf24":"#4ade80"; }
  function fmtRate(k){ if(k==null) return "—"; return k>=1024?(k/1024).toFixed(1)+" MB/s":Math.round(k)+" KB/s"; }
  function fmtUp(s){ if(s==null) return "—"; var d=Math.floor(s/86400),h=Math.floor(s%86400/3600),m=Math.floor(s%3600/60); return (d?d+"d ":"")+h+"h "+m+"m"; }
  function ago(iso){ if(!iso) return "never"; var s=Math.max(0,(Date.now()-new Date(iso).getTime())/1000); if(s<60)return Math.round(s)+"s ago"; if(s<3600)return Math.round(s/60)+"m ago"; if(s<86400)return Math.round(s/3600)+"h ago"; return Math.round(s/86400)+"d ago"; }

  // ---------- LIVE PANEL ----------
  var live={samples:[],online:false,last_seen:null};
  function setStatus(){
    var st=$("status"); st.className="ad-status"+(live.online?" is-online":"");
    $("status-text").textContent=(live.online?"Live":"Offline")+" · last seen "+ago(live.last_seen);
  }
  function setBar(id,pct){ var el=$(id); el.style.width=Math.max(0,Math.min(100,pct||0))+"%"; el.style.background=sev(pct||0); }
  function renderCores(cores){
    var box=$("cores");
    if(!cores||!cores.length){ return; }
    var html="";
    for(var i=0;i<cores.length;i++){
      var v=cores[i];
      html+='<div class="core"><span class="nm mono">C'+i+'</span><span class="track"><span class="fill" style="width:'+Math.min(100,v)+'%;background:'+sev(v)+'"></span></span><span class="pc mono">'+v.toFixed(0)+'%</span></div>';
    }
    box.innerHTML=html;
  }
  function renderProcs(procs){
    var tb=$("procs");
    if(!procs||!procs.length){ return; }
    tb.innerHTML=procs.map(function(p){
      return '<tr><td class="mono">'+p.pid+'</td><td class="nm">'+(p.name||"?")+'</td><td class="num mono">'+p.cpu.toFixed(1)+'</td><td class="num mono">'+p.mem.toFixed(1)+'</td></tr>';
    }).join("");
  }
  function spark(id,vals,color,fixedMax){
    var c=$(id); if(!c) return; var W=c.clientWidth,H=c.clientHeight,dpr=window.devicePixelRatio||1;
    c.width=W*dpr; c.height=H*dpr; var x=c.getContext("2d"); x.setTransform(dpr,0,0,dpr,0,0); x.clearRect(0,0,W,H);
    if(!vals.length) return;
    var max=fixedMax||Math.max(1,Math.max.apply(null,vals));
    var n=vals.length;
    x.beginPath(); x.moveTo(0,H);
    for(var i=0;i<n;i++){ var px=(i/(n-1||1))*W, py=H-(vals[i]/max)*(H-2)-1; x.lineTo(px,py); }
    x.lineTo(W,H); x.closePath(); x.fillStyle=color+"22"; x.fill();
    x.beginPath();
    for(var j=0;j<n;j++){ var qx=(j/(n-1||1))*W, qy=H-(vals[j]/max)*(H-2)-1; j?x.lineTo(qx,qy):x.moveTo(qx,qy); }
    x.strokeStyle=color; x.lineWidth=1.4; x.lineJoin="round"; x.stroke();
  }
  function renderLive(d){
    live=d; setStatus();
    var ss=d.samples||[]; if(!ss.length) return;
    var s=ss[ss.length-1];
    $("cpu-agg").textContent=(s.cpu_pct!=null?s.cpu_pct.toFixed(1):"0")+"%";
    renderCores(s.cores);
    $("mem-pct").textContent=(s.ram_pct!=null?s.ram_pct.toFixed(0):"—");
    $("mem-sub").textContent=(s.ram_used_mb!=null?(s.ram_used_mb+" / "+(s.ram_total_mb||"?")+" MB"):"");
    setBar("mem-bar",s.ram_pct);
    $("swap-pct").textContent=(s.swap_pct!=null?s.swap_pct.toFixed(1)+"%":"—"); setBar("swap-bar",s.swap_pct);
    $("disk-pct").textContent=(s.disk_pct!=null?s.disk_pct.toFixed(0):"—");
    $("disk-sub").textContent=(s.disk_free_gb!=null?(s.disk_free_gb.toFixed(0)+" GB free"):""); setBar("disk-bar",s.disk_pct);
    $("net-rx").textContent=fmtRate(s.net_rx_kbps); $("net-tx").textContent=fmtRate(s.net_tx_kbps);
    $("load").textContent=(s.load1!=null?(s.load1.toFixed(2)+"  "+s.load5.toFixed(2)+"  "+s.load15.toFixed(2)):"—");
    $("uptime").textContent=fmtUp(s.uptime_s);
    renderProcs(s.procs);
    spark("spark-cpu", ss.map(function(x){return x.cpu_pct||0;}), COL.cpu, 100);
    spark("spark-mem", ss.map(function(x){return x.ram_pct||0;}), COL.ram, 100);
    spark("spark-rx", ss.map(function(x){return x.net_rx_kbps||0;}), "#60a5fa", 0);
    spark("spark-tx", ss.map(function(x){return x.net_tx_kbps||0;}), "#fbbf24", 0);
  }
  function pollLive(){
    fetch(LIVE,{credentials:"same-origin"}).then(function(r){return r.json();}).then(renderLive).catch(function(){});
  }

  // ---------- HISTORY CHART ----------
  var hist={{ initial | tojson }};
  var curRange="24h", visH={cpu:true,ram:true,disk:true}, hoverH=null, geomH=null;
  var cv=$("hist"), ctx=cv.getContext("2d"), tip=$("tip");
  var PAD={l:38,r:14,t:12,b:24};
  function drawHist(){
    var ser=hist.series||[]; var W=cv.clientWidth,H=cv.clientHeight,dpr=window.devicePixelRatio||1;
    cv.width=W*dpr; cv.height=H*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,W,H);
    var x0=PAD.l,x1=W-PAD.r,y0=PAD.t,y1=H-PAD.b,pW=x1-x0,pH=y1-y0;
    var tMax=hist.now?Math.floor(new Date(hist.now).getTime()/1000):Date.now()/1000;
    var tMin=hist.since?Math.floor(new Date(hist.since).getTime()/1000):tMax-86400;
    geomH={x0:x0,x1:x1,y0:y0,y1:y1,tMin:tMin,tMax:tMax};
    var xOf=function(t){return x0+(t-tMin)/(tMax-tMin)*pW;}, yOf=function(v){return y1-Math.max(0,Math.min(100,v))/100*pH;};
    ctx.font="11px "+getComputedStyle(document.body).fontFamily; ctx.textBaseline="middle";
    [0,25,50,75,100].forEach(function(p){ var y=yOf(p); ctx.strokeStyle=p===0?"rgba(255,255,255,.16)":"rgba(255,255,255,.06)"; ctx.lineWidth=1; ctx.beginPath(); ctx.moveTo(x0,y); ctx.lineTo(x1,y); ctx.stroke(); ctx.fillStyle="#6b7280"; ctx.textAlign="right"; ctx.fillText(p+"%",x0-6,y); });
    ctx.textAlign="center"; ctx.textBaseline="top";
    var span=tMax-tMin, oneDay=span>3*86400;
    for(var k=0;k<=6;k++){ var t=tMin+k*span/6, x=xOf(t); ctx.strokeStyle="rgba(255,255,255,.04)"; ctx.beginPath(); ctx.moveTo(x,y0); ctx.lineTo(x,y1); ctx.stroke(); var dd=new Date(t*1000); var lab=oneDay?(pad2(dd.getMonth()+1)+"/"+pad2(dd.getDate())):hhmm(t); ctx.fillStyle="#6b7280"; ctx.fillText(lab,x,y1+6); }
    if(!ser.length){ ctx.fillStyle="#9aa0aa"; ctx.textAlign="center"; ctx.textBaseline="middle"; ctx.fillText("No data in this range yet.",(x0+x1)/2,(y0+y1)/2); return; }
    ["disk","ram","cpu"].forEach(function(key){
      if(!visH[key])return; var pts=ser.map(function(s){return {x:xOf(s.t),y:yOf(s[key])};});
      var g=ctx.createLinearGradient(0,y0,0,y1); g.addColorStop(0,COL[key]+"33"); g.addColorStop(1,COL[key]+"00");
      ctx.beginPath(); ctx.moveTo(pts[0].x,y1); pts.forEach(function(p){ctx.lineTo(p.x,p.y);}); ctx.lineTo(pts[pts.length-1].x,y1); ctx.closePath(); ctx.fillStyle=g; ctx.fill();
      ctx.beginPath(); pts.forEach(function(p,i){i?ctx.lineTo(p.x,p.y):ctx.moveTo(p.x,p.y);}); ctx.strokeStyle=COL[key]; ctx.lineWidth=1.8; ctx.lineJoin="round"; ctx.stroke();
    });
    if(hoverH!=null&&ser[hoverH]){ var s=ser[hoverH],hx=xOf(s.t); ctx.strokeStyle="rgba(255,255,255,.22)"; ctx.lineWidth=1; ctx.beginPath(); ctx.moveTo(hx,y0); ctx.lineTo(hx,y1); ctx.stroke();
      ["cpu","ram","disk"].forEach(function(key){ if(!visH[key])return; ctx.beginPath(); ctx.arc(hx,yOf(s[key]),3.5,0,Math.PI*2); ctx.fillStyle=COL[key]; ctx.fill(); ctx.lineWidth=2; ctx.strokeStyle="#161a22"; ctx.stroke(); }); }
  }
  function histTip(){ var ser=hist.series||[],s=ser[hoverH]; if(!s){tip.style.opacity=0;return;}
    var rows=["cpu","ram","disk"].filter(function(k){return visH[k];}).map(function(k){return '<div class="row"><span class="sw" style="background:'+COL[k]+'"></span>'+NAME[k]+'<b>'+s[k].toFixed(1)+'%</b></div>';}).join("");
    var dd=new Date(s.t*1000), lab=pad2(dd.getMonth()+1)+"/"+pad2(dd.getDate())+" "+hhmm(s.t)+" PT";
    tip.innerHTML='<div class="tt">'+lab+'</div>'+rows;
    var hx=geomH.x0+(s.t-geomH.tMin)/(geomH.tMax-geomH.tMin)*(geomH.x1-geomH.x0);
    tip.style.left=Math.max(54,Math.min(cv.clientWidth-54,hx))+"px"; tip.style.top=(geomH.y0+4)+"px"; tip.style.opacity=1;
  }
  cv.addEventListener("mousemove",function(ev){ var ser=hist.series||[]; if(!geomH||!ser.length)return; var r=cv.getBoundingClientRect(),mx=ev.clientX-r.left; var t=geomH.tMin+(mx-geomH.x0)/(geomH.x1-geomH.x0)*(geomH.tMax-geomH.tMin); var best=0,bd=Infinity; for(var i=0;i<ser.length;i++){var d=Math.abs(ser[i].t-t); if(d<bd){bd=d;best=i;}} hoverH=best; drawHist(); histTip(); });
  cv.addEventListener("mouseleave",function(){ hoverH=null; tip.style.opacity=0; drawHist(); });
  function histMeta(){ var c=hist.count||0,span=c*(hist.interval_s||30); $("hist-hint").textContent=c?(c+" samples in range"):""; $("hist-updated").textContent="history "+hist.range+" · updated "+hhmm(Math.floor(Date.now()/1000))+" PT"; }
  function loadRange(rk){ curRange=rk; fetch(METRICS+"?range="+rk,{credentials:"same-origin"}).then(function(r){return r.json();}).then(function(p){ hist=p; hoverH=null; drawHist(); histMeta(); }).catch(function(){}); }

  $("ranges").addEventListener("click",function(ev){ var b=ev.target.closest("button"); if(!b)return; [].forEach.call(this.querySelectorAll("button"),function(x){x.classList.remove("on");}); b.classList.add("on"); loadRange(b.getAttribute("data-r")); });
  $("legend").addEventListener("click",function(ev){ var b=ev.target.closest("button"); if(!b)return; var k=b.getAttribute("data-k"); visH[k]=!visH[k]; b.classList.toggle("off",!visH[k]); drawHist(); });
  var rt; window.addEventListener("resize",function(){ clearTimeout(rt); rt=setTimeout(function(){drawHist(); renderLive(live);},120); });

  // boot
  setStatus(); drawHist(); histMeta();
  pollLive(); setInterval(pollLive,1000);
  setInterval(function(){ loadRange(curRange); },30000);
})();
</script>


<style>
  .cc-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .cc-sel { background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:6px 10px; font:inherit; }
  .cc-tbl { width:100%; border-collapse:collapse; font-size:13px; }
  .cc-tbl th { text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; padding:6px 8px; border-bottom:1px solid var(--line); }
  .cc-tbl td { padding:6px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
  .cc-st { font:700 10.5px/1 var(--font-mono); padding:3px 7px; border-radius:999px; border:1px solid var(--line); }
  .cc-done { color:var(--ok); } .cc-error { color:var(--bad); } .cc-pending, .cc-sent { color:var(--warn); }
  .cc-out { background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:8px; max-height:300px; overflow:auto; font-size:11.5px; white-space:pre; margin:.3rem 0 0; }
</style>

<div class="card" id="commands" style="margin-top:14px">
  <div class="cc-head">
    <h2 class="card-title">Commands <span class="muted" style="font-weight:500; font-size:12px">read-only &middot; runs within ~15s</span></h2>
    <form method="post" action="/orgs/{{ org.id }}/agents/{{ agent.id }}/command" style="display:flex; gap:8px; align-items:center">
      <select name="ctype" class="cc-sel">
        {% for t in cmd_types %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
      </select>
      <button class="btn btn-primary" type="submit">Run</button>
    </form>
  </div>
  {% if commands %}
  <table class="cc-tbl">
    <thead><tr><th>Type</th><th>Status</th><th>Exit</th><th>When (PT)</th><th>Output</th></tr></thead>
    <tbody>
    {% for c in commands %}
    <tr>
      <td class="mono">{{ c.ctype }}</td>
      <td><span class="cc-st cc-{{ c.status }}">{{ c.status }}</span></td>
      <td class="mono">{{ c.exit_code if c.exit_code is not none else '' }}</td>
      <td class="mono muted">{{ c.created_at| pt('%m-%d %H:%M:%S') }}</td>
      <td>{% if c.result %}<details><summary>view</summary><pre class="cc-out">{{ c.result }}</pre></details>{% else %}<span class="muted">pending&hellip;</span>{% endif %}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  <p class="muted" style="font-size:12px; margin-top:8px">Refresh the page to see results land. Destructive/EDR/remote actions live on the <a href="/orgs/{{ org.id }}/agents/{{ agent.id }}/security">Security</a> tab, behind an approval gate.</p>
  {% else %}
  <p class="muted">No commands run yet &mdash; pick one above and hit Run.</p>
  {% endif %}
</div>

{% endblock %}