@luckydraw/cumulus 0.27.40 → 0.28.0

package/dist/gateway/static/widget.js

@@ -44,14 +44,7 @@
 
   // ─── Styles ─────────────────────────────────────────────────────────────────
   var STYLES = [
-    /* box-sizing reset — exclude blex block internals so blex CSS isn't overridden */
-    '.cumulus-widget *:not(.blex-block-container *), .cumulus-standalone-root *:not(.blex-block-container *) { box-sizing: border-box; }',
-    /* Zero-specificity reset: any class selector (widget or blex) overrides this naturally */
-    ':where(.cumulus-widget, .cumulus-standalone-root) :where(*:not(.blex-block-container *)) { margin: 0; padding: 0; }',
-    /* Blex container: isolate from widget styles, let blex own its internals */
-    '.blex-block-container { isolation: isolate; }',
-    /* Restore browser defaults for blex internals that the widget reset may have affected */
-    '.blex-block-container * { box-sizing: content-box; }',
+    '.cumulus-widget * { box-sizing: border-box; margin: 0; padding: 0; }',
 
     '.cumulus-widget {',
     '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
@@ -102,11 +95,15 @@
     '  flex-shrink: 0;',
     '}',
     '.cumulus-header-title { font-weight: 600; font-size: 15px; color: #e0e0e0; }',
-    '.cumulus-header-status { font-size: 11px; display: flex; align-items: center; gap: 6px; color: #aaa; }',
-    '.cumulus-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }',
+    '.cumulus-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; transition: background 0.3s; }',
     '.cumulus-status-dot.connected { background: #22c55e; }',
-    '.cumulus-status-dot.connecting { background: #f59e0b; }',
+    '.cumulus-status-dot.connecting { background: #f59e0b; animation: cumulus-pulse 1s ease-in-out infinite; }',
     '.cumulus-status-dot.disconnected { background: #ef4444; }',
+    '.cumulus-status-dot.stale { background: #f59e0b; }',
+    '@keyframes cumulus-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }',
+    '.cumulus-header-status { font-size: 11px; display: flex; align-items: center; gap: 6px; color: #aaa; cursor: pointer; user-select: none; }',
+    '.cumulus-header-status:hover { color: #e0e0e0; }',
+    '.cumulus-header-status:active { opacity: 0.7; }',
     '.cumulus-close-btn { background: none; border: none; color: #888; cursor: pointer; font-size: 20px; padding: 2px 4px; line-height: 1; }',
     '.cumulus-close-btn:hover { color: #e0e0e0; }',
 
@@ -124,8 +121,8 @@
     /* ── Message inner container (max-width centering) ── */
     '.cumulus-msg-row {',
     '  display: flex; flex-direction: column;',
-    '  width: 100%;',
-    '  padding-left: 1.5em;',
+    '  max-width: 78ch; width: 100%;',
+    '  margin: 0 auto;',
     '}',
 
     /* ── User messages ── */
@@ -140,7 +137,21 @@
     '  word-wrap: break-word;',
     '  white-space: pre-wrap;',
     '}',
-    '.cumulus-msg.user.wide { max-width: 78ch; }',
+    '.cumulus-msg.user.wide { max-width: 100%; }',
+
+    /* ── System messages (e.g. "Gateway restarted") ── */
+    '.cumulus-msg.system {',
+    '  align-self: center;',
+    '  background: transparent;',
+    '  color: #8a9aaa;',
+    '  border: 1px dashed #3a4a5a;',
+    '  border-radius: 0.5em;',
+    '  padding: 0.35em 0.8em;',
+    '  max-width: 90%;',
+    '  font-size: 0.82em;',
+    '  text-align: center;',
+    '  font-style: italic;',
+    '}',
 
     /* ── User message attachments ── */
     '.cumulus-msg-attachments { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.4em; }',
@@ -166,7 +177,6 @@
     '.cumulus-msg-time {',
     '  font-size: 0.75em; color: #555; margin-top: 0.3em; padding: 0 0.3em;',
     '}',
-    '.cumulus-msg-row:has(.user) { max-width: 78ch; }',
     '.cumulus-msg-row:has(.user) .cumulus-msg-time { align-self: flex-end; }',
     '.cumulus-msg-row:has(.assistant) .cumulus-msg-time { align-self: flex-start; }',
 
@@ -200,26 +210,42 @@
     '.cumulus-msg.assistant p:first-child { margin-top: 0; }',
     '.cumulus-msg.assistant p:last-child { margin-bottom: 0; }',
 
-    '.cumulus-msg a { color: #4da6ff; text-decoration: none; }',
-    '.cumulus-msg a:hover { text-decoration: underline; }',
-    '.cumulus-msg strong { font-weight: 600; }',
-    '.cumulus-msg em { font-style: italic; }',
-    '.cumulus-msg del { text-decoration: line-through; color: #888; }',
-
-    /* Constrain text inside assistant messages, but let blex blocks go full width */
-    '.cumulus-msg.assistant > * { max-width: 78ch; }',
-    '.cumulus-msg.assistant > .blex-block-container { max-width: none; width: 100%; }',
-
     /* Blex block containers */
     '.blex-block-container {',
     '  margin: 0.6em 0;',
     '  border-radius: 8px;',
-    '  overflow: visible;',
+    '  overflow: hidden;',
     '  min-height: 2em;',
     '}',
     '.blex-block-container[data-blex-ready="true"] {',
     '  min-height: auto;',
     '}',
+    /* Blex CSS isolation — revert widget resets inside blex blocks */
+    '.blex-block-container * { margin: revert; padding: revert; line-height: revert; list-style: revert; border-spacing: revert; }',
+    '.blex-block-container { isolation: isolate; }',
+
+    /* Chip tray for deferred blex interactions */
+    '.cumulus-chip-tray {',
+    '  display: flex; flex-direction: row; flex-wrap: wrap;',
+    '  gap: 0.35em; max-width: 78ch; align-self: center; width: 100%;',
+    '  padding-bottom: 0.15em;',
+    '}',
+    '.cumulus-interaction-chip {',
+    '  display: inline-flex; align-items: center; gap: 0.3em;',
+    '  background: #2a3a4a; color: #d4e8f8; border: 1px solid #3a5060;',
+    '  border-radius: 1em; padding: 0.15em 0.6em; font-size: 0.82em;',
+    '  cursor: default; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '}',
+    '.cumulus-interaction-chip .chip-dismiss {',
+    '  cursor: pointer; opacity: 0.6; font-size: 0.9em; margin-left: 0.2em;',
+    '}',
+    '.cumulus-interaction-chip .chip-dismiss:hover { opacity: 1; }',
+
+    '.cumulus-msg a { color: #4da6ff; text-decoration: none; }',
+    '.cumulus-msg a:hover { text-decoration: underline; }',
+    '.cumulus-msg strong { font-weight: 600; }',
+    '.cumulus-msg em { font-style: italic; }',
+    '.cumulus-msg del { text-decoration: line-through; color: #888; }',
 
     /* Headings */
     '.cumulus-msg h1,.cumulus-msg h2,.cumulus-msg h3,.cumulus-msg h4,.cumulus-msg h5,.cumulus-msg h6 {',
@@ -365,6 +391,12 @@
     '  text-align: center; padding: 20px;',
     '}',
 
+    /* ── Load older messages indicator ── */
+    '.cumulus-load-older {',
+    '  text-align: center; padding: 10px; color: #666;',
+    '  font-size: 12px; font-style: italic;',
+    '}',
+
     /* ── Input area ── */
     '.cumulus-input-area {',
     '  display: flex; flex-direction: column;',
@@ -379,8 +411,8 @@
     '.cumulus-attach-strip {',
     '  display: flex; flex-direction: row;',
     '  gap: 0.5em; overflow-x: auto;',
