From 46ddb36c79abf30ec99970e969486fa041e6b956 Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Tue, 7 Oct 2025 03:03:45 +0200
Subject: [PATCH] Update hardware.tsx

---
 AppImage/components/hardware.tsx | 551 +++++++++++++++----------------
 1 file changed, 269 insertions(+), 282 deletions(-)

diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx
index 383a514..ccc155c 100644
--- a/AppImage/components/hardware.tsx
+++ b/AppImage/components/hardware.tsx
@@ -60,17 +60,16 @@ export default function Hardware() {
 
   const [selectedGPU, setSelectedGPU] = useState<GPU | null>(null)
   const [realtimeGPUData, setRealtimeGPUData] = useState<any>(null)
-  const [loadingRealtimeData, setLoadingRealtimeData] = useState(false)
   const [selectedPCIDevice, setSelectedPCIDevice] = useState<PCIDevice | null>(null)
   const [selectedDisk, setSelectedDisk] = useState<StorageDevice | null>(null)
   const [selectedNetwork, setSelectedNetwork] = useState<PCIDevice | null>(null)
 
   const handleGPUClick = async (gpu: GPU) => {
-    setSelectedGPU(gpu)
-    setLoadingRealtimeData(true)
+    // Don't open modal yet - wait for data first
     setRealtimeGPUData(null)
 
     try {
+      console.log("[v0] Fetching real-time GPU data for slot:", gpu.slot)
       const response = await fetch(`http://localhost:8008/api/gpu/${gpu.slot}/realtime`)
       if (response.ok) {
         const data = await response.json()
@@ -83,9 +82,9 @@ export default function Hardware() {
     } catch (error) {
       console.error("[v0] Error fetching real-time GPU data:", error)
       setRealtimeGPUData({ has_monitoring_tool: false })
-    } finally {
-      setLoadingRealtimeData(false)
     }
+
+    setSelectedGPU(gpu)
   }
 
   const findPCIDeviceForGPU = (gpu: GPU): PCIDevice | null => {
@@ -388,313 +387,301 @@ export default function Hardware() {
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
           {selectedGPU && (
             <>
-              {loadingRealtimeData ? (
-                <>
-                  <DialogHeader>
-                    <DialogTitle>{selectedGPU.name}</DialogTitle>
-                    <DialogDescription>Loading GPU data...</DialogDescription>
-                  </DialogHeader>
-                  <div className="flex items-center justify-center p-8">
-                    <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
-                  </div>
-                </>
-              ) : hasRealtimeData() ? (
-                // Advanced modal with real-time data
-                (() => {
-                  const pciDevice = findPCIDeviceForGPU(selectedGPU)
+              {hasRealtimeData()
+                ? // Advanced modal with real-time data
+                  (() => {
+                    const pciDevice = findPCIDeviceForGPU(selectedGPU)
 
-                  return (
-                    <>
-                      <DialogHeader>
-                        <DialogTitle>{selectedGPU.name}</DialogTitle>
-                        <DialogDescription>Real-Time GPU Monitoring</DialogDescription>
-                      </DialogHeader>
+                    return (
+                      <>
+                        <DialogHeader>
+                          <DialogTitle>{selectedGPU.name}</DialogTitle>
+                          <DialogDescription>Real-Time GPU Monitoring</DialogDescription>
+                        </DialogHeader>
 
-                      <div className="space-y-4">
-                        {/* Basic Information */}
-                        <div className="space-y-2">
-                          <h3 className="font-semibold text-sm">Basic Information</h3>
-                          <div className="grid gap-2">
-                            <div className="flex justify-between border-b border-border/50 pb-2">
-                              <span className="text-sm text-muted-foreground">Vendor</span>
-                              <Badge className={getDeviceTypeColor("graphics")}>{selectedGPU.vendor}</Badge>
-                            </div>
-                            <div className="flex justify-between border-b border-border/50 pb-2">
-                              <span className="text-sm text-muted-foreground">Type</span>
-                              <span className="text-sm font-medium">{selectedGPU.type}</span>
-                            </div>
-                            <div className="flex justify-between border-b border-border/50 pb-2">
-                              <span className="text-sm text-muted-foreground">PCI Slot</span>
-                              <span className="font-mono text-sm">{pciDevice?.slot || selectedGPU.slot}</span>
-                            </div>
-                            {(pciDevice?.driver || selectedGPU.pci_driver) && (
+                        <div className="space-y-4">
+                          {/* Basic Information */}
+                          <div className="space-y-2">
+                            <h3 className="font-semibold text-sm">Basic Information</h3>
+                            <div className="grid gap-2">
                               <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Driver</span>
-                                <span className="font-mono text-sm text-green-500">
-                                  {pciDevice?.driver || selectedGPU.pci_driver}
-                                </span>
+                                <span className="text-sm text-muted-foreground">Vendor</span>
+                                <Badge className={getDeviceTypeColor("graphics")}>{selectedGPU.vendor}</Badge>
                               </div>
-                            )}
-                            {(pciDevice?.kernel_module || selectedGPU.pci_kernel_module) && (
                               <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Kernel Module</span>
-                                <span className="font-mono text-sm">
-                                  {pciDevice?.kernel_module || selectedGPU.pci_kernel_module}
-                                </span>
+                                <span className="text-sm text-muted-foreground">Type</span>
+                                <span className="text-sm font-medium">{selectedGPU.type}</span>
                               </div>
-                            )}
-                          </div>
-                        </div>
-
-                        {/* Real-Time Metrics */}
-                        <div className="space-y-2">
-                          <h3 className="font-semibold text-sm">Real-Time Metrics</h3>
-                          <div className="grid gap-2">
-                            {realtimeGPUData.temperature !== undefined && realtimeGPUData.temperature > 0 && (
-                              <div className="space-y-1">
-                                <div className="flex justify-between">
-                                  <span className="text-sm text-muted-foreground">Temperature</span>
-                                  <span className="text-sm font-semibold text-green-500">
-                                    {realtimeGPUData.temperature}°C
+                              <div className="flex justify-between border-b border-border/50 pb-2">
+                                <span className="text-sm text-muted-foreground">PCI Slot</span>
+                                <span className="font-mono text-sm">{pciDevice?.slot || selectedGPU.slot}</span>
+                              </div>
+                              {(pciDevice?.driver || selectedGPU.pci_driver) && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Driver</span>
+                                  <span className="font-mono text-sm text-green-500">
+                                    {pciDevice?.driver || selectedGPU.pci_driver}
                                   </span>
                                 </div>
-                                <Progress value={(realtimeGPUData.temperature / 100) * 100} className="h-2" />
-                              </div>
-                            )}
-                            {realtimeGPUData.utilization_gpu !== undefined && (
-                              <div className="space-y-1">
-                                <div className="flex justify-between">
-                                  <span className="text-sm text-muted-foreground">GPU Utilization</span>
-                                  <span className="text-sm font-medium">{realtimeGPUData.utilization_gpu}%</span>
-                                </div>
-                                <Progress value={realtimeGPUData.utilization_gpu} className="h-2" />
-                              </div>
-                            )}
-                            {realtimeGPUData.clock_graphics && (
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Graphics Clock</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.clock_graphics}</span>
-                              </div>
-                            )}
-                            {realtimeGPUData.clock_memory && (
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Memory Clock</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.clock_memory}</span>
-                              </div>
-                            )}
-                            {realtimeGPUData.power_draw && realtimeGPUData.power_draw !== "N/A" && (
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Power Draw</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.power_draw}</span>
-                              </div>
-                            )}
-                            {realtimeGPUData.power_limit && (
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Power Limit</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.power_limit}</span>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-
-                        {/* Engine Utilization (Intel/AMD) */}
-                        {(realtimeGPUData.engine_render !== undefined ||
-                          realtimeGPUData.engine_blitter !== undefined ||
-                          realtimeGPUData.engine_video !== undefined ||
-                          realtimeGPUData.engine_video_enhance !== undefined) && (
-                          <div className="space-y-2">
-                            <h3 className="font-semibold text-sm">Engine Utilization</h3>
-                            <div className="grid gap-2">
-                              {realtimeGPUData.engine_render !== undefined && (
-                                <div className="space-y-1">
-                                  <div className="flex justify-between">
-                                    <span className="text-sm text-muted-foreground">Render/3D</span>
-                                    <span className="text-sm font-medium">
-                                      {realtimeGPUData.engine_render.toFixed(2)}%
-                                    </span>
-                                  </div>
-                                  <Progress value={realtimeGPUData.engine_render} className="h-2" />
-                                </div>
                               )}
-                              {realtimeGPUData.engine_blitter !== undefined && (
-                                <div className="space-y-1">
-                                  <div className="flex justify-between">
-                                    <span className="text-sm text-muted-foreground">Blitter</span>
-                                    <span className="text-sm font-medium">
-                                      {realtimeGPUData.engine_blitter.toFixed(2)}%
-                                    </span>
-                                  </div>
-                                  <Progress value={realtimeGPUData.engine_blitter} className="h-2" />
-                                </div>
-                              )}
-                              {realtimeGPUData.engine_video !== undefined && (
-                                <div className="space-y-1">
-                                  <div className="flex justify-between">
-                                    <span className="text-sm text-muted-foreground">Video</span>
-                                    <span className="text-sm font-medium">
-                                      {realtimeGPUData.engine_video.toFixed(2)}%
-                                    </span>
-                                  </div>
-                                  <Progress value={realtimeGPUData.engine_video} className="h-2" />
-                                </div>
-                              )}
-                              {realtimeGPUData.engine_video_enhance !== undefined && (
-                                <div className="space-y-1">
-                                  <div className="flex justify-between">
-                                    <span className="text-sm text-muted-foreground">VideoEnhance</span>
-                                    <span className="text-sm font-medium">
-                                      {realtimeGPUData.engine_video_enhance.toFixed(2)}%
-                                    </span>
-                                  </div>
-                                  <Progress value={realtimeGPUData.engine_video_enhance} className="h-2" />
+                              {(pciDevice?.kernel_module || selectedGPU.pci_kernel_module) && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Kernel Module</span>
+                                  <span className="font-mono text-sm">
+                                    {pciDevice?.kernel_module || selectedGPU.pci_kernel_module}
+                                  </span>
                                 </div>
                               )}
                             </div>
                           </div>
-                        )}
 
-                        {/* Memory Info */}
-                        {realtimeGPUData.memory_total && (
+                          {/* Real-Time Metrics */}
                           <div className="space-y-2">
-                            <h3 className="font-semibold text-sm">Memory</h3>
+                            <h3 className="font-semibold text-sm">Real-Time Metrics</h3>
                             <div className="grid gap-2">
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Total</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.memory_total}</span>
-                              </div>
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Used</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.memory_used}</span>
-                              </div>
-                              <div className="flex justify-between border-b border-border/50 pb-2">
-                                <span className="text-sm text-muted-foreground">Free</span>
-                                <span className="text-sm font-medium">{realtimeGPUData.memory_free}</span>
-                              </div>
-                              {realtimeGPUData.utilization_memory !== undefined && (
+                              {realtimeGPUData.temperature !== undefined && realtimeGPUData.temperature > 0 && (
                                 <div className="space-y-1">
                                   <div className="flex justify-between">
-                                    <span className="text-sm text-muted-foreground">Memory Utilization</span>
-                                    <span className="text-sm font-medium">{realtimeGPUData.utilization_memory}%</span>
+                                    <span className="text-sm text-muted-foreground">Temperature</span>
+                                    <span className="text-sm font-semibold text-green-500">
+                                      {realtimeGPUData.temperature}°C
+                                    </span>
                                   </div>
-                                  <Progress value={realtimeGPUData.utilization_memory} className="h-2" />
+                                  <Progress value={(realtimeGPUData.temperature / 100) * 100} className="h-2" />
+                                </div>
+                              )}
+                              {realtimeGPUData.utilization_gpu !== undefined && (
+                                <div className="space-y-1">
+                                  <div className="flex justify-between">
+                                    <span className="text-sm text-muted-foreground">GPU Utilization</span>
+                                    <span className="text-sm font-medium">{realtimeGPUData.utilization_gpu}%</span>
+                                  </div>
+                                  <Progress value={realtimeGPUData.utilization_gpu} className="h-2" />
+                                </div>
+                              )}
+                              {realtimeGPUData.clock_graphics && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Graphics Clock</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.clock_graphics}</span>
+                                </div>
+                              )}
+                              {realtimeGPUData.clock_memory && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Memory Clock</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.clock_memory}</span>
+                                </div>
+                              )}
+                              {realtimeGPUData.power_draw && realtimeGPUData.power_draw !== "N/A" && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Power Draw</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.power_draw}</span>
+                                </div>
+                              )}
+                              {realtimeGPUData.power_limit && (
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Power Limit</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.power_limit}</span>
                                 </div>
                               )}
                             </div>
                           </div>
-                        )}
 
-                        {/* Running Processes (NVIDIA) */}
-                        {realtimeGPUData.processes && realtimeGPUData.processes.length > 0 && (
-                          <div className="space-y-2">
-                            <h3 className="font-semibold text-sm">Running Processes</h3>
+                          {/* Engine Utilization (Intel/AMD) */}
+                          {(realtimeGPUData.engine_render !== undefined ||
+                            realtimeGPUData.engine_blitter !== undefined ||
+                            realtimeGPUData.engine_video !== undefined ||
+                            realtimeGPUData.engine_video_enhance !== undefined) && (
                             <div className="space-y-2">
-                              {realtimeGPUData.processes.map((proc: any, idx: number) => (
-                                <div key={idx} className="rounded-lg border border-border/30 bg-background/50 p-3">
-                                  <div className="flex justify-between">
-                                    <span className="font-mono text-xs">PID: {proc.pid}</span>
-                                    <span className="text-xs font-medium">{proc.memory}</span>
+                              <h3 className="font-semibold text-sm">Engine Utilization</h3>
+                              <div className="grid gap-2">
+                                {realtimeGPUData.engine_render !== undefined && (
+                                  <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                      <span className="text-sm text-muted-foreground">Render/3D</span>
+                                      <span className="text-sm font-medium">
+                                        {realtimeGPUData.engine_render.toFixed(2)}%
+                                      </span>
+                                    </div>
+                                    <Progress value={realtimeGPUData.engine_render} className="h-2" />
                                   </div>
-                                  <p className="mt-1 text-sm">{proc.name}</p>
+                                )}
+                                {realtimeGPUData.engine_blitter !== undefined && (
+                                  <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                      <span className="text-sm text-muted-foreground">Blitter</span>
+                                      <span className="text-sm font-medium">
+                                        {realtimeGPUData.engine_blitter.toFixed(2)}%
+                                      </span>
+                                    </div>
+                                    <Progress value={realtimeGPUData.engine_blitter} className="h-2" />
+                                  </div>
+                                )}
+                                {realtimeGPUData.engine_video !== undefined && (
+                                  <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                      <span className="text-sm text-muted-foreground">Video</span>
+                                      <span className="text-sm font-medium">
+                                        {realtimeGPUData.engine_video.toFixed(2)}%
+                                      </span>
+                                    </div>
+                                    <Progress value={realtimeGPUData.engine_video} className="h-2" />
+                                  </div>
+                                )}
+                                {realtimeGPUData.engine_video_enhance !== undefined && (
+                                  <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                      <span className="text-sm text-muted-foreground">VideoEnhance</span>
+                                      <span className="text-sm font-medium">
+                                        {realtimeGPUData.engine_video_enhance.toFixed(2)}%
+                                      </span>
+                                    </div>
+                                    <Progress value={realtimeGPUData.engine_video_enhance} className="h-2" />
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          )}
+
+                          {/* Memory Info */}
+                          {realtimeGPUData.memory_total && (
+                            <div className="space-y-2">
+                              <h3 className="font-semibold text-sm">Memory</h3>
+                              <div className="grid gap-2">
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Total</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.memory_total}</span>
                                 </div>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </>
-                  )
-                })()
-              ) : (
-                // Basic modal without real-time data
-                (() => {
-                  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>
-
-                        {realtimeGPUData?.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 className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Used</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.memory_used}</span>
+                                </div>
+                                <div className="flex justify-between border-b border-border/50 pb-2">
+                                  <span className="text-sm text-muted-foreground">Free</span>
+                                  <span className="text-sm font-medium">{realtimeGPUData.memory_free}</span>
+                                </div>
+                                {realtimeGPUData.utilization_memory !== undefined && (
+                                  <div className="space-y-1">
+                                    <div className="flex justify-between">
+                                      <span className="text-sm text-muted-foreground">Memory Utilization</span>
+                                      <span className="text-sm font-medium">{realtimeGPUData.utilization_memory}%</span>
+                                    </div>
+                                    <Progress value={realtimeGPUData.utilization_memory} className="h-2" />
+                                  </div>
+                                )}
                               </div>
                             </div>
+                          )}
+
+                          {/* Running Processes (NVIDIA) */}
+                          {realtimeGPUData.processes && realtimeGPUData.processes.length > 0 && (
+                            <div className="space-y-2">
+                              <h3 className="font-semibold text-sm">Running Processes</h3>
+                              <div className="space-y-2">
+                                {realtimeGPUData.processes.map((proc: any, idx: number) => (
+                                  <div key={idx} className="rounded-lg border border-border/30 bg-background/50 p-3">
+                                    <div className="flex justify-between">
+                                      <span className="font-mono text-xs">PID: {proc.pid}</span>
+                                      <span className="text-xs font-medium">{proc.memory}</span>
+                                    </div>
+                                    <p className="mt-1 text-sm">{proc.name}</p>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </>
+                    )
+                  })()
+                : // Basic modal without real-time data
+                  (() => {
+                    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>
-                    </>
-                  )
-                })()
-              )}
+
+                          <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>
+
+                          {realtimeGPUData?.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>