@luckydraw/cumulus 0.18.2 → 0.20.0

package/dist/gateway/static/widget.js

@@ -502,6 +502,84 @@
     '  border-top: 1px solid #333;',
     '  flex-shrink: 0;',
     '}',
+
+    /* ── Project items (in sidebar) ── */
+    '.cumulus-project-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-project-item:hover { background: #2a2a2a; }',
+    '.cumulus-project-item.selected {',
+    '  border-left-color: #7c3aed;',
+    '  background: #1e1a2e;',
+    '  color: #e0e0e0;',
+    '}',
+    '.cumulus-project-icon {',
+    '  width: 7px; height: 7px; border-radius: 2px;',
+    '  background: #7c3aed; flex-shrink: 0;',
+    '}',
+    '.cumulus-project-name {',
+    '  flex: 1; overflow: hidden;',
+    '  text-overflow: ellipsis; white-space: nowrap;',
+    '}',
+    '.cumulus-project-badge {',
+    '  font-size: 10px; color: #888;',
+    '  background: #2a2a2a; border: 1px solid #3a3a3a;',
+    '  border-radius: 8px; padding: 0 5px;',
+    '  flex-shrink: 0; min-width: 1.6em; text-align: center;',
+    '}',
+    '.cumulus-new-project-btn {',
+    '  width: 100%;',
+    '  background: none; border: none;',
+    '  color: #666; padding: 5px 12px;',
+    '  font-size: 12px; cursor: pointer;',
+    '  font-family: inherit; text-align: left;',
+    '  border-top: 1px solid #2a2a2a;',
+    '}',
+    '.cumulus-new-project-btn:hover { color: #a78bfa; }',
+    '.cumulus-new-project-form {',
+    '  padding: 6px 10px;',
+    '  display: flex; flex-direction: column; gap: 5px;',
+    '  border-top: 1px solid #2a2a2a;',
+    '}',
+    '.cumulus-new-project-input {',
+    '  width: 100%;',
+    '  background: #3d3d3d; border: 1px solid #7c3aed;',
+    '  border-radius: 0.45em; color: #e0e0e0;',
+    '  padding: 6px 8px; font-size: 12px;',
+    '  font-family: inherit; outline: none;',
+    '}',
+    '.cumulus-new-project-select {',
+    '  width: 100%;',
+    '  background: #3d3d3d; border: 1px solid #4a4a4a;',
+    '  border-radius: 0.45em; color: #ccc;',
+    '  padding: 5px 7px; font-size: 12px;',
+    '  font-family: inherit; outline: none; cursor: pointer;',
+    '}',
+    '.cumulus-new-project-select:focus { border-color: #7c3aed; }',
+    '.cumulus-new-project-actions {',
+    '  display: flex; gap: 5px;',
+    '}',
+    '.cumulus-new-project-create-btn {',
+    '  flex: 1; background: #7c3aed; border: none;',
+    '  border-radius: 0.45em; color: white;',
+    '  padding: 5px 8px; font-size: 12px;',
+    '  cursor: pointer; font-family: inherit; font-weight: 600;',
+    '}',
+    '.cumulus-new-project-create-btn:hover { background: #6d28d9; }',
+    '.cumulus-new-project-cancel-btn {',
+    '  background: #2a2a2a; border: 1px solid #3a3a3a;',
+    '  border-radius: 0.45em; color: #888;',
+    '  padding: 5px 8px; font-size: 12px;',
+    '  cursor: pointer; font-family: inherit;',
+    '}',
+    '.cumulus-new-project-cancel-btn:hover { background: #333; color: #ccc; }',
+
     '.cumulus-new-thread-btn {',
     '  width: 100%;',
     '  background: #2a2a2a; border: 1px solid #3a3a3a;',
@@ -804,7 +882,6 @@
     '  .cumulus-standalone-empty-hint { display: none; }',
 
     '}',
-
   ].join('\n');
 
   // ─── HTML Escaping ───────────────────────────────────────────────────────────
@@ -898,11 +975,19 @@
   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 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>'
     );
   }
@@ -942,16 +1027,32 @@
     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>';
+    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>';
   }
@@ -962,7 +1063,9 @@
     // 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(); });
+    return parts.map(function (c) {
+      return c.trim();
+    });
   }
 
   function renderBlockquotes(html) {
@@ -1001,7 +1104,15 @@
           listLines.push(lines[i].replace(/^[ \t]*[-*+][ \t]+/, ''));
           i++;
         }