-    '  max-width: 78ch; width: 100%;',
-    '  padding-bottom: 0.1em; padding-left: 1.5em;',
+    '  max-width: 78ch; align-self: center; width: 100%;',
+    '  padding-bottom: 0.1em;',
     '}',
     '.cumulus-attach-strip::-webkit-scrollbar { height: 4px; }',
     '.cumulus-attach-strip::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }',
@@ -416,37 +448,11 @@
     '}',
     '.cumulus-attach-chip-remove:hover { color: #ff6666; }',
 
-    /* Interaction chip tray (blex deferred interactions) */
-    '.cumulus-chip-tray {',
-    '  display: flex; flex-direction: row; flex-wrap: wrap;',
-    '  gap: 0.35em; max-width: 78ch; width: 100%;',
-    '  padding-bottom: 0.15em; padding-left: 1.5em;',
-    '}',
-    '.cumulus-chip-tray:empty { display: none; }',
-    '.cumulus-interaction-chip {',
-    '  display: inline-flex; align-items: center; gap: 0.3em;',
-    '  background: #2a3a4a; border: 1px solid #3a5a7a;',
-    '  border-radius: 1em; padding: 0.2em 0.55em;',
-    '  font-size: 0.8em; color: #bcd; cursor: default;',
-    '  max-width: 20em; overflow: hidden; white-space: nowrap;',
-    '}',
-    '.cumulus-interaction-chip-icon { flex-shrink: 0; }',
-    '.cumulus-interaction-chip-label { overflow: hidden; text-overflow: ellipsis; }',
-    '.cumulus-interaction-chip-dismiss {',
-    '  flex-shrink: 0; background: none; border: none;',
-    '  color: #789; font-size: 0.9em; cursor: pointer;',
-    '  padding: 0 0.1em; line-height: 1;',
-    '}',
-    '.cumulus-interaction-chip-dismiss:hover { color: #ff6666; }',
-    '@keyframes chipFlash { 0% { background: #3a5a7a; } 100% { background: #2a3a4a; } }',
-    '.cumulus-interaction-chip--immediate { animation: chipFlash 0.15s ease-out; }',
-
     /* Input row (attach btn + textarea + send btn) */
     '.cumulus-input-row {',
     '  display: flex; flex-direction: row;',
     '  gap: 0.5em; align-items: flex-end;',
-    '  max-width: 78ch; width: 100%;',
-    '  padding-left: 1.5em;',
+    '  max-width: 78ch; align-self: center; width: 100%;',
     '}',
     '.cumulus-attach-btn {',
     '  width: 2.7em; height: 2.7em; flex-shrink: 0;',
@@ -719,8 +725,9 @@
     '.cumulus-thread-panel:first-child { border-left: none; }',
     '.cumulus-thread-panel-header {',
     '  display: flex; align-items: center; justify-content: space-between;',
-    '  padding: 0 0.85em;',
-    '  height: 40px;',
+    '  flex-wrap: wrap; gap: 4px;',
+    '  padding: 4px 0.85em;',
+    '  min-height: 40px;',
     '  background: #2d2d2d;',
     '  border-bottom: 1px solid #3a3a3a;',
     '  flex-shrink: 0;',
@@ -767,6 +774,16 @@
     '  border-radius: 3px; font-family: inherit; white-space: nowrap;',
     '}',
     '.cumulus-panel-action-btn:hover { color: #ddd; border-color: #555; }',
+    /* ── Model selector dropdown ── */
+    '.cumulus-model-select {',
+    '  background: #2a2a2a; color: #aaa; border: 1px solid #444;',
+    '  border-radius: 4px; padding: 2px 6px; font-size: 11px;',
+    '  font-family: inherit; cursor: pointer; max-width: 140px;',
+    '  outline: none; flex-shrink: 0;',
+    '}',
+    '.cumulus-model-select:hover { border-color: #666; color: #ddd; }',
+    '.cumulus-model-select:focus { border-color: #0066cc; }',
+    '.cumulus-model-select option { background: #2a2a2a; color: #ccc; }',
     '.cumulus-panel-action-btn.active { color: #e0e0e0; border-color: #0066cc; background: rgba(0,102,204,0.12); }',
 
     /* ── Context menu (right-click on thread) ── */
@@ -1041,8 +1058,8 @@
     '  .cumulus-thread-panel { border-left: none; border-top: 1px solid #333; }',
     '  .cumulus-thread-panel:first-child { border-top: none; }',
 
-    /* Full-width message content on mobile */
-    '  .cumulus-msg.assistant > * { max-width: 100%; }',
+    /* Full-width message content */
+    '  .cumulus-msg-row { max-width: 100%; }',
     '  .cumulus-input-row { max-width: 100%; }',
     '  .cumulus-attach-strip { max-width: 100%; }',
 
@@ -1051,12 +1068,10 @@
     '  .cumulus-input-area { padding: 0.5em 0.65em 0.6em; }',
 
     /* User bubble can be wider on mobile */
-    '  .cumulus-msg-row:has(.user) { max-width: 100%; }',
     '  .cumulus-msg.user { max-width: 85%; }',
 
     /* Tables scroll horizontally */
-    '  .cumulus-msg table:not(.blex-block-container table) { display: block; overflow-x: auto; white-space: nowrap; }',
-    '  .blex-block-container table { display: table; overflow-x: visible; white-space: normal; }',
+    '  .cumulus-msg table { display: block; overflow-x: auto; white-space: nowrap; }',
 
     /* Code blocks: ensure horizontal scroll works */
     '  .code-block-wrapper pre { font-size: 0.85em; }',
@@ -1121,12 +1136,7 @@
   function formatTime(timestamp) {
     if (!timestamp) return null;
     var d = new Date(timestamp);
-    var hh = String(d.getHours()).padStart(2, '0');
-    var mm = String(d.getMinutes()).padStart(2, '0');
-    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-    var mon = months[d.getMonth()];
-    var dd = String(d.getDate()).padStart(2, '0');
-    return hh + ':' + mm + ' ' + mon + '/' + dd;
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   }
 
   function appendTimestamp(parent, timestamp) {
@@ -1159,198 +1169,183 @@
     var body = document.createElement('div');
     var mdResult = renderMarkdown(agent.body);
     body.innerHTML = mdResult.html;
-    renderBlexBlocks(body, mdResult.blexBlocks, null);
     el.appendChild(body);
+    renderBlexBlocks(body, mdResult.blexBlocks, false);
     return el;
   }
 
-  // ── Markdown ──────────────────────────────────────────────────────────────
+  // ── Blex Integration ─────────────────────────────────────────────────────
 
-  // ─── Blex block handle tracking ─────────────────────────────────────────────
-  // Map: msgEl → Array<BlockHandle> — for cleanup on message delete/revert
-  var blexHandles = new WeakMap();
+  // WeakMap: DOM element -> BlockHandle[] for lifecycle management
+  var blexHandles = typeof WeakMap !== 'undefined' ? new WeakMap() : null;
 
-  /**
-   * 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```
-   */
+  // Extract ~~~blex:TYPE\n{json}\n~~~ fences from text
+  // Returns { text: string (with placeholders), blocks: Array<{type, json, idx}> }
   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 };
