Web UI: links to a rule open it, highlighted; rule IDs shown

A rule named in the matrix, the log, the tracer, statistics or the
dashboard opens the Rules page on its chain, scrolled to it and
highlighted (#/rules?rule=ID; the chain is looked up when the link has
none). The Rules page shows each rule's ID beside its order.

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

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

@@ -24,7 +24,14 @@ const builtins = {
 };
 
 export async function render(el, params, query) {
-  const chain = query.get("chain") || "input";
+  // ?rule=ID (from the matrix, the log, the tracer, statistics): show
+  // that rule, in its chain, highlighted.
+  const target = Number(query.get("rule")) || 0;
+  let chain = query.get("chain");
+  if (!chain && target) {
+    try { chain = (await get("/rules/" + target)).chain; } catch { /* gone: the default chain */ }
+  }
+  chain = chain || "input";
   const [all, settings, cs, qs] = await Promise.all([get("/rules", { chain }), get("/settings"), counters(), quotas()]);
   // As nftables checks them: the rules that count traffic first.
   const rules = [...all.filter(everyPacket), ...all.filter((r) => !everyPacket(r))];
@@ -40,7 +47,8 @@ export async function render(el, params, query) {
     h("div", { class: "panel" },
       builtinsRow(chain, settings, cs),
       table([
-        { label: "#", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
+        { label: "Order", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
+        { label: "ID", render: (r) => r.id ? h("span", { class: "muted mono small" }, "#" + r.id) : "" },
         { label: "Match", render: (r) => r.raw ? [badge("raw", ""), " ", h("span", { class: "mono small" }, r.raw)]
           : [everyPacket(r) ? [badge("every packet", "accent"), " "] : null, describe(r), extras(r, qs[r.id])] },
         { label: "Action", render: actionBadge },
@@ -59,10 +67,15 @@ export async function render(el, params, query) {
           h("button", { class: "small reveal", onclick: () => del(r) }, "Delete"),
         ];
         } } : null,
-      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass }),
+      ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass: (r) => rowClass(r) + (target && r.id === target ? " row-target" : "") }),
       rules.some(everyPacket) ? h("div", { class: "muted small" }, "Rules marked “every packet” are checked before established connections are accepted: they see all of a connection's traffic, not only its first packet, so a quota counts all of it and a block stops connections already open. They can drop, reject or log, not accept.") : null,
       h("div", { class: "policy small" }, "Then the policy: ", badge(policy, policy === "drop" ? "err" : "ok"),
         policy === "drop" ? [" — ", hits(cs, "p-" + chain), " packets reached it"] : null)));
+  if (target) {
+    const row = el.querySelector("tr.row-target");
+    if (row) requestAnimationFrame(() => row.scrollIntoView({ block: "center" }));
+    else el.querySelector(".tabs").after(h("div", { class: "msg warn" }, "There is no rule #" + target + " (any more)."));
+  }
 }
 
 // everyPacket: checked before established connections are accepted (as