clay-server 2.18.0-beta.9 → 2.18.0

package/lib/public/app.js

@@ -7,7 +7,7 @@ import { initMateSidebar, showMateSidebar, hideMateSidebar, renderMateSessionLis
 import { initMateKnowledge, requestKnowledgeList, renderKnowledgeList, handleKnowledgeContent, hideKnowledge } from './modules/mate-knowledge.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid, addRewindButton } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
-import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands, sendMessage } from './modules/input.js';
+import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands, sendMessage, hasSendableContent } from './modules/input.js';
 import { initQrCode, triggerShare } from './modules/qrcode.js';
 import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer, resetFileBrowser } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed, sendTerminalCommand } from './modules/terminal.js';
@@ -29,7 +29,7 @@ import { initMateWizard, openMateWizard, closeMateWizard, handleMateCreated } fr
 import { initCommandPalette, handlePaletteSessionSwitch, setPaletteVersion } from './modules/command-palette.js';
 import { initLongPress } from './modules/longpress.js';
 import { initMention, handleMentionStart, handleMentionStream, handleMentionDone, handleMentionError, handleMentionActivity, renderMentionUser, renderMentionResponse } from './modules/mention.js';
-import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, handleDebateEnded, handleDebateError, renderDebateStarted, renderDebateTurnDone, renderDebateEnded, renderDebateCommentInjected, openDebateModal, closeDebateModal } from './modules/debate.js';
+import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, handleDebateEnded, handleDebateError, renderDebateStarted, renderDebateTurnDone, renderDebateEnded, renderDebateCommentInjected, renderDebateUserResume, openDebateModal, closeDebateModal } from './modules/debate.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -568,6 +568,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   }
 
   function enterDmMode(key, targetUser, messages) {
+    console.log("[DEBUG enterDmMode] key=" + key, "isMate=" + (targetUser && targetUser.isMate), "messages=" + (messages ? messages.length : 0));
     // Clean up previous DM/mate state before entering new one
     if (dmMode) {
       disconnectMateWs();
@@ -603,9 +604,9 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     dmKey = key;
     dmTargetUser = targetUser;
 
-    // Persist active DM for restore after hard refresh
-    if (targetUser && targetUser.isMate) {
-      try { localStorage.setItem("clay_active_mate_dm", targetUser.id); } catch(e) {}
+    // Notify server of active mate DM (server-side presence tracking)
+    if (targetUser && targetUser.isMate && ws && ws.readyState === 1) {
+      try { ws.send(JSON.stringify({ type: "set_mate_dm", mateId: targetUser.id })); } catch(e) {}
     }
 
     // Clear unread for this user
@@ -747,7 +748,10 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     dmKey = null;
     dmTargetUser = null;
     setCurrentDmUser(null);
-    try { localStorage.removeItem("clay_active_mate_dm"); } catch(e) {}
+    // Notify server that mate DM is closed
+    if (ws && ws.readyState === 1) {
+      try { ws.send(JSON.stringify({ type: "set_mate_dm", mateId: null })); } catch(e) {}
+    }
 
     var mainCol = document.getElementById("main-column");
     if (mainCol) mainCol.classList.remove("dm-mode");
@@ -979,6 +983,9 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       }, 100);
     }
     // Feed everything into the main message handler (renders text, tools, etc.)
+    if (msg.type === "session_switched" || msg.type === "history_meta") {
+      console.log("[DEBUG mateWs]", msg.type, msg.type === "session_switched" ? "id=" + msg.id + " cli=" + (msg.cliSessionId || "").substring(0, 8) : "from=" + msg.from + " total=" + msg.total);
+    }
     processMessage(msg);
   }
 
@@ -1076,13 +1083,16 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       delete backgroundMateWs[slug];
     }
 