+    var replaced = text.replace(/~~~blex:(\w[\w-]*)\n([\s\S]*?)\n~~~/g, function (_, type, json) {
+      var idx = blocks.length;
+      blocks.push({ type: type, json: json.trim(), idx: idx });
+      return BLEX_PREFIX + idx + '\x00';
+    });
+    return { text: replaced, 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, chipCtx) {
-    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;
+  // Render blex blocks into placeholder divs within a message element
+  function renderBlexBlocks(el, blexBlocks, isStreaming) {
+    if (!blexBlocks || blexBlocks.length === 0) return;
+    if (typeof Blex === 'undefined') {
+      console.warn('[blex] Blex library not loaded — blex.min.js may have failed to fetch');
+      return;
+    }
+    var placeholders = el.querySelectorAll('.blex-block-container');
+
+    placeholders.forEach(function (container) {
+      var idx = parseInt(container.getAttribute('data-blex-idx'), 10);
+      if (isNaN(idx) || idx >= blexBlocks.length) return;
+      var block = blexBlocks[idx];
+
       try {
-        data = JSON.parse(block.json);
-      } catch (_firstErr) {
-        // Claude sometimes outputs real newlines inside JSON string values
-        // instead of \n escape sequences. Fix by escaping newlines within strings.
-        try {
-          var fixed = block.json.replace(
-            /"(?:[^"\\]|\\.)*"/g,
-            function (match) {
-              return match
-                .replace(/\n/g, '\\n')
-                .replace(/\r/g, '\\r')
-                .replace(/\t/g, '\\t');
-            }
-          );
-          data = JSON.parse(fixed);
-        } 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 data = JSON.parse(block.json);
+        var blockObj = { type: block.type, id: block.type + '-' + idx, data: data };
 
-      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 → all interactions become chips
-          if (handle && handle.onInteraction && inputEl) {
-            handle.onInteraction(function (interaction) {
-              if (!interaction || !interaction.serialized || !interaction.serialized.trim()) return;
-              // Fallback: no chip tray, inject into input directly
-              if (!chipCtx) {
-                inputEl.value =
-                  (inputEl.value ? inputEl.value + '\n' : '') + interaction.serialized;
-                inputEl.focus();
-                inputEl.dispatchEvent(new Event('input', { bubbles: true }));
-                return;
+        if (isStreaming) {
+          // During streaming, show placeholder skeleton
+          Blex.renderPlaceholder(block.type, container);
+        } else {
+          // Final render — full interactive block
+          Blex.renderBlock(blockObj, container)
+            .then(function (handle) {
+              // Store handle immediately (inside async callback, not after sync loop)
+              if (blexHandles) {
+                var existing = blexHandles.get(el) || [];
+                existing.push(handle);
+                blexHandles.set(el, existing);
               }
-              // Per-block dedup: if this block already has a chip, replace it
-              var existingIdx = -1;
-              var existingChipEl = null;
-              if (interaction.blockId) {
-                for (var ci = 0; ci < chipCtx.pending.length; ci++) {
-                  if (chipCtx.pending[ci].blockId === interaction.blockId) {
-                    existingIdx = ci;
-                    // Find the corresponding DOM chip
-                    var chips = chipCtx.tray.querySelectorAll('[data-testid="webchat-interaction-chip"]');
-                    // Count how many pending items before this index share blockId matches
-                    var domIdx = 0;
-                    for (var cj = 0; cj < ci; cj++) domIdx++;
-                    existingChipEl = chips[domIdx] || null;
-                    break;
+              if (handle && handle.onInteraction) {
+                // Wire interaction handler
+                handle.onInteraction(function (interaction) {
+                  // Find the panel — try el.closest first, fall back to document query
+                  // (el may be detached from DOM if renderPanelMessages rebuilt the message list)
+                  var panel = el.closest('.cumulus-thread-panel') || el.closest('.cumulus-panel');
+                  if (!panel) {
+                    panel =
+                      document.querySelector('.cumulus-thread-panel') ||
+                      document.querySelector('.cumulus-panel');
                   }
-                }
-              }
-              // If replacing an existing chip, remove the old one first
-              if (existingIdx !== -1) {
-                chipCtx.pending.splice(existingIdx, 1);
-                if (existingChipEl && existingChipEl.parentNode) {
-                  existingChipEl.parentNode.removeChild(existingChipEl);
-                }
-              }
-              // Build chip for ALL interaction types
-              var chip = document.createElement('span');
-              chip.className = 'cumulus-interaction-chip' + (interaction.immediate ? ' cumulus-interaction-chip--immediate' : '');
-              chip.setAttribute('data-testid', 'webchat-interaction-chip');
-              if (interaction.icon) {
-                var iconSpan = document.createElement('span');
-                iconSpan.className = 'cumulus-interaction-chip-icon';
-                iconSpan.textContent = interaction.icon;
-                chip.appendChild(iconSpan);
-              }
-              var labelSpan = document.createElement('span');
-              labelSpan.className = 'cumulus-interaction-chip-label';
-              labelSpan.textContent = interaction.summary || interaction.serialized;
-              labelSpan.setAttribute('title', interaction.serialized);
-              chip.appendChild(labelSpan);
-              if (interaction.revertable) {
-                var dismiss = document.createElement('button');
-                dismiss.className = 'cumulus-interaction-chip-dismiss';
-                dismiss.textContent = '\u00d7';
-                dismiss.setAttribute('title', 'Remove');
-                dismiss.addEventListener('click', function () {
-                  if (handle.revertInteraction) {
-                    handle.revertInteraction(interaction);
+                  var inputEl = panel
+                    ? panel.querySelector('[data-testid="webchat-input"]')
+                    : document.querySelector('[data-testid="webchat-input"]');
+
+                  if (inputEl && interaction.serialized) {
+                    if (interaction.immediate) {
+                      // Immediate: inject into textarea and auto-send
+                      inputEl.value = interaction.serialized;
+                      inputEl.dispatchEvent(new Event('input', { bubbles: true }));
+                      // Find and click the send button
+                      var sendBtn = panel ? panel.querySelector('[data-testid*="send"]') : null;
+                      if (sendBtn) {
+                        sendBtn.click();
+                      }
+                    } else {
+                      // Deferred: add to chip tray
+                      addInteractionChip(panel, interaction, handle);
+                    }
                   }
-                  var idx = chipCtx.pending.indexOf(interaction);
-                  if (idx !== -1) chipCtx.pending.splice(idx, 1);
-                  chip.parentNode && chip.parentNode.removeChild(chip);
-                  inputEl.dispatchEvent(new Event('input', { bubbles: true }));
                 });
-                chip.appendChild(dismiss);
-              }
-              chipCtx.tray.appendChild(chip);
-              chipCtx.pending.push(interaction);
-              inputEl.dispatchEvent(new Event('input', { bubbles: true }));
-              // Immediate interactions: auto-send after a brief flash
-              if (interaction.immediate) {
-                chip.style.transition = 'opacity 0.15s';
-                setTimeout(function () {
-                  // Find and click the send button to trigger sendPanelMessage
-                  var panel = chipCtx.tray.closest('.cumulus-thread-panel, .cumulus-panel, .cumulus-widget');
-                  var sendButton = panel && panel.querySelector('[data-testid="webchat-send"]');
-                  if (sendButton) sendButton.click();
-                }, 150);
               }
+            })
+            .catch(function (err) {
+              container.innerHTML =
+                '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Blex error: ' +
+                (err.message || err) +
+                '</pre>';
             });
-          }
-        })
-        .catch(function (err) {
-          ph.innerHTML =
-            '<pre style="color:#f44;font-size:0.85em;">blex:' +
-            escapeHtml(block.type) +
-            ' render error: ' +
-            escapeHtml(err.message) +
-            '</pre>';
-        });
+        }
+      } catch (e) {
+        container.innerHTML =
+          '<pre style="color:#f66;font-size:0.85em;padding:0.5em;">Invalid blex JSON: ' +
+          e.message +
+          '</pre>';
+      }
     });
-    blexHandles.set(container, handles);
+
+    // Note: handles are stored inside the async .then() callback above,
+    // not here — by this point the promises haven't resolved yet.
   }
 
-  /**
-   * Destroy all blex block handles for a message element.
-   */
-  function destroyBlexBlocks(container) {
-    var handles = blexHandles.get(container);
+  // Destroy blex block handles for a message element
+  function destroyBlexBlocks(el) {
+    if (!blexHandles) return;
+    var handles = blexHandles.get(el);
     if (handles) {
       handles.forEach(function (h) {
-        if (h && h.destroy) h.destroy();
+        try {
+          h.destroy();
+        } catch (e) {}
+      });
+      blexHandles.delete(el);
+    }
+  }
+
+  // Add a deferred interaction chip to the chip tray
+  function addInteractionChip(panel, interaction, handle) {
+    if (!panel) return;
+    var tray = panel.querySelector('.cumulus-chip-tray');
+    if (!tray) return;
+
+    var chip = document.createElement('span');
+    chip.className = 'cumulus-interaction-chip';
+    chip.setAttribute('data-serialized', interaction.serialized || '');
+
+    var label = document.createElement('span');
+    label.textContent =
+      (interaction.icon || '\u2022') +
+      ' ' +
+      (interaction.summary || interaction.serialized || '').substring(0, 40);
+    chip.appendChild(label);
+
+    if (interaction.revertable) {
+      var dismiss = document.createElement('span');
+      dismiss.className = 'chip-dismiss';
+      dismiss.textContent = '\u00d7';
+      dismiss.addEventListener('click', function () {
+        if (handle && handle.revertInteraction) {
+          try {
+            handle.revertInteraction(interaction);
+          } catch (e) {}
+        }
+        chip.remove();
       });
-      blexHandles.delete(container);
+      chip.appendChild(dismiss);
     }
+
+    tray.appendChild(chip);
+  }
+
+  // Collect and clear chips from a panel's chip tray
+  function collectAndClearChips(panel) {
+    if (!panel) return '';
+    var tray = panel.querySelector('.cumulus-chip-tray');
+    if (!tray) return '';
+    var chips = tray.querySelectorAll('.cumulus-interaction-chip');
+    var texts = [];
+    chips.forEach(function (chip) {
+      var s = chip.getAttribute('data-serialized');
+      if (s) texts.push(s);
+    });
+    tray.innerHTML = '';
+    return texts.join('\n');
   }
 
+  // ── Markdown ──────────────────────────────────────────────────────────────
+
   function renderMarkdown(text) {
-    // Phase 0.5: Extract blex fenced blocks — replace with unique tokens
+    // Phase 0.5: Extract blex fences BEFORE code blocks
     var blexResult = extractBlexBlocks(text);
     text = blexResult.text;
+    var blexBlocks = blexResult.blocks;
 
     // Phase 1: Extract fenced code blocks — replace with unique tokens
     var codeBlocks = [];
@@ -1365,8 +1360,10 @@
     });
 
     // Phase 2: Escape HTML in the non-code portions
-    // We need to escape line by line between tokens, preserving both codeblock and blex tokens
-    var parts = processed.split(/(\x00CODEBLOCK_\d+\x00|\x00BLEX_\d+\x00)/);
+    // We need to escape line by line between tokens
+    // Split by BOTH code block and blex tokens — escapeHtml uses DOM textContent
+    // which strips null bytes (\x00), destroying our placeholder tokens
+    var parts = processed.split(/(\x00(?:CODEBLOCK|BLEX)_\d+\x00)/);
     var escapedParts = parts.map(function (part) {
       if (/^\x00(?:CODEBLOCK|BLEX)_\d+\x00$/.test(part)) return part; // keep token as-is
       return escapeHtml(part);
@@ -1425,19 +1422,11 @@
     });
 
     // 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>'
-        );
-      });
-    }
+    html = html.replace(/\x00BLEX_(\d+)\x00/g, function (_, idx) {
+      return '<div class="blex-block-container" data-blex-idx="' + idx + '"></div>';
+    });
 
-    return { html: html, blexBlocks: blexResult.blocks };
+    return { html: html, blexBlocks: blexBlocks };
   }
 
   function buildCodeBlock(lang, escapedCode, tokenId) {
@@ -1679,10 +1668,14 @@
     var reconnectTimer = null;
     var reconnectDelay = 1000;
     var destroyed = false;
+    var lastPongTime = 0;
+    var staleCheckTimer = null;
+    var currentStatus = 'disconnected';
 
     function connect() {
       if (destroyed) return;
       onStatus('connecting');
+      currentStatus = 'connecting';
       ws = new WebSocket(wsUrl);
 
       ws.onopen = function () {
@@ -1690,15 +1683,24 @@
           ws.close();
           return;
         }
+        currentStatus = 'connected';
         onStatus('connected');
         reconnectDelay = 1000;
+        lastPongTime = Date.now();
         ws.send(JSON.stringify({ type: 'auth', apiKey: apiKey }));
         if (!skipHistory) {
           ws.send(JSON.stringify({ type: 'history', threadName: sessionId, limit: 200 }));
         }
+        startStaleCheck();
       };
 
       ws.onmessage = function (event) {
+        // Any message from server proves the connection is alive
+        lastPongTime = Date.now();
+        if (currentStatus === 'stale') {
+          currentStatus = 'connected';
+          onStatus('connected');
+        }
         try {
           var data = JSON.parse(event.data);
           onMessage(data);
@@ -1709,7 +1711,9 @@
 
       ws.onclose = function () {
         if (destroyed) return;
+        currentStatus = 'disconnected';
         onStatus('disconnected');
+        stopStaleCheck();
         scheduleReconnect();
       };
 
@@ -1718,6 +1722,26 @@
       };
     }
 
+    function startStaleCheck() {
+      stopStaleCheck();
+      staleCheckTimer = setInterval(function () {
+        if (ws && ws.readyState === WebSocket.OPEN && Date.now() - lastPongTime > 60000) {
+          // No message from server in 60s — connection may be half-open
+          if (currentStatus !== 'stale') {
+            currentStatus = 'stale';
+            onStatus('stale');
+          }
+        }
+      }, 15000);
+    }
+
+    function stopStaleCheck() {
+      if (staleCheckTimer) {
+        clearInterval(staleCheckTimer);
+        staleCheckTimer = null;
+      }
+    }
+
     function scheduleReconnect() {
       if (reconnectTimer || destroyed) return;
       reconnectTimer = setTimeout(function () {
@@ -1733,8 +1757,26 @@
       }
     }
 
+    function reconnect() {
+      // Force reconnect — close current connection and reconnect immediately
+      console.log('[CumulusChat] Manual reconnect triggered');
+      stopStaleCheck();
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+      if (ws) {
+        ws.onclose = null;
+        ws.close();
+        ws = null;
+      }
+      reconnectDelay = 1000;
+      connect();
+    }
+
     function close() {
       destroyed = true;
+      stopStaleCheck();
       if (reconnectTimer) {
         clearTimeout(reconnectTimer);
         reconnectTimer = null;
@@ -1746,8 +1788,12 @@
       }
     }
 
+    function getStatus() {
+      return currentStatus;
+    }
+
     connect();
-    return { send: send, close: close };
+    return { send: send, close: close, reconnect: reconnect, getStatus: getStatus };
   }
 
   // ─── Widget ──────────────────────────────────────────────────────────────────
@@ -1836,12 +1882,6 @@
       attachStrip.style.display = 'none';
       inputArea.appendChild(attachStrip);
 
-      var chipTray = document.createElement('div');
-      chipTray.className = 'cumulus-chip-tray';
-      chipTray.setAttribute('data-testid', 'webchat-chip-tray');
-      inputArea.appendChild(chipTray);
-      var pendingChips = [];
-
       var inputRow = document.createElement('div');
       inputRow.className = 'cumulus-input-row';
 
@@ -1917,6 +1957,18 @@
         return lineCount > 3;
       }
 
