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

@@ -3,7 +3,7 @@
 import { h, mount, table, badge, problemsList, time, plural } from "../ui.js";
 import { get, can } from "../api.js";
 import { onLeave } from "../app.js";
-import { describe, hits, humanCount, fmtBytes, usageBar } from "../widgets.js";
+import { describe, hits, humanCount, fmtBytes, usageBar, lookupNames, named } from "../widgets.js";
 import { lineChart, chartCard, legend, timeTable, stepSeconds } from "../charts.js";
 import { bytes } from "./stats.js";
 
@@ -55,7 +55,7 @@ export async function render(el) {
           { label: "Hits", render: (r) => hits(cs, "r" + r.id) },
           { label: "Comment", render: (r) => r.comment },
         ], busiest)) : null,
-      quotas.length ? quotaPanel(quotas) : null,
+      quotas.length ? quotaPanel(quotas, await lookupNames(quotas.map((q) => (q.addresses || [])[0]).filter(Boolean).map((a) => a.address))) : null,
       log.length ? h("div", { class: "panel" },
         h("div", { class: "panel-head" }, h("h2", null, "Latest logged packets"), h("a", { class: "button small", href: "#/log" }, "The log")),
         table([
@@ -73,16 +73,16 @@ export async function render(el) {
 
 // quotaPanel lists every rule's quota with what it used: the total, or
 // for a per-address quota the busiest address (the rest are on the rule).
-function quotaPanel(quotas) {
+function quotaPanel(quotas, names) {
   const perAddress = (q) => q.quota.per_source || q.quota.per_destination;
   const used = (q) => perAddress(q) ? ((q.addresses || [])[0] || { used: 0 }).used : q.used;
   return h("div", { class: "panel" },
     h("div", { class: "panel-head" }, h("h2", null, "Quotas"), h("a", { class: "button small", href: "#/stats" }, "Statistics")),
     table([
-      { label: "Rule", render: (q) => h("a", { href: "#/rules?rule=" + q.rule_id }, "#" + q.rule_id + " ", q.rule) },
+      { label: "Rule", render: (q) => h("a", { href: "#/rules?rule=" + q.rule_id }, q.rule) },
       { label: "Allowance", render: (q) => fmtBytes(q.quota.bytes) + (q.quota.per_source ? " each source" : q.quota.per_destination ? " each destination" : "") },
       { label: "Used", render: (q) => perAddress(q)
-        ? [plural((q.addresses || []).length, "address", "addresses"), q.addresses && q.addresses.length ? ", busiest " + fmtBytes(used(q)) : ""]
+        ? [plural((q.addresses || []).length, "address", "addresses"), q.addresses && q.addresses.length ? [", busiest ", named(names, q.addresses[0].address), " " + fmtBytes(used(q))] : ""]
         : fmtBytes(q.used) },
       { label: "", render: (q) => usageBar(used(q), q.quota.bytes) },
       { label: "Next reset", render: (q) => q.next_reset ? time(q.next_reset) : h("span", { class: "muted" }, "by hand") },