+    // Block main WS messages immediately (before mate WS connects)
+    // so project history doesn't leak into the DM chat
+    savedMainWs = ws;
+    savedActiveSessionId = activeSessionId;
+
     var protocol = location.protocol === "https:" ? "wss:" : "ws:";
     mateWs = new WebSocket(protocol + "//" + location.host + "/p/" + slug + "/ws");
 
     mateWs.onopen = function () {
       // Swap main ws to mateWs so all UI (input, model selector, etc.) routes through mate project
-      savedMainWs = ws;
-      savedActiveSessionId = activeSessionId;
       ws = mateWs;
       connected = true;
       // Wrap send to blink IO on outgoing traffic
@@ -1099,6 +1109,10 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       if (ws === mateWs) {
         ws = savedMainWs;
         savedMainWs = null;
+      } else if (savedMainWs && !ws) {
+        // Mate WS failed before swap completed; restore main WS
+        ws = savedMainWs;
+        savedMainWs = null;
       }
       mateWs = null;
       delete backgroundMateWs[slug];
@@ -1136,6 +1150,11 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       savedActiveSessionId = null;
     }
     mateProjectSlug = null;
+    // Hide debate sticky when leaving mate DM
+    showDebateSticky("hide", null);
+    // Hide debate info float
+    var debateFloat = document.getElementById("debate-info-float");
+    if (debateFloat) { debateFloat.classList.add("hidden"); debateFloat.innerHTML = ""; }
     // If main WS was disconnected while in mate DM, reconnect now
     if (ws && ws.readyState !== 1) {
       connect();
@@ -1602,6 +1621,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   var loopAvailable = false;
   var loopIteration = 0;
   var loopMaxIterations = 0;
+  var loopBannerName = null;
   var ralphPhase = "idle"; // idle | wizard | crafting | approval | executing | done
   var ralphCraftingSessionId = null;
   var ralphCraftingSource = null; // "ralph" or null (task)
@@ -2118,7 +2138,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     } else if (status === "processing") {
       if (dot) { dot.classList.add("connected"); dot.classList.add("processing"); }
       processing = true;
-      setSendBtnMode(inputEl.value.trim() ? "send" : "stop");
+      setSendBtnMode(hasSendableContent() ? "send" : "stop");
     } else {
       connected = false;
       sendBtn.disabled = true;
@@ -2171,7 +2191,11 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       '<span class="mate-thinking-dots"><span></span><span></span><span></span></span>' +
       '</div>' +
       '</div>';
-    addToMessages(matePreThinkingEl);
+    if (activityEl && activityEl.parentNode) {
+      activityEl.parentNode.insertBefore(matePreThinkingEl, activityEl);
+    } else {
+      addToMessages(matePreThinkingEl);
+    }
     scrollToBottom();
   }
   function removeMatePreThinking() {
@@ -2896,6 +2920,13 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     isMateDm: function () { return dmMode && dmTargetUser && dmTargetUser.isMate; },
     getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
     getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
+    getMateById: function (id) {
+      if (!id || !cachedMatesList) return null;
+      for (var i = 0; i < cachedMatesList.length; i++) {
+        if (cachedMatesList[i].id === id) return cachedMatesList[i];
+      }
+      return null;
+    },
   });
 
   // isPlanFile, toolSummary, toolActivityText, shortPath -> modules/tools.js
@@ -3692,30 +3723,8 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
         ws.send(JSON.stringify({ type: "mate_list" }));
       } catch(e) {}
 
