@luckydraw/cumulus 0.27.19 → 0.27.23

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; }',
@@ -165,6 +198,17 @@
     '.cumulus-msg em { font-style: italic; }',
     '.cumulus-msg del { text-decoration: line-through; color: #888; }',
 
+    /* Blex block containers */
+    '.blex-block-container {',
+    '  margin: 0.6em 0;',
+    '  border-radius: 8px;',
+    '  overflow: hidden;',
+    '  min-height: 2em;',
+    '}',
+    '.blex-block-container[data-blex-ready="true"] {',
+    '  min-height: auto;',
+    '}',
+
     /* Headings */
     '.cumulus-msg h1,.cumulus-msg h2,.cumulus-msg h3,.cumulus-msg h4,.cumulus-msg h5,.cumulus-msg h6 {',
     '  font-weight: 600; margin: 0.7em 0 0.3em; line-height: 1.3; color: #e8e8e8;',
@@ -685,6 +729,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,7 +1055,173 @@
   // 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');
+    var mdResult = renderMarkdown(agent.body);
+    body.innerHTML = mdResult.html;
+    renderBlexBlocks(body, mdResult.blexBlocks, null);
+    el.appendChild(body);
+    return el;
+  }
+
+  // ── Markdown ──────────────────────────────────────────────────────────────
+
+  // ─── Blex block handle tracking ─────────────────────────────────────────────
+  // Map: msgEl → Array<BlockHandle> — for cleanup on message delete/revert
+  var blexHandles = new WeakMap();
+
+  /**
+   * Parse blex fenced blocks from markdown text.
+   * Returns { text: processedText, blocks: [{type, json, id}] }
+   * Fences: ~~~blex:TYPE\n{json}\n~~~ or ```blex:TYPE\n{json}\n```
+   */
+  function extractBlexBlocks(text) {
+    var blocks = [];
+    var BLEX_PREFIX = '\x00BLEX_';
+    var processed = text.replace(
+      /(?:~~~|```)blex:(\w[\w-]*)\n([\s\S]*?)(?:~~~|```)/g,
+      function (_, type, json) {
+        var idx = blocks.length;
+        var id = 'blex-' + idx + '-' + Date.now();
+        blocks.push({ type: type, json: json.trim(), id: id });
+        return BLEX_PREFIX + idx + '\x00';
+      }
+    );
+    return { text: processed, blocks: blocks };
+  }
+
+  /**
+   * After innerHTML is set, find blex placeholder divs and render blocks.
+   * Returns array of BlockHandles for lifecycle management.
+   */
+  function renderBlexBlocks(container, blocks, inputEl) {
+    if (!blocks || !blocks.length || typeof window.Blex === 'undefined') return;
+    var handles = [];
+    var placeholders = container.querySelectorAll('[data-blex-idx]');
+    placeholders.forEach(function (ph) {
+      var idx = parseInt(ph.getAttribute('data-blex-idx'), 10);
+      var block = blocks[idx];
+      if (!block) return;
+
+      // Try to parse JSON
+      var data;
+      try {
+        data = JSON.parse(block.json);
+      } catch (e) {
+        // Show parse error in a fallback
+        ph.innerHTML =
+          '<pre style="color:#f44;font-size:0.85em;">blex:' +
+          escapeHtml(block.type) +
+          ' — invalid JSON: ' +
+          escapeHtml(e.message) +
+          '</pre>';
+        return;
+      }
+
+      var contentBlock = { type: block.type, id: block.id, data: data };
+
+      // Render the block
+      window.Blex.renderBlock(contentBlock, ph)
+        .then(function (handle) {
+          handles.push(handle);
+          // Wire interaction → inject into input
+          if (handle && handle.onInteraction && inputEl) {
+            handle.onInteraction(function (interaction) {
+              if (interaction && interaction.serialized) {
+                inputEl.value =
+                  (inputEl.value ? inputEl.value + '\n' : '') + interaction.serialized;
+                inputEl.focus();
+                // Trigger input event so send button updates
+                inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+              }
+            });
+          }
+        })
+        .catch(function (err) {
+          ph.innerHTML =
+            '<pre style="color:#f44;font-size:0.85em;">blex:' +
+            escapeHtml(block.type) +
+            ' render error: ' +
+            escapeHtml(err.message) +
+            '</pre>';
+        });
+    });
+    blexHandles.set(container, handles);
+  }
+
+  /**
+   * Destroy all blex block handles for a message element.
+   */
+  function destroyBlexBlocks(container) {
+    var handles = blexHandles.get(container);
+    if (handles) {
+      handles.forEach(function (h) {
+        if (h && h.destroy) h.destroy();
+      });
+      blexHandles.delete(container);
+    }
+  }
+
   function renderMarkdown(text) {
+    // Phase 0.5: Extract blex fenced blocks — replace with unique tokens
+    var blexResult = extractBlexBlocks(text);
+    text = blexResult.text;
+
     // Phase 1: Extract fenced code blocks — replace with unique tokens
     var codeBlocks = [];
     var TOKEN_PREFIX = '\x00CODEBLOCK_';
@@ -993,7 +1294,20 @@
       return codeBlocks[parseInt(idx, 10)];
     });
 
