@delt/claude-alarm 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/dashboard/index.html +24 -10
  2. package/package.json +1 -1
  3. package/src/dashboard/index.html +24 -10
package/dist/dashboard/index.html CHANGED
@@ -565,13 +565,13 @@
565
565
 
566
566
  <div class="token-overlay hidden" id="webhookOverlay">
567
567
  <div class="token-form" style="max-width:500px;text-align:left">
568
- <h2 style="text-align:center">Webhook Settings</h2>
569
- <p style="text-align:center">Add webhook URLs to receive notifications externally.</p>
570
- <div id="webhookList"></div>
571
- <button id="webhookAdd" style="width:100%;margin-top:8px;background:var(--surface);color:var(--text);border:1px dashed var(--border);border-radius:6px;padding:8px;cursor:pointer;font-size:13px">+ Add Webhook</button>
572
- <div style="display:flex;gap:8px;margin-top:16px">
573
- <button id="webhookSave" style="flex:1">Save</button>
574
- <button id="webhookCancel" style="flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border)">Cancel</button>
568
+ <h2 style="text-align:center;margin-bottom:4px">Webhook Settings</h2>
569
+ <p style="text-align:center;margin-bottom:16px">Send notifications to Slack, Discord, or any webhook endpoint.</p>
570
+ <div id="webhookList" style="max-height:240px;overflow-y:auto"></div>
571
+ <button id="webhookAdd" style="width:100%;margin-top:10px;background:none;color:var(--text-dim);border:1px dashed var(--border);border-radius:6px;padding:10px;cursor:pointer;font-size:13px;transition:border-color 0.15s">+ Add Webhook</button>
572
+ <div style="display:flex;gap:8px;margin-top:20px">
573
+ <button id="webhookSave" style="flex:1;padding:10px">Save</button>
574
+ <button id="webhookCancel" style="flex:1;padding:10px;background:none;color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500">Cancel</button>
575
575
  </div>
576
576
  </div>
577
577
  </div>
@@ -1086,12 +1086,26 @@
1086
1086
  });
