feat(ports): mark the management port in the chassis

app/src/api.ts

@@ -844,6 +844,8 @@ const realApi = {
     }),
   mirror: () =>
     request<import("./types").MirrorProbe>("/api/mirror"),
+  managementPort: () =>
+    request<import("./types").ManagementPortProbe>("/api/management-port"),
   setMirror: (monitor: string, sources: string[]) =>
     request<{ status: string }>("/api/mirror", {
       method: "POST",

app/src/components/ports/EthPortsCard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Cable, Pencil, Zap } from "lucide-react";
+import { Cable, Lock, Pencil, Zap } from "lucide-react";
 import { api } from "../../api";
 import type { EthPort, PhysPortsProbe, SwitchPort, SwitchProbe } from "../../types";
 import {
@@ -45,6 +45,19 @@ export function EthPortsCard({ ports, index = 0, className = "md:col-span-2" }:
   const [phys, setPhys] = useState<PhysPortsProbe>();
   const physRequested = useRef(false);
 
+  // Boca de gestion (#543): badge con candado en la baldosa. Se pide de
+  // forma perezosa tras montar: la deteccion (gateway -> ARP -> FDB) tarda
+  // unos cientos de ms en switches densos y no debe retrasar el primer
+  // pintado. Sin probe o sin deducir: no hay badge, el chasis queda igual.
+  const [mgmtPort, setMgmtPort] = useState<string>();
+  useEffect(() => {
+    let alive = true;
+    api.managementPort()
+      .then((r) => { if (alive && r.port) setMgmtPort(r.port); })
+      .catch(() => { /* sin dato, sin badge */ });
+    return () => { alive = false; };
+  }, []);
+
   const load = useCallback(async () => {
     try {
       setProbe(await api.switchPorts());
@@ -170,13 +183,14 @@ export function EthPortsCard({ ports, index = 0, className = "md:col-span-2" }:
                 : p.devices.length > 1 ? t("ports.unmanagedN", { count: p.devices.length })
                 : t("ports.busy");
               const tier = speedTier(p);
+              const isMgmt = mgmtPort === p.name;
               const led = adminDown ? "bg-danger"
                 : !p.up ? "bg-border-strong"
                 : tier.tone === "ok" ? "bg-ok" : tier.tone === "warn" ? "bg-warn" : "bg-danger";
               return (
                 <button key={p.name} type="button"
                   onClick={() => setSelected(selected === p.name ? undefined : p.name)}
-                  title={p.up ? `${label} · ${p.speed_mbps >= 1000 ? `${p.speed_mbps / 1000} Gb/s` : `${p.speed_mbps} Mb/s`} · ${device}` : label}
+                  title={`${label}${isMgmt ? ` · ${t("ports.legendMgmt")}` : ""}${p.up ? ` · ${p.speed_mbps >= 1000 ? `${p.speed_mbps / 1000} Gb/s` : `${p.speed_mbps} Mb/s`} · ${device}` : ""}`}
                   className={`flex w-[68px] flex-col items-center gap-1 rounded-sm p-1 ring-focus transition-colors hover:bg-surface
                     ${selected === p.name ? "bg-surface shadow-card" : ""}`}>
                   {/* LEDs como en un RJ45 real: uno a cada extremo, alineados
@@ -198,6 +212,14 @@ export function EthPortsCard({ ports, index = 0, className = "md:col-span-2" }:
                         aria-label={t("ports.legendPoe")}
                         className={`absolute -top-1.5 -right-1.5 rounded-full bg-surface-2 p-px ${swp.poe_enabled ? "text-warn" : "text-faint"}`} />
                     )}
+                    {/* Boca de gestion: el puerto por el que se alcanza
+                        este panel; no tocarla a ciegas con espejo/rate/STP.
+                        Esquina opuesta al badge PoE (#543). */}
+                    {isMgmt && (
+                      <Lock size={11} strokeWidth={2.5}
+                        aria-label={t("ports.legendMgmt")}
+                        className="absolute -top-1.5 -left-1.5 rounded-full bg-surface-2 p-px text-accent" />
+                    )}
                   </span>
                   {/* Barras de velocidad: cuántas van encendidas y en qué
                       color dicen el nivel de un vistazo (tipo señal). */}
@@ -230,6 +252,9 @@ export function EthPortsCard({ ports, index = 0, className = "md:col-span-2" }:
             {anyPoe && (
               <span className="inline-flex items-center gap-1.5"><Zap size={11} strokeWidth={2.5} className="text-warn" />{t("ports.legendPoe")}</span>
             )}
+            {mgmtPort && (
+              <span className="inline-flex items-center gap-1.5"><Lock size={11} strokeWidth={2.5} className="text-accent" />{t("ports.legendMgmt")}</span>
+            )}
           </div>
 
           {/* Banda de detalle de la boca seleccionada (#484) */}

app/src/demo/index.ts

@@ -717,6 +717,8 @@ export const demoApi: typeof api = {
   setStormControl: async () => { await wait(800, 1500); return { status: "ok" }; },
   setStormControlAll: async () => { await wait(800, 1500); return { status: "ok" }; },
   mirror: () => get(D.demoMirror),
+  // El demo no deduce boca de gestion: el chasis se muestra sin badge.
+  managementPort: () => get({ port: "" }),
   setMirror: async () => { await wait(800, 1500); return { status: "ok" }; },
   rateLimit: () => get(D.demoRate),
   setRateLimit: async () => { await wait(800, 1500); return { status: "ok" }; },

app/src/locales/en.ts

@@ -1510,6 +1510,7 @@ export default {
     legendReduced: "Reduced speed",
     legendFree: "Free",
     legendPoe: "PoE available",
+    legendMgmt: "Management port (this panel is reached through it)",
     free: "Free",
     busy: "In use",
     unmanagedN: "Unmanaged sw. ({{count}})",

app/src/locales/es.ts

@@ -1510,6 +1510,7 @@ export default {
     legendReduced: "A velocidad reducida",
     legendFree: "Libre",
     legendPoe: "PoE disponible",
+    legendMgmt: "Puerto de gestión (por aquí se alcanza este panel)",
     free: "Libre",
     busy: "En uso",
     unmanagedN: "Switch no gest. ({{count}})",

app/src/types.ts

@@ -1507,6 +1507,12 @@ export interface MirrorProbe {
   sources: string[];
 }
 
+/** Boca de gestion deducida para el badge del chasis (#543): port vacio
+ * cuando la heuristica (gateway -> ARP -> FDB) no ha podido deducirla. */
+export interface ManagementPortProbe {
+  port: string;
+}
+
 /** Banda ancha por boca (#443): limites in/out en % del ancho de enlace. */
 export interface RatePort {
   port: string;

internal/modules/mirror.go

@@ -403,6 +403,22 @@ func managementPort() string {
 	return ""
 }
 
+// ManagementPortProbe expone la boca de gestion deducida para el badge
+// del chasis (#543): la heuristica completa (managementPort) sin el coste
+// del probe de espejo entero (tc filter show por boca). Port vacio cuando
+// no se ha podido deducir.
+type ManagementPortProbe struct {
+	Port string `json:"port"`
+}
+
+// ProbeManagementPort resuelve la boca de gestion: dos lecturas de /proc
+// y un brctl showmacs. La UI lo pide de forma perezosa tras pintar el
+// chasis, porque la deteccion puede tardar unos cientos de ms en
+// switches densos y no debe retrasar la primera pintada.
+func ProbeManagementPort() ManagementPortProbe {
+	return ManagementPortProbe{Port: managementPort()}
+}
+
 // defaultGatewayIP extrae la IP del gateway por defecto de /proc/net/route
 // (funcion pura, testeable). El kernel imprime las direcciones como el
 // valor big-endian en hex (%08X de la __be32): C0A80101 -> 192.168.1.1

internal/server/server.go

@@ -314,6 +314,7 @@ func New(rpcdURL, version string, secure bool, servingCert string) *Server {
 	s.mux.HandleFunc("GET /api/storm", s.requireAuth(s.handleStormGet))
 	s.mux.HandleFunc("POST /api/storm", s.requireAuth(s.handleStormSet))
 	s.mux.HandleFunc("GET /api/mirror", s.requireAuth(s.handleMirrorGet))
+	s.mux.HandleFunc("GET /api/management-port", s.requireAuth(s.handleManagementPortGet))
 	s.mux.HandleFunc("POST /api/mirror", s.requireAuth(s.handleMirrorSet))
 	s.mux.HandleFunc("GET /api/ratelimit", s.requireAuth(s.handleRateGet))
 	s.mux.HandleFunc("POST /api/ratelimit", s.requireAuth(s.handleRateSet))
@@ -3013,6 +3014,13 @@ func (s *Server) handleMirrorGet(w http.ResponseWriter, _ *http.Request) {
 	writeJSON(w, modules.ProbeMirror())
 }
 
+// handleManagementPortGet sirve solo la boca de gestion deducida, barato
+// frente al probe de espejo completo: el badge del chasis lo pide de forma
+// perezosa tras el primer pintado (#543).
+func (s *Server) handleManagementPortGet(w http.ResponseWriter, _ *http.Request) {
+	writeJSON(w, modules.ProbeManagementPort())
+}
+
 func (s *Server) handleMirrorSet(w http.ResponseWriter, r *http.Request) {
 	var req modules.MirrorSetRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {