@luckydraw/cumulus 1.0.23 → 1.0.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.0.24
+
+Patch release. The `/select` panel is now a compact overlay, matching `/revert`.
+
+- **`/select` used to bolt checkboxes onto the full live message bubbles** in the actual conversation view — scrolling through complete rendered content (including blex blocks and code) just to pick messages to delete.
+- **It now opens a dedicated overlay**, styled like the existing `/revert` list: one compact row per message (role badge, one-line preview, timestamp, checkbox), with the same header/close chrome and a footer bar for selection count / Select All / Delete. The live thread underneath stays undisturbed while selecting.
+- Implemented once and shared between the standalone `/chat` panel and the embedded widget, since both already shared the row-rendering and delete-confirm code.
+
 ## v1.0.23
 
 Patch release. Search result snippets now show why a match was found, and the model is told to search before claiming something isn't on record.

package/dist/gateway/static/widget.js

@@ -1760,18 +1760,7 @@
     '  50% { box-shadow: 0 0 6px #3b82f6, 0 0 14px rgba(59,130,246,0.6); }',
     '}',
 
-    /* ── Message checkbox (selection mode) ── */
-    '.cumulus-msg-checkbox {',
-    '  display: none; flex-shrink: 0; align-self: flex-start; margin-top: 0.4em;',
-    '  width: 16px; height: 16px; cursor: pointer; accent-color: #0066cc;',
-    '}',
-    '.cumulus-selection-mode .cumulus-msg-checkbox { display: block; }',
-    '.cumulus-selection-mode .cumulus-msg-row {',
-    '  flex-direction: row; align-items: flex-start; gap: 8px;',
-    '}',
-    '.cumulus-selection-mode .cumulus-msg-row > *:not(.cumulus-msg-checkbox) { flex: 1; min-width: 0; }',
-
-    /* ── Selection action bar (floats at bottom of messages area) ── */
+    /* ── Selection action bar (footer of the select-messages overlay) ── */
     '.cumulus-selection-bar {',
     '  display: flex; align-items: center; gap: 8px;',
     '  padding: 8px 12px;',
@@ -1922,6 +1911,30 @@
     '  padding: 0 5px; flex-shrink: 0;',
     '}',
 
+    /* ── Select-messages overlay rows ── */
+    '.cumulus-select-item {',
+    '  display: flex; align-items: center; gap: 0.6em;',
+    '  padding: 0.5em 0.6em; border-radius: 4px;',
+    '  border: 1px solid #333; margin-bottom: 0.3em; cursor: pointer;',
+    '}',
+    '.cumulus-select-item:hover { border-color: #555; background: #252525; }',
+    '.cumulus-select-checkbox {',
+    '  flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #0066cc;',
+    '}',
+    '.cumulus-select-role {',
+    '  font-size: 0.75em; color: #888; background: #2a2a2a;',
+    '  border: 1px solid #3a3a3a; border-radius: 3px;',
+    '  padding: 1px 6px; flex-shrink: 0; min-width: 4.5em; text-align: center;',
+    '  text-transform: uppercase;',
+    '}',
+    '.cumulus-select-preview {',
+    '  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '  color: #ccc; font-size: 0.9em;',
+    '}',
+    '.cumulus-select-time {',
+    '  font-size: 0.75em; color: #666; flex-shrink: 0;',
+    '}',
+
     /* ── Revert confirm panel ── */
     '.cumulus-revert-confirm {',
     '  padding: 1.5em; display: flex; flex-direction: column;',
@@ -3781,7 +3794,6 @@
       var EMBEDDED_STREAM_TIMEOUT = 120000;
       var authenticated = false;
       var pendingAttachments = [];
-      var selectionMode = false;
       var selectedIds = {};
 
       // ── Panel ──
@@ -4000,40 +4012,16 @@
           destroyBlexBlocks(m);
         });
         messagesEl.innerHTML = '';