+      function isSystemMessage(content) {
+        return typeof content === 'string' && content.startsWith('[System]');
+      }
+
+      function buildSystemMsgEl(content) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg system';
+        el.setAttribute('data-testid', 'webchat-system-msg');
+        el.textContent = content.replace(/^\[System\]\s*/, '');
+        return el;
+      }
+
       function buildUserMsgEl(msg) {
         var el = document.createElement('div');
         el.className = 'cumulus-msg user' + (isWideUserMessage(msg.content) ? ' wide' : '');
@@ -1955,34 +2007,9 @@
           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
-              // Defer rendering until the element is in the DOM (el.closest needs a parent)
-              var _blexBlocks = mdResult.blexBlocks;
-              requestAnimationFrame(function () {
-                var panelEl = el.closest('.cumulus-panel, .cumulus-widget, .cumulus-thread-panel');
-                var blexInputEl = panelEl
-                  ? panelEl.querySelector('.cumulus-input, .cumulus-standalone-input')
-                  : null;
-                var blexChipTray = panelEl
-                  ? panelEl.querySelector('.cumulus-chip-tray')
-                  : null;
-                var blexChipCtx = blexChipTray
-                  ? { tray: blexChipTray, pending: blexChipTray._pendingChips || (blexChipTray._pendingChips = []) }
-                  : null;
-                console.log('[blex-render] panelEl:', !!panelEl, 'inputEl:', !!blexInputEl, 'chipTray:', !!blexChipTray, 'chipCtx:', !!blexChipCtx, 'blocks:', _blexBlocks.length);
-                renderBlexBlocks(el, _blexBlocks, blexInputEl, blexChipCtx);
-              });
-            }
+          // Render blex blocks — skip during streaming to avoid destroy/recreate churn
+          if (!isStreaming) {
+            renderBlexBlocks(el, mdResult.blexBlocks, false);
           }
           el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
             btn.addEventListener('click', function () {
@@ -2005,15 +2032,30 @@
         return el;
       }
 
-      var _embeddedStreamingRow = null;
+      // Incremental streaming update — only touch the streaming element
+      function updateStreamOnly() {
+        var streamEl = messagesEl.querySelector('[data-testid="webchat-streaming"]');
+        if (streamEl) {
+          var parentRow = streamEl.closest('.cumulus-msg-row') || streamEl.parentElement;
+          if (parentRow) {
+            var newEl = buildAssistantMsgEl(streamBuffer, true);
+            parentRow.replaceChild(newEl, streamEl);
+          }
+        } else if (streaming) {
+          var row = document.createElement('div');
+          row.className = 'cumulus-msg-row';
+          row.appendChild(buildAssistantMsgEl(streamBuffer, true));
+          messagesEl.appendChild(row);
+        }
+        scrollToBottom();
+      }
 
       function renderMessages() {
-        // Destroy existing blex block handles before clearing DOM
+        // Destroy blex blocks before clearing DOM
         messagesEl.querySelectorAll('.cumulus-msg.assistant').forEach(function (m) {
           destroyBlexBlocks(m);
         });
         messagesEl.innerHTML = '';
-        _embeddedStreamingRow = null;
         // Apply selection mode class
         if (selectionMode) {
           messagesEl.classList.add('cumulus-selection-mode');
@@ -2048,7 +2090,9 @@
             })(msg.id);
             row.appendChild(cb);
           }
