From df6f8b6f629686abe5dc9c8419645f5754d29cbd Mon Sep 17 00:00:00 2001
From: mrhid6 <mrhid6@gmail.com>
Date: Tue, 21 Jul 2026 14:24:38 +0100
Subject: [PATCH] feat(web): notification channel settings UI

---
 web/app/monitors/new/page.tsx           |  34 ++++-
 web/app/monitors/page.tsx               |  11 +-
 web/app/settings/notifications/page.tsx | 174 ++++++++++++++++++++++++
 web/lib/api.ts                          |  39 ++++++
 4 files changed, 254 insertions(+), 4 deletions(-)
 create mode 100644 web/app/settings/notifications/page.tsx

diff --git a/web/app/monitors/new/page.tsx b/web/app/monitors/new/page.tsx
index 3f02ac3..1c60a1e 100644
--- a/web/app/monitors/new/page.tsx
+++ b/web/app/monitors/new/page.tsx
@@ -29,8 +29,10 @@ export default function NewMonitorPage() {
   const [retries, setRetries] = useState<number>(1);
   const [runner, setRunner] = useState("server");
   const [enabled, setEnabled] = useState(true);
+  const [channelIds, setChannelIds] = useState<string[]>([]);
 
   const { data: servers } = useQuery({ queryKey: ["servers"], queryFn: () => api.listServers() });
+  const { data: channels } = useQuery({ queryKey: ["channels"], queryFn: () => api.listChannels() });
 
   const { mutate: create, isPending, error } = useMutation({
     mutationFn: (input: MonitorInput) => api.createMonitor(input),
@@ -58,7 +60,7 @@ export default function NewMonitorPage() {
       target.host = host;
       target.port = port;
     }
-    create({ name, type, target, interval_sec: intervalSec, retries, runner, enabled });
+    create({ name, type, target, interval_sec: intervalSec, retries, runner, enabled, channel_ids: channelIds });
   }
 
   return (
@@ -165,6 +167,36 @@ export default function NewMonitorPage() {
             <p className="mt-1 text-xs text-text-tertiary">Agent-run monitors require the agent monitor scheduler (P2).</p>
           </div>
 
+          <div>
+            <label className={labelClass}>Notification channels</label>
+            {!channels || channels.length === 0 ? (
+              <p className="text-xs text-text-tertiary">
+                No channels yet.{" "}
+                <Link href="/settings/notifications" className="text-accent hover:underline">
+                  Add one
+                </Link>
+                .
+              </p>
+            ) : (
+              <div className="space-y-1.5">
+                {channels.map((ch) => (
+                  <label key={ch.channel_id} className="flex items-center gap-2 text-sm text-text-secondary">
+                    <input
+                      type="checkbox"
+                      checked={channelIds.includes(ch.channel_id)}
+                      onChange={(e) =>
+                        setChannelIds((prev) =>
+                          e.target.checked ? [...prev, ch.channel_id] : prev.filter((id) => id !== ch.channel_id),
+                        )
+                      }
+                    />
+                    {ch.name} <span className="text-text-tertiary">({ch.type})</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+
           <label className="flex items-center gap-2 text-sm text-text-secondary">
             <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
             Enabled
diff --git a/web/app/monitors/page.tsx b/web/app/monitors/page.tsx
index f958857..ec8222e 100644
--- a/web/app/monitors/page.tsx
+++ b/web/app/monitors/page.tsx
@@ -37,9 +37,14 @@ export default function MonitorsPage() {
           <h1 className="text-2xl font-bold text-text-primary">Monitors</h1>
           <p className="mt-1 text-sm text-text-secondary">Service uptime and latency checks.</p>
         </div>
-        <Link href="/monitors/new">
-          <Button variant="primary">New Monitor</Button>
-        </Link>
+        <div className="flex gap-2">
+          <Link href="/settings/notifications">
+            <Button variant="secondary">Notifications</Button>
+          </Link>
+          <Link href="/monitors/new">
+            <Button variant="primary">New Monitor</Button>
+          </Link>
+        </div>
       </div>
 
       <Card padding={false}>
diff --git a/web/app/settings/notifications/page.tsx b/web/app/settings/notifications/page.tsx
new file mode 100644
index 0000000..6ba84c3
--- /dev/null
+++ b/web/app/settings/notifications/page.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import Link from "next/link";
+import { api, ChannelInput, ChannelType, NotificationChannel } from "@/lib/api";
+import { Badge, Button, Card } from "@/components/ui";
+
+const inputClass =
+  "w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30";
+const labelClass = "mb-1.5 block text-sm font-medium text-text-secondary";
+
+// Config fields required per channel type.
+const CONFIG_FIELDS: Record<ChannelType, string[]> = {
+  webhook: ["url"],
+  slack: ["url"],
+  discord: ["url"],
+  telegram: ["token", "chat_id"],
+  smtp: ["host", "port", "username", "password", "from", "to"],
+};
+
+function ChannelForm({ onDone }: { onDone: () => void }) {
+  const queryClient = useQueryClient();
+  const [name, setName] = useState("");
+  const [type, setType] = useState<ChannelType>("webhook");
+  const [config, setConfig] = useState<Record<string, string>>({});
+
+  const { mutate: create, isPending, error } = useMutation({
+    mutationFn: (input: ChannelInput) => api.createChannel(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["channels"] });
+      onDone();
+    },
+  });
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        create({ name, type, config, enabled: true });
+      }}
+      className="space-y-4"
+    >
+      <div>
+        <label className={labelClass}>Name</label>
+        <input className={inputClass} value={name} onChange={(e) => setName(e.target.value)} required />
+      </div>
+      <div>
+        <label className={labelClass}>Type</label>
+        <select
+          className={inputClass}
+          value={type}
+          onChange={(e) => {
+            setType(e.target.value as ChannelType);
+            setConfig({});
+          }}
+        >
+          {(["webhook", "smtp", "discord", "slack", "telegram"] as const).map((t) => (
+            <option key={t} value={t}>
+              {t}
+            </option>
+          ))}
+        </select>
+      </div>
+      {CONFIG_FIELDS[type].map((field) => (
+        <div key={field}>
+          <label className={labelClass}>{field}</label>
+          <input
+            className={inputClass}
+            type={field === "password" ? "password" : "text"}
+            value={config[field] ?? ""}
+            onChange={(e) => setConfig({ ...config, [field]: e.target.value })}
+          />
+        </div>
+      ))}
+      {error && <p className="text-sm text-danger">{(error as Error).message}</p>}
+      <div className="flex gap-3">
+        <Button type="submit" variant="primary" loading={isPending}>
+          Add Channel
+        </Button>
+        <Button type="button" variant="ghost" onClick={onDone}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function ChannelRow({ ch }: { ch: NotificationChannel }) {
+  const queryClient = useQueryClient();
+  const [testMsg, setTestMsg] = useState<string | null>(null);
+
+  const { mutate: remove } = useMutation({
+    mutationFn: () => api.deleteChannel(ch.channel_id),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["channels"] }),
+  });
+
+  const { mutate: test, isPending: testing } = useMutation({
+    mutationFn: () => api.testChannel(ch.channel_id),
+    onSuccess: () => setTestMsg("Sent!"),
+    onError: (e) => setTestMsg((e as Error).message),
+  });
+
+  const { mutate: toggle } = useMutation({
+    mutationFn: (enabled: boolean) => api.updateChannel(ch.channel_id, { enabled }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["channels"] }),
+  });
+
+  return (
+    <div className="flex items-center justify-between border-b border-border px-4 py-3 last:border-0">
+      <div>
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-text-primary">{ch.name}</span>
+          <Badge variant="neutral">{ch.type}</Badge>
+          {!ch.enabled && <Badge variant="warning">disabled</Badge>}
+        </div>
+        {testMsg && <p className="mt-1 text-xs text-text-secondary">{testMsg}</p>}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm" loading={testing} onClick={() => test()}>
+          Test
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => toggle(!ch.enabled)}>
+          {ch.enabled ? "Disable" : "Enable"}
+        </Button>
+        <Button variant="danger" size="sm" onClick={() => remove()}>
+          Delete
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function NotificationSettingsPage() {
+  const [showForm, setShowForm] = useState(false);
+  const { data: channels, isLoading } = useQuery({ queryKey: ["channels"], queryFn: () => api.listChannels() });
+
+  return (
+    <div className="p-8">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <Link href="/monitors" className="text-sm text-text-secondary hover:text-text-primary">
+            ← Monitors
+          </Link>
+          <h1 className="mt-2 text-2xl font-bold text-text-primary">Notification Channels</h1>
+          <p className="mt-1 text-sm text-text-secondary">Alert destinations for monitor state changes.</p>
+        </div>
+        {!showForm && (
+          <Button variant="primary" onClick={() => setShowForm(true)}>
+            New Channel
+          </Button>
+        )}
+      </div>
+
+      {showForm && (
+        <Card className="mb-6 max-w-xl">
+          <ChannelForm onDone={() => setShowForm(false)} />
+        </Card>
+      )}
+
+      <Card padding={false}>
+        {isLoading ? (
+          <div className="flex justify-center py-16">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
+          </div>
+        ) : !channels || channels.length === 0 ? (
+          <div className="py-16 text-center text-sm text-text-secondary">No channels configured.</div>
+        ) : (
+          channels.map((ch) => <ChannelRow key={ch.channel_id} ch={ch} />)
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/web/lib/api.ts b/web/lib/api.ts
index c169483..0d75145 100644
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -97,6 +97,24 @@ export interface Rollup {
   sum_latency: number;
 }
 
+export type ChannelType = "webhook" | "smtp" | "discord" | "slack" | "telegram";
+
+export interface NotificationChannel {
+  channel_id: string;
+  name: string;
+  type: ChannelType;
+  config: Record<string, string>;
+  enabled: boolean;
+  created_at: string;
+}
+
+export interface ChannelInput {
+  name: string;
+  type: ChannelType;
+  config: Record<string, string>;
+  enabled: boolean;
+}
+
 export interface ConsoleConnectRequest {
   server_id: string;
   protocol: string;
@@ -370,6 +388,27 @@ export const api = {
     return request<Rollup[]>(`/monitors/${monitorId}/uptime`);
   },
 
+  // Notification channels
+  listChannels(): Promise<NotificationChannel[]> {
+    return request<NotificationChannel[]>("/channels");
+  },
+
+  createChannel(input: ChannelInput): Promise<NotificationChannel> {
+    return request<NotificationChannel>("/channels", { method: "POST", body: JSON.stringify(input) });
+  },
+
+  updateChannel(channelId: string, input: Partial<ChannelInput>): Promise<void> {
+    return request<void>(`/channels/${channelId}`, { method: "PUT", body: JSON.stringify(input) });
+  },
+
+  deleteChannel(channelId: string): Promise<void> {
+    return request<void>(`/channels/${channelId}`, { method: "DELETE" });
+  },
+
+  testChannel(channelId: string): Promise<{ status: string }> {
+    return request<{ status: string }>(`/channels/${channelId}/test`, { method: "POST" });
+  },
+
   getLatestAgentVersion(): Promise<{ version: string }> {
     return request<{ version: string }>("/agent/latest-version");
   },