-        // Apply selection mode class
-        if (selectionMode) {
-          messagesEl.classList.add('cumulus-selection-mode');
-        } else {
-          messagesEl.classList.remove('cumulus-selection-mode');
-        }
         if (messages.length === 0 && !streaming) {
           messagesEl.innerHTML =
             '<div class="cumulus-empty">Send a message to start chatting</div>';
-          updateEmbeddedSelectionBar();
+          refreshSelectOverlay(panel);
           return;
         }
         for (var i = 0; i < messages.length; i++) {
           var msg = messages[i];
           var row = document.createElement('div');
           row.className = 'cumulus-msg-row';
-          // Add checkbox in selection mode
-          if (selectionMode && msg.id) {
-            var cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.className = 'cumulus-msg-checkbox';
-            cb.checked = !!selectedIds[msg.id];
-            (function (msgId) {
-              cb.addEventListener('change', function () {
-                if (cb.checked) {
-                  selectedIds[msgId] = true;
-                } else {
-                  delete selectedIds[msgId];
-                }
-                updateEmbeddedSelectionBar();
-              });
-            })(msg.id);
-            row.appendChild(cb);
-          }
           // Suppress thinking-role entries
           if (msg.role === 'thinking') continue;
 
@@ -4059,115 +4047,95 @@
           messagesEl.appendChild(row);
         }
         scrollToBottom();
-        updateEmbeddedSelectionBar();
+        refreshSelectOverlay(panel);
       }
 
