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

@@ -1,7 +1,7 @@
 // Widgets shared by several pages: list editors with suggestions, the
 // match editor of rules and NAT, descriptions, hit counts, durations.
 import { h, input, select, field, checkbox } from "./ui.js";
-import { get } from "./api.js";
+import { get, api } from "./api.js";
 
 // ---- durations
 
@@ -163,6 +163,27 @@ export function usageBar(used, total) {
   return h("div", { class: "usage" }, h("div", { class: "usage-bar" + (used >= total ? " full" : "") }, seg));
 }
 
+// lookupNames asks for inside addresses' names (docs/configuration.md):
+// {address: name}, {} when names are off or can't be had.
+export async function lookupNames(addrs) {
+  const list = [...new Set(addrs.filter(Boolean))];
+  if (!list.length) return {};
+  try { return (await api("POST", "/names", { body: { addresses: list } })).names || {}; } catch { return {}; }
+}
+
+// named shows an address (or text with it, such as address:port) after
+// its name's first label; the whole name is in the tooltip.
+export function named(names, addr, text = addr) {
+  const n = names[addr];
+  return n ? h("span", { title: n + " (" + addr + ")" }, h("span", { class: "host-name" }, n.split(".")[0]), " ", h("span", { class: "muted" }, text)) : text;
+}
+
+// withNames sets each top-list entry's name from its key (an address).
+export async function withNames(...lists) {
+  const names = await lookupNames(lists.flat().map((e) => e.key));
+  for (const e of lists.flat()) if (names[e.key]) e.name = names[e.key].split(".")[0];
+}
+
 // quotas loads what the rules' quotas used, by rule ID ({} without
 // log:read).
 export async function quotas() {