clay-server 2.26.0-beta.9 → 2.26.0

package/lib/public/app.js

@@ -2,7 +2,7 @@ import { avatarUrl, userAvatarUrl, mateAvatarUrl } from './modules/avatar.js';
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal, parseEmojis } from './modules/markdown.js';
-import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge, updateSessionBadge, updateProjectBadge, closeDmUserPicker, spawnDustParticles, openMobileSheet, setMobileSheetMateData } from './modules/sidebar.js';
+import { initSidebar, renderSessionList, handleSearchResults, updateSessionPresence, updatePageTitle, populateCliSessionList, renderIconStrip, renderSidebarPresence, initIconStrip, getEmojiCategories, renderUserStrip, setCurrentDmUser, updateDmBadge, updateSessionBadge, updateProjectBadge, closeDmUserPicker, spawnDustParticles, openMobileSheet, setMobileSheetMateData, refreshMobileChatSheet } from './modules/sidebar.js';
 import { initMateSidebar, showMateSidebar, hideMateSidebar, renderMateSessionList, updateMateSidebarProfile, handleMateSearchResults } from './modules/mate-sidebar.js';
 import { initMateKnowledge, requestKnowledgeList, renderKnowledgeList, handleKnowledgeContent, hideKnowledge } from './modules/mate-knowledge.js';
 import { initMateMemory, renderMemoryList, hideMemory } from './modules/mate-memory.js';
