Add changesets, bandwidth limits and quotas; generic examples

Changesets, as in Jarl: configuration changes are operations that can be
staged in a changeset, checked as they are added (validation and nft -c),
reviewed with the diff of the ruleset, and applied together as one
history entry, then on probation like any change made over the network.
The web UI collects edits for review by default (pending rows, a bar with
Review and Apply now, a Changes page, a switch for live edits); hc stages
with -C ID or HOUSECARL_CHANGESET (checked like JARL_CHANGESET) and has
hc changeset create/list/show/diff/apply/discard/remove. Undo, import and
takeover refuse a changeset. --dry-run shows the ruleset's diff.

Bandwidth and quotas: rate limits in bytes, per source or destination;
quotas per rule or per address that reset daily, weekly, monthly on a
day, or by hand, with their usage carried across reloads, saved for
reboots, shown by hc quotas and on the rules page, and reset with hc rule
reset-quota. Rules that count traffic are checked before established
connections are accepted (so they see every packet) and can't accept.
Per-address limits group IPv6 by /64 by default (--group-v4/-v6).
Per-source rate meters use update. The importer turns meters, byte rates
and quotas into these fields.

The examples in the web UI, hc's help and the docs use documentation
addresses and generic names instead of the maintainer's network.

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

internal/web/static/assets/app.js

@@ -1,7 +1,8 @@
 // Housecarl web UI: router, layout, login and the probation banner.
-import { h, mount, toast, errorBox } from "./ui.js";
+import { h, mount, toast, errorBox, modal } from "./ui.js";
 import { wordmark, logo } from "./brand.js";
-import { api, get, state, can, setUnauthorizedHandler, setChangeHandler } from "./api.js";
+import { api, get, state, can, setUnauthorizedHandler, setChangeHandler, loadDraft, onDraftChange, setImmediate, useDraft } from "./api.js";
+import * as changes from "./pages/changes.js";
 import * as dashboard from "./pages/dashboard.js";
 import * as rules from "./pages/rules.js";
 import * as nat from "./pages/nat.js";
@@ -27,6 +28,7 @@ const routes = [
   { pattern: /^log$/, page: log, nav: "log" },
   { pattern: /^settings$/, page: settings, nav: "settings" },
   { pattern: /^import$/, page: importPage, nav: "import" },
+  { pattern: /^changes$/, page: changes, nav: "changes" },
   { pattern: /^history$/, page: history, nav: "history" },
   { pattern: /^history\/(\d+)$/, page: history, nav: "history", params: ["id"] },
   { pattern: /^audit$/, page: audit, nav: "audit" },
@@ -46,6 +48,7 @@ const navItems = [
     ["services", "#/services", "Services", "config"],
   ] },
   ["log", "#/log", "Log", "log"],
