clay-server 2.26.0-beta.1 → 2.26.0-beta.10

package/lib/public/modules/context-sources.js

@@ -0,0 +1,313 @@
+// Context Sources — attach terminal output and browser tabs as context for Claude
+
+var ctx = null;
+var activeSourceIds = new Set();
+var terminalList = []; // synced from terminal module's term_list
+var browserTabList = []; // synced from Chrome extension via postMessage
+
+export function initContextSources(_ctx) {
+  ctx = _ctx;
+
+  var addBtn = document.getElementById("context-sources-add");
+  var picker = document.getElementById("context-sources-picker");
+
+  addBtn.addEventListener("click", function(e) {
+    e.stopPropagation();
+    if (picker.classList.contains("hidden")) {
+      renderPicker();
+      picker.classList.remove("hidden");
+      document.addEventListener("click", closePicker, true);
+    } else {
+      closePicker();
+    }
+  });
+
+  picker.addEventListener("click", function(e) {
+    e.stopPropagation();
+  });
+}
+
+function closePicker() {
+  var picker = document.getElementById("context-sources-picker");
+  picker.classList.add("hidden");
+  document.removeEventListener("click", closePicker, true);
+}
+
+// Restore state from server
+export function handleContextSourcesState(msg) {
+  var saved = msg.active || [];
+  activeSourceIds = new Set(saved);
+  renderChips();
+}
+
+// Save active sources to server
+function saveToServer() {
+  if (ctx && ctx.ws && ctx.connected) {
+    ctx.ws.send(JSON.stringify({
+      type: "context_sources_save",
+      active: Array.from(activeSourceIds)
+    }));
+  }
+}
+
+// Called when term_list arrives from server
+export function updateTerminalList(terminals) {
+  terminalList = terminals || [];
+
+  // Remove active sources that no longer exist
+  var changed = false;
+  for (var id of activeSourceIds) {
+    if (id.startsWith("term:")) {
+      var termId = parseInt(id.split(":")[1], 10);
+      var found = false;
+      for (var i = 0; i < terminalList.length; i++) {
+        if (terminalList[i].id === termId) { found = true; break; }
+      }
+      if (!found) {
+        activeSourceIds.delete(id);
+        changed = true;
+      }
+    }
+  }
+
+  if (changed) saveToServer();
+  renderChips();
+
+  // If picker is open, re-render it
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
+// Called when Chrome extension sends tab list via postMessage
+export function updateBrowserTabList(tabs) {
+  browserTabList = tabs || [];
+
+  // Remove active tab sources that no longer exist
+  var changed = false;
+  for (var id of activeSourceIds) {
+    if (id.startsWith("tab:")) {
+      var tabId = parseInt(id.split(":")[1], 10);
+      var found = false;
+      for (var i = 0; i < browserTabList.length; i++) {
+        if (browserTabList[i].id === tabId) { found = true; break; }
+      }
+      if (!found) {
+        activeSourceIds.delete(id);
+        changed = true;
+      }
+    }
+  }
+
+  if (changed) saveToServer();
+  renderChips();
+
+  // If picker is open, re-render it
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
+function toggleSource(sourceId) {
+  if (activeSourceIds.has(sourceId)) {
+    activeSourceIds.delete(sourceId);
+  } else {
+    activeSourceIds.add(sourceId);
+  }
+  saveToServer();
+  renderChips();
+  renderPicker();
+}
+
+function removeSource(sourceId) {
+  activeSourceIds.delete(sourceId);
+  saveToServer();
+  renderChips();
+
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
+function renderChips() {
+  var container = document.getElementById("context-sources-chips");
+  container.innerHTML = "";
+
+  for (var id of activeSourceIds) {
+    var chip = document.createElement("div");
+    chip.className = "context-chip";
+
+    var label = getSourceLabel(id);
+    var iconName = getSourceIcon(id);
+
+    var labelEl = document.createElement("span");
+    labelEl.className = "context-chip-label";
+    labelEl.innerHTML =
+      '<i data-lucide="' + iconName + '"></i>' +
+      '<span>' + escapeHtml(label) + '</span>';
+    chip.appendChild(labelEl);
+
+    var removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "context-chip-remove";
+    removeBtn.title = "Remove";
+    removeBtn.innerHTML = '<i data-lucide="minus"></i>';
+    removeBtn.setAttribute("data-source-id", id);
+    removeBtn.addEventListener("click", function(e) {
+      e.stopPropagation();
+      removeSource(this.getAttribute("data-source-id"));
+      if (typeof lucide !== "undefined") lucide.createIcons();
+    });
+
+    chip.appendChild(removeBtn);
+    container.appendChild(chip);
+  }
+
+  // Update add button label
+  var addBtn = document.getElementById("context-sources-add");
+  var labelSpan = addBtn.querySelector("span");
+  if (activeSourceIds.size > 0) {
+    labelSpan.textContent = "";
+    labelSpan.style.display = "none";
+  } else {
+    labelSpan.textContent = "Context Sources";
+    labelSpan.style.display = "";
+  }
+
+  if (typeof lucide !== "undefined") lucide.createIcons();
+}
+
+function renderPicker() {
+  // --- Terminals section ---
+  var termSection = document.getElementById("context-picker-terminals");
+  termSection.innerHTML = "";
+
+  var termLabel = document.createElement("div");
+  termLabel.className = "context-picker-section-label";
+  termLabel.textContent = "Terminals";
+  termSection.appendChild(termLabel);
+
+  if (terminalList.length === 0) {
+    var termEmpty = document.createElement("div");
+    termEmpty.className = "context-picker-empty";
+    termEmpty.textContent = "No terminals open";
+    termSection.appendChild(termEmpty);
+  } else {
+    for (var i = 0; i < terminalList.length; i++) {
+      var term = terminalList[i];
+      var termSourceId = "term:" + term.id;
+      var termActive = activeSourceIds.has(termSourceId);
+
+      var termItem = document.createElement("div");
+      termItem.className = "context-picker-item" + (termActive ? " active" : "");
+      termItem.setAttribute("data-source-id", termSourceId);
+
+      termItem.innerHTML =
+        '<i data-lucide="square-terminal"></i>' +
+        '<span>' + escapeHtml(term.title || ("Terminal " + term.id)) + '</span>' +
+        '<i data-lucide="check" class="context-picker-check"></i>';
+
+      termItem.addEventListener("click", function() {
+        toggleSource(this.getAttribute("data-source-id"));
+        if (typeof lucide !== "undefined") lucide.createIcons();
+      });
+
+      termSection.appendChild(termItem);
+    }
+  }
+
+  // --- Browser Tabs section ---
+  var tabSection = document.getElementById("context-picker-tabs");
+  tabSection.innerHTML = "";
+
+  if (browserTabList.length > 0) {
+    var tabLabel = document.createElement("div");
+    tabLabel.className = "context-picker-section-label";
+    tabLabel.textContent = "Browser Tabs";
+    tabSection.appendChild(tabLabel);
+
+    for (var j = 0; j < browserTabList.length; j++) {
+      var tab = browserTabList[j];
+      var tabSourceId = "tab:" + tab.id;
+      var tabActive = activeSourceIds.has(tabSourceId);
+
+      var tabItem = document.createElement("div");
+      tabItem.className = "context-picker-item" + (tabActive ? " active" : "");
+      tabItem.setAttribute("data-source-id", tabSourceId);
+
+      var tabTitle = tab.title || tab.url || "Tab";
+      // Truncate long URLs for display
+      var tabDisplay = tabTitle.length > 50 ? tabTitle.slice(0, 47) + "..." : tabTitle;
+
+      var faviconHtml = "";
+      if (tab.favIconUrl) {
+        faviconHtml = '<img src="' + escapeHtml(tab.favIconUrl) + '" class="context-picker-favicon" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'\'">' +
+          '<i data-lucide="globe" style="display:none"></i>';
+      } else {
+        faviconHtml = '<i data-lucide="globe"></i>';
+      }
+
+      tabItem.innerHTML =
+        faviconHtml +
+        '<span title="' + escapeHtml(tab.url || "") + '">' + escapeHtml(tabDisplay) + '</span>' +
+        '<i data-lucide="check" class="context-picker-check"></i>';
+
+      tabItem.addEventListener("click", function() {
+        toggleSource(this.getAttribute("data-source-id"));
+        if (typeof lucide !== "undefined") lucide.createIcons();
+      });
+
+      tabSection.appendChild(tabItem);
+    }
+  }
+
+  if (typeof lucide !== "undefined") lucide.createIcons();
+}
+
+function getSourceLabel(id) {
+  if (id.startsWith("term:")) {
+    var termId = parseInt(id.split(":")[1], 10);
+    for (var i = 0; i < terminalList.length; i++) {
+      if (terminalList[i].id === termId) {
+        return terminalList[i].title || ("Terminal " + termId);
+      }
+    }
+    return "Terminal " + termId;
+  }
+  if (id.startsWith("tab:")) {
+    var tabId = parseInt(id.split(":")[1], 10);
+    for (var j = 0; j < browserTabList.length; j++) {
+      if (browserTabList[j].id === tabId) {
+        var title = browserTabList[j].title || browserTabList[j].url || "";
+        return title.length > 30 ? title.slice(0, 27) + "..." : title;
+      }
+    }
+    return "Tab " + tabId;
+  }
+  return id;
+}
+
+function getSourceIcon(id) {
+  if (id.startsWith("term:")) return "square-terminal";
+  if (id.startsWith("tab:")) return "globe";
+  return "circle";
+}
+
+// Get active source IDs (for use when sending messages)
+export function getActiveSources() {
+  return Array.from(activeSourceIds);
+}
+
+// Check if any sources are active
+export function hasActiveSources() {
+  return activeSourceIds.size > 0;
+}
+
+function escapeHtml(str) {
+  var div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}

package/lib/public/modules/debate.js

@@ -360,8 +360,9 @@ export function handleDebateEnded(msg) {
   currentTurnEl = null;
   currentTurnMateId = null;
 
-  // Hide float info panel
+  // Hide float info panel and PDF button
   hideDebateInfoFloat();
+  showPdfBtn(false);
 
   // Ensure debate bottom bar is removed
   var bottomBar = document.getElementById("debate-bottom-bar");
@@ -369,10 +370,23 @@ export function handleDebateEnded(msg) {
   var handBar = document.getElementById("debate-hand-raise-bar");
   if (handBar) handBar.remove();
 
+  // Render status line in messages area
   if (ctx.messagesEl) {
-    renderEndedBanner(msg);
+    var existing = ctx.messagesEl.querySelector(".debate-ended-status-line");
+    if (existing) existing.remove();
+    var statusLine = document.createElement("div");
+    statusLine.className = "debate-ended-status-line";
+    var reasonText = msg.reason === "natural" ? "Debate concluded" :
+                     msg.reason === "user_stopped" ? "Debate stopped by user" :
+                     "Debate ended due to error";
+    statusLine.innerHTML = iconHtml("check-circle") + " " + escapeHtml(reasonText) + " (" + (msg.rounds || 0) + " rounds)";
+    ctx.messagesEl.appendChild(statusLine);
+    refreshIcons();
   }
 
+  // Show ended mode: native input area with banner
+  if (ctx.showDebateEndedMode) ctx.showDebateEndedMode(msg);
+
   if (ctx.scrollToBottom) ctx.scrollToBottom();
 }
 
@@ -445,7 +459,7 @@ function renderEndedBanner(entry) {
   refreshIcons();
 }
 
-function exportDebateAsPdf() {
+export function exportDebateAsPdf() {
   var popup = window.open("", "_blank", "width=900,height=700");
   if (!popup) {
     return Promise.resolve();
@@ -656,6 +670,7 @@ export function renderDebateEnded(entry) {
   debateActive = false;
   debatePhase = "ended";
   hideDebateInfoFloat();
+  showPdfBtn(false);
 
   // Ensure debate bars are removed during history replay
   var bottomBar = document.getElementById("debate-bottom-bar");
@@ -663,7 +678,20 @@ export function renderDebateEnded(entry) {
   var handBar = document.getElementById("debate-hand-raise-bar");
   if (handBar) handBar.remove();
 
-  renderEndedBanner(entry);
+  // Render status line
+  var existing = ctx.messagesEl.querySelector(".debate-ended-status-line");
+  if (existing) existing.remove();
+  var statusLine = document.createElement("div");
+  statusLine.className = "debate-ended-status-line";
+  var reasonText = entry.reason === "natural" ? "Debate concluded" :
+                   entry.reason === "user_stopped" ? "Debate stopped by user" :
+                   "Debate ended due to error";
+  statusLine.innerHTML = iconHtml("check-circle") + " " + escapeHtml(reasonText) + " (" + (entry.rounds || 0) + " rounds)";
+  ctx.messagesEl.appendChild(statusLine);
+  refreshIcons();
+
+  // Show ended mode with native input area
+  if (ctx.showDebateEndedMode) ctx.showDebateEndedMode(entry);
 }
 
 export function renderDebateCommentInjected(entry) {
@@ -690,9 +718,73 @@ export function isDebateActive() {
   return debateActive;
 }
 
-// --- Debate modal ---
+// --- Debate modal (wizard) ---
 var modalEl = null;
 var selectedPanelists = [];
+var wizardStep = 0;
+
+function goToStep(step) {
+  wizardStep = step;
+  if (!modalEl) return;
+  var pages = modalEl.querySelectorAll(".debate-wizard-page");
+  var dots = modalEl.querySelectorAll(".debate-step-dot");
+  for (var i = 0; i < pages.length; i++) {
+    if (i === step) {
+      pages[i].classList.add("active");
+      if (dots[i]) dots[i].classList.add("active");
+    } else {
+      pages[i].classList.remove("active");
+      if (dots[i]) dots[i].classList.remove("active");
+    }
+  }
+  var backBtn = document.getElementById("debate-modal-back");
+  var nextBtn = document.getElementById("debate-modal-next");
+  var quickBtn = document.getElementById("debate-modal-quick");
+  var startBtn = document.getElementById("debate-modal-start");
+  var cancelBtn = document.getElementById("debate-modal-cancel");
+  if (step === 0) {
+    // Cancel + (Quick / Setup Panel) - buttons hidden until topic entered
+    if (backBtn) backBtn.classList.add("hidden");
+    if (cancelBtn) cancelBtn.classList.remove("hidden");
+    if (quickBtn) quickBtn.classList.add("hidden");
+    if (nextBtn) nextBtn.classList.add("hidden");
+    if (startBtn) startBtn.classList.add("hidden");
+  } else {
+    // Back + (Quick / Setup Detail)
+    if (backBtn) backBtn.classList.remove("hidden");
+    if (cancelBtn) cancelBtn.classList.add("hidden");
+    if (quickBtn) quickBtn.classList.add("hidden");
+    if (nextBtn) nextBtn.classList.add("hidden");
+    if (startBtn) startBtn.classList.add("hidden");
+  }
+}
+
+function updateStepButtons() {
+  var topicInput = document.getElementById("debate-topic-input");
+  var topic = topicInput ? topicInput.value.trim() : "";
+  var quickBtn = document.getElementById("debate-modal-quick");
+  var nextBtn = document.getElementById("debate-modal-next");
+  var startBtn = document.getElementById("debate-modal-start");
+  if (wizardStep === 0) {
+    // Show buttons only when topic is filled
+    if (topic) {
+      if (quickBtn) quickBtn.classList.remove("hidden");
+      if (nextBtn) nextBtn.classList.remove("hidden");
+    } else {
+      if (quickBtn) quickBtn.classList.add("hidden");
+      if (nextBtn) nextBtn.classList.add("hidden");
+    }
+  } else if (wizardStep === 1) {
+    // Show buttons only when at least 1 panelist selected
+    if (selectedPanelists.length > 0) {
+      if (quickBtn) quickBtn.classList.remove("hidden");
+      if (startBtn) startBtn.classList.remove("hidden");
+    } else {
+      if (quickBtn) quickBtn.classList.add("hidden");
+      if (startBtn) startBtn.classList.add("hidden");
+    }
+  }
+}
 
 export function openDebateModal(opts) {
   opts = opts || {};
@@ -700,36 +792,13 @@ export function openDebateModal(opts) {
   if (!modalEl) return;
 
   modalEl.classList.remove("hidden");
+  goToStep(0);
 
   var topicInput = document.getElementById("debate-topic-input");
   if (topicInput) {
     topicInput.value = "";
     topicInput.focus();
-  }
-
-  // Show/hide skip-setup toggle (only when dmContext is available)
-  var skipSetupRow = document.getElementById("debate-skip-setup-row");
-  var skipSetupToggle = document.getElementById("debate-skip-setup-toggle");
-  if (skipSetupRow) {
-    if (opts.dmContext) {
-      skipSetupRow.classList.remove("hidden");
-    } else {
-      skipSetupRow.classList.add("hidden");
-    }
-  }
-  if (skipSetupToggle) {
-    skipSetupToggle.checked = false;
-    skipSetupToggle.onchange = function () {
-      var topicLabel = modalEl.querySelector('.debate-field-label[for="debate-topic-input"]');
-      var reqSpan = topicLabel ? topicLabel.querySelector(".debate-field-req") : null;
-      if (skipSetupToggle.checked) {
-        if (topicInput) topicInput.placeholder = "Leave blank to auto-detect from conversation...";
-        if (reqSpan) reqSpan.style.display = "none";
-      } else {
-        if (topicInput) topicInput.placeholder = "e.g. Should AI development be regulated?";
-        if (reqSpan) reqSpan.style.display = "";
-      }
-    };
+    topicInput.oninput = function () { updateStepButtons(); };
   }
 
   // Build DM context string for quick start
@@ -763,87 +832,103 @@ export function openDebateModal(opts) {
     }
   }
 
-  // Close button
+  // Close / Cancel / Backdrop
   var closeBtn = document.getElementById("debate-modal-close");
-  if (closeBtn) {
-    closeBtn.onclick = closeDebateModal;
-  }
+  if (closeBtn) closeBtn.onclick = closeDebateModal;
   var cancelBtn = document.getElementById("debate-modal-cancel");
-  if (cancelBtn) {
-    cancelBtn.onclick = closeDebateModal;
-  }
-
-  // Backdrop click to close
+  if (cancelBtn) cancelBtn.onclick = closeDebateModal;
   var backdrop = modalEl.querySelector(".debate-modal-backdrop");
-  if (backdrop) {
-    backdrop.onclick = closeDebateModal;
+  if (backdrop) backdrop.onclick = closeDebateModal;
+
+  // Back button
+  var backBtn = document.getElementById("debate-modal-back");
+  if (backBtn) {
+    backBtn.onclick = function () {
+      if (wizardStep > 0) goToStep(wizardStep - 1);
+      updateStepButtons();
+    };
   }
 
-  // Start button
-  var startBtn = document.getElementById("debate-modal-start");
-  if (startBtn) {
-    startBtn.onclick = function () {
-      var topic = topicInput ? topicInput.value.trim() : "";
-      var skipSetup = skipSetupToggle && skipSetupToggle.checked;
-
-      if (!skipSetup && !topic) {
-        topicInput.focus();
-        return;
-      }
-      if (selectedPanelists.length === 0) return;
+  // Choose Panel (step 0 -> 1)
+  var nextBtn = document.getElementById("debate-modal-next");
+  if (nextBtn) {
+    nextBtn.onclick = function () {
+      goToStep(1);
+      updateStepButtons();
+    };
+  }
 
-      var currentMateId = ctx.currentMateId ? ctx.currentMateId() : null;
-      if (!currentMateId) return;
+  // Helper: build payload and send
+  function fireDebate(quick) {
+    var topic = topicInput ? topicInput.value.trim() : "";
+    var currentMateId = ctx.currentMateId ? ctx.currentMateId() : null;
+    if (!currentMateId || !topic) return;
 
-      var debatePayload = {
-        type: "debate_start",
-        moderatorId: currentMateId,
-        topic: topic || (skipSetup ? "(auto-detect from conversation)" : ""),
-        panelists: selectedPanelists.map(function (id) {
-          return { mateId: id, role: "", brief: "" };
-        }),
-      };
+    var debatePayload = {
+      type: "debate_start",
+      moderatorId: currentMateId,
+      topic: topic,
+      quickStart: !!quick,
+    };
 
-      // When skip setup is toggled, send as quick start with DM context
-      if (skipSetup) {
-        debatePayload.quickStart = true;
+    if (quick && wizardStep === 0) {
+      // Step 0 quick: delegate panelist selection to moderator
+      debatePayload.panelists = [];
+      debatePayload.delegatePanelists = true;
+      debatePayload.dmContext = dmContextStr;
+    } else {
+      // Step 1: user picked panelists
+      if (selectedPanelists.length === 0) return;
+      debatePayload.panelists = selectedPanelists.map(function (id) {
+        return { mateId: id, role: "", brief: "" };
+      });
+      if (quick) {
         debatePayload.dmContext = dmContextStr;
       }
+    }
 
-      function sendDebate() {
-        // Create a new session first, then send debate_start after switch
-        if (ctx.ws) {
-          var onMessage = function (evt) {
-            try {
-              var data = JSON.parse(evt.data);
-              if (data.type === "session_switched") {
-                ctx.ws.removeEventListener("message", onMessage);
-                ctx.ws.send(JSON.stringify(debatePayload));
-              }
-            } catch (e) {}
-          };
-          ctx.ws.addEventListener("message", onMessage);
-          ctx.ws.send(JSON.stringify({ type: "new_session" }));
-        }
-        closeDebateModal();
+    function sendDebate() {
+      if (ctx.ws) {
+        var onMessage = function (evt) {
+          try {
+            var data = JSON.parse(evt.data);
+            if (data.type === "session_switched") {
+              ctx.ws.removeEventListener("message", onMessage);
+              ctx.ws.send(JSON.stringify(debatePayload));
+            }
+          } catch (e) {}
+        };
+        ctx.ws.addEventListener("message", onMessage);
+        ctx.ws.send(JSON.stringify({ type: "new_session" }));
       }
+      closeDebateModal();
+    }
 
-      if (skipSetup) {
-        // Quick start: no skill needed
-        sendDebate();
+    if (quick) {
+      sendDebate();
+    } else {
+      if (ctx.requireSkills) {
+        ctx.requireSkills({
+          title: "Skill Installation Required",
+          reason: "The Debate Setup skill is required to design this debate.",
+          skills: [{ name: "clay-debate-setup", url: "https://github.com/chadbyte/clay-debate-setup", scope: "global" }]
+        }, sendDebate);
       } else {
-        // Standard: require clay-debate-setup skill first
-        if (ctx.requireSkills) {
-          ctx.requireSkills({
-            title: "Skill Installation Required",
-            reason: "The Debate Setup skill is required to start a debate.",
-            skills: [{ name: "clay-debate-setup", url: "https://github.com/chadbyte/clay-debate-setup", scope: "global" }]
-          }, sendDebate);
-        } else {
-          sendDebate();
-        }
+        sendDebate();
       }
-    };
+    }
+  }
+
+  // Quick Start button (both steps)
+  var quickBtn = document.getElementById("debate-modal-quick");
+  if (quickBtn) {
+    quickBtn.onclick = function () { fireDebate(true); };
+  }
+
+  // Design Debate button (step 1, full setup with skill)
+  var startBtn = document.getElementById("debate-modal-start");
+  if (startBtn) {
+    startBtn.onclick = function () { fireDebate(false); };
   }
 
   refreshIcons();
@@ -895,10 +980,11 @@ function createPanelItem(mate) {
       item.classList.remove("selected");
       cb.checked = false;
     }
+    updateStepButtons();
   }
 
   item.addEventListener("click", function (e) {
-    if (e.target === cb) return; // let checkbox handle itself
+    if (e.target === cb) return;
     toggle();
   });
   cb.addEventListener("change", function () {
@@ -910,6 +996,7 @@ function createPanelItem(mate) {
       selectedPanelists.splice(idx, 1);
       item.classList.remove("selected");
     }
+    updateStepButtons();
   });
 
   return item;