Add warning for Intel GPU stats bug

Add warning with explanation on GPU stats page when all Intel GPU values are 0

web/public/locales/en/views/system.json

@@ -76,7 +76,12 @@
         }
       },
       "npuUsage": "NPU Usage",
-      "npuMemory": "NPU Memory"
+      "npuMemory": "NPU Memory",
+      "intelGpuWarning": {
+        "title": "Intel GPU Stats Warning",
+        "message": "GPU stats unavailable",
+        "description": "This is a known bug in Intel's GPU stats reporting tools (intel_gpu_top) where it will break and repeatedly return a GPU usage of 0% even in cases where hardware acceleration and object detection are correctly running on the (i)GPU. This is not a Frigate bug. You can restart the host to temporarily fix the issue and confirm that the GPU is working correctly. This does not affect performance."
+      }
     },
     "otherProcesses": {
       "title": "Other Processes",

web/src/views/system/GeneralMetrics.tsx

@@ -375,6 +375,50 @@ export default function GeneralMetrics({
     return Object.keys(series).length > 0 ? Object.values(series) : undefined;
   }, [statsHistory]);
 
+  // Check if Intel GPU has all 0% usage values (known bug)
+  const showIntelGpuWarning = useMemo(() => {
+    if (!statsHistory || statsHistory.length < 3) {
+      return false;
+    }
+
+    const gpuKeys = Object.keys(statsHistory[0]?.gpu_usages ?? {});
+    const hasIntelGpu = gpuKeys.some(
+      (key) => key === "intel-vaapi" || key === "intel-qsv",
+    );
+
+    if (!hasIntelGpu) {
+      return false;
+    }
+
+    // Check if all GPU usage values are 0% across all stats
+    let allZero = true;
+    let hasDataPoints = false;
+
+    for (const stats of statsHistory) {
+      if (!stats) {
+        continue;
+      }
+
+      Object.entries(stats.gpu_usages || {}).forEach(([key, gpuStats]) => {
+        if (key === "intel-vaapi" || key === "intel-qsv") {
+          if (gpuStats.gpu) {
+            hasDataPoints = true;
+            const gpuValue = parseFloat(gpuStats.gpu.slice(0, -1));
+            if (!isNaN(gpuValue) && gpuValue > 0) {
+              allZero = false;
+            }
+          }
+        }
+      });
+
+      if (!allZero) {
+        break;
+      }
+    }
+
+    return hasDataPoints && allZero;
+  }, [statsHistory]);
+
   // npu stats
 
   const npuSeries = useMemo(() => {
@@ -639,8 +683,46 @@ export default function GeneralMetrics({
                 <>
                   {statsHistory.length != 0 ? (
                     <div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
-                      <div className="mb-5">
+                      <div className="mb-5 flex flex-row items-center justify-between">
                         {t("general.hardwareInfo.gpuUsage")}
+                        {showIntelGpuWarning && (
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <button
+                                className="flex flex-row items-center gap-1.5 text-yellow-600 focus:outline-none dark:text-yellow-500"
+                                aria-label={t(
+                                  "general.hardwareInfo.intelGpuWarning.title",
+                                )}
+                              >
+                                <CiCircleAlert
+                                  className="size-5"
+                                  aria-label={t(
+                                    "general.hardwareInfo.intelGpuWarning.title",
+                                  )}
+                                />
+                                <span className="text-sm">
+                                  {t(
+                                    "general.hardwareInfo.intelGpuWarning.message",
+                                  )}
+                                </span>
+                              </button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-80">
+                              <div className="space-y-2">
+                                <div className="font-semibold">
+                                  {t(
+                                    "general.hardwareInfo.intelGpuWarning.title",
+                                  )}
+                                </div>
+                                <div>
+                                  {t(
+                                    "general.hardwareInfo.intelGpuWarning.description",
+                                  )}
+                                </div>
+                              </div>
+                            </PopoverContent>
+                          </Popover>
+                        )}
                       </div>
                       {gpuSeries.map((series) => (
                         <ThresholdBarGraph