From 62dfc572d02ca4c844c1875ff5c8d05f3a987bab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 30 Jul 2026 15:27:59 +0000
Subject: [PATCH] show id and hostname in the node list heading

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../officerdev/src/apps/Headscale/NodesView.tsx           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/Headscale/NodesView.tsx b/src/workspaces/officerdev/src/apps/Headscale/NodesView.tsx
index 754981e0..6768c52b 100644
--- a/src/workspaces/officerdev/src/apps/Headscale/NodesView.tsx
+++ b/src/workspaces/officerdev/src/apps/Headscale/NodesView.tsx
@@ -99,7 +99,10 @@ const NodeCard = ({ node, onError }: NodeCardProps) => {
               </div>
             ) : (
               <div className="flex flex-wrap items-center gap-2">
-                <span className="truncate text-sm font-medium text-zinc-100">{node.name}</span>
+                <span className="truncate text-sm font-medium text-zinc-100">
+                  <span className="tabular-nums text-zinc-500">{node.id}:</span> {node.hostname}{' '}
+                  <span className="font-normal text-zinc-500">({node.name})</span>
+                </span>
                 {node.user && <Badge>{node.user.name}</Badge>}
                 {node.isExitNode && <Badge>exit</Badge>}
                 {node.tags.map((tag) => (
@@ -232,6 +235,7 @@ export const NodesView = () => {
   const visible = needle
     ? nodes.filter(
         (n) =>
+          n.id === needle ||
           n.name.toLowerCase().includes(needle) ||
           n.hostname.toLowerCase().includes(needle) ||
           n.user?.name.toLowerCase().includes(needle) ||
@@ -257,7 +261,7 @@ export const NodesView = () => {
             <input
               value={filter}
               onChange={(ev) => setFilter(ev.target.value)}
-              placeholder="Filter by name, user, IP, tag"
+              placeholder="Filter by id, name, user, IP, tag"
               spellCheck={false}
               className="w-full rounded-lg border border-white/10 bg-black/40 py-1.5 pl-8 pr-2.5 text-xs text-zinc-100 outline-none placeholder:text-zinc-600 focus:border-primary/50"
             />