-    return html;
+    // Phase 7.5: Reinsert blex block placeholders
+    if (blexResult.blocks.length > 0) {
+      html = html.replace(/\x00BLEX_(\d+)\x00/g, function (_, idx) {
+        return (
+          '<div class="blex-block-container" data-blex-idx="' +
+          idx +
+          '" data-testid="blex-block-' +
+          idx +
+          '"></div>'
+        );
+      });
+    }
+
+    return { html: html, blexBlocks: blexResult.blocks };
   }
 
   function buildCodeBlock(lang, escapedCode, tokenId) {
@@ -1333,8 +1647,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 +1669,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 +1770,9 @@
 
       // ── Rendering ──
       function scrollToBottom() {
-        messagesEl.scrollTop = messagesEl.scrollHeight;
+        requestAnimationFrame(function () {
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        });
       }
 
       function isWideUserMessage(content) {
@@ -1491,10 +1814,29 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          el.innerHTML = renderMarkdown(content);
+          var mdResult = renderMarkdown(content);
+          el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';
           }
+          // Render blex blocks
+          if (mdResult.blexBlocks.length > 0) {
+            if (isStreaming && typeof window.Blex !== 'undefined') {
+              // During streaming: show placeholders
+              el.querySelectorAll('[data-blex-idx]').forEach(function (ph) {
+                var idx = parseInt(ph.getAttribute('data-blex-idx'), 10);
+                var block = mdResult.blexBlocks[idx];
+                if (block) window.Blex.renderPlaceholder(block.type, ph);
+              });
+            } else if (!isStreaming) {
+              // Final render: full blex blocks with interaction wiring
+              var inputEl = el.closest('.cumulus-panel, .cumulus-widget');
+              var blexInputEl = inputEl
+                ? inputEl.querySelector('.cumulus-input, .cumulus-standalone-input')
+                : null;
+              renderBlexBlocks(el, mdResult.blexBlocks, blexInputEl);
+            }
+          }
           el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
             btn.addEventListener('click', function () {
               var targetId = btn.getAttribute('data-copy-target');
@@ -1517,21 +1859,56 @@
       }
 
       function renderMessages() {
+        // Destroy existing blex block handles before clearing DOM
+        messagesEl.querySelectorAll('.cumulus-msg.assistant').forEach(function (m) {
+          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();
           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 +1918,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 +2115,20 @@
       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 +2137,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 +2150,36 @@
               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 +2199,16 @@
             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 +2226,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 +2365,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 +2420,49 @@
 
     // 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 +2480,8 @@
           interjecting: false,
           pendingAttachments: [],
           historyLoaded: false,
+          selectionMode: false,
+          selectedIds: {},
         };
       }
       return threadStates[threadName];
@@ -2132,7 +2746,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 +2771,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 +2790,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 +2915,7 @@
     }
 
     function togglePanelThread(name) {
+      delete unreadThreads[name];
       // On mobile, always solo (no side-by-side)
       if (isMobile()) {
         soloThread(name);
@@ -2307,6 +3046,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 +3124,11 @@
 
       // ── Panel-local render functions ──
       function scrollToBottom() {
-        messagesEl.scrollTop = messagesEl.scrollHeight;
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            messagesEl.scrollTop = messagesEl.scrollHeight;
+          });
+        });
       }
 
       function isWideUserMessage(content) {
@@ -2417,10 +3170,29 @@
         el.className = 'cumulus-msg assistant';
         if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
         if (content) {
-          el.innerHTML = renderMarkdown(content);
+          var mdResult = renderMarkdown(content);
+          el.innerHTML = mdResult.html;
           if (isStreaming) {
             el.innerHTML += '<span class="cumulus-cursor"></span>';
           }
+          // Render blex blocks
+          if (mdResult.blexBlocks.length > 0) {
+            if (isStreaming && typeof window.Blex !== 'undefined') {
+              // During streaming: show placeholders
+              el.querySelectorAll('[data-blex-idx]').forEach(function (ph) {
+                var idx = parseInt(ph.getAttribute('data-blex-idx'), 10);
+                var block = mdResult.blexBlocks[idx];
+                if (block) window.Blex.renderPlaceholder(block.type, ph);
+              });
+            } else if (!isStreaming) {
+              // Final render: full blex blocks with interaction wiring
+              var inputEl = el.closest('.cumulus-panel, .cumulus-widget');
+              var blexInputEl = inputEl
+                ? inputEl.querySelector('.cumulus-input, .cumulus-standalone-input')
+                : null;
+              renderBlexBlocks(el, mdResult.blexBlocks, blexInputEl);
+            }
+          }
           el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
             btn.addEventListener('click', function () {
               var targetId = btn.getAttribute('data-copy-target');
@@ -2443,21 +3215,56 @@
       }
 
       function renderPanelMessages() {
+        // Destroy existing blex block handles before clearing DOM
+        messagesEl.querySelectorAll('.cumulus-msg.assistant').forEach(function (m) {
+          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();
           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 +3274,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 +3490,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 +3504,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 +3538,7 @@
         state.stopRequested = false;
         state.streamBuffer = '';
         state.interjecting = false;
+        resetStreamingTimeout(threadName);
         updatePanelSendBtn();
         renderPanelMessages();
 
@@ -2749,14 +3687,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 +3715,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 +3752,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 +3801,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 +3880,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 +3892,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 +4001,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 +4064,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 +4123,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 +4137,7 @@
 
         case 'done':
           if (data.threadName) {
+            clearStreamingTimeout(data.threadName);
             var state = getThreadState(data.threadName);
             if (state.stopRequested) {
               state.stopRequested = false;
@@ -3176,11 +4164,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 +4190,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 +4238,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 +4266,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 +4422,7 @@
     }
 
     window.CumulusChat = widget;
+    window.CumulusChat.version = '0.27.15';
+    console.log('[CumulusChat] Widget loaded, version ' + window.CumulusChat.version);
   }
 })();