@luckydraw/cumulus 0.27.13 → 0.27.15

package/dist/gateway/static/widget.js

@@ -2,7 +2,7 @@
  * Cumulus Web Chat Widget — self-contained, no external dependencies.
  * Embeddable via <script src="/widget.js" data-api-key="..."></script>
  * or usable standalone at /chat.
- * @version 0.27.12
+ * @version 0.27.15
  *
  * < 80KB unminified.
  */
@@ -155,6 +155,38 @@
     '  word-wrap: break-word;',
     '}',
 
+    /* ── Timestamps ── */
+    '.cumulus-msg-time {',
+    '  font-size: 0.75em; color: #555; margin-top: 0.3em; padding: 0 0.3em;',
+    '}',
+    '.cumulus-msg-row:has(.user) .cumulus-msg-time { align-self: flex-end; }',
+    '.cumulus-msg-row:has(.assistant) .cumulus-msg-time { align-self: flex-start; }',
+
+    /* ── Agent messages ── */
+    '.cumulus-msg.agent {',
+    '  align-self: flex-start;',
+    '  background: transparent;',
+    '  color: #e0e0e0;',
+    '  padding: 0.4em 0 0.4em 0.75em;',
+    '  width: 100%;',
+    '  word-wrap: break-word;',
+    '  border-left: 2px solid var(--agent-color, #9966cc);',
+    '}',
+    '.cumulus-agent-header {',
+    '  display: flex; align-items: center; gap: 0.4em;',
+    '  margin-bottom: 0.3em; font-size: 0.82em;',
+    '}',
+    '.cumulus-agent-name {',
+    '  font-family: "SF Mono", "Fira Code", Consolas, monospace;',
+    '  font-weight: 600; color: var(--agent-color, #9966cc);',
+    '}',
+    '.cumulus-agent-name::before { content: "["; opacity: 0.5; }',
+    '.cumulus-agent-name::after { content: "]"; opacity: 0.5; }',
+    '.cumulus-agent-context {',
+    '  font-size: 0.9em; color: #666;',
+    '  font-family: "SF Mono", "Fira Code", Consolas, monospace;',
+    '}',
+
     /* ── Markdown rendered inside assistant messages ── */
     '.cumulus-msg.assistant p { margin: 0.4em 0; }',
     '.cumulus-msg.assistant p:first-child { margin-top: 0; }',
@@ -686,6 +718,81 @@
     '  border-radius: 3px; font-family: inherit; white-space: nowrap;',
     '}',
     '.cumulus-panel-action-btn:hover { color: #ddd; border-color: #555; }',
