Update hardware.tsx

AppImage/components/hardware.tsx

@@ -72,6 +72,26 @@ export default function Hardware() {
   const [selectedDisk, setSelectedDisk] = useState<StorageDevice | null>(null)
   const [selectedNetwork, setSelectedNetwork] = useState<PCIDevice | null>(null)
 
+  const findPCIDeviceForGPU = (gpu: GPU): PCIDevice | null => {
+    if (!hardwareData?.pci_devices || !gpu.slot) return null
+
+    // Try to find exact match first (e.g., "00:02.0")
+    let pciDevice = hardwareData.pci_devices.find((d) => d.slot === gpu.slot)
+
+    // If not found, try to match by partial slot (e.g., "00" matches "00:02.0")
+    if (!pciDevice && gpu.slot.length <= 2) {
+      pciDevice = hardwareData.pci_devices.find(
+        (d) =>
+          d.slot.startsWith(gpu.slot + ":") &&
+          (d.type.toLowerCase().includes("vga") ||
+            d.type.toLowerCase().includes("graphics") ||
+            d.type.toLowerCase().includes("display")),
+      )
+    }
+
+    return pciDevice || null
+  }
+
   return (
     <div className="space-y-6 p-6">
       {/* System Information - CPU & Motherboard */}
@@ -378,7 +398,11 @@ export default function Hardware() {
             <DialogDescription>PCI Device Information</DialogDescription>
           </DialogHeader>
 
-          {selectedGPU && (
+          {selectedGPU &&
+            (() => {
+              const pciDevice = findPCIDeviceForGPU(selectedGPU)
+
+              return (
                 <div className="space-y-4">
                   {/* Basic PCI Device Information - Same format as PCI Device modal */}
                   <div className="space-y-3">
@@ -389,37 +413,39 @@ export default function Hardware() {
 
                     <div className="flex justify-between border-b border-border/50 pb-2">
                       <span className="text-sm font-medium text-muted-foreground">PCI Slot</span>
-                  <span className="font-mono text-sm">{selectedGPU.slot}</span>
+                      <span className="font-mono text-sm">{pciDevice?.slot || selectedGPU.slot}</span>
                     </div>
 
                     <div className="flex justify-between border-b border-border/50 pb-2">
                       <span className="text-sm font-medium text-muted-foreground">Device Name</span>
-                  <span className="text-sm text-right">{selectedGPU.name}</span>
+                      <span className="text-sm text-right">{pciDevice?.device || selectedGPU.name}</span>
                     </div>
 
                     <div className="flex justify-between border-b border-border/50 pb-2">
                       <span className="text-sm font-medium text-muted-foreground">Vendor</span>
-                  <span className="text-sm">{selectedGPU.vendor}</span>
+                      <span className="text-sm">{pciDevice?.vendor || selectedGPU.vendor}</span>
                     </div>
 
-                {selectedGPU.pci_class && (
                     <div className="flex justify-between border-b border-border/50 pb-2">
                       <span className="text-sm font-medium text-muted-foreground">Class</span>
-                    <span className="font-mono text-sm">{selectedGPU.pci_class}</span>
+                      <span className="font-mono text-sm">{pciDevice?.class || selectedGPU.pci_class || "N/A"}</span>
                     </div>
-                )}
 
-                {selectedGPU.pci_driver && (
+                    {(pciDevice?.driver || selectedGPU.pci_driver) && (
                       <div className="flex justify-between border-b border-border/50 pb-2">
                         <span className="text-sm font-medium text-muted-foreground">Driver</span>
-                    <span className="font-mono text-sm text-green-500">{selectedGPU.pci_driver}</span>
+                        <span className="font-mono text-sm text-green-500">
+                          {pciDevice?.driver || selectedGPU.pci_driver}
+                        </span>
                       </div>
                     )}
 
-                {selectedGPU.pci_kernel_module && (
+                    {(pciDevice?.kernel_module || selectedGPU.pci_kernel_module) && (
                       <div className="flex justify-between border-b border-border/50 pb-2">
                         <span className="text-sm font-medium text-muted-foreground">Kernel Module</span>
-                    <span className="font-mono text-sm">{selectedGPU.pci_kernel_module}</span>
+                        <span className="font-mono text-sm">
+                          {pciDevice?.kernel_module || selectedGPU.pci_kernel_module}
+                        </span>
                       </div>
                     )}
 
@@ -573,7 +599,7 @@ export default function Hardware() {
                         <div className="space-y-1">
                           <p className="text-sm font-medium text-blue-500">Extended Monitoring Not Available</p>
                           <p className="text-xs text-muted-foreground">
-                        {getMonitoringToolRecommendation(selectedGPU.vendor)}
+                            {getMonitoringToolRecommendation(pciDevice?.vendor || selectedGPU.vendor)}
                           </p>
                         </div>
                       </div>
@@ -586,7 +612,8 @@ export default function Hardware() {
                     </div>
                   )}
                 </div>
-          )}
+              )
+            })()}
         </DialogContent>
       </Dialog>