@luckydraw/cumulus 0.15.1 → 0.16.0

package/dist/gateway/static/widget.js

@@ -3,29 +3,27 @@
  * Embeddable via <script src="/widget.js" data-api-key="..."></script>
  * or usable standalone at /chat.
  *
- * < 50KB unminified.
+ * < 80KB unminified.
  */
 (function () {
   'use strict';
 
-  // ─── Configuration ──────────────────────────────────────────
-  const script = document.currentScript;
-  const API_KEY = script?.getAttribute('data-api-key') || '';
-  const STANDALONE = script?.getAttribute('data-standalone') === 'true';
-  const WS_URL_OVERRIDE = script?.getAttribute('data-ws-url') || '';
+  // ─── Configuration ──────────────────────────────────────────────────────────
+  var script = document.currentScript;
+  var API_KEY = (script && script.getAttribute('data-api-key')) || '';
+  var STANDALONE = (script && script.getAttribute('data-standalone')) === 'true';
+  var WS_URL_OVERRIDE = (script && script.getAttribute('data-ws-url')) || '';
 
-  // Derive WebSocket URL from script src or page location
   function getWsUrl() {
     if (WS_URL_OVERRIDE) return WS_URL_OVERRIDE;
-    const loc = window.location;
-    const proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
-    return `${proto}//${loc.host}/ws`;
+    var loc = window.location;
+    var proto = loc.protocol === 'https:' ? 'wss:' : 'ws:';
+    return proto + '//' + loc.host + '/ws';
   }
 
-  // Session ID — persisted in localStorage for returning visitors
   function getSessionId() {
-    const key = 'cumulus-session-id';
-    let id = localStorage.getItem(key);
+    var key = 'cumulus-session-id';
+    var id = localStorage.getItem(key);
     if (!id) {
       id = 'web-' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
       localStorage.setItem(key, id);
@@ -33,366 +31,841 @@
     return id;
   }
 
-  // API key — persisted in localStorage for standalone mode
   function getStoredApiKey() {
     return localStorage.getItem('cumulus-api-key') || '';
   }
-  function setStoredApiKey(key) {
-    localStorage.setItem('cumulus-api-key', key);
+  function setStoredApiKey(k) {
+    localStorage.setItem('cumulus-api-key', k);
   }
   function clearStoredApiKey() {
     localStorage.removeItem('cumulus-api-key');
   }
 
-  // ─── Styles ─────────────────────────────────────────────────
-  const STYLES = `
-    .cumulus-widget * { box-sizing: border-box; margin: 0; padding: 0; }
-    .cumulus-widget {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-      line-height: 1.5;
-      color: #e0e0e0;
-    }
-
-    /* Floating bubble (embeddable mode only) */
-    .cumulus-bubble {
-      position: fixed;
-      bottom: 24px;
-      right: 24px;
-      width: 56px;
-      height: 56px;
-      border-radius: 50%;
-      background: #6366f1;
-      border: none;
-      cursor: pointer;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 10000;
-      transition: transform 0.15s ease;
-    }
-    .cumulus-bubble:hover { transform: scale(1.08); }
-    .cumulus-bubble svg { width: 28px; height: 28px; fill: white; }
-
-    /* Panel container */
-    .cumulus-panel {
-      background: #1a1a2e;
-      border: 1px solid #2a2a4a;
-      border-radius: 12px;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-    .cumulus-panel.floating {
-      position: fixed;
-      bottom: 92px;
-      right: 24px;
-      width: 400px;
-      height: 560px;
-      z-index: 10000;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-    }
-    .cumulus-panel.standalone {
-      width: 100%;
-      height: 100vh;
-      border: none;
-      border-radius: 0;
-    }
-
-    /* Header */
-    .cumulus-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 16px;
-      background: #16162b;
-      border-bottom: 1px solid #2a2a4a;
-    }
-    .cumulus-header-title {
-      font-weight: 600;
-      font-size: 15px;
-      color: #f0f0ff;
-    }
-    .cumulus-header-status {
-      font-size: 11px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .cumulus-status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #666;
-    }
-    .cumulus-status-dot.connected { background: #22c55e; }
-    .cumulus-status-dot.connecting { background: #f59e0b; }
-    .cumulus-status-dot.disconnected { background: #ef4444; }
-    .cumulus-close-btn {
-      background: none;
-      border: none;
-      color: #888;
-      cursor: pointer;
-      font-size: 20px;
-      padding: 4px;
-      line-height: 1;
-    }
-    .cumulus-close-btn:hover { color: #fff; }
-
-    /* Messages area */
-    .cumulus-messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .cumulus-messages::-webkit-scrollbar { width: 6px; }
-    .cumulus-messages::-webkit-scrollbar-track { background: transparent; }
-    .cumulus-messages::-webkit-scrollbar-thumb { background: #3a3a5a; border-radius: 3px; }
-
-    /* Message bubbles */
-    .cumulus-msg {
-      max-width: 85%;
-      padding: 10px 14px;
-      border-radius: 12px;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-    .cumulus-msg.user {
-      align-self: flex-end;
-      background: #4f46e5;
-      color: #fff;
-      border-bottom-right-radius: 4px;
-    }
-    .cumulus-msg.assistant {
-      align-self: flex-start;
-      background: #2a2a4a;
-      color: #e0e0e0;
-      border-bottom-left-radius: 4px;
-    }
-
-    /* Streaming cursor */
-    .cumulus-cursor {
-      display: inline-block;
-      width: 2px;
-      height: 1em;
-      background: #6366f1;
-      margin-left: 2px;
-      vertical-align: text-bottom;
-      animation: cumulus-blink 0.8s step-end infinite;
-    }
-    @keyframes cumulus-blink { 50% { opacity: 0; } }
-
-    /* Loading indicator */
-    .cumulus-loading {
-      align-self: flex-start;
-      padding: 10px 14px;
-      color: #888;
-      font-style: italic;
-    }
-
-    /* Markdown basics */
-    .cumulus-msg code {
-      background: rgba(255,255,255,0.1);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      font-size: 13px;
-    }
-    .cumulus-msg pre {
-      background: #0d0d1a;
-      padding: 12px;
-      border-radius: 8px;
-      overflow-x: auto;
-      margin: 8px 0;
-    }
-    .cumulus-msg pre code {
-      background: none;
-      padding: 0;
-      display: block;
-    }
-    .cumulus-msg a { color: #818cf8; }
-    .cumulus-msg strong { font-weight: 600; }
-    .cumulus-msg em { font-style: italic; }
-
-    /* Input area */
-    .cumulus-input-area {
-      display: flex;
-      gap: 8px;
-      padding: 12px 16px;
-      background: #16162b;
-      border-top: 1px solid #2a2a4a;
-    }
-    .cumulus-input {
-      flex: 1;
-      background: #1a1a2e;
-      border: 1px solid #3a3a5a;
-      border-radius: 8px;
-      color: #e0e0e0;
-      padding: 10px 12px;
-      font-size: 14px;
-      font-family: inherit;
-      resize: none;
-      min-height: 40px;
-      max-height: 120px;
-      outline: none;
-    }
-    .cumulus-input:focus { border-color: #6366f1; }
-    .cumulus-input::placeholder { color: #666; }
-    .cumulus-send-btn {
-      background: #6366f1;
-      border: none;
-      border-radius: 8px;
-      color: white;
-      padding: 0 16px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-      white-space: nowrap;
-    }
-    .cumulus-send-btn:hover { background: #5558e6; }
-    .cumulus-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-    /* Empty state */
-    .cumulus-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      color: #555;
-      font-size: 15px;
-      text-align: center;
-      padding: 20px;
-    }
-
-    /* Auth panel */
-    .cumulus-auth {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      flex: 1;
-      padding: 32px;
-      gap: 16px;
-    }
-    .cumulus-auth-title {
-      font-size: 20px;
-      font-weight: 600;
-      color: #f0f0ff;
-    }
-    .cumulus-auth-subtitle {
-      color: #888;
-      font-size: 13px;
-      text-align: center;
-      max-width: 280px;
-    }
-    .cumulus-auth-input {
-      width: 100%;
-      max-width: 320px;
-      background: #1a1a2e;
-      border: 1px solid #3a3a5a;
-      border-radius: 8px;
-      color: #e0e0e0;
-      padding: 12px 14px;
-      font-size: 14px;
-      font-family: 'SF Mono', 'Fira Code', monospace;
-      outline: none;
-    }
-    .cumulus-auth-input:focus { border-color: #6366f1; }
-    .cumulus-auth-input::placeholder { color: #555; }
-    .cumulus-auth-btn {
-      background: #6366f1;
-      border: none;
-      border-radius: 8px;
-      color: white;
-      padding: 10px 32px;
-      cursor: pointer;
-      font-size: 14px;
-      font-weight: 500;
-    }
-    .cumulus-auth-btn:hover { background: #5558e6; }
-    .cumulus-auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .cumulus-auth-error {
-      color: #ef4444;
-      font-size: 13px;
-      text-align: center;
-    }
-    .cumulus-auth-logout {
-      background: none;
-      border: none;
-      color: #666;
-      cursor: pointer;
-      font-size: 11px;
-      padding: 2px 6px;
-    }
-    .cumulus-auth-logout:hover { color: #ef4444; }
-  `;
-
-  // ─── Simple Markdown Renderer ───────────────────────────────
+  // ─── Styles ─────────────────────────────────────────────────────────────────
+  var STYLES = [
+    '.cumulus-widget * { box-sizing: border-box; margin: 0; padding: 0; }',
+
+    '.cumulus-widget {',
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
+    '  font-size: 14px;',
+    '  line-height: 1.6;',
+    '  color: #e0e0e0;',
+    '}',
+
+    /* ── Floating bubble ── */
+    '.cumulus-bubble {',
+    '  position: fixed; bottom: 24px; right: 24px;',
+    '  width: 56px; height: 56px;',
+    '  border-radius: 50%;',
+    '  background: #0066cc;',
+    '  border: none; cursor: pointer;',
+    '  box-shadow: 0 4px 14px rgba(0,0,0,0.45);',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  z-index: 10000;',
+    '  transition: background 0.15s ease, transform 0.15s ease;',
+    '}',
+    '.cumulus-bubble:hover { background: #0077ee; transform: scale(1.07); }',
+    '.cumulus-bubble svg { width: 26px; height: 26px; fill: white; }',
+
+    /* ── Panel ── */
+    '.cumulus-panel {',
+    '  background: #1e1e1e;',
+    '  border: 1px solid #3a3a3a;',
+    '  display: flex; flex-direction: column; overflow: hidden;',
+    '}',
+    '.cumulus-panel.floating {',
+    '  position: fixed; bottom: 90px; right: 24px;',
+    '  width: 420px; height: 580px;',
+    '  border-radius: 10px;',
+    '  z-index: 10000;',
+    '  box-shadow: 0 10px 36px rgba(0,0,0,0.55);',
+    '}',
+    '.cumulus-panel.standalone {',
+    '  width: 100%; height: 100vh;',
+    '  border: none; border-radius: 0;',
+    '}',
+
+    /* ── Header ── */
+    '.cumulus-header {',
+    '  display: flex; align-items: center; justify-content: space-between;',
+    '  padding: 0.4em 0.85em;',
+    '  background: #2d2d2d;',
+    '  border-bottom: 1px solid #3a3a3a;',
+    '  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.connected { background: #22c55e; }',
+    '.cumulus-status-dot.connecting { background: #f59e0b; }',
+    '.cumulus-status-dot.disconnected { background: #ef4444; }',
+    '.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; }',
+
+    /* ── Messages scroll area ── */
+    '.cumulus-messages {',
+    '  flex: 1; overflow-y: auto;',
+    '  padding: 1.5em 1em;',
+    '  display: flex; flex-direction: column;',
+    '  gap: 1.5em;',
+    '}',
+    '.cumulus-messages::-webkit-scrollbar { width: 6px; }',
+    '.cumulus-messages::-webkit-scrollbar-track { background: transparent; }',
+    '.cumulus-messages::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }',
+
+    /* ── Message inner container (max-width centering) ── */
+    '.cumulus-msg-row {',
+    '  display: flex; flex-direction: column;',
+    '  max-width: 78ch; width: 100%;',
+    '  margin: 0 auto;',
+    '}',
+
+    /* ── User messages ── */
+    '.cumulus-msg.user {',
+    '  align-self: flex-end;',
+    '  background: #2a3a4a;',
+    '  color: #d4e8f8;',
+    '  border: 1px solid #3a5060;',
+    '  border-radius: 0.85em 0.85em 0.25em 0.85em;',
+    '  padding: 0.55em 0.9em;',
+    '  max-width: 42ch;',
+    '  word-wrap: break-word;',
+    '  white-space: pre-wrap;',
+    '}',
+    '.cumulus-msg.user.wide { max-width: 100%; }',
+
+    /* ── User message attachments ── */
+    '.cumulus-msg-attachments { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.4em; }',
+    '.cumulus-msg-img { max-width: 16em; max-height: 12em; border-radius: 0.3em; object-fit: cover; border: 1px solid #3a5060; display: block; }',
+    '.cumulus-msg-file-badge {',
+    '  display: inline-flex; align-items: center; gap: 0.3em;',
+    '  background: #1e2a35; border: 1px solid #3a5060; border-radius: 0.3em;',
+    '  padding: 0.2em 0.5em; font-size: 0.8em; color: #8ab4cc;',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '}',
+
+    /* ── Assistant messages ── */
+    '.cumulus-msg.assistant {',
+    '  align-self: flex-start;',
+    '  background: transparent;',
+    '  color: #e0e0e0;',
+    '  padding: 0.4em 0;',
+    '  width: 100%;',
+    '  word-wrap: break-word;',
+    '}',
+
+    /* ── Markdown rendered inside assistant messages ── */
+    '.cumulus-msg.assistant p { margin: 0.4em 0; }',
+    '.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; }',
+
+    /* Headings */
+    '.cumulus-msg h1,.cumulus-msg h2,.cumulus-msg h3,.cumulus-msg h4,.cumulus-msg h5,.cumulus-msg h6 {',
+    '  font-weight: 600; margin: 0.7em 0 0.3em; line-height: 1.3; color: #e8e8e8;',
+    '}',
+    '.cumulus-msg h1 { font-size: 1.55em; border-bottom: 1px solid #3a3a3a; padding-bottom: 0.2em; }',
+    '.cumulus-msg h2 { font-size: 1.3em; border-bottom: 1px solid #3a3a3a; padding-bottom: 0.2em; }',
+    '.cumulus-msg h3 { font-size: 1.12em; }',
+    '.cumulus-msg h4 { font-size: 1em; }',
+    '.cumulus-msg h5 { font-size: 0.9em; }',
+    '.cumulus-msg h6 { font-size: 0.85em; color: #aaa; }',
+
+    /* Horizontal rule */
+    '.cumulus-msg hr { border: none; border-top: 1px solid #3a3a3a; margin: 0.75em 0; }',
+
+    /* Blockquote */
+    '.cumulus-msg blockquote {',
+    '  background: #252525;',
+    '  border-left: 0.2em solid #0066cc;',
+    '  margin: 0.5em 0;',
+    '  padding: 0.4em 0.8em;',
+    '  border-radius: 0 0.25em 0.25em 0;',
+    '  color: #bbb;',
+    '}',
+
+    /* Lists */
+    '.cumulus-msg ul,.cumulus-msg ol { padding-left: 1.5em; margin: 0.4em 0; }',
+    '.cumulus-msg li { margin: 0.15em 0; }',
+    '.cumulus-msg li > ul,.cumulus-msg li > ol { margin: 0.1em 0; }',
+
+    /* Inline code */
+    '.cumulus-msg code {',
+    '  background: #2a2a2a;',
+    '  border: 1px solid #3a3a3a;',
+    '  border-radius: 0.25em;',
+    '  color: #ce9178;',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '  font-size: 0.875em;',
+    '  padding: 0.1em 0.35em;',
+    '}',
+
+    /* Code block wrapper */
+    '.code-block-wrapper {',
+    '  border: 1px solid #3a3a3a;',
+    '  border-radius: 0.4em;',
+    '  background: #1e1e1e;',
+    '  overflow: hidden;',
+    '  margin: 0.6em 0;',
+    '}',
+    '.code-block-header {',
+    '  background: #3d3d3d;',
+    '  padding: 0.35em 0.85em;',
+    '  border-bottom: 1px solid #4a4a4a;',
+    '  display: flex; justify-content: space-between; align-items: center;',
+    '}',
+    '.code-block-language {',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '  font-size: 0.8em; color: #aaa; text-transform: lowercase;',
+    '}',
+    '.code-block-copy-btn {',
+    '  background: transparent;',
+    '  border: 1px solid #555;',
+    '  border-radius: 0.3em;',
+    '  color: #aaa;',
+    '  font-size: 0.8em;',
+    '  padding: 0.15em 0.55em;',
+    '  cursor: pointer;',
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;',
+    '}',
+    '.code-block-copy-btn:hover { border-color: #0066cc; color: #ddd; }',
+    '.code-block-wrapper pre {',
+    '  padding: 1em 1.15em; margin: 0;',
+    '  overflow-x: auto;',
+    '  font-size: 0.925em; line-height: 1.5;',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '}',
+    '.code-block-wrapper pre code {',
+    '  background: none; border: none; color: #e0e0e0;',
+    '  padding: 0; font-size: inherit;',
+    '}',
+
+    /* Tables */
+    '.cumulus-msg table {',
+    '  border-collapse: collapse; width: 100%;',
+    '  margin: 0.6em 0; font-size: 0.93em;',
+    '}',
+    '.cumulus-msg th {',
+    '  background: #2a2a2a;',
+    '  border: 1px solid #3a3a3a;',
+    '  padding: 0.4em 0.7em;',
+    '  text-align: left; font-weight: 600; color: #ccc;',
+    '}',
+    '.cumulus-msg td {',
+    '  border: 1px solid #3a3a3a;',
+    '  padding: 0.35em 0.7em; color: #ddd;',
+    '}',
+    '.cumulus-msg tr:nth-child(even) td { background: #222; }',
+    '.cumulus-msg tr:nth-child(odd) td { background: #1e1e1e; }',
+
+    /* ── Streaming cursor ── */
+    '.cumulus-cursor {',
+    '  display: inline-block;',
+    '  width: 0.55em; height: 1em;',
+    '  background: #0066cc;',
+    '  margin-left: 2px;',
+    '  vertical-align: text-bottom;',
+    '  animation: cumulus-blink 0.8s step-end infinite;',
+    '}',
+    '@keyframes cumulus-blink { 50% { opacity: 0; } }',
+
+    /* ── Loading indicator ── */
+    '.cumulus-loading {',
+    '  color: #666; font-style: italic; padding: 0.4em 0;',
+    '  align-self: flex-start;',
+    '}',
+
+    /* ── Empty state ── */
+    '.cumulus-empty {',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  flex: 1; color: #555; font-size: 15px;',
+    '  text-align: center; padding: 20px;',
+    '}',
+
+    /* ── Input area ── */
+    '.cumulus-input-area {',
+    '  display: flex; flex-direction: column;',
+    '  padding: 0.6em 0.85em 0.75em;',
+    '  background: #2d2d2d;',
+    '  border-top: 1px solid #3a3a3a;',
+    '  gap: 0.45em;',
+    '  flex-shrink: 0;',
+    '}',
+
+    /* Attachment strip */
+    '.cumulus-attach-strip {',
+    '  display: flex; flex-direction: row;',
+    '  gap: 0.5em; overflow-x: auto;',
+    '  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; }',
+
+    /* Attachment chip */
+    '.cumulus-attach-chip {',
+    '  position: relative;',
+    '  display: flex; flex-direction: column; align-items: center;',
+    '  background: #3d3d3d; border: 1px solid #4a4a4a;',
+    '  border-radius: 0.4em; padding: 0.3em;',
+    '  flex-shrink: 0; width: 5.5em; overflow: hidden;',
+    '}',
+    '.cumulus-attach-chip-thumb {',
+    '  width: 3em; height: 3em; object-fit: cover;',
+    '  border-radius: 0.25em; display: block;',
+    '}',
+    '.cumulus-attach-chip-icon {',
+    '  width: 3em; height: 3em;',
+    '  background: #2a2a2a; border-radius: 0.25em;',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '  font-size: 0.65em; color: #aaa; text-transform: uppercase;',
+    '}',
+    '.cumulus-attach-chip-name {',
+    '  font-size: 0.72em; color: #ccc;',
+    '  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;',
+    '  width: 100%; text-align: center; margin-top: 0.2em;',
+    '}',
+    '.cumulus-attach-chip-remove {',
+    '  position: absolute; top: 0.1em; right: 0.15em;',
+    '  background: none; border: none; color: #888;',
+    '  font-size: 0.85em; line-height: 1; cursor: pointer; padding: 0 0.1em;',
+    '}',
+    '.cumulus-attach-chip-remove:hover { color: #ff6666; }',
+
+    /* 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; align-self: center; width: 100%;',
+    '}',
+    '.cumulus-attach-btn {',
+    '  width: 2.7em; height: 2.7em; flex-shrink: 0;',
+    '  background: #3d3d3d; border: 1px solid #4a4a4a;',
+    '  border-radius: 0.55em; color: #aaa;',
+    '  font-size: 1.4em; line-height: 1; cursor: pointer;',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  padding: 0;',
+    '}',
+    '.cumulus-attach-btn:hover { border-color: #0066cc; color: #ddd; }',
+
+    '.cumulus-input {',
+    '  flex: 1;',
+    '  background: #3d3d3d;',
+    '  border: 1px solid #4a4a4a;',
+    '  border-radius: 0.55em;',
+    '  color: #e0e0e0;',
+    '  padding: 0.55em 0.75em;',
+    '  font-size: 14px;',
+    '  font-family: inherit;',
+    '  resize: none;',
+    '  min-height: 2.7em;',
+    '  max-height: 120px;',
+    '  outline: none;',
+    '  line-height: 1.5;',
+    '}',
+    '.cumulus-input:focus { border-color: #0066cc; }',
+    '.cumulus-input::placeholder { color: #666; }',
+
+    '.cumulus-send-btn {',
+    '  background: #0066cc;',
+    '  border: none;',
+    '  border-radius: 0.55em;',
+    '  color: white;',
+    '  padding: 0 1em;',
+    '  height: 2.7em;',
+    '  flex-shrink: 0;',
+    '  cursor: pointer;',
+    '  font-size: 14px;',
+    '  font-weight: 600;',
+    '  font-family: inherit;',
+    '  white-space: nowrap;',
+    '}',
+    '.cumulus-send-btn:hover:not(:disabled) { background: #0077ee; }',
+    '.cumulus-send-btn:disabled { background: #334455; color: #668; cursor: not-allowed; }',
+    '.cumulus-send-btn.stop { background: #8b2222; color: #ffcccc; }',
+    '.cumulus-send-btn.stop:hover:not(:disabled) { background: #a02828; }',
+
+    /* ── Auth panel ── */
+    '.cumulus-auth {',
+    '  display: flex; flex-direction: column;',
+    '  align-items: center; justify-content: center;',
+    '  flex: 1; padding: 2em 2em; gap: 1em;',
+    '}',
+    '.cumulus-auth-title { font-size: 20px; font-weight: 600; color: #e0e0e0; }',
+    '.cumulus-auth-subtitle { color: #888; font-size: 13px; text-align: center; max-width: 280px; }',
+    '.cumulus-auth-input {',
+    '  width: 100%; max-width: 320px;',
+    '  background: #3d3d3d; border: 1px solid #4a4a4a;',
+    '  border-radius: 0.55em; color: #e0e0e0;',
+    '  padding: 0.7em 0.85em; font-size: 14px;',
+    '  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;',
+    '  outline: none;',
+    '}',
+    '.cumulus-auth-input:focus { border-color: #0066cc; }',
+    '.cumulus-auth-input::placeholder { color: #555; }',
+    '.cumulus-auth-btn {',
+    '  background: #0066cc; border: none; border-radius: 0.55em;',
+    '  color: white; padding: 0.6em 2em;',
+    '  cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;',
+    '}',
+    '.cumulus-auth-btn:hover { background: #0077ee; }',
+    '.cumulus-auth-btn:disabled { background: #334455; color: #668; cursor: not-allowed; }',
+    '.cumulus-auth-error { color: #ef4444; font-size: 13px; text-align: center; min-height: 1.2em; }',
+    '.cumulus-auth-logout {',
+    '  background: none; border: none; color: #666;',
+    '  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 ───────────────────────────────────────────────────────────
+  function escapeHtml(text) {
+    var div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // ─── Markdown Renderer ───────────────────────────────────────────────────────
+  // Uses a placeholder strategy: extract code blocks first, render everything
+  // else, then reinsert code blocks. This prevents markdown patterns inside
+  // code from being processed.
+
   function renderMarkdown(text) {
-    let html = escapeHtml(text);
+    // Phase 1: Extract fenced code blocks — replace with unique tokens
+    var codeBlocks = [];
+    var TOKEN_PREFIX = '\x00CODEBLOCK_';
+    var processed = text.replace(/```([^\n`]*)\n([\s\S]*?)```/g, function (_, lang, code) {
+      var idx = codeBlocks.length;
+      var langLabel = lang.trim() || 'text';
+      var escapedCode = escapeHtml(code.replace(/\n$/, '')); // trim trailing newline
+      var tokenId = 'cb' + idx;
+      codeBlocks.push(buildCodeBlock(langLabel, escapedCode, tokenId));
+      return TOKEN_PREFIX + idx + '\x00';
+    });
 
-    // Code blocks (``` ... ```)
-    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function (_, lang, code) {
-      return '<pre><code>' + code + '</code></pre>';
+    // Phase 2: Escape HTML in the non-code portions
+    // We need to escape line by line between tokens
+    var parts = processed.split(/(\x00CODEBLOCK_\d+\x00)/);
+    var escapedParts = parts.map(function (part) {
+      if (/^\x00CODEBLOCK_\d+\x00$/.test(part)) return part; // keep token as-is
+      return escapeHtml(part);
     });
+    var html = escapedParts.join('');
 
-    // Inline code
-    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+    // Phase 3: Process tables (before other inline markdown)
+    html = renderTables(html);
+
+    // Phase 4: Process block-level markdown elements
+    // Horizontal rules
+    html = html.replace(/^[ \t]*(---+|___+|\*\*\*+)[ \t]*$/gm, '<hr>');
+
+    // Headers
+    html = html.replace(/^######[ \t]+(.+)$/gm, '<h6>$1</h6>');
+    html = html.replace(/^#####[ \t]+(.+)$/gm, '<h5>$1</h5>');
+    html = html.replace(/^####[ \t]+(.+)$/gm, '<h4>$1</h4>');
+    html = html.replace(/^###[ \t]+(.+)$/gm, '<h3>$1</h3>');
+    html = html.replace(/^##[ \t]+(.+)$/gm, '<h2>$1</h2>');
+    html = html.replace(/^#[ \t]+(.+)$/gm, '<h1>$1</h1>');
+
+    // Blockquotes (simple single-level)
+    html = renderBlockquotes(html);
 
-    // Bold
+    // Lists
+    html = renderLists(html);
+
+    // Phase 5: Inline markdown
+    // Bold (** and __)
     html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+
+    // Italic (* and _) — careful not to match inside words for _
+    html = html.replace(/\*(?!\s)(.+?)(?<!\s)\*/g, '<em>$1</em>');
+    html = html.replace(/(?<!\w)_(?!\s)(.+?)(?<!\s)_(?!\w)/g, '<em>$1</em>');
+
+    // Strikethrough
+    html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
 
-    // Italic
-    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    // Inline code (backtick)
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
 
     // Links
     html = html.replace(
       /\[([^\]]+)\]\(([^)]+)\)/g,
-      '<a href="$2" target="_blank" rel="noopener">$1</a>'
+      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
     );
 
-    // Line breaks
-    html = html.replace(/\n/g, '<br>');
+    // Phase 6: Convert remaining newlines to <br> (skip block-level elements)
+    // Wrap sequences of plain text lines in <p> tags
+    html = renderParagraphs(html);
+
+    // Phase 7: Reinsert code blocks
+    html = html.replace(/\x00CODEBLOCK_(\d+)\x00/g, function (_, idx) {
+      return codeBlocks[parseInt(idx, 10)];
+    });
 
     return html;
   }
 
-  function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
+  function buildCodeBlock(lang, escapedCode, tokenId) {
+    return (
+      '<div class="code-block-wrapper">' +
+        '<div class="code-block-header">' +
+          '<span class="code-block-language">' + escapeHtml(lang) + '</span>' +
+          '<button class="code-block-copy-btn" data-copy-target="' + tokenId + '" data-testid="webchat-copy-code">Copy</button>' +
+        '</div>' +
+        '<pre><code data-code-id="' + tokenId + '">' + escapedCode + '</code></pre>' +
+      '</div>'
+    );
+  }
+
+  function renderTables(html) {
+    // Split on double newlines to find table blocks
+    // A table block: lines where most lines start with |
+    var lines = html.split('\n');
+    var result = [];
+    var i = 0;
+    while (i < lines.length) {
+      var line = lines[i];
+      // Check if this line looks like a table row
+      if (/^\|.+\|/.test(line.trim())) {
+        // Collect contiguous table lines
+        var tableLines = [];
+        while (i < lines.length && /^\|/.test(lines[i].trim())) {
+          tableLines.push(lines[i]);
+          i++;
+        }
+        result.push(buildTable(tableLines));
+      } else {
+        result.push(line);
+        i++;
+      }
+    }
+    return result.join('\n');
+  }
+
+  function buildTable(lines) {
+    // lines[0] = header row, lines[1] = separator row (|---|), lines[2+] = data rows
+    if (lines.length < 2) return lines.join('\n');
+
+    var isSepRow = /^\|[\s|:-]+\|$/.test(lines[1].trim());
+    if (!isSepRow) return lines.join('\n');
+
+    var headerCells = parseTableRow(lines[0]);
+    var dataRows = lines.slice(2);
+
+    var thead = '<thead><tr>' + headerCells.map(function (c) {
+      return '<th>' + c + '</th>';
+    }).join('') + '</tr></thead>';
+
+    var tbody = '<tbody>' + dataRows.map(function (row) {
+      var cells = parseTableRow(row);
+      return '<tr>' + cells.map(function (c) {
+        return '<td>' + c + '</td>';
+      }).join('') + '</tr>';
+    }).join('') + '</tbody>';
+
+    return '<table>' + thead + tbody + '</table>';
+  }
+
+  function parseTableRow(line) {
+    // Split on | and trim, filter empty first/last from leading/trailing |
+    var parts = line.split('|');
+    // Remove first and last if empty (from leading/trailing |)
+    if (parts.length > 0 && parts[0].trim() === '') parts = parts.slice(1);
+    if (parts.length > 0 && parts[parts.length - 1].trim() === '') parts = parts.slice(0, -1);
+    return parts.map(function (c) { return c.trim(); });
+  }
+
+  function renderBlockquotes(html) {
+    // Find consecutive lines starting with &gt; (escaped >)
+    var lines = html.split('\n');
+    var result = [];
+    var i = 0;
+    while (i < lines.length) {
+      if (/^&gt;[ \t]?/.test(lines[i])) {
+        var bqLines = [];
+        while (i < lines.length && /^&gt;[ \t]?/.test(lines[i])) {
+          bqLines.push(lines[i].replace(/^&gt;[ \t]?/, ''));
+          i++;
+        }
+        result.push('<blockquote>' + bqLines.join('<br>') + '</blockquote>');
+      } else {
+        result.push(lines[i]);
+        i++;
+      }
+    }
+    return result.join('\n');
+  }
+
+  function renderLists(html) {
+    // Process unordered then ordered lists
+    // Match blocks of consecutive list lines
+    var lines = html.split('\n');
+    var result = [];
+    var i = 0;
+
+    while (i < lines.length) {
+      // Unordered list item: "- " or "* " or "+ " (with optional indent)
+      if (/^[ \t]*[-*+][ \t]+/.test(lines[i])) {
+        var listLines = [];
+        while (i < lines.length && /^[ \t]*[-*+][ \t]+/.test(lines[i])) {
+          listLines.push(lines[i].replace(/^[ \t]*[-*+][ \t]+/, ''));
+          i++;
+        }
+        result.push('<ul>' + listLines.map(function (l) { return '<li>' + l + '</li>'; }).join('') + '</ul>');
+      }
+      // Ordered list item: "1. " "2. " etc.
+      else if (/^[ \t]*\d+\.[ \t]+/.test(lines[i])) {
+        var olLines = [];
+        while (i < lines.length && /^[ \t]*\d+\.[ \t]+/.test(lines[i])) {
+          olLines.push(lines[i].replace(/^[ \t]*\d+\.[ \t]+/, ''));
+          i++;
+        }
+        result.push('<ol>' + olLines.map(function (l) { return '<li>' + l + '</li>'; }).join('') + '</ol>');
+      }
+      else {
+        result.push(lines[i]);
+        i++;
+      }
+    }
+    return result.join('\n');
+  }
+
+  function renderParagraphs(html) {
+    // Split on double newlines; wrap plain-text segments in <p> while preserving
+    // existing block-level HTML elements.
+    // Strategy: split into chunks on blank lines (two+ newlines), then for each
+    // chunk: if it starts with a block-level tag, keep as-is; else wrap in <p>.
+    var blockTags = /^<(h[1-6]|hr|ul|ol|blockquote|table|div|pre)\b/i;
+
+    var chunks = html.split(/\n{2,}/);
+    var parts = chunks.map(function (chunk) {
+      chunk = chunk.trim();
+      if (!chunk) return '';
+      if (blockTags.test(chunk)) return chunk;
+      // It's a text/inline-html chunk — convert single newlines to <br>
+      // but only outside of block tags within the chunk
+      var inner = chunk.replace(/\n/g, '<br>');
+      return '<p>' + inner + '</p>';
+    });
+
+    return parts.filter(function (p) { return p !== ''; }).join('\n');
+  }
+
+  // ─── Attachment helpers ──────────────────────────────────────────────────────
+  function fileExtension(name) {
+    var parts = name.split('.');
+    return parts.length > 1 ? parts[parts.length - 1].slice(0, 5) : 'file';
   }
 
-  // ─── WebSocket Connection ───────────────────────────────────
+  function readFileAsBase64(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        // result is "data:mime/type;base64,XXXX" — strip the prefix
+        var result = e.target.result;
+        var comma = result.indexOf(',');
+        resolve({ base64: result.slice(comma + 1), mimeType: file.type || 'application/octet-stream', name: file.name });
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function readFileAsDataUrl(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.onload = function (e) { resolve(e.target.result); };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  // ─── WebSocket Connection ────────────────────────────────────────────────────
   function createConnection(opts) {
-    const { wsUrl, apiKey, sessionId, onMessage, onStatus } = opts;
-    let ws = null;
-    let reconnectTimer = null;
-    let reconnectDelay = 1000;
+    var wsUrl = opts.wsUrl;
+    var apiKey = opts.apiKey;
+    var sessionId = opts.sessionId;
+    var onMessage = opts.onMessage;
+    var onStatus = opts.onStatus;
+    var skipHistory = opts.skipHistory || false;
+
+    var ws = null;
+    var reconnectTimer = null;
+    var reconnectDelay = 1000;
+    var destroyed = false;
 
     function connect() {
+      if (destroyed) return;
       onStatus('connecting');
       ws = new WebSocket(wsUrl);
 
       ws.onopen = function () {
+        if (destroyed) { ws.close(); return; }
         onStatus('connected');
         reconnectDelay = 1000;
-
-        // Authenticate
         ws.send(JSON.stringify({ type: 'auth', apiKey: apiKey }));
-
-        // Load history
-        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) {
@@ -405,17 +878,18 @@
       };
 
       ws.onclose = function () {
+        if (destroyed) return;
         onStatus('disconnected');
         scheduleReconnect();
       };
 
       ws.onerror = function () {
-        // onclose will fire after this
+        // onclose fires after onerror
       };
     }
 
     function scheduleReconnect() {
-      if (reconnectTimer) return;
+      if (reconnectTimer || destroyed) return;
       reconnectTimer = setTimeout(function () {
         reconnectTimer = null;
         reconnectDelay = Math.min(reconnectDelay * 1.5, 30000);
@@ -430,12 +904,13 @@
     }
 
     function close() {
+      destroyed = true;
       if (reconnectTimer) {
         clearTimeout(reconnectTimer);
         reconnectTimer = null;
       }
       if (ws) {
-        ws.onclose = null; // Prevent reconnect
+        ws.onclose = null;
         ws.close();
         ws = null;
       }
@@ -445,52 +920,565 @@
     return { send: send, close: close };
   }
 
-  // ─── Widget UI ──────────────────────────────────────────────
+  // ─── Widget ──────────────────────────────────────────────────────────────────
   function createWidget(opts) {
-    const { standalone } = opts;
-    const sessionId = getSessionId();
-    const wsUrl = getWsUrl();
-    // For standalone mode, use stored key or empty; for embedded, use data-api-key
+    var standalone = opts.standalone;
+    var sessionId = getSessionId();
+    var wsUrl = getWsUrl();
     var activeApiKey = standalone ? getStoredApiKey() : API_KEY;
 
     // Inject styles
-    const styleEl = document.createElement('style');
+    var styleEl = document.createElement('style');
     styleEl.textContent = STYLES;
     document.head.appendChild(styleEl);
 
-    // State
-    var messages = [];
-    var streaming = false;
-    var streamBuffer = '';
+    // ── Root container ──
+    var container = document.createElement('div');
+    container.className = 'cumulus-widget';
+
+    // ═══════════════════════════════════════════════════════════════════════════
+    // 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
+    // ═══════════════════════════════════════════════════════════════════════════
+
+    // ── Standalone state ──
     var connection = null;
     var connectionStatus = 'disconnected';
     var authenticated = false;
 
-    // ─── DOM elements ──────────────────────────────
-    const container = document.createElement('div');
-    container.className = 'cumulus-widget';
-
-    // Build panel
-    const panel = document.createElement('div');
-    panel.className = 'cumulus-panel ' + (standalone ? 'standalone' : 'floating');
-    panel.style.display = standalone ? 'flex' : 'none';
+    // 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];
+    }
 
-    // Header
-    const header = document.createElement('div');
-    header.className = 'cumulus-header';
-    header.innerHTML =
+    // ── 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);
-
-    // Auth panel (standalone mode — shown when no API key)
-    const authPanel = document.createElement('div');
+        '<span class="cumulus-status-dot" data-testid="webchat-status-dot"></span>' +
+        '<span data-testid="webchat-status-text">Disconnected</span>' +
+      '</span>';
+    authWrapper.appendChild(authHeader);
+
+    var authPanel = document.createElement('div');
     authPanel.className = 'cumulus-auth';
     authPanel.setAttribute('data-testid', 'webchat-auth');
     authPanel.innerHTML =
@@ -499,245 +1487,836 @@
       '<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
-    const 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
-    const inputArea = document.createElement('div');
-    inputArea.className = 'cumulus-input-area';
-    inputArea.style.display = 'none';
-    const input = document.createElement('textarea');
-    input.className = 'cumulus-input';
-    input.setAttribute('data-testid', 'webchat-input');
-    input.placeholder = 'Type a message...';
-    input.rows = 1;
-    const sendBtn = document.createElement('button');
-    sendBtn.className = 'cumulus-send-btn';
-    sendBtn.setAttribute('data-testid', 'webchat-send');
-    sendBtn.textContent = 'Send';
-    inputArea.appendChild(input);
-    inputArea.appendChild(sendBtn);
-    panel.appendChild(inputArea);
-
-    container.appendChild(panel);
-
-    // ─── Auth/Chat view switching ────────────────────
+    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);
     }
 
-    // Floating bubble (embeddable mode only)
-    var bubble = null;
-    if (!standalone) {
-      bubble = document.createElement('button');
-      bubble.className = 'cumulus-bubble';
-      bubble.setAttribute('data-testid', 'webchat-bubble');
-      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);
+    // ── Thread list ──
+    function requestThreadList() {
+      if (connection) {
+        connection.send({ type: 'threads' });
+      }
+    }
+
+    // ── Sidebar rendering ──
+    function renderSidebar() {
+      sidebarScroll.innerHTML = '';
+
+      var visibleSet = {};
+      for (var i = 0; i < visibleThreads.length; i++) {
+        visibleSet[visibleThreads[i]] = true;
+      }
+
+      // 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));
+        });
+        sidebarScroll.appendChild(activeSection);
+
+        var divider = document.createElement('hr');
+        divider.className = 'cumulus-sidebar-divider';
+        sidebarScroll.appendChild(divider);
+      }
+
+      // 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));
+        });
+      }
+      sidebarScroll.appendChild(allSection);
+    }
+
+    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);
+      }
+
+      item.addEventListener('click', function (e) {
+        var multiSelect = e.metaKey || e.ctrlKey;
+        if (multiSelect) {
+          togglePanelThread(name);
+        } else {
+          soloThread(name);
+        }
+      });
+
+      return item;
+    }
+
+    // ── Panel management ──
+    function soloThread(name) {
+      visibleThreads = [name];
+      renderSidebar();
+      renderContentArea();
+      loadThreadHistoryIfNeeded(name);
     }
 
-    // ─── Rendering ─────────────────────────────────
-    function scrollToBottom() {
-      messagesEl.scrollTop = messagesEl.scrollHeight;
+    function togglePanelThread(name) {
+      var idx = visibleThreads.indexOf(name);
+      if (idx !== -1) {
+        // Remove from visible
+        visibleThreads.splice(idx, 1);
+      } else {
+        // 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 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();
+      }
     }
 
-    function renderMessages() {
-      messagesEl.innerHTML = '';
+    function loadThreadHistoryIfNeeded(name) {
+      var state = getThreadState(name);
+      if (!state.historyLoaded && connection) {
+        state.historyLoaded = true;
+        connection.send({ type: 'history', threadName: name, limit: 50 });
+      }
+    }
 
-      if (messages.length === 0 && !streaming) {
-        messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+    // ── 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;
       }
 
-      for (var i = 0; i < messages.length; i++) {
-        var msg = messages[i];
+      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 ' + msg.role;
-        if (msg.role === 'assistant') {
-          el.innerHTML = renderMarkdown(msg.content);
-        } else {
-          el.textContent = msg.content;
+        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);
         }
-        messagesEl.appendChild(el);
+        return el;
       }
 
-      // Streaming indicator
-      if (streaming) {
-        var streamEl = document.createElement('div');
-        streamEl.className = 'cumulus-msg assistant';
-        streamEl.setAttribute('data-testid', 'webchat-streaming');
-        if (streamBuffer) {
-          streamEl.innerHTML =
-            renderMarkdown(streamBuffer) + '<span class="cumulus-cursor"></span>';
+      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 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 {
-          streamEl.innerHTML =
-            '<span style="color:#888;font-style:italic">Thinking...</span><span class="cumulus-cursor"></span>';
+          sendBtn.textContent = 'Send';
+          sendBtn.classList.remove('stop');
+          sendBtn.disabled = false;
+        }
+      }
+
+      function renderPanelAttachStrip() {
+        attachStrip.innerHTML = '';
+        if (state.pendingAttachments.length === 0) {
+          attachStrip.style.display = 'none';
+          return;
         }
-        messagesEl.appendChild(streamEl);
+        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);
+        });
       }
 
-      scrollToBottom();
+      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);
+
+      inputEl.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendPanelMessage();
+        }
+      });
+
+      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;
     }
 
-    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;
+    // ── 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 (text) {
-        text.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+      if (state._updateSendBtn) {
+        state._updateSendBtn();
       }
     }
 
-    // ─── 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 we had a stored key and it failed, show auth panel again
-          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 (!streaming) {
-            streaming = true;
-            streamBuffer = '';
+          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/result — could show in verbose mode later
+          // Reserved for future verbose display
           break;
 
         case 'done':
-          streaming = false;
-          messages.push({ role: 'assistant', content: data.response || streamBuffer });
-          streamBuffer = '';
-          renderMessages();
+          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;
+            }
+            state.streaming = false;
+            state.messages.push({ role: 'assistant', content: data.response || state.streamBuffer });
+            state.streamBuffer = '';
+            updateThreadActivity(data.threadName);
+            refreshThreadPanel(data.threadName);
+          }
           break;
 
         case 'error':
-          streaming = false;
-          if (streamBuffer) {
-            messages.push({ role: 'assistant', content: streamBuffer + '\n\n[Error: ' + data.error + ']' });
-          } else {
-            messages.push({ role: 'assistant', content: '[Error: ' + data.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 = '';
-          renderMessages();
           break;
       }
     }
 
-    function sendMessage() {
-      var text = input.value.trim();
-      if (!text || streaming) return;
+    function updateThreadActivity(threadName) {
+      for (var i = 0; i < allThreads.length; i++) {
+        if (allThreads[i].name === threadName) {
+          allThreads[i].lastActivity = Date.now();
+          break;
+        }
+      }
+      // Re-render sidebar to reflect new sort order / move thread up
+      renderSidebar();
+    }
 
-      messages.push({ role: 'user', content: text });
-      input.value = '';
-      input.style.height = 'auto';
-      streaming = true;
-      streamBuffer = '';
-      renderMessages();
+    // ── New thread creation ──
+    var newThreadCreating = false;
 
-      connection.send({
-        type: 'message',
-        threadName: sessionId,
-        message: text,
-      });
+    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 });
       }
-    });
+      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 (!exists) {
+        allThreads.push({ name: name, messageCount: 0, lastActivity: Date.now() });
+      }
+      soloThread(name);
+    }
 
-    // Auto-resize textarea
-    input.addEventListener('input', function () {
-      input.style.height = 'auto';
-      input.style.height = Math.min(input.scrollHeight, 120) + 'px';
-    });
+    newThreadBtn.addEventListener('click', showNewThreadInput);
 
-    // Bubble toggle (embeddable 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();
-        }
-      });
+    newThreadInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); submitNewThread(); }
+      if (e.key === 'Escape') { hideNewThreadInput(); }
+    });
 
-      // Close button
-      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 authBtn = authPanel.querySelector('[data-testid="webchat-auth-submit"]');
+    var authSubmitBtn = authPanel.querySelector('[data-testid="webchat-auth-submit"]');
 
     function submitAuth() {
       var key = authInput.value.trim();
@@ -749,30 +2328,24 @@
       startConnection();
     }
 
-    authBtn.addEventListener('click', submitAuth);
+    authSubmitBtn.addEventListener('click', submitAuth);
     authInput.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        submitAuth();
-      }
+      if (e.key === 'Enter') { e.preventDefault(); submitAuth(); }
     });
 
-    // Logout button (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;
-        streamBuffer = '';
         showAuthView();
         authInput.value = '';
       });
     }
 
-    // ─── Connect ───────────────────────────────────
+    // ── Connection ──
     function startConnection() {
       if (connection) { connection.close(); connection = null; }
       connection = createConnection({
@@ -781,37 +2354,33 @@
         sessionId: sessionId,
         onMessage: handleServerMessage,
         onStatus: updateStatus,
+        skipHistory: true, // standalone manages history per-thread
       });
     }
 
-    // ─── Mount ─────────────────────────────────────
+    // ── Mount / Destroy ──
     function mount(target) {
       (target || document.body).appendChild(container);
-      if (standalone) {
-        if (activeApiKey) {
-          // Have a stored key — try connecting directly
-          startConnection();
-        } else {
-          // No key — show auth panel
-          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 ─────────────────────────────────────────────
+  // ─── Auto-mount ──────────────────────────────────────────────────────────────
   if (script) {
-    var widget = createWidget({
-      standalone: STANDALONE,
-    });
+    var widget = createWidget({ standalone: STANDALONE });
 
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', function () {
@@ -821,7 +2390,6 @@
       widget.mount();
     }
 
-    // Expose for programmatic access
     window.CumulusChat = widget;
   }
 })();