feat: refactor stage 2

apps/web/src/views/detail.ejs

@@ -170,7 +170,7 @@
       <!-- Edit form -->
       <div class="card-static p-6">
         <h3 class="text-sm text-gray-400 mb-4">Edit Monitor</h3>
-        <%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800/50', border: 'border-border-subtle' }, plan: it.plan }) %>
+        <%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800/50', border: 'border-border-subtle' }, plan: it.plan, regions: it.regions, channels: it.channels }) %>
       </div>
     </div>
   </main>

apps/web/src/views/new.ejs

@@ -7,7 +7,7 @@
       <h2 class="text-lg font-semibold text-gray-200 mt-2">Create Monitor</h2>
     </div>
 
-    <%~ include('./partials/monitor-form', { _form: { monitor: {}, isEdit: false, prefix: '', bg: 'bg-surface-solid', border: 'border-border-subtle' }, plan: it.plan }) %>
+    <%~ include('./partials/monitor-form', { _form: { monitor: {}, isEdit: false, prefix: '', bg: 'bg-surface-solid', border: 'border-border-subtle' }, plan: it.plan, regions: it.regions, channels: it.channels }) %>
   </main>
 
   <script>

apps/web/src/views/notifications.ejs

@@ -0,0 +1,78 @@
+<%~ include('./partials/head', { title: 'Notifications' }) %>
+<%~ include('./partials/nav', { nav: 'notifications' }) %>
+
+<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
+
+  <div class="flex items-center justify-between">
+    <h1 class="text-xl font-semibold text-white">Notification channels</h1>
+    <a href="#new" class="btn-primary inline-flex items-center gap-2 px-4 py-2 text-sm">+ New channel</a>
+  </div>
+
+  <p class="text-sm text-gray-500 leading-relaxed">
+    Channels are dispatched on status transitions (the "important" beats). Webhooks POST a JSON payload to your URL.
+    More providers (Discord, Slack, Email, Telegram) will land here as drop-ins.
+  </p>
+
+  <% if (!it.channels || it.channels.length === 0) { %>
+    <section class="card-static p-6 text-sm text-gray-500">
+      No channels yet. Create one below to start receiving alerts.
+    </section>
+  <% } else { %>
+    <% it.channels.forEach(function(c) { %>
+      <section class="card-static p-6">
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <h2 class="text-sm font-semibold text-gray-200 truncate"><%= c.name %></h2>
+              <span class="text-xs px-2 py-0.5 rounded-full bg-gray-800/50 border border-border-subtle text-gray-400 font-mono"><%= c.kind %></span>
+              <% if (!c.enabled) { %>
+                <span class="text-xs px-2 py-0.5 rounded-full bg-yellow-900/20 border border-yellow-800/30 text-yellow-500">paused</span>
+              <% } %>
+            </div>
+            <% if (c.kind === 'webhook' && c.config && c.config.url) { %>
+              <code class="text-xs text-gray-500 font-mono break-all"><%= c.config.url %></code>
+            <% } %>
+          </div>
+          <div class="flex items-center gap-2 shrink-0">
+            <form action="/dashboard/notifications/<%= c.id %>/test" method="POST" class="inline">
+              <button type="submit" class="px-3 py-1.5 rounded-lg border border-border-subtle text-gray-400 hover:text-gray-200 text-xs transition-colors">Test</button>
+            </form>
+            <form action="/dashboard/notifications/<%= c.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete channel \'<%= c.name %>\'? Monitors using it will lose this notification target.')">
+              <button type="submit" class="px-3 py-1.5 rounded-lg border border-red-900/30 text-red-400 hover:bg-red-900/20 hover:border-red-800/40 text-xs transition-colors">Delete</button>
+            </form>
+          </div>
+        </div>
+      </section>
+    <% }) %>
+  <% } %>
+
+  <% if (it.testResult) { %>
+    <div class="text-sm <%= it.testResult.ok ? 'text-green-400' : 'text-red-400' %>">
+      <%= it.testResult.ok ? 'Test event sent successfully.' : ('Test failed: ' + it.testResult.error) %>
+    </div>
+  <% } %>
+
+  <section id="new" class="card-static p-6">
+    <h2 class="text-sm font-semibold text-gray-300 mb-4">New webhook channel</h2>
+    <form action="/dashboard/notifications/new" method="POST" class="space-y-4">
+      <input type="hidden" name="kind" value="webhook">
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">Name</label>
+        <input name="name" type="text" required placeholder="On-call webhook"
+          class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
+      </div>
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">URL</label>
+        <input name="url" type="url" required placeholder="https://hooks.example.com/pingql"
+          class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm">
+      </div>
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">HMAC secret <span class="text-gray-600">(optional)</span></label>
+        <input name="secret" type="text" placeholder="Used to sign payloads as X-PingQL-Signature"
+          class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm">
+      </div>
+      <button type="submit" class="btn-primary px-6 py-2.5 text-sm">Create channel</button>
+    </form>
+  </section>
+
+</main>

