feat: Kaskad Web UI v2 dashboard

System/services/NAT CRUD, iptables chain KASKAD_WEB, host-network Docker install, docker CLI in image for status row.

Co-authored-by: Cursor <cursoragent@cursor.com>

static/dashboard.js

@@ -0,0 +1,242 @@
+(function () {
+  const cred = { credentials: "same-origin" };
+
+  function api(path, opts) {
+    return fetch(path, Object.assign({}, cred, opts)).then(function (res) {
+      if (res.status === 401) {
+        window.location.reload();
+        throw new Error("401");
+      }
+      return res;
+    });
+  }
+
+  function pill(active) {
+    var s = (active || "").toLowerCase();
+    var cls = "pill";
+    if (s === "active") cls += " pill-active";
+    else if (s === "inactive" || s === "missing") cls += " pill-muted";
+    return '<span class="' + cls + '">' + escapeHtml(active || "—") + "</span>";
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function renderSystem(data) {
+    var g = document.getElementById("system-grid");
+    var cells = [
+      ["MachineId", data.machine_id],
+      ["Uptime", data.uptime],
+      ["Load", data.load],
+      ["Mem", data.mem],
+      ["IPADDR / IPv4", String(data.ipaddrs || "").replace(/\n/g, "<br>")],
+      ["yaskad", data.yaskad_version],
+      ["BOT_TOKEN", data.bot_token_masked],
+      ["BOT_CHAT_ID", data.bot_chat_masked],
+    ];
+    g.innerHTML = cells
+      .map(function (kv) {
+        return (
+          '<div class="sys-cell"><span class="sys-k">' +
+          escapeHtml(kv[0]) +
+          '</span><span class="sys-v">' +
+          kv[1] +
+          "</span></div>"
+        );
+      })
+      .join("");
+  }
+
+  function renderServices(rows) {
+    var tb = document.querySelector("#tbl-services tbody");
+    tb.innerHTML = (rows || [])
+      .map(function (r) {
+        return (
+          "<tr><td class=\"mono\">" +
+          escapeHtml(r.unit) +
+          "</td><td>" +
+          pill(r.active) +
+          "</td><td>" +
+          escapeHtml(r.enabled) +
+          "</td></tr>"
+        );
+      })
+      .join("");
+  }
+
+  function renderClients(list) {
+    var tb = document.querySelector("#tbl-clients tbody");
+    tb.innerHTML = (list || [])
+      .map(function (c) {
+        return (
+          "<tr data-id=\"" +
+          escapeHtml(c.id) +
+          "\"><td>" +
+          escapeHtml(c.user) +
+          "</td><td class=\"mono\">" +
+          escapeHtml(c.proto) +
+          "</td><td class=\"mono\">" +
+          escapeHtml(String(c.in_port)) +
+          '</td><td class="arrow-cell">→</td><td class="mono">' +
+          escapeHtml(c.target) +
+          "</td><td class=\"mono\">" +
+          escapeHtml(String(c.out_port)) +
+          "</td><td>" +
+          escapeHtml(c.note || "") +
+          "</td><td>" +
+          escapeHtml(c.where || "") +
+          '</td><td class="row-actions"><button type="button" class="icon-btn edit" title="Изменить">✎</button> <button type="button" class="icon-btn del" title="Удалить">✕</button></td></tr>'
+        );
+      })
+      .join("");
+
+    tb.querySelectorAll("tr").forEach(function (row) {
+      var id = row.getAttribute("data-id");
+      row.querySelector(".edit").addEventListener("click", function () {
+        openModalEdit(id);
+      });
+      row.querySelector(".del").addEventListener("click", function () {
+        if (!confirm("Удалить правило?")) return;
+        api("/api/clients/" + encodeURIComponent(id), { method: "DELETE" })
+          .then(function (r) {
+            return r.json();
+          })
+          .then(function () {
+            loadClients();
+          })
+          .catch(function () {});
+      });
+    });
+  }
+
+  function loadSystem() {
+    return api("/api/system")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(renderSystem);
+  }
+
+  function loadServices() {
+    return api("/api/services")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (d) {
+        renderServices(d.services);
+      });
+  }
+
+  function loadClients() {
+    return api("/api/clients")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (d) {
+        renderClients(d.clients);
+      });
+  }
+
+  function loadAll() {
+    return Promise.all([loadSystem(), loadServices(), loadClients()]).catch(function (e) {
+      console.warn(e);
+    });
+  }
+
+  var overlay = document.getElementById("modal-overlay");
+  var form = document.getElementById("form-client");
+
+  function openModalNew() {
+    document.getElementById("modal-title").textContent = "Новый клиент";
+    form.reset();
+    document.getElementById("f-id").value = "";
+    overlay.hidden = false;
+  }
+
+  function openModalEdit(id) {
+    api("/api/clients")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (d) {
+        var c = (d.clients || []).find(function (x) {
+          return x.id === id;
+        });
+        if (!c) return;
+        document.getElementById("modal-title").textContent = "Изменить клиента";
+        document.getElementById("f-id").value = c.id;
+        document.getElementById("f-user").value = c.user;
+        document.getElementById("f-proto").value = c.proto;
+        document.getElementById("f-in").value = c.in_port;
+        document.getElementById("f-target").value = c.target;
+        document.getElementById("f-out").value = c.out_port;
+        document.getElementById("f-note").value = c.note || "";
+        document.getElementById("f-where").value = c.where || "";
+        overlay.hidden = false;
+      });
+  }
+
+  function closeModal() {
+    overlay.hidden = true;
+  }
+
+  form.addEventListener("submit", function (ev) {
+    ev.preventDefault();
+    var fd = new FormData(form);
+    var body = {
+      user: fd.get("user"),
+      proto: fd.get("proto"),
+      in_port: parseInt(fd.get("in_port"), 10),
+      target: fd.get("target"),
+      out_port: parseInt(fd.get("out_port"), 10),
+      note: fd.get("note") || "",
+      where: fd.get("where") || "",
+    };
+    var cid = (fd.get("id") || "").toString().trim();
+    var url = cid ? "/api/clients/" + encodeURIComponent(cid) : "/api/clients";
+    var method = cid ? "PUT" : "POST";
+    api(url, {
+      method: method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    })
+      .then(function (r) {
+        return r.json().then(function (j) {
+          if (!r.ok) throw new Error(j.error || r.status);
+          return j;
+        });
+      })
+      .then(function () {
+        closeModal();
+        loadClients();
+      })
+      .catch(function (e) {
+        alert(e.message || String(e));
+      });
+  });
+
+  document.getElementById("modal-cancel").addEventListener("click", closeModal);
+  overlay.addEventListener("click", function (ev) {
+    if (ev.target === overlay) closeModal();
+  });
+
+  document.getElementById("btn-add-client").addEventListener("click", openModalNew);
+  document.getElementById("btn-refresh").addEventListener("click", loadAll);
+
+  document.getElementById("btn-load-iptables").addEventListener("click", function () {
+    api("/api/iptables/raw")
+      .then(function (r) {
+        return r.json();
+      })
+      .then(function (d) {
+        document.getElementById("iptables-out").textContent = d.raw || "";
+      });
+  });
+
+  loadAll();
+})();