-        result.push('<ul>' + listLines.map(function (l) { return '<li>' + l + '</li>'; }).join('') + '</ul>');
+        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])) {
@@ -1010,9 +1121,16 @@
           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(
+          '<ol>' +
+            olLines
+              .map(function (l) {
+                return '<li>' + l + '</li>';
+              })
+              .join('') +
+            '</ol>'
+        );
+      } else {
         result.push(lines[i]);
         i++;
       }
@@ -1038,7 +1156,11 @@
       return '<p>' + inner + '</p>';
     });
 
-    return parts.filter(function (p) { return p !== ''; }).join('\n');
+    return parts
+      .filter(function (p) {
+        return p !== '';
+      })
+      .join('\n');
   }
 
   // ─── Attachment helpers ──────────────────────────────────────────────────────
@@ -1054,7 +1176,11 @@
         // 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 });
+        resolve({
+          base64: result.slice(comma + 1),
+          mimeType: file.type || 'application/octet-stream',
+          name: file.name,
+        });
       };
       reader.onerror = reject;
       reader.readAsDataURL(file);
@@ -1064,7 +1190,9 @@
   function readFileAsDataUrl(file) {
     return new Promise(function (resolve, reject) {
       var reader = new FileReader();
-      reader.onload = function (e) { resolve(e.target.result); };
+      reader.onload = function (e) {
+        resolve(e.target.result);
+      };
       reader.onerror = reject;
       reader.readAsDataURL(file);
     });
@@ -1090,7 +1218,10 @@
       ws = new WebSocket(wsUrl);
 
       ws.onopen = function () {
-        if (destroyed) { ws.close(); return; }
+        if (destroyed) {
+          ws.close();
+          return;
+        }
         onStatus('connected');
         reconnectDelay = 1000;
         ws.send(JSON.stringify({ type: 'auth', apiKey: apiKey }));
@@ -1193,8 +1324,8 @@
       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>' +
         '<button class="cumulus-close-btn" data-testid="webchat-close">&times;</button>';
       panel.appendChild(header);
@@ -1347,7 +1478,9 @@
               if (codeEl && navigator.clipboard) {
                 navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
                   btn.textContent = 'Copied!';
-                  setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+                  setTimeout(function () {
+                    btn.textContent = 'Copy';
+                  }, 2000);
                 });
               }
             });
