Connections, "every packet" rules, and a packet tracer

- Connections: the kernel's tracked connections, read and closed over
  ctnetlink (internal/conntrack, raw netlink like the drop log), with
  their NAT and TCP state; closing one makes the rules check its next
  packet again (GET /connections, POST /connections/close; hc
  connections; Traffic → Connections).
- Rules can check every packet (every_packet, --every-packet): before
  established connections are accepted, so a drop or reject also stops
  connections already open. They can't accept.
- A packet tracer (internal/trace): a table of its own, inet
  housecarl-trace, marks the packets a filter picks, `nft monitor trace`
  reports every rule and policy they meet in every table, and the tracer
  names what accepted or dropped them, Housecarl's rules by name (POST,
  GET, DELETE /trace; hc trace; Traffic → Trace). One trace at a time,
  at most 200 packets and 20 a second; the table goes when it ends.

e2e: 157 checks, among them an upload a normal block doesn't stop and an
every-packet one does, and a trace naming the blocking rule.

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

internal/web/static/assets/app.js

@@ -3,6 +3,8 @@ import { h, mount, toast, errorBox, modal } from "./ui.js";
 import { wordmark, logo } from "./brand.js";
 import { api, get, state, can, setUnauthorizedHandler, setChangeHandler, loadDraft, onDraftChange, setImmediate, useDraft } from "./api.js";
 import * as changes from "./pages/changes.js";
+import * as connections from "./pages/connections.js";
+import * as tracePage from "./pages/trace.js";
 import * as dashboard from "./pages/dashboard.js";
 import * as rules from "./pages/rules.js";
 import * as nat from "./pages/nat.js";
@@ -26,6 +28,8 @@ const routes = [
   { pattern: /^sets$/, page: sets, nav: "sets" },
   { pattern: /^services$/, page: services, nav: "services" },
   { pattern: /^log$/, page: log, nav: "log" },
+  { pattern: /^connections$/, page: connections, nav: "connections" },
+  { pattern: /^trace$/, page: tracePage, nav: "trace" },
   { pattern: /^settings$/, page: settings, nav: "settings" },
   { pattern: /^import$/, page: importPage, nav: "import" },
   { pattern: /^changes$/, page: changes, nav: "changes" },
@@ -47,7 +51,11 @@ const navItems = [
     ["sets", "#/sets", "Address sets", "config"],
     ["services", "#/services", "Services", "config"],
   ] },