+    '.cumulus-panel-action-btn.active { color: #e0e0e0; border-color: #0066cc; background: rgba(0,102,204,0.12); }',
+
+    /* ── Sidebar thread delete button ── */
+    '.cumulus-thread-item { position: relative; }',
+    '.cumulus-thread-delete-btn {',
+    '  display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);',
+    '  background: none; border: none; color: #666;',
+    '  cursor: pointer; font-size: 14px; padding: 2px 5px; line-height: 1;',
+    '  border-radius: 3px; z-index: 1;',
+    '}',
+    '.cumulus-thread-item:hover .cumulus-thread-delete-btn { display: block; }',
+    '.cumulus-thread-delete-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }',
+
+    /* ── 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) ── */
+    '.cumulus-selection-bar {',
+    '  display: flex; align-items: center; gap: 8px;',
+    '  padding: 8px 12px;',
+    '  background: #2d2d2d; border-top: 1px solid #3a3a3a;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-selection-count { font-size: 13px; color: #aaa; flex: 1; }',
+    '.cumulus-selection-select-all-btn {',
+    '  background: none; border: 1px solid #555; color: #ccc;',
+    '  padding: 4px 10px; border-radius: 4px; font-size: 12px;',
+    '  cursor: pointer; font-family: inherit;',
+    '}',
+    '.cumulus-selection-select-all-btn:hover { border-color: #888; color: #e0e0e0; }',
+    '.cumulus-selection-delete-btn {',
+    '  background: #8b2222; border: none; color: white;',
+    '  padding: 4px 12px; border-radius: 4px; font-size: 12px;',
+    '  cursor: pointer; font-family: inherit; font-weight: 600;',
+    '}',
+    '.cumulus-selection-delete-btn:hover:not(:disabled) { background: #a33; }',
+    '.cumulus-selection-delete-btn:disabled { background: #3a2a2a; color: #666; cursor: not-allowed; }',
+
+    /* ── Confirm dialog overlay ── */
+    '.cumulus-confirm-dialog {',
+    '  position: absolute; top: 0; left: 0; right: 0; bottom: 0;',
+    '  background: rgba(0,0,0,0.6); z-index: 20;',
+    '  display: flex; align-items: center; justify-content: center;',
+    '}',
+    '.cumulus-confirm-dialog-box {',
+    '  background: #2d2d2d; border: 1px solid #4a4a4a; border-radius: 8px;',
+    '  padding: 1.5em; max-width: 320px; width: 90%;',
+    '  display: flex; flex-direction: column; gap: 1em; text-align: center;',
+    '  box-shadow: 0 8px 32px rgba(0,0,0,0.5);',
+    '}',
+    '.cumulus-confirm-dialog-title { font-weight: 600; font-size: 15px; color: #e0e0e0; }',
+    '.cumulus-confirm-dialog-text { font-size: 13px; color: #aaa; }',
+    '.cumulus-confirm-dialog-warn { font-size: 12px; color: #f59e0b; }',
+    '.cumulus-confirm-dialog-actions { display: flex; gap: 8px; justify-content: center; }',
+    '.cumulus-confirm-dialog-cancel {',
+    '  padding: 0.4em 1.2em; border-radius: 4px; cursor: pointer;',
+    '  font-size: 13px; border: 1px solid #3a3a3a; background: #2a2a2a; color: #ccc;',
+    '  font-family: inherit;',
+    '}',
+    '.cumulus-confirm-dialog-cancel:hover { background: #3a3a3a; }',
+    '.cumulus-confirm-dialog-confirm {',
+    '  padding: 0.4em 1.2em; border-radius: 4px; cursor: pointer;',
+    '  font-size: 13px; border: none; background: #8b2222; color: white;',
+    '  font-family: inherit; font-weight: 600;',
+    '}',
+    '.cumulus-confirm-dialog-confirm:hover { background: #a33; }',
+    '.cumulus-confirm-dialog-confirm:disabled { background: #3a2a2a; color: #666; cursor: not-allowed; }',
 
     /* ── Overlay (covers the thread panel) ── */
     '.cumulus-overlay {',
@@ -921,6 +1028,67 @@
   // else, then reinsert code blocks. This prevents markdown patterns inside
   // code from being processed.
 