@@ -32,7 +32,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, handleDebatePreparing, handleDebateStarted, handleDebateResumed, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, handleDebateEnded, handleDebateError, renderDebateStarted, renderDebateTurnDone, renderDebateEnded, renderDebateCommentInjected, renderDebateUserResume, openDebateModal, closeDebateModal, handleDebateBriefReady, renderDebateBriefReady, isDebateActive, resetDebateState } from './modules/debate.js';
+import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateResumed, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, handleDebateEnded, handleDebateError, renderDebateStarted, renderDebateTurnDone, renderDebateEnded, renderDebateCommentInjected, renderDebateUserResume, openDebateModal, closeDebateModal, handleDebateBriefReady, renderDebateBriefReady, isDebateActive, resetDebateState, exportDebateAsPdf, renderMcpDebateProposal } from './modules/debate.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -565,6 +565,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   // --- DM Mode Functions ---
   function openDm(targetUserId) {
     if (!ws || ws.readyState !== 1) return;
+    // Persist DM state for refresh recovery
+    try { localStorage.setItem("clay-active-dm", targetUserId); } catch (e) {}
     // Check mate skill updates before opening mate DM
     if (typeof targetUserId === "string" && targetUserId.indexOf("mate_") === 0) {
       showMateOnboarding(function () {
@@ -816,6 +818,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     dmMode = false;
     dmKey = null;
     dmTargetUser = null;
+    try { localStorage.removeItem("clay-active-dm"); } catch (e) {}
     setCurrentDmUser(null);
 
     var mainCol = document.getElementById("main-column");
@@ -1798,9 +1801,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   };
   initSidebar(sidebarCtx);
   initIconStrip(sidebarCtx);
-  initMateSidebar(function () { return (dmMode && dmTargetUser && dmTargetUser.isMate) ? ws : null; });
-  initMateKnowledge(function () { return (dmMode && dmTargetUser && dmTargetUser.isMate) ? ws : null; });
-  initMateMemory(function () { return (dmMode && dmTargetUser && dmTargetUser.isMate) ? ws : null; }, { onShow: function () { hideKnowledge(); hideNotes(); } });
+  var wsGetter = function () { return ws; };
+  initMateSidebar(wsGetter);
+  initMateKnowledge(wsGetter);
+  initMateMemory(wsGetter, { onShow: function () { hideKnowledge(); hideNotes(); } });
   initMateWizard(
     function (msg) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(msg)); },
     function (mate) { handleMateCreatedInApp(mate); }
@@ -3040,6 +3044,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     var div = document.createElement("div");
     div.className = "msg-user" + (isOtherUser ? " msg-user-other" : "");
     div.dataset.turn = ++turnCounter;
+    if (shouldGroupMessage("msg-user")) div.classList.add("grouped");
     var bubble = document.createElement("div");
     bubble.className = "bubble";
     bubble.dir = "auto";
@@ -3130,8 +3135,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     header.appendChild(nameSpan);
     var timeSpan = document.createElement("span");
     timeSpan.className = "dm-bubble-time";
-    var nowH = new Date();
-    timeSpan.textContent = String(nowH.getHours()).padStart(2, "0") + ":" + String(nowH.getMinutes()).padStart(2, "0");
+    timeSpan.textContent = getMsgTime();
     header.appendChild(timeSpan);
     contentWrap.appendChild(header);
     contentWrap.appendChild(bubble);
@@ -3140,10 +3144,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     // Action bar below bubble (icons visible on hover)
     var actions = document.createElement("div");
     actions.className = "msg-actions";
-    var now = new Date();
-    var timeStr = String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");
     actions.innerHTML =
-      '<span class="msg-action-time">' + timeStr + '</span>' +
+      '<span class="msg-action-time">' + getMsgTime() + '</span>' +
       '<button class="msg-action-btn msg-action-copy" type="button" title="Copy">' + iconHtml("copy") + '</button>' +
       '<button class="msg-action-btn msg-action-fork" type="button" title="Fork">' + iconHtml("git-branch") + '</button>' +
       '<button class="msg-action-btn msg-action-rewind msg-user-rewind-btn" type="button" title="Rewind">' + iconHtml("rotate-ccw") + '</button>' +
@@ -3164,11 +3166,33 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     forceScrollToBottom();
   }
 
+  // Track the timestamp of the current message being processed (from history _ts or now)
+  var currentMsgTs = null;
+
+  function getMsgTime() {
+    var d = currentMsgTs ? new Date(currentMsgTs) : new Date();
+    return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+  }
+
+  function shouldGroupMessage(senderClass) {
+    // Skip grouping during history replay if no timestamp data
+    if (replayingHistory && !currentMsgTs) return false;
+    var prev = messagesEl.lastElementChild;
+    if (!prev || !prev.classList.contains(senderClass)) return false;
+    var prevTime = prev.querySelector(".dm-bubble-time");
+    if (!prevTime) return false;
+    return prevTime.textContent === getMsgTime();
+  }
+
   function ensureAssistantBlock() {
     if (!currentMsgEl) {
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
+
+      var grouped = shouldGroupMessage("msg-assistant");
+      if (grouped) currentMsgEl.classList.add("grouped");
+
       // Always render avatar + header structure (CSS controls visibility)
       var _isDm2 = document.body.classList.contains("mate-dm-active") && document.body.dataset.mateAvatarUrl;
       var avi = document.createElement("img");
@@ -3187,8 +3211,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       header.appendChild(nameSpan);
       var timeSpan = document.createElement("span");
       timeSpan.className = "dm-bubble-time";
-      var nowA = new Date();
-      timeSpan.textContent = String(nowA.getHours()).padStart(2, "0") + ":" + String(nowA.getMinutes()).padStart(2, "0");
+      timeSpan.textContent = getMsgTime();
       header.appendChild(timeSpan);
       contentWrap.appendChild(header);
 
@@ -3692,7 +3715,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       // Auto-switch input to schedule mode: any message typed will be queued for after reset
       var delayUntilReset = msg.resetsAt - Date.now();
       if (delayUntilReset > 0) {
-        setScheduleDelayMs(delayUntilReset + 180000); // +3min buffer after reset
+        setScheduleDelayMs(delayUntilReset + 60000); // +1min buffer after reset
       }
       rateLimitResetTimer = setTimeout(function () {
         rateLimitResetsAt = null;
@@ -4120,6 +4143,31 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
 
       // Session restore is now server-driven (user-presence.json).
       // Mate DM restore is also server-driven via "restore_mate_dm" message.
+      // Fallback: if server doesn't restore DM within 2s, try localStorage
+      var savedDm = null;
+      try { savedDm = localStorage.getItem("clay-active-dm"); } catch (e) {}
+      if (savedDm && !dmMode && !mateProjectSlug) {
+        var dmFallbackTimer = setTimeout(function () {
+          if (!dmMode && savedDm) {
+            console.log("[dm-restore] Server did not restore DM, using localStorage fallback:", savedDm);
+            openDm(savedDm);
+          }
+        }, 2000);
+        // Cancel fallback if server restores DM first
+        var origHandler = ws.onmessage;
+        var patchedOnce = false;
+        var checkRestore = function (evt) {
+          try {
+            var d = JSON.parse(evt.data);
+            if (d.type === "restore_mate_dm" && !patchedOnce) {
+              patchedOnce = true;
+              clearTimeout(dmFallbackTimer);
+            }
+          } catch (e) {}
+        };
+        ws.addEventListener("message", checkRestore);
+        setTimeout(function () { ws.removeEventListener("message", checkRestore); }, 3000);
+      }
       // Safety: clear returningFromMateDm after initial messages settle
       // (handles case where we connect to a non-main project that won't send restore_mate_dm)
       if (returningFromMateDm) {
@@ -4218,6 +4266,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     }
 
   function processMessage(msg) {
+      // Preserve original timestamp from history replay
+      currentMsgTs = msg._ts || null;
       var isMateDm = dmMode && dmTargetUser && dmTargetUser.isMate;
 
       // DEBUG: trace session/history loading
@@ -4232,6 +4282,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       if (isMateDm) {
         if (msg.type === "session_list") {
           renderMateSessionList(msg.sessions || []);
+          refreshMobileChatSheet();
           // Override title bar with mate name and re-apply color
           var _mdn = (dmTargetUser.displayName || "New Mate");
           if (headerTitleEl) headerTitleEl.textContent = _mdn;
@@ -4337,6 +4388,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
             if (dhBar) dhBar.remove();
             var dbBadges = document.querySelectorAll(".debate-header-badge");
             for (var dbi = 0; dbi < dbBadges.length; dbi++) dbBadges[dbi].remove();
+            // Clean up ended mode banner if debate is not active on this session
+            if (debateEndedMode) exitDebateEndedMode();
           }
           scrollToBottom();
           // Scroll to tool element if navigating from file edit history
@@ -4577,9 +4630,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           break;
 
         case "session_list":
-          if (isMateDm) {
-            renderMateSessionList(msg.sessions || []);
-          }
+          renderMateSessionList(msg.sessions || []);
           renderSessionList(msg.sessions || []);
           handlePaletteSessionSwitch();
           break;
@@ -4670,6 +4721,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           break;
 
         case "user_message":
+          if (msg._internal) break;
           resetThinkingGroup();
           if (msg.planContent) {
             setPlanContent(msg.planContent);
@@ -4691,7 +4743,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
             header.className = "context-card-header";
             var icon = document.createElement("span");
             icon.className = "context-card-icon";
-            icon.textContent = "\uD83D\uDC41";
+            icon.innerHTML = iconHtml("globe");
             header.appendChild(icon);
             var label = document.createElement("span");
             label.textContent = "Viewing tab";
@@ -4715,6 +4767,15 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
             if (tabTitle || tabDomain) {
               var meta = document.createElement("div");
               meta.className = "context-card-meta";
+              if (msg.tab.favIconUrl) {
+                var fav = document.createElement("img");
+                fav.className = "context-card-favicon";
+                fav.src = msg.tab.favIconUrl;
+                fav.width = 14;
+                fav.height = 14;
+                fav.onerror = function () { this.style.display = "none"; };
+                meta.appendChild(fav);
+              }
               var titleEl = document.createElement("span");
               titleEl.className = "context-card-title";
               titleEl.textContent = tabTitle;
@@ -4788,6 +4849,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
             }
             renderPlanBanner("exit");
             getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
+          } else if (msg.name === "propose_debate" || (msg.name && msg.name.indexOf("propose_debate") !== -1)) {
+            getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
           } else if (getTodoTools()[msg.name]) {
             getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
           } else {
@@ -4796,7 +4859,18 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           break;
 
         case "tool_executing":
-          if (msg.name === "AskUserQuestion" && msg.input && msg.input.questions) {
+          if ((msg.name === "propose_debate" || (msg.name && msg.name.indexOf("propose_debate") !== -1)) && msg.input) {
+            var _dpTool = getTools()[msg.id];
+            if (_dpTool) {
+              if (_dpTool.el) _dpTool.el.style.display = "none";
+              _dpTool.done = true;
+              _dpTool.hidden = true;
+              removeToolFromGroup(msg.id);
+            }
+            finalizeAssistantBlock();
+            renderMcpDebateProposal(msg.id, msg.input);
+            startUrgentBlink();
+          } else if (msg.name === "AskUserQuestion" && msg.input && msg.input.questions) {
             var askTool = getTools()[msg.id];
             if (askTool) {
               if (askTool.el) askTool.el.style.display = "none";
@@ -5353,6 +5427,23 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           break;
 
         // --- @Mention ---
+        case "mention_processing":
+          // Broadcast: show/hide activity dot on mate avatar across all tabs
+          if (msg.mateId) {
+            var mateContainers = document.querySelectorAll('.icon-strip-mate[data-user-id="' + msg.mateId + '"]');
+            for (var mi = 0; mi < mateContainers.length; mi++) {
+              var dot = mateContainers[mi].querySelector(".icon-strip-status");
+              if (msg.active) {
+                if (dot) dot.classList.add("processing");
+                mateContainers[mi].classList.add("mention-active");
+              } else {
+                if (dot) dot.classList.remove("processing");
+                mateContainers[mi].classList.remove("mention-active");
+              }
+            }
+          }
+          break;
+
         case "mention_start":
           handleMentionStart(msg);
           break;
@@ -5430,6 +5521,10 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           }
           break;
 
+        case "debate_hand_raised":
+          // Visual feedback: hand is raised, waiting for floor
+          break;
+
         case "debate_comment_queued":
           handleDebateCommentQueued(msg);
           break;
@@ -5446,6 +5541,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
           showDebateConcludeConfirm(msg);
           break;
 
+        case "debate_user_floor":
+          showDebateUserFloor(msg);
+          break;
+
+        case "debate_user_floor_done":
+          renderDebateUserFloorDone(msg);
+          break;
+
         case "debate_user_resume":
           renderDebateUserResume(msg);
           break;
@@ -5791,6 +5894,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     isDmMode: function () { return dmMode && !(dmTargetUser && dmTargetUser.isMate); },
     getDmKey: function () { return dmKey; },
     handleDmSend: function () { handleDmSend(); },
+    isDebateEndedMode: function () { return debateEndedMode; },
+    handleDebateEndedSend: function () { handleDebateEndedSend(); },
+    isDebateConcludeMode: function () { return false; },
+    handleDebateConcludeSend: null,
+    isDebateFloorMode: function () { return debateFloorMode; },
+    handleDebateFloorSend: function () { handleDebateFloorSend(); },
     isMateDm: function () { return dmMode && dmTargetUser && dmTargetUser.isMate; },
     getMateName: function () { return dmTargetUser ? (dmTargetUser.displayName || "Mate") : "Mate"; },
     getMateAvatarUrl: function () { return document.body.dataset.mateAvatarUrl || ""; },
@@ -5817,13 +5926,16 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   // --- Debate module ---
   initDebate({
     get ws() { return ws; },
+    sendWs: function (obj) { if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj)); },
     messagesEl: messagesEl,
+    addToMessages: function (el) { addToMessages(el); },
     scrollToBottom: scrollToBottom,
     addCopyHandler: addCopyHandler,
     matesList: function () { return cachedMatesList || []; },
     availableBuiltins: function () { return cachedAvailableBuiltins || []; },
     currentMateId: function () { return (dmTargetUser && dmTargetUser.isMate) ? dmTargetUser.id : null; },
     requireSkills: requireSkills,
+    showDebateEndedMode: function (msg) { showDebateEndedMode(msg); },
   });
 
   // --- STT module (voice input via Web Speech API) ---
@@ -7114,6 +7226,159 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     scrollToBottom();
   }
 
+  var debateFloorMode = false;
+
+  var debateEndedMode = false;
+
+  function showDebateEndedMode(msg) {
+    debateEndedMode = true;
+    removeDebateBottomBar();
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) {
+      inputArea.classList.add("debate-floor-mode");
+      inputArea.style.display = "";
+    }
+    var existingBanner = document.getElementById("debate-floor-banner");
+    if (existingBanner) existingBanner.remove();
+    var banner = document.createElement("div");
+    banner.id = "debate-floor-banner";
+    banner.className = "debate-floor-banner";
+    banner.innerHTML = iconHtml("check-circle") + " <span>Debate ended</span>" +
+      '<button class="debate-floor-done-btn" id="debate-ended-resume-btn">Resume</button>' +
+      '<button class="debate-floor-done-btn" id="debate-ended-pdf-btn">' + iconHtml("download") + ' PDF</button>';
+    if (inputArea && inputArea.parentNode) {
+      inputArea.parentNode.insertBefore(banner, inputArea);
+    }
+    refreshIcons();
+    // Resume button
+    var resumeBtn = document.getElementById("debate-ended-resume-btn");
+    if (resumeBtn) {
+      resumeBtn.addEventListener("click", function () {
+        handleDebateEndedSend();
+      });
+    }
+    // PDF button
+    var pdfBtn = document.getElementById("debate-ended-pdf-btn");
+    if (pdfBtn) {
+      pdfBtn.addEventListener("click", function () {
+        pdfBtn.disabled = true;
+        exportDebateAsPdf().then(function () { pdfBtn.disabled = false; }).catch(function () { pdfBtn.disabled = false; });
+      });
+    }
+    var inputEl2 = document.getElementById("input");
+    if (inputEl2) {
+      inputEl2._origPlaceholder = inputEl2._origPlaceholder || inputEl2.placeholder;
+      inputEl2.placeholder = "Continue with a new direction...";
+    }
+    scrollToBottom();
+  }
+
+  function exitDebateEndedMode() {
+    debateEndedMode = false;
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) inputArea.classList.remove("debate-floor-mode");
+    var banner = document.getElementById("debate-floor-banner");
+    if (banner) banner.remove();
+    var inputEl2 = document.getElementById("input");
+    if (inputEl2 && inputEl2._origPlaceholder) {
+      inputEl2.placeholder = inputEl2._origPlaceholder;
+      delete inputEl2._origPlaceholder;
+    }
+  }
+
+  function handleDebateEndedSend() {
+    var text = inputEl.value.trim();
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "debate_conclude_response", action: "continue", text: text }));
+    }
+    inputEl.value = "";
+    exitDebateEndedMode();
+  }
+
+  function showDebateUserFloor(msg) {
+    debateFloorMode = true;
+    // Remove debate bottom bar and show input area in floor mode
+    removeDebateBottomBar();
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) {
+      inputArea.classList.add("debate-floor-mode");
+      inputArea.style.display = "";
+    }
+    // Add floor banner above input
+    var existingBanner = document.getElementById("debate-floor-banner");
+    if (existingBanner) existingBanner.remove();
+    var banner = document.createElement("div");
+    banner.id = "debate-floor-banner";
+    banner.className = "debate-floor-banner";
+    banner.innerHTML = iconHtml("mic") + " <span>You have the floor</span>" +
+      '<button class="debate-floor-done-btn" id="debate-floor-done-btn">Pass</button>';
+    if (inputArea && inputArea.parentNode) {
+      inputArea.parentNode.insertBefore(banner, inputArea);
+    }
+    refreshIcons();
+    // Done button: exit floor mode without sending
+    var doneBtn = document.getElementById("debate-floor-done-btn");
+    if (doneBtn) {
+      doneBtn.addEventListener("click", function () {
+        // Pass without speaking: resume debate
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "debate_user_floor_response", text: "(The user passed without speaking)" }));
+        }
+        exitDebateFloorMode();
+        showDebateBottomBar("live");
+      });
+    }
+    // Update placeholder
+    var inputEl = document.getElementById("input");
+    if (inputEl) {
+      inputEl._origPlaceholder = inputEl.placeholder;
+      inputEl.placeholder = "Share your thoughts with the panel...";
+      inputEl.focus();
+    }
+    scrollToBottom();
+  }
+
+  function exitDebateFloorMode() {
+    debateFloorMode = false;
+    var inputArea = document.getElementById("input-area");
+    if (inputArea) inputArea.classList.remove("debate-floor-mode");
+    var banner = document.getElementById("debate-floor-banner");
+    if (banner) banner.remove();
+    var inputEl = document.getElementById("input");
+    if (inputEl && inputEl._origPlaceholder) {
+      inputEl.placeholder = inputEl._origPlaceholder;
+      delete inputEl._origPlaceholder;
+    }
+  }
+
+  function handleDebateFloorSend() {
+    var text = inputEl.value.trim();
+    if (!text) return;
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "debate_user_floor_response", text: text }));
+    }
+    inputEl.value = "";
+    exitDebateFloorMode();
+    showDebateBottomBar("live");
+  }
+
+  function renderDebateUserFloorDone(msg) {
+    if (!messagesEl) return;
+    var el = document.createElement("div");
+    el.className = "debate-user-comment";
+    var label = document.createElement("span");
+    label.className = "debate-comment-label";
+    label.innerHTML = iconHtml("mic") + " User:";
+    var textEl = document.createElement("div");
+    textEl.className = "debate-comment-text";
+    textEl.textContent = msg.text || "";
+    el.appendChild(label);
+    el.appendChild(textEl);
+    messagesEl.appendChild(el);
+    refreshIcons();
+    scrollToBottom();
+  }
+
   // Legacy handler kept for compatibility
   function showDebateSticky(phase, msg) {
     if (phase === "ended" || phase === "hide") {
@@ -7136,7 +7401,13 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       return;
     }
 
-    // Add badges next to header title
+    // Show bottom bar regardless of header availability
+    if (phase === "live") {
+      debateHandRaiseOpen = false;
+      showDebateBottomBar("live");
+    }
+
+    // Add badges next to header title (optional, may not exist on mobile)
     var headerTitle = document.getElementById("header-title");
     if (!headerTitle) return;
 
@@ -7156,9 +7427,6 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       roundBadge.id = "debate-header-round";
       roundBadge.textContent = "R" + ((msg && msg.round) || 1);
       liveBadge.after(roundBadge);
-
-      debateHandRaiseOpen = false;
-      showDebateBottomBar("live");
     }
   }
 