-      function updateEmbeddedSelectionBar() {
-        var existingBar = panel.querySelector('.cumulus-selection-bar');
-        if (existingBar) existingBar.remove();
-        if (!selectionMode) return;
+      function openEmbeddedSelectOverlay() {
+        var existing = panel.querySelector('.cumulus-overlay');
+        if (existing) {
+          existing.remove();
+          return;
+        }
 
-        var selectedCount = Object.keys(selectedIds).length;
-        var selectableCount = messages.filter(function (m) {
-          return !!m.id;
-        }).length;
+        selectedIds = {};
 
-        var bar = document.createElement('div');
-        bar.className = 'cumulus-selection-bar';
+        var overlay = document.createElement('div');
+        overlay.className = 'cumulus-overlay';
+        overlay.setAttribute('data-overlay-kind', 'select');
 
-        var countEl = document.createElement('span');
-        countEl.className = 'cumulus-selection-count';
-        countEl.textContent = selectedCount + ' selected';
-        bar.appendChild(countEl);
-
-        var selectAllBtn = document.createElement('button');
-        selectAllBtn.className = 'cumulus-selection-select-all-btn';
-        selectAllBtn.textContent =
-          selectedCount === selectableCount && selectableCount > 0 ? 'Deselect All' : 'Select All';
-        selectAllBtn.addEventListener('click', function () {
-          if (selectedCount === selectableCount && selectableCount > 0) {
-            selectedIds = {};
-          } else {
-            messages.forEach(function (m) {
-              if (m.id) selectedIds[m.id] = true;
-            });
-          }
-          renderMessages();
-        });
-        bar.appendChild(selectAllBtn);
-
-        var deleteBtn = document.createElement('button');
-        deleteBtn.className = 'cumulus-selection-delete-btn';
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.disabled = selectedCount === 0;
-        deleteBtn.addEventListener('click', function () {
-          if (selectedCount === 0) return;
-          showEmbeddedDeleteMessagesConfirm(Object.keys(selectedIds));
+        var header = document.createElement('div');
+        header.className = 'cumulus-overlay-header';
+        var title = document.createElement('span');
+        title.className = 'cumulus-overlay-title';
+        title.textContent = 'Select Messages';
+        header.appendChild(title);
+        var closeBtn = document.createElement('button');
+        closeBtn.className = 'cumulus-overlay-close';
+        closeBtn.textContent = '\xD7';
+        closeBtn.addEventListener('click', function () {
+          overlay.remove();
         });
-        bar.appendChild(deleteBtn);
+        header.appendChild(closeBtn);
+        overlay.appendChild(header);
 
-        var inputAreaEl = panel.querySelector('.cumulus-input-area');
-        if (inputAreaEl) {
-          panel.insertBefore(bar, inputAreaEl);
-        } else {
-          panel.appendChild(bar);
+        var body = document.createElement('div');
+        body.className = 'cumulus-overlay-body';
+        overlay.appendChild(body);
+
+        var footer = document.createElement('div');
+        footer.className = 'cumulus-selection-bar';
+        overlay.appendChild(footer);
+
+        function refresh() {
+          renderSelectRows(body, messages, selectedIds, updateFooter);
+          updateFooter();
+        }
+
+        function updateFooter() {
+          footer.innerHTML = '';
+          var selectedCount = Object.keys(selectedIds).length;
+          var selectableCount = messages.filter(function (m) {
+            return !!m.id;
+          }).length;
+
+          var countEl = document.createElement('span');
+          countEl.className = 'cumulus-selection-count';
+          countEl.textContent = selectedCount + ' selected';
+          footer.appendChild(countEl);
+
+          var selectAllBtn = document.createElement('button');
+          selectAllBtn.className = 'cumulus-selection-select-all-btn';
+          selectAllBtn.textContent =
+            selectedCount === selectableCount && selectableCount > 0
+              ? 'Deselect All'
+              : 'Select All';
+          selectAllBtn.addEventListener('click', function () {
+            if (selectedCount === selectableCount && selectableCount > 0) {
+              selectedIds = {};
+            } else {
+              messages.forEach(function (m) {
+                if (m.id) selectedIds[m.id] = true;
+              });
+            }
+            refresh();
+          });
+          footer.appendChild(selectAllBtn);
+
+          var deleteBtn = document.createElement('button');
+          deleteBtn.className = 'cumulus-selection-delete-btn';
+          deleteBtn.textContent = 'Delete';
+          deleteBtn.disabled = selectedCount === 0;
+          deleteBtn.setAttribute('data-testid', 'webchat-select-delete-btn');
+          deleteBtn.addEventListener('click', function () {
+            if (selectedCount === 0) return;
+            showDeleteMessagesConfirm(sessionId, panel, Object.keys(selectedIds));
+          });
+          footer.appendChild(deleteBtn);
         }
-      }
-
-      function showEmbeddedDeleteMessagesConfirm(ids) {
-        var existing = panel.querySelector('.cumulus-confirm-dialog');
-        if (existing) existing.remove();
-
-        var dialog = document.createElement('div');
-        dialog.className = 'cumulus-confirm-dialog';
-
-        var box = document.createElement('div');
-        box.className = 'cumulus-confirm-dialog-box';
-
-        var title = document.createElement('div');
-        title.className = 'cumulus-confirm-dialog-title';
-        title.textContent = 'Delete Messages';
-        box.appendChild(title);
-
-        var text = document.createElement('div');
-        text.className = 'cumulus-confirm-dialog-text';
-        text.textContent =
-          ids.length + ' message' + (ids.length === 1 ? '' : 's') + ' will be permanently deleted.';
-        box.appendChild(text);
-
-        var warn = document.createElement('div');
-        warn.className = 'cumulus-confirm-dialog-warn';
-        warn.textContent = 'This cannot be undone.';
-        box.appendChild(warn);
-
-        var actions = document.createElement('div');
-        actions.className = 'cumulus-confirm-dialog-actions';
-
-        var cancelBtn = document.createElement('button');
-        cancelBtn.className = 'cumulus-confirm-dialog-cancel';
-        cancelBtn.textContent = 'Cancel';
-        cancelBtn.addEventListener('click', function () {
-          dialog.remove();
-        });
-        actions.appendChild(cancelBtn);
-
-        var confirmBtn = document.createElement('button');
-        confirmBtn.className = 'cumulus-confirm-dialog-confirm';
-        confirmBtn.setAttribute('data-testid', 'webchat-delete-messages-confirm');
-        confirmBtn.textContent = 'Delete';
-        confirmBtn.addEventListener('click', function () {
-          confirmBtn.disabled = true;
-          confirmBtn.textContent = 'Deleting\u2026';
-          if (connection) {
-            connection.send({ type: 'delete_messages', threadName: sessionId, messageIds: ids });
-          }
-          dialog.remove();
-        });
-        actions.appendChild(confirmBtn);
 
-        box.appendChild(actions);
-        dialog.appendChild(box);
-        panel.appendChild(dialog);
+        overlay._refresh = refresh;
+        refresh();
+        panel.appendChild(overlay);
       }
 
       function hasUploadingAttachments() {
@@ -4464,14 +4432,10 @@
             }
             break;
           case 'messages_deleted':
-            // Server confirmed deletion — reload history and exit selection mode
-            selectionMode = false;
+            // Server confirmed deletion — reload history and close the overlay
             selectedIds = {};
-            var embSelectBtn = panel.querySelector('[data-testid="webchat-select-btn"]');
-            if (embSelectBtn) {
-              embSelectBtn.textContent = 'Select';
-              embSelectBtn.classList.remove('active');
-            }
+            var selOverlay = panel.querySelector('.cumulus-overlay[data-overlay-kind="select"]');
+            if (selOverlay) selOverlay.remove();
             messages = [];
             // Re-request history
             if (connection) {
@@ -4617,15 +4581,7 @@
       var embSelectBtn = panel.querySelector('[data-testid="webchat-select-btn"]');
       if (embSelectBtn) {
         embSelectBtn.addEventListener('click', function () {
-          selectionMode = !selectionMode;
-          selectedIds = {};
-          embSelectBtn.textContent = selectionMode ? 'Done' : 'Select';
-          if (selectionMode) {
-            embSelectBtn.classList.add('active');
-          } else {
-            embSelectBtn.classList.remove('active');
-          }
-          renderMessages();
+          openEmbeddedSelectOverlay();
         });
       }
 
@@ -4738,7 +4694,6 @@
           interjecting: false,
           pendingAttachments: [],
           historyLoaded: false,
-          selectionMode: false,
           selectedIds: {},
           draft: '', // persists unsent textarea text across thread switches
           // Pagination state
@@ -7776,7 +7731,7 @@
       selectBtn.setAttribute('title', 'Select messages to delete');
       selectBtn.textContent = 'Select';
       selectBtn.addEventListener('click', function () {
-        toggleSelectionMode();
+        openSelectOverlay(panel, threadName);
       });
       actions.appendChild(selectBtn);
 
@@ -8522,16 +8477,10 @@
           destroyBlexBlocks(m);
         });
         messagesEl.innerHTML = '';
-        // Apply selection mode class to messages container
-        if (state.selectionMode) {
-          messagesEl.classList.add('cumulus-selection-mode');
-        } else {
-          messagesEl.classList.remove('cumulus-selection-mode');
-        }
         if (state.messages.length === 0 && !state.streaming) {
           messagesEl.innerHTML =
             '<div class="cumulus-empty">Send a message to start chatting</div>';
-          updateSelectionBar();
+          refreshSelectOverlay(panel);
           return;
         }
         // Show "load older" indicator if more messages are available
@@ -8548,24 +8497,6 @@
           var msg = state.messages[i];
           var row = document.createElement('div');
           row.className = 'cumulus-msg-row';
-          // Add checkbox if in selection mode and message has an id
-          if (state.selectionMode && msg.id) {
-            var cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.className = 'cumulus-msg-checkbox';
-            cb.checked = !!state.selectedIds[msg.id];
-            (function (msgId) {
-              cb.addEventListener('change', function () {
-                if (cb.checked) {
-                  state.selectedIds[msgId] = true;
-                } else {
-                  delete state.selectedIds[msgId];
-                }
-                updateSelectionBar();
-              });
-            })(msg.id);
-            row.appendChild(cb);
-          }
           // Suppress thinking-role entries
           if (msg.role === 'thinking') continue;
 
@@ -8612,132 +8543,7 @@
         }
         renderActivityBar();
         scrollToBottom();
-        updateSelectionBar();
-      }
-
-      function updateSelectionBar() {
-        // Remove existing bar
-        var existingBar = panel.querySelector('.cumulus-selection-bar');
-        if (existingBar) existingBar.remove();
-        if (!state.selectionMode) return;
-
-        var selectedCount = Object.keys(state.selectedIds).length;
-        var selectableCount = state.messages.filter(function (m) {
-          return !!m.id;
-        }).length;
-
-        var bar = document.createElement('div');
-        bar.className = 'cumulus-selection-bar';
-
-        var countEl = document.createElement('span');
-        countEl.className = 'cumulus-selection-count';
-        countEl.textContent = selectedCount + ' selected';
-        bar.appendChild(countEl);
-
-        var selectAllBtn = document.createElement('button');
-        selectAllBtn.className = 'cumulus-selection-select-all-btn';
-        selectAllBtn.textContent =
-          selectedCount === selectableCount && selectableCount > 0 ? 'Deselect All' : 'Select All';
-        selectAllBtn.addEventListener('click', function () {
-          if (selectedCount === selectableCount && selectableCount > 0) {
-            // Deselect all
-            state.selectedIds = {};
-          } else {
-            // Select all with IDs
-            state.messages.forEach(function (m) {
-              if (m.id) state.selectedIds[m.id] = true;
-            });
-          }
-          renderPanelMessages();
-        });
-        bar.appendChild(selectAllBtn);
-
-        var deleteBtn = document.createElement('button');
-        deleteBtn.className = 'cumulus-selection-delete-btn';
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.disabled = selectedCount === 0;
-        deleteBtn.addEventListener('click', function () {
-          if (selectedCount === 0) return;
-          showDeleteMessagesConfirm(threadName, panel, Object.keys(state.selectedIds));
-        });
-        bar.appendChild(deleteBtn);
-
-        // Insert before input area
-        var inputAreaEl = panel.querySelector('.cumulus-input-area');
-        if (inputAreaEl) {
-          panel.insertBefore(bar, inputAreaEl);
-        } else {
-          panel.appendChild(bar);
-        }
-      }
-
-      function toggleSelectionMode() {
-        state.selectionMode = !state.selectionMode;
-        state.selectedIds = {};
-        selectBtn.textContent = state.selectionMode ? 'Done' : 'Select';
-        if (state.selectionMode) {
-          selectBtn.classList.add('active');
-        } else {
-          selectBtn.classList.remove('active');
-        }
-        renderPanelMessages();
-      }
-
-      function showDeleteMessagesConfirm(tName, panelEl, ids) {
-        // Remove any existing confirm dialog
-        var existing = panelEl.querySelector('.cumulus-confirm-dialog');
-        if (existing) existing.remove();
-
-        var dialog = document.createElement('div');
-        dialog.className = 'cumulus-confirm-dialog';
-
-        var box = document.createElement('div');
-        box.className = 'cumulus-confirm-dialog-box';
-
-        var title = document.createElement('div');
-        title.className = 'cumulus-confirm-dialog-title';
-        title.textContent = 'Delete Messages';
-        box.appendChild(title);
-
-        var text = document.createElement('div');
-        text.className = 'cumulus-confirm-dialog-text';
-        text.textContent =
-          ids.length + ' message' + (ids.length === 1 ? '' : 's') + ' will be permanently deleted.';
-        box.appendChild(text);
-
-        var warn = document.createElement('div');
-        warn.className = 'cumulus-confirm-dialog-warn';
-        warn.textContent = 'This cannot be undone.';
-        box.appendChild(warn);
-
-        var actions = document.createElement('div');
-        actions.className = 'cumulus-confirm-dialog-actions';
-
-        var cancelBtn = document.createElement('button');
-        cancelBtn.className = 'cumulus-confirm-dialog-cancel';
-        cancelBtn.textContent = 'Cancel';
-        cancelBtn.addEventListener('click', function () {
-          dialog.remove();
-        });
-        actions.appendChild(cancelBtn);
-
-        var confirmBtn = document.createElement('button');
-        confirmBtn.className = 'cumulus-confirm-dialog-confirm';
-        confirmBtn.setAttribute('data-testid', 'webchat-delete-messages-confirm');
-        confirmBtn.textContent = 'Delete';
-        confirmBtn.addEventListener('click', function () {
-          confirmBtn.disabled = true;
-          confirmBtn.textContent = 'Deleting\u2026';
-          if (connection) {
-            connection.send({ type: 'delete_messages', threadName: tName, messageIds: ids });
-          }
-          dialog.remove();
-        });
-        actions.appendChild(confirmBtn);
-
-        box.appendChild(actions);
-        dialog.appendChild(box);
-        panelEl.appendChild(dialog);
+        refreshSelectOverlay(panel);
       }
 
       function hasPanelUploading() {
@@ -9277,6 +9083,230 @@
       });
     }
 
