@luckydraw/cumulus 1.0.7 → 1.0.8

package/dist/gateway/static/widget.js

@@ -970,6 +970,30 @@
     '.cumulus-send-btn.stop:hover:not(:disabled) { background: #a02828; }',
     '.cumulus-send-btn.interject { background: #b8860b; color: #fff; }',
     '.cumulus-send-btn.interject:hover:not(:disabled) { background: #d4a017; }',
+    /* Queue (task 144): teal, deliberately NOT the interject gold — the two
+       are different acts and the button is the only place that says which. */
+    '.cumulus-send-btn.queue { background: #1f6f6b; color: #dff5f3; }',
+    '.cumulus-send-btn.queue:hover:not(:disabled) { background: #2a8f8a; }',
+
+    /* ── Deferred user messages (task 144) ── */
+    '.cumulus-msg.queued {',
+    '  align-self: flex-end; max-width: 80%; background: #1a2733;',
+    '  border: 1px dashed #3a5566; border-radius: 10px; padding: 8px 10px;',
+    '  color: #9fb3c4; font-size: 13px; line-height: 1.45;',
+    '}',
+    '.cumulus-queued-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }',
+    '.cumulus-queued-badge {',
+    '  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #7fd6cf;',
+    '  border: 1px solid #2a8f8a; border-radius: 3px; padding: 1px 5px;',
+    '}',
+    '.cumulus-queued-note { font-size: 11px; color: #6b8199; font-style: italic; }',
+    '.cumulus-queued-body { white-space: pre-wrap; word-break: break-word; }',
+    '.cumulus-queued-actions { display: flex; gap: 6px; margin-top: 6px; }',
+    '.cumulus-queued-btn {',
+    '  background: #22323f; border: 1px solid #3a5566; color: #9fb3c4;',
+    '  border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer;',
+    '}',
+    '.cumulus-queued-btn:hover { background: #2d4252; color: #e0e0e0; }',
 
     /* ── Auth panel ── */
     '.cumulus-auth {',
@@ -1047,13 +1071,14 @@
     '}',
     '.cumulus-thread-item {',
     '  display: flex; align-items: center; gap: 8px;',
-    '  padding: 7px 12px;',
+    '  padding: 7px 12px 7px 4px;',
     '  cursor: pointer;',
     '  font-size: 13px; color: #ccc;',
     '  border-left: 2px solid transparent;',
     '  user-select: none;',
     '  transition: background 0.1s ease;',
     '}',
+    '.cumulus-thread-item.co-thread { padding-left: 20px; }',
     '.cumulus-thread-item:hover { background: #2a2a2a; }',
     '.cumulus-thread-item.selected {',
     '  border-left-color: #0066cc;',
@@ -1073,10 +1098,24 @@
     '  flex: 1; overflow: hidden;',
     '  text-overflow: ellipsis; white-space: nowrap;',
     '}',
-    '.cumulus-thread-count {',
-    '  font-size: 11px; color: #666;',
-    '  flex-shrink: 0;',
+    /* Disclosure triangle. Always occupies its slot (even when empty) so
+       sibling names stay aligned; only the with-children state is clickable. */
+    '.cumulus-thread-twisty {',
+    '  width: 12px; flex-shrink: 0;',
+    '  font-size: 9px; color: #666; line-height: 1;',
+    '  text-align: center;',
     '}',
+    '.cumulus-thread-twisty.has-children { cursor: pointer; }',
+    '.cumulus-thread-twisty.has-children:hover { color: #ccc; }',
+    '.cumulus-co-thread-input {',
+    '  width: 100%; box-sizing: border-box;',
+    '  margin: 10px 0 6px;',
+    '  padding: 7px 9px;',
+    '  background: #1a1a1a; color: #e0e0e0;',
+    '  border: 1px solid #444; border-radius: 4px;',
+    '  font-size: 13px; font-family: inherit;',
+    '}',
+    '.cumulus-co-thread-input:focus { outline: none; border-color: #0066cc; }',
     '.cumulus-sidebar-footer {',
     '  padding: 8px 10px;',
     '  border-top: 1px solid #333;',
@@ -1822,8 +1861,11 @@
 
     /* Bigger touch targets for thread items */
     '  .cumulus-thread-item {',
