{% extends "base.html" %} {% block title %}Sessions · OpenBrowse{% endblock
%} {% block head %}
<style>
  .live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }
  .grid-tile {
    display: block;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
  }
  .grid-tile:hover {
    border-color: #333;
    text-decoration: none;
  }
  .grid-tile-feed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
  }
  .grid-tile-feed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
  }
  .grid-tile-label {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
  }
  .live-grid-empty {
    color: #666;
    font-size: 13px;
    padding: 24px 0;
  }
  .section-label {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 4px 0 12px;
  }
  .status-d-queued .status-dot {
    background: #9ca3af;
  }
  @keyframes statpulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  .status-d-running .status-dot {
    background: #60a5fa;
    box-shadow: 0 0 6px #60a5fa;
    animation: statpulse 1.6s ease-in-out infinite;
  }
  .status-d-success .status-dot {
    background: #34d399;
  }
  .status-d-failed .status-dot {
    background: #f87171;
  }
  .status-d-stopped .status-dot {
    background: #6b7280;
  }
  .copyable {
    cursor: pointer;
    border-bottom: 1px dotted #3a3a3a;
  }
  .copyable:hover {
    color: #e5e5e5;
    border-bottom-color: #888;
  }
  .copyable.copied {
    color: #34d399;
    border-bottom-color: #34d399;
  }
  .monitor-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .monitor-tile {
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    padding: 10px 12px 6px;
  }
  .monitor-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .monitor-title {
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .monitor-value {
    color: #e5e5e5;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .monitor-value.warn {
    color: #fbbf24;
  }
  .monitor-value.hot {
    color: #ef4444;
  }
  .monitor-tile svg {
    display: block;
    width: 100%;
    height: 36px;
  }
</style>
{% endblock %} {% block content %}
<h1>Sessions <span class="badge">{{ total }}</span></h1>

<div class="monitor-strip" id="monitor-strip" style="display: none">
  <div class="monitor-tile">
    <div class="monitor-head">
      <span class="monitor-title">CPU load / core</span>
      <span class="monitor-value" id="mon-cpu-val">–</span>
    </div>
    <svg id="mon-cpu" preserveAspectRatio="none" viewBox="0 0 200 36"></svg>
  </div>
  <div class="monitor-tile">
    <div class="monitor-head">
      <span class="monitor-title">Memory used</span>
      <span class="monitor-value" id="mon-mem-val">–</span>
    </div>
    <svg id="mon-mem" preserveAspectRatio="none" viewBox="0 0 200 36"></svg>
  </div>
  <div class="monitor-tile">
    <div class="monitor-head">
      <span class="monitor-title">Swap used</span>
      <span class="monitor-value" id="mon-swap-val">–</span>
    </div>
    <svg id="mon-swap" preserveAspectRatio="none" viewBox="0 0 200 36"></svg>
  </div>
</div>

<div id="live-section" {% if not live_sessions %}style="display: none"{% endif %}>
  <div class="section-label">Live</div>
  <div id="live-grid" class="live-grid"></div>
</div>

<div class="section-label">History</div>
<div
  hx-ext="sse"
  sse-connect="/sse/sessions"
  sse-swap="sessions"
  hx-target="#session-rows"
  hx-swap="innerHTML"
>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Session ID</th>
        <th>Profile ID</th>
        <th>Started</th>
        <th>Duration</th>
        <th>Cost (USD)</th>
      </tr>
    </thead>
    <tbody id="session-rows">
      {% include "_session_rows.html" %}
    </tbody>
  </table>
</div>

<script>
  (function () {
    const grid = document.getElementById("live-grid");
    const liveSection = document.getElementById("live-section");
    function esc(s) {
      return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
        return {
          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
          '"': "&quot;",
          "'": "&#39;",
        }[c];
      });
    }
    function liveViewUrl(u) {
      const m = String(u || "").match(/\/vnc\/([^/]+)\//);
      if (!m) return "";
      const id = m[1];
      return `/vnc/${id}/view?path=vnc/${id}/websockify`;
    }
    function labelHtml(item) {
      return (
        '<span class="status status-' +
        esc(item.status) +
        '"><span class="status-dot"></span> ' +
        esc(item.status) +
        '</span><span class="badge">' +
        esc(item.model || "\u2014") +
        "</span>"
      );
    }
    function buildTile(item) {
      const a = document.createElement("a");
      a.className = "grid-tile";
      a.href = "/session/" + item.id;
      a.setAttribute("data-session-id", String(item.id));
      const feed = document.createElement("div");
      feed.className = "grid-tile-feed";
      const iframe = document.createElement("iframe");
      iframe.src = liveViewUrl(item.liveUrl);
      iframe.setAttribute("tabindex", "-1");
      iframe.setAttribute("scrolling", "no");
      feed.appendChild(iframe);
      const label = document.createElement("div");
      label.className = "grid-tile-label";
      label.innerHTML = labelHtml(item);
      a.appendChild(feed);
      a.appendChild(label);
      return a;
    }
    function reconcile(items) {
      const incoming = new Map(items.map((i) => [String(i.id), i]));
      grid.querySelectorAll(".grid-tile").forEach((tile) => {
        if (!incoming.has(tile.getAttribute("data-session-id"))) tile.remove();
      });
      incoming.forEach((item, id) => {
        const existing = grid.querySelector(
          '.grid-tile[data-session-id="' + CSS.escape(id) + '"]'
        );
        if (existing) {
          const label = existing.querySelector(".grid-tile-label");
          if (label) label.innerHTML = labelHtml(item);
        } else {
          grid.appendChild(buildTile(item));
        }
      });
      liveSection.style.display = grid.querySelector(".grid-tile") ? "" : "none";
    }
    function connect() {
      const src = new EventSource("/sse/live-grid");
      src.addEventListener("live-grid", function (e) {
        try {
          reconcile(JSON.parse(e.data));
        } catch (err) {}
      });
      src.addEventListener("error", function () {
        if (src.readyState === EventSource.CLOSED) {
          src.close();
          setTimeout(connect, 2000);
        }
      });
    }
    connect();
  })();

  function handleSessionRowClick(event, id) {
    if (event.target.closest("[data-copy]")) return;
    window.location = "/session/" + id;
  }

  (function () {
    function fallbackCopy(text) {
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.style.position = "fixed";
      ta.style.left = "-9999px";
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch (err) {}
      document.body.removeChild(ta);
    }
    function copyText(text) {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).catch(function () {
          fallbackCopy(text);
        });
      } else {
        fallbackCopy(text);
      }
    }
    document.addEventListener("click", function (e) {
      const el = e.target.closest("[data-copy]");
      if (!el) return;
      e.preventDefault();
      copyText(el.getAttribute("data-copy"));
      const original = el.textContent;
      clearTimeout(el._copyTimeout);
      el.classList.add("copied");
      el.textContent = "copied";
      el._copyTimeout = setTimeout(function () {
        el.classList.remove("copied");
        el.textContent = original;
      }, 1000);
    });
  })();