-          if (msg.role === 'user') {
+          if (msg.role === 'user' && isSystemMessage(msg.content)) {
+            row.appendChild(buildSystemMsgEl(msg.content));
+          } else if (msg.role === 'user') {
             var agent = parseAgentMessage(msg.content);
             if (agent) {
               row.appendChild(buildAgentMsgEl(agent));
@@ -2066,41 +2110,11 @@
           row.className = 'cumulus-msg-row';
           row.appendChild(buildAssistantMsgEl(streamBuffer, true));
           messagesEl.appendChild(row);
-          _embeddedStreamingRow = row;
         }
         scrollToBottom();
         updateEmbeddedSelectionBar();
       }
 
-      // Incremental streaming update — only touches the streaming element
-      function updateEmbeddedStreamingOnly() {
-        if (!streaming) {
-          _embeddedStreamingRow = null;
-          renderMessages();
-          return;
-        }
-        if (!_embeddedStreamingRow) {
-          renderMessages();
-          return;
-        }
-        var el = _embeddedStreamingRow.querySelector('.cumulus-msg.assistant');
-        if (el && streamBuffer) {
-          var mdResult = renderMarkdown(streamBuffer);
-          el.innerHTML = mdResult.html + '<span class="cumulus-cursor"></span>';
-          if (mdResult.blexBlocks.length > 0 && typeof window.Blex !== 'undefined') {
-            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 (el && !streamBuffer) {
-          el.innerHTML =
-            '<span class="cumulus-typing-dots"><span></span><span></span><span></span></span>';
-        }
-        scrollToBottom();
-      }
-
       function updateEmbeddedSelectionBar() {
         var existingBar = panel.querySelector('.cumulus-selection-bar');
         if (existingBar) existingBar.remove();
@@ -2226,7 +2240,25 @@
         var dot = panel.querySelector('.cumulus-status-dot');
         var text = panel.querySelector('[data-testid="webchat-status-text"]');
         if (dot) dot.className = 'cumulus-status-dot ' + status;
-        if (text) text.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+        if (text) {
+          var label =
+            status === 'stale'
+              ? 'Stale — tap to reconnect'
+              : status === 'disconnected'
+                ? 'Disconnected — tap to reconnect'
+                : status.charAt(0).toUpperCase() + status.slice(1);
+          text.textContent = label;
+        }
+      }
+
+      // ── Click status to force reconnect ──
+      var statusEl = panel.querySelector('.cumulus-header-status');
+      if (statusEl) {
+        statusEl.addEventListener('click', function () {
+          if (connection && connectionStatus !== 'connecting') {
+            connection.reconnect();
+          }
+        });
       }
 
       function renderAttachStrip() {
@@ -2316,22 +2348,9 @@
             break;
           case 'history':
             if (data.messages && data.messages.length > 0) {
-              var embCompleted = [];
-              var embStreamingMsg = null;
-              for (var ehi = 0; ehi < data.messages.length; ehi++) {
-                var ehm = data.messages[ehi];
-                if (ehm.streaming) {
-                  embStreamingMsg = ehm;
-                } else {
-                  embCompleted.push({ id: ehm.id, role: ehm.role, content: ehm.content, timestamp: ehm.timestamp });
-                }
-              }
-              messages = embCompleted;
-              if (embStreamingMsg && data.streaming) {
-                streaming = true;
-                streamBuffer = embStreamingMsg.content || '';
-                updateSendBtn();
-              }
+              messages = data.messages.map(function (m) {
+                return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
+              });
               renderMessages();
             }
             break;
@@ -2360,12 +2379,11 @@
                 renderMessages();
                 // Reload history
                 if (connection)
-                  connection.send({ type: 'history', threadName: sessionId, limit: 200 });
+                  connection.send({ type: 'history', threadName: sessionId, limit: 50 });
               }
               embeddedStreamTimer = null;
             }, EMBEDDED_STREAM_TIMEOUT);
-            // Incremental update: only touch streaming element, preserve blex blocks
-            updateEmbeddedStreamingOnly();
+            updateStreamOnly();
             break;
           case 'segment':
             break;
@@ -2448,17 +2466,7 @@
       }
 
       function sendMessage() {
-        // Prepend deferred interaction chips to the message
-        var chipTrayEl = panel.querySelector('.cumulus-chip-tray');
-        var chipPending = chipTrayEl && chipTrayEl._pendingChips ? chipTrayEl._pendingChips : [];
-        var chipPrefix = '';
-        if (chipPending.length > 0) {
-          chipPrefix = chipPending.map(function (c) { return c.serialized; }).join('\n');
-          chipPending.length = 0;
-          if (chipTrayEl) chipTrayEl.innerHTML = '';
-        }
-        var rawText = input.value.trim();
-        var text = chipPrefix ? (chipPrefix + (rawText ? '\n' + rawText : '')) : rawText;
+        var text = input.value.trim();
 
         // Interjection: user sends while streaming
         if (streaming) {
@@ -2646,7 +2654,7 @@
           // Reload history to get the real response if server completed
           s.historyLoaded = false;
           if (connection) {
-            connection.send({ type: 'history', threadName: threadName, limit: 200 });
+            connection.send({ type: 'history', threadName: threadName, limit: 50 });
           }
           refreshThreadPanel(threadName);
         }
@@ -2686,6 +2694,12 @@
           historyLoaded: false,
           selectionMode: false,
           selectedIds: {},
+          draft: '', // persists unsent textarea text across thread switches
+          // Pagination state
+          loadingOlder: false,
+          hasOlderMessages: false,
+          oldestOffset: -1, // -1 = unknown, set on first history response
+          model: 'claude', // default model
         };
       }
       return threadStates[threadName];