-      // Restore the last active session for this project (overrides server global)
-      try {
-        var savedSessionId = localStorage.getItem("clay_active_session_" + basePath);
-        if (savedSessionId) {
-          ws.send(JSON.stringify({ type: "switch_session", id: parseInt(savedSessionId, 10) }));
-        }
-      } catch(e) {}
-
-      // Restore mate DM after hard refresh or server restart
-      try {
-        var savedMateDm = localStorage.getItem("clay_active_mate_dm");
-        if (savedMateDm) {
-          // If dmMode is stale (server restarted while in mate DM), clean up first
-          if (dmMode) {
-            dmMode = false;
-            savedMainWs = null;
-            mateWs = null;
-            document.body.classList.remove("mate-dm-active");
-          }
-          pendingMateDmRestore = true;
-          messagesEl.innerHTML = ""; // prevent regular history flash
-          openDm(savedMateDm);
-        }
-      } catch(e) {}
+      // Session restore is now server-driven (user-presence.json).
+      // Mate DM restore is also server-driven via "restore_mate_dm" message.
     };
 
     ws.onclose = function (e) {
@@ -3780,11 +3789,18 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   }
 
   function processMessage(msg) {
+      // DEBUG: trace session/history loading
+      if (msg.type === "session_switched" || msg.type === "history_meta" || msg.type === "history_done" || msg.type === "mention_user" || msg.type === "mention_response") {
+        console.log("[DEBUG msg]", msg.type, msg.type === "session_switched" ? "id=" + msg.id + " cli=" + (msg.cliSessionId || "").substring(0, 8) : "", msg.type === "history_meta" ? "from=" + msg.from + " total=" + msg.total : "", msg.type === "mention_user" ? "mate=" + msg.mateName : "", "dmMode=" + dmMode, "pending=" + pendingMateDmRestore, "ws===mateWs?" + (ws === mateWs));
+      }
+
       // Suppress regular project messages while restoring mate DM
       if (pendingMateDmRestore) {
         if (msg.type === "dm_history" || msg.type === "dm_list" || msg.type === "mate_list" || msg.type === "mate_created" || msg.type === "info") {
           // Let these through
+          console.log("[DEBUG] pendingRestore: letting through", msg.type);
         } else {
+          console.log("[DEBUG] pendingRestore: BLOCKING", msg.type);
           return; // skip regular session messages
         }
       }
@@ -3841,6 +3857,21 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           }
           break;
 
+        case "restore_mate_dm":
+          if (msg.mateId) {
+            // Server-driven mate DM restore on reconnect
+            if (dmMode) {
+              dmMode = false;
+              savedMainWs = null;
+              mateWs = null;
+              document.body.classList.remove("mate-dm-active");
+            }
+            pendingMateDmRestore = true;
+            messagesEl.innerHTML = "";
+            openDm(msg.mateId);
+          }
+          break;
+
         case "info":
           if (msg.text && !msg.project && !msg.cwd) {
             addSystemMessage(msg.text, false);
@@ -4081,8 +4112,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           }
           activeSessionId = msg.id;
           cliSessionId = msg.cliSessionId || null;
-          // Persist active session per project so reconnect restores it
-          try { localStorage.setItem("clay_active_session_" + basePath, String(msg.id)); } catch(e) {}
+          // Session presence is now tracked server-side (user-presence.json)
           clearRemoteCursors();
           resetClientState();
           updateRalphBars();
@@ -4246,7 +4276,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           break;
 
         case "permission_request":
-          renderPermissionRequest(msg.requestId, msg.toolName, msg.toolInput, msg.decisionReason);
+          renderPermissionRequest(msg.requestId, msg.toolName, msg.toolInput, msg.decisionReason, msg.mateId);
           startUrgentBlink();
           break;
 
@@ -4261,7 +4291,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           break;
 
         case "permission_request_pending":
-          renderPermissionRequest(msg.requestId, msg.toolName, msg.toolInput, msg.decisionReason);
+          renderPermissionRequest(msg.requestId, msg.toolName, msg.toolInput, msg.decisionReason, msg.mateId);
           startUrgentBlink();
           break;
 
@@ -4702,12 +4732,13 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           break;
 
         case "mention_user":
-          // History replay: render mention user message from another client
+          // Finalize current assistant block so mention renders in correct DOM position
+          finalizeAssistantBlock();
           renderMentionUser(msg);
           break;
 
         case "mention_response":
-          // History replay: render mention response from another client
+          finalizeAssistantBlock();
           renderMentionResponse(msg);
           break;
 
@@ -4718,7 +4749,11 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
 
         case "debate_started":
           showDebateSticky("live", msg);