@@ -7177,6 +7445,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       bar.innerHTML =
         '<div class="debate-bottom-inner">' +
           '<button class="debate-bottom-hand" id="debate-bottom-hand">' + iconHtml("hand") + ' Raise hand</button>' +
+          '<span class="debate-bottom-waiting hidden" id="debate-bottom-waiting">' + iconHtml("loader") + ' You will get the floor after the current speaker</span>' +
           '<button class="debate-bottom-stop" id="debate-bottom-stop">' + iconHtml("square") + ' Stop</button>' +
         '</div>';
 
@@ -7184,6 +7453,14 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       inputArea.style.display = "none";
       refreshIcons();
 
+      // Restore raised state if hand was already raised
+      if (debateHandRaiseOpen) {
+        var handBtn = document.getElementById("debate-bottom-hand");
+        var waitingEl = document.getElementById("debate-bottom-waiting");
+        if (handBtn) { handBtn.classList.add("raised"); handBtn.classList.add("hidden"); }
+        if (waitingEl) waitingEl.classList.remove("hidden");
+      }
+
       document.getElementById("debate-bottom-hand").addEventListener("click", function () {
         toggleDebateHandRaise();
       });
@@ -7223,16 +7500,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
         showDebateBottomBar("live");
       });
       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);
-        });
       }
     }
   }