-  ["log", "#/log", "Log", "log"],
+  { menu: "Traffic", items: [
+    ["log", "#/log", "Log", "log"],
+    ["connections", "#/connections", "Connections", "log"],
+    ["trace", "#/trace", "Trace", "log"],
+  ] },
   ["changes", "#/changes", "Changes", "config"],
   ["history", "#/history", "History", "config"],
   { menu: "Server", items: [

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

@@ -0,0 +1,49 @@
+// Connections: what the kernel tracks, and closing them so the rules
+// check them again.
+import { h, mount, input, debounce, toast, confirmDialog, badge } from "../ui.js";
+import { get, api, can } from "../api.js";
+import { onLeave } from "../app.js";
+import { fmtSeconds } from "../widgets.js";
+
+export async function render(el, params, query) {
+  const search = input({ type: "search", placeholder: "address, :port, protocol, state…", value: query.get("q") || "" });
+  const out = h("div");
+  const count = h("span", { class: "muted small" });
+  const write = can("config", true);
+  let shown = [];
+  const hostPort = (a, p) => !p ? a : a.includes(":") ? "[" + a + "]:" + p : a + ":" + p;
+  const close = async (list, what) => {
+    if (!await confirmDialog("Close connections", "Close " + what + "? Their next packet is checked by the rules as they are now: what they block is stopped, what they allow carries on.", "Close", "danger")) return;
+    try {
+      const r = await api("POST", "/connections/close", { body: list ? { connections: list } : { search: search.value.trim() } });
+      toast("Closed " + r.closed + (r.closed === 1 ? " connection" : " connections"));
+      draw();
+    } catch (e) { toast(e.message, "err"); }
+  };
+  const draw = async () => {
+    shown = await get("/connections", { q: search.value.trim(), limit: 500 });
+    count.textContent = shown.length === 1 ? "1 connection" : shown.length + " connections";
+    mount(out, shown.length ? h("div", { class: "table-wrap" }, h("table", null,
+      h("thead", null, h("tr", null, ["Protocol", "From", "To", "NAT", "State", "Expires", ""].map((t) => h("th", null, t)))),
+      h("tbody", null, shown.map((c) => h("tr", null,
+        h("td", null, c.protocol),
+        h("td", { class: "mono" }, hostPort(c.source, c.source_port)),
+        h("td", { class: "mono" }, hostPort(c.destination, c.destination_port)),
+        h("td", { class: "mono small" }, c.dnat_to ? "to " + hostPort(c.dnat_to, c.dnat_port || c.destination_port) : "", c.snat_to ? (c.dnat_to ? ", " : "") + "as " + c.snat_to : ""),
+        h("td", null, c.state || "", c.assured ? null : [" ", badge("one way", "")]),
+        h("td", { class: "small" }, fmtSeconds(c.timeout)),
+        h("td", { class: "actions-cell" }, write ? h("button", { class: "small reveal", onclick: () => close([c], "this connection") }, "Close") : null)))))) :
+      h("div", { class: "empty" }, search.value.trim() ? "No connection matches." : "No connections tracked."));
+  };
+  search.addEventListener("input", debounce(draw, 300));
+  mount(el,
+    h("div", { class: "page-head" },
+      h("div", { class: "grow" }, h("h1", null, "Connections"),
+        h("div", { class: "muted" }, "The connections the firewall tracks. Their packets are let through by the built-in for established connections, without the rules being checked again, so a rule added later doesn't stop them. Close them, and their next packet is checked by the rules as they are now.")),
+      write ? h("div", { class: "actions" }, h("button", { class: "danger", onclick: () => close(null, search.value.trim() ? "every connection matching “" + search.value.trim() + "”" : "every connection") }, "Close all shown")) : null),
+    h("div", { class: "filter-row" }, search, count),
+    h("div", { class: "panel" }, out));
+  await draw();
+  const t = setInterval(() => { if (!document.hidden && document.activeElement !== search) draw().catch(() => {}); }, 5000);
+  onLeave(() => clearInterval(t));
+}

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

@@ -27,7 +27,7 @@ export async function render(el, params, query) {
   const chain = query.get("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(countsTraffic), ...all.filter((r) => !countsTraffic(r))];
+  const rules = [...all.filter(everyPacket), ...all.filter((r) => !everyPacket(r))];
   const write = can("config", true);
   const info = chains.find((c) => c[0] === chain) || chains[0];
   const policy = settings[chain + "_policy"];
@@ -42,7 +42,7 @@ export async function render(el, params, query) {
       table([
         { label: "#", render: (r) => r.pending === "deleted" ? "" : String(live(rules).indexOf(r) + 1) },
         { label: "Match", render: (r) => r.raw ? [badge("raw", ""), " ", h("span", { class: "mono small" }, r.raw)]
-          : [countsTraffic(r) ? [badge("every packet", "accent"), " "] : null, describe(r), extras(r, qs[r.id])] },
+          : [everyPacket(r) ? [badge("every packet", "accent"), " "] : null, describe(r), extras(r, qs[r.id])] },
         { label: "Action", render: actionBadge },
         { label: "Hits", render: (r) => hits(cs, "r" + r.id) },
         { label: "Comment", render: (r) => r.comment },
@@ -50,7 +50,7 @@ export async function render(el, params, query) {
           if (r.pending === "deleted") return badge("deleted", "err");
           // Moves stay among the rules of the same kind (counting traffic,
           // or not): nftables checks those first.
-          const rs = live(rules).filter((x) => countsTraffic(x) === countsTraffic(r)), i = rs.indexOf(r);
+          const rs = live(rules).filter((x) => everyPacket(x) === everyPacket(r)), i = rs.indexOf(r);
           return [
           h("button", { class: "small reveal", title: "Move up", disabled: i === 0, onclick: () => move(r, { before: rs[i - 1].id }) }, "↑"), " ",
           h("button", { class: "small reveal", title: "Move down", disabled: i === rs.length - 1, onclick: () => move(r, { after: rs[i + 1].id }) }, "↓"), " ",
@@ -60,14 +60,15 @@ export async function render(el, params, query) {
         ];
         } } : null,
       ].filter(Boolean), rules, { empty: "No rules in this chain yet.", rowClass }),
-      rules.some(countsTraffic) ? h("div", { class: "muted small" }, "Rules marked “every packet” have a quota or a byte rate: they are checked before established connections are accepted, so they count all of a connection's traffic, not only its first packet. They can drop, reject or log, not accept.") : null,
+      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)));
 }
 