-    '    padding: 12px 14px; font-size: 15px; min-height: 44px;',
+    '    padding: 12px 14px 12px 6px; font-size: 15px; min-height: 44px;',
     '  }',
+    /* A 12px triangle is not a touch target — widen it, and indent to match. */
+    '  .cumulus-thread-twisty { width: 24px; font-size: 12px; }',
+    '  .cumulus-thread-item.co-thread { padding-left: 30px; }',
     '  .cumulus-new-thread-btn { padding: 12px 10px; font-size: 15px; min-height: 44px; }',
     '  .cumulus-new-thread-input { padding: 12px 10px; font-size: 15px; min-height: 44px; }',
     '  .cumulus-sidebar-footer { padding: 10px; }',
@@ -1994,7 +2036,42 @@
     return AGENT_COLORS[Math.abs(hash) % AGENT_COLORS.length];
   }
 
+  // A drained BATCH of agent messages (server.ts drainAgentQueue, >1 message).
+  // It carries no "[sender → recipient]:" prefix, so AGENT_MSG_RE never matched
+  // it and the whole batch fell through to the plain user bubble — which is
+  // exactly what a batch looked like in the UI. Senders are named per entry
+  // inside the body instead, so they are collected from there.
+  var AGENT_BATCH_RE = /^\[While you were busy, (\d+) messages arrived\]\s*/;
+  var AGENT_BATCH_SENDER_RE = /^\[From (?:agent|automated sender) "([^"]+)"\]/gm;
+
+  function parseAgentBatchMessage(content) {
+    var match = content.match(AGENT_BATCH_RE);
+    if (!match) return null;
+    var body = content
+      .slice(match[0].length)
+      .replace(/\n*\(Review the above messages[\s\S]*$/, '')
+      .trim();
+
+    var senders = [];
+    AGENT_BATCH_SENDER_RE.lastIndex = 0;
+    var m;
+    while ((m = AGENT_BATCH_SENDER_RE.exec(content)) !== null) {
+      if (senders.indexOf(m[1]) === -1) senders.push(m[1]);
+    }
+    var label = senders.length === 0 ? 'agents' : senders.slice(0, 2).join(', ');
+    if (senders.length > 2) label += ' +' + (senders.length - 2);
+
+    return {
+      sender: label,
+      recipient: null,
+      body: body,
+      batchCount: parseInt(match[1], 10),
+    };
+  }
+
   function parseAgentMessage(content) {
+    var batch = parseAgentBatchMessage(content);
+    if (batch) return batch;
     var match = content.match(AGENT_MSG_RE);
     if (!match) return null;
     var body = content
@@ -2036,7 +2113,10 @@
     header.appendChild(nameEl);
     var ctx = document.createElement('span');
     ctx.className = 'cumulus-agent-context';
-    ctx.textContent = '\u2192 ' + agent.recipient;
+    // A drained batch names no recipient \u2014 it says how many arrived instead.
+    ctx.textContent = agent.recipient
+      ? '\u2192 ' + agent.recipient
+      : agent.batchCount + ' messages while busy';
     header.appendChild(ctx);
     el.appendChild(header);
 
@@ -4532,6 +4612,10 @@
           currentSegments: [],
           expandedChips: {}, // msgKey → true if chip expanded
           promptCache: {}, // promptRef → fetched capture record (task 088)
+          // Deferred user messages awaiting the current response (task 144).
+          // Mirrors the server's queue — never written locally except from a
+          // `queued_messages` broadcast, so two tabs cannot disagree.
+          queued: [],
         };
       }
       return threadStates[threadName];
@@ -5038,8 +5122,10 @@
           var threadInfo = allThreads.find(function (t) {
             return t.name === name;
           });
+          // The Active section lists open panels in panel order, so it stays
+          // flat — nesting there would fight the ordering it exists to show.
           activeSection.appendChild(
-            buildThreadItem(name, true, true, undefined, threadInfo && threadInfo.projectDir)
+            buildThreadItem(threadInfo || { name: name }, true, true, null)
           );
         });
         sidebarScroll.appendChild(activeSection);
@@ -5069,27 +5155,90 @@
         var sorted = allThreads.slice().sort(function (a, b) {
           return (b.lastActivity || 0) - (a.lastActivity || 0);
         });