apps/web/src/views/partials/monitor-form-js.ejs

@@ -46,7 +46,9 @@
         max_retries: Number(document.getElementById(prefix + 'max-retries').value),
         retry_interval_s: Number(document.getElementById(prefix + 'retry-interval').value),
         resend_interval: Number(document.getElementById(prefix + 'resend-interval').value),
+        cert_alert_days: Number(document.getElementById(prefix + 'cert-alert-days').value),
       };
+      body.channel_ids = [...document.querySelectorAll('.' + prefix + 'channel-check:checked')].map(el => el.value);
       if (Object.keys(headers).length) body.request_headers = headers;
       else body.request_headers = null;
       const rb = document.getElementById(prefix + 'request-body').value.trim();

apps/web/src/views/partials/monitor-form.ejs

@@ -114,6 +114,37 @@
     </div>
   </div>
 
+  <div>
+    <label class="block text-sm text-gray-400 mb-1.5">TLS cert expiry alert</label>
+    <select id="<%= prefix %>cert-alert-days" name="cert_alert_days"
+      class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+      <% [['0','Disabled'],['7','7 days before expiry'],['14','14 days before expiry'],['30','30 days before expiry'],['60','60 days before expiry']].forEach(function([val, label]) { %>
+        <option value="<%= val %>" <%= String(monitor.cert_alert_days ?? '14') === val ? 'selected' : '' %>><%= label %></option>
+      <% }) %>
+    </select>
+  </div>
+
+  <%
+    const channels = it.channels || [];
+    const attached = (monitor.channel_ids && monitor.channel_ids.length) ? monitor.channel_ids : [];
+  %>
+  <div>
+    <label class="block text-sm text-gray-400 mb-1.5">Notification channels <span class="text-gray-600">(optional)</span></label>
+    <% if (channels.length === 0) { %>
+      <p class="text-xs text-gray-600">No channels yet. <a href="/dashboard/notifications" class="text-blue-400 hover:text-blue-300">Create one</a> to get alerted on transitions.</p>
+    <% } else { %>
+      <div class="flex flex-wrap gap-2">
+        <% channels.forEach(function(c) { %>
+          <label class="flex items-center gap-2 <%= bg %> border <%= border %> hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
+            <input type="checkbox" name="channel_ids" value="<%= c.id %>" class="<%= prefix %>channel-check accent-blue-500" <%= attached.includes(c.id) ? 'checked' : '' %>>
+            <span class="text-sm text-gray-300"><%= c.name %></span>
+            <span class="text-xs text-gray-600 font-mono"><%= c.kind %></span>
+          </label>
+        <% }) %>
+      </div>
+    <% } %>
+  </div>
+
   <%
     // Default to all regions if none selected
     const selectedRegions = (monitor.regions && monitor.regions.length) ? monitor.regions : regions.map(r => r[0]);

apps/web/src/views/partials/nav.ejs

@@ -2,6 +2,7 @@
   <a href="/dashboard/home" class="text-xl font-bold tracking-tight group">Ping<span class="text-blue-400 transition-all group-hover:drop-shadow-[0_0_8px_rgba(59,130,246,0.4)]">QL</span></a>
   <div class="flex items-center gap-5 text-sm text-gray-500">
     <a href="/dashboard/home" class="<%= it.nav === 'monitors' ? 'text-gray-200 relative after:absolute after:bottom-[-18px] after:left-0 after:right-0 after:h-[2px] after:bg-blue-500 after:rounded-full' : 'hover:text-gray-300' %> transition-colors">Monitors</a>
+    <a href="/dashboard/notifications" class="<%= it.nav === 'notifications' ? 'text-gray-200 relative after:absolute after:bottom-[-18px] after:left-0 after:right-0 after:h-[2px] after:bg-blue-500 after:rounded-full' : 'hover:text-gray-300' %> transition-colors">Notifications</a>
     <a href="/dashboard/settings" class="<%= it.nav === 'settings' ? 'text-gray-200 relative after:absolute after:bottom-[-18px] after:left-0 after:right-0 after:h-[2px] after:bg-blue-500 after:rounded-full' : 'hover:text-gray-300' %> transition-colors">Settings</a>
     <a href="/account/logout" class="hover:text-gray-300 transition-colors">Logout</a>
   </div>