@@ -2821,6 +2835,20 @@
       });
     }
 
+    // ── Click status indicator to force reconnect ──
+    var appStatusEl = topbar.querySelector('.cumulus-header-status');
+    if (appStatusEl) {
+      appStatusEl.addEventListener('click', function () {
+        if (connection && connectionStatus !== 'connecting') {
+          connection.reconnect();
+          // Force history reload for all loaded threads
+          Object.keys(threadStates).forEach(function (tn) {
+            threadStates[tn].historyLoaded = false;
+          });
+        }
+      });
+    }
+
     standaloneRoot.appendChild(authWrapper);
     standaloneRoot.appendChild(appLayout);
     container.appendChild(standaloneRoot);
@@ -2828,16 +2856,27 @@
     // ── Status update (updates both auth-phase and app-phase dots) ──
     function updateStatus(status) {
       connectionStatus = status;
+      var label =
+        status === 'stale'
+          ? 'Stale — tap to reconnect'
+          : status === 'disconnected'
+            ? 'Disconnected — tap to reconnect'
+            : status.charAt(0).toUpperCase() + status.slice(1);
       // Auth phase dot
       var dot = authWrapper.querySelector('[data-testid="webchat-status-dot"]');
       var text = authWrapper.querySelector('[data-testid="webchat-status-text"]');
       if (dot) dot.className = 'cumulus-status-dot ' + status;
-      if (text) text.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+      if (text) text.textContent = label;
       // App phase dot
       var dotApp = appLayout.querySelector('[data-testid="webchat-status-dot-app"]');
       var textApp = appLayout.querySelector('[data-testid="webchat-status-text-app"]');
       if (dotApp) dotApp.className = 'cumulus-status-dot ' + status;
-      if (textApp) textApp.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+      if (textApp) textApp.textContent = label;
+      // Update per-thread panel status dots
+      var threadDots = appLayout.querySelectorAll('[data-thread-status-dot]');
+      threadDots.forEach(function (d) {
+        d.className = 'cumulus-status-dot ' + status;
+      });
     }
 
     // ── View switching ──
@@ -3154,6 +3193,7 @@
         var state = threadStates[name];
         if (state) {
           state._renderMessages = null;
+          state._updateStreamOnly = null;
           state._updateSendBtn = null;
         }
         renderSidebar();
@@ -3176,6 +3216,7 @@
         var _cs = threadStates[visibleThreads[_ci]];
         if (_cs) {
           _cs._renderMessages = null;
+          _cs._updateStreamOnly = null;
           _cs._updateSendBtn = null;
         }
       }
@@ -3226,6 +3267,99 @@
 
       panelHeader.appendChild(titleLeft);
 
+      // Model selector dropdown
+      var modelSelect = document.createElement('select');
+      modelSelect.className = 'cumulus-model-select';
+      modelSelect.setAttribute('data-testid', 'webchat-model-select');
+      modelSelect.setAttribute('data-thread-model', threadName);
+      // Default option
+      var defaultOpt = document.createElement('option');
+      defaultOpt.value = 'claude';
+      defaultOpt.textContent = 'Claude (CLI)';
+      modelSelect.appendChild(defaultOpt);
+      // Load models from API + thread's saved model
+      (function loadModels() {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', '/api/models');
+        xhr.setRequestHeader('X-API-Key', activeApiKey);
+        xhr.onload = function () {
+          if (xhr.status === 200) {
+            try {
+              var resp = JSON.parse(xhr.responseText);
+              modelSelect.innerHTML = '';
+              (resp.models || []).forEach(function (m) {
+                var opt = document.createElement('option');
+                opt.value = m.id;
+                opt.textContent = m.label || m.id;
+                modelSelect.appendChild(opt);
+              });
+              // Find the default model from the API response (global config default)
+              var defaultModel = resp.models.find(function (m) {
+                return m.default;
+              });
+              var defaultModelId = defaultModel
+                ? defaultModel.id
+                : resp.models[0] && resp.models[0].id;
+
+              // Set initial dropdown to the global default (for new threads)
+              if (defaultModelId) {
+                modelSelect.value = defaultModelId;
+                var ts = getThreadState(threadName);
+                ts.model = defaultModelId;
+              }
+
+              // Fetch the thread's saved config to override the default
+              var cfgXhr = new XMLHttpRequest();
+              cfgXhr.open('GET', '/api/thread/' + encodeURIComponent(threadName) + '/config');
+              cfgXhr.setRequestHeader('X-API-Key', activeApiKey);
+              cfgXhr.onload = function () {
+                if (cfgXhr.status === 200) {
+                  try {
+                    var cfg = JSON.parse(cfgXhr.responseText);
+                    // Use thread's saved model, or fall back to global default
+                    var selectedModel = cfg.model || defaultModelId;
+                    if (selectedModel) {
+                      // Check if this model exists in the dropdown options
+                      var optionExists = false;
+                      for (var i = 0; i < modelSelect.options.length; i++) {
+                        if (modelSelect.options[i].value === selectedModel) {
+                          optionExists = true;
+                          break;
+                        }
+                      }
+                      // Only set if the model exists in the dropdown
+                      if (optionExists) {
+                        modelSelect.value = selectedModel;
+                        var ts2 = getThreadState(threadName);
+                        ts2.model = selectedModel;
+                      }
+                    }
+                  } catch (e) {
+                    /* ignore */
+                  }
+                }
+              };
+              cfgXhr.send();
+            } catch (e) {
+              /* ignore parse errors */
+            }
+          }
+        };
+        xhr.send();
+      })();
+      modelSelect.addEventListener('change', function () {
+        var newModel = modelSelect.value;
+        var ts = getThreadState(threadName);
+        ts.model = newModel;
+        // Persist to thread config via API
+        var xhr = new XMLHttpRequest();
+        xhr.open('PUT', '/api/thread/' + encodeURIComponent(threadName) + '/config');
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.setRequestHeader('X-API-Key', activeApiKey);
+        xhr.send(JSON.stringify({ model: newModel }));
+      });
+      panelHeader.appendChild(modelSelect);
+
       // Action buttons (include + revert)
       var actions = document.createElement('div');
       actions.className = 'cumulus-panel-actions';
@@ -3280,10 +3414,46 @@
       messagesEl.setAttribute('data-thread-messages', threadName);
       panel.appendChild(messagesEl);
 
+      // Scroll-to-top pagination: load older messages
+      messagesEl.addEventListener('scroll', function () {
+        if (
+          messagesEl.scrollTop < 100 &&
+          state.hasOlderMessages &&
+          !state.loadingOlder &&
+          state.oldestOffset > 0 &&
+          connection
+        ) {
+          state.loadingOlder = true;
+          // Show loading indicator at top
+          var loader = messagesEl.querySelector('.cumulus-load-older');
+          if (!loader) {
+            loader = document.createElement('div');
+            loader.className = 'cumulus-load-older';
+            loader.setAttribute('data-testid', 'webchat-load-older');
+            loader.textContent = 'Loading older messages\u2026';
+            messagesEl.insertBefore(loader, messagesEl.firstChild);
+          }
+          // Request older messages: go back 50 from the oldest we have
+          var requestOffset = Math.max(0, state.oldestOffset - 50);
+          var requestLimit = state.oldestOffset - requestOffset;
+          connection.send({
+            type: 'history',
+            threadName: threadName,
+            limit: requestLimit,
+            offset: requestOffset,
+          });
+        }
+      });
+
       // Input area
       var inputArea = document.createElement('div');
       inputArea.className = 'cumulus-input-area';
 