-        sorted.forEach(function (t) {
+        buildThreadTree(sorted, collapsedMasters).forEach(function (row) {
           allSection.appendChild(
-            buildThreadItem(
-              t.name,
-              visibleSet[t.name] || false,
-              false,
-              t.messageCount,
-              t.projectDir
-            )
+            buildThreadItem(row.thread, visibleSet[row.thread.name] || false, false, row)
           );
         });
       }
       sidebarScroll.appendChild(allSection);
     }
 
-    function buildThreadItem(name, isSelected, isActive, messageCount, projectDir) {
+    /**
+     * Flatten the thread list into sidebar render rows, nesting co-threads
+     * under their master (task 143).
+     *
+     * Membership comes from the server's `master` field, never from the name.
+     * Every app's visitor threads are named `<app>-<deviceId>` and would nest
+     * under a prefix rule, claiming a relationship that does not exist.
+     *
+     * A co-thread whose master is absent from this list (a scoped viewer, or a
+     * deleted master) renders at top level. Nesting is a presentation of a real
+     * relationship; it must never be the reason a thread disappears.
+     *
+     * Pure: no DOM, no globals. `collapsed` maps masterName -> true.
+     */
+    function buildThreadTree(sortedThreads, collapsed) {
+      var present = {};
+      var i;
+      for (i = 0; i < sortedThreads.length; i++) present[sortedThreads[i].name] = true;
+
+      var childrenOf = {};
+      for (i = 0; i < sortedThreads.length; i++) {
+        var t = sortedThreads[i];
+        if (t.master && present[t.master] && t.master !== t.name) {
+          (childrenOf[t.master] = childrenOf[t.master] || []).push(t);
+        }
+      }
+
+      var rows = [];
+      for (i = 0; i < sortedThreads.length; i++) {
+        var thread = sortedThreads[i];
+        if (thread.master && present[thread.master] && thread.master !== thread.name) continue;
+
+        var kids = childrenOf[thread.name] || [];
+        var isCollapsed = kids.length > 0 && !!(collapsed || {})[thread.name];
+        rows.push({
+          thread: thread,
+          depth: 0,
+          childCount: kids.length,
+          collapsed: isCollapsed,
+        });
+        if (isCollapsed) continue;
+        for (var k = 0; k < kids.length; k++) {
+          rows.push({ thread: kids[k], depth: 1, childCount: 0, collapsed: false });
+        }
+      }
+      return rows;
+    }
+
+    function buildThreadItem(thread, isSelected, isActive, row) {
+      var name = thread.name;
+      var projectDir = thread.projectDir;
       var item = document.createElement('div');
-      item.className = 'cumulus-thread-item' + (isSelected ? ' selected' : '');
+      item.className =
+        'cumulus-thread-item' +
+        (isSelected ? ' selected' : '') +
+        (row && row.depth ? ' co-thread' : '');
       item.setAttribute('data-testid', 'webchat-thread-item');
       item.setAttribute('data-thread-name', name);
 
+      // Disclosure triangle — occupies its slot even with no children, so the
+      // names of siblings stay aligned instead of jittering by a few pixels.
+      var twisty = document.createElement('span');
+      twisty.className = 'cumulus-thread-twisty';
+      if (row && row.childCount > 0) {
+        twisty.classList.add('has-children');
+        twisty.textContent = row.collapsed ? '▸' : '▾';
+        twisty.setAttribute('data-testid', 'webchat-thread-twisty');
+        twisty.setAttribute('title', row.collapsed ? 'Show co-threads' : 'Hide co-threads');
+        twisty.addEventListener('click', function (e) {
+          e.stopPropagation(); // do not also open the thread
+          toggleMasterCollapsed(name);
+        });
+      }
+      item.appendChild(twisty);
+
       var dot = document.createElement('span');
       dot.className = unreadThreads[name]
         ? 'cumulus-thread-unread'
@@ -5098,7 +5247,13 @@
 
       var nameEl = document.createElement('span');
       nameEl.className = 'cumulus-thread-name';
-      nameEl.textContent = name;
+      // A co-thread's name repeats its master's prefix; showing only the label
+      // keeps the tree readable. The full name stays in the tooltip and in
+      // data-thread-name, which is what everything else keys off.
+      nameEl.textContent =
+        row && row.depth && thread.master && name.indexOf(thread.master + '-') === 0
+          ? name.slice(thread.master.length + 1)
+          : name;
       nameEl.setAttribute('title', projectDir ? name + '\n\u{1f4c1} ' + projectDir : name);
       item.appendChild(nameEl);
 
@@ -5109,18 +5264,11 @@
         item.appendChild(folderEl);
       }
 
-      if (messageCount !== undefined && messageCount !== null) {
-        var countEl = document.createElement('span');
-        countEl.className = 'cumulus-thread-count';
-        countEl.textContent = messageCount;
-        item.appendChild(countEl);
-      }
-
       // Right-click context menu
       item.addEventListener('contextmenu', function (e) {
         e.preventDefault();
         e.stopPropagation();
-        showThreadContextMenu(name, e.clientX, e.clientY);
+        showThreadContextMenu(name, e.clientX, e.clientY, thread.master);
       });
 
       item.addEventListener('click', function (e) {
@@ -5143,7 +5291,7 @@
       document.removeEventListener('contextmenu', dismissContextMenu);
     }
 
-    function showThreadContextMenu(threadName, x, y) {
+    function showThreadContextMenu(threadName, x, y, master) {
       dismissContextMenu();
 
       var menu = document.createElement('div');
@@ -5151,6 +5299,22 @@
       menu.style.left = x + 'px';
       menu.style.top = y + 'px';
 
+      // Co-threads are created from the master ONLY (task 143), so the item is
+      // absent rather than disabled on a thread that is itself a co-thread —
+      // offering an action the server answers with 409 is worse than not
+      // offering it. The server still enforces; this only avoids the dead end.
+      if (!master) {
+        var coItem = document.createElement('button');
+        coItem.className = 'cumulus-context-menu-item';
+        coItem.textContent = 'New co-thread…';
+        coItem.setAttribute('data-testid', 'webchat-thread-new-co-thread');
+        coItem.addEventListener('click', function () {
+          dismissContextMenu();
+          showCoThreadDialog(threadName);
+        });
+        menu.appendChild(coItem);
+      }
+
       var deleteItem = document.createElement('button');
       deleteItem.className = 'cumulus-context-menu-item danger';
       deleteItem.textContent = 'Delete thread';
@@ -5177,6 +5341,163 @@
       }, 0);
     }
 
+    // ── Co-thread creation ──
+
+    /**
+     * Which masters are collapsed. Default is EXPANDED (absent = open) so a
+     * co-thread created a moment ago is visible without a second click.
+     */
+    var collapsedMasters = (function () {
+      try {
+        return JSON.parse(localStorage.getItem('cumulus-collapsed-masters') || '{}') || {};
+      } catch {
+        return {};
+      }
+    })();
+
+    function toggleMasterCollapsed(name) {
+      if (collapsedMasters[name]) delete collapsedMasters[name];
+      else collapsedMasters[name] = true;
+      try {
+        localStorage.setItem('cumulus-collapsed-masters', JSON.stringify(collapsedMasters));
+      } catch {
+        /* private mode — collapse still works, it just does not persist */
+      }
+      renderSidebar();
+    }
+
+    function showCoThreadDialog(masterName) {
+      var existing = document.querySelector('.cumulus-confirm-dialog[data-context="co-thread"]');
+      if (existing) existing.remove();
+
+      var dialog = document.createElement('div');
+      dialog.className = 'cumulus-confirm-dialog';
+      dialog.setAttribute('data-context', 'co-thread');
+      dialog.style.cssText =
+        'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center;';
+
+      var box = document.createElement('div');
+      box.className = 'cumulus-confirm-dialog-box';
+
+      var title = document.createElement('div');
+      title.className = 'cumulus-confirm-dialog-title';
+      title.textContent = 'New co-thread';
+      box.appendChild(title);
+
+      var text = document.createElement('div');
+      text.className = 'cumulus-confirm-dialog-text';
+      text.textContent =
+        'A co-thread shares "' +
+        masterName +
+        '" memory but keeps its own conversation, so both can work at once.';
+      box.appendChild(text);
+
+      var input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'cumulus-co-thread-input';
+      input.placeholder = 'frontend';
+      input.setAttribute('data-testid', 'webchat-co-thread-label');
+      box.appendChild(input);
+
+      var preview = document.createElement('div');
+      preview.className = 'cumulus-confirm-dialog-warn';
+      preview.setAttribute('data-testid', 'webchat-co-thread-preview');
+      box.appendChild(preview);
+
+      // Mirrors CO_THREAD_LABEL in server.ts. The server is authoritative; this
+      // only turns a 400 into a message written before the request is sent.
+      var LABEL_OK = /^[a-zA-Z0-9_]+$/;
+      function refreshPreview() {
+        var label = input.value.trim();
+        if (!label) {
+          preview.textContent = 'Letters, numbers and underscores.';
+          return false;
+        }
+        if (!LABEL_OK.test(label)) {
+          preview.textContent = 'Letters, numbers and underscores only — no spaces or hyphens.';
+          return false;
+        }
+        preview.textContent = 'Creates: ' + masterName + '-' + label;
+        return true;
+      }
+      refreshPreview();
+      input.addEventListener('input', refreshPreview);
+
+      var actions = document.createElement('div');
+      actions.className = 'cumulus-confirm-dialog-actions';
+
+      var cancelBtn = document.createElement('button');
+      cancelBtn.className = 'cumulus-confirm-dialog-cancel';
+      cancelBtn.textContent = 'Cancel';
+      cancelBtn.addEventListener('click', function () {
+        dialog.remove();
+      });
+      actions.appendChild(cancelBtn);
+
+      var createBtn = document.createElement('button');
+      createBtn.className = 'cumulus-confirm-dialog-confirm';
+      createBtn.setAttribute('data-testid', 'webchat-co-thread-create');
+      createBtn.textContent = 'Create';
+      createBtn.addEventListener('click', function () {
+        if (!refreshPreview()) return;
+        createBtn.disabled = true;
+        createBtn.textContent = 'Creating…';
+        createCoThread(masterName, input.value.trim(), function (err, threadName) {
+          if (err) {
+            createBtn.disabled = false;
+            createBtn.textContent = 'Create';
+            preview.textContent = err;
+            return;
+          }
+          dialog.remove();
+          // The listing is what carries the `master` field, so refresh it
+          // rather than synthesising an entry — a locally-invented row would
+          // render at top level until the next real listing arrived.
+          if (connection) connection.send({ type: 'threads' });
+          soloThread(threadName);
+        });
+      });
+      actions.appendChild(createBtn);
+
+      box.appendChild(actions);
+      dialog.appendChild(box);
+
+      dialog.addEventListener('click', function (e) {
+        if (e.target === dialog) dialog.remove();
+      });
+
+      document.body.appendChild(dialog);
+      input.focus();
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') createBtn.click();
+        else if (e.key === 'Escape') dialog.remove();
+      });
+    }
+
+    function createCoThread(masterName, label, cb) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/api/thread/' + encodeURIComponent(masterName) + '/co-threads');
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('X-API-Key', activeApiKey);
+      xhr.onload = function () {
+        var body = {};
+        try {
+          body = JSON.parse(xhr.responseText || '{}');
+        } catch {
+          /* fall through to the status-based message below */
+        }
+        if (xhr.status === 200 || xhr.status === 201) {
+          cb(null, body.thread || masterName + '-' + label);
+          return;
+        }
+        cb(body.error || 'Could not create the co-thread (' + xhr.status + ').');
+      };
+      xhr.onerror = function () {
+        cb('Could not reach the gateway.');
+      };
+      xhr.send(JSON.stringify({ label: label }));
+    }
+
     // ── Thread delete confirmation ──
     function showThreadDeleteConfirm(threadName) {
       // Remove any existing confirm dialogs
@@ -5308,6 +5629,10 @@
       if (!state.historyLoaded && connection) {
         state.historyLoaded = true;
         connection.send({ type: 'history', threadName: name, limit: 200 });
+        // Deferred messages live on the server, so a fresh tab (or one that
+        // reconnected) has to ask. This also flushes a batch that was queued
+        // while no client was watching the thread (task 144).
+        connection.send({ type: 'queue_list', threadName: name });
       }
     }
 
