From 4952934537873a3b037da31f39e4d428d7f7034d Mon Sep 17 00:00:00 2001
From: Allan ELKAIM <allan.elkaim@gmail.com>
Date: Fri, 26 Jun 2026 14:51:59 +0200
Subject: [PATCH 1/2] peers: add MAC address search and display

Surface the network_addresses (IP + MAC) now returned by the management API.
Peers are searchable by MAC via a hidden table column wired into the global
filter, and their MAC address is shown on the peer detail page.
---
 src/app/(dashboard)/peer/page.tsx | 20 +++++++++++++++++++-
 src/interfaces/Peer.ts            | 20 ++++++++++++++++++++
 src/modules/peers/PeersTable.tsx  |  9 +++++++--
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/app/(dashboard)/peer/page.tsx b/src/app/(dashboard)/peer/page.tsx
index c9e10e1f..88f1a361 100644
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -64,7 +64,7 @@ import { usePermissions } from "@/contexts/PermissionsProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
 import type { Group } from "@/interfaces/Group";
-import type { Peer } from "@/interfaces/Peer";
+import { type Peer, peerMacAddresses } from "@/interfaces/Peer";
 import type { User } from "@/interfaces/User";
 import PageContainer from "@/layouts/PageContainer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -678,6 +678,24 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
             />
           )}
 
+          {peerMacAddresses(peer).length > 0 && (
+            <Card.ListItem
+              copy
+              copyText={"MAC Address"}
+              label={
+                <>
+                  <NetworkIcon size={16} className={"shrink-0"} />
+                  MAC Address
+                </>
+              }
+              className={
+                peerMacAddresses(peer).length > 1 ? "items-start" : ""
+              }
+              value={peerMacAddresses(peer)[0]}
+              extraText={peerMacAddresses(peer).slice(1)}
+            />
+          )}
+
           {peer.created_at && (
             <Card.ListItem
               label={
diff --git a/src/interfaces/Peer.ts b/src/interfaces/Peer.ts
index fe1e5676..2300558a 100644
--- a/src/interfaces/Peer.ts
+++ b/src/interfaces/Peer.ts
@@ -33,6 +33,26 @@ export interface Peer {
   serial_number: string;
   ephemeral: boolean;
   local_flags?: PeerLocalFlags;
+  network_addresses?: NetworkAddress[];
+}
+
+export interface NetworkAddress {
+  net_ip: string;
+  mac: string;
+}
+
+// peerMacAddresses returns the unique, non-empty MAC addresses reported by a
+// peer's network interfaces. A peer reports the same MAC for several IPs
+// (e.g. IPv4 + IPv6 of one NIC), so we de-duplicate.
+export function peerMacAddresses(peer: Peer): string[] {
+  if (!peer.network_addresses) return [];
+  return Array.from(
+    new Set(
+      peer.network_addresses
+        .map((address) => address.mac)
+        .filter((mac) => !!mac),
+    ),
+  );
 }
 
 export interface PeerLocalFlags {
diff --git a/src/modules/peers/PeersTable.tsx b/src/modules/peers/PeersTable.tsx
index 9d791caa..c17096cd 100644
--- a/src/modules/peers/PeersTable.tsx
+++ b/src/modules/peers/PeersTable.tsx
@@ -50,7 +50,7 @@ import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { Group } from "@/interfaces/Group";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
-import { Peer } from "@/interfaces/Peer";
+import { Peer, peerMacAddresses } from "@/interfaces/Peer";
 import PeerActionCell from "@/modules/peers/PeerActionCell";
 import PeerAddressCell from "@/modules/peers/PeerAddressCell";
 import PeerGroupCell from "@/modules/peers/PeerGroupCell";
@@ -262,6 +262,10 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     id: "ipv6",
     accessorFn: (row) => row.ipv6,
   },
+  {
+    id: "mac",
+    accessorFn: (peer) => peerMacAddresses(peer).join(", "),
+  },
 ];
 
 export type PeersTableKind = "users" | "servers";
@@ -480,7 +484,7 @@ export default function PeersTable({
         showResetFilterButton={false}
         columns={PeersTableColumns}
         data={showBrowserPeers ? browserPeers : regularPeers}
-        searchPlaceholder={"Search by name, IP, owner or group..."}
+        searchPlaceholder={"Search by name, IP, MAC, owner or group..."}
         columnVisibility={{
           select: permission.groups.read,
           connected: false,
@@ -497,6 +501,7 @@ export default function PeersTable({
           os: false,
           os_kind: false,
           ipv6: false,
+          mac: false,
         }}
         isLoading={isLoading}
         getStartedCard={

From f351f5112fc7e9221398acac1f486798063dbd0b Mon Sep 17 00:00:00 2001
From: Allan ELKAIM <allan.elkaim@gmail.com>
Date: Fri, 26 Jun 2026 15:37:33 +0200
Subject: [PATCH 2/2] peers: align copy icons in multi-line card list items

Right-justify each value row in Card.ListItem so the copy icons line up on
the column edge even when values render at slightly different widths (e.g.
the per-interface MAC address list on the peer detail page).
---
 src/components/Card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 935047d5..3ab9321a 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -100,7 +100,7 @@ const CardTextItem = ({
   return (
     <div
       className={cn(
-        "text-right text-nb-gray-400 text-[0.84rem] flex items-center gap-2",
+        "text-right text-nb-gray-400 text-[0.84rem] flex items-center justify-end gap-2",
         copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
       )}
       onClick={() =>