feat(dashboard): alerts page + toast notifications + polish

- Full Alerts page with active alerts, history table, subscriptions
- Active alert cards with severity styling and acknowledge button
- Alert history table with type/severity filtering and pagination
- Subscription viewer showing mesh subscriptions
- ToastProvider for app-wide toast notifications
- Toast notifications triggered on WebSocket alert_fired messages
- Auto-dismiss toasts after 8 seconds, click to navigate
- Page titles on all pages (Dashboard/Mesh/Environment/Config/Alerts)
- Improved alert_routes.py with proper pending alert handling
- Added AlertHistoryItem, Subscription types to api.ts
- Added fetchAlertHistory, fetchSubscriptions functions

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

dashboard-frontend/src/components/ToastProvider.tsx

@@ -0,0 +1,141 @@
+import { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { AlertTriangle, AlertCircle, Info, X } from 'lucide-react'
+import type { Alert } from '@/lib/api'
+
+interface Toast {
+  id: string
+  alert: Alert
+  dismissedAt?: number
+}
+
+interface ToastContextValue {
+  addToast: (alert: Alert) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider')
+  }
+  return context
+}
+
+function getSeverityStyles(severity: string) {
+  switch (severity?.toLowerCase()) {
+    case 'critical':
+    case 'emergency':
+      return {
+        bg: 'bg-red-500/10',
+        border: 'border-red-500',
+        icon: AlertCircle,
+        iconColor: 'text-red-500',
+      }
+    case 'warning':
+      return {
+        bg: 'bg-amber-500/10',
+        border: 'border-amber-500',
+        icon: AlertTriangle,
+        iconColor: 'text-amber-500',
+      }
+    default:
+      return {
+        bg: 'bg-blue-500/10',
+        border: 'border-blue-500',
+        icon: Info,
+        iconColor: 'text-blue-500',
+      }
+  }
+}
+
+function ToastItem({
+  toast,
+  onDismiss,
+  onNavigate,
+}: {
+  toast: Toast
+  onDismiss: () => void
+  onNavigate: () => void
+}) {
+  const styles = getSeverityStyles(toast.alert.severity)
+  const Icon = styles.icon
+
+  // Auto-dismiss after 8 seconds
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 8000)
+    return () => clearTimeout(timer)
+  }, [onDismiss])
+
+  return (
+    <div
+      className={`${styles.bg} border ${styles.border} rounded-lg shadow-lg overflow-hidden animate-slide-in cursor-pointer`}
+      onClick={onNavigate}
+      role="alert"
+    >
+      <div className="flex items-start gap-3 p-4">
+        {/* Severity bar */}
+        <div className={`w-1 self-stretch -ml-4 -my-4 ${styles.border.replace('border', 'bg')}`} />
+
+        <Icon size={18} className={styles.iconColor} />
+
+        <div className="flex-1 min-w-0 pr-2">
+          <div className="text-sm font-medium text-slate-200 mb-0.5">
+            {toast.alert.type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+          </div>
+          <div className="text-sm text-slate-300 line-clamp-2">
+            {toast.alert.message}
+          </div>
+        </div>
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            onDismiss()
+          }}
+          className="text-slate-400 hover:text-slate-200 transition-colors"
+        >
+          <X size={16} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+  const navigate = useNavigate()
+
+  const addToast = useCallback((alert: Alert) => {
+    const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    setToasts((prev) => [...prev, { id, alert }])
+  }, [])
+
+  const dismissToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const handleNavigate = useCallback(() => {
+    navigate('/alerts')
+  }, [navigate])
+
+  return (
+    <ToastContext.Provider value={{ addToast }}>
+      {children}
+
+      {/* Toast container - fixed bottom right */}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+        {toasts.map((toast) => (
+          <div key={toast.id} className="pointer-events-auto">
+            <ToastItem
+              toast={toast}
+              onDismiss={() => dismissToast(toast.id)}
+              onNavigate={handleNavigate}
+            />
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}