@@ -7647,6 +7972,121 @@
         return chip;
       }
 
+      // A message the user chose to QUEUE rather than interject with (task 144).
+      // Shown in the conversation the moment it is accepted — pressing Queue and
+      // seeing nothing happen reads as broken — and stays editable, because it
+      // has not been said yet.
+      function buildQueuedMsgEl(item) {
+        var el = document.createElement('div');
+        el.className = 'cumulus-msg queued';
+        el.setAttribute('data-testid', 'webchat-queued-msg');
+        el.setAttribute('data-queued-id', item.id);
+
+        var head = document.createElement('div');
+        head.className = 'cumulus-queued-head';
+        var badge = document.createElement('span');
+        badge.className = 'cumulus-queued-badge';
+        badge.textContent = 'QUEUED';
+        head.appendChild(badge);
+        var note = document.createElement('span');
+        note.className = 'cumulus-queued-note';
+        note.textContent = 'waiting — sends when this response finishes';
+        head.appendChild(note);
+        el.appendChild(head);
+
+        var body = document.createElement('div');
+        body.className = 'cumulus-queued-body';
+        body.textContent = item.text;
+        el.appendChild(body);
+
+        var actions = document.createElement('div');
+        actions.className = 'cumulus-queued-actions';
+
+        function actionBtn(label, testid, onClick) {
+          var b = document.createElement('button');
+          b.className = 'cumulus-queued-btn';
+          b.textContent = label;
+          b.setAttribute('data-testid', testid);
+          b.addEventListener('click', onClick);
+          actions.appendChild(b);
+          return b;
+        }
+
+        actionBtn('Send Now', 'webchat-queued-send-now', function () {
+          if (connection)
+            connection.send({ type: 'queue_send_now', threadName: threadName, id: item.id });
+        });
+        actionBtn('Edit', 'webchat-queued-edit', function () {
+          showQueuedEditPopover(el, item);
+        });
+        actionBtn('×', 'webchat-queued-cancel', function () {
+          if (connection)
+            connection.send({ type: 'queue_cancel', threadName: threadName, id: item.id });
+        });
+
+        el.appendChild(actions);
+        return el;
+      }
+
+      // Edit a queued message in place. Same shape as the annotation popover —
+      // quote, textarea, Cancel/Update — because it is the same act: revising
+      // something you have staged but not yet sent.
+      function showQueuedEditPopover(anchorEl, item) {
+        var existing = panel.querySelector('.cumulus-queued-popover');
+        if (existing) existing.remove();
+
+        var pop = document.createElement('div');
+        pop.className = 'cumulus-annotation-popover cumulus-queued-popover';
+        pop.setAttribute('data-testid', 'webchat-queued-popover');
+
+        var panelRect = panel.getBoundingClientRect();
+        var anchorRect = anchorEl.getBoundingClientRect();
+        var top = anchorRect.top - panelRect.top + panel.scrollTop - 170;
+        if (top < 4) top = anchorRect.bottom - panelRect.top + panel.scrollTop + 4;
+        var left = anchorRect.left - panelRect.left;
+        if (left + 260 > panelRect.width) left = panelRect.width - 270;
+        if (left < 4) left = 4;
+        pop.style.top = top + 'px';
+        pop.style.left = left + 'px';
+
+        var ta = document.createElement('textarea');
+        ta.rows = 4;
+        ta.value = item.text;
+        ta.setAttribute('data-testid', 'webchat-queued-edit-input');
+        pop.appendChild(ta);
+
+        var acts = document.createElement('div');
+        acts.className = 'annotation-actions';
+        var cancel = document.createElement('button');
+        cancel.className = 'annotation-cancel';
+        cancel.textContent = 'Cancel';
+        cancel.addEventListener('click', function () {
+          pop.remove();
+        });
+        var save = document.createElement('button');
+        save.className = 'annotation-submit';
+        save.textContent = 'Update';
+        save.setAttribute('data-testid', 'webchat-queued-edit-submit');
+        save.addEventListener('click', function () {
+          var next = ta.value.trim();
+          pop.remove();
+          if (!next || next === item.text) return;
+          if (connection)
+            connection.send({
+              type: 'queue_edit',
+              threadName: threadName,
+              id: item.id,
+              message: next,
+            });
+        });
+        acts.appendChild(cancel);
+        acts.appendChild(save);
+        pop.appendChild(acts);
+
+        panel.appendChild(pop);
+        ta.focus();
+      }
+
       function renderPanelMessages() {
         // Destroy existing blex blocks before clearing DOM
         messagesEl.querySelectorAll('.cumulus-msg.assistant').forEach(function (m) {
@@ -7731,6 +8171,16 @@
           );
           messagesEl.appendChild(row);
         }
+        // Deferred messages sit below the in-flight response — they are what
+        // happens next (task 144).
+        if (state.queued && state.queued.length) {
+          for (var qi = 0; qi < state.queued.length; qi++) {
+            var qRow = document.createElement('div');
+            qRow.className = 'cumulus-msg-row';
+            qRow.appendChild(buildQueuedMsgEl(state.queued[qi]));
+            messagesEl.appendChild(qRow);
+          }
+        }
         renderActivityBar();
         scrollToBottom();
         updateSelectionBar();
@@ -7877,15 +8327,19 @@
           sendBtn.classList.add('stop');
           sendBtn.disabled = false;
         } else if (state.streaming && hasInput) {
-          // Streaming with input — show Send (interjection mode)
-          sendBtn.textContent = uploading ? 'Uploading…' : 'Send';
+          // Streaming with input — the button QUEUES (task 144). Return still
+          // interjects, so both intents stay reachable; the label is what makes
+          // which one you are about to get visible before you commit.
+          sendBtn.textContent = uploading ? 'Uploading…' : 'Queue';
           sendBtn.classList.remove('stop');
-          sendBtn.classList.add('interject');
+          sendBtn.classList.remove('interject');
+          sendBtn.classList.add('queue');
           sendBtn.disabled = uploading;
         } else {
           sendBtn.textContent = uploading ? 'Uploading…' : 'Send';
           sendBtn.classList.remove('stop');
           sendBtn.classList.remove('interject');
+          sendBtn.classList.remove('queue');
           sendBtn.disabled = uploading;
         }
       }
