@luckydraw/cumulus 0.27.19 → 0.27.21

package/dist/gateway/static/widget.js

@@ -2,6 +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.15
  *
  * < 80KB unminified.
  */
@@ -154,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; }',
@@ -685,6 +718,97 @@
     '  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); }',
+
+    /* ── Context menu (right-click on thread) ── */
+    '.cumulus-context-menu {',
+    '  position: fixed; z-index: 300; background: #2a2a2a; border: 1px solid #444;',
+    '  border-radius: 6px; padding: 4px 0; min-width: 140px;',
+    '  box-shadow: 0 4px 12px rgba(0,0,0,0.5); font-size: 13px;',
+    '}',
+    '.cumulus-context-menu-item {',
+    '  padding: 6px 14px; color: #ccc; cursor: pointer; display: block;',
+    '  width: 100%; border: none; background: none; text-align: left;',
+    '  font-family: inherit; font-size: inherit;',
+    '}',
+    '.cumulus-context-menu-item:hover { background: #3a3a3a; color: #fff; }',
+    '.cumulus-context-menu-item.danger { color: #ef4444; }',
+    '.cumulus-context-menu-item.danger:hover { background: rgba(239,68,68,0.15); color: #ff6b6b; }',
+
+    /* ── Unread dot (glowing) ── */
+    '.cumulus-thread-unread {',
+    '  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;',
+    '  background: #3b82f6;',
+    '  box-shadow: 0 0 4px #3b82f6, 0 0 8px rgba(59,130,246,0.4);',
+    '  animation: cumulus-unread-pulse 2s ease-in-out infinite;',
+    '}',
+    '@keyframes cumulus-unread-pulse {',
+    '  0%, 100% { box-shadow: 0 0 4px #3b82f6, 0 0 8px rgba(59,130,246,0.4); }',
+    '  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) ── */
+    '.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 {',
@@ -920,6 +1044,70 @@
   // 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 = [];
@@ -1333,8 +1521,12 @@
       var streamBuffer = '';
       var connection = null;
       var connectionStatus = 'disconnected';
+      var embeddedStreamTimer = null;
+      var EMBEDDED_STREAM_TIMEOUT = 120000;
       var authenticated = false;
       var pendingAttachments = [];
+      var selectionMode = false;
+      var selectedIds = {};
 
       // ── Panel ──
       var panel = document.createElement('div');
@@ -1351,6 +1543,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);
 
