@luckydraw/cumulus 0.15.2 → 0.16.1

package/dist/gateway/static/widget.js

@@ -345,10 +345,10 @@
     '  max-width: 78ch; align-self: center; width: 100%;',
     '}',
     '.cumulus-attach-btn {',
-    '  width: 2.7em; height: 2.7em; flex-shrink: 0;',
+    '  width: 2em; height: 2em; flex-shrink: 0;',
     '  background: #3d3d3d; border: 1px solid #4a4a4a;',
-    '  border-radius: 0.55em; color: #aaa;',
-    '  font-size: 1.4em; line-height: 1; cursor: pointer;',
+    '  border-radius: 0.45em; color: #aaa;',
+    '  font-size: 1em; line-height: 1; cursor: pointer;',
     '  display: flex; align-items: center; justify-content: center;',
     '  padding: 0;',
     '}',
@@ -422,6 +422,158 @@
     '  cursor: pointer; font-size: 11px; padding: 2px 6px; font-family: inherit;',
     '}',
     '.cumulus-auth-logout:hover { color: #ef4444; }',
+
+    /* ── Standalone layout ── */
+    '.cumulus-standalone-root {',
+    '  display: flex; flex-direction: row;',
+    '  width: 100%; height: 100vh;',
+    '  background: #1e1e1e; overflow: hidden;',
+    '}',
+
+    /* ── Sidebar ── */
+    '.cumulus-sidebar {',
+    '  width: 220px; flex-shrink: 0;',
+    '  background: #252525;',
+    '  border-right: 1px solid #333;',
+    '  display: flex; flex-direction: column;',
+    '  overflow: hidden;',
+    '}',
+    '.cumulus-sidebar-header {',
+    '  padding: 10px 12px 6px;',
+    '  display: flex; align-items: center; justify-content: space-between;',
+    '  border-bottom: 1px solid #333;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-sidebar-title {',
+    '  font-size: 11px; font-weight: 600; color: #888;',
+    '  text-transform: uppercase; letter-spacing: 0.05em;',
+    '}',
+    '.cumulus-sidebar-status {',
+    '  display: flex; align-items: center; gap: 5px;',
+    '}',
+    '.cumulus-sidebar-scroll {',
+    '  flex: 1; overflow-y: auto; padding: 6px 0;',
+    '}',
+    '.cumulus-sidebar-scroll::-webkit-scrollbar { width: 4px; }',
+    '.cumulus-sidebar-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }',
+    '.cumulus-sidebar-section-label {',
+    '  font-size: 10px; font-weight: 600; color: #666;',
+    '  text-transform: uppercase; letter-spacing: 0.06em;',
+    '  padding: 8px 12px 4px;',
+    '}',
+    '.cumulus-sidebar-divider {',
+    '  border: none; border-top: 1px solid #333;',
+    '  margin: 6px 0;',
+    '}',
+    '.cumulus-thread-item {',
+    '  display: flex; align-items: center; gap: 8px;',
+    '  padding: 7px 12px;',
+    '  cursor: pointer;',
+    '  font-size: 13px; color: #ccc;',
+    '  border-left: 2px solid transparent;',
+    '  user-select: none;',
+    '  transition: background 0.1s ease;',
+    '}',
+    '.cumulus-thread-item:hover { background: #2a2a2a; }',
+    '.cumulus-thread-item.selected {',
+    '  border-left-color: #0066cc;',
+    '  background: #1e2a3a;',
+    '  color: #e0e0e0;',
+    '}',
+    '.cumulus-thread-dot {',
+    '  width: 7px; height: 7px; border-radius: 50%;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-thread-dot.active { background: #22c55e; }',
+    '.cumulus-thread-dot.inactive {',
+    '  background: transparent;',
+    '  border: 1px solid #555;',
+    '}',
+    '.cumulus-thread-name {',
+    '  flex: 1; overflow: hidden;',
+    '  text-overflow: ellipsis; white-space: nowrap;',
+    '}',
+    '.cumulus-thread-count {',
+    '  font-size: 11px; color: #666;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-sidebar-footer {',
+    '  padding: 8px 10px;',
+    '  border-top: 1px solid #333;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-new-thread-btn {',
+    '  width: 100%;',
+    '  background: #2a2a2a; border: 1px solid #3a3a3a;',
+    '  border-radius: 0.45em; color: #aaa;',
+    '  padding: 7px 10px; font-size: 13px;',
+    '  cursor: pointer; font-family: inherit;',
+    '  text-align: left;',
+    '}',
+    '.cumulus-new-thread-btn:hover { background: #333; color: #ddd; border-color: #0066cc; }',
+    '.cumulus-new-thread-input {',
+    '  width: 100%;',
+    '  background: #3d3d3d; border: 1px solid #0066cc;',
+    '  border-radius: 0.45em; color: #e0e0e0;',
+    '  padding: 7px 10px; font-size: 13px;',
+    '  font-family: inherit; outline: none;',
+    '}',
+
+    /* ── Content area (holds panels) ── */
+    '.cumulus-content-area {',
+    '  flex: 1; display: flex; flex-direction: row;',
+    '  overflow: hidden;',
+    '}',
+
+    /* ── Thread panel (inside content area) ── */
+    '.cumulus-thread-panel {',
+    '  flex: 1; display: flex; flex-direction: column;',
+    '  overflow: hidden; background: #1e1e1e;',
+    '  border-left: 1px solid #333;',
+    '  min-width: 0;',
+    '}',
+    '.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;',
+    '  background: #2d2d2d;',
+    '  border-bottom: 1px solid #3a3a3a;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-thread-panel-title {',
+    '  font-weight: 600; font-size: 14px; color: #e0e0e0;',
+    '  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+    '}',
+    '.cumulus-thread-panel-close {',
+    '  background: none; border: none; color: #666;',
+    '  cursor: pointer; font-size: 18px; padding: 2px 4px;',
+    '  line-height: 1; flex-shrink: 0;',
+    '}',
+    '.cumulus-thread-panel-close:hover { color: #e0e0e0; }',
+
+    /* ── Standalone empty state (no threads selected) ── */
+    '.cumulus-standalone-empty {',
+    '  flex: 1; display: flex; flex-direction: column;',
+    '  align-items: center; justify-content: center;',
+    '  color: #555; font-size: 15px; text-align: center; padding: 20px;',
+    '  gap: 10px;',
+    '}',
+    '.cumulus-standalone-empty-hint {',
+    '  font-size: 12px; color: #444;',
+    '}',
+
+    /* ── Top bar for standalone (connection status + logout) ── */
+    '.cumulus-topbar {',
+    '  display: flex; align-items: center; justify-content: space-between;',
+    '  padding: 0 14px;',
+    '  height: 40px;',
+    '  background: #2d2d2d;',
+    '  border-bottom: 1px solid #3a3a3a;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-topbar-title { font-weight: 600; font-size: 15px; color: #e0e0e0; }',
+    '.cumulus-topbar-right { display: flex; align-items: center; gap: 10px; }',
   ].join('\n');
 
   // ─── HTML Escaping ───────────────────────────────────────────────────────────
@@ -694,6 +846,7 @@
     var sessionId = opts.sessionId;
     var onMessage = opts.onMessage;
     var onStatus = opts.onStatus;
+    var skipHistory = opts.skipHistory || false;
 
     var ws = null;
     var reconnectTimer = null;
@@ -710,7 +863,9 @@
         onStatus('connected');
         reconnectDelay = 1000;
         ws.send(JSON.stringify({ type: 'auth', apiKey: apiKey }));
