omni-notify-mcp 1.2.3 → 1.3.1

package/dist/channels/discord.js

@@ -0,0 +1,20 @@
+const COLOR_MAP = { low: 0x6b7280, normal: 0x7c6dfa, high: 0xef4444 };
+export async function sendDiscord(config, message, priority = "normal", title = "Claude Notify") {
+    if (!config.enabled)
+        return;
+    const res = await fetch(config.webhookUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            username: config.username ?? "Claude Notify",
+            embeds: [{
+                    title,
+                    description: message,
+                    color: COLOR_MAP[priority] ?? COLOR_MAP.normal,
+                    timestamp: new Date().toISOString(),
+                }],
+        }),
+    });
+    if (!res.ok)
+        throw new Error(`Discord ${res.status}: ${await res.text()}`);
+}

package/dist/channels/ntfy.js

@@ -0,0 +1,21 @@
+const PRIORITY_MAP = { low: 2, normal: 3, high: 5 };
+export async function sendNtfy(config, message, priority = "normal", title = "Claude Notify") {
+    if (!config.enabled)
+        return;
+    const base = (config.serverUrl ?? "https://ntfy.sh").replace(/\/$/, "");
+    const headers = {
+        "Content-Type": "text/plain",
+        "Title": title,
+        "Priority": String(PRIORITY_MAP[priority] ?? 3),
+        "Tags": priority === "high" ? "rotating_light" : "bell",
+    };
+    if (config.token)
+        headers["Authorization"] = `Bearer ${config.token}`;
+    const res = await fetch(`${base}/${encodeURIComponent(config.topic)}`, {
+        method: "POST",
+        headers,
+        body: message,
+    });
+    if (!res.ok)
+        throw new Error(`ntfy ${res.status}: ${await res.text()}`);
+}

package/dist/channels/pushover.js

@@ -0,0 +1,26 @@
+const PRIORITY_MAP = { low: -1, normal: 0, high: 1 };
+export async function sendPushover(config, message, priority = "normal", title = "Claude Notify") {
+    if (!config.enabled)
+        return;
+    const params = new URLSearchParams({
+        token: config.appToken,
+        user: config.userKey,
+        message,
+        title,
+        priority: String(PRIORITY_MAP[priority] ?? 0),
+        sound: config.sound ?? "pushover",
+    });
+    if (config.device)
+        params.set("device", config.device);
+    // priority=1 (high) bypasses quiet hours on the device but doesn't require
+    // retry/expire like emergency (2). We deliberately avoid emergency mode to
+    // prevent infinite retries for agent notifications.
+    const res = await fetch("https://api.pushover.net/1/messages.json", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: params.toString(),
+    });
+    const json = await res.json();
+    if (json.status !== 1)
+        throw new Error(`Pushover error: ${JSON.stringify(json.errors ?? json)}`);
+}

package/dist/channels/slack.js

@@ -0,0 +1,25 @@
+const EMOJI_MAP = { low: "ℹ️", normal: "🔔", high: "🚨" };
+export async function sendSlack(config, message, priority = "normal", title = "Claude Notify") {
+    if (!config.enabled)
+        return;
+    const emoji = EMOJI_MAP[priority] ?? EMOJI_MAP.normal;
+    const res = await fetch(config.webhookUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            text: `${emoji} *${title}*`,
+            blocks: [
+                {
+                    type: "section",
+                    text: { type: "mrkdwn", text: `${emoji} *${title}*\n${message}` },
+                },
+                {
+                    type: "context",
+                    elements: [{ type: "mrkdwn", text: `Priority: ${priority} · <!date^${Math.floor(Date.now() / 1000)}^{time}|now>` }],
+                },
+            ],
+        }),
+    });
+    if (!res.ok)
+        throw new Error(`Slack ${res.status}: ${await res.text()}`);
+}

package/dist/channels/teams.js

@@ -0,0 +1,43 @@
+const COLOR_MAP = { low: "Default", normal: "Accent", high: "Attention" };
+export async function sendTeams(config, message, priority = "normal", title = "Claude Notify") {
+    if (!config.enabled)
+        return;
+    const res = await fetch(config.webhookUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            type: "message",
+            attachments: [{
+                    contentType: "application/vnd.microsoft.card.adaptive",
+                    contentUrl: null,
+                    content: {
+                        $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
+                        type: "AdaptiveCard",
+                        version: "1.2",
+                        body: [
+                            {
+                                type: "TextBlock",
+                                size: "Medium",
+                                weight: "Bolder",
+                                text: title,
+                                color: COLOR_MAP[priority] ?? "Default",
+                            },
+                            {
+                                type: "TextBlock",
+                                text: message,
+                                wrap: true,
+                            },
+                            {
+                                type: "TextBlock",
+                                text: `Priority: ${priority} · ${new Date().toLocaleTimeString()}`,
+                                isSubtle: true,
+                                size: "Small",
+                            },
+                        ],
+                    },
+                }],
+        }),
+    });
+    if (!res.ok)
+        throw new Error(`Teams ${res.status}: ${await res.text()}`);
+}

