Update notification service

AppImage/components/health-status-modal.tsx

@@ -3,6 +3,7 @@
 import type React from "react"
 
 import { useState, useEffect, useCallback } from "react"
+import { fetchApi, getApiUrl, getAuthToken } from "@/lib/api-config"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -122,10 +123,16 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
       let newOverallStatus = "OK"
       
       // Use the new combined endpoint for fewer round-trips
-      const response = await fetch(getApiUrl("/api/health/full"))
+      const token = getAuthToken()
+      const authHeaders: Record<string, string> = {}
+      if (token) {
+        authHeaders["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch(getApiUrl("/api/health/full"), { headers: authHeaders })
       if (!response.ok) {
         // Fallback to legacy endpoint
-        const legacyResponse = await fetch(getApiUrl("/api/health/details"))
+        const legacyResponse = await fetch(getApiUrl("/api/health/details"), { headers: authHeaders })
         if (!legacyResponse.ok) throw new Error("Failed to fetch health details")
         const data = await legacyResponse.json()
         setHealthData(data)
@@ -288,15 +295,22 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
     setDismissingKey(errorKey)
 
     try {
-      const response = await fetch(getApiUrl("/api/health/acknowledge"), {
+      const url = getApiUrl("/api/health/acknowledge")
+      const token = getAuthToken()
+      const headers: Record<string, string> = { "Content-Type": "application/json" }
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`
+      }
+
+      const response = await fetch(url, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers,
         body: JSON.stringify({ error_key: errorKey }),
       })
 
       if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || "Failed to dismiss error")
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || `Failed to dismiss error (${response.status})`)
       }
 
       await fetchHealthDetails()
@@ -408,10 +422,10 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
               key={checkKey}
               className="flex items-center justify-between gap-1.5 sm:gap-2 text-[10px] sm:text-xs py-1.5 px-2 sm:px-3 rounded-md hover:bg-muted/40 transition-colors"
             >
-              <div className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1 overflow-hidden">
-                {getStatusIcon(checkData.status, "sm")}
+              <div className="flex items-start gap-1.5 sm:gap-2 min-w-0 flex-1">
+                <span className="mt-0.5 shrink-0">{getStatusIcon(checkData.status, "sm")}</span>
                 <span className="font-medium shrink-0">{formatCheckLabel(checkKey)}</span>
-                <span className="text-muted-foreground truncate block">{checkData.detail}</span>
+                <span className="text-muted-foreground break-words whitespace-pre-wrap min-w-0">{checkData.detail}</span>
                 {checkData.dismissed && (
                   <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 shrink-0 text-blue-400 border-blue-400/30">
                     Dismissed
@@ -520,8 +534,8 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
             </div>
 
             {healthData.summary && healthData.summary !== "All systems operational" && (
-              <div className="text-sm p-3 rounded-lg bg-muted/20 border overflow-hidden max-w-full">
-                <p className="font-medium text-foreground truncate" title={healthData.summary}>{healthData.summary}</p>
+              <div className="text-xs sm:text-sm p-3 rounded-lg bg-muted/20 border overflow-hidden max-w-full">
+                <p className="font-medium text-foreground break-words whitespace-pre-wrap">{healthData.summary}</p>
               </div>
             )}
 
@@ -559,7 +573,7 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
                           )}
                         </div>
                         {reason && !isExpanded && (
-                          <p className="text-[10px] sm:text-xs text-muted-foreground mt-0.5 truncate" title={reason}>{reason}</p>
+                          <p className="text-[10px] sm:text-xs text-muted-foreground mt-0.5 line-clamp-2 break-words">{reason}</p>
                         )}
                       </div>
                       <div className="flex items-center gap-1 sm:gap-2 shrink-0">
@@ -578,7 +592,7 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
                     {isExpanded && (
                       <div className="border-t border-border/50 bg-muted/5 px-1.5 sm:px-2 py-1.5 overflow-hidden">
                         {reason && (
-                          <p className="text-xs text-muted-foreground px-3 py-1.5 mb-1 break-words">{reason}</p>
+                          <p className="text-xs text-muted-foreground px-3 py-1.5 mb-1 break-words whitespace-pre-wrap">{reason}</p>
                         )}
                         {hasChecks ? (
                           renderChecks(checks, key)

AppImage/components/settings.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
 import { Wrench, Package, Ruler, HeartPulse, Cpu, MemoryStick, HardDrive, CircleDot, Network, Server, Settings2, FileText, RefreshCw, Shield, AlertTriangle, Info, Loader2, Check } from "lucide-react"
+import { NotificationSettings } from "./notification-settings"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 import { Input } from "./ui/input"
 import { Badge } from "./ui/badge"
@@ -438,6 +439,9 @@ export function Settings() {
         </CardContent>
       </Card>
 
+      {/* Notification Settings */}
+      <NotificationSettings />
+
       {/* ProxMenux Optimizations */}
       <Card>
         <CardHeader>

AppImage/components/storage-overview.tsx

@@ -34,6 +34,12 @@ interface DiskInfo {
   wear_leveling_count?: number // SSD: Wear Leveling Count
   total_lbas_written?: number // SSD/NVMe: Total LBAs Written (GB)
   ssd_life_left?: number // SSD: SSD Life Left percentage
+  io_errors?: {
+    count: number
+    severity: string
+    sample: string
+    reason: string
+  }
 }
 
 interface ZFSPool {
@@ -776,6 +782,17 @@ export function StorageOverview() {
                     </div>
                   </div>
 
+                  {disk.io_errors && disk.io_errors.count > 0 && (
+                    <div className={`flex items-start gap-2 p-2 rounded text-xs ${
+                      disk.io_errors.severity === 'CRITICAL'
+                        ? 'bg-red-500/10 text-red-400 border border-red-500/20'
+                        : 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20'
+                    }`}>
+                      <AlertTriangle className="h-3.5 w-3.5 flex-shrink-0 mt-0.5" />
+                      <span>{disk.io_errors.count} I/O error{disk.io_errors.count !== 1 ? 's' : ''} in 5 min</span>
+                    </div>
+                  )}
+
                   <div className="grid grid-cols-2 gap-4 text-sm">
                     {disk.size_formatted && (
                       <div>
@@ -841,6 +858,22 @@ export function StorageOverview() {
                     </div>
                   </div>
 
+                  {disk.io_errors && disk.io_errors.count > 0 && (
+                    <div className={`flex items-start gap-2 p-2 rounded text-xs ${
+                      disk.io_errors.severity === 'CRITICAL'
+                        ? 'bg-red-500/10 text-red-400 border border-red-500/20'
+                        : 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20'
+                    }`}>
+                      <AlertTriangle className="h-3.5 w-3.5 flex-shrink-0 mt-0.5" />
+                      <div>
+                        <span className="font-medium">{disk.io_errors.count} I/O error{disk.io_errors.count !== 1 ? 's' : ''} in 5 min</span>
+                        {disk.io_errors.sample && (
+                          <p className="mt-0.5 opacity-80 font-mono truncate max-w-md">{disk.io_errors.sample}</p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
                   <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                     {disk.size_formatted && (
                       <div>