@@ -1449,7 +1644,9 @@
 
       // ── Rendering ──
       function scrollToBottom() {
-        messagesEl.scrollTop = messagesEl.scrollHeight;
+        requestAnimationFrame(function () {
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        });
       }
 
       function isWideUserMessage(content) {
@@ -1518,20 +1715,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) {
@@ -1541,6 +1769,115 @@
           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() {
@@ -1629,6 +1966,17 @@
       function handleServerMessage(data) {
         switch (data.type) {
           case 'auth_ok':
+            // Reset streaming state on reconnect
+            if (streaming) {
+              if (streamBuffer) {
+                messages.push({ role: 'assistant', content: streamBuffer });
+                streamBuffer = '';
+              }
+              streaming = false;
+              stopRequested = false;
+              if (embeddedStreamTimer) { clearTimeout(embeddedStreamTimer); embeddedStreamTimer = null; }
+              updateSendBtn();
+            }
             showChatView();
             break;
           case 'auth_error':
@@ -1637,7 +1985,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();
             }
@@ -1650,11 +1998,29 @@
               updateSendBtn();
             }
             streamBuffer += data.text;
+            // Reset streaming timeout on each token
+            if (embeddedStreamTimer) clearTimeout(embeddedStreamTimer);
+            embeddedStreamTimer = setTimeout(function () {
+              if (streaming) {
+                console.warn('[Cumulus] Streaming timeout — resetting');
+                if (streamBuffer) {
+                  messages.push({ role: 'assistant', content: streamBuffer + '\n\n*(response may be incomplete)*' });
+                }
+                streaming = false;
+                streamBuffer = '';
+                updateSendBtn();
+                renderMessages();
+                // Reload history
+                if (connection) connection.send({ type: 'history', threadName: sessionId, limit: 50 });
+              }
+              embeddedStreamTimer = null;
+            }, EMBEDDED_STREAM_TIMEOUT);
             renderMessages();
             break;
           case 'segment':
             break;
           case 'done':
+            if (embeddedStreamTimer) { clearTimeout(embeddedStreamTimer); embeddedStreamTimer = null; }
             if (stopRequested) {
               stopRequested = false;
               streaming = false;
@@ -1674,8 +2040,10 @@
             break;
           case 'interjected':
             // Server confirms old stream was aborted. Partial already frozen client-side.
+            if (embeddedStreamTimer) { clearTimeout(embeddedStreamTimer); embeddedStreamTimer = null; }
             break;
           case 'error':
+            if (embeddedStreamTimer) { clearTimeout(embeddedStreamTimer); embeddedStreamTimer = null; }
             stopRequested = false;
             streaming = false;
             if (streamBuffer) {
@@ -1693,6 +2061,30 @@
             updateSendBtn();
             renderMessages();
             break;
+          case 'new_messages':
+            // Agent inject completed — append new messages and re-render
+            if (data.messages && data.messages.length > 0) {
+              for (var nm = 0; nm < data.messages.length; nm++) {
+                messages.push({ role: data.messages[nm].role, content: data.messages[nm].content });
+              }
+              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;
         }
       }
 
@@ -1808,6 +2200,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) {
@@ -1847,10 +2255,46 @@
 
     // Thread registry: threadName -> { messages, streaming, streamBuffer, stopRequested, pendingAttachments }
     var threadStates = {};
+    var streamingTimeouts = {}; // threadName -> timeout ID
+    var STREAMING_TIMEOUT_MS = 120000; // 2 minutes with no token = assume dead
+
+    function resetStreamingTimeout(threadName) {
+      if (streamingTimeouts[threadName]) clearTimeout(streamingTimeouts[threadName]);
+      streamingTimeouts[threadName] = setTimeout(function () {
+        var s = threadStates[threadName];
+        if (s && s.streaming) {
+          console.warn('[CumulusChat] Streaming timeout for thread:', threadName);
+          if (s.streamBuffer) {
+            s.messages.push({ role: 'assistant', content: s.streamBuffer + '\n\n*(response may be incomplete — connection issue)*' });
+          }
+          s.streaming = false;
+          s.streamBuffer = '';
+          s.stopRequested = false;
+          s.interjecting = false;
+          // Reload history to get the real response if server completed
+          s.historyLoaded = false;
+          if (connection) {
+            connection.send({ type: 'history', threadName: threadName, limit: 50 });
+          }
+          refreshThreadPanel(threadName);
+        }
+        delete streamingTimeouts[threadName];
+      }, STREAMING_TIMEOUT_MS);
+    }
+
+    function clearStreamingTimeout(threadName) {
+      if (streamingTimeouts[threadName]) {
+        clearTimeout(streamingTimeouts[threadName]);
+        delete streamingTimeouts[threadName];
+      }
+    }
 
     // Thread list from server: [{ name, messageCount, lastActivity }]
     var allThreads = [];
 
+    // Unread threads: threadName -> true
+    var unreadThreads = {};
+
     // Currently visible panel names (ordered, max 3)
     var visibleThreads = [];
 
@@ -1868,6 +2312,8 @@
           interjecting: false,
           pendingAttachments: [],
           historyLoaded: false,
+          selectionMode: false,
+          selectedIds: {},
         };
       }
       return threadStates[threadName];
@@ -2132,7 +2578,9 @@
       item.setAttribute('data-thread-name', name);
 
       var dot = document.createElement('span');
-      dot.className = 'cumulus-thread-dot ' + (isActive ? 'active' : 'inactive');
+      dot.className = unreadThreads[name]
+        ? 'cumulus-thread-unread'
+        : 'cumulus-thread-dot ' + (isActive ? 'active' : 'inactive');
       item.appendChild(dot);
 
       var nameEl = document.createElement('span');
@@ -2155,6 +2603,13 @@
         item.appendChild(countEl);
       }
 
