@delt/claude-alarm 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delt/claude-alarm",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Monitor and get notifications from multiple Claude Code sessions via MCP Channels",
   "type": "module",
   "main": "./dist/index.js",

package/src/dashboard/index.html

@@ -589,8 +589,23 @@
     background: linear-gradient(180deg, rgba(245,158,11,0.08) 0%, transparent 100%);
     padding: 0;
     display: none;
+    flex-shrink: 0;
+    max-height: 45vh;
+    overflow-y: auto;
+    scrollbar-width: thin;
   }
   .permission-bar.active { display: block; }
+  .perm-count {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 6px 20px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--yellow);
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+  }
   .perm-item {
     display: flex;
     align-items: center;
@@ -731,6 +746,18 @@
     margin-left: 2px;
     font-weight: 400;
   }
+  .perm-actions.choices {
+    flex-direction: column;
+    gap: 6px;
+  }
+  .perm-actions .perm-choice {
+    padding: 7px 16px;
+    font-size: 13px;
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border);
+  }
+  .perm-actions .perm-choice:hover { border-color: var(--yellow); }
   /* Permission in notification panel */
   .notif-perm-actions {
     display: flex;
@@ -1405,6 +1432,9 @@
           timestamp: msg.timestamp,
           resolved: false,
           behavior: null,
+          choices: msg.choices || null,
+          sent: null,
+          outcome: null,
         });
         // Auto-select session if none selected
         if (!state.selectedSession && state.sessions[msg.sessionId]) selectSession(msg.sessionId);
@@ -1426,6 +1456,23 @@
           renderNotifications();
         }
         break;
+      case 'permission_pending':
+        for (const m of applyPendingChoices(state.permissionRequests, msg.requests || [])) {
+          handleMessage({ type: 'permission_request', ...m });
+        }
+        renderPermissionBar();
+        renderNotifications();
+        break;
+      case 'permission_resolved': {
+        const req = (state.permissionRequests[msg.sessionId] || []).find(r => r.requestId === msg.requestId);
+        if (req && !req.resolved) {
+          req.resolved = true;
+          req.outcome = msg.state;
+          renderPermissionBar();
+          renderNotifications();
+        }
+        break;
+      }
     }
   }
 
