app/sites/[id]/settings/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
-import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
+import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, listAlertSchedules, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
 import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
@@ -21,7 +21,7 @@ import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
+import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -32,7 +32,7 @@ import {
   AlertTriangleIcon,
   ZapIcon,
 } from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug } from '@phosphor-icons/react'
+import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug, BellSimple } from '@phosphor-icons/react'
 import { SiDiscord } from '@icons-pack/react-simple-icons'
 
 function SlackIcon({ size = 16 }: { size?: number }) {
@@ -88,7 +88,7 @@ export default function SiteSettingsPage() {
   const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
   const [saving, setSaving] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'reports' | 'integrations'>('general')
+  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'notifications' | 'integrations'>('general')
   const searchParams = useSearchParams()
 
   const [formData, setFormData] = useState({
@@ -124,6 +124,8 @@ export default function SiteSettingsPage() {
 
   // Report schedules
   const { data: reportSchedules = [], isLoading: reportLoading, mutate: mutateReportSchedules } = useReportSchedules(siteId)
+  // Alert schedules (uptime alerts)
+  const { data: alertSchedules = [], isLoading: alertLoading, mutate: mutateAlertSchedules } = useAlertSchedules(siteId)
   const { data: gscStatus, mutate: mutateGSCStatus } = useGSCStatus(siteId)
   const [gscConnecting, setGscConnecting] = useState(false)
   const [gscDisconnecting, setGscDisconnecting] = useState(false)
@@ -149,6 +151,17 @@ export default function SiteSettingsPage() {
     sendDay: 1,
   })
 
+  // Alert channel state
+  const [alertModalOpen, setAlertModalOpen] = useState(false)
+  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
+  const [alertSaving, setAlertSaving] = useState(false)
+  const [alertTesting, setAlertTesting] = useState<string | null>(null)
+  const [alertForm, setAlertForm] = useState({
+    channel: 'email' as string,
+    recipients: '',
+    webhookUrl: '',
+  })
+
   // Bot & Spam tab state
   const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
   const [suspiciousOnly, setSuspiciousOnly] = useState(true)
@@ -337,6 +350,103 @@ export default function SiteSettingsPage() {
     }
   }
 
+  // Alert channel handlers
+  const resetAlertForm = () => {
+    setAlertForm({
+      channel: 'email',
+      recipients: '',
+      webhookUrl: '',
+    })
+  }
+
+  const openEditAlert = (schedule: ReportSchedule) => {
+    setEditingAlert(schedule)
+    const isEmail = schedule.channel === 'email'
+    setAlertForm({
+      channel: schedule.channel,
+      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
+      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
+    })
+    setAlertModalOpen(true)
+  }
+
+  const handleAlertSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    let channelConfig: EmailConfig | WebhookConfig
+    if (alertForm.channel === 'email') {
+      const recipients = alertForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
+      if (recipients.length === 0) {
+        toast.error('At least one recipient email is required')
+        return
+      }
+      channelConfig = { recipients }
+    } else {
+      if (!alertForm.webhookUrl.trim()) {
+        toast.error('Webhook URL is required')
+        return
+      }
+      channelConfig = { url: alertForm.webhookUrl.trim() }
+    }
+
+    const payload: CreateReportScheduleRequest = {
+      channel: alertForm.channel,
+      channel_config: channelConfig,
+      frequency: 'daily',
+      purpose: 'alert',
+    }
+
+    setAlertSaving(true)
+    try {
+      if (editingAlert) {
+        await updateReportSchedule(siteId, editingAlert.id, { ...payload, purpose: 'alert' })
+        toast.success('Alert channel updated')
+      } else {
+        await createReportSchedule(siteId, payload)
+        toast.success('Alert channel created')
+      }
+      setAlertModalOpen(false)
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to save alert channel')
+    } finally {
+      setAlertSaving(false)
+    }
+  }
+
+  const handleAlertDelete = async (schedule: ReportSchedule) => {
+    if (!confirm('Delete this alert channel?')) return
+    try {
+      await deleteReportSchedule(siteId, schedule.id)
+      toast.success('Alert channel deleted')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to delete alert channel')
+    }
+  }
+
+  const handleAlertToggle = async (schedule: ReportSchedule) => {
+    try {
+      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
+      toast.success(schedule.enabled ? 'Alert paused' : 'Alert enabled')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to update alert channel')
+    }
+  }
+
+  const handleAlertTest = async (schedule: ReportSchedule) => {
+    setAlertTesting(schedule.id)
+    try {
+      await testReportSchedule(siteId, schedule.id)
+      toast.success('Test alert sent successfully')
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to send test alert')
+    } finally {
+      setAlertTesting(null)
+    }
+  }
+
   const getChannelLabel = (channel: string) => {
     switch (channel) {
       case 'email': return 'Email'
@@ -701,17 +811,17 @@ export default function SiteSettingsPage() {
             Goals & Events
           </button>
           <button
-            onClick={() => setActiveTab('reports')}
+            onClick={() => setActiveTab('notifications')}
             role="tab"
-            aria-selected={activeTab === 'reports'}
+            aria-selected={activeTab === 'notifications'}
             className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'reports'
+              activeTab === 'notifications'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <PaperPlaneTilt className="w-5 h-5" />
-            Reports
+            <BellSimple className="w-5 h-5" />
+            Notifications
           </button>
           <button
             onClick={() => setActiveTab('integrations')}
@@ -1530,128 +1640,257 @@ export default function SiteSettingsPage() {
               </div>
             )}
 
-            {activeTab === 'reports' && (
-              <div className="space-y-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Scheduled Reports</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Automatically deliver analytics reports via email or webhooks.</p>
+            {activeTab === 'notifications' && (
+              <div className="space-y-8">
+                <div>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notifications</h2>
+                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Configure how you receive reports and alerts.</p>
+                </div>
+
+                {/* Reports subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Reports</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
+                        Add Report
+                      </Button>
+                    )}
                   </div>
-                  {canEdit && (
-                    <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
-                      Add Report
-                    </Button>
+
+                  {reportLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 3 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : reportSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No scheduled reports yet. Add a report to automatically receive analytics summaries.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {reportSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
+                                    {getFrequencyLabel(schedule.frequency)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                                    {getReportTypeLabel(schedule.report_type)}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                                  {getScheduleDescription(schedule)}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportTest(schedule)}
+                                  disabled={reportTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test report"
+                                >
+                                  {reportTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditSchedule(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit schedule"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleReportToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete schedule"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
                   )}
                 </div>
 
-                {reportLoading ? (
-                  <div className="space-y-2">
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                    ))}
-                  </div>
-                ) : reportSchedules.length === 0 ? (
-                  <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
-                    No scheduled reports yet. Add a report to automatically receive analytics summaries.
-                  </div>
-                ) : (
-                  <div className="space-y-3">
-                    {reportSchedules.map((schedule) => (
-                      <div
-                        key={schedule.id}
-                        className={`rounded-xl border p-4 transition-colors ${
-                          schedule.enabled
-                            ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                            : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                        }`}
-                      >
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="flex items-start gap-3 min-w-0">
-                            <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                              {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                            </div>
-                            <div className="min-w-0">
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <span className="font-medium text-neutral-900 dark:text-white">
-                                  {getChannelLabel(schedule.channel)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
-                                  {getFrequencyLabel(schedule.frequency)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                                  {getReportTypeLabel(schedule.report_type)}
-                                </span>
-                              </div>
-                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
-                                {schedule.channel === 'email'
-                                  ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                  : (schedule.channel_config as WebhookConfig).url}
-                              </p>
-                              <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                                {getScheduleDescription(schedule)}
-                              </p>
-                              <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                <span>
-                                  Last sent: {schedule.last_sent_at
-                                    ? formatDateTime(new Date(schedule.last_sent_at))
-                                    : 'Never'}
-                                </span>
-                              </div>
-                              {schedule.last_error && (
-                                <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                  Error: {schedule.last_error}
-                                </p>
-                              )}
-                            </div>
-                          </div>
+                {/* Divider */}
+                <div className="border-t border-neutral-200 dark:border-neutral-800" />
 
-                          {canEdit && (
-                            <div className="flex items-center gap-2 flex-shrink-0">
-                              <button
-                                type="button"
-                                onClick={() => handleReportTest(schedule)}
-                                disabled={reportTesting === schedule.id}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                title="Send test report"
-                              >
-                                {reportTesting === schedule.id ? (
-                                  <SpinnerGap className="w-4 h-4 animate-spin" />
-                                ) : (
-                                  <Play className="w-4 h-4" />
-                                )}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => openEditSchedule(schedule)}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                title="Edit schedule"
-                              >
-                                <PencilSimple className="w-4 h-4" />
-                              </button>
-                              <label className="relative inline-flex items-center cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  checked={schedule.enabled}
-                                  onChange={() => handleReportToggle(schedule)}
-                                  className="sr-only peer"
-                                />
-                                <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                              </label>
-                              <button
-                                type="button"
-                                onClick={() => handleReportDelete(schedule)}
-                                className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                title="Delete schedule"
-                              >
-                                <Trash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
+                {/* Alerts subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Alerts</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
+                        Add Alert Channel
+                      </Button>
+                    )}
                   </div>
-                )}
+
+                  {alertLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 2 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : alertSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {alertSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
+                                    Uptime Alert
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertTest(schedule)}
+                                  disabled={alertTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test alert"
+                                >
+                                  {alertTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditAlert(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit alert channel"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleAlertToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete alert channel"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
             )}
 
@@ -2265,6 +2504,79 @@ export default function SiteSettingsPage() {
         </form>
       </Modal>
 
+      <Modal
+        isOpen={alertModalOpen}
+        onClose={() => setAlertModalOpen(false)}
+        title={editingAlert ? 'Edit alert channel' : 'Add alert channel'}
+      >
+        <form onSubmit={handleAlertSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
+            <div className="grid grid-cols-2 gap-2">
+              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
+                <button
+                  key={ch}
+                  type="button"
+                  onClick={() => setAlertForm({ ...alertForm, channel: ch })}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
+                    alertForm.channel === ch
+                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
+                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                  }`}
+                >
+                  {CHANNEL_ICONS[ch]}
+                  {getChannelLabel(ch)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {alertForm.channel === 'email' ? (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
+              <input
+                type="text"
+                value={alertForm.recipients}
+                onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
+                placeholder="email1@example.com, email2@example.com"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
+            </div>
+          ) : (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                {alertForm.channel === 'slack' ? 'Slack Webhook URL' : alertForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
+              </label>
+              <input
+                type="url"
+                value={alertForm.webhookUrl}
+                onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
+                placeholder="https://hooks.example.com/..."
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+            </div>
+          )}
+
+          <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
+            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="secondary" onClick={() => setAlertModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" disabled={alertSaving}>
+              {alertSaving ? 'Saving...' : editingAlert ? 'Update' : 'Create'}
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
       <VerificationModal
         isOpen={showVerificationModal}
         onClose={() => setShowVerificationModal(false)}

lib/api/report-schedules.ts

@@ -10,6 +10,7 @@ export interface ReportSchedule {
   timezone: string
   enabled: boolean
   report_type: 'summary' | 'pages' | 'sources' | 'goals'
+  purpose: 'report' | 'alert'
   send_hour: number
   send_day: number | null
   next_send_at: string | null
@@ -33,6 +34,7 @@ export interface CreateReportScheduleRequest {
   frequency: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   send_hour?: number
   send_day?: number
 }
@@ -43,6 +45,7 @@ export interface UpdateReportScheduleRequest {
   frequency?: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   enabled?: boolean
   send_hour?: number
   send_day?: number
@@ -73,6 +76,11 @@ export async function deleteReportSchedule(siteId: string, scheduleId: string):
   })
 }
 
+export async function listAlertSchedules(siteId: string): Promise<ReportSchedule[]> {
+  const res = await apiRequest<{ report_schedules: ReportSchedule[] }>(`/sites/${siteId}/report-schedules?purpose=alert`)
+  return res?.report_schedules ?? []
+}
+
 export async function testReportSchedule(siteId: string, scheduleId: string): Promise<void> {
   await apiRequest(`/sites/${siteId}/report-schedules/${scheduleId}/test`, {
     method: 'POST',

lib/swr/dashboard.ts

@@ -32,7 +32,7 @@ import type { Site } from '@/lib/api/sites'
 import { listFunnels, type Funnel } from '@/lib/api/funnels'
 import { getUptimeStatus, type UptimeStatusResponse } from '@/lib/api/uptime'
 import { listGoals, type Goal } from '@/lib/api/goals'
-import { listReportSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
+import { listReportSchedules, listAlertSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
 import { listSessions, getBotFilterStats, type SessionSummary, type BotFilterStats } from '@/lib/api/bot-filter'
 import { getGSCStatus, getGSCOverview, getGSCTopQueries, getGSCTopPages, getGSCDailyTotals, getGSCNewQueries } from '@/lib/api/gsc'
 import type { GSCStatus, GSCOverview, GSCQueryResponse, GSCPageResponse, GSCDailyTotal, GSCNewQueries } from '@/lib/api/gsc'
@@ -81,6 +81,7 @@ const fetchers = {
   uptimeStatus: (siteId: string) => getUptimeStatus(siteId),
   goals: (siteId: string) => listGoals(siteId),
   reportSchedules: (siteId: string) => listReportSchedules(siteId),
+  alertSchedules: (siteId: string) => listAlertSchedules(siteId),
   gscStatus: (siteId: string) => getGSCStatus(siteId),
   gscOverview: (siteId: string, start: string, end: string) => getGSCOverview(siteId, start, end),
   gscTopQueries: (siteId: string, start: string, end: string, limit: number, offset: number) => getGSCTopQueries(siteId, start, end, limit, offset),
@@ -411,6 +412,19 @@ export function useReportSchedules(siteId: string) {
   )
 }
 
+// * Hook for alert schedules (uptime alerts)
+export function useAlertSchedules(siteId: string) {
+  return useSWR<ReportSchedule[]>(
+    siteId ? ['alertSchedules', siteId] : null,
+    () => fetchers.alertSchedules(siteId),
+    {
+      ...dashboardSWRConfig,
+      refreshInterval: 60 * 1000,
+      dedupingInterval: 10 * 1000,
+    }
+  )
+}
+
 // * Hook for GSC connection status
 export function useGSCStatus(siteId: string) {
   return useSWR<GSCStatus>(