Names beside inside addresses

Reverse lookups (internal/names, POST /names) put a name beside each
inside address in connections, the log, quota usage, the dashboard's
quotas and the statistics' devices and blocked sources, in the web UI
and hc (--no-names to leave them out). Only inside addresses are looked
up: an inside zone's networks, and private ones outside the external
zones'. Names are cached (names.cache, 10m) and never stored;
names.resolver picks the DNS server.

Also: hc stats top devices listed each device twice; the dashboard's
quotas named the rule's ID twice.

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

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

@@ -2,7 +2,7 @@
 import { h, mount, table, modal, errorBox, field, input, select, checkbox, confirmDialog, badge, textarea, toast } from "../ui.js";
 import { get, api, change, can } from "../api.js";
 import { rerender } from "../app.js";
-import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas, usageBar } from "../widgets.js";
+import { names, matchEditor, describe, hits, counters, listEditor, rowClass, live, fmtBytes, quotas, usageBar, lookupNames, named } from "../widgets.js";
 
 const chains = [
   ["input", "Input", "Traffic to the firewall itself."],
@@ -179,10 +179,11 @@ function quotaLine(r, q) {
 }
 
 async function usageDialog(r, q) {
+  const names = await lookupNames(q.addresses.map((a) => a.address));
   await modal("Quota usage of " + (r.comment || "rule #" + r.id), h("div", null,
     h("p", { class: "muted" }, "Each " + (r.quota.per_source ? "source" : "destination") + " has " + fmtBytes(r.quota.bytes) + "."),
     table([
-      { label: "Address", render: (a) => h("span", { class: "mono" }, a.address) },
+      { label: "Address", render: (a) => h("span", { class: "mono" }, named(names, a.address)) },
       { label: "Used", render: (a) => fmtBytes(a.used) },
       { label: "", render: (a) => usageBar(a.used, r.quota.bytes) },
     ], q.addresses)), [{ label: "Close", value: null }], { wide: true });