1087
1087
  function renderWebhooks() {
1088
1088
  const el = $('#webhookList');
1089
- el.innerHTML = webhookData.map((w, i) => `<div style="display:flex;gap:6px;margin-bottom:6px">
1090
- <input type="text" value="${esc(w.url)}" placeholder="https://hooks.slack.com/..." style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;color:var(--text);font-size:13px;outline:none" data-idx="${i}">
1091
- <button onclick="this.parentElement.remove()" style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--red);cursor:pointer;padding:4px 8px">&times;</button>
1089
+ if (!webhookData.length) {
1090
+ el.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:16px;font-size:13px">No webhooks configured</div>';
1091
+ return;
1092
+ }
1093
+ el.innerHTML = webhookData.map((w, i) => `<div style="display:flex;gap:8px;margin-bottom:8px;align-items:center">
1094
+ <input type="text" value="${esc(w.url)}" placeholder="https://hooks.slack.com/services/..." style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:13px;outline:none;font-family:monospace" data-idx="${i}">
1095
+ <button style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;padding:6px 10px;font-size:14px;transition:color 0.15s" data-rm="${i}">&times;</button>
1092
1096
  </div>`).join('');
1093
1097
  el.querySelectorAll('input').forEach(inp => {
1094
1098
  inp.addEventListener('input', () => { webhookData[parseInt(inp.dataset.idx)].url = inp.value; });
1099
+ inp.addEventListener('focus', () => { inp.style.borderColor = 'var(--accent)'; });
1100
+ inp.addEventListener('blur', () => { inp.style.borderColor = 'var(--border)'; });
1101
+ });
1102
+ el.querySelectorAll('[data-rm]').forEach(btn => {
1103
+ btn.addEventListener('click', () => {
1104
+ webhookData.splice(parseInt(btn.dataset.rm), 1);
1105
+ renderWebhooks();
1106
+ });
1107
+ btn.addEventListener('mouseenter', () => { btn.style.color = 'var(--red)'; });
1108
+ btn.addEventListener('mouseleave', () => { btn.style.color = 'var(--text-dim)'; });
1095
1109
  });
1096
1110
  }
1097
1111
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@delt/claude-alarm",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Monitor and get notifications from multiple Claude Code sessions via MCP Channels",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/dashboard/index.html CHANGED
@@ -565,13 +565,13 @@
565
565
 
566
566
  <div class="token-overlay hidden" id="webhookOverlay">
567
567
  <div class="token-form" style="max-width:500px;text-align:left">
568
- <h2 style="text-align:center">Webhook Settings</h2>
569
- <p style="text-align:center">Add webhook URLs to receive notifications externally.</p>
570
- <div id="webhookList"></div>
571
- <button id="webhookAdd" style="width:100%;margin-top:8px;background:var(--surface);color:var(--text);border:1px dashed var(--border);border-radius:6px;padding:8px;cursor:pointer;font-size:13px">+ Add Webhook</button>
572
- <div style="display:flex;gap:8px;margin-top:16px">
573
- <button id="webhookSave" style="flex:1">Save</button>
574
- <button id="webhookCancel" style="flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border)">Cancel</button>
568
+ <h2 style="text-align:center;margin-bottom:4px">Webhook Settings</h2>
569
+ <p style="text-align:center;margin-bottom:16px">Send notifications to Slack, Discord, or any webhook endpoint.</p>
570
+ <div id="webhookList" style="max-height:240px;overflow-y:auto"></div>
571
+ <button id="webhookAdd" style="width:100%;margin-top:10px;background:none;color:var(--text-dim);border:1px dashed var(--border);border-radius:6px;padding:10px;cursor:pointer;font-size:13px;transition:border-color 0.15s">+ Add Webhook</button>
572
+ <div style="display:flex;gap:8px;margin-top:20px">
573
+ <button id="webhookSave" style="flex:1;padding:10px">Save</button>
574
+ <button id="webhookCancel" style="flex:1;padding:10px;background:none;color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500">Cancel</button>
575
575
  </div>
576
576
  </div>
577
577
  </div>
@@ -1086,12 +1086,26 @@
1086
1086
  });
1087
1087
  function renderWebhooks() {
1088
1088
  const el = $('#webhookList');
1089
- el.innerHTML = webhookData.map((w, i) => `<div style="display:flex;gap:6px;margin-bottom:6px">
1090
- <input type="text" value="${esc(w.url)}" placeholder="https://hooks.slack.com/..." style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px;color:var(--text);font-size:13px;outline:none" data-idx="${i}">
1091
- <button onclick="this.parentElement.remove()" style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--red);cursor:pointer;padding:4px 8px">&times;</button>
1089
+ if (!webhookData.length) {
1090
+ el.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:16px;font-size:13px">No webhooks configured</div>';
1091
+ return;
1092
+ }
1093
+ el.innerHTML = webhookData.map((w, i) => `<div style="display:flex;gap:8px;margin-bottom:8px;align-items:center">
1094
+ <input type="text" value="${esc(w.url)}" placeholder="https://hooks.slack.com/services/..." style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:13px;outline:none;font-family:monospace" data-idx="${i}">
1095
+ <button style="background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-dim);cursor:pointer;padding:6px 10px;font-size:14px;transition:color 0.15s" data-rm="${i}">&times;</button>
1092
1096
  </div>`).join('');
1093
1097
  el.querySelectorAll('input').forEach(inp => {
1094
1098
  inp.addEventListener('input', () => { webhookData[parseInt(inp.dataset.idx)].url = inp.value; });
1099
+ inp.addEventListener('focus', () => { inp.style.borderColor = 'var(--accent)'; });
1100
+ inp.addEventListener('blur', () => { inp.style.borderColor = 'var(--border)'; });
1101
+ });
1102
+ el.querySelectorAll('[data-rm]').forEach(btn => {
1103
+ btn.addEventListener('click', () => {
1104
+ webhookData.splice(parseInt(btn.dataset.rm), 1);
1105
+ renderWebhooks();
1106
+ });
1107
+ btn.addEventListener('mouseenter', () => { btn.style.color = 'var(--red)'; });
1108
+ btn.addEventListener('mouseleave', () => { btn.style.color = 'var(--text-dim)'; });
1095
1109
  });
1096
1110
  }
1097
1111