{% extends "base.html" %}
{% block content %}
<div class="card">
  <div class="card-title" style="display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;flex-wrap:wrap">
    <div style="display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap">
      <span id="peers-count">{{ peer_count }} known peer{{ "s" if peer_count != 1 }}</span>
      <!-- Each of these doubles as the legend: the color is the same one
           the graph itself draws that state in (see nodeColor()), so
           there's nothing a separate swatch-and-label row would say that
           the number itself doesn't already say by being that color.
           Starts hidden and stays that way at 0 -- an empty bucket is the
           common, healthy case, not something worth a permanent line. -->
      <span id="net-stat-trusted-wrap" class="net-inline-stat" style="display:none">
        <span id="net-stat-trusted" style="color:#3ecf8e"></span> trusted</span>
      <span id="net-stat-cooldown-wrap" class="net-inline-stat" style="display:none">
        <span id="net-stat-cooldown" style="color:#7a7466"></span> cooldown</span>
      <span id="net-stat-seen-wrap" class="net-inline-stat" style="display:none">
        <span id="net-stat-seen" style="color:#7a8290"></span> seen, not held</span>
      <span class="net-inline-stat">tip <span id="net-stat-height"></span></span>
    </div>
    <a class="btn-sm" href="/api/peers/download" download="lapsecoin_peers.json">Download JSON</a>
  </div>
  {% if is_private %}
  <div class="stats" style="margin-bottom:.5rem">
    <div class="stat" style="flex:1 1 260px">
      <div class="stat-label">Add a peer manually</div>
      <form id="add-peer-form" style="display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.15rem">
        <input type="text" id="add-peer-host" placeholder="Host or IP" required style="flex:1;min-width:8rem">
        <input type="number" id="add-peer-port" placeholder="Port" min="1" max="65535" value="8333" required style="width:5.2rem">
        <button type="submit" class="btn-sm">Add</button>
      </form>
      <div id="add-peer-msg" style="font-size:.78rem;margin-top:.25rem"></div>
    </div>
  </div>
  {% endif %}
  <div id="topology" class="topology"></div>
</div>

<style>
  /* This page's whole point is the graph; nothing here is meant to be
     scrolled past to reach more of it, unlike the dashboard/explorer/board
     pages which have genuinely variable-length content. Scoped to this
     page only by virtue of living in its own <style> block: each page is
     a fresh document load, so this never touches any other page. */
  body { overflow: hidden; }
  .topology {
    /* JS (sizeTopology) sets the real height once the page has laid out,
       shrinking the graph to whatever's actually left after the header
       row and (if present) the add-peer form -- those must never be the
       thing that gets pushed off-screen by a short window, only the
       graph shrinks. This is just what shows before that first runs, and
       a floor if JS is somehow disabled. */
    height: 420px; min-height: 80px; margin: .6rem 0 .5rem;
    border: 1px solid var(--rule-lt);
    overflow: hidden;
    /* Dark on purpose, deliberately breaking from the page's paper theme
       for this one panel: a light background can't carry a glow, and the
       glow is most of what makes a graph like this read as alive rather
       than a diagram, the same reason every praised version of this
       (Obsidian's graph view chief among them) runs dark. */
    background: #14181c;
  }
  .net-inline-stat { font-size: .85rem; color: var(--muted); }