@@ -7253,74 +7526,33 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     var handBar = document.getElementById("debate-hand-raise-bar");
     if (handBar) handBar.remove();
     debateHandRaiseOpen = false;
+    // Clean up floor/ended modes
+    if (debateFloorMode) exitDebateFloorMode();
+    if (debateEndedMode) exitDebateEndedMode();
     // Restore input area
     var inputArea = document.getElementById("input-area");
     if (inputArea) inputArea.style.display = "";
   }
 
   function toggleDebateHandRaise(forceState) {
-    var show = typeof forceState === "boolean" ? forceState : !debateHandRaiseOpen;
-    debateHandRaiseOpen = show;
-
-    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);
-      });
+    var raise = typeof forceState === "boolean" ? forceState : !debateHandRaiseOpen;
+    debateHandRaiseOpen = raise;
+
+    // Update UI: hide hand button, show waiting message
+    var handBtn = document.getElementById("debate-bottom-hand");
+    var waitingEl = document.getElementById("debate-bottom-waiting");
+    if (raise) {
+      if (handBtn) { handBtn.classList.add("raised"); handBtn.classList.add("hidden"); }
+      if (waitingEl) waitingEl.classList.remove("hidden");
+    } else {
+      if (handBtn) { handBtn.classList.remove("raised"); handBtn.classList.remove("hidden"); }
+      if (waitingEl) waitingEl.classList.add("hidden");
     }
 
-    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); }
-      });
+    if (raise && ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "debate_hand_raise" }));
     }
+    // Floor mode will be activated when server sends debate_user_floor
   }
 
   function sendDebateStickyComment() {