Jarl 0.1.0: manage BIND through a web UI, REST API and CLI

Jarl keeps a BIND 9.20 server's whole configuration (views, ACLs, TSIG
keys, zones of every type, records, named.conf options) in SQLite and
renders named.conf, keys.conf and zone files from it.

Every change goes through one changeset pipeline: whole-configuration
validation, named-checkconf -z and named-checkzone in a staging
directory, atomic install, rndc reconfig/reload, serial verification
with rndc zonestatus, and rollback if named does not load the change.
Changes apply one at a time by default or are bundled and applied
together. Applied changesets can be reverted.

- jarld: the daemon with the REST API and an embedded web UI, plus import,
  adopt, check, resync, backup and local user recovery commands
- jarl: the CLI, including ACME DNS-01 hooks for certbot and acme.sh
- users with argon2id passwords and CSRF-protected sessions; hashed API
  tokens with granular grants and roles; an audit log
- systemd unit, sysusers.d/tmpfiles.d files, Makefile
- unit tests, integration tests against a real named, scripts/e2e.sh
- docs/ guides, README and CHANGELOG

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

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

@@ -0,0 +1,59 @@
+import { h, mount, table, toast, confirmDialog, diffView, time, fmtTime, badge, plural } from "../ui.js";
+import { api, get, useDraft } from "../api.js";
+
+export async function render(el, params) {
+  if (params.id) return detail(el, params.id);
+  const list = h("div");
+  let rows = [];
+  const load = async (before) => {
+    const page = await get("/changesets", { status: "applied", limit: 50, before });
+    rows = rows.concat(page);
+    mount(list, table([
+      { label: "#", render: (c) => h("a", { href: "#/history/" + c.id }, String(c.id)) },
+      { label: "Applied", render: (c) => time(c.applied_at) },
+      { label: "By", render: (c) => c.applied_by || c.username },
+      { label: "Via", render: (c) => badge(c.via) },
+      { label: "Description", render: (c) => h("a", { href: "#/history/" + c.id }, c.description || "(no description)") },
+      { label: "Operations", render: (c) => String((c.ops || []).length), tdClass: "right" },
+    ], rows, { empty: "Nothing has been applied yet." }),
+      page.length === 50 ? h("div", { style: { marginTop: "8px" } }, h("button", { onclick: () => load(rows[rows.length - 1].id) }, "Load older")) : null);
+  };
+  mount(el, h("div", { class: "page-head" }, h("div", { class: "grow" }, h("h1", null, "History"),
+    h("div", { class: "muted" }, "Every applied changeset, with the exact changes made to BIND's files. Any of them can be reverted."))),
+    h("div", { class: "panel" }, list));
+  await load();
+}
+
+async function detail(el, id) {
+  const c = await get("/changesets/" + id);
+  const res = c.result || {};
+  mount(el,
+    h("div", { class: "page-head" },
+      h("div", { class: "grow" },
+        h("h1", null, "Changeset #" + c.id),
+        h("div", { class: "muted" }, c.description || "(no description)")),
+      h("div", { class: "actions" },
+        h("a", { class: "button", href: "#/history" }, "All changes"),
+        c.status === "applied" && c.undoable ? h("button", { onclick: () => revert(c) }, "Revert…") : null)),
+    h("div", { class: "panel" }, h("dl", { class: "kv" },
+      h("dt", null, "Status"), h("dd", null, badge(c.status, c.status === "applied" ? "ok" : "")),
+      h("dt", null, "Created"), h("dd", null, fmtTime(c.created_at) + " by " + c.username + " via " + c.via),
+      c.applied_at ? [h("dt", null, "Applied"), h("dd", null, fmtTime(c.applied_at) + " by " + c.applied_by)] : null,
+      (res.serials || []).length ? [h("dt", null, "Serials"), h("dd", { class: "mono" }, res.serials.map((s) => s.zone.replace(/\.$/, "") + (s.view ? " [" + s.view + "]" : "") + ": " + s.old + " → " + s.new).join(", "))] : null,
+      (res.warnings || []).length ? [h("dt", null, "Warnings"), h("dd", null, res.warnings.join("; "))] : null)),
+    h("div", { class: "panel" }, h("h2", null, plural((c.ops || []).length, "operation")), table([
+      { label: "#", render: (o) => String(o.seq) },
+      { label: "Change", render: (o) => o.summary || o.op, tdClass: "mono small" },
+    ], c.ops || [])),
+    h("div", { class: "panel" }, h("h2", null, "File changes"), diffView(c.diff)));
+}
+
+async function revert(c) {
+  if (!(await confirmDialog("Revert changeset #" + c.id, "This creates a new changeset that undoes these changes. You can review it before applying.", "Create revert", "primary"))) return;
+  try {
+    const rev = await api("POST", "/changesets/" + c.id + "/revert");
+    useDraft(rev);
+    toast("Created changeset #" + rev.id + "; review and apply it");
+    location.hash = "#/changes";
+  } catch (e) { toast(e.message, "err", 8000); }
+}