feat: extend search (Ctrl+F and Ctrl+K) to include pending devices

Both SearchBar and SearchModal now fetch and search pending devices by
IP, hostname, and service name. Selecting a pending result opens the
sidebar to the Pending tab and highlights the matching device.

frontend/src/components/modals/SearchModal.tsx

@@ -1,34 +1,61 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { useReactFlow } from '@xyflow/react'
 import { Search } from 'lucide-react'
 import { useCanvasStore } from '@/stores/canvasStore'
+import { scanApi } from '@/api/client'
+import type { PendingDevice } from '@/components/modals/PendingDeviceModal'
 
 interface SearchModalProps {
   open: boolean
   onClose: () => void
+  onOpenPending: (deviceId: string) => void
 }
 
-export function SearchModal({ open, onClose }: SearchModalProps) {
+export function SearchModal({ open, onClose, onOpenPending }: SearchModalProps) {
   const [query, setQuery] = useState('')
+  const [pendingDevices, setPendingDevices] = useState<PendingDevice[]>([])
   const nodes = useCanvasStore((s) => s.nodes)
   const setSelectedNode = useCanvasStore((s) => s.setSelectedNode)
   const { fitView } = useReactFlow()
 
+  useEffect(() => {
+    if (!open) return
+    scanApi.pending().then((res) => setPendingDevices(res.data)).catch(() => {})
+  }, [open])
+
   const searchable = nodes.filter((n) => n.data.type !== 'groupRect')
   const q = query.toLowerCase()
-  const results = q.length === 0 ? [] : searchable.filter((n) =>
+
+  const nodeResults = q.length === 0 ? [] : searchable.filter((n) =>
     n.data.label?.toLowerCase().includes(q) ||
     n.data.ip?.toLowerCase().includes(q) ||
     n.data.hostname?.toLowerCase().includes(q)
-  ).slice(0, 8)
+  ).slice(0, 6)
 
-  const handleSelect = useCallback((nodeId: string) => {
+  const pendingResults = q.length === 0 ? [] : pendingDevices.filter((d) =>
+    d.ip.toLowerCase().includes(q) ||
+    d.hostname?.toLowerCase().includes(q) ||
+    d.services.some((s) =>
+      s.service_name?.toLowerCase().includes(q) ||
+      s.category?.toLowerCase().includes(q)
+    )
+  ).slice(0, 4)
+
+  const totalResults = nodeResults.length + pendingResults.length
+
+  const handleSelectNode = useCallback((nodeId: string) => {
     setSelectedNode(nodeId)
     fitView({ nodes: [{ id: nodeId }], duration: 600, padding: 0.4, maxZoom: 1.5 })
     onClose()
     setQuery('')
   }, [fitView, setSelectedNode, onClose])
 
+  const handleSelectPending = useCallback((deviceId: string) => {
+    onOpenPending(deviceId)
+    onClose()
+    setQuery('')
+  }, [onOpenPending, onClose])
+
   if (!open) return null
 
   return (
@@ -43,23 +70,24 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
             autoFocus
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search nodes by label, IP, hostname…"
+            placeholder="Search nodes, pending devices by IP or service…"
             className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
             onKeyDown={(e) => {
               if (e.key === 'Escape') { onClose(); setQuery('') }
-              if (e.key === 'Enter' && results.length > 0) handleSelect(results[0].id)
+              if (e.key === 'Enter' && nodeResults.length > 0) handleSelectNode(nodeResults[0].id)
+              if (e.key === 'Enter' && nodeResults.length === 0 && pendingResults.length > 0) handleSelectPending(pendingResults[0].id)
             }}
           />
           <kbd className="text-[10px] text-muted-foreground border border-border rounded px-1">ESC</kbd>
         </div>
 
-        {results.length > 0 && (
-          <ul className="py-1 max-h-64 overflow-y-auto">
-            {results.map((node) => (
+        {totalResults > 0 && (
+          <ul className="py-1 max-h-72 overflow-y-auto">
+            {nodeResults.map((node) => (
               <li
                 key={node.id}
                 className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
-                onClick={() => handleSelect(node.id)}
+                onClick={() => handleSelectNode(node.id)}
               >
                 <span className="text-xs font-mono text-[#00d4ff] w-16 shrink-0">{node.data.type}</span>
                 <span className="text-sm text-foreground font-medium flex-1 truncate">{node.data.label}</span>
@@ -68,15 +96,34 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
                 )}
               </li>
             ))}
+            {pendingResults.length > 0 && nodeResults.length > 0 && (
+              <li className="px-4 py-1">
+                <div className="h-px bg-border" />
+              </li>
+            )}
+            {pendingResults.map((device) => {
+              const serviceName = device.services.find((s) => s.service_name)?.service_name
+              return (
+                <li
+                  key={device.id}
+                  className="flex items-center gap-3 px-4 py-2 hover:bg-[#21262d] cursor-pointer"
+                  onClick={() => handleSelectPending(device.id)}
+                >
+                  <span className="text-xs font-mono text-[#e3b341] w-16 shrink-0">pending</span>
+                  <span className="text-sm text-foreground font-medium flex-1 truncate font-mono">{device.hostname ?? device.ip}</span>
+                  <span className="text-xs font-mono text-muted-foreground shrink-0">{serviceName ?? device.ip}</span>
+                </li>
+              )
+            })}
           </ul>
         )}
 
-        {q.length > 0 && results.length === 0 && (
-          <p className="px-4 py-3 text-sm text-muted-foreground">No nodes match "{query}"</p>
+        {q.length > 0 && totalResults === 0 && (
+          <p className="px-4 py-3 text-sm text-muted-foreground">No results match "{query}"</p>
         )}
 
         {q.length === 0 && (
-          <p className="px-4 py-3 text-xs text-muted-foreground">Type to search nodes…</p>
+          <p className="px-4 py-3 text-xs text-muted-foreground">Type to search nodes and pending devices…</p>
         )}
       </div>
     </div>