</style>
<script src="/vendor/force-graph.min.js"></script>
<script>
(function () {
  // active mirrors PeerPool's own state: only false after a real strike,
  // never a guessed timeout. A peer PeerPool actually drops just isn't
  // in graph_peers on the next poll.
  function nodeColor(p) {
    if (p.attempting) return "#e0912f";  // discovery is trying it right now
    if (!p.held) return "#7a8290";       // claimed only, unconfirmed by this node
    return p.active ? "#3ecf8e" : "#7a7466";
  }

  let graph = null, hoverNode = null;
  const connected = new Map();   // node id -> Set of directly linked node ids, rebuilt per render

  // A peer appearing or dropping off used to just pop in or vanish
  // between one poll and the next, no transition at all, exactly the
  // "robotically applied" look worth avoiding. nodeMeta/linkMeta are
  // persistent across renders (renderTopology mutates them in place
  // rather than building fresh arrays each time), each entry carrying
  // when it first appeared and, once it's no longer in the real data,
  // when it started disappearing; fadeAlpha turns that into a 0..1 value
  // any frame can read, growing in on arrival and shrinking out on
  // departure instead of cutting straight from 0 to 1 or 1 to 0.
  const FADE_MS = 550;
  const nodeMeta = new Map();   // id -> node object (persistent identity)
  const linkMeta = new Map();   // "src=>tgt" -> link object (persistent identity)

  // Rebuilt from linkMeta directly (not from a per-render wantLinks set)
  // so the fast 200ms prune tick can call it too: without this, a link
  // pruned between two 8s polls left degree-based sizing (nodeRadius)
  // reading a stale, too-high count for up to 8s after the edge it
  // counted had actually finished fading away.
  function rebuildConnected() {
    connected.clear();
    for (const [, l] of linkMeta) {
      if (l._vanishAt) continue;
      const src = l.source.id || l.source, tgt = l.target.id || l.target;
      if (!connected.has(src)) connected.set(src, new Set());
      if (!connected.has(tgt)) connected.set(tgt, new Set());
      connected.get(src).add(tgt);
      connected.get(tgt).add(src);
    }
  }

  function fadeAlpha(obj) {
    const now = performance.now();
    if (obj._vanishAt) return Math.max(0, 1 - (now - obj._vanishAt) / FADE_MS);
    return Math.min(1, (now - obj._firstSeenAt) / FADE_MS);
  }

  // Bigger with more connections, the same idea Obsidian's graph view
  // uses (a note more other notes reference draws bigger): degree is
  // real structure in the data, not a decoration, so letting it set size
  // means the graph's shape actually carries information at a glance.
  function nodeRadius(n) {
    const base = n.self ? 8 : (n.held === false ? 3 : 5);
    const degree = connected.get(n.id) ? connected.get(n.id).size : 0;
    return base + Math.min(6, Math.sqrt(degree) * 1.6);
  }

  // A small chain-link glyph (the standard hyperlink icon: two rounded
  // capsules crossing at 45°) in a node's corner for one whose
  // http_reachable answered a probe and is therefore actually clickable
  // (see onNodeClick/href below). Earlier tries were either too literal
  // (a box+arrow "external link" icon) or too loud (a ring around the
  // whole node, which changes its silhouette and draws the eye more than
  // a link should). This is small, muted, and reads as "link" on sight
  // rather than as a status indicator. Blue to match the rest of the
  // graph's own color language (introduced links use the same #7aa7e6),
  // reading as "this is a link" the way blue already does everywhere.
  function drawLinkIcon(n, ctx, r, fade) {
    if (!n.href || fade <= 0) return;
    const s = Math.max(3.2, r * 0.52);
    const cx = n.x + r * 0.62, cy = n.y - r * 0.62;
    ctx.save();
    ctx.globalAlpha = fade;
    ctx.strokeStyle = "#7aa7e6";
    ctx.lineWidth = Math.max(0.8, s * 0.22);
    ctx.lineCap = "round";
    ctx.translate(cx, cy);
    ctx.rotate(-Math.PI / 4);
    const capW = s * 0.62, capH = s * 0.34, rad = capH / 2, gap = s * 0.06;
    ctx.beginPath();
    ctx.roundRect(-capW - gap / 2, -capH / 2, capW, capH, rad);
    ctx.stroke();
    ctx.beginPath();
    ctx.roundRect(gap / 2, -capH / 2, capW, capH, rad);
    ctx.stroke();
    ctx.restore();
  }

  // A small red "X" badge, opposite corner from the link-icon badge above
  // so the two never collide, for a peer whose claimed tip this node can
  // directly check against its own chain (see api.py's _peer_fork_info)
  // and disagrees with. Only drawn when that check actually ran and came
  // back a mismatch, never for a peer whose claim simply couldn't be
  // verified (ahead of our own tip, or no INFO exchange yet), those are
  // "unknown", not "known fork", and look identical to a plain peer.
  function drawForkBadge(n, ctx, r, fade) {
    if (!n.isFork || fade <= 0) return;
    const s = Math.max(2.6, r * 0.42);
    const cx = n.x + r * 0.62, cy = n.y + r * 0.62;
    ctx.save();
    ctx.globalAlpha = fade;
    ctx.fillStyle = "#c0392b";
    ctx.beginPath();
    ctx.arc(cx, cy, s * 0.72, 0, 2 * Math.PI);
    ctx.fill();
    ctx.strokeStyle = "#14181c";
    ctx.lineWidth = Math.max(0.7, s * 0.2);
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(cx - s * 0.32, cy - s * 0.32);
    ctx.lineTo(cx + s * 0.32, cy + s * 0.32);
    ctx.moveTo(cx + s * 0.32, cy - s * 0.32);
    ctx.lineTo(cx - s * 0.32, cy + s * 0.32);
    ctx.stroke();
    ctx.restore();
  }

  function drawNode(n, ctx) {
    const fade = fadeAlpha(n);
    if (fade <= 0) return;
    const r = nodeRadius(n) * (0.4 + 0.6 * fade);   // grows in, shrinks out, not just fades
    const color = n.self ? "#e0912f" : nodeColor(n);
    const dimmed = hoverNode && hoverNode !== n.id && !connected.get(hoverNode)?.has(n.id);
    // A held peer glows steadily; a connection being attempted pulses
    // instead, since "in progress" is a different fact than "confirmed
    // reachable" and shouldn't read identically on the graph.
    const pulse = n.attempting ? .6 + .4 * Math.sin(performance.now() / 220) : 1;
    const glowing = !dimmed && (n.self || (n.held && n.active) || n.attempting);
    ctx.globalAlpha = (dimmed ? .25 : 1) * fade;
    if (glowing) {
      ctx.shadowColor = color;
      ctx.shadowBlur = (n.self ? 16 : 9) * pulse;
    }
    ctx.beginPath();
    ctx.arc(n.x, n.y, r, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.shadowBlur = 0;
    if (n.held === false) {
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#7a8290";
      ctx.stroke();
    }
    ctx.globalAlpha = 1;
    drawLinkIcon(n, ctx, r, dimmed ? .25 * fade : fade);
    drawForkBadge(n, ctx, r, dimmed ? .25 * fade : fade);
  }

  // Shrinks the graph, never the header row or the add-peer form above
  // it, to whatever vertical room a short window/zoom/split-screen
  // actually leaves: those controls must never be the thing pushed off
  // screen (body has overflow:hidden, so anything past the fold would
  // simply be unreachable), only the graph gives up space for them.
  // rect.top depends only on the content above the graph, never on the
  // graph's own current height, so this can't ratchet smaller call over
  // call the way measuring against a stale height would.
  function sizeTopology() {
    const el = document.getElementById("topology");
    const rect = el.getBoundingClientRect();
    const available = window.innerHeight - rect.top - 16;
    // A smaller-but-fully-visible graph beats a clipped one: at a truly
    // extreme viewport where even 160px doesn't fit above the fold (the
    // usual floor, kept for the common case so the graph doesn't get
    // uselessly tiny), shrink further rather than let it overflow, down
    // to 80px, past which there's nothing meaningful left to show anyway.
    const floor = Math.min(160, Math.max(80, available));
    const h = Math.max(floor, Math.min(420, available));
    el.style.height = h + "px";
    if (graph) graph.width(el.clientWidth).height(h);
  }

  function initTopology() {
    sizeTopology();
    const el = document.getElementById("topology");
    graph = ForceGraph()(el)
      .width(el.clientWidth)
      .height(el.clientHeight)
      .backgroundColor("#14181c")
      .nodeId("id")
      .nodeLabel(n => n.title)
      .nodeCanvasObject(drawNode)
      .onNodeHover(n => {
        hoverNode = n ? n.id : null;
        el.style.cursor = n && n.href ? "pointer" : null;
      })
      .nodePointerAreaPaint((n, color, ctx) => {
        if (fadeAlpha(n) <= 0) return;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(n.x, n.y, nodeRadius(n) + 2, 0, 2 * Math.PI);
        ctx.fill();
      })
      .linkColor(l => {
        const srcId = l.source.id || l.source, tgtId = l.target.id || l.target;
        const dim = hoverNode && srcId !== hoverNode && tgtId !== hoverNode;
        const fade = fadeAlpha(l) * (dim ? .25 : 1);
        if (l.attempting) return `rgba(224,145,47,${.6 * fade})`;
        return l.introduced ? `rgba(122,167,230,${.55 * fade})` : `rgba(255,255,255,${.18 * fade})`;
      })
      .linkWidth(l => l.introduced ? 1.4 : 1)
      // Particles are what carry the "this is live" feeling once the
      // layout itself has settled and stopped moving: a steady trickle
      // along every edge, denser on the edges backed by an actual claim,
      // fastest on one discovery is actively dialing right now.
      // Fading them out with the link (rather than an instant cutoff)
      // keeps a departing edge from just switching off mid-flow.
      .linkDirectionalParticles(l => fadeAlpha(l) > 0 ? (l.attempting ? 4 : (l.introduced ? 3 : 1)) : 0)
      .linkDirectionalParticleWidth(1.6)
      .linkDirectionalParticleSpeed(l => l.attempting ? 0.012 : 0.004)
      .linkDirectionalParticleColor(l => {
        const a = fadeAlpha(l);
        if (l.attempting) return `rgba(224,145,47,${.95 * a})`;
        return l.introduced ? `rgba(122,167,230,${.9 * a})` : `rgba(255,255,255,${.5 * a})`;
      })
      .cooldownTime(Infinity)
      .d3VelocityDecay(0.35)
      .minZoom(0.5)
      .maxZoom(6)
      .enableNodeDrag(true)
      .onNodeClick(n => { if (n.href) window.open(n.href, "_blank", "noopener"); })
      .onZoom(() => { if (!autoFitting) userZoomed = true; })
      .onEngineStop(maybeAutoFit);
    // A fixed stronger-charge/longer-link tuning was tried here and
    // measured against larger peer counts: it made crossings *worse* past
    // ~60 peers (more repulsion spreads the graph into a bigger ring
    // where more edge pairs happen to cross) while also bloating the
    // graph's footprint, so plain defaults stay. d3Force() returns the
    // underlying d3-force object, not the graph itself, so this can't
    // join the fluent chain above.
    //
    // A hard per-tick boundary force (clamping every node to the
    // currently visible box) was also tried and measured, and reverted:
    // it fought maybeAutoFit rather than complementing it, since clamping
    // every node into the current view keeps the graph's real bounding
    // box from ever growing past the canvas, which is exactly what
    // maybeAutoFit's fill-ratio check watches for before zooming out.
    // Instead of "zoom out to use the unused space" it just compressed
    // everyone into whatever box was already visible, raising density
    // and crossings. maybeAutoFit already handles the actual "don't run
    // out of room" case by zooming the camera out; this doesn't fight it.
    //
    // A per-tick randomized local crossing-reduction nudge ("try a random
    // node against a random nearby trial position, keep it only if that
    // node's own crossings go down") was also tried and measured: it made
    // crossings worse, not just a wash, at every scale tested (7-26%
    // above plain defaults). Injecting per-tick perturbations into a
    // simulation that runs forever (cooldownTime is Infinity, so it never
    // fully settles) apparently doesn't pay for the noise it adds. Not
    // worth carrying, so it's gone too; maybeAutoFit is what actually
    // earns its keep here.
    window.addEventListener("resize", () => {
      sizeTopology();
      maybeAutoFit();
    });
  }

  // Once the user has zoomed or panned by hand, their view wins from then
  // on: auto-fit only ever applies to a graph nobody has touched yet.
  let userZoomed = false;
  let autoFitting = false;   // suppresses onZoom's userZoomed=true during our own zoomToFit

  // Zooming out to fit is only for a graph that's genuinely outgrown the
  // box, not a reflex for whatever axis happens to be tight. .topology is
  // a wide, short strip, so height alone is nearly always the scarcer
  // dimension; triggering on that alone would auto-fit almost every real
  // graph the moment it had more than a couple of peers. Requiring BOTH
  // axes to be substantially filled (not just their product, which a
  // graph that's merely tall and thin could also satisfy) is what "used
  // up most of the rectangle" actually means here.
  const AUTOFIT_FILL_THRESHOLD = 0.85;

  function maybeAutoFit() {
    if (!graph || userZoomed) return;
    const bbox = graph.getGraphBbox();
    if (!bbox) return;
    const el = document.getElementById("topology");
    const cw = el.clientWidth, ch = el.clientHeight;
    if (cw <= 0 || ch <= 0) return;
    const w = bbox.x[1] - bbox.x[0], h = bbox.y[1] - bbox.y[0];
    const widthUsed = w / cw, heightUsed = h / ch;
    if (Math.min(widthUsed, heightUsed) < AUTOFIT_FILL_THRESHOLD) return;
    autoFitting = true;
    graph.zoomToFit(400, 30);
    setTimeout(() => { autoFitting = false; }, 450);
  }

  // Set on any render that actually adds, removes, or starts fading a
  // node or link; renderTopology reheats the simulation only then (see
  // its end), so the rest of the graph visibly responds to a real
  // structural change, moving to make room or close a gap, instead of
  // only the one node that's entering or leaving ever animating while
  // everything already settled sits frozen through it.
  let structureChanged = false;

  function upsertNode(id, fields) {
    let n = nodeMeta.get(id);
    if (!n) {
      n = { id, _firstSeenAt: performance.now(), _vanishAt: null };
      nodeMeta.set(id, n);
      structureChanged = true;
    } else if (n._vanishAt) {
      n._vanishAt = null;   // reappeared mid-fade-out: stop disappearing
      structureChanged = true;
    }
    Object.assign(n, fields);
    return n;
  }

  function upsertLink(source, target, fields) {
    const key = source + "=>" + target;
    let l = linkMeta.get(key);
    if (!l) {
      l = { source, target, _firstSeenAt: performance.now(), _vanishAt: null };
      linkMeta.set(key, l);
      structureChanged = true;
    } else if (l._vanishAt) {
      l._vanishAt = null;
      structureChanged = true;
    }
    Object.assign(l, fields);
    return l;
  }

  // Anything not touched by this render's upsert calls is no longer part
  // of the real data: start (or continue) fading it out rather than
  // deleting it outright, and only actually drop it once fadeAlpha hits 0.
  function sweep(meta, wantKeys) {
    for (const [key, obj] of meta) {
      if (wantKeys.has(key)) continue;
      if (!obj._vanishAt) { obj._vanishAt = performance.now(); structureChanged = true; }
      else if (fadeAlpha(obj) <= 0) meta.delete(key);
    }
  }

  // The number itself is the legend (see the card-title markup): shown
  // in the same color the graph draws that state in, and only shown at
  // all once it's actually nonzero, an empty bucket being the common,
  // uninteresting case.
  function setInlineStat(id, value) {
    document.getElementById(id).textContent = value;
    document.getElementById(id + "-wrap").style.display = value ? "" : "none";
  }

  function renderTopology(self, peers, claims, attempting) {
    if (!graph) initTopology();
    structureChanged = false;
    const known = new Set(peers.map(p => p.address));
    const attemptingSet = new Set(attempting);
    const wantNodes = new Set(["self"]);
    const wantLinks = new Set();

    upsertNode("self", { self: true, title: (self.addr || "self") + " (you)" });

    peers.forEach(p => {
      upsertNode(p.address, {
        // attempting explicitly cleared, not left out: Object.assign only
        // overwrites keys present here, so a node that was a connecting
        // candidate on an earlier poll and has since been admitted would
        // otherwise keep reading attempting:true forever, still pulsing
        // amber long after it settled into a real, held peer.
        active: p.active, held: true, attempting: false,
        isFork: !!p.is_fork,
        title: p.address + (p.height != null ? " · height " + p.height : "")
               + (p.active ? "" : " · cooldown")
               + (p.introduced_by ? " · introduced by " + p.introduced_by : "")
               // Only ever appended when is_fork is actually true, i.e.
               // this node has its own block at the peer's claimed height
               // and it disagrees (see api.py's _peer_fork_info) -- never
               // shown as a guess for a peer whose claim simply couldn't
               // be checked.
               + (p.is_fork ? " · known fork, " + p.fork_depth
                              + " block" + (p.fork_depth === 1 ? "" : "s") + " behind" : "")
               // Only when it actually differs from this node's own
               // version: agreeing with it is the common case and would
               // just be noise on every single peer.
               + (p.version && p.version !== self.version ? " · v" + p.version : ""),
        href: p.http_reachable ? "http://" + p.address : null,
      });
      wantNodes.add(p.address);
      // Always linked to self: this node admitted it into its own pool
      // regardless of who first mentioned it.
      upsertLink("self", p.address, {});
      wantLinks.add("self=>" + p.address);
    });

    // claims: {introducer: [addr, ...]}, each introducer's own most recent
    // PEERS message, from peers this node currently holds (see
    // PeerPool.record_claim). Drawn for every claimed address, not only
    // ones this node also admitted itself: a peer this node never managed
    // to reach is still real data an introducer gave it, and dropping it
    // would hide exactly the "who knows whom" picture a single node's own
    // admitted set can't show by itself. An address seen only this way
    // gets its own node, visually distinct (hollow, no pulse, no click
    // target) since this node has no first-hand confirmation of it.
    // Discovery is trying these right now (ping, relayed punch, direct
    // punch), which together can run tens of seconds: without this, a
    // peer only ever appeared on the graph the instant it was already
    // admitted, and everything discovery does before that was invisible.
    // A candidate that's also claimed or already held (a claim about an
    // address discovery hasn't finished dialing yet) is drawn once, as
    // attempting, not twice.
    attempting.forEach(addr => {
      if (addr === self.addr || known.has(addr)) return;
      upsertNode(addr, { attempting: true, held: false, title: addr + " · connecting…" });
      wantNodes.add(addr);
      upsertLink("self", addr, { attempting: true });
      wantLinks.add("self=>" + addr);
    });

    const unheldSeen = new Set();
    for (const introducer in claims) {
      if (!known.has(introducer)) continue;   // stale claim from an evicted peer
      claims[introducer].forEach(addr => {
        if (addr === self.addr) return;
        if (!known.has(addr)) {
          unheldSeen.add(addr);
          // Same staleness guard as the held-peer branch above: only
          // clear attempting for an address this same poll's attempting
          // list doesn't also name, or this would immediately undo the
          // attempting:true the block above just set for it.
          const fields = { held: false, title: addr + " · claimed by " + introducer + ", not held by this node" };
          if (!attemptingSet.has(addr)) fields.attempting = false;
          upsertNode(addr, fields);
          wantNodes.add(addr);
        }
        upsertLink(introducer, addr, { introduced: true });
        wantLinks.add(introducer + "=>" + addr);
      });
    }

    sweep(nodeMeta, wantNodes);
    sweep(linkMeta, wantLinks);
    rebuildConnected();

    graph.graphData({ nodes: [...nodeMeta.values()], links: [...linkMeta.values()] });
    if (structureChanged) graph.d3ReheatSimulation();

    const trusted  = peers.filter(p => p.active).length;
    const cooldown = peers.length - trusted;
    setInlineStat("net-stat-trusted", trusted);
    setInlineStat("net-stat-cooldown", cooldown);
    setInlineStat("net-stat-seen", unheldSeen.size);
    document.getElementById("net-stat-height").textContent = self.height;

    // The header's real height isn't known until the stat wraps above
    // have been shown or hidden for real data, which only just happened:
    // re-measure now rather than trusting sizeTopology()'s one call back
    // in initTopology(), made before any of this, against a header that
    // was still just its empty/hidden starting state.
    sizeTopology();
  }

  const statusEl = document.getElementById("live-status");

  async function refresh() {
    try {
      const res = await fetch("/api/peers", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const data = await res.json();

      renderTopology(data.self, data.graph_peers, data.claims || {}, data.attempting || []);

      document.getElementById("peers-count").textContent =
        data.peer_count + " known peer" + (data.peer_count !== 1 ? "s" : "");
      statusEl.textContent = "refreshed " + new Date().toLocaleTimeString();
    } catch (e) {
      statusEl.textContent = "live refresh paused (connection lost)";
    }
  }

  refresh();
  setInterval(refresh, 8000);

  // Independent of the 8s data poll: a node/link mid-fade-out needs
  // pruning the moment it actually finishes (FADE_MS, well under a
  // second), not whenever the next poll happens to land, or it lingers
  // invisible yet still influencing the physics simulation.
  setInterval(() => {
    if (!graph) return;
    let pruned = false;
    for (const [id, n] of nodeMeta) {
      if (n._vanishAt && fadeAlpha(n) <= 0) { nodeMeta.delete(id); pruned = true; }
    }
    for (const [key, l] of linkMeta) {
      if (l._vanishAt && fadeAlpha(l) <= 0) { linkMeta.delete(key); pruned = true; }
    }
    if (pruned) {
      rebuildConnected();
      graph.graphData({ nodes: [...nodeMeta.values()], links: [...linkMeta.values()] });
    }
  }, 200);

  const addForm = document.getElementById("add-peer-form");
  if (addForm) {
    addForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      const host = document.getElementById("add-peer-host").value.trim();
      const port = parseInt(document.getElementById("add-peer-port").value, 10);
      const msg = document.getElementById("add-peer-msg");
      msg.textContent = "";
      try {
        const res = await fetch("/api/peers/add", {
          method: "POST",
          headers: {"Content-Type": "application/json"},
          body: JSON.stringify({host, port}),
        });
        const data = await res.json();
        if (data.ok) {
          msg.textContent = "Added.";
          msg.style.color = "var(--green)";
          refresh();
        } else {
          msg.textContent = data.error || "Failed to add peer.";
          msg.style.color = "var(--red)";
        }
      } catch (err) {
        msg.textContent = "Request failed.";
        msg.style.color = "var(--red)";
      }
    });
  }
})();
</script>
{% endblock %}