+      // Chip tray for deferred blex interactions
+      var chipTray = document.createElement('div');
+      chipTray.className = 'cumulus-chip-tray';
+      inputArea.appendChild(chipTray);
+
       // Attachment strip
       var attachStrip = document.createElement('div');
       attachStrip.className = 'cumulus-attach-strip';
@@ -3291,12 +3461,6 @@
       attachStrip.style.display = 'none';
       inputArea.appendChild(attachStrip);
 
-      // Interaction chip tray (blex deferred interactions)
-      var chipTray = document.createElement('div');
-      chipTray.className = 'cumulus-chip-tray';
-      chipTray.setAttribute('data-testid', 'webchat-chip-tray');
-      inputArea.appendChild(chipTray);
-
       // Input row
       var inputRow = document.createElement('div');
       inputRow.className = 'cumulus-input-row';
@@ -3319,6 +3483,14 @@
       inputEl.setAttribute('data-testid', 'webchat-input');
       inputEl.placeholder = 'Message ' + threadName + '\u2026';
       inputEl.rows = 1;
+      // Restore draft from previous session on this thread
+      if (state.draft) {
+        inputEl.value = state.draft;
+        requestAnimationFrame(function () {
+          inputEl.style.height = 'auto';
+          inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
+        });
+      }
 
       var sendBtn = document.createElement('button');
       sendBtn.className = 'cumulus-send-btn';
@@ -3347,6 +3519,18 @@
         return lineCount > 3;
       }
 
+      function isSystemMessage(content) {
+        return typeof content === 'string' && content.startsWith('[System]');
+      }
+
+      function buildSystemMsgEl(content) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg system';
+        el.setAttribute('data-testid', 'webchat-system-msg');
+        el.textContent = content.replace(/^\[System\]\s*/, '');
+        return el;
+      }
+
       function buildUserMsgEl(msg) {
         var el = document.createElement('div');
         el.className = 'cumulus-msg user' + (isWideUserMessage(msg.content) ? ' wide' : '');
@@ -3385,34 +3569,9 @@
           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
-              // Defer rendering until the element is in the DOM (el.closest needs a parent)
-              var _blexBlocks = mdResult.blexBlocks;
-              requestAnimationFrame(function () {
-                var panelEl = el.closest('.cumulus-panel, .cumulus-widget, .cumulus-thread-panel');
-                var blexInputEl = panelEl
-                  ? panelEl.querySelector('.cumulus-input, .cumulus-standalone-input')
-                  : null;
-                var blexChipTray = panelEl
-                  ? panelEl.querySelector('.cumulus-chip-tray')
-                  : null;
-                var blexChipCtx = blexChipTray
-                  ? { tray: blexChipTray, pending: blexChipTray._pendingChips || (blexChipTray._pendingChips = []) }
-                  : null;
-                console.log('[blex-render] panelEl:', !!panelEl, 'inputEl:', !!blexInputEl, 'chipTray:', !!blexChipTray, 'chipCtx:', !!blexChipCtx, 'blocks:', _blexBlocks.length);
-                renderBlexBlocks(el, _blexBlocks, blexInputEl, blexChipCtx);
-              });
-            }
+          // Render blex blocks — skip during streaming to avoid destroy/recreate churn
+          if (!isStreaming) {
+            renderBlexBlocks(el, mdResult.blexBlocks, false);
           }
           el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
             btn.addEventListener('click', function () {
@@ -3436,7 +3595,7 @@
       }
 
       function renderPanelMessages() {
-        // Destroy existing blex block handles before clearing DOM
+        // Destroy existing blex blocks before clearing DOM
         messagesEl.querySelectorAll('.cumulus-msg.assistant').forEach(function (m) {
           destroyBlexBlocks(m);
         });
@@ -3453,6 +3612,16 @@
           updateSelectionBar();
           return;
         }
+        // Show "load older" indicator if more messages are available
+        if (state.hasOlderMessages) {
+          var loader = document.createElement('div');
+          loader.className = 'cumulus-load-older';
+          loader.setAttribute('data-testid', 'webchat-load-older');
+          loader.textContent = state.loadingOlder
+            ? 'Loading older messages\u2026'
+            : '\u2191 Scroll up for older messages';
+          messagesEl.appendChild(loader);
+        }
         for (var i = 0; i < state.messages.length; i++) {
           var msg = state.messages[i];
           var row = document.createElement('div');
@@ -3475,7 +3644,9 @@
             })(msg.id);
             row.appendChild(cb);
           }
