Encrypted DNS health, comparing a zone's views, --local everywhere

jarld checks the DoT and DoH listeners every 10 minutes as a client would (page, dashboard, jarl encrypted-dns health, jarl_encrypted_dns_up). The Compare views tab and jarl zone diff show what differs between a zone's views, with Use this version. --local works on unlinked zones. A changed certificates.dir is followed by encrypted DNS's tls statements. Sharing an already shared version replaces other views' overrides.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/pages/encdns.js

@@ -2,7 +2,7 @@
 // set up and what to give clients, and a setup that obtains the
 // certificate if needed, checks the ports and stages named's
 // configuration like any change.
-import { h, mount, field, input, badge, toast, errorBox, confirmDialog, copyBox, checkbox } from "../ui.js";
+import { h, mount, field, input, badge, toast, errorBox, confirmDialog, copyBox, checkbox, fmtTime, relTime } from "../ui.js";
 import { api, get, change, describeResult, state } from "../api.js";
 import { rerender } from "../app.js";
 
@@ -50,6 +50,7 @@ function statusPanel(s) {
   }
   return [
     h("div", { class: "panel" }, h("h2", null, "Set up ", badge("on", "ok")), h("dl", { class: "kv" }, rows)),
+    healthPanel(s.health),
     h("div", { class: "panel" }, h("h2", null, "For your clients"),
       h("p", { class: "muted small" }, "Clients check the certificate against the host name, so it must resolve to this server for them (Jarl added it to the private views you chose). Open the ports in the server's firewall for your networks only."),
       clients),
@@ -223,3 +224,28 @@ async function disable() {
     rerender();
   } catch (e) { toast(e.message, "err", 8000); }
 }
+
+// healthPanel shows the last check of the listeners: Jarl connects to each
+// as a client would, checks the certificate and asks a question.
+function healthPanel(hl) {
+  const kind = { dot: "DNS over TLS", doh: "DNS over HTTPS" };
+  const out = h("div");
+  const draw = (x) => {
+    if (!x) return mount(out, h("div", { class: "muted" }, "Not checked yet: Jarl checks a minute after it starts, then every 10 minutes."));
+    mount(out, h("ul", { class: "probes" }, x.probes.map((p) => h("li", null,
+      badge(p.ok ? "working" : "not working", p.ok ? "ok" : "err"), " ",
+      h("strong", null, kind[p.kind]), " ", h("span", { class: "mono" }, p.address + " port " + p.port),
+      p.ok ? h("span", { class: "muted small" }, "  answered " + p.rcode + " in " + p.ms + " ms" + (p.cert_not_after ? " · certificate until " + fmtTime(p.cert_not_after) : "")) : null,
+      p.problem ? h("div", { class: "msg err small" }, p.problem) : null,
+      p.warning ? h("div", { class: "msg warn small" }, p.warning) : null))),
+      h("div", { class: "muted small" }, "Checked ", relTime(x.checked), "."));
+  };
+  draw(hl);
+  const btn = h("button", { class: "small", onclick: async () => {
+    btn.disabled = true;
+    try { draw(await api("POST", "/encrypted-dns/health", { body: {} })); } catch (e) { toast(e.message, "err", 8000); } finally { btn.disabled = false; }
+  } }, "Check now");
+  return h("div", { class: "panel" }, h("div", { class: "page-head" }, h("h2", { class: "grow" }, "Health"), h("div", { class: "actions" }, btn)),
+    h("p", { class: "muted small" }, "Jarl connects to each listener as a client would: the certificate must be for the host name, current, and the one Jarl last wrote; then it asks for the host name."),
+    out);
+}