+  ["changes", "#/changes", "Changes", "config"],
   ["history", "#/history", "History", "config"],
   { menu: "Server", items: [
     ["settings", "#/settings", "Settings and built-ins", "config"],
@@ -56,7 +59,7 @@ const navItems = [
 ];
 
 const app = document.getElementById("app");
-let mainEl, navEl, bannerEl, current = { key: "" }, routeGen = 0;
+let mainEl, navEl, bannerEl, barEl, modeHolder, current = { key: "" }, routeGen = 0;
 
 function parseHash() {
   const raw = location.hash.replace(/^#\/?/, "");
@@ -92,6 +95,8 @@ async function loggedIn(me) {
   state.me = me;
   state.csrf = me.csrf_token || "";
   layout();
+  onDraftChange(renderBar);
+  if (can("config", true)) await loadDraft();
   window.addEventListener("hashchange", route);
   await route();
 }
@@ -100,6 +105,8 @@ function layout() {
   navEl = h("nav", { class: "main" });
   mainEl = h("main");
   bannerEl = h("div", { class: "probation-banner hidden", role: "alert" });
+  barEl = h("div");
+  modeHolder = can("config", true) ? h("span") : null;
   const me = state.me;
   const header = h("header", { class: "top" },
     h("a", { class: "brand", href: "#/", title: "Dashboard" },
@@ -107,16 +114,66 @@ function layout() {
       wordmark({ rule: false, height: 17, cls: "brand-name" })),
     navEl,
     h("div", { class: "header-right" },
+      modeHolder,
       menu(h("span", { class: "user", title: (me.permissions || []).join("\n") }, me.user.username), [
         h("a", { href: "#/account" }, "Account"),
         me.admin ? h("a", { href: "#/users" }, "Users") : null,
         h("button", { type: "button", class: "menu-item", onclick: logout }, "Log out"),
       ], { right: true, active: ["account", "users"].includes(current.nav), label: "Account menu" })));
-  mount(app, h("div", { class: "shell" }, header, bannerEl, mainEl, footer(me.build)));
+  mount(app, h("div", { class: "shell" }, header, barEl, bannerEl, mainEl, footer(me.build)));
   renderNav();
   refreshProbation();
 }
 
+// ---- pending changes: edits are staged for review (as in Jarl)
+
+// renderBar shows the pending-changes bar (while there are pending
+// changes) and the Review/Live switch in the header.
+function renderBar() {
+  if (!barEl) return;
+  const d = state.draft;
+  const n = d ? (d.ops || []).length : 0;
+  if (modeHolder) {
+    const live = state.immediate;
+    mount(modeHolder, h("button", {
+      type: "button", class: "mode-toggle" + (live ? " live" : ""), "aria-pressed": live ? "true" : "false",
+      title: live ? "Edits are applied right away (each on probation over the network). Click to collect them for review first."
+        : "Edits are collected as pending changes, reviewed with the ruleset's diff and applied together under Changes. Click to apply edits right away.",
+      onclick: () => { setImmediate(!live); rerender(); },
+    }, h("span", { class: "dot" }), live ? "Live edits" : "Review edits"));
+  }
+  mount(barEl, n > 0 && !state.immediate ? h("div", { class: "pending-bar" },
+    h("strong", null, n === 1 ? "1 pending change" : n + " pending changes"),
+    h("span", { class: "muted" }, "Collected in changeset #" + d.id + "; not in force yet."),
+    h("a", { class: "button small", href: "#/changes" }, "Review"),
+    h("button", { class: "primary small apply-now", title: "Apply the pending changes now, without reviewing them first", onclick: (ev) => applyDraft(ev.target, d) }, "Apply now")) : null);
+}
+
+// applyDraft applies the draft changeset from the bar and stays on the
+// page. If it is refused, a dialog says why and leads to Changes.
+export async function applyDraft(btn, d, description) {
+  btn.disabled = true;
+  const label = btn.textContent;
+  btn.textContent = "Applying…";
+  try {
+    const r = await api("POST", "/changesets/" + d.id + "/apply", { body: { description: description || "" } });
+    useDraft(null);
+    if (r.confirm_by) toast("Applied changeset #" + d.id + " on probation (history #" + r.history_id + "): confirm it in the banner", "warn", 8000);
+    else toast("Applied changeset #" + d.id + " (history #" + r.history_id + ")");
+    for (const w of r.warnings || []) toast(w.message + (w.object ? " (" + w.object + ")" : ""), "warn", 10000);
+    await refreshProbation();
+    return r;
+  } catch (e) {
+    btn.disabled = false;
+    btn.textContent = label;
+    const review = await modal("The changes were not applied", errorBox(e), [{ label: "Close", value: false }, { label: "Review changes", kind: "primary", value: true }], { wide: true });
+    if (review) location.hash = "#/changes";
+    return null;
+  } finally {
+    rerender();
+  }
+}
+
 // ---- probation: changes made here roll back unless confirmed
 
 let probationTimer = null, deadline = 0, pending = 0;