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/sets.js

@@ -2,7 +2,7 @@
 import { h, mount, table, modal, errorBox, field, input, checkbox, confirmDialog, badge, toast } from "../ui.js";
 import { get, api, change, can } from "../api.js";
 import { rerender } from "../app.js";
-import { listEditor, fmtSeconds, parseSeconds } from "../widgets.js";
+import { listEditor, fmtSeconds, parseSeconds, rowClass } from "../widgets.js";
 
 export async function render(el) {
   const sets = await get("/sets");
@@ -14,12 +14,12 @@ export async function render(el) {
     h("div", { class: "panel" }, table([
       { label: "Name", render: (s) => h("strong", null, s.name) },
       { label: "Entries", render: (s) => s.dynamic ? [badge("dynamic", "accent"), s.timeout ? " timeout " + fmtSeconds(s.timeout) : "", " ",
-        h("button", { class: "small", onclick: () => entries(s) }, "Entries…")] : h("span", { class: "mono small" }, s.entries.join(", ")) },
+        s.pending ? null : h("button", { class: "small", onclick: () => entries(s) }, "Entries…")] : h("span", { class: "mono small" }, s.entries.join(", ")) },
       { label: "Comment", render: (s) => s.comment },
-      write ? { label: "", tdClass: "actions-cell", render: (s) => [
+      write ? { label: "", tdClass: "actions-cell", render: (s) => s.pending === "deleted" ? badge("deleted", "err") : [
         h("button", { class: "small reveal", onclick: () => setDialog(s) }, "Edit"), " ",
         h("button", { class: "small reveal", onclick: () => del(s) }, "Delete")] } : null,
-    ].filter(Boolean), sets, { empty: "No sets yet." })));
+    ].filter(Boolean), sets, { empty: "No sets yet.", rowClass })));
 }
 
 async function del(s) {
@@ -30,7 +30,7 @@ async function del(s) {
 async function setDialog(s) {
   s = s || { entries: [] };
   const name = input({ value: s.name || "", placeholder: "trusted" });
-  const list = listEditor(s.entries, { placeholder: "10.0.10.0/24, 2001:db8:10::/64, 10.0.0.1-10.0.0.9", addLabel: "Add entry" });
+  const list = listEditor(s.entries, { placeholder: "192.168.1.0/24, 2001:db8:1::/64, 192.168.1.100-192.168.1.199", addLabel: "Add entry" });
   const dynamic = checkbox("dynamic: entries are added at run time", s.dynamic);
   const timeout = input({ value: s.timeout ? fmtSeconds(s.timeout) : "", placeholder: "1h, 1d (none: until removed)", class: "short" });
   const comment = input({ value: s.comment || "" });
@@ -57,7 +57,7 @@ async function entries(s) {
   const write = can("sets", true);
   const draw = async () => {
     const es = await get("/sets/" + encodeURIComponent(s.name) + "/elements");
-    const addr = input({ placeholder: "10.0.30.5 or 2001:db8::5", class: "mono" });
+    const addr = input({ placeholder: "192.168.1.50 or 2001:db8:1::50", class: "mono" });
     const t = input({ placeholder: s.timeout ? fmtSeconds(s.timeout) : "none", class: "short" });
     mount(body,
       table([