+      // Right-click context menu
+      item.addEventListener('contextmenu', function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        showThreadContextMenu(name, e.clientX, e.clientY);
+      });
+
       item.addEventListener('click', function (e) {
         var multiSelect = e.metaKey || e.ctrlKey;
         if (multiSelect) {
@@ -2167,8 +2622,123 @@
       return item;
     }
 
+    // ── Thread context menu (right-click) ──
+    function dismissContextMenu() {
+      var existing = document.querySelector('.cumulus-context-menu');
+      if (existing) existing.remove();
+      document.removeEventListener('click', dismissContextMenu);
+      document.removeEventListener('contextmenu', dismissContextMenu);
+    }
+
+    function showThreadContextMenu(threadName, x, y) {
+      dismissContextMenu();
+
+      var menu = document.createElement('div');
+      menu.className = 'cumulus-context-menu';
+      menu.style.left = x + 'px';
+      menu.style.top = y + 'px';
+
+      var deleteItem = document.createElement('button');
+      deleteItem.className = 'cumulus-context-menu-item danger';
+      deleteItem.textContent = 'Delete thread';
+      deleteItem.setAttribute('data-testid', 'webchat-thread-delete');
+      deleteItem.addEventListener('click', function () {
+        dismissContextMenu();
+        showThreadDeleteConfirm(threadName);
+      });
+      menu.appendChild(deleteItem);
+
+      document.body.appendChild(menu);
+
+      // Clamp to viewport
+      var rect = menu.getBoundingClientRect();
+      if (rect.right > window.innerWidth)
+        menu.style.left = window.innerWidth - rect.width - 4 + 'px';
+      if (rect.bottom > window.innerHeight)
+        menu.style.top = window.innerHeight - rect.height - 4 + 'px';
+
+      // Dismiss on next click or right-click anywhere
+      setTimeout(function () {
+        document.addEventListener('click', dismissContextMenu);
+        document.addEventListener('contextmenu', dismissContextMenu);
+      }, 0);
+    }
+
+    // ── Thread delete confirmation ──
+    function showThreadDeleteConfirm(threadName) {
+      // 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) {
+      delete unreadThreads[name];
       visibleThreads = [name];
       renderSidebar();
       renderContentArea();
@@ -2177,6 +2747,7 @@
     }
 
     function togglePanelThread(name) {
+      delete unreadThreads[name];
       // On mobile, always solo (no side-by-side)
       if (isMobile()) {
         soloThread(name);
@@ -2307,6 +2878,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');
@@ -2375,7 +2956,11 @@
 
       // ── Panel-local render functions ──
       function scrollToBottom() {
-        messagesEl.scrollTop = messagesEl.scrollHeight;
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            messagesEl.scrollTop = messagesEl.scrollHeight;
+          });
+        });
       }
 
       function isWideUserMessage(content) {
@@ -2444,20 +3029,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) {
@@ -2467,6 +3083,132 @@
           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() {
@@ -2557,6 +3299,9 @@
       state._renderMessages = renderPanelMessages;
       state._updateSendBtn = updatePanelSendBtn;
 
+      // Initial render (messages may already be loaded from a previous view)
+      renderPanelMessages();
+
       // ── Send message for this panel ──
       function sendPanelMessage() {
         var text = inputEl.value.trim();
@@ -2568,6 +3313,7 @@
           if (!text && state.pendingAttachments.length === 0) {
             state.stopRequested = true;
             state.streaming = false;
+            clearStreamingTimeout(threadName);
             updatePanelSendBtn();
             if (state.streamBuffer) {
               state.messages.push({ role: 'assistant', content: state.streamBuffer });
@@ -2601,6 +3347,7 @@
         state.stopRequested = false;
         state.streamBuffer = '';
         state.interjecting = false;
+        resetStreamingTimeout(threadName);
         updatePanelSendBtn();
         renderPanelMessages();
 
@@ -2749,14 +3496,12 @@
         var filePath = addInput.value.trim();
         if (!filePath) return;
         connection &&
-          connection.send(
-            JSON.stringify({
-              type: 'include_add',
-              threadName: threadName,
-              filePath: filePath,
-              scope: currentScope,
-            })
-          );
+          connection.send({
+            type: 'include_add',
+            threadName: threadName,
+            filePath: filePath,
+            scope: currentScope,
+          });
         addInput.value = '';
       });
 
@@ -2779,8 +3524,7 @@
       panel.appendChild(overlay);
 
       // Request the list
-      connection &&
-        connection.send(JSON.stringify({ type: 'include_list', threadName: threadName }));
+      connection && connection.send({ type: 'include_list', threadName: threadName });
     }
 
     function renderIncludeList(panel, threadName, files) {
@@ -2817,13 +3561,11 @@
         removeBtn.setAttribute('title', 'Remove');
         removeBtn.addEventListener('click', function () {
           connection &&
-            connection.send(
-              JSON.stringify({
-                type: 'include_remove',
-                threadName: threadName,
-                filePath: f.path,
-              })
-            );
+            connection.send({
+              type: 'include_remove',
+              threadName: threadName,
+              filePath: f.path,
+            });
         });
         item.appendChild(removeBtn);
 
@@ -2868,8 +3610,7 @@
       panel.appendChild(overlay);
 
       // Request the turn list
-      connection &&
-        connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
+      connection && connection.send({ type: 'revert_list', threadName: threadName });
     }
 
     function renderRevertList(panel, threadName, turns) {
@@ -2948,8 +3689,7 @@
       cancelBtn.textContent = 'Cancel';
       cancelBtn.addEventListener('click', function () {
         // Re-request list
-        connection &&
-          connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
+        connection && connection.send({ type: 'revert_list', threadName: threadName });
       });
       actions.appendChild(cancelBtn);
 
@@ -2961,13 +3701,11 @@
         revertBtn.disabled = true;
         revertBtn.textContent = 'Reverting\u2026';
         connection &&
-          connection.send(
-            JSON.stringify({
-              type: 'revert_execute',
-              threadName: threadName,
-              targetMessageId: turn.userMessageId,
-            })
-          );
+          connection.send({
+            type: 'revert_execute',
+            threadName: threadName,
+            targetMessageId: turn.userMessageId,
+          });
       });
       actions.appendChild(revertBtn);
 
@@ -3072,8 +3810,26 @@
 
     // ── Message router ──
     function handleServerMessage(data) {
+      if (data.type !== 'token') {
+        console.log('[CumulusChat] WS recv:', data.type, data.threadName || '', data);
+      }
       switch (data.type) {
         case 'auth_ok':
+          // Reset streaming state on reconnect — server may have finished while we were disconnected
+          Object.keys(threadStates).forEach(function (tn) {
+            var s = threadStates[tn];
+            if (s.streaming) {
+              if (s.streamBuffer) {
+                s.messages.push({ role: 'assistant', content: s.streamBuffer });
+                s.streamBuffer = '';
+              }
+              s.streaming = false;
+              s.stopRequested = false;
+              s.interjecting = false;
+            }
+            // Reload history from server to pick up any responses we missed
+            s.historyLoaded = false;
+          });
           showAppView();
           registerPushNotifications();
           break;
@@ -3117,12 +3873,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);
@@ -3138,6 +3932,8 @@
               state.streamBuffer = '';
             }
             state.streamBuffer += data.text;
+            // Reset streaming timeout on each token
+            resetStreamingTimeout(data.threadName);
             // Update lastActivity for this thread in allThreads
             updateThreadActivity(data.threadName);
             refreshThreadPanel(data.threadName);
@@ -3150,6 +3946,7 @@
 
         case 'done':
           if (data.threadName) {
+            clearStreamingTimeout(data.threadName);
             var state = getThreadState(data.threadName);
             if (state.stopRequested) {
               state.stopRequested = false;
@@ -3176,11 +3973,12 @@
         case 'interjected':
           // Server confirms the old stream was aborted due to interjection.
           // The partial response was already frozen client-side in sendPanelMessage.
-          // Nothing to do — the new stream's tokens are already arriving.
+          if (data.threadName) clearStreamingTimeout(data.threadName);
           break;
 
         case 'error':
           if (data.threadName) {
+            clearStreamingTimeout(data.threadName);
             var state = getThreadState(data.threadName);
             state.stopRequested = false;
             state.streaming = false;
@@ -3201,6 +3999,22 @@
           }
           break;
 
+        case 'new_messages':
+          // Agent inject completed — append new messages to the thread and re-render
+          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,
+              });
+            }
+            updateThreadActivity(data.threadName);
+            refreshThreadPanel(data.threadName);
+          }
+          break;
+
         // ── Include/Revert responses ──
         case 'include_list':
           if (data.threadName && data.files) {
@@ -3233,13 +4047,11 @@
                 tState.historyLoaded = false;
                 // Re-request history
                 connection &&
-                  connection.send(
-                    JSON.stringify({
-                      type: 'history',
-                      threadName: data.threadName,
-                      limit: 200,
-                    })
-                  );
+                  connection.send({
+                    type: 'history',
+                    threadName: data.threadName,
+                    limit: 200,
+                  });
                 if (overlay) overlay.remove();
               } else {
                 // Show error in overlay
@@ -3263,6 +4075,10 @@
           break;
         }
       }
+      // Mark unread if thread is not currently visible
+      if (visibleThreads.indexOf(threadName) === -1) {
+        unreadThreads[threadName] = true;
+      }
       // Re-render sidebar to reflect new sort order / move thread up
       renderSidebar();
     }
@@ -3415,5 +4231,7 @@
     }
 
     window.CumulusChat = widget;
+    window.CumulusChat.version = '0.27.15';
+    console.log('[CumulusChat] Widget loaded, version ' + window.CumulusChat.version);
   }
 })();