</script>
<script>
  (function () {
    var strip = document.getElementById("monitor-strip");
    var CFG = [
      { svg: "mon-cpu", val: "mon-cpu-val", key: "loadPerCore", color: "#60a5fa",
        fmt: function (v) { return v.toFixed(2); }, max: null, threshold: 1.0 },
      { svg: "mon-mem", val: "mon-mem-val", key: "memUsedPct", color: "#2dd4bf",
        fmt: function (v) { return v.toFixed(0) + "%"; }, max: 100, threshold: null },
      { svg: "mon-swap", val: "mon-swap-val", key: "swapUsedMb", color: "#fbbf24",
        fmt: function (v) { return v >= 1024 ? (v / 1024).toFixed(1) + " GB" : v.toFixed(0) + " MB"; },
        max: null, threshold: null },
    ];
    var W = 200, H = 36, PAD = 2;

    function draw(cfg, hist, thresholds) {
      var svg = document.getElementById(cfg.svg);
      var valEl = document.getElementById(cfg.val);
      var pts = hist.map(function (s) { return s[cfg.key]; })
        .filter(function (v) { return v !== null && v !== undefined; });
      if (!pts.length) { valEl.textContent = "n/a"; return; }
      var last = pts[pts.length - 1];
      valEl.textContent = cfg.fmt(last);
      valEl.className = "monitor-value";
      if (cfg.key === "loadPerCore") {
        if (last >= thresholds.saturated) valEl.className += " hot";
        else if (last >= thresholds.elevated) valEl.className += " warn";
      }
      var max = cfg.max || Math.max.apply(null, pts.concat(cfg.threshold || 0)) * 1.15 || 1;
      var step = (W - PAD * 2) / Math.max(pts.length - 1, 1);
      function y(v) { return H - PAD - (Math.min(v, max) / max) * (H - PAD * 2); }
      var d = pts.map(function (v, i) {
        return (i ? "L" : "M") + (PAD + i * step).toFixed(1) + " " + y(v).toFixed(1);
      }).join(" ");
      var parts = [];
      if (cfg.threshold !== null && cfg.threshold < max) {
        parts.push('<line x1="0" x2="' + W + '" y1="' + y(cfg.threshold).toFixed(1) +
          '" y2="' + y(cfg.threshold).toFixed(1) +
          '" stroke="#ef4444" stroke-opacity="0.45" stroke-width="1" stroke-dasharray="3 3" />');
      }
      parts.push('<path d="' + d + '" fill="none" stroke="' + cfg.color +
        '" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />');
      svg.innerHTML = parts.join("");
      svg.parentElement.title =
        svg.parentElement.querySelector(".monitor-title").textContent +
        ": " + cfg.fmt(last) + " now, " + cfg.fmt(Math.max.apply(null, pts)) +
        " peak over the last hour";
    }

    function tick() {
      fetch("/system/metrics.json").then(function (r) { return r.json(); }).then(function (data) {
        if (!data.history || !data.history.length) return;
        strip.style.display = "";
        CFG.forEach(function (cfg) { draw(cfg, data.history, data.thresholds); });
      }).catch(function () {});
    }
    tick();
    setInterval(tick, 10000);
  })();
</script>
{% endblock %}