-          handleDebateStarted(msg);
+          if (replayingHistory) {
+            renderDebateStarted(msg);
+          } else {
+            handleDebateStarted(msg);
+          }
           break;
 
         case "debate_turn":
@@ -4735,7 +4770,12 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           break;
 
         case "debate_turn_done":
-          handleDebateTurnDone(msg);
+          if (msg.round) updateDebateRound(msg.round);
+          if (replayingHistory) {
+            renderDebateTurnDone(msg);
+          } else {
+            handleDebateTurnDone(msg);
+          }
           break;
 
         case "debate_comment_queued":
@@ -4743,12 +4783,33 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           break;
 
         case "debate_comment_injected":
-          handleDebateCommentInjected(msg);
+          if (replayingHistory) {
+            renderDebateCommentInjected(msg);
+          } else {
+            handleDebateCommentInjected(msg);
+          }
+          break;
+
+        case "debate_conclude_confirm":
+          showDebateConcludeConfirm(msg);
+          break;
+
+        case "debate_user_resume":
+          renderDebateUserResume(msg);
+          break;
+
+        case "debate_resumed":
+          handleDebateResumed(msg);
+          showDebateSticky("live", msg);
           break;
 
         case "debate_ended":
           showDebateSticky("ended", msg);
-          handleDebateEnded(msg);
+          if (replayingHistory) {
+            renderDebateEnded(msg);
+          } else {
+            handleDebateEnded(msg);
+          }
           break;
 
         case "debate_error":
@@ -4786,6 +4847,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           loopActive = msg.active;
           loopIteration = msg.iteration || 0;
           loopMaxIterations = msg.maxIterations || 20;
+          loopBannerName = msg.name || null;
           updateLoopButton();
           if (loopActive) {
             showLoopBanner(true);
@@ -4793,7 +4855,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
               updateLoopBanner(loopIteration, loopMaxIterations, "running");
             }
             inputEl.disabled = true;
-            inputEl.placeholder = "Ralph Loop is running...";
+            inputEl.placeholder = (loopBannerName || "Loop") + " is running...";
           }
           break;
 
@@ -4802,11 +4864,12 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           ralphPhase = "executing";
           loopIteration = 0;
           loopMaxIterations = msg.maxIterations;
+          loopBannerName = msg.name || null;
           showLoopBanner(true);
           updateLoopButton();
-          addSystemMessage("Ralph Loop started (max " + msg.maxIterations + " iterations)", false);
+          addSystemMessage((loopBannerName || "Loop") + " started (max " + msg.maxIterations + " iterations)", false);
           inputEl.disabled = true;
-          inputEl.placeholder = "Ralph Loop is running...";
+          inputEl.placeholder = (loopBannerName || "Loop") + " is running...";
           break;
 
         case "loop_iteration":
@@ -4814,16 +4877,16 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
           loopMaxIterations = msg.maxIterations;
           updateLoopBanner(msg.iteration, msg.maxIterations, "running");
           updateLoopButton();
-          addSystemMessage("Ralph Loop iteration #" + msg.iteration + " started", false);
+          addSystemMessage((loopBannerName || "Loop") + " iteration #" + msg.iteration + " started", false);
           inputEl.disabled = true;
-          inputEl.placeholder = "Ralph Loop is running...";
+          inputEl.placeholder = (loopBannerName || "Loop") + " is running...";
           break;
 
         case "loop_judging":
           updateLoopBanner(loopIteration, loopMaxIterations, "judging");
           addSystemMessage("Judging iteration #" + msg.iteration + "...", false);
           inputEl.disabled = true;
-          inputEl.placeholder = "Ralph Loop is judging...";
+          inputEl.placeholder = (loopBannerName || "Loop") + " is judging...";
           break;
 
         case "loop_verdict":
@@ -4837,21 +4900,23 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
         case "loop_finished":
           loopActive = false;
           ralphPhase = "done";
