@luckydraw/cumulus 0.15.0 → 0.15.2

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,293 +31,686 @@
     return id;
   }
 
-  // ─── 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;
-    }
+  function getStoredApiKey() {
+    return localStorage.getItem('cumulus-api-key') || '';
+  }
+  function setStoredApiKey(k) {
+    localStorage.setItem('cumulus-api-key', k);
+  }
+  function clearStoredApiKey() {
+    localStorage.removeItem('cumulus-api-key');
+  }
 
-    /* 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;
-    }
+  // ─── 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; }',
+  ].join('\n');
+
+  // ─── HTML Escaping ───────────────────────────────────────────────────────────
+  function escapeHtml(text) {
+    var div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
 
-    /* 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;
-    }
-  `;
+  // ─── 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.
 
-  // ─── Simple Markdown Renderer ───────────────────────────────
   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>');
 
-    // Italic
-    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    // Strikethrough
+    html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
+
+    // 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';
+  }
+
+  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);
+    });
   }
 
-  // ─── WebSocket Connection ───────────────────────────────────
+  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 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,
-          })
-        );
+        ws.send(JSON.stringify({ type: 'history', threadName: sessionId, limit: 50 }));
       };
 
       ws.onmessage = function (event) {
@@ -332,17 +723,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);
@@ -357,12 +749,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;
       }
@@ -372,88 +765,230 @@
     return { send: send, close: close };
   }
 
-  // ─── Widget UI ──────────────────────────────────────────────
+  // ─── Widget ──────────────────────────────────────────────────────────────────
   function createWidget(opts) {
-    const { standalone } = opts;
-    const sessionId = getSessionId();
-    const wsUrl = getWsUrl();
+    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 = [];
+    // ── State ──
+    var messages = [];          // { role, content, attachments? }
     var streaming = false;
+    var stopRequested = false;
     var streamBuffer = '';
     var connection = null;
     var connectionStatus = 'disconnected';
+    var authenticated = false;
+    var pendingAttachments = []; // { base64, mimeType, name, dataUrl, isImage }
 
-    // ─── DOM elements ──────────────────────────────
-    const container = document.createElement('div');
+    // ── Root container ──
+    var container = document.createElement('div');
     container.className = 'cumulus-widget';
 
-    // Build panel
-    const panel = document.createElement('div');
+    // ── Panel ──
+    var panel = document.createElement('div');
     panel.className = 'cumulus-panel ' + (standalone ? 'standalone' : 'floating');
     panel.style.display = standalone ? 'flex' : 'none';
+    panel.setAttribute('data-testid', 'webchat-panel');
 
-    // Header
-    const header = document.createElement('div');
+    // ── 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 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);
 
-    // Messages area
-    const messagesEl = document.createElement('div');
+    // ── 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
-    const inputArea = document.createElement('div');
+    // ── Input area ──
+    var inputArea = document.createElement('div');
     inputArea.className = 'cumulus-input-area';
-    const input = document.createElement('textarea');
+    inputArea.style.display = 'none';
+
+    // Attachment strip (conditionally shown)
+    var attachStrip = document.createElement('div');
+    attachStrip.className = 'cumulus-attach-strip';
+    attachStrip.setAttribute('data-testid', 'webchat-attach-strip');
+    attachStrip.style.display = 'none';
+    inputArea.appendChild(attachStrip);
+
+    // Input row
+    var inputRow = document.createElement('div');
+    inputRow.className = 'cumulus-input-row';
+
+    // Hidden file input
+    var fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = true;
+    fileInput.accept = 'image/*,.pdf,.txt,.md,.js,.ts,.py,.json,.csv';
+    fileInput.style.display = 'none';
+    fileInput.setAttribute('data-testid', 'webchat-file-input');
+
+    // Attach button
+    var attachBtn = document.createElement('button');
+    attachBtn.className = 'cumulus-attach-btn';
+    attachBtn.setAttribute('data-testid', 'webchat-attach-btn');
+    attachBtn.setAttribute('title', 'Attach files');
+    attachBtn.textContent = '+';
+
+    // Textarea
+    var input = document.createElement('textarea');
     input.className = 'cumulus-input';
     input.setAttribute('data-testid', 'webchat-input');
-    input.placeholder = 'Type a message...';
+    input.placeholder = 'Type a message…';
     input.rows = 1;
-    const sendBtn = document.createElement('button');
+
+    // Send/Stop button
+    var sendBtn = document.createElement('button');
     sendBtn.className = 'cumulus-send-btn';
     sendBtn.setAttribute('data-testid', 'webchat-send');
     sendBtn.textContent = 'Send';
-    inputArea.appendChild(input);
-    inputArea.appendChild(sendBtn);
+
+    inputRow.appendChild(fileInput);
+    inputRow.appendChild(attachBtn);
+    inputRow.appendChild(input);
+    inputRow.appendChild(sendBtn);
+    inputArea.appendChild(inputRow);
     panel.appendChild(inputArea);
 
     container.appendChild(panel);
 
-    // Floating bubble (embeddable mode only)
+    // ── Floating bubble (embedded mode only) ──
     var bubble = null;
     if (!standalone) {
       bubble = document.createElement('button');
       bubble.className = 'cumulus-bubble';
       bubble.setAttribute('data-testid', 'webchat-bubble');
+      bubble.setAttribute('title', 'Open chat');
       bubble.innerHTML =
         '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>';
       container.appendChild(bubble);
     }
 
-    // ─── Rendering ─────────────────────────────────
+    // ── 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';
+      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';
+      var logoutBtn = panel.querySelector('[data-testid="webchat-logout"]');
+      if (logoutBtn) logoutBtn.style.display = 'inline-block';
+      input.focus();
+    }
+
+    // ── Rendering ──
     function scrollToBottom() {
       messagesEl.scrollTop = messagesEl.scrollHeight;
     }
 
+    function isWideUserMessage(content) {
+      // Wide if it contains a code fence or has more than 3 lines
+      if (/```/.test(content)) return true;
+      var lineCount = (content.match(/\n/g) || []).length + 1;
+      return lineCount > 3;
+    }
+
+    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>';
+        }
+        // Wire up copy buttons
+        el.querySelectorAll('.code-block-copy-btn').forEach(function (btn) {
+          btn.addEventListener('click', function () {
+            var targetId = btn.getAttribute('data-copy-target');
+            var codeEl = el.querySelector('[data-code-id="' + targetId + '"]');
+            if (codeEl && navigator.clipboard) {
+              navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
+                btn.textContent = 'Copied!';
+                setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+              });
+            }
+          });
+        });
+      } 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 = '';
 
@@ -464,54 +999,132 @@
 
       for (var i = 0; i < messages.length; i++) {
         var msg = messages[i];
-        var el = document.createElement('div');
-        el.className = 'cumulus-msg ' + msg.role;
-        if (msg.role === 'assistant') {
-          el.innerHTML = renderMarkdown(msg.content);
+        var row = document.createElement('div');
+        row.className = 'cumulus-msg-row';
+
+        if (msg.role === 'user') {
+          row.appendChild(buildUserMsgEl(msg));
         } else {
-          el.textContent = msg.content;
+          row.appendChild(buildAssistantMsgEl(msg.content, false));
         }
-        messagesEl.appendChild(el);
+        messagesEl.appendChild(row);
       }
 
-      // 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>';
-        } else {
-          streamEl.innerHTML =
-            '<span style="color:#888;font-style:italic">Thinking...</span><span class="cumulus-cursor"></span>';
-        }
-        messagesEl.appendChild(streamEl);
+        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 (dot) dot.className = 'cumulus-status-dot ' + status;
+      if (text) text.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+    }
+
+    // ── Attachment strip ──
+    function renderAttachStrip() {
+      attachStrip.innerHTML = '';
+      if (pendingAttachments.length === 0) {
+        attachStrip.style.display = 'none';
+        return;
       }
-      if (text) {
-        text.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+      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();
     }
 
-    // ─── Message handling ──────────────────────────
+    // ── Message handling ──
     function handleServerMessage(data) {
       switch (data.type) {
         case 'auth_ok':
+          showChatView();
           break;
 
         case 'auth_error':
           console.error('[Cumulus] Auth failed:', data.error);
+          if (standalone) {
+            clearStoredApiKey();
+            activeApiKey = '';
+            if (connection) { connection.close(); connection = null; }
+            showAuthView();
+            var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
+            if (errEl) errEl.textContent = 'Authentication failed. Check your API key.';
+          }
           break;
 
         case 'history':
@@ -524,57 +1137,103 @@
           break;
 
         case 'token':
+          if (stopRequested) break; // discard after stop
           if (!streaming) {
             streaming = true;
             streamBuffer = '';
+            updateSendBtn();
           }
           streamBuffer += data.text;
           renderMessages();
           break;
 
         case 'segment':
-          // Tool use/result — could show in verbose mode later
+          // Tool use/segment info — reserved for future verbose display
           break;
 
         case 'done':
+          if (stopRequested) {
+            // Stopped by user — finalize with what we have
+            stopRequested = false;
+            streaming = false;
+            if (streamBuffer) {
+              messages.push({ role: 'assistant', content: streamBuffer });
+            }
+            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 + ']' });
+            messages.push({ role: 'assistant', content: streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
           } else {
-            messages.push({ role: 'assistant', content: '[Error: ' + data.error + ']' });
+            messages.push({ role: 'assistant', content: '[Error: ' + (data.error || 'Unknown error') + ']' });
           }
           streamBuffer = '';
+          updateSendBtn();
           renderMessages();
           break;
       }
     }
 
     function sendMessage() {
+      // If streaming, treat as Stop
+      if (streaming) {
+        stopRequested = true;
+        streaming = false;
+        updateSendBtn();
+        // Finalize current buffer
+        if (streamBuffer) {
+          messages.push({ role: 'assistant', content: streamBuffer + ' [stopped]' });
+          streamBuffer = '';
+        }
+        renderMessages();
+        return;
+      }
+
       var text = input.value.trim();
-      if (!text || streaming) return;
+      if (!text && pendingAttachments.length === 0) return;
+      if (!connection) return;
 
-      messages.push({ role: 'user', content: text });
+      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();
 
-      connection.send({
+      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,
-      });
+        message: text || ' ',
+      };
+      if (imagePayload.length > 0) payload.images = imagePayload;
+
+      connection.send(payload);
     }
 
-    // ─── Event listeners ───────────────────────────
+    // ── Event listeners ──
     sendBtn.addEventListener('click', sendMessage);
 
     input.addEventListener('keydown', function (e) {
@@ -584,13 +1243,48 @@
       }
     });
 
-    // Auto-resize textarea
     input.addEventListener('input', function () {
       input.style.height = 'auto';
       input.style.height = Math.min(input.scrollHeight, 120) + 'px';
     });
 
-    // Bubble toggle (embeddable mode)
+    // Paste handler
+    input.addEventListener('paste', function (e) {
+      var items = e.clipboardData && e.clipboardData.items;
+      if (!items) return;
+
+      var hasNonText = false;
+      var filesToAdd = [];
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        if (item.kind === 'file') {
+          hasNonText = true;
+          var file = item.getAsFile();
+          if (file) filesToAdd.push(file);
+        }
+      }
+
+      if (filesToAdd.length > 0) {
+        e.preventDefault(); // prevent default paste of binary data
+        addFilesToPending(filesToAdd);
+      }
+      // If only text, let default browser paste behavior handle it
+    });
+
+    // File input change
+    fileInput.addEventListener('change', function () {
+      if (fileInput.files && fileInput.files.length > 0) {
+        addFilesToPending(Array.from(fileInput.files));
+        fileInput.value = ''; // reset so same file can be re-added
+      }
+    });
+
+    // Attach button click
+    attachBtn.addEventListener('click', function () {
+      fileInput.click();
+    });
+
+    // Bubble toggle (embedded mode)
     if (bubble) {
       bubble.addEventListener('click', function () {
         var showing = panel.style.display !== 'none';
@@ -604,7 +1298,6 @@
         }
       });
 
-      // Close button
       var closeBtn = panel.querySelector('.cumulus-close-btn');
       if (closeBtn) {
         closeBtn.addEventListener('click', function () {
@@ -613,23 +1306,66 @@
       }
     }
 
-    // ─── Connect ───────────────────────────────────
+    // ── Auth panel events ──
+    var authInput = authPanel.querySelector('[data-testid="webchat-auth-input"]');
+    var authSubmitBtn = authPanel.querySelector('[data-testid="webchat-auth-submit"]');
+
+    function submitAuth() {
+      var key = authInput.value.trim();
+      if (!key) return;
+      var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
+      if (errEl) errEl.textContent = '';
+      activeApiKey = key;
+      setStoredApiKey(key);
+      startConnection();
+    }
+
+    authSubmitBtn.addEventListener('click', submitAuth);
+    authInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); submitAuth(); }
+    });
+
+    // Logout (standalone only)
+    var logoutBtn = panel.querySelector('[data-testid="webchat-logout"]');
+    if (logoutBtn) {
+      logoutBtn.addEventListener('click', function () {
+        clearStoredApiKey();
+        activeApiKey = '';
+        if (connection) { connection.close(); connection = null; }
+        messages = [];
+        streaming = false;
+        stopRequested = false;
+        streamBuffer = '';
+        pendingAttachments = [];
+        renderAttachStrip();
+        updateSendBtn();
+        showAuthView();
+        authInput.value = '';
+      });
+    }
+
+    // ── Connection ──
     function startConnection() {
+      if (connection) { connection.close(); connection = null; }
       connection = createConnection({
         wsUrl: wsUrl,
-        apiKey: API_KEY,
+        apiKey: activeApiKey,
         sessionId: sessionId,
         onMessage: handleServerMessage,
         onStatus: updateStatus,
       });
     }
 
-    // ─── Mount ─────────────────────────────────────
+    // ── Mount / Destroy ──
     function mount(target) {
       (target || document.body).appendChild(container);
       if (standalone) {
-        startConnection();
-        input.focus();
+        if (activeApiKey) {
+          startConnection();
+        } else {
+          showAuthView();
+          authInput.focus();
+        }
       }
     }
 
@@ -641,11 +1377,9 @@
     return { mount: mount, destroy: destroy, send: sendMessage };
   }
 
-  // ─── Auto-mount ─────────────────────────────────────────────
+  // ─── Auto-mount ──────────────────────────────────────────────────────────────
   if (script) {
-    var widget = createWidget({
-      standalone: STANDALONE,
-    });
+    var widget = createWidget({ standalone: STANDALONE });
 
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', function () {
@@ -655,7 +1389,6 @@
       widget.mount();
     }
 
-    // Expose for programmatic access
     window.CumulusChat = widget;
   }
 })();