Add a Network > Ports page: agent-reported ports plus manual openings

Summarizes every server's agent-reported listening ports in one
cross-server table (grouped by protocol+port, addresses merged,
loopback-only flagged) - previously this only existed per-server on
each server's own detail page.

Adds a second table for ports this app has no way to see on its own:
manually-recorded openings on a router, edge firewall, or cloud
security group, each with a label, external port/protocol, an optional
link to a tracked server (with its own internal port when NAT changes
it) or a freeform destination, a free-text source, and a comment.
Viewer-readable; adding/editing/deleting needs operator or admin.

The agent-port grouping logic (dedupe by protocol+port, detect
loopback-only sockets) was shared with the existing per-server Ports
card via a new agentPorts.ts service instead of duplicating it.

Verified with a real HTTP-level test: a genuine Express app with the
actual routers, a scratch SQLite DB, and forged admin/viewer sessions,
covering grouping correctness, the server-name join, input validation,
and role enforcement - the real dev DB was confirmed untouched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/layout/AppShell.tsx

@@ -30,6 +30,7 @@ import {
   IconActivityHeartbeat,
   IconShieldCheck,
   IconTicket,
+  IconPlug,
 } from "@tabler/icons-react";
 import { api, type CurrentUser, type MaintenanceWindow } from "../api/client";
 import { formatRemaining } from "../utils/duration";
@@ -80,6 +81,7 @@ const NAV: NavEntry[] = [
       { to: "/dns", label: "DNS", icon: <IconWorld size={20} /> },
       { to: "/domains", label: "Domains", icon: <IconWorldWww size={20} /> },
       { to: "/ipam", label: "IP Addresses", icon: <IconNetwork size={20} /> },
+      { to: "/ports", label: "Ports", icon: <IconPlug size={20} /> },
       { to: "/consistency", label: "Consistency", icon: <IconListCheck size={20} /> },
     ],
   },