+  // ── Agent message detection + timestamps ──────────────────────────────────
+  var AGENT_MSG_RE = /^\[([^\]]+)\s*\u2192\s*([^\]]+)\]:\s*/; // [sender → recipient]:
+  var AGENT_COLORS = ['#9966cc', '#2aa198', '#e69500', '#d33682', '#85c025', '#ff6b6b'];
+
+  function getAgentColor(name) {
+    var hash = 0;
+    for (var i = 0; i < name.length; i++) hash = ((hash << 5) - hash + name.charCodeAt(i)) | 0;
+    return AGENT_COLORS[Math.abs(hash) % AGENT_COLORS.length];
+  }
+
+  function parseAgentMessage(content) {
+    var match = content.match(AGENT_MSG_RE);
+    if (!match) return null;
+    var body = content.slice(match[0].length).replace(/\n\n\(Reply using send_to_agent\([^)]*\)[^)]*\)\s*$/, '').trim();
+    // Also strip CC/broadcast reply hints
+    body = body.replace(/\n\n\(You are CC'd on this message[^)]*\)\s*$/, '').trim();
+    body = body.replace(/\n\n\(Review the above messages[^)]*\)\s*$/, '').trim();
+    return { sender: match[1].trim(), recipient: match[2].trim(), body: body };
+  }
+
+  function formatTime(timestamp) {
+    if (!timestamp) return null;
+    var d = new Date(timestamp);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function appendTimestamp(parent, timestamp) {
+    var time = formatTime(timestamp);
+    if (time) {
+      var timeEl = document.createElement('div');
+      timeEl.className = 'cumulus-msg-time';
+      timeEl.textContent = time;
+      parent.appendChild(timeEl);
+    }
+  }
+
+  function buildAgentMsgEl(agent) {
+    var el = document.createElement('div');
+    el.className = 'cumulus-msg agent';
+    el.style.setProperty('--agent-color', getAgentColor(agent.sender));
+
+    var header = document.createElement('div');
+    header.className = 'cumulus-agent-header';
+    var nameEl = document.createElement('span');
+    nameEl.className = 'cumulus-agent-name';
+    nameEl.textContent = agent.sender;
+    header.appendChild(nameEl);
+    var ctx = document.createElement('span');
+    ctx.className = 'cumulus-agent-context';
+    ctx.textContent = '\u2192 ' + agent.recipient;
+    header.appendChild(ctx);
+    el.appendChild(header);
+
+    var body = document.createElement('div');
+    body.innerHTML = renderMarkdown(agent.body);
+    el.appendChild(body);
+    return el;
+  }
+
+  // ── Markdown ──────────────────────────────────────────────────────────────
+
   function renderMarkdown(text) {
     // Phase 1: Extract fenced code blocks — replace with unique tokens
     var codeBlocks = [];
@@ -1336,6 +1504,8 @@
       var connectionStatus = 'disconnected';
       var authenticated = false;
       var pendingAttachments = [];
+      var selectionMode = false;
+      var selectedIds = {};
 
       // ── Panel ──
       var panel = document.createElement('div');
@@ -1352,6 +1522,9 @@
         '<span class="cumulus-status-dot" data-testid="webchat-status-dot"></span>' +
         '<span data-testid="webchat-status-text">Disconnected</span>' +
         '</span>' +
+        '<div class="cumulus-panel-actions">' +
+        '<button class="cumulus-panel-action-btn" data-testid="webchat-select-btn" title="Select messages to delete">Select</button>' +
+        '</div>' +
         '<button class="cumulus-close-btn" data-testid="webchat-close">&times;</button>';
       panel.appendChild(header);
 
@@ -1450,7 +1623,7 @@
 
       // ── Rendering ──
       function scrollToBottom() {
-        requestAnimationFrame(function() {
+        requestAnimationFrame(function () {
           messagesEl.scrollTop = messagesEl.scrollHeight;
         });
       }
@@ -1521,20 +1694,51 @@
 
       function renderMessages() {
         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();
           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);
+          }
           if (msg.role === 'user') {
-            row.appendChild(buildUserMsgEl(msg));
+            var agent = parseAgentMessage(msg.content);
+            if (agent) {
+              row.appendChild(buildAgentMsgEl(agent));
+            } else {
+              row.appendChild(buildUserMsgEl(msg));
+            }
           } else {
             row.appendChild(buildAssistantMsgEl(msg.content, false));
           }
+          appendTimestamp(row, msg.timestamp);
           messagesEl.appendChild(row);
         }
         if (streaming) {
@@ -1544,6 +1748,109 @@
           messagesEl.appendChild(row);
         }
         scrollToBottom();
+        updateEmbeddedSelectionBar();
+      }
+
+      function updateEmbeddedSelectionBar() {
+        var existingBar = panel.querySelector('.cumulus-selection-bar');
+        if (existingBar) existingBar.remove();
+        if (!selectionMode) return;
+
+        var selectedCount = Object.keys(selectedIds).length;
+        var selectableCount = 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) {
+            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));
+        });
+        bar.appendChild(deleteBtn);
+
+        var inputAreaEl = panel.querySelector('.cumulus-input-area');
+        if (inputAreaEl) {
+          panel.insertBefore(bar, inputAreaEl);
+        } else {
+          panel.appendChild(bar);
+        }
+      }
+
+      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);
       }
 
       function updateSendBtn() {
@@ -1640,7 +1947,7 @@
           case 'history':
             if (data.messages && data.messages.length > 0) {
               messages = data.messages.map(function (m) {
-                return { role: m.role, content: m.content };
+                return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
               });
               renderMessages();
             }
@@ -1705,6 +2012,21 @@
               renderMessages();
             }
             break;