+    // ── Select-messages overlay ──
+    // Compact one-line rows with checkboxes, modeled on the revert overlay's
+    // list shape (task 163) — replaces the old inline checkboxes bolted onto
+    // full message bubbles in the live thread view.
+    function messagePreviewText(content) {
+      if (typeof content !== 'string') return '';
+      var text = content
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/[#*_`~>]/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+      if (text.length > 90) text = text.slice(0, 90) + '…';
+      return text || '(empty)';
+    }
+
+    function renderSelectRows(body, messages, selectedIds, onToggle) {
+      body.innerHTML = '';
+      var any = false;
+      messages.forEach(function (msg) {
+        if (msg.role === 'thinking') return;
+        any = true;
+
+        var item = document.createElement('div');
+        item.className = 'cumulus-select-item';
+        item.setAttribute('data-testid', 'webchat-select-item');
+
+        var cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.className = 'cumulus-select-checkbox';
+        cb.disabled = !msg.id;
+        cb.checked = !!(msg.id && selectedIds[msg.id]);
+        item.appendChild(cb);
+
+        var roleEl = document.createElement('span');
+        roleEl.className = 'cumulus-select-role';
+        roleEl.textContent = msg.role || 'message';
+        item.appendChild(roleEl);
+
+        var previewEl = document.createElement('span');
+        previewEl.className = 'cumulus-select-preview';
+        previewEl.textContent = messagePreviewText(msg.content);
+        item.appendChild(previewEl);
+
+        var timeEl = document.createElement('span');
+        timeEl.className = 'cumulus-select-time';
+        timeEl.textContent = formatTime(msg.timestamp);
+        item.appendChild(timeEl);
+
+        function applyToggle(checked) {
+          if (!msg.id) return;
+          cb.checked = checked;
+          if (checked) {
+            selectedIds[msg.id] = true;
+          } else {
+            delete selectedIds[msg.id];
+          }
+          onToggle();
+        }
+
+        cb.addEventListener('change', function () {
+          applyToggle(cb.checked);
+        });
+        item.addEventListener('click', function (e) {
+          if (e.target === cb) return;
+          applyToggle(!cb.checked);
+        });
+
+        body.appendChild(item);
+      });
+      if (!any) {
+        body.innerHTML = '<div class="cumulus-overlay-empty">No messages to select.</div>';
+      }
+    }
+
+    function showDeleteMessagesConfirm(tName, panelEl, ids) {
+      // Remove any existing confirm dialog
+      var existing = panelEl.querySelector('.cumulus-confirm-dialog');
+      if (existing) existing.remove();
+
+      var dialog = document.createElement('div');
+      dialog.className = 'cumulus-confirm-dialog';
+
+      var box = document.createElement('div');
+      box.className = 'cumulus-confirm-dialog-box';
+
+      var title = document.createElement('div');
+      title.className = 'cumulus-confirm-dialog-title';
+      title.textContent = 'Delete Messages';
+      box.appendChild(title);
+
+      var text = document.createElement('div');
+      text.className = 'cumulus-confirm-dialog-text';
+      text.textContent =
+        ids.length + ' message' + (ids.length === 1 ? '' : 's') + ' will be permanently deleted.';
+      box.appendChild(text);
+
+      var warn = document.createElement('div');
+      warn.className = 'cumulus-confirm-dialog-warn';
+      warn.textContent = 'This cannot be undone.';
+      box.appendChild(warn);
+
+      var actions = document.createElement('div');
+      actions.className = 'cumulus-confirm-dialog-actions';
+
+      var cancelBtn = document.createElement('button');
+      cancelBtn.className = 'cumulus-confirm-dialog-cancel';
+      cancelBtn.textContent = 'Cancel';
+      cancelBtn.addEventListener('click', function () {
+        dialog.remove();
+      });
+      actions.appendChild(cancelBtn);
+
+      var confirmBtn = document.createElement('button');
+      confirmBtn.className = 'cumulus-confirm-dialog-confirm';
+      confirmBtn.setAttribute('data-testid', 'webchat-delete-messages-confirm');
+      confirmBtn.textContent = 'Delete';
+      confirmBtn.addEventListener('click', function () {
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = 'Deleting…';
+        if (connection) {
+          connection.send({ type: 'delete_messages', threadName: tName, messageIds: ids });
+        }
+        dialog.remove();
+      });
+      actions.appendChild(confirmBtn);
+
+      box.appendChild(actions);
+      dialog.appendChild(box);
+      panelEl.appendChild(dialog);
+    }
+
+    function openSelectOverlay(panel, threadName) {
+      var existing = panel.querySelector('.cumulus-overlay');
+      if (existing) {
+        existing.remove();
+        return;
+      }
+
+      getThreadState(threadName).selectedIds = {};
+
+      var overlay = document.createElement('div');
+      overlay.className = 'cumulus-overlay';
+      overlay.setAttribute('data-overlay-kind', 'select');
+
+      var header = document.createElement('div');
+      header.className = 'cumulus-overlay-header';
+      var title = document.createElement('span');
+      title.className = 'cumulus-overlay-title';
+      title.textContent = 'Select Messages';
+      header.appendChild(title);
+      var closeBtn = document.createElement('button');
+      closeBtn.className = 'cumulus-overlay-close';
+      closeBtn.textContent = '\xD7';
+      closeBtn.addEventListener('click', function () {
+        overlay.remove();
+      });
+      header.appendChild(closeBtn);
+      overlay.appendChild(header);
+
+      var body = document.createElement('div');
+      body.className = 'cumulus-overlay-body';
+      overlay.appendChild(body);
+
+      var footer = document.createElement('div');
+      footer.className = 'cumulus-selection-bar';
+      overlay.appendChild(footer);
+
+      function refresh() {
+        var st = getThreadState(threadName);
+        renderSelectRows(body, st.messages, st.selectedIds, updateFooter);
+        updateFooter();
+      }
+
+      function updateFooter() {
+        var st = getThreadState(threadName);
+        footer.innerHTML = '';
+        var selectedCount = Object.keys(st.selectedIds).length;
+        var selectableCount = st.messages.filter(function (m) {
+          return !!m.id;
+        }).length;
+
+        var countEl = document.createElement('span');
+        countEl.className = 'cumulus-selection-count';
+        countEl.textContent = selectedCount + ' selected';
+        footer.appendChild(countEl);
+
+        var selectAllBtn = document.createElement('button');
+        selectAllBtn.className = 'cumulus-selection-select-all-btn';
+        selectAllBtn.textContent =
+          selectedCount === selectableCount && selectableCount > 0 ? 'Deselect All' : 'Select All';
+        selectAllBtn.addEventListener('click', function () {
+          if (selectedCount === selectableCount && selectableCount > 0) {
+            st.selectedIds = {};
+          } else {
+            st.messages.forEach(function (m) {
+              if (m.id) st.selectedIds[m.id] = true;
+            });
+          }
+          refresh();
+        });
+        footer.appendChild(selectAllBtn);
+
+        var deleteBtn = document.createElement('button');
+        deleteBtn.className = 'cumulus-selection-delete-btn';
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.disabled = selectedCount === 0;
+        deleteBtn.setAttribute('data-testid', 'webchat-select-delete-btn');
+        deleteBtn.addEventListener('click', function () {
+          if (selectedCount === 0) return;
+          showDeleteMessagesConfirm(threadName, panel, Object.keys(st.selectedIds));
+        });
+        footer.appendChild(deleteBtn);
+      }
+
+      overlay._refresh = refresh;
+      refresh();
+      panel.appendChild(overlay);
+    }
+
+    function refreshSelectOverlay(panel) {
+      var overlay = panel.querySelector('.cumulus-overlay[data-overlay-kind="select"]');
+      if (overlay && overlay._refresh) overlay._refresh();
+    }
+
     // ── Revert overlay ──
     function openRevertOverlay(panel, threadName) {
       var existing = panel.querySelector('.cumulus-overlay');
@@ -9648,20 +9678,12 @@
             var dState = getThreadState(data.threadName);
             dState.messages = [];
             dState.historyLoaded = false;
-            dState.selectionMode = false;
             dState.selectedIds = {};
-            // Exit selection mode on visible panel
+            // Close the select overlay on the visible panel, if open
             var dPanel = document.querySelector('[data-thread-panel="' + data.threadName + '"]');
             if (dPanel) {
-              var dMsgs = dPanel.querySelector('.cumulus-messages');
-              if (dMsgs) dMsgs.classList.remove('cumulus-selection-mode');
-              var dBar = dPanel.querySelector('.cumulus-selection-bar');
-              if (dBar) dBar.remove();
-              var dSelectBtn = dPanel.querySelector('[data-testid="webchat-select-btn"]');
-              if (dSelectBtn) {
-                dSelectBtn.textContent = 'Select';
-                dSelectBtn.classList.remove('active');
-              }
+              var dOverlay = dPanel.querySelector('.cumulus-overlay[data-overlay-kind="select"]');
+              if (dOverlay) dOverlay.remove();
             }
             connection &&
               connection.send({ type: 'history', threadName: data.threadName, limit: 200 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luckydraw/cumulus",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "RLM-based CLI chat wrapper for Claude with external history context management",
   "type": "module",
   "main": "dist/index.js",