-        ws.send(JSON.stringify({ type: 'history', threadName: sessionId, limit: 50 }));
+        if (!skipHistory) {
+          ws.send(JSON.stringify({ type: 'history', threadName: sessionId, limit: 50 }));
+        }
       };
 
       ws.onmessage = function (event) {
@@ -777,41 +932,552 @@
     styleEl.textContent = STYLES;
     document.head.appendChild(styleEl);
 
-    // ── State ──
-    var messages = [];          // { role, content, attachments? }
-    var streaming = false;
-    var stopRequested = false;
-    var streamBuffer = '';
-    var connection = null;
-    var connectionStatus = 'disconnected';
-    var authenticated = false;
-    var pendingAttachments = []; // { base64, mimeType, name, dataUrl, isImage }
-
     // ── Root container ──
     var container = document.createElement('div');
     container.className = 'cumulus-widget';
 
-    // ── Panel ──
-    var panel = document.createElement('div');
-    panel.className = 'cumulus-panel ' + (standalone ? 'standalone' : 'floating');
-    panel.style.display = standalone ? 'flex' : 'none';
-    panel.setAttribute('data-testid', 'webchat-panel');
+    // ═══════════════════════════════════════════════════════════════════════════
+    // EMBEDDED MODE — unchanged from original behavior
+    // ═══════════════════════════════════════════════════════════════════════════
+    if (!standalone) {
+      // ── State ──
+      var messages = [];
+      var streaming = false;
+      var stopRequested = false;
+      var streamBuffer = '';
+      var connection = null;
+      var connectionStatus = 'disconnected';
+      var authenticated = false;
+      var pendingAttachments = [];
+
+      // ── Panel ──
+      var panel = document.createElement('div');
+      panel.className = 'cumulus-panel floating';
+      panel.style.display = 'none';
+      panel.setAttribute('data-testid', 'webchat-panel');
+
+      // ── Header ──
+      var header = document.createElement('div');
+      header.className = 'cumulus-header';
+      header.innerHTML =
+        '<span class="cumulus-header-title">Cumulus</span>' +
+        '<span class="cumulus-header-status">' +
+          '<span class="cumulus-status-dot" data-testid="webchat-status-dot"></span>' +
+          '<span data-testid="webchat-status-text">Disconnected</span>' +
+        '</span>' +
+        '<button class="cumulus-close-btn" data-testid="webchat-close">&times;</button>';
+      panel.appendChild(header);
+
+      // ── Auth panel ──
+      var authPanel = document.createElement('div');
+      authPanel.className = 'cumulus-auth';
+      authPanel.setAttribute('data-testid', 'webchat-auth');
+      authPanel.innerHTML =
+        '<div class="cumulus-auth-title">Cumulus Chat</div>' +
+        '<div class="cumulus-auth-subtitle">Enter your API key to connect. The key will be saved in your browser.</div>' +
+        '<input class="cumulus-auth-input" data-testid="webchat-auth-input" type="password" placeholder="sk-cumulus-..." autocomplete="off" />' +
+        '<button class="cumulus-auth-btn" data-testid="webchat-auth-submit">Connect</button>' +
+        '<div class="cumulus-auth-error" data-testid="webchat-auth-error"></div>';
+      panel.appendChild(authPanel);
+
+      // ── Messages area ──
+      var messagesEl = document.createElement('div');
+      messagesEl.className = 'cumulus-messages';
+      messagesEl.setAttribute('data-testid', 'webchat-messages');
+      messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+      messagesEl.style.display = 'none';
+      panel.appendChild(messagesEl);
+
+      // ── Input area ──
+      var inputArea = document.createElement('div');
+      inputArea.className = 'cumulus-input-area';
+      inputArea.style.display = 'none';
+
+      var attachStrip = document.createElement('div');
+      attachStrip.className = 'cumulus-attach-strip';
+      attachStrip.setAttribute('data-testid', 'webchat-attach-strip');
+      attachStrip.style.display = 'none';
+      inputArea.appendChild(attachStrip);
+
+      var inputRow = document.createElement('div');
+      inputRow.className = 'cumulus-input-row';
+
+      var fileInput = document.createElement('input');
+      fileInput.type = 'file';
+      fileInput.multiple = true;
+      fileInput.accept = 'image/*,.pdf,.txt,.md,.js,.ts,.py,.json,.csv';
+      fileInput.style.display = 'none';
+      fileInput.setAttribute('data-testid', 'webchat-file-input');
+
+      var attachBtn = document.createElement('button');
+      attachBtn.className = 'cumulus-attach-btn';
+      attachBtn.setAttribute('data-testid', 'webchat-attach-btn');
+      attachBtn.setAttribute('title', 'Attach files');
+      attachBtn.textContent = '+';
+
+      var input = document.createElement('textarea');
+      input.className = 'cumulus-input';
+      input.setAttribute('data-testid', 'webchat-input');
+      input.placeholder = 'Type a message\u2026';
+      input.rows = 1;
+
+      var sendBtn = document.createElement('button');
+      sendBtn.className = 'cumulus-send-btn';
+      sendBtn.setAttribute('data-testid', 'webchat-send');
+      sendBtn.textContent = 'Send';
+
+      inputRow.appendChild(fileInput);
+      inputRow.appendChild(attachBtn);
+      inputRow.appendChild(input);
+      inputRow.appendChild(sendBtn);
+      inputArea.appendChild(inputRow);
+      panel.appendChild(inputArea);
+      container.appendChild(panel);
+
+      // ── Floating bubble ──
+      var bubble = document.createElement('button');
+      bubble.className = 'cumulus-bubble';
+      bubble.setAttribute('data-testid', 'webchat-bubble');
+      bubble.setAttribute('title', 'Open chat');
+      bubble.innerHTML =
+        '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
+      container.appendChild(bubble);
+
+      // ── View switching ──
+      function showAuthView() {
+        authenticated = false;
+        authPanel.style.display = 'flex';
+        messagesEl.style.display = 'none';
+        inputArea.style.display = 'none';
+        var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
+        if (errEl) errEl.textContent = '';
+      }
+
+      function showChatView() {
+        authenticated = true;
+        authPanel.style.display = 'none';
+        messagesEl.style.display = 'flex';
+        inputArea.style.display = 'flex';
+        input.focus();
+      }
+
+      // ── Rendering ──
+      function scrollToBottom() {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      function isWideUserMessage(content) {
+        if (/```/.test(content)) return true;
+        var lineCount = (content.match(/\n/g) || []).length + 1;
+        return lineCount > 3;
+      }
+
+      function buildUserMsgEl(msg) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg user' + (isWideUserMessage(msg.content) ? ' wide' : '');
+        el.textContent = msg.content;
+        if (msg.attachments && msg.attachments.length > 0) {
+          var attRow = document.createElement('div');
+          attRow.className = 'cumulus-msg-attachments';
+          msg.attachments.forEach(function (att) {
+            if (att.isImage) {
+              var img = document.createElement('img');
+              img.className = 'cumulus-msg-img';
+              img.src = att.dataUrl;
+              img.alt = att.name;
+              img.setAttribute('data-testid', 'webchat-msg-img');
+              attRow.appendChild(img);
+            } else {
+              var badge = document.createElement('span');
+              badge.className = 'cumulus-msg-file-badge';
+              badge.setAttribute('data-testid', 'webchat-msg-file');
+              badge.textContent = '\uD83D\uDCCE ' + att.name;
+              attRow.appendChild(badge);
+            }
+          });
+          el.appendChild(attRow);
+        }
+        return el;
+      }
+
+      function buildAssistantMsgEl(content, isStreaming) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg assistant';
+        if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
+        if (content) {
+          el.innerHTML = renderMarkdown(content);
+          if (isStreaming) {
+            el.innerHTML += '<span class="cumulus-cursor"></span>';
+          }
+          el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
+            btn.addEventListener('click', function () {
+              var targetId = btn.getAttribute('data-copy-target');
+              var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
+              if (codeEl && navigator.clipboard) {
+                navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
+                  btn.textContent = 'Copied!';
+                  setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+                });
+              }
+            });
+          });
+        } else if (isStreaming) {
+          el.innerHTML =
+            '<span style="color:#666;font-style:italic">Thinking\u2026</span>' +
+            '<span class="cumulus-cursor"></span>';
+        }
+        return el;
+      }
+
+      function renderMessages() {
+        messagesEl.innerHTML = '';
+        if (messages.length === 0 && !streaming) {
+          messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+          return;
+        }
+        for (var i = 0; i < messages.length; i++) {
+          var msg = messages[i];
+          var row = document.createElement('div');
+          row.className = 'cumulus-msg-row';
+          if (msg.role === 'user') {
+            row.appendChild(buildUserMsgEl(msg));
+          } else {
+            row.appendChild(buildAssistantMsgEl(msg.content, false));
+          }
+          messagesEl.appendChild(row);
+        }
+        if (streaming) {
+          var row = document.createElement('div');
+          row.className = 'cumulus-msg-row';
+          row.appendChild(buildAssistantMsgEl(streamBuffer, true));
+          messagesEl.appendChild(row);
+        }
+        scrollToBottom();
+      }
+
+      function updateSendBtn() {
+        if (streaming) {
+          sendBtn.textContent = 'Stop';
+          sendBtn.classList.add('stop');
+          sendBtn.disabled = false;
+        } else {
+          sendBtn.textContent = 'Send';
+          sendBtn.classList.remove('stop');
+          sendBtn.disabled = false;
+        }
+      }
+
+      function updateStatus(status) {
+        connectionStatus = status;
+        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);
+      }
+
+      function renderAttachStrip() {
+        attachStrip.innerHTML = '';
+        if (pendingAttachments.length === 0) {
+          attachStrip.style.display = 'none';
+          return;
+        }
+        attachStrip.style.display = 'flex';
+        pendingAttachments.forEach(function (att, idx) {
+          var chip = document.createElement('div');
+          chip.className = 'cumulus-attach-chip';
+          chip.setAttribute('data-testid', 'webchat-attach-chip');
+          if (att.isImage) {
+            var thumb = document.createElement('img');
+            thumb.className = 'cumulus-attach-chip-thumb';
+            thumb.src = att.dataUrl;
+            thumb.alt = att.name;
+            chip.appendChild(thumb);
+          } else {
+            var icon = document.createElement('div');
+            icon.className = 'cumulus-attach-chip-icon';
+            icon.textContent = fileExtension(att.name);
+            chip.appendChild(icon);
+          }
+          var nameEl = document.createElement('div');
+          nameEl.className = 'cumulus-attach-chip-name';
+          nameEl.textContent = att.name;
+          chip.appendChild(nameEl);
+          var removeBtn = document.createElement('button');
+          removeBtn.className = 'cumulus-attach-chip-remove';
+          removeBtn.setAttribute('data-testid', 'webchat-attach-remove');
+          removeBtn.textContent = '\xD7';
+          removeBtn.setAttribute('title', 'Remove attachment');
+          (function (index) {
+            removeBtn.addEventListener('click', function () {
+              pendingAttachments.splice(index, 1);
+              renderAttachStrip();
+            });
+          })(idx);
+          chip.appendChild(removeBtn);
+          attachStrip.appendChild(chip);
+        });
+      }
+
+      async function addFilesToPending(files) {
+        for (var i = 0; i < files.length; i++) {
+          var file = files[i];
+          try {
+            var info = await readFileAsBase64(file);
+            var dataUrl = await readFileAsDataUrl(file);
+            pendingAttachments.push({
+              base64: info.base64,
+              mimeType: info.mimeType,
+              name: file.name,
+              dataUrl: dataUrl,
+              isImage: file.type.startsWith('image/'),
+            });
+          } catch (e) {
+            console.error('[Cumulus] Failed to read file:', file.name, e);
+          }
+        }
+        renderAttachStrip();
+      }
+
+      function handleServerMessage(data) {
+        switch (data.type) {
+          case 'auth_ok':
+            showChatView();
+            break;
+          case 'auth_error':
+            console.error('[Cumulus] Auth failed:', data.error);
+            break;
+          case 'history':
+            if (data.messages && data.messages.length > 0) {
+              messages = data.messages.map(function (m) {
+                return { role: m.role, content: m.content };
+              });
+              renderMessages();
+            }
+            break;
+          case 'token':
+            if (stopRequested) break;
+            if (!streaming) {
+              streaming = true;
+              streamBuffer = '';
+              updateSendBtn();
+            }
+            streamBuffer += data.text;
+            renderMessages();
+            break;
+          case 'segment':
+            break;
+          case 'done':
+            if (stopRequested) {
+              stopRequested = false;
+              streaming = false;
+              if (streamBuffer) {
+                messages.push({ role: 'assistant', content: streamBuffer });
+              }
+              streamBuffer = '';
+              updateSendBtn();
+              renderMessages();
+              break;
+            }
+            streaming = false;
+            messages.push({ role: 'assistant', content: data.response || streamBuffer });
+            streamBuffer = '';
+            updateSendBtn();
+            renderMessages();
+            break;
+          case 'error':
+            stopRequested = false;
+            streaming = false;
+            if (streamBuffer) {
+              messages.push({ role: 'assistant', content: streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
+            } else {
+              messages.push({ role: 'assistant', content: '[Error: ' + (data.error || 'Unknown error') + ']' });
+            }
+            streamBuffer = '';
+            updateSendBtn();
+            renderMessages();
+            break;
+        }
+      }
+
+      function sendMessage() {
+        if (streaming) {
+          stopRequested = true;
+          streaming = false;
+          updateSendBtn();
+          if (streamBuffer) {
+            messages.push({ role: 'assistant', content: streamBuffer + ' [stopped]' });
+            streamBuffer = '';
+          }
+          renderMessages();
+          return;
+        }
+        var text = input.value.trim();
+        if (!text && pendingAttachments.length === 0) return;
+        if (!connection) return;
+        var attachSnapshot = pendingAttachments.slice();
+        var displayText = text || '(attachment)';
+        messages.push({ role: 'user', content: displayText, attachments: attachSnapshot });
+        input.value = '';
+        input.style.height = 'auto';
+        pendingAttachments = [];
+        renderAttachStrip();
+        streaming = true;
+        stopRequested = false;
+        streamBuffer = '';
+        updateSendBtn();
+        renderMessages();
+        var imagePayload = attachSnapshot
+          .filter(function (a) { return a.isImage; })
+          .map(function (a) { return { mimeType: a.mimeType, base64: a.base64 }; });
+        var payload = {
+          type: 'message',
+          threadName: sessionId,
+          message: text || ' ',
+        };
+        if (imagePayload.length > 0) payload.images = imagePayload;
+        connection.send(payload);
+      }
+
+      // ── Event listeners ──
+      sendBtn.addEventListener('click', sendMessage);
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage();
+        }
+      });
+      input.addEventListener('input', function () {
+        input.style.height = 'auto';
+        input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+      });
+      input.addEventListener('paste', function (e) {
+        var items = e.clipboardData && e.clipboardData.items;
+        if (!items) return;
+        var filesToAdd = [];
+        for (var i = 0; i < items.length; i++) {
+          var item = items[i];
+          if (item.kind === 'file') {
+            var file = item.getAsFile();
+            if (file) filesToAdd.push(file);
+          }
+        }
+        if (filesToAdd.length > 0) {
+          e.preventDefault();
+          addFilesToPending(filesToAdd);
+        }
+      });
+      fileInput.addEventListener('change', function () {
+        if (fileInput.files && fileInput.files.length > 0) {
+          addFilesToPending(Array.from(fileInput.files));
+          fileInput.value = '';
+        }
+      });
+      attachBtn.addEventListener('click', function () {
+        fileInput.click();
+      });
+
+      bubble.addEventListener('click', function () {
+        var showing = panel.style.display !== 'none';
+        panel.style.display = showing ? 'none' : 'flex';
+        if (!showing && !connection) {
+          startConnection();
+        }
+        if (!showing) {
+          input.focus();
+          scrollToBottom();
+        }
+      });
+
+      var closeBtn = panel.querySelector('.cumulus-close-btn');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function () {
+          panel.style.display = 'none';
+        });
+      }
+
+      // Embedded mode: no auth panel handling needed (API key from attribute)
+      function startConnection() {
+        if (connection) { connection.close(); connection = null; }
+        connection = createConnection({
+          wsUrl: wsUrl,
+          apiKey: activeApiKey,
+          sessionId: sessionId,
+          onMessage: handleServerMessage,
+          onStatus: updateStatus,
+        });
+      }
+
+      function mount(target) {
+        (target || document.body).appendChild(container);
+        // Embedded: connect on first open (bubble click), not eagerly
+      }
+
+      function destroy() {
+        if (connection) connection.close();
+        container.remove();
+      }
+
+      return { mount: mount, destroy: destroy, send: sendMessage };
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════════
+    // STANDALONE MODE — sidebar + multi-panel layout
+    // ═══════════════════════════════════════════════════════════════════════════
 
-    // ── Header ──
-    var header = document.createElement('div');
-    header.className = 'cumulus-header';
-    header.innerHTML =
+    // ── Standalone state ──
+    var connection = null;
+    var connectionStatus = 'disconnected';
+    var authenticated = false;
+
+    // Thread registry: threadName -> { messages, streaming, streamBuffer, stopRequested, pendingAttachments }
+    var threadStates = {};
+
+    // Thread list from server: [{ name, messageCount, lastActivity }]
+    var allThreads = [];
+
+    // Currently visible panel names (ordered, max 3)
+    var visibleThreads = [];
+
+    // Periodic refresh timer
+    var refreshTimer = null;
+
+    // ── Helper: get or create per-thread state ──
+    function getThreadState(threadName) {
+      if (!threadStates[threadName]) {
+        threadStates[threadName] = {
+          messages: [],
+          streaming: false,
+          streamBuffer: '',
+          stopRequested: false,
+          pendingAttachments: [],
+          historyLoaded: false,
+        };
+      }
+      return threadStates[threadName];
+    }
+
+    // ── Root layout ──
+    var standaloneRoot = document.createElement('div');
+    standaloneRoot.className = 'cumulus-standalone-root';
+
+    // ── Outer wrapper (auth view or app view) ──
+    // Auth panel — shown before connection
+    var authWrapper = document.createElement('div');
+    authWrapper.className = 'cumulus-panel standalone';
+    authWrapper.setAttribute('data-testid', 'webchat-panel');
+    authWrapper.style.display = 'flex';
+
+    // Auth header
+    var authHeader = document.createElement('div');
+    authHeader.className = 'cumulus-header';
+    authHeader.innerHTML =
       '<span class="cumulus-header-title">Cumulus</span>' +
       '<span class="cumulus-header-status">' +
         '<span class="cumulus-status-dot" data-testid="webchat-status-dot"></span>' +
         '<span data-testid="webchat-status-text">Disconnected</span>' +
-      '</span>' +
-      (standalone
-        ? '<button class="cumulus-auth-logout" data-testid="webchat-logout" style="display:none">Logout</button>'
-        : '<button class="cumulus-close-btn" data-testid="webchat-close">&times;</button>');
-    panel.appendChild(header);
+      '</span>';
+    authWrapper.appendChild(authHeader);
 
-    // ── Auth panel ──
     var authPanel = document.createElement('div');
     authPanel.className = 'cumulus-auth';
     authPanel.setAttribute('data-testid', 'webchat-auth');
@@ -821,492 +1487,834 @@
       '<input class="cumulus-auth-input" data-testid="webchat-auth-input" type="password" placeholder="sk-cumulus-..." autocomplete="off" />' +
       '<button class="cumulus-auth-btn" data-testid="webchat-auth-submit">Connect</button>' +
       '<div class="cumulus-auth-error" data-testid="webchat-auth-error"></div>';
-    panel.appendChild(authPanel);
-
-    // ── Messages area ──
-    var messagesEl = document.createElement('div');
-    messagesEl.className = 'cumulus-messages';
-    messagesEl.setAttribute('data-testid', 'webchat-messages');
-    messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
-    messagesEl.style.display = 'none';
-    panel.appendChild(messagesEl);
-
-    // ── Input area ──
-    var inputArea = document.createElement('div');
-    inputArea.className = 'cumulus-input-area';
-    inputArea.style.display = 'none';
-
-    // Attachment strip (conditionally shown)
-    var attachStrip = document.createElement('div');
-    attachStrip.className = 'cumulus-attach-strip';
-    attachStrip.setAttribute('data-testid', 'webchat-attach-strip');
-    attachStrip.style.display = 'none';
-    inputArea.appendChild(attachStrip);
-
-    // Input row
-    var inputRow = document.createElement('div');
-    inputRow.className = 'cumulus-input-row';
-
-    // Hidden file input
-    var fileInput = document.createElement('input');
-    fileInput.type = 'file';
-    fileInput.multiple = true;
-    fileInput.accept = 'image/*,.pdf,.txt,.md,.js,.ts,.py,.json,.csv';
-    fileInput.style.display = 'none';
-    fileInput.setAttribute('data-testid', 'webchat-file-input');
-
-    // Attach button
-    var attachBtn = document.createElement('button');
-    attachBtn.className = 'cumulus-attach-btn';
-    attachBtn.setAttribute('data-testid', 'webchat-attach-btn');
-    attachBtn.setAttribute('title', 'Attach files');
-    attachBtn.textContent = '+';
-
-    // Textarea
-    var input = document.createElement('textarea');
-    input.className = 'cumulus-input';
-    input.setAttribute('data-testid', 'webchat-input');
-    input.placeholder = 'Type a message…';
-    input.rows = 1;
-
-    // Send/Stop button
-    var sendBtn = document.createElement('button');
-    sendBtn.className = 'cumulus-send-btn';
-    sendBtn.setAttribute('data-testid', 'webchat-send');
-    sendBtn.textContent = 'Send';
-
-    inputRow.appendChild(fileInput);
-    inputRow.appendChild(attachBtn);
-    inputRow.appendChild(input);
-    inputRow.appendChild(sendBtn);
-    inputArea.appendChild(inputRow);
-    panel.appendChild(inputArea);
-
-    container.appendChild(panel);
-
-    // ── Floating bubble (embedded mode only) ──
-    var bubble = null;
-    if (!standalone) {
-      bubble = document.createElement('button');
-      bubble.className = 'cumulus-bubble';
-      bubble.setAttribute('data-testid', 'webchat-bubble');
-      bubble.setAttribute('title', 'Open chat');
-      bubble.innerHTML =
-        '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
-      container.appendChild(bubble);
+    authWrapper.appendChild(authPanel);
+
+    // App layout — shown after auth
+    var appLayout = document.createElement('div');
+    appLayout.style.cssText = 'display:none; flex-direction:column; width:100%; height:100vh; overflow:hidden;';
+
+    // Top bar
+    var topbar = document.createElement('div');
+    topbar.className = 'cumulus-topbar';
+    topbar.innerHTML =
+      '<span class="cumulus-topbar-title">Cumulus</span>' +
+      '<div class="cumulus-topbar-right">' +
+        '<span class="cumulus-header-status">' +
+          '<span class="cumulus-status-dot" data-testid="webchat-status-dot-app"></span>' +
+          '<span data-testid="webchat-status-text-app">Disconnected</span>' +
+        '</span>' +
+        '<button class="cumulus-auth-logout" data-testid="webchat-logout">Logout</button>' +
+      '</div>';
+    appLayout.appendChild(topbar);
+
+    // Sidebar + content row
+    var appRow = document.createElement('div');
+    appRow.style.cssText = 'display:flex; flex-direction:row; flex:1; overflow:hidden;';
+
+    // ── Sidebar ──
+    var sidebar = document.createElement('div');
+    sidebar.className = 'cumulus-sidebar';
+    sidebar.setAttribute('data-testid', 'webchat-sidebar');
+
+    // Sidebar header
+    var sidebarHeader = document.createElement('div');
+    sidebarHeader.className = 'cumulus-sidebar-header';
+    sidebarHeader.innerHTML = '<span class="cumulus-sidebar-title">Threads</span>';
+    sidebar.appendChild(sidebarHeader);
+
+    // Sidebar scroll area
+    var sidebarScroll = document.createElement('div');
+    sidebarScroll.className = 'cumulus-sidebar-scroll';
+    sidebar.appendChild(sidebarScroll);
+
+    // Sidebar footer with + New button
+    var sidebarFooter = document.createElement('div');
+    sidebarFooter.className = 'cumulus-sidebar-footer';
+
+    var newThreadBtn = document.createElement('button');
+    newThreadBtn.className = 'cumulus-new-thread-btn';
+    newThreadBtn.setAttribute('data-testid', 'webchat-thread-new');
+    newThreadBtn.textContent = '+ New thread';
+
+    var newThreadInput = document.createElement('input');
+    newThreadInput.className = 'cumulus-new-thread-input';
+    newThreadInput.setAttribute('data-testid', 'webchat-thread-new-input');
+    newThreadInput.placeholder = 'Thread name\u2026';
+    newThreadInput.style.display = 'none';
+
+    sidebarFooter.appendChild(newThreadBtn);
+    sidebarFooter.appendChild(newThreadInput);
+    sidebar.appendChild(sidebarFooter);
+
+    // ── Content area ──
+    var contentArea = document.createElement('div');
+    contentArea.className = 'cumulus-content-area';
+
+    appRow.appendChild(sidebar);
+    appRow.appendChild(contentArea);
+    appLayout.appendChild(appRow);
+
+    standaloneRoot.appendChild(authWrapper);
+    standaloneRoot.appendChild(appLayout);
+    container.appendChild(standaloneRoot);
+
+    // ── Status update (updates both auth-phase and app-phase dots) ──
+    function updateStatus(status) {
+      connectionStatus = status;
+      // 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);
+      // 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);
     }
 
     // ── View switching ──
     function showAuthView() {
       authenticated = false;
-      authPanel.style.display = 'flex';
-      messagesEl.style.display = 'none';
-      inputArea.style.display = 'none';
-      var logoutBtn = panel.querySelector('[data-testid="webchat-logout"]');
-      if (logoutBtn) logoutBtn.style.display = 'none';
+      authWrapper.style.display = 'flex';
+      appLayout.style.display = 'none';
+      visibleThreads = [];
+      threadStates = {};
+      allThreads = [];
+      if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
       var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
       if (errEl) errEl.textContent = '';
     }
 
-    function showChatView() {
+    function showAppView() {
       authenticated = true;
-      authPanel.style.display = 'none';
-      messagesEl.style.display = 'flex';
-      inputArea.style.display = 'flex';
-      var logoutBtn = panel.querySelector('[data-testid="webchat-logout"]');
-      if (logoutBtn) logoutBtn.style.display = 'inline-block';
-      input.focus();
+      authWrapper.style.display = 'none';
+      appLayout.style.display = 'flex';
+      // Request thread list from server
+      requestThreadList();
+      // Periodic refresh every 30s
+      if (refreshTimer) clearInterval(refreshTimer);
+      refreshTimer = setInterval(requestThreadList, 30000);
     }
 
-    // ── Rendering ──
-    function scrollToBottom() {
-      messagesEl.scrollTop = messagesEl.scrollHeight;
+    // ── Thread list ──
+    function requestThreadList() {
+      if (connection) {
+        connection.send({ type: 'threads' });
+      }
     }
 
-    function isWideUserMessage(content) {
-      // Wide if it contains a code fence or has more than 3 lines
-      if (/```/.test(content)) return true;
-      var lineCount = (content.match(/\n/g) || []).length + 1;
-      return lineCount > 3;
-    }
+    // ── Sidebar rendering ──
+    function renderSidebar() {
+      sidebarScroll.innerHTML = '';
 
-    function buildUserMsgEl(msg) {
-      var el = document.createElement('div');
-      el.className = 'cumulus-msg user' + (isWideUserMessage(msg.content) ? ' wide' : '');
-      el.textContent = msg.content;
+      var visibleSet = {};
+      for (var i = 0; i < visibleThreads.length; i++) {
+        visibleSet[visibleThreads[i]] = true;
+      }
 
-      if (msg.attachments && msg.attachments.length > 0) {
-        var attRow = document.createElement('div');
-        attRow.className = 'cumulus-msg-attachments';
-        msg.attachments.forEach(function (att) {
-          if (att.isImage) {
-            var img = document.createElement('img');
-            img.className = 'cumulus-msg-img';
-            img.src = att.dataUrl;
-            img.alt = att.name;
-            img.setAttribute('data-testid', 'webchat-msg-img');
-            attRow.appendChild(img);
-          } else {
-            var badge = document.createElement('span');
-            badge.className = 'cumulus-msg-file-badge';
-            badge.setAttribute('data-testid', 'webchat-msg-file');
-            badge.textContent = '\uD83D\uDCCE ' + att.name; // 📎
-            attRow.appendChild(badge);
-          }
+      // Active section: threads currently visible as panels
+      var activeThreads = visibleThreads.slice(); // preserve order
+      if (activeThreads.length > 0) {
+        var activeLabel = document.createElement('div');
+        activeLabel.className = 'cumulus-sidebar-section-label';
+        activeLabel.textContent = 'Active';
+        sidebarScroll.appendChild(activeLabel);
+
+        var activeSection = document.createElement('div');
+        activeSection.setAttribute('data-testid', 'webchat-sidebar-active');
+        activeThreads.forEach(function (name) {
+          activeSection.appendChild(buildThreadItem(name, true, true));
         });
-        el.appendChild(attRow);
+        sidebarScroll.appendChild(activeSection);
+
+        var divider = document.createElement('hr');
+        divider.className = 'cumulus-sidebar-divider';
+        sidebarScroll.appendChild(divider);
       }
-      return el;
-    }
 
-    function buildAssistantMsgEl(content, isStreaming) {
-      var el = document.createElement('div');
-      el.className = 'cumulus-msg assistant';
-      if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
-      if (content) {
-        el.innerHTML = renderMarkdown(content);
-        if (isStreaming) {
-          el.innerHTML += '<span class="cumulus-cursor"></span>';
-        }
-        // Wire up copy buttons
-        el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
-          btn.addEventListener('click', function () {
-            var targetId = btn.getAttribute('data-copy-target');
-            var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
-            if (codeEl && navigator.clipboard) {
-              navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
-                btn.textContent = 'Copied!';
-                setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
-              });
-            }
-          });
+      // All section: all threads from server, sorted by lastActivity desc
+      var allLabel = document.createElement('div');
+      allLabel.className = 'cumulus-sidebar-section-label';
+      allLabel.textContent = 'All';
+      sidebarScroll.appendChild(allLabel);
+
+      var allSection = document.createElement('div');
+      allSection.setAttribute('data-testid', 'webchat-sidebar-all');
+
+      if (allThreads.length === 0) {
+        var emptyNote = document.createElement('div');
+        emptyNote.style.cssText = 'padding: 8px 12px; font-size: 12px; color: #555; font-style: italic;';
+        emptyNote.textContent = 'No threads yet';
+        allSection.appendChild(emptyNote);
+      } else {
+        // Sort by lastActivity descending
+        var sorted = allThreads.slice().sort(function (a, b) {
+          return (b.lastActivity || 0) - (a.lastActivity || 0);
+        });
+        sorted.forEach(function (t) {
+          allSection.appendChild(buildThreadItem(t.name, visibleSet[t.name] || false, false, t.messageCount));
         });
-      } else if (isStreaming) {
-        el.innerHTML =
-          '<span style="color:#666;font-style:italic">Thinking\u2026</span>' +
-          '<span class="cumulus-cursor"></span>';
       }
-      return el;
+      sidebarScroll.appendChild(allSection);
     }
 
-    function renderMessages() {
-      messagesEl.innerHTML = '';
-
-      if (messages.length === 0 && !streaming) {
-        messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
-        return;
+    function buildThreadItem(name, isSelected, isActive, messageCount) {
+      var item = document.createElement('div');
+      item.className = 'cumulus-thread-item' + (isSelected ? ' selected' : '');
+      item.setAttribute('data-testid', 'webchat-thread-item');
+      item.setAttribute('data-thread-name', name);
+
+      var dot = document.createElement('span');
+      dot.className = 'cumulus-thread-dot ' + (isActive ? 'active' : 'inactive');
+      item.appendChild(dot);
+
+      var nameEl = document.createElement('span');
+      nameEl.className = 'cumulus-thread-name';
+      nameEl.textContent = name;
+      nameEl.setAttribute('title', name);
+      item.appendChild(nameEl);
+
+      if (messageCount !== undefined && messageCount !== null) {
+        var countEl = document.createElement('span');
+        countEl.className = 'cumulus-thread-count';
+        countEl.textContent = messageCount;
+        item.appendChild(countEl);
       }
 
-      for (var i = 0; i < messages.length; i++) {
-        var msg = messages[i];
-        var row = document.createElement('div');
-        row.className = 'cumulus-msg-row';
-
-        if (msg.role === 'user') {
-          row.appendChild(buildUserMsgEl(msg));
+      item.addEventListener('click', function (e) {
+        var multiSelect = e.metaKey || e.ctrlKey;
+        if (multiSelect) {
+          togglePanelThread(name);
         } else {
-          row.appendChild(buildAssistantMsgEl(msg.content, false));
+          soloThread(name);
         }
-        messagesEl.appendChild(row);
-      }
+      });
 
-      if (streaming) {
-        var row = document.createElement('div');
-        row.className = 'cumulus-msg-row';
-        row.appendChild(buildAssistantMsgEl(streamBuffer, true));
-        messagesEl.appendChild(row);
-      }
+      return item;
+    }
 
-      scrollToBottom();
+    // ── Panel management ──
+    function soloThread(name) {
+      visibleThreads = [name];
+      renderSidebar();
+      renderContentArea();
+      loadThreadHistoryIfNeeded(name);
     }
 
-    function updateSendBtn() {
-      if (streaming) {
-        sendBtn.textContent = 'Stop';
-        sendBtn.classList.add('stop');
-        sendBtn.disabled = false;
+    function togglePanelThread(name) {
+      var idx = visibleThreads.indexOf(name);
+      if (idx !== -1) {
+        // Remove from visible
+        visibleThreads.splice(idx, 1);
       } else {
-        sendBtn.textContent = 'Send';
-        sendBtn.classList.remove('stop');
-        sendBtn.disabled = false;
+        // Add if under max
+        if (visibleThreads.length < 3) {
+          visibleThreads.push(name);
+        }
+        // If already at max 3, replace the last one
+        else {
+          visibleThreads[visibleThreads.length - 1] = name;
+        }
+      }
+      renderSidebar();
+      renderContentArea();
+      if (idx === -1) {
+        loadThreadHistoryIfNeeded(name);
       }
     }
 
-    function updateStatus(status) {
-      connectionStatus = status;
-      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);
+    function removeThreadFromView(name) {
+      var idx = visibleThreads.indexOf(name);
+      if (idx !== -1) {
+        visibleThreads.splice(idx, 1);
+        // Clear stale DOM render hooks so background messages don't update detached nodes
+        var state = threadStates[name];
+        if (state) { state._renderMessages = null; state._updateSendBtn = null; }
+        renderSidebar();
+        renderContentArea();
+      }
     }
 
-    // ── Attachment strip ──
-    function renderAttachStrip() {
-      attachStrip.innerHTML = '';
-      if (pendingAttachments.length === 0) {
-        attachStrip.style.display = 'none';
+    function loadThreadHistoryIfNeeded(name) {
+      var state = getThreadState(name);
+      if (!state.historyLoaded && connection) {
+        state.historyLoaded = true;
+        connection.send({ type: 'history', threadName: name, limit: 50 });
+      }
+    }
+
+    // ── Content area rendering ──
+    function renderContentArea() {
+      // Clear stale render hooks before wiping the DOM
+      for (var _ci = 0; _ci < visibleThreads.length; _ci++) {
+        var _cs = threadStates[visibleThreads[_ci]];
+        if (_cs) { _cs._renderMessages = null; _cs._updateSendBtn = null; }
+      }
+      contentArea.innerHTML = '';
+
+      if (visibleThreads.length === 0) {
+        var emptyEl = document.createElement('div');
+        emptyEl.className = 'cumulus-standalone-empty';
+        emptyEl.innerHTML =
+          '<div>Select a thread from the sidebar or create a new one</div>' +
+          '<div class="cumulus-standalone-empty-hint">Cmd/Ctrl+Click to open multiple threads side by side</div>';
+        contentArea.appendChild(emptyEl);
         return;
       }
-      attachStrip.style.display = 'flex';
-      pendingAttachments.forEach(function (att, idx) {
-        var chip = document.createElement('div');
-        chip.className = 'cumulus-attach-chip';
-        chip.setAttribute('data-testid', 'webchat-attach-chip');
-
-        if (att.isImage) {
-          var thumb = document.createElement('img');
-          thumb.className = 'cumulus-attach-chip-thumb';
-          thumb.src = att.dataUrl;
-          thumb.alt = att.name;
-          chip.appendChild(thumb);
-        } else {
-          var icon = document.createElement('div');
-          icon.className = 'cumulus-attach-chip-icon';
-          icon.textContent = fileExtension(att.name);
-          chip.appendChild(icon);
+
+      for (var i = 0; i < visibleThreads.length; i++) {
+        contentArea.appendChild(buildThreadPanel(visibleThreads[i]));
+      }
+    }
+
+    // ── Thread panel builder ──
+    function buildThreadPanel(threadName) {
+      var state = getThreadState(threadName);
+
+      var panel = document.createElement('div');
+      panel.className = 'cumulus-thread-panel';
+      panel.setAttribute('data-testid', 'webchat-panel-' + threadName);
+      panel.setAttribute('data-thread-panel', threadName);
+
+      // Panel header
+      var panelHeader = document.createElement('div');
+      panelHeader.className = 'cumulus-thread-panel-header';
+
+      var titleLeft = document.createElement('div');
+      titleLeft.style.cssText = 'display:flex; align-items:center; gap:7px; overflow:hidden;';
+
+      var statusDot = document.createElement('span');
+      statusDot.className = 'cumulus-status-dot ' + connectionStatus;
+      statusDot.setAttribute('data-thread-status-dot', threadName);
+      titleLeft.appendChild(statusDot);
+
+      var titleEl = document.createElement('span');
+      titleEl.className = 'cumulus-thread-panel-title';
+      titleEl.textContent = threadName;
+      titleEl.setAttribute('title', threadName);
+      titleLeft.appendChild(titleEl);
+
+      panelHeader.appendChild(titleLeft);
+
+      var closeBtn = document.createElement('button');
+      closeBtn.className = 'cumulus-thread-panel-close';
+      closeBtn.setAttribute('data-testid', 'webchat-panel-close');
+      closeBtn.setAttribute('title', 'Close panel');
+      closeBtn.textContent = '\xD7';
+      closeBtn.addEventListener('click', function () {
+        removeThreadFromView(threadName);
+      });
+      panelHeader.appendChild(closeBtn);
+      panel.appendChild(panelHeader);
+
+      // Messages area
+      var messagesEl = document.createElement('div');
+      messagesEl.className = 'cumulus-messages';
+      messagesEl.setAttribute('data-testid', 'webchat-messages');
+      messagesEl.setAttribute('data-thread-messages', threadName);
+      panel.appendChild(messagesEl);
+
+      // Input area
+      var inputArea = document.createElement('div');
+      inputArea.className = 'cumulus-input-area';
+
+      // Attachment strip
+      var attachStrip = document.createElement('div');
+      attachStrip.className = 'cumulus-attach-strip';
+      attachStrip.setAttribute('data-testid', 'webchat-attach-strip');
+      attachStrip.style.display = 'none';
+      inputArea.appendChild(attachStrip);
+
+      // Input row
+      var inputRow = document.createElement('div');
+      inputRow.className = 'cumulus-input-row';
+
+      var fileInput = document.createElement('input');
+      fileInput.type = 'file';
+      fileInput.multiple = true;
+      fileInput.accept = 'image/*,.pdf,.txt,.md,.js,.ts,.py,.json,.csv';
+      fileInput.style.display = 'none';
+      fileInput.setAttribute('data-testid', 'webchat-file-input');
+
+      var attachBtn = document.createElement('button');
+      attachBtn.className = 'cumulus-attach-btn';
+      attachBtn.setAttribute('data-testid', 'webchat-attach-btn');
+      attachBtn.setAttribute('title', 'Attach files');
+      attachBtn.textContent = '+';
+
+      var inputEl = document.createElement('textarea');
+      inputEl.className = 'cumulus-input';
+      inputEl.setAttribute('data-testid', 'webchat-input');
+      inputEl.placeholder = 'Message ' + threadName + '\u2026';
+      inputEl.rows = 1;
+
+      var sendBtn = document.createElement('button');
+      sendBtn.className = 'cumulus-send-btn';
+      sendBtn.setAttribute('data-testid', 'webchat-send');
+      sendBtn.textContent = 'Send';
+
+      inputRow.appendChild(fileInput);
+      inputRow.appendChild(attachBtn);
+      inputRow.appendChild(inputEl);
+      inputRow.appendChild(sendBtn);
+      inputArea.appendChild(inputRow);
+      panel.appendChild(inputArea);
+
+      // ── Panel-local render functions ──
+      function scrollToBottom() {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+      }
+
+      function isWideUserMessage(content) {
+        if (/```/.test(content)) return true;
+        var lineCount = (content.match(/\n/g) || []).length + 1;
+        return lineCount > 3;
+      }
+
+      function buildUserMsgEl(msg) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg user' + (isWideUserMessage(msg.content) ? ' wide' : '');
+        el.textContent = msg.content;
+        if (msg.attachments && msg.attachments.length > 0) {
+          var attRow = document.createElement('div');
+          attRow.className = 'cumulus-msg-attachments';
+          msg.attachments.forEach(function (att) {
+            if (att.isImage) {
+              var img = document.createElement('img');
+              img.className = 'cumulus-msg-img';
+              img.src = att.dataUrl;
+              img.alt = att.name;
+              img.setAttribute('data-testid', 'webchat-msg-img');
+              attRow.appendChild(img);
+            } else {
+              var badge = document.createElement('span');
+              badge.className = 'cumulus-msg-file-badge';
+              badge.setAttribute('data-testid', 'webchat-msg-file');
+              badge.textContent = '\uD83D\uDCCE ' + att.name;
+              attRow.appendChild(badge);
+            }
+          });
+          el.appendChild(attRow);
         }
+        return el;
+      }
 
-        var nameEl = document.createElement('div');
-        nameEl.className = 'cumulus-attach-chip-name';
-        nameEl.textContent = att.name;
-        chip.appendChild(nameEl);
-
-        var removeBtn = document.createElement('button');
-        removeBtn.className = 'cumulus-attach-chip-remove';
-        removeBtn.setAttribute('data-testid', 'webchat-attach-remove');
-        removeBtn.textContent = '\xD7'; // ×
-        removeBtn.setAttribute('title', 'Remove attachment');
-        (function (index) {
-          removeBtn.addEventListener('click', function () {
-            pendingAttachments.splice(index, 1);
-            renderAttachStrip();
+      function buildAssistantMsgEl(content, isStreaming) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg assistant';
+        if (isStreaming) el.setAttribute('data-testid', 'webchat-streaming');
+        if (content) {
+          el.innerHTML = renderMarkdown(content);
+          if (isStreaming) {
+            el.innerHTML += '<span class="cumulus-cursor"></span>';
+          }
+          el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
+            btn.addEventListener('click', function () {
+              var targetId = btn.getAttribute('data-copy-target');
+              var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
+              if (codeEl && navigator.clipboard) {
+                navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
+                  btn.textContent = 'Copied!';
+                  setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+                });
+              }
+            });
           });
-        })(idx);
+        } else if (isStreaming) {
+          el.innerHTML =
+            '<span style="color:#666;font-style:italic">Thinking\u2026</span>' +
+            '<span class="cumulus-cursor"></span>';
+        }
+        return el;
+      }
+
+      function renderPanelMessages() {
+        messagesEl.innerHTML = '';
+        if (state.messages.length === 0 && !state.streaming) {
+          messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+          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';
+          if (msg.role === 'user') {
+            row.appendChild(buildUserMsgEl(msg));
+          } else {
+            row.appendChild(buildAssistantMsgEl(msg.content, false));
+          }
+          messagesEl.appendChild(row);
+        }
+        if (state.streaming) {
+          var row = document.createElement('div');
+          row.className = 'cumulus-msg-row';
+          row.appendChild(buildAssistantMsgEl(state.streamBuffer, true));
+          messagesEl.appendChild(row);
+        }
+        scrollToBottom();
+      }
+
+      function updatePanelSendBtn() {
+        if (state.streaming) {
+          sendBtn.textContent = 'Stop';
+          sendBtn.classList.add('stop');
+          sendBtn.disabled = false;
+        } else {
+          sendBtn.textContent = 'Send';
+          sendBtn.classList.remove('stop');
+          sendBtn.disabled = false;
+        }
+      }
+
+      function renderPanelAttachStrip() {
+        attachStrip.innerHTML = '';
+        if (state.pendingAttachments.length === 0) {
+          attachStrip.style.display = 'none';
+          return;
+        }
+        attachStrip.style.display = 'flex';
+        state.pendingAttachments.forEach(function (att, idx) {
+          var chip = document.createElement('div');
+          chip.className = 'cumulus-attach-chip';
+          chip.setAttribute('data-testid', 'webchat-attach-chip');
+          if (att.isImage) {
+            var thumb = document.createElement('img');
+            thumb.className = 'cumulus-attach-chip-thumb';
+            thumb.src = att.dataUrl;
+            thumb.alt = att.name;
+            chip.appendChild(thumb);
+          } else {
+            var icon = document.createElement('div');
+            icon.className = 'cumulus-attach-chip-icon';
+            icon.textContent = fileExtension(att.name);
+            chip.appendChild(icon);
+          }
+          var nameEl = document.createElement('div');
+          nameEl.className = 'cumulus-attach-chip-name';
+          nameEl.textContent = att.name;
+          chip.appendChild(nameEl);
+          var removeBtn = document.createElement('button');
+          removeBtn.className = 'cumulus-attach-chip-remove';
+          removeBtn.setAttribute('data-testid', 'webchat-attach-remove');
+          removeBtn.textContent = '\xD7';
+          removeBtn.setAttribute('title', 'Remove attachment');
+          (function (index) {
+            removeBtn.addEventListener('click', function () {
+              state.pendingAttachments.splice(index, 1);
+              renderPanelAttachStrip();
+            });
+          })(idx);
+          chip.appendChild(removeBtn);
+          attachStrip.appendChild(chip);
+        });
+      }
+
+      async function addFilesToPending(files) {
+        for (var i = 0; i < files.length; i++) {
+          var file = files[i];
+          try {
+            var info = await readFileAsBase64(file);
+            var dataUrl = await readFileAsDataUrl(file);
+            state.pendingAttachments.push({
+              base64: info.base64,
+              mimeType: info.mimeType,
+              name: file.name,
+              dataUrl: dataUrl,
+              isImage: file.type.startsWith('image/'),
+            });
+          } catch (e) {
+            console.error('[Cumulus] Failed to read file:', file.name, e);
+          }
+        }
+        renderPanelAttachStrip();
+      }
+
+      // Store references on the state so the router can call re-render
+      state._renderMessages = renderPanelMessages;
+      state._updateSendBtn = updatePanelSendBtn;
+
+      // ── Send message for this panel ──
+      function sendPanelMessage() {
+        if (state.streaming) {
+          state.stopRequested = true;
+          state.streaming = false;
+          updatePanelSendBtn();
+          if (state.streamBuffer) {
+            state.messages.push({ role: 'assistant', content: state.streamBuffer + ' [stopped]' });
+            state.streamBuffer = '';
+          }
+          renderPanelMessages();
+          return;
+        }
+        var text = inputEl.value.trim();
+        if (!text && state.pendingAttachments.length === 0) return;
+        if (!connection) return;
+
+        var attachSnapshot = state.pendingAttachments.slice();
+        var displayText = text || '(attachment)';
+        state.messages.push({ role: 'user', content: displayText, attachments: attachSnapshot });
+        inputEl.value = '';
+        inputEl.style.height = 'auto';
+        state.pendingAttachments = [];
+        renderPanelAttachStrip();
+        state.streaming = true;
+        state.stopRequested = false;
+        state.streamBuffer = '';
+        updatePanelSendBtn();
+        renderPanelMessages();
+
+        var imagePayload = attachSnapshot
+          .filter(function (a) { return a.isImage; })
+          .map(function (a) { return { mimeType: a.mimeType, base64: a.base64 }; });
+
+        var payload = {
+          type: 'message',
+          threadName: threadName,
+          message: text || ' ',
+        };
+        if (imagePayload.length > 0) payload.images = imagePayload;
+        connection.send(payload);
+      }
+
+      // ── Panel event listeners ──
+      sendBtn.addEventListener('click', sendPanelMessage);
 
-        chip.appendChild(removeBtn);
-        attachStrip.appendChild(chip);
+      inputEl.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendPanelMessage();
+        }
       });
-    }
 
-    async function addFilesToPending(files) {
-      for (var i = 0; i < files.length; i++) {
-        var file = files[i];
-        try {
-          var info = await readFileAsBase64(file);
-          var dataUrl = await readFileAsDataUrl(file);
-          pendingAttachments.push({
-            base64: info.base64,
-            mimeType: info.mimeType,
-            name: file.name,
-            dataUrl: dataUrl,
-            isImage: file.type.startsWith('image/'),
-          });
-        } catch (e) {
-          console.error('[Cumulus] Failed to read file:', file.name, e);
+      inputEl.addEventListener('input', function () {
+        inputEl.style.height = 'auto';
+        inputEl.style.height = Math.min(inputEl.scrollHeight, 120) + 'px';
+      });
+
+      inputEl.addEventListener('paste', function (e) {
+        var items = e.clipboardData && e.clipboardData.items;
+        if (!items) return;
+        var filesToAdd = [];
+        for (var i = 0; i < items.length; i++) {
+          var item = items[i];
+          if (item.kind === 'file') {
+            var file = item.getAsFile();
+            if (file) filesToAdd.push(file);
+          }
+        }
+        if (filesToAdd.length > 0) {
+          e.preventDefault();
+          addFilesToPending(filesToAdd);
+        }
+      });
+
+      fileInput.addEventListener('change', function () {
+        if (fileInput.files && fileInput.files.length > 0) {
+          addFilesToPending(Array.from(fileInput.files));
+          fileInput.value = '';
         }
+      });
+
+      attachBtn.addEventListener('click', function () {
+        fileInput.click();
+      });
+
+      // Initial render
+      renderPanelMessages();
+      renderPanelAttachStrip();
+
+      return panel;
+    }
+
+    // ── Re-render a visible thread panel's messages in-place ──
+    // Called by the message router after state mutation
+    function refreshThreadPanel(threadName) {
+      var state = threadStates[threadName];
+      if (!state) return;
+
+      // Re-render messages in-place if panel is visible
+      if (state._renderMessages) {
+        state._renderMessages();
+      }
+      if (state._updateSendBtn) {
+        state._updateSendBtn();
       }
-      renderAttachStrip();
     }
 
-    // ── Message handling ──
+    // ── Message router ──
     function handleServerMessage(data) {
       switch (data.type) {
         case 'auth_ok':
-          showChatView();
+          showAppView();
           break;
 
         case 'auth_error':
           console.error('[Cumulus] Auth failed:', data.error);
-          if (standalone) {
-            clearStoredApiKey();
-            activeApiKey = '';
-            if (connection) { connection.close(); connection = null; }
-            showAuthView();
-            var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
-            if (errEl) errEl.textContent = 'Authentication failed. Check your API key.';
+          clearStoredApiKey();
+          activeApiKey = '';
+          if (connection) { connection.close(); connection = null; }
+          showAuthView();
+          var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
+          if (errEl) errEl.textContent = 'Authentication failed. Check your API key.';
+          break;
+
+        case 'threads':
+          // Server response to { type: 'threads' } request
+          if (data.threads) {
+            allThreads = data.threads;
+            renderSidebar();
+          }
+          break;
+
+        case 'thread_created':
+          // Server confirms new thread; add to list and select it
+          if (data.threadName) {
+            // Add to allThreads if not already present
+            var exists = false;
+            for (var i = 0; i < allThreads.length; i++) {
+              if (allThreads[i].name === data.threadName) { exists = true; break; }
+            }
+            if (!exists) {
+              allThreads.push({ name: data.threadName, messageCount: 0, lastActivity: Date.now() });
+            }
+            soloThread(data.threadName);
           }
           break;
 
         case 'history':
-          if (data.messages && data.messages.length > 0) {
-            messages = data.messages.map(function (m) {
-              return { role: m.role, content: m.content };
-            });
-            renderMessages();
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            if (data.messages && data.messages.length > 0) {
+              state.messages = data.messages.map(function (m) {
+                return { role: m.role, content: m.content };
+              });
+            }
+            refreshThreadPanel(data.threadName);
           }
           break;
 
         case 'token':
-          if (stopRequested) break; // discard after stop
-          if (!streaming) {
-            streaming = true;
-            streamBuffer = '';
-            updateSendBtn();
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            if (state.stopRequested) break;
+            if (!state.streaming) {
+              state.streaming = true;
+              state.streamBuffer = '';
+            }
+            state.streamBuffer += data.text;
+            // Update lastActivity for this thread in allThreads
+            updateThreadActivity(data.threadName);
+            refreshThreadPanel(data.threadName);
           }
-          streamBuffer += data.text;
-          renderMessages();
           break;
 
         case 'segment':
-          // Tool use/segment info — reserved for future verbose display
+          // Reserved for future verbose display
           break;
 
         case 'done':
-          if (stopRequested) {
-            // Stopped by user — finalize with what we have
-            stopRequested = false;
-            streaming = false;
-            if (streamBuffer) {
-              messages.push({ role: 'assistant', content: streamBuffer });
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            if (state.stopRequested) {
+              state.stopRequested = false;
+              state.streaming = false;
+              if (state.streamBuffer) {
+                state.messages.push({ role: 'assistant', content: state.streamBuffer });
+              }
+              state.streamBuffer = '';
+              updateThreadActivity(data.threadName);
+              refreshThreadPanel(data.threadName);
+              break;
             }
-            streamBuffer = '';
-            updateSendBtn();
-            renderMessages();
-            break;
+            state.streaming = false;
+            state.messages.push({ role: 'assistant', content: data.response || state.streamBuffer });
+            state.streamBuffer = '';
+            updateThreadActivity(data.threadName);
+            refreshThreadPanel(data.threadName);
           }
-          streaming = false;
-          messages.push({ role: 'assistant', content: data.response || streamBuffer });
-          streamBuffer = '';
-          updateSendBtn();
-          renderMessages();
           break;
 
         case 'error':
-          stopRequested = false;
-          streaming = false;
-          if (streamBuffer) {
-            messages.push({ role: 'assistant', content: streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
-          } else {
-            messages.push({ role: 'assistant', content: '[Error: ' + (data.error || 'Unknown error') + ']' });
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            state.stopRequested = false;
+            state.streaming = false;
+            if (state.streamBuffer) {
+              state.messages.push({ role: 'assistant', content: state.streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
+            } else {
+              state.messages.push({ role: 'assistant', content: '[Error: ' + (data.error || 'Unknown error') + ']' });
+            }
+            state.streamBuffer = '';
+            refreshThreadPanel(data.threadName);
           }
-          streamBuffer = '';
-          updateSendBtn();
-          renderMessages();
           break;
       }
     }
 
-    function sendMessage() {
-      // If streaming, treat as Stop
-      if (streaming) {
-        stopRequested = true;
-        streaming = false;
-        updateSendBtn();
-        // Finalize current buffer
-        if (streamBuffer) {
-          messages.push({ role: 'assistant', content: streamBuffer + ' [stopped]' });
-          streamBuffer = '';
+    function updateThreadActivity(threadName) {
+      for (var i = 0; i < allThreads.length; i++) {
+        if (allThreads[i].name === threadName) {
+          allThreads[i].lastActivity = Date.now();
+          break;
         }
-        renderMessages();
-        return;
       }
+      // Re-render sidebar to reflect new sort order / move thread up
+      renderSidebar();
+    }
 
-      var text = input.value.trim();
-      if (!text && pendingAttachments.length === 0) return;
-      if (!connection) return;
-
-      var attachSnapshot = pendingAttachments.slice();
-      var displayText = text || '(attachment)';
-
-      messages.push({ role: 'user', content: displayText, attachments: attachSnapshot });
-      input.value = '';
-      input.style.height = 'auto';
-      pendingAttachments = [];
-      renderAttachStrip();
-      streaming = true;
-      stopRequested = false;
-      streamBuffer = '';
-      updateSendBtn();
-      renderMessages();
-
-      var imagePayload = attachSnapshot
-        .filter(function (a) { return a.isImage; })
-        .map(function (a) { return { mimeType: a.mimeType, base64: a.base64 }; });
-
-      var payload = {
-        type: 'message',
-        threadName: sessionId,
-        message: text || ' ',
-      };
-      if (imagePayload.length > 0) payload.images = imagePayload;
+    // ── New thread creation ──
+    var newThreadCreating = false;
 
-      connection.send(payload);
+    function showNewThreadInput() {
+      if (newThreadCreating) return;
+      newThreadCreating = true;
+      newThreadBtn.style.display = 'none';
+      newThreadInput.style.display = 'block';
+      newThreadInput.value = '';
+      newThreadInput.focus();
     }
 
-    // ── Event listeners ──
-    sendBtn.addEventListener('click', sendMessage);
+    function hideNewThreadInput() {
+      newThreadCreating = false;
+      newThreadBtn.style.display = 'block';
+      newThreadInput.style.display = 'none';
+      newThreadInput.value = '';
+    }
 
-    input.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
+    function submitNewThread() {
+      var name = newThreadInput.value.trim();
+      if (!name) { hideNewThreadInput(); return; }
+      if (connection) {
+        connection.send({ type: 'create_thread', threadName: name });
       }
-    });
-
-    input.addEventListener('input', function () {
-      input.style.height = 'auto';
-      input.style.height = Math.min(input.scrollHeight, 120) + 'px';
-    });
-
-    // Paste handler
-    input.addEventListener('paste', function (e) {
-      var items = e.clipboardData && e.clipboardData.items;
-      if (!items) return;
-
-      var hasNonText = false;
-      var filesToAdd = [];
-      for (var i = 0; i < items.length; i++) {
-        var item = items[i];
-        if (item.kind === 'file') {
-          hasNonText = true;
-          var file = item.getAsFile();
-          if (file) filesToAdd.push(file);
-        }
+      hideNewThreadInput();
+      // Optimistically add and show (server will confirm with thread_created)
+      var exists = false;
+      for (var i = 0; i < allThreads.length; i++) {
+        if (allThreads[i].name === name) { exists = true; break; }
       }
-
-      if (filesToAdd.length > 0) {
-        e.preventDefault(); // prevent default paste of binary data
-        addFilesToPending(filesToAdd);
+      if (!exists) {
+        allThreads.push({ name: name, messageCount: 0, lastActivity: Date.now() });
       }
-      // If only text, let default browser paste behavior handle it
-    });
+      soloThread(name);
+    }
 
-    // File input change
-    fileInput.addEventListener('change', function () {
-      if (fileInput.files && fileInput.files.length > 0) {
-        addFilesToPending(Array.from(fileInput.files));
-        fileInput.value = ''; // reset so same file can be re-added
-      }
-    });
+    newThreadBtn.addEventListener('click', showNewThreadInput);
 
-    // Attach button click
-    attachBtn.addEventListener('click', function () {
-      fileInput.click();
+    newThreadInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); submitNewThread(); }
+      if (e.key === 'Escape') { hideNewThreadInput(); }
     });
 
-    // Bubble toggle (embedded mode)
-    if (bubble) {
-      bubble.addEventListener('click', function () {
-        var showing = panel.style.display !== 'none';
-        panel.style.display = showing ? 'none' : 'flex';
-        if (!showing && !connection) {
-          startConnection();
-        }
-        if (!showing) {
-          input.focus();
-          scrollToBottom();
-        }
-      });
-
-      var closeBtn = panel.querySelector('.cumulus-close-btn');
-      if (closeBtn) {
-        closeBtn.addEventListener('click', function () {
-          panel.style.display = 'none';
-        });
-      }
-    }
+    newThreadInput.addEventListener('blur', function () {
+      // Small delay so click on submit doesn't race with blur
+      setTimeout(function () {
+        if (newThreadCreating) hideNewThreadInput();
+      }, 150);
+    });
 
-    // ── Auth panel events ──
+    // ── Auth events ──
     var authInput = authPanel.querySelector('[data-testid="webchat-auth-input"]');
     var authSubmitBtn = authPanel.querySelector('[data-testid="webchat-auth-submit"]');
 
@@ -1325,20 +2333,13 @@
       if (e.key === 'Enter') { e.preventDefault(); submitAuth(); }
     });
 
-    // Logout (standalone only)
-    var logoutBtn = panel.querySelector('[data-testid="webchat-logout"]');
+    // ── Logout ──
+    var logoutBtn = appLayout.querySelector('[data-testid="webchat-logout"]');
     if (logoutBtn) {
       logoutBtn.addEventListener('click', function () {
         clearStoredApiKey();
         activeApiKey = '';
         if (connection) { connection.close(); connection = null; }
-        messages = [];
-        streaming = false;
-        stopRequested = false;
-        streamBuffer = '';
-        pendingAttachments = [];
-        renderAttachStrip();
-        updateSendBtn();
         showAuthView();
         authInput.value = '';
       });
@@ -1353,28 +2354,28 @@
         sessionId: sessionId,
         onMessage: handleServerMessage,
         onStatus: updateStatus,
+        skipHistory: true, // standalone manages history per-thread
       });
     }
 
     // ── Mount / Destroy ──
     function mount(target) {
       (target || document.body).appendChild(container);
-      if (standalone) {
-        if (activeApiKey) {
-          startConnection();
-        } else {
-          showAuthView();
-          authInput.focus();
-        }
+      if (activeApiKey) {
+        startConnection();
+      } else {
+        showAuthView();
+        authInput.focus();
       }
     }
 
     function destroy() {
       if (connection) connection.close();
+      if (refreshTimer) clearInterval(refreshTimer);
       container.remove();
     }
 
-    return { mount: mount, destroy: destroy, send: sendMessage };
+    return { mount: mount, destroy: destroy };
   }
 
   // ─── Auto-mount ──────────────────────────────────────────────────────────────