@delt/claude-alarm 0.4.1 → 0.4.2

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 +86 -31
  2. package/package.json +1 -1
  3. package/src/dashboard/index.html +86 -31
package/dist/dashboard/index.html CHANGED
@@ -92,17 +92,56 @@
92
92
  overflow-y: auto;
93
93
  padding: 12px;
94
94
  }
95
- .sessions-panel h2 {
96
- font-size: 13px;
97
- text-transform: uppercase;
98
- letter-spacing: 0.5px;
99
- color: var(--text-dim);
95
+ .sessions-header {
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
100
99
  padding: 8px 8px 12px;
101
100
  position: sticky;
102
101
  top: 0;
103
102
  background: var(--bg);
104
103
  z-index: 1;
105
104
  }
105
+ .sessions-header h2 {
106
+ font-size: 13px;
107
+ text-transform: uppercase;
108
+ letter-spacing: 0.5px;
109
+ color: var(--text-dim);
110
+ }
111
+ .add-session-btn {
112
+ background: none;
113
+ border: 1px solid var(--border);
114
+ border-radius: 6px;
115
+ color: var(--text-dim);
116
+ cursor: pointer;
117
+ font-size: 16px;
118
+ width: 28px;
119
+ height: 28px;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ transition: border-color 0.15s, color 0.15s;
124
+ }
125
+ .add-session-btn:hover { border-color: var(--accent); color: var(--accent); }
126
+ .cmd-popup {
127
+ position: absolute;
128
+ top: 44px;
129
+ left: 12px;
130
+ right: 12px;
131
+ background: var(--surface);
132
+ border: 1px solid var(--border);
133
+ border-radius: 8px;
134
+ padding: 12px;
135
+ z-index: 10;
136
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
137
+ display: none;
138
+ }
139
+ .cmd-popup.active { display: block; }
140
+ .cmd-popup-title {
141
+ font-size: 12px;
142
+ color: var(--text-dim);
143
+ margin-bottom: 8px;
144
+ }
106
145
  .session-card {
107
146
  background: var(--surface);
108
147
  border: 1px solid var(--border);
@@ -582,8 +621,23 @@
582
621
  <button data-tab="notifications">Notifications</button>
583
622
  </div>
584
623
  <div class="container">
585
- <div class="sessions-panel">
586
- <h2>Sessions</h2>
624
+ <div class="sessions-panel" style="position:relative">
625
+ <div class="sessions-header">
626
+ <h2>Sessions</h2>
627
+ <button class="add-session-btn" id="addSessionBtn" title="Add session">+</button>
628
+ </div>
629
+ <div class="cmd-popup" id="cmdPopup">
630
+ <div class="cmd-popup-title">Run in terminal to connect:</div>
631
+ <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
632
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
633
+ <span class="cmd-icon">&#128203;</span>
634
+ </div>
635
+ <div style="margin-top:6px;font-size:11px;color:var(--text-dim)">with auto-approve:</div>
636
+ <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
637
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
638
+ <span class="cmd-icon">&#128203;</span>
639
+ </div>
640
+ </div>
587
641
  <div id="sessionsList"></div>
588
642
  </div>
589
643
 
@@ -745,30 +799,7 @@
745
799
  const el = $('#sessionsList');
746
800
  const ids = Object.keys(state.sessions);
747
801
  if (!ids.length) {
748
- el.innerHTML = `<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel:
749
- <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
750
- <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
751
- <span class="cmd-icon">&#128203;</span>
752
- </div>
753
- <div style="margin-top:8px;font-size:11px;color:var(--text-dim)">or with auto-approve:</div>
754
- <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
755
- <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
756
- <span class="cmd-icon">&#128203;</span>
757
- </div>
758
- </div>`;
759
- el.querySelectorAll('.cmd-copy').forEach(btn => {
760
- btn.addEventListener('click', () => {
761
- const text = btn.querySelector('.cmd-text').textContent;
762
- navigator.clipboard.writeText(text).then(() => {
763
- btn.classList.add('copied');
764
- btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
765
- setTimeout(() => {
766
- btn.classList.remove('copied');
767
- btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
768
- }, 2000);
769
- });
770
- });
771
- });
802
+ el.innerHTML = '<div class="no-sessions">No active sessions.<br>Click + to see connection commands.</div>';
772
803
  return;
773
804
  }
774
805
  el.innerHTML = ids.map(id => {
@@ -1055,6 +1086,30 @@
1055
1086
  msgList.scrollTo({ top: msgList.scrollHeight, behavior: 'smooth' });
1056
1087
  });
1057
1088
 
1089
+ // --- Add session popup ---
1090
+ $('#addSessionBtn').addEventListener('click', (e) => {
1091
+ e.stopPropagation();
1092
+ $('#cmdPopup').classList.toggle('active');
1093
+ });
1094
+ document.addEventListener('click', (e) => {
1095
+ if (!e.target.closest('#cmdPopup') && !e.target.closest('#addSessionBtn')) {
1096
+ $('#cmdPopup').classList.remove('active');
1097
+ }
1098
+ });
1099
+ document.querySelectorAll('#cmdPopup .cmd-copy').forEach(btn => {
1100
+ btn.addEventListener('click', () => {
1101
+ const text = btn.querySelector('.cmd-text').textContent;
1102
+ navigator.clipboard.writeText(text).then(() => {
1103
+ btn.classList.add('copied');
1104
+ btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
1105
+ setTimeout(() => {
1106
+ btn.classList.remove('copied');
1107
+ btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
1108
+ }, 2000);
1109
+ });
1110
+ });
1111
+ });
1112
+
1058
1113
  // --- Webhook settings ---
1059
1114
  let webhookData = [];
1060
1115
  $('#webhookToggle').addEventListener('click', async () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@delt/claude-alarm",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
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
@@ -92,17 +92,56 @@
92
92
  overflow-y: auto;
93
93
  padding: 12px;
94
94
  }
95
- .sessions-panel h2 {
96
- font-size: 13px;
97
- text-transform: uppercase;
98
- letter-spacing: 0.5px;
99
- color: var(--text-dim);
95
+ .sessions-header {
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: space-between;
100
99
  padding: 8px 8px 12px;
101
100
  position: sticky;
102
101
  top: 0;
103
102
  background: var(--bg);
104
103
  z-index: 1;
105
104
  }
105
+ .sessions-header h2 {
106
+ font-size: 13px;
107
+ text-transform: uppercase;
108
+ letter-spacing: 0.5px;
109
+ color: var(--text-dim);
110
+ }
111
+ .add-session-btn {
112
+ background: none;
113
+ border: 1px solid var(--border);
114
+ border-radius: 6px;
115
+ color: var(--text-dim);
116
+ cursor: pointer;
117
+ font-size: 16px;
118
+ width: 28px;
119
+ height: 28px;
120
+ display: flex;
121
+ align-items: center;
122
+ justify-content: center;
123
+ transition: border-color 0.15s, color 0.15s;
124
+ }
125
+ .add-session-btn:hover { border-color: var(--accent); color: var(--accent); }
126
+ .cmd-popup {
127
+ position: absolute;
128
+ top: 44px;
129
+ left: 12px;
130
+ right: 12px;
131
+ background: var(--surface);
132
+ border: 1px solid var(--border);
133
+ border-radius: 8px;
134
+ padding: 12px;
135
+ z-index: 10;
136
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
137
+ display: none;
138
+ }
139
+ .cmd-popup.active { display: block; }
140
+ .cmd-popup-title {
141
+ font-size: 12px;
142
+ color: var(--text-dim);
143
+ margin-bottom: 8px;
144
+ }
106
145
  .session-card {
107
146
  background: var(--surface);
108
147
  border: 1px solid var(--border);
@@ -582,8 +621,23 @@
582
621
  <button data-tab="notifications">Notifications</button>
583
622
  </div>
584
623
  <div class="container">
585
- <div class="sessions-panel">
586
- <h2>Sessions</h2>
624
+ <div class="sessions-panel" style="position:relative">
625
+ <div class="sessions-header">
626
+ <h2>Sessions</h2>
627
+ <button class="add-session-btn" id="addSessionBtn" title="Add session">+</button>
628
+ </div>
629
+ <div class="cmd-popup" id="cmdPopup">
630
+ <div class="cmd-popup-title">Run in terminal to connect:</div>
631
+ <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
632
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
633
+ <span class="cmd-icon">&#128203;</span>
634
+ </div>
635
+ <div style="margin-top:6px;font-size:11px;color:var(--text-dim)">with auto-approve:</div>
636
+ <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
637
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
638
+ <span class="cmd-icon">&#128203;</span>
639
+ </div>
640
+ </div>
587
641
  <div id="sessionsList"></div>
588
642
  </div>
589
643
 
@@ -745,30 +799,7 @@
745
799
  const el = $('#sessionsList');
746
800
  const ids = Object.keys(state.sessions);
747
801
  if (!ids.length) {
748
- el.innerHTML = `<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel:
749
- <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
750
- <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
751
- <span class="cmd-icon">&#128203;</span>
752
- </div>
753
- <div style="margin-top:8px;font-size:11px;color:var(--text-dim)">or with auto-approve:</div>
754
- <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
755
- <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
756
- <span class="cmd-icon">&#128203;</span>
757
- </div>
758
- </div>`;
759
- el.querySelectorAll('.cmd-copy').forEach(btn => {
760
- btn.addEventListener('click', () => {
761
- const text = btn.querySelector('.cmd-text').textContent;
762
- navigator.clipboard.writeText(text).then(() => {
763
- btn.classList.add('copied');
764
- btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
765
- setTimeout(() => {
766
- btn.classList.remove('copied');
767
- btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
768
- }, 2000);
769
- });
770
- });
771
- });
802
+ el.innerHTML = '<div class="no-sessions">No active sessions.<br>Click + to see connection commands.</div>';
772
803
  return;
773
804
  }
774
805
  el.innerHTML = ids.map(id => {
@@ -1055,6 +1086,30 @@
1055
1086
  msgList.scrollTo({ top: msgList.scrollHeight, behavior: 'smooth' });
1056
1087
  });
1057
1088
 
1089
+ // --- Add session popup ---
1090
+ $('#addSessionBtn').addEventListener('click', (e) => {
1091
+ e.stopPropagation();
1092
+ $('#cmdPopup').classList.toggle('active');
1093
+ });
1094
+ document.addEventListener('click', (e) => {
1095
+ if (!e.target.closest('#cmdPopup') && !e.target.closest('#addSessionBtn')) {
1096
+ $('#cmdPopup').classList.remove('active');
1097
+ }
1098
+ });
1099
+ document.querySelectorAll('#cmdPopup .cmd-copy').forEach(btn => {
1100
+ btn.addEventListener('click', () => {
1101
+ const text = btn.querySelector('.cmd-text').textContent;
1102
+ navigator.clipboard.writeText(text).then(() => {
1103
+ btn.classList.add('copied');
1104
+ btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
1105
+ setTimeout(() => {
1106
+ btn.classList.remove('copied');
1107
+ btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
1108
+ }, 2000);
1109
+ });
1110
+ });
1111
+ });
1112
+
1058
1113
  // --- Webhook settings ---
1059
1114
  let webhookData = [];
1060
1115
  $('#webhookToggle').addEventListener('click', async () => {