+          loopBannerName = null;
           showLoopBanner(false);
           updateLoopButton();
           enableMainInput();
+          var loopLabel = loopBannerName || "Loop";
           var finishMsg = msg.reason === "pass"
-            ? "Ralph Loop completed successfully after " + msg.iterations + " iteration(s)."
+            ? loopLabel + " completed successfully after " + msg.iterations + " iteration(s)."
             : msg.reason === "max_iterations"
-              ? "Ralph Loop reached maximum iterations (" + msg.iterations + ")."
+              ? loopLabel + " reached maximum iterations (" + msg.iterations + ")."
               : msg.reason === "stopped"
-                ? "Ralph Loop stopped."
-                : "Ralph Loop ended with error.";
+                ? loopLabel + " stopped."
+                : loopLabel + " ended with error.";
           addSystemMessage(finishMsg, false);
           break;
 
         case "loop_error":
-          addSystemMessage("Ralph Loop error: " + msg.text, true);
+          addSystemMessage((loopBannerName || "Loop") + " error: " + msg.text, true);
           break;
 
         // --- Ralph Wizard / Crafting ---
@@ -5086,6 +5151,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     scrollToBottom: scrollToBottom,
     addUserMessage: addUserMessage,
     addCopyHandler: addCopyHandler,
+    addToMessages: addToMessages,
   });
 
   // --- Debate module ---