@@ -1363,7 +1496,8 @@
       function renderMessages() {
         messagesEl.innerHTML = '';
         if (messages.length === 0 && !streaming) {
-          messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+          messagesEl.innerHTML =
+            '<div class="cumulus-empty">Send a message to start chatting</div>';
           return;
         }
         for (var i = 0; i < messages.length; i++) {
@@ -1519,9 +1653,15 @@
             stopRequested = false;
             streaming = false;
             if (streamBuffer) {
-              messages.push({ role: 'assistant', content: streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
+              messages.push({
+                role: 'assistant',
+                content: streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']',
+              });
             } else {
-              messages.push({ role: 'assistant', content: '[Error: ' + (data.error || 'Unknown error') + ']' });
+              messages.push({
+                role: 'assistant',
+                content: '[Error: ' + (data.error || 'Unknown error') + ']',
+              });
             }
             streamBuffer = '';
             updateSendBtn();
@@ -1558,8 +1698,12 @@
         updateSendBtn();
         renderMessages();
         var imagePayload = attachSnapshot
-          .filter(function (a) { return a.isImage; })
-          .map(function (a) { return { mimeType: a.mimeType, base64: a.base64 }; });
+          .filter(function (a) {
+            return a.isImage;
+          })
+          .map(function (a) {
+            return { mimeType: a.mimeType, base64: a.base64 };
+          });
         var payload = {
           type: 'message',
           threadName: sessionId,
@@ -1628,7 +1772,10 @@
 
       // Embedded mode: no auth panel handling needed (API key from attribute)
       function startConnection() {
-        if (connection) { connection.close(); connection = null; }
+        if (connection) {
+          connection.close();
+          connection = null;
+        }
         connection = createConnection({
           wsUrl: wsUrl,
           apiKey: activeApiKey,
@@ -1666,6 +1813,9 @@
     // Thread list from server: [{ name, messageCount, lastActivity }]
     var allThreads = [];
 
+    // Project list from server: [{ name, path, template, threadCount, primaryThread, lastActivity, createdAt }]
+    var allProjects = [];
+
     // Currently visible panel names (ordered, max 3)
     var visibleThreads = [];
 
@@ -1704,8 +1854,8 @@
     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 class="cumulus-status-dot" data-testid="webchat-status-dot"></span>' +
+      '<span data-testid="webchat-status-text">Disconnected</span>' +
       '</span>';
     authWrapper.appendChild(authHeader);
 
@@ -1722,7 +1872,8 @@
 
     // App layout — shown after auth
     var appLayout = document.createElement('div');
-    appLayout.style.cssText = 'display:none; flex-direction:column; width:100%; max-width:100vw; height:100vh; height:100dvh; overflow:hidden;';
+    appLayout.style.cssText =
+      'display:none; flex-direction:column; width:100%; max-width:100vw; height:100vh; height:100dvh; overflow:hidden;';
 
     // Top bar
     var topbar = document.createElement('div');
@@ -1731,11 +1882,11 @@
       '<button class="cumulus-sidebar-toggle" data-testid="webchat-sidebar-toggle" aria-label="Toggle sidebar">&#9776;</button>' +
       '<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>' +
+      '<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);
 
@@ -1778,6 +1929,52 @@
     sidebarFooter.appendChild(newThreadInput);
     sidebar.appendChild(sidebarFooter);
 
+    // ── New project form nodes (persistent; re-appended into projects section on render) ──
+    var newProjectBtn = document.createElement('button');
+    newProjectBtn.className = 'cumulus-new-project-btn';
+    newProjectBtn.setAttribute('data-testid', 'webchat-project-new');
+    newProjectBtn.textContent = '+ New project';
+
+    var newProjectForm = document.createElement('div');
+    newProjectForm.className = 'cumulus-new-project-form';
+    newProjectForm.style.display = 'none';
+    newProjectForm.setAttribute('data-testid', 'webchat-project-new-form');
+
+    var newProjectNameInput = document.createElement('input');
+    newProjectNameInput.className = 'cumulus-new-project-input';
+    newProjectNameInput.setAttribute('data-testid', 'webchat-project-new-name');
+    newProjectNameInput.placeholder = 'Project name\u2026';
+    newProjectNameInput.type = 'text';
+
+    var newProjectTemplateSelect = document.createElement('select');
+    newProjectTemplateSelect.className = 'cumulus-new-project-select';
+    newProjectTemplateSelect.setAttribute('data-testid', 'webchat-project-new-template');
+    [['default', 'Default'], ['web-app', 'Web App']].forEach(function (opt) {
+      var el = document.createElement('option');
+      el.value = opt[0];
+      el.textContent = opt[1];
+      newProjectTemplateSelect.appendChild(el);
+    });
+
+    var newProjectActions = document.createElement('div');
+    newProjectActions.className = 'cumulus-new-project-actions';
+
+    var newProjectCreateBtn = document.createElement('button');
+    newProjectCreateBtn.className = 'cumulus-new-project-create-btn';
+    newProjectCreateBtn.setAttribute('data-testid', 'webchat-project-create');
+    newProjectCreateBtn.textContent = 'Create';
+
+    var newProjectCancelBtn = document.createElement('button');
+    newProjectCancelBtn.className = 'cumulus-new-project-cancel-btn';
+    newProjectCancelBtn.setAttribute('data-testid', 'webchat-project-cancel');
+    newProjectCancelBtn.textContent = 'Cancel';
+
+    newProjectActions.appendChild(newProjectCreateBtn);
+    newProjectActions.appendChild(newProjectCancelBtn);
+    newProjectForm.appendChild(newProjectNameInput);
+    newProjectForm.appendChild(newProjectTemplateSelect);
+    newProjectForm.appendChild(newProjectActions);
+
     // ── Content area ──
     var contentArea = document.createElement('div');
     contentArea.className = 'cumulus-content-area';
@@ -1793,7 +1990,9 @@
     appLayout.appendChild(appRow);
 
     // ── Mobile sidebar toggle ──
-    var isMobile = function () { return window.innerWidth <= 768; };
+    var isMobile = function () {
+      return window.innerWidth <= 768;
+    };
 
     function openSidebar() {
       sidebar.classList.add('open');
@@ -1841,7 +2040,11 @@
       visibleThreads = [];
       threadStates = {};
       allThreads = [];
-      if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
+      allProjects = [];
+      if (refreshTimer) {
+        clearInterval(refreshTimer);
+        refreshTimer = null;
+      }
       var errEl = authPanel.querySelector('[data-testid="webchat-auth-error"]');
       if (errEl) errEl.textContent = '';
     }
@@ -1861,6 +2064,14 @@
     function requestThreadList() {
       if (connection) {
         connection.send({ type: 'threads' });
+        connection.send({ type: 'projects' });
+      }
+    }
+
+    // ── Project list ──
+    function requestProjectList() {
+      if (connection) {
+        connection.send({ type: 'projects' });
       }
     }
 
@@ -1873,6 +2084,39 @@
         visibleSet[visibleThreads[i]] = true;
       }
 
+      // Projects section: shown above active threads
+      var projectsLabel = document.createElement('div');
+      projectsLabel.className = 'cumulus-sidebar-section-label';
+      projectsLabel.textContent = 'Projects';
+      sidebarScroll.appendChild(projectsLabel);
+
+      var projectsSection = document.createElement('div');
+      projectsSection.setAttribute('data-testid', 'webchat-sidebar-projects');
+
+      if (allProjects.length === 0) {
+        var projectsEmptyNote = document.createElement('div');
+        projectsEmptyNote.style.cssText =
+          'padding: 4px 12px 2px; font-size: 12px; color: #555; font-style: italic;';
+        projectsEmptyNote.textContent = 'No projects yet';
+        projectsSection.appendChild(projectsEmptyNote);
+      } else {
+        allProjects.forEach(function (p) {
+          projectsSection.appendChild(buildProjectItem(p, visibleSet));
+        });
+      }
+
+      // + New project button / form (persistent nodes re-appended each render)
+      newProjectBtn.style.display = newProjectCreating ? 'none' : 'block';
+      newProjectForm.style.display = newProjectCreating ? 'flex' : 'none';
+      projectsSection.appendChild(newProjectBtn);
+      projectsSection.appendChild(newProjectForm);
+
+      sidebarScroll.appendChild(projectsSection);
+
+      var projectsDivider = document.createElement('hr');
+      projectsDivider.className = 'cumulus-sidebar-divider';
+      sidebarScroll.appendChild(projectsDivider);
+
       // Active section: threads currently visible as panels
       var activeThreads = visibleThreads.slice(); // preserve order
       if (activeThreads.length > 0) {
@@ -1904,7 +2148,8 @@
 
       if (allThreads.length === 0) {
         var emptyNote = document.createElement('div');
-        emptyNote.style.cssText = 'padding: 8px 12px; font-size: 12px; color: #555; font-style: italic;';
+        emptyNote.style.cssText =
+          'padding: 8px 12px; font-size: 12px; color: #555; font-style: italic;';
         emptyNote.textContent = 'No threads yet';
         allSection.appendChild(emptyNote);
       } else {
@@ -1913,7 +2158,9 @@
           return (b.lastActivity || 0) - (a.lastActivity || 0);
         });
         sorted.forEach(function (t) {
-          allSection.appendChild(buildThreadItem(t.name, visibleSet[t.name] || false, false, t.messageCount));
+          allSection.appendChild(
+            buildThreadItem(t.name, visibleSet[t.name] || false, false, t.messageCount)
+          );
         });
       }
       sidebarScroll.appendChild(allSection);
@@ -1954,6 +2201,41 @@
       return item;
     }
 
+    function buildProjectItem(project, visibleSet) {
+      var primaryThread = project.primaryThread;
+      var isSelected = primaryThread ? (visibleSet[primaryThread] || false) : false;
+
+      var item = document.createElement('div');
+      item.className = 'cumulus-project-item' + (isSelected ? ' selected' : '');
+      item.setAttribute('data-testid', 'webchat-project-item');
+      item.setAttribute('data-project-name', project.name);
+
+      var icon = document.createElement('span');
+      icon.className = 'cumulus-project-icon';
+      item.appendChild(icon);
+
+      var nameEl = document.createElement('span');
+      nameEl.className = 'cumulus-project-name';
+      nameEl.textContent = project.name;
+      nameEl.setAttribute('title', project.name);
+      item.appendChild(nameEl);
+
+      if (project.threadCount !== undefined && project.threadCount !== null) {
+        var badge = document.createElement('span');
+        badge.className = 'cumulus-project-badge';
+        badge.textContent = project.threadCount;
+        item.appendChild(badge);
+      }
+
+      item.addEventListener('click', function () {
+        if (primaryThread) {
+          soloThread(primaryThread);
+        }
+      });
+
+      return item;
+    }
+
     // ── Panel management ──
     function soloThread(name) {
       visibleThreads = [name];
@@ -1996,7 +2278,10 @@
         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; }
+        if (state) {
+          state._renderMessages = null;
+          state._updateSendBtn = null;
+        }
         renderSidebar();
         renderContentArea();
       }
@@ -2015,7 +2300,10 @@
       // 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; }
+        if (_cs) {
+          _cs._renderMessages = null;
+          _cs._updateSendBtn = null;
+        }
       }
       contentArea.innerHTML = '';
 
@@ -2209,7 +2497,9 @@
               if (codeEl && navigator.clipboard) {
                 navigator.clipboard.writeText(codeEl.textContent || '').then(function () {
                   btn.textContent = 'Copied!';
-                  setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
+                  setTimeout(function () {
+                    btn.textContent = 'Copy';
+                  }, 2000);
                 });
               }
             });
@@ -2225,7 +2515,8 @@
       function renderPanelMessages() {
         messagesEl.innerHTML = '';
         if (state.messages.length === 0 && !state.streaming) {
-          messagesEl.innerHTML = '<div class="cumulus-empty">Send a message to start chatting</div>';
+          messagesEl.innerHTML =
+            '<div class="cumulus-empty">Send a message to start chatting</div>';
           return;
         }
         for (var i = 0; i < state.messages.length; i++) {
@@ -2358,8 +2649,12 @@
         renderPanelMessages();
 
         var imagePayload = attachSnapshot
-          .filter(function (a) { return a.isImage; })
-          .map(function (a) { return { mimeType: a.mimeType, base64: a.base64 }; });
+          .filter(function (a) {
+            return a.isImage;
+          })
+          .map(function (a) {
+            return { mimeType: a.mimeType, base64: a.base64 };
+          });
 
         var payload = {
           type: 'message',
@@ -2439,7 +2734,10 @@
     function openIncludeOverlay(panel, threadName) {
       // Remove existing overlay if any
       var existing = panel.querySelector('.cumulus-overlay');
-      if (existing) { existing.remove(); return; }
+      if (existing) {
+        existing.remove();
+        return;
+      }
 
       var overlay = document.createElement('div');
       overlay.className = 'cumulus-overlay';
@@ -2453,7 +2751,9 @@
       var closeBtn = document.createElement('button');
       closeBtn.className = 'cumulus-overlay-close';
       closeBtn.textContent = '\xD7';
-      closeBtn.addEventListener('click', function () { overlay.remove(); });
+      closeBtn.addEventListener('click', function () {
+        overlay.remove();
+      });
       header.appendChild(closeBtn);
       overlay.appendChild(header);
 
@@ -2490,15 +2790,22 @@
       addBtn.addEventListener('click', function () {
         var filePath = addInput.value.trim();
         if (!filePath) return;
-        connection && connection.send(JSON.stringify({
-          type: 'include_add', threadName: threadName,
-          filePath: filePath, scope: currentScope,
-        }));
+        connection &&
+          connection.send(
+            JSON.stringify({
+              type: 'include_add',
+              threadName: threadName,
+              filePath: filePath,
+              scope: currentScope,
+            })
+          );
         addInput.value = '';
       });
 
       addInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter') { addBtn.click(); }
+        if (e.key === 'Enter') {
+          addBtn.click();
+        }
       });
 
       addRow.appendChild(addInput);
@@ -2514,7 +2821,8 @@
       panel.appendChild(overlay);
 
       // Request the list
-      connection && connection.send(JSON.stringify({ type: 'include_list', threadName: threadName }));
+      connection &&
+        connection.send(JSON.stringify({ type: 'include_list', threadName: threadName }));
     }
 
     function renderIncludeList(panel, threadName, files) {
@@ -2525,7 +2833,8 @@
 
       body.innerHTML = '';
       if (files.length === 0) {
-        body.innerHTML = '<div class="cumulus-overlay-empty">No always-include files configured.</div>';
+        body.innerHTML =
+          '<div class="cumulus-overlay-empty">No always-include files configured.</div>';
         return;
       }
 
@@ -2549,9 +2858,14 @@
         removeBtn.textContent = '\xD7';
         removeBtn.setAttribute('title', 'Remove');
         removeBtn.addEventListener('click', function () {
-          connection && connection.send(JSON.stringify({
-            type: 'include_remove', threadName: threadName, filePath: f.path,
-          }));
+          connection &&
+            connection.send(
+              JSON.stringify({
+                type: 'include_remove',
+                threadName: threadName,
+                filePath: f.path,
+              })
+            );
         });
         item.appendChild(removeBtn);
 
@@ -2562,7 +2876,10 @@
     // ── Revert overlay ──
     function openRevertOverlay(panel, threadName) {
       var existing = panel.querySelector('.cumulus-overlay');
-      if (existing) { existing.remove(); return; }
+      if (existing) {
+        existing.remove();
+        return;
+      }
 
       var overlay = document.createElement('div');
       overlay.className = 'cumulus-overlay';
@@ -2576,7 +2893,9 @@
       var closeBtn = document.createElement('button');
       closeBtn.className = 'cumulus-overlay-close';
       closeBtn.textContent = '\xD7';
-      closeBtn.addEventListener('click', function () { overlay.remove(); });
+      closeBtn.addEventListener('click', function () {
+        overlay.remove();
+      });
       header.appendChild(closeBtn);
       overlay.appendChild(header);
 
@@ -2591,7 +2910,8 @@
       panel.appendChild(overlay);
 
       // Request the turn list
-      connection && connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
+      connection &&
+        connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
     }
 
     function renderRevertList(panel, threadName, turns) {
@@ -2670,7 +2990,8 @@
       cancelBtn.textContent = 'Cancel';
       cancelBtn.addEventListener('click', function () {
         // Re-request list
-        connection && connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
+        connection &&
+          connection.send(JSON.stringify({ type: 'revert_list', threadName: threadName }));
       });
       actions.appendChild(cancelBtn);
 
@@ -2681,10 +3002,14 @@
       revertBtn.addEventListener('click', function () {
         revertBtn.disabled = true;
         revertBtn.textContent = 'Reverting\u2026';
-        connection && connection.send(JSON.stringify({
-          type: 'revert_execute', threadName: threadName,
-          targetMessageId: turn.userMessageId,
-        }));
+        connection &&
+          connection.send(
+            JSON.stringify({
+              type: 'revert_execute',
+              threadName: threadName,
+              targetMessageId: turn.userMessageId,
+            })
+          );
       });
       actions.appendChild(revertBtn);
 
@@ -2712,7 +3037,10 @@
           console.error('[Cumulus] Auth failed:', data.error);
           clearStoredApiKey();
           activeApiKey = '';
-          if (connection) { connection.close(); connection = null; }
+          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.';
@@ -2726,13 +3054,34 @@
           }
           break;
 
+        case 'projects':
+          // Server response to { type: 'projects' } request
+          if (data.projects) {
+            allProjects = data.projects;
+            renderSidebar();
+          }
+          break;
+
+        case 'project_created':
+          // Server confirms new project; refresh project list and open primary thread
+          if (data.project) {
+            requestProjectList();
+            if (data.project.primaryThread) {
+              soloThread(data.project.primaryThread);
+            }
+          }
+          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 (allThreads[i].name === data.threadName) {
+                exists = true;
+                break;
+              }
             }
             if (!exists) {
               allThreads.push({ name: data.threadName, messageCount: 0, lastActivity: Date.now() });
@@ -2787,7 +3136,10 @@
               break;
             }
             state.streaming = false;
-            state.messages.push({ role: 'assistant', content: data.response || state.streamBuffer });
+            state.messages.push({
+              role: 'assistant',
+              content: data.response || state.streamBuffer,
+            });
             state.streamBuffer = '';
             updateThreadActivity(data.threadName);
             refreshThreadPanel(data.threadName);
@@ -2800,9 +3152,16 @@
             state.stopRequested = false;
             state.streaming = false;
             if (state.streamBuffer) {
-              state.messages.push({ role: 'assistant', content: state.streamBuffer + '\n\n[Error: ' + (data.error || 'Unknown error') + ']' });
+              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.messages.push({
+                role: 'assistant',
+                content: '[Error: ' + (data.error || 'Unknown error') + ']',
+              });
             }
             state.streamBuffer = '';
             refreshThreadPanel(data.threadName);
@@ -2840,15 +3199,22 @@
                 tState.messages = [];
                 tState.historyLoaded = false;
                 // Re-request history
-                connection && connection.send(JSON.stringify({
-                  type: 'history', threadName: data.threadName, limit: 200,
-                }));
+                connection &&
+                  connection.send(
+                    JSON.stringify({
+                      type: 'history',
+                      threadName: data.threadName,
+                      limit: 200,
+                    })
+                  );
                 if (overlay) overlay.remove();
               } else {
                 // Show error in overlay
                 if (overlay && overlay._revertBody) {
-                  overlay._revertBody.innerHTML = '<div class="cumulus-overlay-status error">' +
-                    escapeHtml(data.error || 'Revert failed') + '</div>';
+                  overlay._revertBody.innerHTML =
+                    '<div class="cumulus-overlay-status error">' +
+                    escapeHtml(data.error || 'Revert failed') +
+                    '</div>';
                 }
               }
             }