@@ -8036,12 +8490,69 @@
       // Initial render (messages may already be loaded from a previous view)
       renderPanelMessages();
 
+      // Build the outgoing body + image payload from the current draft. Shared
+      // by the send/interject path and the queue path (task 144) so a file
+      // attachment behaves identically whichever one you use.
+      function composePanelOutgoing(text) {
+        var sendable = state.pendingAttachments.filter(function (a) {
+          return a.isImage || a.status === 'done';
+        });
+        var images = sendable
+          .filter(function (a) {
+            return a.isImage;
+          })
+          .map(function (a) {
+            return { mimeType: a.mimeType, base64: a.base64 };
+          });
+        var files = sendable.filter(function (a) {
+          return !a.isImage && a.status === 'done' && a.path;
+        });
+        var body = text || '';
+        if (files.length > 0) {
+          var lines = files.map(function (a) {
+            return '- ' + a.name + ' (' + formatFileSize(a.size || 0) + ') → ' + a.path;
+          });
+          body = 'Attached files:\n' + lines.join('\n') + (body ? '\n\n' + body : '');
+        }
+        return { body: body, images: images, attachments: sendable.slice() };
+      }
+
+      // Clear the composer after a draft has been handed off.
+      function clearPanelComposer() {
+        inputEl.value = '';
+        inputEl.style.height = 'auto';
+        inputEl.style.overflowY = 'hidden';
+        state.draft = '';
+        state.pendingAttachments = [];
+        renderPanelAttachStrip();
+      }
+
       // ── Send message for this panel ──