@@ -5515,7 +5581,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
     modal.querySelector(".loop-status-dialog-stop").addEventListener("click", function(e) {
       e.stopPropagation();
       closeModal();
-      showConfirm("Stop the running Ralph Loop?", function() {
+      showConfirm("Stop the running " + (loopBannerName || "loop") + "?", function() {
         if (ws && ws.readyState === 1) {
           ws.send(JSON.stringify({ type: "loop_stop" }));
         }
@@ -5534,11 +5600,12 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
       return;
     }
 
+    var bannerLabel = loopBannerName || "Loop";
     stickyEl.innerHTML =
       '<div class="ralph-sticky-inner">' +
         '<div class="ralph-sticky-header">' +
           '<span class="ralph-sticky-icon">' + iconHtml("repeat") + '</span>' +
-          '<span class="ralph-sticky-label">Ralph Loop</span>' +
+          '<span class="ralph-sticky-label">' + escapeHtml(bannerLabel) + '</span>' +
           '<span class="ralph-sticky-status" id="loop-status">Starting\u2026</span>' +
           '<button class="ralph-sticky-action ralph-sticky-stop" title="Stop loop">' + iconHtml("square") + '</button>' +
         '</div>' +
@@ -5559,10 +5626,16 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   function updateLoopBanner(iteration, maxIterations, phase) {
     var statusEl = document.getElementById("loop-status");
     if (!statusEl) return;
-    var text = "#" + iteration + "/" + maxIterations;
-    if (phase === "judging") text += " judging\u2026";
-    else if (phase === "stopping") text = "Stopping\u2026";
-    else text += " running";
+    var text;
+    if (phase === "stopping") {
+      text = "Stopping\u2026";
+    } else if (maxIterations <= 1) {
+      text = phase === "judging" ? "judging\u2026" : "running";
+    } else {
+      text = "#" + iteration + "/" + maxIterations;
+      if (phase === "judging") text += " judging\u2026";
+      else text += " running";
+    }
     statusEl.textContent = text;
   }
 
@@ -6293,111 +6366,222 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   var debateStickyState = null;
   var debateHandRaiseOpen = false;
 
+  function showDebateConcludeConfirm(msg) {
+    showDebateBottomBar("conclude", msg);
+    scrollToBottom();
+  }
+
+  // Legacy handler kept for compatibility
   function showDebateSticky(phase, msg) {
     if (phase === "ended" || phase === "hide") {
       debateStickyState = null;
     } else {
       debateStickyState = { phase: phase, msg: msg };
     }
+
+    // Hide the old sticky element (no longer used for content)
     var stickyEl = document.getElementById("debate-sticky");
-    if (!stickyEl) return;
+    if (stickyEl) { stickyEl.classList.add("hidden"); stickyEl.innerHTML = ""; }
+
+    // Remove existing header badges
+    var oldBadges = document.querySelectorAll(".debate-header-badge");
+    for (var i = 0; i < oldBadges.length; i++) oldBadges[i].remove();
 
     if (phase === "ended" || phase === "hide") {
-      stickyEl.classList.add("hidden");
-      stickyEl.innerHTML = "";
       debateHandRaiseOpen = false;
+      removeDebateBottomBar();
       return;
     }
 
-    var topic = (msg && msg.topic) || "Debate";
-    var truncTopic = topic.length > 30 ? topic.slice(0, 30) + "\u2026" : topic;
+    // Add badges next to header title
+    var headerTitle = document.getElementById("header-title");
+    if (!headerTitle) return;
 
     if (phase === "preparing") {
-      stickyEl.innerHTML =
-        '<div class="debate-sticky-inner">' +
-          '<div class="debate-sticky-header">' +
-            '<span class="debate-sticky-icon">' + iconHtml("mic") + '</span>' +
-            '<span class="debate-sticky-label">' + escapeHtml(truncTopic) + '</span>' +
-            '<span class="debate-sticky-status" id="debate-sticky-status">Setting up\u2026</span>' +
-            '<button class="debate-sticky-action debate-sticky-cancel" title="Cancel debate">' + iconHtml("x") + '</button>' +
-          '</div>' +
+      var badge = document.createElement("span");
+      badge.className = "debate-header-badge preparing";
+      badge.textContent = "Setting up\u2026";
+      headerTitle.after(badge);
+    } else if (phase === "live") {
+      var liveBadge = document.createElement("span");
+      liveBadge.className = "debate-header-badge live";
+      liveBadge.textContent = "Live";
+      headerTitle.after(liveBadge);
+
+      var roundBadge = document.createElement("span");
+      roundBadge.className = "debate-header-badge round";
+      roundBadge.id = "debate-header-round";
+      roundBadge.textContent = "R" + ((msg && msg.round) || 1);
+      liveBadge.after(roundBadge);
+
+      debateHandRaiseOpen = false;
+      showDebateBottomBar("live");
+    }
+  }
+
+  // --- Debate bottom bar (replaces input-area during debate) ---
+  function showDebateBottomBar(mode, msg) {
+    removeDebateBottomBar();
+
+    var inputArea = document.getElementById("input-area");
+    if (!inputArea || !inputArea.parentNode) return;
+
+    var bar = document.createElement("div");
+    bar.id = "debate-bottom-bar";
+    bar.className = "debate-bottom-bar";
+
+    if (mode === "live") {
+      bar.innerHTML =
+        '<div class="debate-bottom-inner">' +
+          '<button class="debate-bottom-hand" id="debate-bottom-hand">' + iconHtml("hand") + ' Raise hand</button>' +
+          '<button class="debate-bottom-stop" id="debate-bottom-stop">' + iconHtml("square") + ' Stop</button>' +
         '</div>';
-      stickyEl.classList.remove("hidden");
-      stickyEl.className = "debate-sticky preparing";
+
+      inputArea.parentNode.insertBefore(bar, inputArea);
+      inputArea.style.display = "none";
       refreshIcons();
 
-      stickyEl.querySelector(".debate-sticky-cancel").addEventListener("click", function (e) {
-        e.stopPropagation();
+      document.getElementById("debate-bottom-hand").addEventListener("click", function () {
+        toggleDebateHandRaise();
+      });
+      document.getElementById("debate-bottom-stop").addEventListener("click", function () {
         if (ws && ws.readyState === 1) {
           ws.send(JSON.stringify({ type: "debate_stop" }));
         }
-        stickyEl.classList.add("hidden");
-        stickyEl.innerHTML = "";
       });
-    } else if (phase === "live") {
-      stickyEl.innerHTML =
-        '<div class="debate-sticky-inner">' +
-          '<div class="debate-sticky-header">' +
-            '<span class="debate-sticky-icon">' + iconHtml("mic") + '</span>' +
-            '<span class="debate-sticky-label">' + escapeHtml(truncTopic) + '</span>' +
-            '<span class="debate-sticky-status" id="debate-sticky-status">Live</span>' +
-            '<span class="debate-sticky-round" id="debate-sticky-round">R1</span>' +
-            '<button class="debate-sticky-action debate-sticky-hand" title="Raise hand">' + iconHtml("hand") + '</button>' +
-            '<button class="debate-sticky-action debate-sticky-stop" title="Stop debate">' + iconHtml("square") + '</button>' +
-          '</div>' +
-          '<div class="debate-sticky-hand-input hidden" id="debate-sticky-hand-input">' +
-            '<textarea id="debate-sticky-comment" rows="1" placeholder="Your comment\u2026"></textarea>' +
-            '<button class="debate-sticky-send" id="debate-sticky-send">Send</button>' +
-            '<button class="debate-sticky-send-cancel" id="debate-sticky-send-cancel">Cancel</button>' +
+    } else if (mode === "conclude") {
+      bar.innerHTML =
+        '<div class="debate-bottom-inner debate-bottom-conclude">' +
+          '<div class="debate-bottom-conclude-label">' + iconHtml("check-circle") + ' The moderator is ready to conclude. End the debate?</div>' +
+          '<textarea class="debate-bottom-conclude-input" id="debate-bottom-conclude-input" rows="3" placeholder="Or add a direction to continue..."></textarea>' +
+          '<div class="debate-bottom-conclude-actions">' +
+            '<button class="debate-bottom-continue" id="debate-bottom-continue">Continue</button>' +
+            '<button class="debate-bottom-end" id="debate-bottom-end">End Debate</button>' +
           '</div>' +
         '</div>';
-      stickyEl.classList.remove("hidden");
-      stickyEl.className = "debate-sticky live";
+
+      inputArea.parentNode.insertBefore(bar, inputArea);
+      inputArea.style.display = "none";
       refreshIcons();
-      debateHandRaiseOpen = false;
 
-      stickyEl.querySelector(".debate-sticky-hand").addEventListener("click", function (e) {
-        e.stopPropagation();
-        toggleDebateHandRaise();
+      var textArea = document.getElementById("debate-bottom-conclude-input");
+      document.getElementById("debate-bottom-end").addEventListener("click", function () {
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "debate_conclude_response", action: "end" }));
+        }
+        removeDebateBottomBar();
       });
-
-      stickyEl.querySelector(".debate-sticky-stop").addEventListener("click", function (e) {
-        e.stopPropagation();
+      document.getElementById("debate-bottom-continue").addEventListener("click", function () {
+        var text = textArea ? textArea.value.trim() : "";
         if (ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "debate_stop" }));
+          ws.send(JSON.stringify({ type: "debate_conclude_response", action: "continue", text: text }));
         }
+        removeDebateBottomBar();
+        showDebateBottomBar("live");
       });
-
-      var sendBtn = document.getElementById("debate-sticky-send");
-      var cancelBtn = document.getElementById("debate-sticky-send-cancel");
-      var commentInput = document.getElementById("debate-sticky-comment");
-
-      if (sendBtn) sendBtn.addEventListener("click", function () { sendDebateStickyComment(); });
-      if (cancelBtn) cancelBtn.addEventListener("click", function () { toggleDebateHandRaise(false); });
-      if (commentInput) {
-        commentInput.addEventListener("keydown", function (e) {
-          if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendDebateStickyComment(); }
-          if (e.key === "Escape") { toggleDebateHandRaise(false); }
+      if (textArea) {
+        textArea.focus();
+        textArea.addEventListener("keydown", function (e) {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            document.getElementById("debate-bottom-continue").click();
+          }
+        });
+        textArea.addEventListener("input", function () {
+          debateAutoResize(textArea, 12);
         });
       }
     }
   }
 
+  function debateAutoResize(textarea, maxRows) {
+    textarea.style.height = "auto";
+    var lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+    var maxHeight = lineHeight * maxRows;
+    var newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = newHeight + "px";
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }
+
+  function removeDebateBottomBar() {
+    var existing = document.getElementById("debate-bottom-bar");
+    if (existing) existing.remove();
+    // Also remove hand raise bar if open
+    var handBar = document.getElementById("debate-hand-raise-bar");
+    if (handBar) handBar.remove();
+    debateHandRaiseOpen = false;
+    // Restore input area
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) inputArea.style.display = "";
+  }
+
   function toggleDebateHandRaise(forceState) {
-    var inputWrap = document.getElementById("debate-sticky-hand-input");
-    var commentInput = document.getElementById("debate-sticky-comment");
-    if (!inputWrap) return;
     var show = typeof forceState === "boolean" ? forceState : !debateHandRaiseOpen;
     debateHandRaiseOpen = show;
-    if (show) {
-      inputWrap.classList.remove("hidden");
-      if (commentInput) { commentInput.value = ""; commentInput.focus(); }
-    } else {
-      inputWrap.classList.add("hidden");
+
+    var existing = document.getElementById("debate-hand-raise-bar");
+    if (!show) {
+      if (existing) existing.remove();
+      return;
+    }
+    if (existing) {
+      var inp = existing.querySelector(".debate-hand-input");
+      if (inp) { inp.value = ""; inp.focus(); }
+      return;
+    }
+
+    // Create hand raise bar above input area
+    var bar = document.createElement("div");
+    bar.id = "debate-hand-raise-bar";
+    bar.className = "debate-hand-raise-bar";
+    bar.innerHTML =
+      '<div class="debate-hand-raise-inner">' +
+        '<span class="debate-hand-raise-label">' + iconHtml("hand") + ' Your comment:</span>' +
+        '<textarea class="debate-hand-input" rows="1" placeholder="Type your comment..."></textarea>' +
+        '<button class="debate-hand-send">Send</button>' +
+        '<button class="debate-hand-cancel">Cancel</button>' +
+      '</div>';
+
+    var inputArea = document.getElementById("input-area");
+    if (inputArea && inputArea.parentNode) {
+      inputArea.parentNode.insertBefore(bar, inputArea);
+    }
+    refreshIcons();
+
+    var textarea = bar.querySelector(".debate-hand-input");
+    var sendBtn = bar.querySelector(".debate-hand-send");
+    var cancelBtn = bar.querySelector(".debate-hand-cancel");
+
+    if (textarea) {
+      textarea.focus();
+      textarea.addEventListener("input", function () {
+        debateAutoResize(textarea, 12);
+      });
+    }
+
+    sendBtn.addEventListener("click", function () {
+      var text = textarea ? textarea.value.trim() : "";
+      if (!text) return;
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "debate_comment", text: text }));
+      }
+      toggleDebateHandRaise(false);
+    });
+
+    cancelBtn.addEventListener("click", function () {
+      toggleDebateHandRaise(false);
+    });
+
+    if (textarea) {
+      textarea.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendBtn.click(); }
+        if (e.key === "Escape") { toggleDebateHandRaise(false); }
+      });
     }
   }
 
   function sendDebateStickyComment() {
+    // Legacy fallback (kept for compatibility)
     var commentInput = document.getElementById("debate-sticky-comment");
     if (!commentInput) return;
     var text = commentInput.value.trim();
@@ -6409,7 +6593,7 @@ import { initDebate, handleDebateStarted, handleDebateTurn, handleDebateActivity
   }
 
   function updateDebateRound(round) {
-    var roundEl = document.getElementById("debate-sticky-round");
+    var roundEl = document.getElementById("debate-header-round");
     if (roundEl) roundEl.textContent = "R" + round;
   }