@@ -2889,7 +3255,10 @@
 
     function submitNewThread() {
       var name = newThreadInput.value.trim();
-      if (!name) { hideNewThreadInput(); return; }
+      if (!name) {
+        hideNewThreadInput();
+        return;
+      }
       if (connection) {
         connection.send({ type: 'create_thread', threadName: name });
       }
@@ -2897,7 +3266,10 @@
       // 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 (allThreads[i].name === name) {
+          exists = true;
+          break;
+        }
       }
       if (!exists) {
         allThreads.push({ name: name, messageCount: 0, lastActivity: Date.now() });
@@ -2908,8 +3280,13 @@
     newThreadBtn.addEventListener('click', showNewThreadInput);
 
     newThreadInput.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter') { e.preventDefault(); submitNewThread(); }
-      if (e.key === 'Escape') { hideNewThreadInput(); }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitNewThread();
+      }
+      if (e.key === 'Escape') {
+        hideNewThreadInput();
+      }
     });
 
     newThreadInput.addEventListener('blur', function () {
@@ -2919,6 +3296,51 @@
       }, 150);
     });
 
+    // ── New project creation ──
+    var newProjectCreating = false;
+
+    function showNewProjectForm() {
+      if (newProjectCreating) return;
+      newProjectCreating = true;
+      newProjectNameInput.value = '';
+      newProjectTemplateSelect.value = 'default';
+      renderSidebar();
+      newProjectNameInput.focus();
+    }
+
+    function hideNewProjectForm() {
+      newProjectCreating = false;
+      newProjectNameInput.value = '';
+      renderSidebar();
+    }
+
+    function submitNewProject() {
+      var name = newProjectNameInput.value.trim();
+      if (!name) {
+        hideNewProjectForm();
+        return;
+      }
+      var template = newProjectTemplateSelect.value || 'default';
+      if (connection) {
+        connection.send({ type: 'create_project', name: name, template: template });
+      }
+      hideNewProjectForm();
+    }
+
+    newProjectBtn.addEventListener('click', showNewProjectForm);
+    newProjectCancelBtn.addEventListener('click', hideNewProjectForm);
+    newProjectCreateBtn.addEventListener('click', submitNewProject);
+
+    newProjectNameInput.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitNewProject();
+      }
+      if (e.key === 'Escape') {
+        hideNewProjectForm();
+      }
+    });
+
     // ── Auth events ──
     var authInput = authPanel.querySelector('[data-testid="webchat-auth-input"]');
     var authSubmitBtn = authPanel.querySelector('[data-testid="webchat-auth-submit"]');
@@ -2935,7 +3357,10 @@
 
     authSubmitBtn.addEventListener('click', submitAuth);
     authInput.addEventListener('keydown', function (e) {
-      if (e.key === 'Enter') { e.preventDefault(); submitAuth(); }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        submitAuth();
+      }
     });
 
     // ── Logout ──
@@ -2944,7 +3369,10 @@
       logoutBtn.addEventListener('click', function () {
         clearStoredApiKey();
         activeApiKey = '';
-        if (connection) { connection.close(); connection = null; }
+        if (connection) {
+          connection.close();
+          connection = null;
+        }
         showAuthView();
         authInput.value = '';
       });
@@ -2952,7 +3380,10 @@
 
     // ── Connection ──
     function startConnection() {
-      if (connection) { connection.close(); connection = null; }
+      if (connection) {
+        connection.close();
+        connection = null;
+      }
       connection = createConnection({
         wsUrl: wsUrl,
         apiKey: activeApiKey,