Update hardware.tsx

AppImage/components/hardware.tsx

@@ -326,15 +326,13 @@ export default function Hardware() {
             {hardwareData.gpus.map((gpu, index) => {
               const pciDevice = findPCIDeviceForGPU(gpu)
               const fullSlot = pciDevice?.slot || gpu.slot
-              const isClickable = hasRealtimeData(gpu)
+              const isClickable = true
 
               return (
                 <div
                   key={index}
-                  onClick={() => isClickable && setSelectedGPU(gpu)}
+                  onClick={() => setSelectedGPU(gpu)}
-                  className={`rounded-lg border border-border/30 bg-background/50 p-4 transition-colors ${
+                  className="cursor-pointer rounded-lg border border-border/30 bg-background/50 p-4 transition-colors hover:bg-background/80"
-                    isClickable ? "cursor-pointer hover:bg-background/80" : "cursor-default"
-                  }`}
                 >
                   <div className="mb-3 flex items-center justify-between">
                     <span className="font-medium text-sm">{gpu.name}</span>
@@ -631,6 +629,101 @@ export default function Hardware() {
         </DialogContent>
       </Dialog>
 
+      <Dialog open={selectedGPU !== null && !hasRealtimeData(selectedGPU)} onOpenChange={() => setSelectedGPU(null)}>
+        <DialogContent className="max-w-2xl">
+          {selectedGPU &&
+            !hasRealtimeData(selectedGPU) &&
+            (() => {
+              const pciDevice = findPCIDeviceForGPU(selectedGPU)
+
+              return (
+                <>
+                  <DialogHeader>
+                    <DialogTitle>{selectedGPU.name}</DialogTitle>
+                    <DialogDescription>PCI Device Information</DialogDescription>
+                  </DialogHeader>
+
+                  <div className="space-y-3">
+                    <div className="flex justify-between border-b border-border/50 pb-2">
+                      <span className="text-sm font-medium text-muted-foreground">Device Type</span>
+                      <Badge className={getDeviceTypeColor("graphics")}>Graphics Card</Badge>
+                    </div>
+
+                    <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">{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>
+                    </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>
+                    </div>
+
+                    {(pciDevice?.class || 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">{pciDevice?.class || selectedGPU.pci_class}</span>
+                      </div>
+                    )}
+
+                    {(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">
+                          {pciDevice?.driver || selectedGPU.pci_driver}
+                        </span>
+                      </div>
+                    )}
+
+                    {(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">
+                          {pciDevice?.kernel_module || selectedGPU.pci_kernel_module}
+                        </span>
+                      </div>
+                    )}
+
+                    <div className="flex justify-between border-b border-border/50 pb-2">
+                      <span className="text-sm font-medium text-muted-foreground">Type</span>
+                      <span className="text-sm">{selectedGPU.type}</span>
+                    </div>
+
+                    {selectedGPU.has_monitoring_tool === false && (
+                      <div className="mt-4 rounded-lg bg-blue-500/10 p-4 border border-blue-500/20">
+                        <div className="flex gap-3">
+                          <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+                              <path
+                                fillRule="evenodd"
+                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                                clipRule="evenodd"
+                              />
+                            </svg>
+                          </div>
+                          <div>
+                            <h4 className="text-sm font-semibold text-blue-500 mb-1">
+                              Extended Monitoring Not Available
+                            </h4>
+                            <p className="text-sm text-muted-foreground">
+                              {getMonitoringToolRecommendation(selectedGPU.vendor)}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              )
+            })()}
+        </DialogContent>
+      </Dialog>
+
       {/* PCI Devices - Changed to modal */}
       {hardwareData?.pci_devices && hardwareData.pci_devices.length > 0 && (
         <Card className="border-border/50 bg-card/50 p-6">