-      function sendPanelMessage() {
+      // mode: 'queue' (the Queue button while streaming) or undefined/'send'
+      // (Return, and the ordinary Send button) — see task 144.
+      function sendPanelMessage(mode) {
         // Prepend any deferred blex interaction chips to the message
         var chipText = collectAndClearChips(panel);
         var text = (chipText ? chipText + '\n' : '') + inputEl.value.trim();
 
+        // ── Queue (task 144): wait for the current response to finish ──
+        if (mode === 'queue' && state.streaming) {
+          if (!text && state.pendingAttachments.length === 0) return;
+          if (!connection) return;
+          if (hasPanelUploading()) return;
+          var q = composePanelOutgoing(text);
+          var qPayload = {
+            type: 'queue_message',
+            threadName: threadName,
+            message: q.body || ' ',
+          };
+          if (q.images.length > 0) qPayload.images = q.images;
+          connection.send(qPayload);
+          clearPanelComposer();
+          updatePanelSendBtn();
+          return;
+        }
+
         // ── Interjection: user sends while streaming ──
         // Freeze partial response, send the new message — server aborts the old stream
         if (state.streaming) {
@@ -8094,10 +8605,8 @@
         if (hasPanelUploading()) return; // button is disabled while uploading
 
         // Drop attachments that failed to upload
-        var sendable = state.pendingAttachments.filter(function (a) {
-          return a.isImage || a.status === 'done';
-        });
-        var attachSnapshot = sendable.slice();
+        var outgoing = composePanelOutgoing(text);
+        var attachSnapshot = outgoing.attachments;
         var displayText = text || '(attachment)';
         state.messages.push({
           role: 'user',
@@ -8107,12 +8616,7 @@
         });
         // Sending re-pins to the bottom — the user expects to see their turn (task 094).
         state.pinnedToBottom = true;
-        inputEl.value = '';
-        inputEl.style.height = 'auto';
-        inputEl.style.overflowY = 'hidden';
-        state.draft = '';
-        state.pendingAttachments = [];
-        renderPanelAttachStrip();
+        clearPanelComposer();
         state.streaming = true;
         state.stopRequested = false;
         state.streamBuffer = '';
@@ -8121,43 +8625,25 @@
         updatePanelSendBtn();
         renderPanelMessages();
 
-        var imagePayload = attachSnapshot
-          .filter(function (a) {
-            return a.isImage;
-          })
-          .map(function (a) {
-            return { mimeType: a.mimeType, base64: a.base64 };
-          });
-
-        // Build "Attached files:" prefix for non-image uploads
-        var fileAttachments = attachSnapshot.filter(function (a) {
-          return !a.isImage && a.status === 'done' && a.path;
-        });
-        var messageBody = text || '';
-        if (fileAttachments.length > 0) {
-          var lines = fileAttachments.map(function (a) {
-            return '- ' + a.name + ' (' + formatFileSize(a.size || 0) + ') → ' + a.path;
-          });
-          messageBody =
-            'Attached files:\n' + lines.join('\n') + (messageBody ? '\n\n' + messageBody : '');
-        }
-
         var payload = {
           type: 'message',
           threadName: threadName,
-          message: messageBody || ' ',
+          message: outgoing.body || ' ',
         };
-        if (imagePayload.length > 0) payload.images = imagePayload;
+        if (outgoing.images.length > 0) payload.images = outgoing.images;
         connection.send(payload);
       }
 
       // ── Panel event listeners ──
-      sendBtn.addEventListener('click', sendPanelMessage);
+      // The button queues while streaming; Return always interjects (task 144).
+      sendBtn.addEventListener('click', function () {
+        sendPanelMessage(state.streaming ? 'queue' : 'send');
+      });
 
       inputEl.addEventListener('keydown', function (e) {
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
-          sendPanelMessage();
+          sendPanelMessage('send');
         }
       });
 
@@ -8989,6 +9475,35 @@
           }
           break;
 
+        // ── Deferred user messages (task 144) ──
+        // The server owns the queue, so its list is authoritative: every tab on
+        // the thread renders exactly what is pending, including the one that
+        // just queued it.
+        case 'queued_messages':
+          if (data.threadName) {
+            var qState = getThreadState(data.threadName);
+            qState.queued = data.messages || [];
+            refreshThreadPanel(data.threadName);
+          }
+          break;
+
+        // The queue drained and is now a real turn. Nobody sent it from a
+        // client, so nobody rendered the user half — do it here, or the chip
+        // vanishes and the reply answers a question the transcript never shows.
+        case 'queue_delivered':
+          if (data.threadName) {
+            var deliveredState = getThreadState(data.threadName);
+            deliveredState.queued = [];
+            deliveredState.messages.push({
+              role: 'user',
+              content: data.text,
+              timestamp: Date.now(),
+            });
+            deliveredState.pinnedToBottom = true;
+            refreshThreadPanel(data.threadName);
+          }
+          break;
+
         // ── Include/Revert responses ──
         case 'include_list':
           if (data.threadName && data.files) {