-          if (msg.role === 'user') {
+          if (msg.role === 'user' && isSystemMessage(msg.content)) {
+            row.appendChild(buildSystemMsgEl(msg.content));
+          } else if (msg.role === 'user') {
             var agent = parseAgentMessage(msg.content);
             if (agent) {
               row.appendChild(buildAgentMsgEl(agent));
@@ -3708,51 +3879,29 @@
       }
 
       // ── Incremental streaming update ──
-      // Only updates the streaming message element — avoids destroying completed blex blocks
-      var _streamingRow = null;
-      function updateStreamingOnly() {
-        if (!state.streaming) {
-          // Not streaming — just clear the streaming row reference.
-          // Do NOT trigger a full rebuild here — the 'done' handler already did that.
-          // A full rebuild would destroy blex blocks that are rendering asynchronously.
-          _streamingRow = null;
-          return;
-        }
-        if (!_streamingRow) {
-          // First token: do a full render to set up all messages + streaming row
-          renderPanelMessages();
-          // Grab reference to the streaming row (last row in messagesEl)
-          var rows = messagesEl.querySelectorAll('.cumulus-msg-row');
-          if (rows.length > 0) {
-            var lastRow = rows[rows.length - 1];
-            var streamingEl = lastRow.querySelector('[data-testid="webchat-streaming"]');
-            if (streamingEl) _streamingRow = lastRow;
-          }
-          return;
-        }
-        // Subsequent tokens: only update the streaming row's content
-        var el = _streamingRow.querySelector('.cumulus-msg.assistant');
-        if (el && state.streamBuffer) {
-          var mdResult = renderMarkdown(state.streamBuffer);
-          el.innerHTML = mdResult.html + '<span class="cumulus-cursor"></span>';
-          // Show blex placeholders during streaming
-          if (mdResult.blexBlocks.length > 0 && typeof window.Blex !== 'undefined') {
-            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);
-            });
+      // Only update the streaming row instead of rebuilding all messages.
+      // This prevents blex blocks in completed messages from being destroyed/recreated on every token.
+      function updateStreamOnly() {
+        var streamRow = messagesEl.querySelector('[data-testid="webchat-streaming"]');
+        if (streamRow) {
+          var parentRow = streamRow.closest('.cumulus-msg-row') || streamRow.parentElement;
+          if (parentRow) {
+            var newEl = buildAssistantMsgEl(state.streamBuffer, true);
+            parentRow.replaceChild(newEl, streamRow);
           }
-        } else if (el && !state.streamBuffer) {
-          el.innerHTML =
-            '<span class="cumulus-typing-dots"><span></span><span></span><span></span></span>';
+        } else if (state.streaming) {
+          // No streaming element yet — append one
+          var row = document.createElement('div');
+          row.className = 'cumulus-msg-row';
+          row.appendChild(buildAssistantMsgEl(state.streamBuffer, true));
+          messagesEl.appendChild(row);
         }
         scrollToBottom();
       }
 
       // Store references on the state so the router can call re-render
       state._renderMessages = renderPanelMessages;
-      state._updateStreamingOnly = updateStreamingOnly;
+      state._updateStreamOnly = updateStreamOnly;
       state._updateSendBtn = updatePanelSendBtn;
 
       // Initial render (messages may already be loaded from a previous view)
@@ -3760,16 +3909,9 @@
 
       // ── Send message for this panel ──
       function sendPanelMessage() {
-        // Prepend deferred interaction chips to the message
-        var chipPending = chipTray._pendingChips || [];
-        var chipPrefix = '';
-        if (chipPending.length > 0) {
-          chipPrefix = chipPending.map(function (c) { return c.serialized; }).join('\n');
-          chipPending.length = 0;
-          chipTray.innerHTML = '';
-        }
-        var rawText = inputEl.value.trim();
-        var text = chipPrefix ? (chipPrefix + (rawText ? '\n' + rawText : '')) : rawText;
+        // Prepend any deferred blex interaction chips to the message
+        var chipText = collectAndClearChips(panel);
+        var text = (chipText ? chipText + '\n' : '') + inputEl.value.trim();
 
         // ── Interjection: user sends while streaming ──
         // Freeze partial response, send the new message — server aborts the old stream
@@ -3806,6 +3948,7 @@
         state.messages.push({ role: 'user', content: displayText, attachments: attachSnapshot });
         inputEl.value = '';
         inputEl.style.height = 'auto';
+        state.draft = '';
         state.pendingAttachments = [];
         renderPanelAttachStrip();
         state.streaming = true;
@@ -3846,6 +3989,8 @@
       inputEl.addEventListener('input', function () {
         inputEl.style.height = 'auto';
         inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
+        // Persist draft per thread
+        state.draft = inputEl.value;
         // Update send button label (Send vs Stop) based on input content
         updatePanelSendBtn();
       });
@@ -3887,15 +4032,15 @@
 
     // ── Re-render a visible thread panel's messages in-place ──
     // Called by the message router after state mutation
-    function refreshThreadPanel(threadName, streamingUpdate) {
+    function refreshThreadPanel(threadName, streamingOnly) {
       var state = threadStates[threadName];
       if (!state) return;
 
-      // During streaming: use incremental updater (preserves completed blex blocks)
-      if (streamingUpdate && state._updateStreamingOnly) {
-        state._updateStreamingOnly();
+      // During streaming, only update the streaming element (not all messages)
+      // This prevents blex blocks in completed messages from being destroyed on every token
+      if (streamingOnly && state._updateStreamOnly) {
+        state._updateStreamOnly();
       } else if (state._renderMessages) {
-        // Full rebuild (done, new message, history load, etc.)
         state._renderMessages();
       }
       if (state._updateSendBtn) {
@@ -4183,12 +4328,11 @@
 
     function formatTime(ts) {
       var d = new Date(typeof ts === 'number' ? ts : Date.parse(ts));
-      var hh = String(d.getHours()).padStart(2, '0');
-      var mm = String(d.getMinutes()).padStart(2, '0');
-      var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-      var mon = months[d.getMonth()];
-      var dd = String(d.getDate()).padStart(2, '0');
-      return hh + ':' + mm + ' ' + mon + '/' + dd;
+      var h = d.getHours();
+      var m = d.getMinutes();
+      var ampm = h >= 12 ? 'PM' : 'AM';
+      h = h % 12 || 12;
+      return h + ':' + (m < 10 ? '0' : '') + m + ' ' + ampm;
     }
 
     // ── Push notification subscription ──
@@ -4383,29 +4527,81 @@
         case 'history':
           if (data.threadName) {
             var state = getThreadState(data.threadName);
-            if (data.messages && data.messages.length > 0) {
-              // Separate completed messages from any in-progress streaming message
-              var completed = [];
-              var streamingMsg = null;
-              for (var hi = 0; hi < data.messages.length; hi++) {
-                var hm = data.messages[hi];
-                if (hm.streaming) {
-                  streamingMsg = hm;
+            var total = data.total || 0;
+            var responseOffset = typeof data.offset === 'number' ? data.offset : -1;
+            var isPagination =
+              state.loadingOlder && responseOffset >= 0 && responseOffset < state.oldestOffset;
+
+            if (isPagination) {
+              // Prepend older messages to the existing array
+              state.loadingOlder = false;
+              if (data.messages && data.messages.length > 0) {
+                var olderMsgs = data.messages.map(function (m) {
+                  return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
+                });
+                state.messages = olderMsgs.concat(state.messages);
+                state.oldestOffset = responseOffset;
+                state.hasOlderMessages = responseOffset > 0;
+
+                // Preserve scroll position: save current height, render, adjust
+                var panel = document.querySelector('[data-thread-panel="' + data.threadName + '"]');
+                var msgEl =
+                  panel && panel.querySelector('[data-thread-messages="' + data.threadName + '"]');
+                if (msgEl) {
+                  var prevHeight = msgEl.scrollHeight;
+                  var prevTop = msgEl.scrollTop;
+                  refreshThreadPanel(data.threadName);
+                  // After render, adjust scroll so the same content stays in view
+                  requestAnimationFrame(function () {
+                    var newHeight = msgEl.scrollHeight;
+                    msgEl.scrollTop = prevTop + (newHeight - prevHeight);
+                  });
+                } else {
+                  refreshThreadPanel(data.threadName);
+                }
+              } else {
+                // No more messages — remove loader
+                state.hasOlderMessages = false;
+                var panel = document.querySelector('[data-thread-panel="' + data.threadName + '"]');
+                var msgEl =
+                  panel && panel.querySelector('[data-thread-messages="' + data.threadName + '"]');
+                if (msgEl) {
+                  var loader = msgEl.querySelector('.cumulus-load-older');
+                  if (loader) loader.remove();
+                }
+              }
+            } else {
+              // Initial load or full refresh — replace all messages
+              if (data.messages && data.messages.length > 0) {
+                var lastMsg = data.messages[data.messages.length - 1];
+                if (lastMsg && lastMsg.streaming) {
+                  var nonStreamingMsgs = data.messages.slice(0, -1);
+                  state.messages = nonStreamingMsgs.map(function (m) {
+                    return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
+                  });
+                  state.streaming = true;
+                  state.streamBuffer = lastMsg.content;
+                  state.stopRequested = false;
+                  resetStreamingTimeout(data.threadName);
                 } else {
-                  completed.push({ id: hm.id, role: hm.role, content: hm.content, timestamp: hm.timestamp });
+                  state.messages = data.messages.map(function (m) {
+                    return { id: m.id, role: m.role, content: m.content, timestamp: m.timestamp };
+                  });
                 }
               }
-              state.messages = completed;
-              // If server reports an active stream, restore streaming state
-              // so the widget shows the partial response with a blinking cursor
-              if (streamingMsg && data.streaming) {
-                state.streaming = true;
-                state.streamBuffer = streamingMsg.content || '';
-                resetStreamingTimeout(data.threadName);
+              // Set pagination state from response
+              if (responseOffset >= 0) {
+                state.oldestOffset = responseOffset;
+                state.hasOlderMessages = responseOffset > 0;
+              } else if (total > 0 && data.messages) {
+                // Fallback: estimate from total and message count
+                state.oldestOffset = Math.max(0, total - data.messages.length);
+                state.hasOlderMessages = state.oldestOffset > 0;
               }
+              state.historyLoaded = true;
+              state.loadingOlder = false;
+              refreshThreadPanel(data.threadName);
             }
-            state.historyLoaded = true;
-            refreshThreadPanel(data.threadName);
           }
           break;
 
@@ -4422,7 +4618,7 @@
             resetStreamingTimeout(data.threadName);
             // Update lastActivity for this thread in allThreads
             updateThreadActivity(data.threadName);
-            // Incremental update: only touch the streaming element, preserve blex blocks
+            // Incremental update: only touch the streaming element, preserve blex blocks in completed messages
             refreshThreadPanel(data.threadName, true);
           }
           break;