+          case 'messages_deleted':
+            // Server confirmed deletion — reload history and exit selection mode
+            selectionMode = false;
+            selectedIds = {};
+            var embSelectBtn = panel.querySelector('[data-testid="webchat-select-btn"]');
+            if (embSelectBtn) {
+              embSelectBtn.textContent = 'Select';
+              embSelectBtn.classList.remove('active');
+            }
+            messages = [];
+            // Re-request history
+            if (connection) {
+              connection.send({ type: 'history', threadName: sessionId, limit: 200 });
+            }
+            break;
         }
       }
 
@@ -1820,6 +2142,22 @@
         });
       }
 
+      // Select button for embedded mode
+      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();
+        });
+      }
+
       // Embedded mode: no auth panel handling needed (API key from attribute)
       function startConnection() {
         if (connection) {
@@ -1880,6 +2218,8 @@
           interjecting: false,
           pendingAttachments: [],
           historyLoaded: false,
+          selectionMode: false,
+          selectedIds: {},
         };
       }
       return threadStates[threadName];
@@ -2167,6 +2507,18 @@
         item.appendChild(countEl);
       }
 
+      // Delete button (revealed on hover via CSS)
+      var deleteBtn = document.createElement('button');
+      deleteBtn.className = 'cumulus-thread-delete-btn';
+      deleteBtn.setAttribute('title', 'Delete thread');
+      deleteBtn.setAttribute('data-testid', 'webchat-thread-delete');
+      deleteBtn.textContent = '\u2715';
+      deleteBtn.addEventListener('click', function (e) {
+        e.stopPropagation();
+        showThreadDeleteConfirm(name, item);
+      });
+      item.appendChild(deleteBtn);
+
       item.addEventListener('click', function (e) {
         var multiSelect = e.metaKey || e.ctrlKey;
         if (multiSelect) {
@@ -2179,6 +2531,75 @@
       return item;
     }
 
+    // ── Thread delete confirmation ──
+    function showThreadDeleteConfirm(threadName, anchorEl) {
+      // Remove any existing confirm dialogs
+      var existing = document.querySelector('.cumulus-confirm-dialog[data-context="thread-delete"]');
+      if (existing) {
+        existing.remove();
+        return;
+      }
+
+      // Build inline confirm dialog attached to the sidebar scroll area
+      var dialog = document.createElement('div');
+      dialog.className = 'cumulus-confirm-dialog';
+      dialog.setAttribute('data-context', 'thread-delete');
+      dialog.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center;';
+
+      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 Thread';
+      box.appendChild(title);
+
+      var text = document.createElement('div');
+      text.className = 'cumulus-confirm-dialog-text';
+      text.textContent = 'Delete "' + threadName + '"?';
+      box.appendChild(text);
+
+      var warn = document.createElement('div');
+      warn.className = 'cumulus-confirm-dialog-warn';
+      warn.textContent = 'All messages and history will be permanently removed.';
+      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-thread-delete-confirm');
+      confirmBtn.textContent = 'Delete';
+      confirmBtn.addEventListener('click', function () {
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = 'Deleting\u2026';
+        if (connection) {
+          connection.send({ type: 'delete_thread', threadName: threadName });
+        }
+        dialog.remove();
+      });
+      actions.appendChild(confirmBtn);
+
+      box.appendChild(actions);
+      dialog.appendChild(box);
+
+      // Dismiss on backdrop click
+      dialog.addEventListener('click', function (e) {
+        if (e.target === dialog) dialog.remove();
+      });
+
+      document.body.appendChild(dialog);
+    }
+
     // ── Panel management ──
     function soloThread(name) {
       visibleThreads = [name];
@@ -2319,6 +2740,16 @@
       });
       actions.appendChild(revertBtn);
 
+      var selectBtn = document.createElement('button');
+      selectBtn.className = 'cumulus-panel-action-btn';
+      selectBtn.setAttribute('data-testid', 'webchat-select-btn');
+      selectBtn.setAttribute('title', 'Select messages to delete');
+      selectBtn.textContent = 'Select';
+      selectBtn.addEventListener('click', function () {
+        toggleSelectionMode();
+      });
+      actions.appendChild(selectBtn);
+
       panelHeader.appendChild(actions);
 
       var closeBtn = document.createElement('button');
@@ -2387,8 +2818,8 @@
 
       // ── Panel-local render functions ──
       function scrollToBottom() {
-        requestAnimationFrame(function() {
-          requestAnimationFrame(function() {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
             messagesEl.scrollTop = messagesEl.scrollHeight;
           });
         });
@@ -2460,20 +2891,51 @@
 
       function renderPanelMessages() {
         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();
           return;
         }
         for (var i = 0; i < state.messages.length; i++) {
           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);
+          }
           if (msg.role === 'user') {
-            row.appendChild(buildUserMsgEl(msg));
+            var agent = parseAgentMessage(msg.content);
+            if (agent) {
+              row.appendChild(buildAgentMsgEl(agent));
+            } else {
+              row.appendChild(buildUserMsgEl(msg));
+            }
           } else {
             row.appendChild(buildAssistantMsgEl(msg.content, false));
           }
+          appendTimestamp(row, msg.timestamp);
           messagesEl.appendChild(row);
         }
         if (state.streaming) {
@@ -2483,6 +2945,128 @@
           messagesEl.appendChild(row);
         }
         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);
       }
 
       function updatePanelSendBtn() {
@@ -3052,12 +3636,50 @@
           }
           break;
 
