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/pages/nat.js

@@ -3,12 +3,12 @@
 import { h, mount, table, modal, errorBox, field, input, checkbox, confirmDialog, badge } from "../ui.js";
 import { get, change, can } from "../api.js";
 import { rerender } from "../app.js";
-import { names, matchEditor, describe, hits, counters, listEditor } from "../widgets.js";
+import { names, matchEditor, describe, hits, counters, listEditor, rowClass } from "../widgets.js";
 
 export async function render(el) {
   const [fwds, snats, redirects, cs] = await Promise.all([get("/forwards"), get("/snats"), get("/redirects"), counters()]);
   const write = can("config", true);
-  const actions = (kind, x, edit) => write ? [
+  const actions = (kind, x, edit) => x.pending === "deleted" ? badge("deleted", "err") : write ? [
     h("button", { class: "small reveal", onclick: () => edit(x) }, "Edit"), " ",
     h("button", { class: "small reveal", onclick: () => toggle(kind, x) }, x.disabled ? "Enable" : "Disable"), " ",
     h("button", { class: "small reveal", onclick: () => del(kind, x) }, "Delete")] : null;
@@ -25,7 +25,7 @@ export async function render(el) {
         { label: "Hairpin", render: (f) => f.hairpin ? badge((f.hairpin_sources || []).length ? "from " + f.hairpin_sources.join(", ") : "yes", "ok") : "" },
         { label: "Hits", render: (f) => hits(cs, "f" + f.id, "f" + f.id + "-6") },
         { label: "", tdClass: "actions-cell", render: (f) => actions("forwards", f, forwardDialog) },
-      ], fwds, { empty: "No port forwards.", rowClass: (x) => x.disabled ? "disabled" : "" })),
+      ], fwds, { empty: "No port forwards.", rowClass })),
     h("div", { class: "panel" },
       h("div", { class: "panel-head" }, h("h2", null, "Source NAT"), write ? h("button", { class: "primary small", onclick: () => snatDialog(null) }, "Add source NAT") : null),
       table([
@@ -35,7 +35,7 @@ export async function render(el) {
         { label: "Hits", render: (x) => hits(cs, "s" + x.id) },
         { label: "Comment", render: (x) => x.comment },
         { label: "", tdClass: "actions-cell", render: (x) => actions("snats", x, snatDialog) },
-      ], snats, { empty: "No source NAT.", rowClass: (x) => x.disabled ? "disabled" : "" })),
+      ], snats, { empty: "No source NAT.", rowClass })),
     h("div", { class: "panel" },
       h("div", { class: "panel-head" }, h("h2", null, "Redirects"), write ? h("button", { class: "primary small", onclick: () => redirectDialog(null) }, "Add redirect") : null),
       table([
@@ -44,7 +44,7 @@ export async function render(el) {
         { label: "Hits", render: (x) => hits(cs, "d" + x.id) },
         { label: "Comment", render: (x) => x.comment },
         { label: "", tdClass: "actions-cell", render: (x) => actions("redirects", x, redirectDialog) },
-      ], redirects, { empty: "No redirects.", rowClass: (x) => x.disabled ? "disabled" : "" })));
+      ], redirects, { empty: "No redirects.", rowClass })));
 }
 
 async function toggle(kind, x) {
@@ -78,13 +78,13 @@ async function dialog(title, kind, x, fields, value) {
 async function forwardDialog(f) {
   const n = await names();
   f = f || { protocols: ["tcp"], hairpin: true };
-  const name = input({ value: f.name || "", placeholder: "jellyfin" });
+  const name = input({ value: f.name || "", placeholder: "web" });
   const tcp = checkbox("TCP", f.protocols.includes("tcp")), udp = checkbox("UDP", f.protocols.includes("udp"));
-  const ports = input({ value: f.ports || "", placeholder: "8096 or 7777-7780", class: "mono" });
+  const ports = input({ value: f.ports || "", placeholder: "8080, or a range: 27015-27030", class: "mono" });
   const pub = listEditor(f.public_addresses, { suggestions: n.sets, placeholder: "your public IPv4 address, or a set", addLabel: "Add address" });
-  const to = input({ value: f.to || "", placeholder: "10.0.10.57", class: "mono" });
+  const to = input({ value: f.to || "", placeholder: "192.168.1.10", class: "mono" });
   const toPort = input({ value: f.to_port || "", placeholder: "the same", class: "mono short" });
-  const to6 = input({ value: f.to6 || "", placeholder: "2001:db8:10::57 (optional)", class: "mono" });
+  const to6 = input({ value: f.to6 || "", placeholder: "2001:db8:1::10 (optional)", class: "mono" });
   const src = listEditor(f.sources, { suggestions: n.sets, placeholder: "anywhere", addLabel: "Add source" });
   const hairpin = checkbox("the public address also works from inside (hairpin NAT)", f.hairpin);
   const hairSrc = listEditor(f.hairpin_sources, { suggestions: n.sets, placeholder: "all inside sources", addLabel: "Add source" });