show id and hostname in the node list heading

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

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"
             />