-// countsTraffic: a quota or a byte rate (as model.Rule.CountsTraffic).
-function countsTraffic(r) {
-  return !r.raw && (!!r.quota || !!(r.limit && ["bytes", "kbytes", "mbytes"].includes(r.limit.unit)));
+// everyPacket: checked before established connections are accepted (as
+// model.Rule.ChecksEveryPacket): asked to, or a quota or a byte rate.
+function everyPacket(r) {
+  return !r.raw && (!!r.every_packet || !!r.quota || !!(r.limit && ["bytes", "kbytes", "mbytes"].includes(r.limit.unit)));
 }
 
 // What each built-in does (a switch covers all its rules).
@@ -207,7 +208,11 @@ export async function ruleDialog(r, chain) {
   const match = matchEditor(r, n);
   const action = select([["accept", "accept"], ["drop", "drop"], ["reject", "reject"], ["log", "log only (and go on)"]], r.action);
   const rejectWith = select([["", "with an ICMP error"], ["tcp-reset", "with a TCP reset (TCP rules only)"]], r.reject_with || "");
-  const showReject = () => rejectWith.classList.toggle("hidden", action.value !== "reject");
+  const every = checkbox("every packet: also stop connections already open, not just new ones", r.every_packet);
+  const showReject = () => {
+    rejectWith.classList.toggle("hidden", action.value !== "reject");
+    every.classList.toggle("hidden", action.value === "accept");
+  };
   action.addEventListener("change", showReject);
   showReject();
   const states = listEditor(r.ct_state, { suggestions: ["new", "established", "related", "invalid", "untracked"], placeholder: "new", mono: false, addLabel: "Add state" });
@@ -306,7 +311,8 @@ export async function ruleDialog(r, chain) {
   // Written in nftables, a rule is its text: the fields it replaces go
   // (and the other parts close).
   const matchNodes = match.flat().filter(Boolean);
-  const actionField = field("Action", h("div", null, action, " ", rejectWith)).filter(Boolean);
+  const actionField = field("Action", h("div", null, action, " ", rejectWith, every),
+    "Every packet: checked before established connections are accepted, so blocking takes effect on what is already connected.").filter(Boolean);
   const logField = field("Log", h("div", null, log, logPrefix)).filter(Boolean);
   const addersLabel = h("label");
   sections.raw.onShow = (on) => {
@@ -352,7 +358,8 @@ export async function ruleDialog(r, chain) {
         per_source: quotaKey.value === "source", per_destination: quotaKey.value === "destination",
         reset: quotaReset.value, day: quotaReset.value === "monthly" ? parseInt(quotaDay.value || "1", 10) : 0 } : null,
       group_v4: isRaw ? 0 : parseInt(group4.value || "0", 10), group_v6: isRaw ? 0 : parseInt(group6.value || "0", 10),
-      conn_limit: on("conn") ? parseInt(conn.value || "0", 10) : 0, log: !isRaw && log.input.checked, log_prefix: isRaw ? "" : logPrefix.value.trim(),
+      conn_limit: on("conn") ? parseInt(conn.value || "0", 10) : 0,
+      every_packet: !isRaw && action.value !== "accept" && every.input.checked, log: !isRaw && log.input.checked, log_prefix: isRaw ? "" : logPrefix.value.trim(),
       raw: on("raw") ? raw.value.trim() : "", comment: comment.value.trim() };
     if (r.id) v.disabled = disabled.input.checked;
     try {

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

@@ -0,0 +1,77 @@
+// Trace: follow packets through every table's rules, and see what
+// decided their fate.
+import { h, mount, input, select, field, errorBox, badge } from "../ui.js";
+import { get, api, can } from "../api.js";
+import { onLeave } from "../app.js";
+
+export async function render(el) {
+  const address = input({ placeholder: "192.168.1.50, or 2001:db8:1::/64", class: "mono" });
+  const port = input({ placeholder: "443", class: "short", type: "number", min: 1, max: 65535 });
+  const protocol = select([["", "any"], "tcp", "udp", "sctp", "icmp", "icmpv6"], "", { class: "inline" });
+  const seconds = input({ value: "60", class: "short", type: "number", min: 5, max: 600 });
+  const err = h("div");
+  const status = h("div");
+  const packets = h("div");
+  const write = can("config", true);
+  const startBtn = h("button", { class: "primary", onclick: start }, "Start tracing");
+  const stopBtn = h("button", { class: "hidden", onclick: stop }, "Stop");
+  let timer = null;
+
+  async function start() {
+    mount(err);
+    try {
+      await api("POST", "/trace", { body: { address: address.value.trim(), port: parseInt(port.value || "0", 10), protocol: protocol.value, seconds: parseInt(seconds.value || "60", 10) } });
+      poll();
+    } catch (e) { mount(err, errorBox(e)); }
+  }
+  async function stop() {
+    try { show(await api("DELETE", "/trace")); } catch (e) { mount(err, errorBox(e)); }
+  }
+  async function poll() {
+    clearTimeout(timer);
+    let st;
+    try { st = await get("/trace"); } catch (e) { mount(err, errorBox(e)); return; }
+    show(st);
+    if (st.running) timer = setTimeout(poll, 1000);
+  }
+  function show(st) {
+    startBtn.classList.toggle("hidden", st.running || !write);
+    stopBtn.classList.toggle("hidden", !st.running || !write);
+    const what = [st.input.address, st.input.protocol, st.input.port ? "port " + st.input.port : ""].filter(Boolean).join(" ");
+    mount(status, st.started && st.started !== "0001-01-01T00:00:00Z" ? h("div", { class: "msg " + (st.error ? "err" : st.running ? "info" : "ok") },
+      st.running ? ["Tracing ", h("strong", null, what), " until " + new Date(st.ends).toLocaleTimeString() + ". Make the traffic happen now."]
+        : ["Traced ", h("strong", null, what), ": " + (st.packets.length === 1 ? "1 packet" : st.packets.length + " packets") + "."],
+      st.error ? h("div", null, st.error) : null) : null);
+    mount(packets, st.packets.length ? st.packets.slice().reverse().map(packet)
+      : st.running ? h("div", { class: "empty" }, "No packets yet.") : null);
+  }
+  const hostPort = (a, p) => !a ? "" : !p ? a : a.includes(":") ? "[" + a + "]:" + p : a + ":" + p;
+  function packet(p) {
+    const head = [p.protocol, p.tcp_flags, p.icmp_type].filter(Boolean).join(" ");
+    const decided = p.decided_by.label || [p.decided_by.table, p.decided_by.chain, p.decided_by.kind].filter(Boolean).join(" ");
+    return h("div", { class: "panel trace-packet" },
+      h("div", { class: "trace-head" },
+        badge(p.verdict, p.verdict === "dropped" ? "err" : "ok"), " ",
+        h("span", { class: "mono" }, hostPort(p.source, p.source_port), " → ", hostPort(p.destination, p.destination_port)), " ",
+        h("span", { class: "muted" }, head, p.in ? " · in " + p.in : "", p.out ? " · out " + p.out : ""),
+        h("span", { class: "muted small trace-time" }, new Date(p.time).toLocaleTimeString())),
+      decided ? h("div", { class: "small" }, p.verdict === "dropped" ? "Dropped by " : "Accepted by ", h("strong", null, decided)) : null,
+      h("table", { class: "trace-steps" }, h("tbody", null, p.steps.map((s) => h("tr", { class: /^(drop|reject)/.test(s.verdict) ? "step-drop" : s.verdict === "accept" ? "step-accept" : "" },
+        h("td", { class: "muted small" }, s.table + " " + s.chain),
+        h("td", null, s.label ? (s.mark && s.mark.startsWith("r") ? h("a", { href: "#/rules?chain=" + s.chain }, s.label) : s.label)
+          : s.kind === "policy" ? s.chain + " policy" : h("span", { class: "mono small" }, s.rule)),
+        h("td", { class: "small" }, s.verdict))))));
+  }
+
+  mount(el,
+    h("div", { class: "page-head" }, h("div", { class: "grow" }, h("h1", null, "Trace"),
+      h("div", { class: "muted" }, "Follows packets through the whole ruleset, Housecarl's rules and every other table (Docker, fail2ban…): each rule and policy they meet, and what accepted or dropped them. For “why doesn't this get through?”"))),
+    write ? h("div", { class: "panel" }, h("div", { class: "form-grid" },
+      field("Address", address, "Packets from or to it (either way). An address or a prefix."),
+      field("Port", h("div", null, port, " ", protocol), "Packets from or to it. Empty: any."),
+      field("For", h("div", null, seconds, " seconds"), "At most 600; it stops by itself after 200 packets.")),
+      h("div", { class: "actions form-actions" }, startBtn, stopBtn), err) : null,
+    status, packets);
+  await poll();
+  onLeave(() => clearTimeout(timer));
+}

internal/web/static/assets/style.css

@@ -412,3 +412,10 @@ select.inline { width: auto; display: inline-block; }
 /* The rule dialog's optional parts: "+" buttons, and ✕ to close one. */
 .adders { display: flex; flex-wrap: wrap; gap: 6px; }
 button.close-section { padding: 0 6px; margin-left: 4px; font-size: 11px; line-height: 1.5; }
+/* Trace: one panel per packet, its steps below. */
+.trace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
+.trace-time { margin-left: auto; }
+table.trace-steps { width: 100%; margin-top: 6px; }
+table.trace-steps td { padding: 3px 8px; border-top: 1px solid var(--border); }
+tr.step-drop td { background: var(--del); }
+tr.step-accept td { background: var(--add); }