Update AppImage

AppImage/components/hardware.tsx

@@ -16,6 +16,7 @@ import {
   Cpu,
   MemoryStick,
   Cpu as Gpu,
+  Info,
 } from "lucide-react"
 import useSWR from "swr"
 import { useState } from "react"
@@ -38,6 +39,29 @@ const getDeviceTypeColor = (type: string): string => {
   return "bg-gray-500/10 text-gray-500 border-gray-500/20"
 }
 
+const hasRealtimeData = (gpu: GPU): boolean => {
+  return !!(
+    (gpu.temperature !== undefined && gpu.temperature > 0) ||
+    gpu.utilization_gpu !== undefined ||
+    gpu.memory_total ||
+    gpu.power_draw
+  )
+}
+
+const getMonitoringToolRecommendation = (vendor: string): string => {
+  const lowerVendor = vendor.toLowerCase()
+  if (lowerVendor.includes("intel")) {
+    return "To get extended GPU monitoring information, please install intel-gpu-tools or igt-gpu-tools package."
+  }
+  if (lowerVendor.includes("nvidia")) {
+    return "To get extended GPU monitoring information, please install nvidia-utils or nvidia-smi package."
+  }
+  if (lowerVendor.includes("amd") || lowerVendor.includes("ati")) {
+    return "To get extended GPU monitoring information, please install radeontop package."
+  }
+  return "To get extended GPU monitoring information, please install the appropriate GPU monitoring tools for your hardware."
+}
+
 export default function Hardware() {
   const { data: hardwareData, error } = useSWR<HardwareData>("/api/hardware", fetcher, {
     refreshInterval: 5000,
@@ -442,6 +466,7 @@ export default function Hardware() {
               )}
 
               {/* Performance */}
+              {hasRealtimeData(selectedGPU) && (
                 <div className="space-y-2">
                   <h3 className="font-semibold text-sm">Performance</h3>
                   <div className="grid gap-2">
@@ -485,6 +510,7 @@ export default function Hardware() {
                     )}
                   </div>
                 </div>
+              )}
 
               {/* Clock Speeds */}
               {(selectedGPU.clock_graphics || selectedGPU.clock_memory) && (
@@ -525,6 +551,20 @@ export default function Hardware() {
                 </div>
               )}
 
+              {!hasRealtimeData(selectedGPU) && (
+                <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
+                  <div className="flex gap-3">
+                    <Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                    <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)}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
               {selectedGPU.note && (
                 <div className="rounded-lg bg-muted p-3">
                   <p className="text-xs text-muted-foreground">{selectedGPU.note}</p>