@@ -1664,7 +1711,10 @@
       if (n.permRequestId) {
         const reqs = state.permissionRequests[n.sessionId] || [];
         const req = reqs.find(r => r.requestId === n.permRequestId);
-        if (req && !req.resolved) {
+        if (req && req.choices) {
+          if (req.resolved) permButtons = `<div class="perm-resolved-label">${req.outcome === 'expired' ? 'Expired' : 'Resolved'}</div>`;
+          else if (req.sent != null) permButtons = '<div class="perm-resolved-label">Sent</div>';
+        } else if (req && !req.resolved) {
           permButtons = `<div class="notif-perm-actions">
             <button class="notif-perm-allow" data-req-id="${esc(n.permRequestId)}" data-session-id="${esc(n.sessionId)}">Allow</button>
             <button class="notif-perm-deny" data-req-id="${esc(n.permRequestId)}" data-session-id="${esc(n.sessionId)}">Deny</button>
@@ -1951,6 +2001,7 @@
     let kind = 'code';
     let lang = '';
     switch (toolName) {
+      case 'Command':
       case 'Bash':
         text = p.command ? '$ ' + p.command : raw; lang = 'bash'; break;
       case 'Write':
@@ -2001,6 +2052,47 @@
     renderNotifications();
   }
 
+  // After a reconnect the hub lists the choice requests still waiting; any other unresolved one died with the old connection.
+  function applyPendingChoices(permissionRequests, pending) {
+    const missing = pending.filter(p => !(permissionRequests[p.sessionId] || []).some(r => r.requestId === p.requestId));
+    const live = new Set(pending.map(p => p.sessionId + '\n' + p.requestId));
+    for (const [sid, reqs] of Object.entries(permissionRequests)) {
+      for (const r of reqs) {
+        if (!r.choices || r.resolved) continue;
+        if (!live.has(sid + '\n' + r.requestId)) { r.resolved = true; r.outcome = 'expired'; }
+        else r.sent = null;
+      }
+    }
+    return missing;
+  }
+
+  function sendPermissionChoice(sessionId, requestId, choiceId) {
+    if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+    state.ws.send(JSON.stringify({ type: 'permission_response', sessionId, requestId, choiceId }));
+    const req = (state.permissionRequests[sessionId] || []).find(r => r.requestId === requestId);
+    if (req) req.sent = choiceId;
+    renderPermissionBar();
+    renderNotifications();
+  }
+
+  function permissionActions(r, sid) {
+    const ids = `data-req-id="${esc(r.requestId)}" data-session-id="${esc(sid)}"`;
+    if (!r.choices) {
+      return `<button class="perm-allow" ${ids}>Allow <span class="perm-kbd">(Enter)</span></button>
+          <button class="perm-deny" ${ids}>Deny <span class="perm-kbd">(Esc)</span></button>`;
+    }
+    if (r.sent != null) {
+      const chosen = r.choices.find(c => c.id === r.sent);
+      return `<div class="perm-resolved-label">Sent: ${esc(chosen ? chosen.label : r.sent)}</div>`;
+    }
+    return r.choices.map(c => `<button class="perm-choice" ${ids} data-choice-id="${esc(c.id)}">${esc(c.label)}</button>`).join('');
+  }
+
+  // Codex choices have no safe default, so Enter/Esc stay with the message box for them.
+  function shortcutRequest(reqs) {
+    return reqs.find(r => !r.resolved && !r.choices);
+  }
+
   function renderPermissionBar() {
     const bar = $('#permissionBar');
     const sid = state.selectedSession;
@@ -2008,7 +2100,8 @@
     const reqs = (state.permissionRequests[sid] || []).filter(r => !r.resolved);
     if (!reqs.length) { bar.classList.remove('active'); bar.innerHTML = ''; return; }
     bar.classList.add('active');
-    bar.innerHTML = reqs.map(r => {
+    const count = reqs.length > 1 ? `<div class="perm-count">${reqs.length} permission requests waiting</div>` : '';
+    bar.innerHTML = count + reqs.map(r => {
       const { text: previewText, kind: previewKind, lang: previewLang } = formatPermPreview(r.toolName, r.inputPreview);
       const displayName = formatToolName(r.toolName, r.inputPreview);
       return `<div class="perm-item">
@@ -2017,12 +2110,10 @@
           <div class="perm-header">
             <span class="perm-tool">${esc(displayName)}</span>
           </div>
+          ${r.choices && r.description ? `<div class="perm-desc">${esc(r.description)}</div>` : ''}
           ${previewText ? renderPermPreview(previewText, previewKind, previewLang) : ''}
         </div>
-        <div class="perm-actions">
-          <button class="perm-allow" data-req-id="${esc(r.requestId)}" data-session-id="${esc(sid)}">Allow <span class="perm-kbd">(Enter)</span></button>
-          <button class="perm-deny" data-req-id="${esc(r.requestId)}" data-session-id="${esc(sid)}">Deny <span class="perm-kbd">(Esc)</span></button>
-        </div>
+        <div class="perm-actions${r.choices ? ' choices' : ''}">${permissionActions(r, sid)}</div>
       </div>`;
     }).join('');
     bindPermissionButtons(bar);
@@ -2035,6 +2126,9 @@
     (container || document).querySelectorAll('.perm-deny, .notif-perm-deny').forEach(btn => {
       btn.addEventListener('click', (e) => { e.stopPropagation(); sendPermissionVerdict(btn.dataset.sessionId, btn.dataset.reqId, 'deny'); });
     });
+    (container || document).querySelectorAll('.perm-choice').forEach(btn => {
+      btn.addEventListener('click', (e) => { e.stopPropagation(); sendPermissionChoice(btn.dataset.sessionId, btn.dataset.reqId, btn.dataset.choiceId); });
+    });
   }
 
   // Keyboard shortcuts: Enter=allow, Esc=deny — works even in textarea when permission is pending
@@ -2044,7 +2138,7 @@
     const sid = state.selectedSession;
     if (!sid) return;
     const reqs = state.permissionRequests[sid] || [];
-    const pending = reqs.find(r => !r.resolved);
+    const pending = shortcutRequest(reqs);
     if (!pending) return;
     // Permission pending: intercept Enter/Esc everywhere (even in textarea)
     // Shift+Enter in textarea still inserts newline