package/dist/ui/server.js

@@ -28,6 +28,10 @@ function defaultConfig() {
         whatsapp: { enabled: false, instanceId: "", apiToken: "", phone: "" },
         sms: { enabled: false, accountSid: "", authToken: "", from: "", to: "" },
         email: { enabled: false, to: "" },
+        ntfy: { enabled: false, topic: "", serverUrl: "https://ntfy.sh", token: "" },
+        discord: { enabled: false, webhookUrl: "", username: "Claude Notify" },
+        slack: { enabled: false, webhookUrl: "" },
+        teams: { enabled: false, webhookUrl: "" },
         dnd: {
             enabled: false, // manual toggle — when true, suppress all non-priority=high notifs
             schedule: {
@@ -101,11 +105,19 @@ function maskSecrets(config) {
         c.telegram.token = MASKED;
     if (c.whatsapp?.apiToken)
         c.whatsapp.apiToken = MASKED;
+    if (c.ntfy?.token)
+        c.ntfy.token = MASKED;
+    if (c.discord?.webhookUrl)
+        c.discord.webhookUrl = MASKED;
+    if (c.slack?.webhookUrl)
+        c.slack.webhookUrl = MASKED;
+    if (c.teams?.webhookUrl)
+        c.teams.webhookUrl = MASKED;
     return c;
 }
 function mergePreservingSecrets(existing, update) {
     const merged = { ...defaultConfig(), ...existing };
-    for (const section of ["desktop", "telegram", "whatsapp", "sms", "email", "dnd", "idle"]) {
+    for (const section of ["desktop", "telegram", "whatsapp", "sms", "email", "ntfy", "discord", "slack", "teams", "dnd", "idle"]) {
         merged[section] = { ...(merged[section] || {}), ...(update[section] || {}) };
     }
     // Nested schedule inside dnd
@@ -125,6 +137,10 @@ function mergePreservingSecrets(existing, update) {
     guard(["sms", "authToken"]);
     guard(["telegram", "token"]);
     guard(["whatsapp", "apiToken"]);
+    guard(["ntfy", "token"]);
+    guard(["discord", "webhookUrl"]);
+    guard(["slack", "webhookUrl"]);
+    guard(["teams", "webhookUrl"]);
     return merged;
 }
 const app = express();
@@ -369,6 +385,80 @@ app.post("/api/test/email", async (_req, res) => {
         res.status(500).json({ error: String(err) });
     }
 });
+app.post("/api/test/ntfy", async (_req, res) => {
+    const cfg = loadConfig();
+    const ntfy = cfg.ntfy ?? {};
+    if (!ntfy.topic) {
+        res.status(400).json({ error: "Topic is required." });
+        return;
+    }
+    try {
+        const base = (ntfy.serverUrl ?? "https://ntfy.sh").replace(/\/$/, "");
+        const headers = {
+            "Content-Type": "text/plain", "Title": "Claude Notify — test", "Priority": "3", "Tags": "white_check_mark",
+        };
+        if (ntfy.token)
+            headers["Authorization"] = `Bearer ${ntfy.token}`;
+        const r = await fetch(`${base}/${encodeURIComponent(ntfy.topic)}`, { method: "POST", headers, body: "Test from Claude Notify — ntfy is working!" });
+        if (!r.ok)
+            throw new Error(`ntfy ${r.status}: ${await r.text()}`);
+        res.json({ ok: true, message: `ntfy notification sent to topic '${ntfy.topic}'` });
+    }
+    catch (err) {
+        res.status(500).json({ error: String(err) });
+    }
+});
+app.post("/api/test/discord", async (_req, res) => {
+    const cfg = loadConfig();
+    const dc = cfg.discord ?? {};
+    if (!dc.webhookUrl) {
+        res.status(400).json({ error: "Webhook URL is required." });
+        return;
+    }
+    try {
+        const r = await fetch(dc.webhookUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username: dc.username ?? "Claude Notify", embeds: [{ title: "Claude Notify — test", description: "Test from Claude Notify — Discord is working!", color: 0x7c6dfa, timestamp: new Date().toISOString() }] }) });
+        if (!r.ok)
+            throw new Error(`Discord ${r.status}: ${await r.text()}`);
+        res.json({ ok: true, message: "Discord message sent!" });
+    }
+    catch (err) {
+        res.status(500).json({ error: String(err) });
+    }
+});
+app.post("/api/test/slack", async (_req, res) => {
+    const cfg = loadConfig();
+    const sl = cfg.slack ?? {};
+    if (!sl.webhookUrl) {
+        res.status(400).json({ error: "Webhook URL is required." });
+        return;
+    }
+    try {
+        const r = await fetch(sl.webhookUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: "🔔 *Claude Notify — test*\nTest from Claude Notify — Slack is working!" }) });
+        if (!r.ok)
+            throw new Error(`Slack ${r.status}: ${await r.text()}`);
+        res.json({ ok: true, message: "Slack message sent!" });
+    }
+    catch (err) {
+        res.status(500).json({ error: String(err) });
+    }
+});
+app.post("/api/test/teams", async (_req, res) => {
+    const cfg = loadConfig();
+    const tm = cfg.teams ?? {};
+    if (!tm.webhookUrl) {
+        res.status(400).json({ error: "Webhook URL is required." });
+        return;
+    }
+    try {
+        const r = await fetch(tm.webhookUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: "message", attachments: [{ contentType: "application/vnd.microsoft.card.adaptive", contentUrl: null, content: { $schema: "http://adaptivecards.io/schemas/adaptive-card.json", type: "AdaptiveCard", version: "1.2", body: [{ type: "TextBlock", size: "Medium", weight: "Bolder", text: "Claude Notify — test" }, { type: "TextBlock", text: "Test from Claude Notify — Teams is working!", wrap: true }] } }] }) });
+        if (!r.ok)
+            throw new Error(`Teams ${r.status}: ${await r.text()}`);
+        res.json({ ok: true, message: "Teams message sent!" });
+    }
+    catch (err) {
+        res.status(500).json({ error: String(err) });
+    }
+});
 // ── Google ADC auto-setup ─────────────────────────────────────────────────────
 async function adcEmail() {
     if (!existsSync(ADC_PATH))
@@ -612,7 +702,14 @@ async function sendNotification(message, priority, client) {
     // the TTL), they clearly want a reply over that channel, so skip idle gating.
     const inTelegramConvo = Date.now() - lastTelegramInboundAt < TELEGRAM_CONVO_TTL_MS;
     let desktopOnlyMode = false;
-    if (priority !== "high" && !inTelegramConvo && cfg.idle?.enabled !== false) {
+    // If the web UI is open and the user is actively watching it, skip remote channels.
+    if (priority !== "high" && isUiActivelyOpen()) {
+        if (cfg.idle?.alwaysDesktopWhenActive !== false && cfg.desktop?.enabled) {
+            desktopOnlyMode = true;
+            log("·", "ui", `UI visible — desktop-only`, client);
+        }
+    }
+    if (!desktopOnlyMode && priority !== "high" && !inTelegramConvo && cfg.idle?.enabled !== false) {
         const idleSecs = getOsIdleSeconds();
         const threshold = cfg.idle?.thresholdSeconds ?? 120;
         const userIsActive = idleSecs >= 0 && idleSecs < threshold;
@@ -711,6 +808,107 @@ async function sendNotification(message, priority, client) {
                 to: email.to, subject: "Claude Notify", text: message });
         });
     }