+        case 'thread_deleted':
+          // Server confirms thread deleted; remove from sidebar and panels
+          if (data.threadName) {
+            allThreads = allThreads.filter(function (t) {
+              return t.name !== data.threadName;
+            });
+            delete threadStates[data.threadName];
+            removeThreadFromView(data.threadName);
+            renderSidebar();
+          }
+          break;
+
+        case 'messages_deleted':
+          // Server confirms messages deleted; reload history for that thread
+          if (data.threadName) {
+            var dState = getThreadState(data.threadName);
+            dState.messages = [];
+            dState.historyLoaded = false;
+            dState.selectionMode = false;
+            dState.selectedIds = {};
+            // Exit selection mode on visible panel
+            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');
+              }
+            }
+            connection &&
+              connection.send({ type: 'history', threadName: data.threadName, limit: 200 });
+          }
+          break;
+
         case 'history':
           if (data.threadName) {
             var state = getThreadState(data.threadName);
             if (data.messages && data.messages.length > 0) {
               state.messages = data.messages.map(function (m) {
-                return { id: m.id, role: m.role, content: m.content };
+                return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
               });
             }
             refreshThreadPanel(data.threadName);
@@ -3141,7 +3763,11 @@
           if (data.threadName && data.messages && data.messages.length > 0) {
             var state = getThreadState(data.threadName);
             for (var nm = 0; nm < data.messages.length; nm++) {
-              state.messages.push({ id: data.messages[nm].id, role: data.messages[nm].role, content: data.messages[nm].content });
+              state.messages.push({
+                id: data.messages[nm].id,
+                role: data.messages[nm].role,
+                content: data.messages[nm].content,
+              });
             }
             updateThreadActivity(data.threadName);
             refreshThreadPanel(data.threadName);
@@ -3362,7 +3988,7 @@
     }
 
     window.CumulusChat = widget;
-    window.CumulusChat.version = '0.27.12';
+    window.CumulusChat.version = '0.27.15';
     console.log('[CumulusChat] Widget loaded, version ' + window.CumulusChat.version);
   }
 })();