@delt/claude-alarm 0.3.4 → 0.3.5

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 +44 -1
  2. package/package.json +1 -1
  3. package/src/dashboard/index.html +44 -1
package/dist/dashboard/index.html CHANGED
@@ -142,6 +142,26 @@
142
142
  text-align: center;
143
143
  padding: 40px 20px;
144
144
  }
145
+ .cmd-copy {
146
+ display: flex;
147
+ align-items: center;
148
+ background: var(--bg);
149
+ border: 1px solid var(--border);
150
+ border-radius: 6px;
151
+ padding: 6px 10px;
152
+ margin-top: 12px;
153
+ font-size: 11px;
154
+ font-family: monospace;
155
+ cursor: pointer;
156
+ transition: border-color 0.15s;
157
+ text-align: left;
158
+ gap: 6px;
159
+ }
160
+ .cmd-copy:hover { border-color: var(--accent); }
161
+ .cmd-copy .cmd-text { flex: 1; color: var(--text); word-break: break-all; }
162
+ .cmd-copy .cmd-icon { color: var(--text-dim); font-size: 14px; flex-shrink: 0; }
163
+ .cmd-copy.copied { border-color: var(--green); }
164
+ .cmd-copy.copied .cmd-icon { color: var(--green); }
145
165
 
146
166
  /* Messages panel */
147
167
  .messages-panel {
@@ -580,7 +600,30 @@
580
600
  const el = $('#sessionsList');
581
601
  const ids = Object.keys(state.sessions);
582
602
  if (!ids.length) {
583
- el.innerHTML = '<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel to see sessions here.</div>';
603
+ el.innerHTML = `<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel:
604
+ <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
605
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
606
+ <span class="cmd-icon">&#128203;</span>
607
+ </div>
608
+ <div style="margin-top:8px;font-size:11px;color:var(--text-dim)">or with auto-approve:</div>
609
+ <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
610
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
611
+ <span class="cmd-icon">&#128203;</span>
612
+ </div>
613
+ </div>`;
614
+ el.querySelectorAll('.cmd-copy').forEach(btn => {
615
+ btn.addEventListener('click', () => {
616
+ const text = btn.querySelector('.cmd-text').textContent;
617
+ navigator.clipboard.writeText(text).then(() => {
618
+ btn.classList.add('copied');
619
+ btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
620
+ setTimeout(() => {
621
+ btn.classList.remove('copied');
622
+ btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
623
+ }, 2000);
624
+ });
625
+ });
626
+ });
584
627
  return;
585
628
  }
586
629
  el.innerHTML = ids.map(id => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@delt/claude-alarm",
3
- "version": "0.3.4",
3
+ "version": "0.3.5",
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
@@ -142,6 +142,26 @@
142
142
  text-align: center;
143
143
  padding: 40px 20px;
144
144
  }
145
+ .cmd-copy {
146
+ display: flex;
147
+ align-items: center;
148
+ background: var(--bg);
149
+ border: 1px solid var(--border);
150
+ border-radius: 6px;
151
+ padding: 6px 10px;
152
+ margin-top: 12px;
153
+ font-size: 11px;
154
+ font-family: monospace;
155
+ cursor: pointer;
156
+ transition: border-color 0.15s;
157
+ text-align: left;
158
+ gap: 6px;
159
+ }
160
+ .cmd-copy:hover { border-color: var(--accent); }
161
+ .cmd-copy .cmd-text { flex: 1; color: var(--text); word-break: break-all; }
162
+ .cmd-copy .cmd-icon { color: var(--text-dim); font-size: 14px; flex-shrink: 0; }
163
+ .cmd-copy.copied { border-color: var(--green); }
164
+ .cmd-copy.copied .cmd-icon { color: var(--green); }
145
165
 
146
166
  /* Messages panel */
147
167
  .messages-panel {
@@ -580,7 +600,30 @@
580
600
  const el = $('#sessionsList');
581
601
  const ids = Object.keys(state.sessions);
582
602
  if (!ids.length) {
583
- el.innerHTML = '<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel to see sessions here.</div>';
603
+ el.innerHTML = `<div class="no-sessions">No active sessions.<br>Start Claude Code with the channel:
604
+ <div class="cmd-copy" id="cmdCopy1" title="Click to copy">
605
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm</span>
606
+ <span class="cmd-icon">&#128203;</span>
607
+ </div>
608
+ <div style="margin-top:8px;font-size:11px;color:var(--text-dim)">or with auto-approve:</div>
609
+ <div class="cmd-copy" id="cmdCopy2" title="Click to copy">
610
+ <span class="cmd-text">claude --dangerously-load-development-channels server:claude-alarm --dangerously-skip-permissions</span>
611
+ <span class="cmd-icon">&#128203;</span>
612
+ </div>
613
+ </div>`;
614
+ el.querySelectorAll('.cmd-copy').forEach(btn => {
615
+ btn.addEventListener('click', () => {
616
+ const text = btn.querySelector('.cmd-text').textContent;
617
+ navigator.clipboard.writeText(text).then(() => {
618
+ btn.classList.add('copied');
619
+ btn.querySelector('.cmd-icon').innerHTML = '&#10003;';
620
+ setTimeout(() => {
621
+ btn.classList.remove('copied');
622
+ btn.querySelector('.cmd-icon').innerHTML = '&#128203;';
623
+ }, 2000);
624
+ });
625
+ });
626
+ });
584
627
  return;
585
628
  }
586
629
  el.innerHTML = ids.map(id => {