+    // ntfy
+    if (!desktopOnlyMode) {
+        const ntfy = cfg.ntfy ?? {};
+        if (ntfy.enabled && ntfy.topic) {
+            await send("ntfy", async () => {
+                const base = (ntfy.serverUrl ?? "https://ntfy.sh").replace(/\/$/, "");
+                const priorityMap = { low: 2, normal: 3, high: 5 };
+                const headers = {
+                    "Content-Type": "text/plain",
+                    "Title": "Claude Notify",
+                    "Priority": String(priorityMap[priority] ?? 3),
+                    "Tags": priority === "high" ? "rotating_light" : "bell",
+                };
+                if (ntfy.token)
+                    headers["Authorization"] = `Bearer ${ntfy.token}`;
+                const r = await fetch(`${base}/${encodeURIComponent(ntfy.topic)}`, {
+                    method: "POST", headers, body: message,
+                });
+                if (!r.ok)
+                    throw new Error(`ntfy ${r.status}: ${await r.text()}`);
+            });
+        }
+    }
+    // Discord
+    if (!desktopOnlyMode) {
+        const dc = cfg.discord ?? {};
+        if (dc.enabled && dc.webhookUrl) {
+            await send("discord", async () => {
+                const colorMap = { low: 0x6b7280, normal: 0x7c6dfa, high: 0xef4444 };
+                const r = await fetch(dc.webhookUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        username: dc.username ?? "Claude Notify",
+                        embeds: [{
+                                title: "Claude Notify",
+                                description: message,
+                                color: colorMap[priority] ?? colorMap.normal,
+                                timestamp: new Date().toISOString(),
+                            }],
+                    }),
+                });
+                if (!r.ok)
+                    throw new Error(`Discord ${r.status}: ${await r.text()}`);
+            });
+        }
+    }
+    // Slack
+    if (!desktopOnlyMode) {
+        const sl = cfg.slack ?? {};
+        if (sl.enabled && sl.webhookUrl) {
+            await send("slack", async () => {
+                const emojiMap = { low: "ℹ️", normal: "🔔", high: "🚨" };
+                const emoji = emojiMap[priority] ?? emojiMap.normal;
+                const r = await fetch(sl.webhookUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        text: `${emoji} *Claude Notify*`,
+                        blocks: [
+                            { type: "section", text: { type: "mrkdwn", text: `${emoji} *Claude Notify*\n${message}` } },
+                            { type: "context", elements: [{ type: "mrkdwn", text: `Priority: ${priority}` }] },
+                        ],
+                    }),
+                });
+                if (!r.ok)
+                    throw new Error(`Slack ${r.status}: ${await r.text()}`);
+            });
+        }
+    }
+    // Teams
+    if (!desktopOnlyMode) {
+        const tm = cfg.teams ?? {};
+        if (tm.enabled && tm.webhookUrl) {
+            await send("teams", async () => {
+                const colorMap = { low: "Default", normal: "Accent", high: "Attention" };
+                const r = await fetch(tm.webhookUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        type: "message",
+                        attachments: [{
+                                contentType: "application/vnd.microsoft.card.adaptive",
+                                contentUrl: null,
+                                content: {
+                                    $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
+                                    type: "AdaptiveCard", version: "1.2",
+                                    body: [
+                                        { type: "TextBlock", size: "Medium", weight: "Bolder", text: "Claude Notify", color: colorMap[priority] ?? "Default" },
+                                        { type: "TextBlock", text: message, wrap: true },
+                                        { type: "TextBlock", text: `Priority: ${priority}`, isSubtle: true, size: "Small" },
+                                    ],
+                                },
+                            }],
+                    }),
+                });
+                if (!r.ok)
+                    throw new Error(`Teams ${r.status}: ${await r.text()}`);
+            });
+        }
+    }
     return [
         results.length ? `Sent via: ${results.join(", ")}` : null,
         errors.length ? `Errors: ${errors.join("; ")}` : null,
@@ -790,6 +988,28 @@ let lastUserMessageId;
 // goes quiet.
 let lastTelegramInboundAt = 0;
 const TELEGRAM_CONVO_TTL_MS = 5 * 60 * 1000;
+// Page visibility: the web UI reports when it becomes visible/hidden so the
+// server can skip external channels while the user is actively watching the UI.
+let uiVisibleAt = 0; // last time UI reported visible
+let uiHiddenAt = 0; // last time UI reported hidden (0 = never seen)
+const UI_VISIBLE_TTL_MS = 30_000; // if no heartbeat for 30s, treat as unknown
+app.post("/api/ui/visibility", (req, res) => {
+    const { visible } = req.body ?? {};
+    if (visible) {
+        uiVisibleAt = Date.now();
+    }
+    else {
+        uiHiddenAt = Date.now();
+    }
+    res.json({ ok: true });
+});
+function isUiActivelyOpen() {
+    if (uiVisibleAt === 0)
+        return false; // never reported
+    if (uiHiddenAt > uiVisibleAt)
+        return false; // last report was hidden
+    return Date.now() - uiVisibleAt < UI_VISIBLE_TTL_MS;
+}
 // Session tagging: a session may declare a tag (e.g. "alphawave") when it
 // connects to /mcp?tag=alphawave. Telegram messages starting with "@<tag>"
 // are routed only to sessions with that exact tag (tag prefix stripped).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omni-notify-mcp",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "An MCP server that lets AI agents (Claude, Cursor, etc.) reach you on any channel — desktop, Telegram, SMS, email — with two-way ask/reply, real-time inbox push, Do Not Disturb, idle gating, multi-session routing, and a one-page web UI for setup. Zero config code; configure once, agents call notify/ask.",
   "main": "dist/index.js",
   "type": "module",

package/ui/public/app.js

@@ -3,6 +3,13 @@
 let config = {};
 const dirty = new Set();
 
+// ── Card collapse/expand ──────────────────────────────────────────────────
+
+function toggleCard(id) {
+  const card = document.getElementById('card-' + id);
+  if (card) card.classList.toggle('expanded');
+}
+
 // ── Bootstrap ─────────────────────────────────────────────────────────────
 
 async function init() {
@@ -71,6 +78,29 @@ function populateForm() {
   $("sms-from").value = sms.from ?? "";
   $("sms-to").value = sms.to ?? "";
 
+  // ntfy
+  const ntfy = config.ntfy ?? {};
+  $("ntfy-enabled").checked = !!ntfy.enabled;
+  $("ntfy-topic").value = ntfy.topic ?? "";
+  $("ntfy-server").value = ntfy.serverUrl ?? "https://ntfy.sh";
+  $("ntfy-token").value = ntfy.token ?? "";
+
+  // Discord
+  const dc = config.discord ?? {};
+  $("discord-enabled").checked = !!dc.enabled;
+  $("discord-webhook").value = dc.webhookUrl ?? "";
+  $("discord-username").value = dc.username ?? "";
+
+  // Slack
+  const sl = config.slack ?? {};
+  $("slack-enabled").checked = !!sl.enabled;
+  $("slack-webhook").value = sl.webhookUrl ?? "";
+
+  // Teams
+  const tm = config.teams ?? {};
+  $("teams-enabled").checked = !!tm.enabled;
+  $("teams-webhook").value = tm.webhookUrl ?? "";
+
   // DND
   const dnd = config.dnd ?? {};
   $("dnd-enabled").checked = !!dnd.enabled;
@@ -128,6 +158,22 @@ function updateBadges() {
     sms.enabled && smsReady ? "ok" : smsReady ? "warn" : sms.accountSid ? "warn" : "idle",
     sms.enabled && smsReady ? "Configured" : smsReady ? "Disabled" : sms.accountSid ? "Incomplete" : "Not configured");
 
+  const ntfyC = config.ntfy ?? {};
+  setBadge("ntfy", ntfyC.enabled && ntfyC.topic ? "ok" : ntfyC.topic ? "warn" : "idle",
+    ntfyC.enabled && ntfyC.topic ? "Configured" : ntfyC.topic ? "Disabled" : "Not configured");
+
+  const dcC = config.discord ?? {};
+  setBadge("discord", dcC.enabled && dcC.webhookUrl ? "ok" : dcC.webhookUrl ? "warn" : "idle",
+    dcC.enabled && dcC.webhookUrl ? "Configured" : dcC.webhookUrl ? "Disabled" : "Not configured");
+
+  const slC = config.slack ?? {};
+  setBadge("slack", slC.enabled && slC.webhookUrl ? "ok" : slC.webhookUrl ? "warn" : "idle",
+    slC.enabled && slC.webhookUrl ? "Configured" : slC.webhookUrl ? "Disabled" : "Not configured");
+
+  const tmC = config.teams ?? {};
+  setBadge("teams", tmC.enabled && tmC.webhookUrl ? "ok" : tmC.webhookUrl ? "warn" : "idle",
+    tmC.enabled && tmC.webhookUrl ? "Configured" : tmC.webhookUrl ? "Disabled" : "Not configured");
+
   // DND badge: "Active" (red), "Scheduled" (warn), or "Off" (idle)
   const dnd = config.dnd ?? {};
   const sched = dnd.schedule ?? {};
@@ -219,6 +265,18 @@ async function toggleEmailEnabled() {
 async function toggleSmsEnabled() {
   await patch({ sms: { enabled: $("sms-enabled").checked } });
 }
+async function toggleNtfyEnabled() {
+  await patch({ ntfy: { enabled: $("ntfy-enabled").checked } });
+}
+async function toggleDiscordEnabled() {
+  await patch({ discord: { enabled: $("discord-enabled").checked } });
+}
+async function toggleSlackEnabled() {
+  await patch({ slack: { enabled: $("slack-enabled").checked } });
+}
+async function toggleTeamsEnabled() {
+  await patch({ teams: { enabled: $("teams-enabled").checked } });
+}
 
 async function saveTelegram() {
   await patch({
@@ -290,6 +348,23 @@ async function saveSms() {
   clearDirty("sms");
 }
 
+async function saveNtfy() {
+  await patch({ ntfy: { enabled: $("ntfy-enabled").checked, topic: $("ntfy-topic").value.trim(), serverUrl: $("ntfy-server").value.trim() || "https://ntfy.sh", token: $("ntfy-token").value.trim() } });
+  clearDirty("ntfy");
+}
+async function saveDiscord() {
+  await patch({ discord: { enabled: $("discord-enabled").checked, webhookUrl: $("discord-webhook").value.trim(), username: $("discord-username").value.trim() || "Claude Notify" } });
+  clearDirty("discord");
+}
+async function saveSlack() {
+  await patch({ slack: { enabled: $("slack-enabled").checked, webhookUrl: $("slack-webhook").value.trim() } });
+  clearDirty("slack");
+}
+async function saveTeams() {
+  await patch({ teams: { enabled: $("teams-enabled").checked, webhookUrl: $("teams-webhook").value.trim() } });
+  clearDirty("teams");
+}
+
 async function patch(update) {
   try {
     const res = await fetch("/api/config", {
@@ -535,6 +610,38 @@ function toast(msg, type = "ok") {
 
 function $(id) { return document.getElementById(id); }
 
+// ── Page visibility reporting ─────────────────────────────────────────────
+// Tell the server when this tab is focused so it can skip external channels
+// while the user is actively watching the UI.
+
+function reportVisibility(visible) {
+  fetch("/api/ui/visibility", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ visible }),
+  }).catch(() => {});
+}
+
+let visibilityHeartbeat;
+function startVisibilityHeartbeat() {
+  clearInterval(visibilityHeartbeat);
+  visibilityHeartbeat = setInterval(() => {
+    if (!document.hidden) reportVisibility(true);
+  }, 15000);
+}
+
+document.addEventListener("visibilitychange", () => {
+  reportVisibility(!document.hidden);
+  if (!document.hidden) startVisibilityHeartbeat();
+  else clearInterval(visibilityHeartbeat);
+});
+window.addEventListener("focus", () => { reportVisibility(true); startVisibilityHeartbeat(); });
+window.addEventListener("blur",  () => reportVisibility(false));
+
+// Report on load and start heartbeat
+reportVisibility(!document.hidden);
+if (!document.hidden) startVisibilityHeartbeat();
+
 function copyText(el) {
   const text = el.textContent.replace(" 📋", "").trim();
   navigator.clipboard.writeText(text).then(() => {

package/ui/public/index.html

@@ -29,7 +29,7 @@
 
       <!-- ── Desktop ───────────────────────────────────────────────── -->
       <div class="card" id="card-desktop">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('desktop')">
           <div class="ch-meta">
             <div class="channel-icon desktop-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
@@ -37,6 +37,7 @@
             <span class="ch-name">Desktop</span>
           </div>
           <span class="badge badge-idle" id="badge-desktop">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -73,7 +74,7 @@
 
       <!-- ── Email ─────────────────────────────────────────────────── -->
       <div class="card" id="card-email">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('email')">
           <div class="ch-meta">
             <div class="channel-icon gmail-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
@@ -81,6 +82,7 @@
             <span class="ch-name">Email</span><span class="tag">Gmail</span>
           </div>
           <span class="badge badge-idle" id="badge-email">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <!-- Connected -->
@@ -122,7 +124,7 @@
 
       <!-- ── Telegram ──────────────────────────────────────────────── -->
       <div class="card" id="card-telegram">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('telegram')">
           <div class="ch-meta">
             <div class="channel-icon telegram-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
@@ -130,6 +132,7 @@
             <span class="ch-name">Telegram</span><span class="tag">Bot API</span>
           </div>
           <span class="badge badge-idle" id="badge-telegram">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -163,7 +166,7 @@
 
       <!-- ── SMS ───────────────────────────────────────────────────── -->
       <div class="card" id="card-sms">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('sms')">
           <div class="ch-meta">
             <div class="channel-icon sms-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
@@ -171,6 +174,7 @@
             <span class="ch-name">SMS</span><span class="tag">Twilio</span>
           </div>
           <span class="badge badge-idle" id="badge-sms">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -199,6 +203,143 @@
         </div>
       </div>
 
+      <!-- ── ntfy ─────────────────────────────────────────────────── -->
+      <div class="card" id="card-ntfy">
+        <div class="card-hd" onclick="toggleCard('ntfy')">
+          <div class="ch-meta">
+            <div class="channel-icon ntfy-icon">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+            </div>
+            <span class="ch-name">ntfy</span><span class="tag">Push</span>
+          </div>
+          <span class="badge badge-idle" id="badge-ntfy">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+        </div>
+        <div class="card-body">
+          <div class="actions">
+            <label class="toggle-wrap">
+              <input type="checkbox" id="ntfy-enabled" onchange="toggleNtfyEnabled()">
+              <span class="toggle"></span>
+            </label>
+            <span class="toggle-lbl">Enable</span>
+            <button class="btn btn-sm btn-primary" id="save-ntfy-btn" onclick="saveNtfy()">Save</button>
+            <button class="btn btn-sm btn-ghost" onclick="testChannel('ntfy')">Test</button>
+          </div>
+          <details class="guide">
+            <summary>Set up ntfy (1 min, free, no account needed)</summary>
+            <ol>
+              <li>Install the <a href="https://ntfy.sh" target="_blank">ntfy app</a> on your phone</li>
+              <li>Pick any topic name (e.g. <code>my-claude-alerts-abc123</code>) — keep it secret, it's your auth</li>
+              <li>Subscribe to that topic in the app</li>
+              <li>Paste the topic below and save</li>
+            </ol>
+          </details>
+          <div class="fg"><label>Topic</label><input type="text" id="ntfy-topic" placeholder="my-claude-alerts-abc123" oninput="markDirty('ntfy')"></div>
+          <div class="fg"><label>Server URL</label><input type="text" id="ntfy-server" placeholder="https://ntfy.sh" oninput="markDirty('ntfy')"><span class="hint">Leave default for ntfy.sh, or your self-hosted URL</span></div>
+          <div class="fg"><label>Token (optional)</label><input type="password" id="ntfy-token" placeholder="tk_…" oninput="markDirty('ntfy')"><span class="hint">Only needed for private self-hosted servers</span></div>
+        </div>
+      </div>
+
+      <!-- ── Discord ───────────────────────────────────────────────── -->
+      <div class="card" id="card-discord">
+        <div class="card-hd" onclick="toggleCard('discord')">
+          <div class="ch-meta">
+            <div class="channel-icon discord-icon">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><path d="M7.5 7.5c1-.5 2.5-.5 4.5-.5s3.5 0 4.5.5M7.5 16.5c1 .5 2.5.5 4.5.5s3.5 0 4.5-.5"/><path d="M3 3l4.5 1.5M21 3l-4.5 1.5M3 21l4.5-1.5M21 21l-4.5-1.5"/><path d="M3 3c0 9 0 12 9 15 9-3 9-6 9-15"/></svg>
+            </div>
+            <span class="ch-name">Discord</span><span class="tag">Webhook</span>
+          </div>
+          <span class="badge badge-idle" id="badge-discord">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+        </div>
+        <div class="card-body">
+          <div class="actions">
+            <label class="toggle-wrap">
+              <input type="checkbox" id="discord-enabled" onchange="toggleDiscordEnabled()">
+              <span class="toggle"></span>
+            </label>
+            <span class="toggle-lbl">Enable</span>
+            <button class="btn btn-sm btn-primary" id="save-discord-btn" onclick="saveDiscord()">Save</button>
+            <button class="btn btn-sm btn-ghost" onclick="testChannel('discord')">Test</button>
+          </div>
+          <details class="guide">
+            <summary>Create a Discord webhook (1 min)</summary>
+            <ol>
+              <li>Open your Discord server → pick a channel → Edit Channel</li>
+              <li>Integrations → Webhooks → New Webhook → Copy URL</li>
+            </ol>
+          </details>
+          <div class="fg"><label>Webhook URL</label><input type="password" id="discord-webhook" placeholder="https://discord.com/api/webhooks/…" oninput="markDirty('discord')"></div>
+          <div class="fg"><label>Bot name (optional)</label><input type="text" id="discord-username" placeholder="Claude Notify" oninput="markDirty('discord')"></div>
+        </div>
+      </div>
+
+      <!-- ── Slack ─────────────────────────────────────────────────── -->
+      <div class="card" id="card-slack">
+        <div class="card-hd" onclick="toggleCard('slack')">
+          <div class="ch-meta">
+            <div class="channel-icon slack-icon">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"/><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"/><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"/><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"/><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"/><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"/></svg>
+            </div>
+            <span class="ch-name">Slack</span><span class="tag">Webhook</span>
+          </div>
+          <span class="badge badge-idle" id="badge-slack">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+        </div>
+        <div class="card-body">
+          <div class="actions">
+            <label class="toggle-wrap">
+              <input type="checkbox" id="slack-enabled" onchange="toggleSlackEnabled()">
+              <span class="toggle"></span>
+            </label>
+            <span class="toggle-lbl">Enable</span>
+            <button class="btn btn-sm btn-primary" id="save-slack-btn" onclick="saveSlack()">Save</button>
+            <button class="btn btn-sm btn-ghost" onclick="testChannel('slack')">Test</button>
+          </div>
+          <details class="guide">
+            <summary>Create a Slack webhook (2 min)</summary>
+            <ol>
+              <li>Go to <a href="https://api.slack.com/apps" target="_blank">api.slack.com/apps</a> → Create New App → From scratch</li>
+              <li>Incoming Webhooks → On → Add New Webhook to Workspace → pick channel → Copy URL</li>
+            </ol>
+          </details>
+          <div class="fg"><label>Webhook URL</label><input type="password" id="slack-webhook" placeholder="https://hooks.slack.com/services/…" oninput="markDirty('slack')"></div>
+        </div>
+      </div>
+
+      <!-- ── Teams ─────────────────────────────────────────────────── -->
+      <div class="card" id="card-teams">
+        <div class="card-hd" onclick="toggleCard('teams')">
+          <div class="ch-meta">
+            <div class="channel-icon teams-icon">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+            </div>
+            <span class="ch-name">Teams</span><span class="tag">Webhook</span>
+          </div>
+          <span class="badge badge-idle" id="badge-teams">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
+        </div>
+        <div class="card-body">
+          <div class="actions">
+            <label class="toggle-wrap">
+              <input type="checkbox" id="teams-enabled" onchange="toggleTeamsEnabled()">
+              <span class="toggle"></span>
+            </label>
+            <span class="toggle-lbl">Enable</span>
+            <button class="btn btn-sm btn-primary" id="save-teams-btn" onclick="saveTeams()">Save</button>
+            <button class="btn btn-sm btn-ghost" onclick="testChannel('teams')">Test</button>
+          </div>
+          <details class="guide">
+            <summary>Create a Teams webhook (2 min)</summary>
+            <ol>
+              <li>In Teams, go to the channel → ••• → Workflows → "Post to a channel when a webhook request is received"</li>
+              <li>Follow the wizard → copy the webhook URL at the end</li>
+            </ol>
+          </details>
+          <div class="fg"><label>Webhook URL</label><input type="password" id="teams-webhook" placeholder="https://…webhook.office.com/…" oninput="markDirty('teams')"></div>
+        </div>
+      </div>
+
       </div>
     </section>
 
@@ -211,7 +352,7 @@
 
       <!-- ── Do Not Disturb ────────────────────────────────────────── -->
       <div class="card" id="card-dnd">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('dnd')">
           <div class="ch-meta">
             <div class="channel-icon" style="background:#3b2f12;color:#f59e0b">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg>
@@ -219,6 +360,7 @@
             <span class="ch-name">Do Not Disturb</span>
           </div>
           <span class="badge badge-idle" id="badge-dnd">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -258,7 +400,7 @@
 
       <!-- ── Idle gating ───────────────────────────────────────────── -->
       <div class="card" id="card-idle">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('idle')">
           <div class="ch-meta">
             <div class="channel-icon" style="background:#12293b;color:#3b82f6">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
@@ -266,6 +408,7 @@
             <span class="ch-name">Idle gating</span>
           </div>
           <span class="badge badge-idle" id="badge-idle">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">

package/ui/public/style.css

@@ -264,10 +264,14 @@ main {
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  border-bottom: 2px solid #4a4a5a;
   gap: 8px;
   flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: background .1s;
 }
+.card-hd:hover { background: rgba(255,255,255,0.03); }
+.card.expanded .card-hd { border-bottom: 2px solid #4a4a5a; }
 .ch-meta {
   display: flex;
   align-items: center;
@@ -275,13 +279,23 @@ main {
 }
 .ch-name { font-size: 14px; font-weight: 600; }
 
+.card-chevron {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-3);
+  transition: transform .2s;
+}
+.card.expanded .card-chevron { transform: rotate(180deg); }
+
 .card-body {
   padding: 12px 14px;
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: 10px;
   flex: 1;
 }
+.card.expanded .card-body { display: flex; }
 
 /* ── Channel icons ───────────────────────────────────────────────────────── */
 
@@ -296,6 +310,10 @@ main {
 .telegram-icon { background: #0d1e2e; color: #38bdf8; }
 .whatsapp-icon { background: #0d2e1a; color: #4ade80; }
 .sms-icon      { background: #1e0d2e; color: #c084fc; }
+.ntfy-icon     { background: #1a2e0d; color: #86efac; }
+.discord-icon  { background: #0d0d2e; color: #a5b4fc; }
+.slack-icon    { background: #2e2a0d; color: #fbbf24; }
+.teams-icon    { background: #0d1e2e; color: #7dd3fc; }
 
 /* ── Tags & badges ───────────────────────────────────────────────────────── */