Add Alerts webapp UI (ticket 020)

New Alerts panel: lists rules with condition summaries and an enabled
toggle, and a condition-type-specific editor (Immediate/Threshold/NewValue/
Ratio) with client-side validation before save, reusing FilterBar's query
input styling for query-based conditions. Adds a test-notification endpoint
(POST /api/settings/alerts/test) so an ntfy topic/server can be verified
without saving a rule first, plus a docs section and help icons matching
ticket 021's pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/lib/api.ts

@@ -144,6 +144,30 @@ export interface Dashboard {
   panels: Panel[]
 }
 
+/// Comparison operator shared by `AlertCondition::Threshold`/`Ratio` and
+/// filter-query metric comparisons (see `CompareOp` on the backend).
+export type CompareOp = 'lt' | 'gt' | 'le' | 'ge' | 'eq' | 'ne'
+
+/// What triggers an alert rule (ticket 017/018). Externally tagged on
+/// `kind`, matching `AlertCondition`'s `#[serde(tag = "kind")]`.
+export type AlertCondition =
+  | { kind: 'immediate'; query: string }
+  | { kind: 'threshold'; query: string; op: CompareOp; threshold: number; window_ms: number }
+  | { kind: 'newvalue'; field_regex: string; capture_group: string }
+  | { kind: 'ratio'; query_a: string; query_b: string; op: CompareOp; ratio: number; window_ms: number }
+
+/// Where a fired alert is delivered (ticket 019). Only one sink kind exists
+/// today, but this stays a tagged union to match the backend.
+export type AlertSink = { kind: 'ntfy'; topic: string; server: string | null }
+
+export interface AlertRule {
+  id: string
+  name: string
+  enabled: boolean
+  condition: AlertCondition
+  sink: AlertSink
+}
+
 async function getJson<T>(path: string): Promise<T> {
   const res = await fetch(path)
   if (!res.ok) {
@@ -360,3 +384,29 @@ export function deleteDashboard(profileName: string, dashboardId: string): Promi
     'DELETE',
   )
 }
+
+export function fetchAlertRules(): Promise<AlertRule[]> {
+  return getJson('/api/settings/alerts')
+}
+
+export function createAlertRule(rule: { name: string; enabled: boolean; condition: AlertCondition; sink: AlertSink }): Promise<AlertRule> {
+  return postJson('/api/settings/alerts', rule)
+}
+
+export function updateAlertRule(
+  id: string,
+  rule: { name: string; enabled: boolean; condition: AlertCondition; sink: AlertSink },
+): Promise<AlertRule> {
+  return sendJson(`/api/settings/alerts/${encodeURIComponent(id)}`, 'PUT', rule)
+}
+
+export function deleteAlertRule(id: string): Promise<void> {
+  return sendJson(`/api/settings/alerts/${encodeURIComponent(id)}`, 'DELETE')
+}
+
+/// Delivers a test notification to `topic`/`server` (ticket 020) without
+/// requiring the rule to be saved first. Throws `ApiError` on failure (e.g.
+/// ntfy unreachable) so callers can surface it inline.
+export function sendTestAlertNotification(topic: string, server: string | null): Promise<void> {
+  return sendJson('/api/settings/alerts/test', 'POST', { topic, server })
+}