@luckydraw/cumulus 0.14.0 → 0.15.1

package/dist/gateway/static/widget.js

@@ -0,0 +1,827 @@
+/**
+ * Cumulus Web Chat Widget — self-contained, no external dependencies.
+ * Embeddable via <script src="/widget.js" data-api-key="..."></script>
+ * or usable standalone at /chat.
+ *
+ * < 50KB 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') || '';
+
+  // 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`;
+  }
+
+  // Session ID — persisted in localStorage for returning visitors
+  function getSessionId() {
+    const key = 'cumulus-session-id';
+    let id = localStorage.getItem(key);
+    if (!id) {
+      id = 'web-' + Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
+      localStorage.setItem(key, id);
+    }
+    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 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 ───────────────────────────────
+  function renderMarkdown(text) {
+    let html = escapeHtml(text);
+
+    // Code blocks (``` ... ```)
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, function (_, lang, code) {
+      return '<pre><code>' + code + '</code></pre>';
+    });
+
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+    // Bold
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    // Italic
+    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+    // Links
+    html = html.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener">$1</a>'
+    );
+
+    // Line breaks
+    html = html.replace(/\n/g, '<br>');
+
+    return html;
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // ─── WebSocket Connection ───────────────────────────────────
+  function createConnection(opts) {
+    const { wsUrl, apiKey, sessionId, onMessage, onStatus } = opts;
+    let ws = null;
+    let reconnectTimer = null;
+    let reconnectDelay = 1000;
+
+    function connect() {
+      onStatus('connecting');
+      ws = new WebSocket(wsUrl);
+
+      ws.onopen = function () {
+        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.onmessage = function (event) {
+        try {
+          var data = JSON.parse(event.data);
+          onMessage(data);
+        } catch (e) {
+          console.error('[Cumulus] Invalid message:', e);
+        }
+      };
+
+      ws.onclose = function () {
+        onStatus('disconnected');
+        scheduleReconnect();
+      };
+
+      ws.onerror = function () {
+        // onclose will fire after this
+      };
+    }
+
+    function scheduleReconnect() {
+      if (reconnectTimer) return;
+      reconnectTimer = setTimeout(function () {
+        reconnectTimer = null;
+        reconnectDelay = Math.min(reconnectDelay * 1.5, 30000);
+        connect();
+      }, reconnectDelay);
+    }
+
+    function send(data) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(data));
+      }
+    }
+
+    function close() {
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+      if (ws) {
+        ws.onclose = null; // Prevent reconnect
+        ws.close();
+        ws = null;
+      }
+    }
+
+    connect();
+    return { send: send, close: close };
+  }
+
+  // ─── Widget UI ──────────────────────────────────────────────
+  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 activeApiKey = standalone ? getStoredApiKey() : API_KEY;
+
+    // Inject styles
+    const styleEl = document.createElement('style');
+    styleEl.textContent = STYLES;
+    document.head.appendChild(styleEl);
+
+    // State
+    var messages = [];
+    var streaming = false;
+    var streamBuffer = '';
+    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';
+
+    // Header
+    const 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>' +
+      (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');
+    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
+    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 ────────────────────
+    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();
+    }
+
+    // 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);
+    }
+
+    // ─── Rendering ─────────────────────────────────
+    function scrollToBottom() {
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    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 el = document.createElement('div');
+        el.className = 'cumulus-msg ' + msg.role;
+        if (msg.role === 'assistant') {
+          el.innerHTML = renderMarkdown(msg.content);
+        } else {
+          el.textContent = msg.content;
+        }
+        messagesEl.appendChild(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>';
+        } else {
+          streamEl.innerHTML =
+            '<span style="color:#888;font-style:italic">Thinking...</span><span class="cumulus-cursor"></span>';
+        }
+        messagesEl.appendChild(streamEl);
+      }
+
+      scrollToBottom();
+    }
+
+    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);
+      }
+    }
+
+    // ─── Message handling ──────────────────────────
+    function handleServerMessage(data) {
+      switch (data.type) {
+        case 'auth_ok':
+          showChatView();
+          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.';
+          }
+          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 (!streaming) {
+            streaming = true;
+            streamBuffer = '';
+          }
+          streamBuffer += data.text;
+          renderMessages();
+          break;
+
+        case 'segment':
+          // Tool use/result — could show in verbose mode later
+          break;
+
+        case 'done':
+          streaming = false;
+          messages.push({ role: 'assistant', content: data.response || streamBuffer });
+          streamBuffer = '';
+          renderMessages();
+          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 + ']' });
+          }
+          streamBuffer = '';
+          renderMessages();
+          break;
+      }
+    }
+
+    function sendMessage() {
+      var text = input.value.trim();
+      if (!text || streaming) return;
+
+      messages.push({ role: 'user', content: text });
+      input.value = '';
+      input.style.height = 'auto';
+      streaming = true;
+      streamBuffer = '';
+      renderMessages();
+
+      connection.send({
+        type: 'message',
+        threadName: sessionId,
+        message: text,
+      });
+    }
+
+    // ─── Event listeners ───────────────────────────
+    sendBtn.addEventListener('click', sendMessage);
+
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    // Auto-resize textarea
+    input.addEventListener('input', function () {
+      input.style.height = 'auto';
+      input.style.height = Math.min(input.scrollHeight, 120) + 'px';
+    });
+
+    // 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();
+        }
+      });
+
+      // Close button
+      var closeBtn = panel.querySelector('.cumulus-close-btn');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', function () {
+          panel.style.display = 'none';
+        });
+      }
+    }
+
+    // ─── Auth panel events ─────────────────────────
+    var authInput = authPanel.querySelector('[data-testid="webchat-auth-input"]');
+    var authBtn = 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();
+    }
+
+    authBtn.addEventListener('click', submitAuth);
+    authInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitAuth();
+      }
+    });
+
+    // Logout button (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;
+        streamBuffer = '';
+        showAuthView();
+        authInput.value = '';
+      });
+    }
+
+    // ─── Connect ───────────────────────────────────
+    function startConnection() {
+      if (connection) { connection.close(); connection = null; }
+      connection = createConnection({
+        wsUrl: wsUrl,
+        apiKey: activeApiKey,
+        sessionId: sessionId,
+        onMessage: handleServerMessage,
+        onStatus: updateStatus,
+      });
+    }
+
+    // ─── Mount ─────────────────────────────────────
+    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();
+        }
+      }
+    }
+
+    function destroy() {
+      if (connection) connection.close();
+      container.remove();
+    }
+
+    return { mount: mount, destroy: destroy, send: sendMessage };
+  }
+
+  // ─── Auto-mount ─────────────────────────────────────────────
+  if (script) {
+    var widget = createWidget({
+      standalone: STANDALONE,
+    });
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', function () {
+        widget.mount();
+      });
+    } else {
+      widget.mount();
+    }
+
+    // Expose for programmatic access
+    window.CumulusChat = widget;
+  }
+})();