static/styles.css

@@ -32,6 +32,249 @@ a {
   padding: 1.25rem clamp(1rem, 3vw, 1.5rem) 3rem;
 }
 
+.shell-wide {
+  max-width: min(1180px, 100%);
+}
+
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.product-title {
+  font-size: clamp(1.15rem, 3vw, 1.45rem);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.btn-ghost {
+  background: transparent;
+}
+
+.btn-sm {
+  padding: 0.35rem 0.65rem;
+  font-size: 0.82rem;
+}
+
+.card {
+  margin-top: 1rem;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--card);
+  padding: 1rem 1.1rem;
+}
+
+.card-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
+}
+
+.card-head .card-title {
+  margin: 0;
+}
+
+.sys-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.65rem;
+}
+
+.sys-cell {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 0.55rem 0.65rem;
+  background: #0a0f16;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.sys-k {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+}
+
+.sys-v {
+  font-size: 0.88rem;
+  word-break: break-word;
+}
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+.table-scroll {
+  max-width: 100%;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+
+.data-table th,
+.data-table td {
+  border: 1px solid var(--line);
+  padding: 0.45rem 0.55rem;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.data-table thead th {
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.data-table tbody tr:hover {
+  background: rgba(125, 211, 252, 0.04);
+}
+
+.pill {
+  display: inline-block;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  border: 1px solid var(--line);
+  background: rgba(0, 0, 0, 0.25);
+}
+
+.pill-active {
+  border-color: rgba(52, 211, 153, 0.45);
+  background: rgba(52, 211, 153, 0.12);
+  color: #6ee7b7;
+}
+
+.pill-muted {
+  color: var(--muted);
+}
+
+.arrow-cell {
+  text-align: center;
+  color: var(--muted);
+  width: 2rem;
+}
+
+.row-actions {
+  white-space: nowrap;
+}
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0 0.15rem;
+}
+
+.icon-btn.del {
+  color: #f87171;
+}
+
+.panel-fold.card-inner {
+  margin-top: 1rem;
+}
+
+.mono-block {
+  margin-top: 0.65rem;
+  padding: 0.75rem;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: #0a0f16;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ui-monospace, "JetBrains Mono", monospace;
+  font-size: 0.78rem;
+  color: #cbd5f5;
+  max-height: 22rem;
+  overflow: auto;
+}
+
+.pad-v {
+  margin: 0;
+}
+
+.modal-overlay[hidden] {
+  display: none !important;
+}
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 50;
+}
+
+.modal {
+  width: min(480px, 100%);
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 1rem 1.15rem;
+}
+
+.modal h3 {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.55rem 0.75rem;
+}
+
+.form-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.78rem;
+  color: var(--muted);
+}
+
+.form-grid input,
+.form-grid select {
+  padding: 0.45rem 0.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: #0a0f16;
+  color: var(--text);
+  font: inherit;
+}
+
+.span-2 {
+  grid-column: span 2;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 0.35rem;
+}
+
 .site-header {
   border: 1px solid var(--line);
   border-radius: 14px;
@@ -90,7 +333,8 @@ h1 {
   overflow: hidden;
 }
 
-.panel-fold > summary {
+.panel-fold > summary,
+.panel-fold .fold-sum {
   list-style: none;
   cursor: pointer;
   padding: 0.85rem 1rem;
@@ -101,14 +345,21 @@ h1 {
   border-bottom: 1px solid transparent;
 }
 
-.panel-fold > summary::-webkit-details-marker {
+.panel-fold > summary::-webkit-details-marker,
+.panel-fold .fold-sum::-webkit-details-marker {
   display: none;
 }
 
-.panel-fold[open] > summary {
+.panel-fold[open] > summary,
+.panel-fold[open] .fold-sum {
   border-bottom-color: var(--line);
 }
 
+.panel-fold[open] > summary .fold-arrow,
+.panel-fold[open] .fold-sum .fold-arrow {
+  transform: rotate(90deg);
+}
+
 .fold-arrow {
   width: 0;
   height: 0;
@@ -119,10 +370,6 @@ h1 {
   transition: transform 0.15s ease;
 }
 
-.panel-fold[open] > summary .fold-arrow {
-  transform: rotate(90deg);
-}
-
 .fold-h {
   font-weight: 700;
   font-size: 1rem;