clay-server 5.0.2-beta.1 → 5.1.0-beta.2

package/lib/public/modules/default-ai.js

@@ -7,7 +7,9 @@ import { refreshIcons } from './icons.js';
 
 var sequence = 0;
 var opener = null;
+var preferredOpener = null;
 var popover = null;
+var inlineTarget = null;
 
 function nextRequestId() {
   sequence += 1;
@@ -49,6 +51,7 @@ function close() {
 
 function position() {
   if (!popover || !opener) return;
+  if (inlineTarget) return;
   var rect = opener.getBoundingClientRect();
   var width = Math.min(390, Math.max(0, window.innerWidth - 24));
   popover.style.width = width + "px";
@@ -101,6 +104,40 @@ function addFieldLabel(text, control) {
   popover.appendChild(label);
 }
 
+function inlineCurrentSelection(state, draft) {
+  return state.preference || state.selection || draft || {};
+}
+
+function renderInlineSummary() {
+  var state = store.get("defaultAiState") || {};
+  var draft = store.get("defaultAiDraft") || {};
+  var current = inlineCurrentSelection(state, draft);
+  var vendor = current.vendor ? (VENDOR_NAMES[current.vendor] || current.vendor) : "Loading default…";
+  var model = current.model || "Model unavailable";
+  var effort = current.effort || "Provider default";
+  popover.innerHTML = '';
+  var summary = document.createElement('button');
+  summary.type = 'button';
+  summary.className = 'default-ai-summary';
+  summary.id = 'account-ai-summary';
+  summary.setAttribute('aria-label', 'Default AI: ' + vendor + ', ' + model + ', ' + effort);
+  var label = document.createElement('span');
+  label.className = 'default-ai-summary-label';
+  label.textContent = 'Default AI';
+  var value = document.createElement('span');
+  value.className = 'default-ai-summary-value';
+  value.textContent = vendor + ' · ' + model + ' · ' + effort;
+  var icon = document.createElement('i');
+  icon.setAttribute('data-lucide', 'chevron-right');
+  icon.setAttribute('aria-hidden', 'true');
+  summary.appendChild(label);
+  summary.appendChild(value);
+  summary.appendChild(icon);
+  popover.appendChild(summary);
+  summary.addEventListener('click', function () { store.set({ defaultAiInlineEditing: true }); });
+  refreshIcons();
+}
+
 function render() {
   if (!popover) return;
   var state = store.get("defaultAiState") || {};
@@ -109,7 +146,17 @@ function render() {
   var catalog = (state.catalogs || {})[draft.vendor] || null;
   var models = catalog && catalog.models || [];
 
-  popover.innerHTML = '<div class="default-ai-title">Default AI</div><div class="default-ai-copy">Used for new Clay interviews and built-in AI assistance.</div>';
+  if (inlineTarget && store.get("defaultAiInlineEditing") !== true) {
+    renderInlineSummary();
+    position();
+    return;
+  }
+
+  if (inlineTarget) {
+    popover.innerHTML = '<div class="default-ai-edit-heading"><strong>Default AI</strong><button type="button" class="default-ai-cancel" aria-label="Cancel Default AI editing">Cancel</button></div>';
+  } else {
+    popover.innerHTML = '<div class="default-ai-title">Default AI</div><div class="default-ai-copy">Used for new Clay interviews and built-in AI assistance.</div>';
+  }
   if (state.loading && !vendors.length) {
     addStatus("Loading available AI providers…", false);
     position();
@@ -170,8 +217,8 @@ function render() {
   var save = document.createElement("button");
   save.type = "button";
   save.className = "default-ai-save";
-  save.textContent = state.saving ? "Saving…" : "Save default";
-  save.disabled = state.saving === true || vendors.indexOf(vendor.value) === -1 || !selectedModel || !selectedEffort;
+  save.textContent = state.saving ? "Applying…" : "Apply";
+  save.disabled = state.saving === true || store.get("defaultAiDraftDirty") !== true || vendors.indexOf(vendor.value) === -1 || !selectedModel || !selectedEffort;
   save.addEventListener("click", function () {
     var id = nextRequestId();
     var latest = store.get("defaultAiState") || {};
@@ -181,6 +228,13 @@ function render() {
     }
     render();
   });
+  if (inlineTarget) {
+    var cancel = popover.querySelector(".default-ai-cancel");
+    cancel.addEventListener("click", function () {
+      var canonical = inlineCurrentSelection(store.get("defaultAiState") || {}, store.get("defaultAiDraft") || {});
+      store.set({ defaultAiDraft: Object.assign({}, canonical), defaultAiDraftDirty: false, defaultAiInlineEditing: false });
+    });
+  }
   popover.appendChild(save);
   if (state.error) addStatus(state.error, true);
   position();
@@ -293,71 +347,25 @@ export function handleDefaultAiMessage(msg) {
 }
 
 export function initDefaultAi() {
-  var actions = document.querySelector(".user-island-actions");
-  if (!actions || document.getElementById("default-ai-btn")) return;
-  var button = document.createElement("button");
-  button.id = "default-ai-btn";
-  button.className = "default-ai-button";
-  button.title = "Default AI";
-  button.setAttribute("aria-label", "Default AI");
-  button.setAttribute("aria-haspopup", "dialog");
-  button.setAttribute("aria-expanded", "false");
-  button.innerHTML = '<span class="default-ai-avatar"></span>';
-  var settings = document.getElementById("user-settings-btn");
-  if (settings) actions.insertBefore(button, settings);
-  else actions.appendChild(button);
-  popover = document.createElement("section");
-  popover.id = "default-ai-popover";
-  popover.className = "default-ai-popover hidden";
-  popover.setAttribute("role", "dialog");
-  popover.setAttribute("aria-label", "Default AI settings");
-  document.body.appendChild(popover);
-  button.addEventListener("click", function () {
-    if (!popover.classList.contains("hidden")) { close(); return; }
-    opener = button;
-    button.setAttribute("aria-expanded", "true");
-    popover.classList.remove("hidden");
-    requestDefaultAi();
-    render();
-  });
-  document.addEventListener("click", function (event) {
-    var path = typeof event.composedPath === "function" ? event.composedPath() : [];
-    var clickedButton = path.indexOf(button) !== -1 || button.contains(event.target);
-    var clickedPopover = path.indexOf(popover) !== -1 || popover.contains(event.target);
-    if (!popover || popover.classList.contains("hidden") || clickedPopover || clickedButton) return;
-    close();
-  });
-  document.addEventListener("keydown", function (event) {
-    if (event.key !== "Escape" || !popover || popover.classList.contains("hidden")) return;
-    event.preventDefault();
-    close();
-  });
-  window.addEventListener("resize", position);
-  window.addEventListener("scroll", position, true);
-  updateBadge();
+  return;
 }
 
-export function openDefaultAi() {
-  var button = document.getElementById("default-ai-btn");
-  if (button && popover && popover.classList.contains("hidden")) button.click();
+export function openDefaultAi(openerElement) {
+  document.dispatchEvent(new CustomEvent('clay:open-account-default-ai', { detail: { opener: openerElement || null } }));
 }
 
-function updateBadge() {
-  var avatar = document.querySelector("#default-ai-btn .default-ai-avatar");
-  var selection = (store.get("defaultAiState") || {}).selection;
-  if (!avatar) return;
-  var source = selection && VENDOR_AVATARS[selection.vendor];
-  var image = avatar.querySelector("img");
-  if (!source) {
-    if (image) image.remove();
-    return;
-  }
-  if (!image) {
-    image = document.createElement("img");
-    image.alt = "";
-    avatar.appendChild(image);
-  }
-  if (image.getAttribute("src") !== source) image.setAttribute("src", source);
+export function mountDefaultAi(target) {
+  inlineTarget = target;
+  popover = target;
+  opener = target;
+  render();
+}
+
+export function unmountDefaultAi(target) {
+  if (inlineTarget !== target) return;
+  inlineTarget = null;
+  opener = null;
+  popover = null;
 }
 
 store.subscribe(function (state, previous) {
@@ -371,7 +379,15 @@ store.subscribe(function (state, previous) {
     if (accountId && state.connected) requestDefaultAi();
     return;
   }
+  if (state.defaultAiInlineEditing !== previous.defaultAiInlineEditing) {
+    if (popover) render();
+    return;
+  }
   if (state.defaultAiState === previous.defaultAiState) return;
-  updateBadge();
+  if (inlineTarget && previous.defaultAiState && previous.defaultAiState.saving === true && state.defaultAiState && state.defaultAiState.saving === false && state.defaultAiDraftDirty !== true && state.defaultAiInlineEditing === true) {
+    store.set({ defaultAiInlineEditing: false });
+    render();
+    return;
+  }
   if (popover && !popover.classList.contains("hidden")) render();
 });

package/lib/public/modules/filebrowser.js

@@ -13,6 +13,7 @@ import { initFileViewerTabs, openFileViewerTab, previewFileViewerTab, updateFile
 import { initFileBrowserContextMenu, downloadProjectFile } from './filebrowser-context-menu.js';
 import { registerClayFileLinkOpener } from './clay-file-links.js';
 import { isPlantUmlFile, renderPlantUmlPreview, cancelPlantUmlPreview } from './plantuml-preview.js';
+import { isHtmlFile, renderHtmlPreview } from './html-preview.js';
 
 var ctx;
 var showDropHint = function () {};
@@ -43,7 +44,7 @@ export function initFileBrowser(_ctx) {
     onFocus: function(path) {
       claimRightWorkbench("file-viewer");
       ctx.fileViewerEl.classList.remove("hidden");
-      if (path !== currentFilePath) requestFileContent(path);
+      if (path !== currentFilePath || (store.get("fileViewerIsHtml") && isRendered && !document.querySelector(".file-viewer-html-preview"))) requestFileContent(path);
     },
     onEmpty: function() { teardownFileViewer(); },
   });
@@ -194,10 +195,14 @@ export function initFileBrowser(_ctx) {
     downloadProjectFile(currentFilePath);
   });
 
-  // Markdown render toggle
+  // File preview/source toggle
   document.getElementById("file-viewer-render").addEventListener("click", function () {
-    if (currentContent == null || (!currentIsMarkdown && !currentIsSvg && !store.get("fileViewerIsPlantUml"))) return;
+    if (currentContent == null || (!currentIsMarkdown && !currentIsSvg && !store.get("fileViewerIsPlantUml") && !store.get("fileViewerIsHtml"))) return;
     isRendered = !isRendered;
+    if (store.get("fileViewerIsHtml")) {
+      renderHtmlBody();
+      return;
+    }
     if (store.get("fileViewerIsPlantUml")) {
       renderPlantUmlBody();
       return;
@@ -491,6 +496,8 @@ export function closeFileViewer() {
 
 function teardownFileViewer() {
   cancelPlantUmlPreview();
+  var htmlFrame = document.querySelector(".file-viewer-html-preview");
+  if (htmlFrame) htmlFrame.remove();
   if (currentFilePath && isFollowingMarkdown(currentFilePath)) cancelMarkdownFollow();
   sendUnwatch();
   inlineDiffActive = false;
@@ -528,7 +535,7 @@ export function resetFileBrowser() {
   isRendered = false;
   currentIsMarkdown = false;
   currentIsSvg = false;
-  store.set({ fileViewerIsPlantUml: false });
+  store.set({ fileViewerIsPlantUml: false, fileViewerIsHtml: false });
   cancelPlantUmlPreview();
   historyVisible = false;
   currentHistoryEntries = [];
@@ -1165,7 +1172,7 @@ function showFileContent(msg, expectedRevision) {
   currentFilePath = msg.path;
   currentIsMarkdown = false;
   currentIsSvg = false;
-  store.set({ fileViewerIsPlantUml: false });
+  store.set({ fileViewerIsPlantUml: false, fileViewerIsHtml: false });
   cancelPlantUmlPreview();
   if (!keepRenderState) isRendered = false;
   var requestedExt = msg.path.split(".").pop().toLowerCase();
@@ -1193,19 +1200,20 @@ function showFileContent(msg, expectedRevision) {
     lightweightPreview = (msg.size || 0) > FILE_RICH_PREVIEW_MAX_BYTES;
     currentIsMarkdown = !lightweightPreview && (ext === "md" || ext === "mdx");
     currentIsSvg = !lightweightPreview && ext === "svg";
+    store.set({ fileViewerIsHtml: !lightweightPreview && isHtmlFile(msg.path) });
     store.set({ fileViewerIsPlantUml: !lightweightPreview && isPlantUmlFile(msg.path) });
     if (lightweightPreview) isRendered = false;
     if (pendingRenderedOpen && currentIsMarkdown) isRendered = true;
 
-    if (currentIsMarkdown || currentIsSvg || store.get("fileViewerIsPlantUml")) {
+    if (currentIsMarkdown || currentIsSvg || store.get("fileViewerIsPlantUml") || store.get("fileViewerIsHtml")) {
       renderBtn.classList.remove("hidden");
       renderBtn.title = currentIsSvg ? "Show SVG source" : "Render markdown";
-      copyBtn.title = store.get("fileViewerIsPlantUml") ? "Copy PlantUML source" : currentIsSvg ? "Copy SVG source" : "Copy Markdown source";
+      copyBtn.title = store.get("fileViewerIsHtml") ? "Copy HTML source" : store.get("fileViewerIsPlantUml") ? "Copy PlantUML source" : currentIsSvg ? "Copy SVG source" : "Copy Markdown source";
     } else {
       copyBtn.title = "Copy contents";
     }
 
-    // Markdown starts as source; SVG starts as a safe image preview.
+    // Markdown starts as source; HTML, SVG and diagrams start as previews.
     if (lightweightPreview) {
       renderLargeTextFile(bodyEl, msg.content, msg.size);
     } else if (currentIsMarkdown) {
@@ -1214,6 +1222,9 @@ function showFileContent(msg, expectedRevision) {
         ? (previousContent == null ? "" : previousContent)
         : null;
       renderBody(transitionFrom, refreshSlideIndex);
+    } else if (store.get("fileViewerIsHtml")) {
+      if (!keepRenderState) isRendered = !store.get("pendingFileNavigation");
+      renderHtmlBody();
     } else if (store.get("fileViewerIsPlantUml")) {
       if (!keepRenderState) isRendered = !store.get("pendingFileNavigation");
       renderPlantUmlBody();
@@ -1283,6 +1294,15 @@ function showFileContent(msg, expectedRevision) {
   }
 }
 
+function renderHtmlBody() {
+  var bodyEl = document.getElementById("file-viewer-body");
+  var renderBtn = document.getElementById("file-viewer-render");
+  renderBtn.classList.toggle("active", isRendered);
+  renderBtn.title = isRendered ? "Show HTML source" : "Show HTML preview";
+  if (isRendered) renderHtmlPreview(bodyEl, currentContent, currentFilePath);
+  else renderCodeWithLineNumbers(bodyEl, currentContent, "html");
+}
+
 function renderPlantUmlBody() {
   var bodyEl = document.getElementById("file-viewer-body");
   var renderBtn = document.getElementById("file-viewer-render");

package/lib/public/modules/home-debate-controls.js

@@ -1,295 +1,24 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-
-var slotEl = null;
-var normalComposerEl = null;
-var modelEl = null;
-var controlEl = null;
-var controlMode = null;
-var controlStateKey = null;
-var currentState = null;
-var currentRequestId = null;
-var startNewDebate = null;
-var inputEl = null;
-var primaryEl = null;
-var secondaryEl = null;
-var activityEl = null;
-var handEl = null;
-var stopEl = null;
-var composing = false;
-
-function textElement(tag, className, text) {
-  var element = document.createElement(tag);
-  element.className = className;
-  element.textContent = text || "";
-  return element;
-}
-
-function findHeader(messages) {
-  for (var i = (messages || []).length - 1; i >= 0; i--) if (messages[i] && messages[i].role === "debate_header") return messages[i];
-  return null;
-}
-
-function findActiveTurn(messages) {
-  for (var i = (messages || []).length - 1; i >= 0; i--) {
-    if (messages[i] && messages[i].role === "debate_turn" && messages[i].status === "active") return messages[i];
-  }
-  return null;
-}
-
-export function homeDebateControlState(messages) {
-  var header = findHeader(messages);
-  if (!header || ["live", "ended", "interrupted"].indexOf(header.phase) === -1) return null;
-  var mode = header.phase === "live" ? (header.interaction || "default") : "terminal";
-  return { mode: mode, header: header, turn: findActiveTurn(messages), phase: header.phase };
-}
-
-function ensureElements() {
-  var nextSlot = document.getElementById("home-debate-controls-slot");
-  if (slotEl === nextSlot) return !!slotEl;
-  slotEl = nextSlot;
-  normalComposerEl = document.getElementById("home-mate-chat-composer");
-  modelEl = document.getElementById("home-mate-chat-session-model");
-  controlEl = null;
-  controlMode = null;
-  controlStateKey = null;
-  return !!slotEl;
-}
-
-function clearControls() {
-  if (slotEl) slotEl.innerHTML = "";
-  controlEl = null;
-  controlMode = null;
-  controlStateKey = null;
-  currentState = null;
-  inputEl = null;
-  primaryEl = null;
-  secondaryEl = null;
-  activityEl = null;
-  handEl = null;
-  stopEl = null;
-  composing = false;
-}
-
-function setSpecialMode(active) {
-  if (normalComposerEl) normalComposerEl.hidden = active;
-  if (modelEl) modelEl.hidden = active;
-  if (slotEl) slotEl.hidden = !active;
-}
-
-function sendControl(action, data) {
-  var ws = getWs();
-  if (!ws || ws.readyState !== 1 || !currentState) return false;
-  ws.send(JSON.stringify({
-    type: "home_debate_control",
-    action: action,
-    mateId: store.get('homeChatMateId'),
-    sessionId: store.get('homeChatSessionId'),
-    requestId: currentRequestId,
-    text: data && data.text ? data.text : "",
-    response: data && data.response ? data.response : null,
-  }));
-  return true;
-}
-
-function button(label, className) {
-  var element = textElement("button", className, label);
-  element.type = "button";
-  return element;
-}
-
-function dots() {
-  var group = document.createElement("span");
-  group.className = "home-debate-control-dots";
-  group.setAttribute("aria-hidden", "true");
-  for (var i = 0; i < 3; i++) group.appendChild(document.createElement("i"));
-  return group;
-}
-
-function activityLabel(state) {
-  if (state.header.stopping) return state.turn ? "Stopping after " + (state.turn.mateName || "the current speaker") + " finishes" : "Stopping debate";
-  if (!state.turn) return state.header.handRaised ? "Your hand is raised" : "Debate is live";
-  var name = state.turn.mateName || "Mate";
-  var activity = state.turn.activity || (state.turn.text ? "speaking" : "preparing");
-  return name + " is " + activity.toLowerCase();
-}
-
-function lockSubmission(label) {
-  if (inputEl) inputEl.disabled = true;
-  if (primaryEl) { primaryEl.disabled = true; primaryEl.textContent = label; }
-  if (secondaryEl) secondaryEl.disabled = true;
-}
-
-function submitInput(action, response) {
-  var text = inputEl ? inputEl.value.trim() : "";
-  if (action === "user_floor" && !text) return false;
-  if (!sendControl(action, { text: text, response: response })) return false;
-  lockSubmission(action === "user_floor" ? "Sending…" : "Continuing…");
-  return true;
-}
-
-function bindInput(submit) {
-  inputEl.addEventListener("compositionstart", function () { composing = true; });
-  inputEl.addEventListener("compositionend", function () { composing = false; });
-  inputEl.addEventListener("input", function () {
-    if (controlMode === "user_floor" && primaryEl) primaryEl.disabled = !inputEl.value.trim();
-  });
-  inputEl.addEventListener("keydown", function (event) {
-    if (event.key !== "Enter" || event.shiftKey || event.isComposing || composing || event.keyCode === 229) return;
-    event.preventDefault();
-    submit();
-  });
-}
-
-function focusInputOnce() {
-  var target = inputEl;
-  if (!target) return;
-  var focus = function () {
-    if (target === inputEl && !target.disabled && target.isConnected !== false) target.focus({ preventScroll: true });
-  };
-  if (typeof requestAnimationFrame === "function") requestAnimationFrame(focus);
-  else focus();
-}
-
-function buildDefault(state) {
-  var context = document.createElement("div");
-  context.className = "home-debate-control-context";
-  context.appendChild(dots());
-  activityEl = textElement("span", "home-debate-control-activity", activityLabel(state));
-  activityEl.setAttribute("role", "status");
-  activityEl.setAttribute("aria-live", "polite");
-  context.appendChild(activityEl);
-  controlEl.appendChild(context);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  handEl = button(state.header.handRaised ? "Hand raised" : "Raise hand", "home-debate-control-secondary");
-  handEl.setAttribute("aria-pressed", state.header.handRaised ? "true" : "false");
-  handEl.disabled = state.header.handRaised === true;
-  handEl.addEventListener("click", function () {
-    if (!sendControl("hand_raise")) return;
-    handEl.disabled = true;
-    handEl.textContent = "Raising hand…";
-  });
-  stopEl = button(state.header.stopping ? "Cancel stop" : "Stop debate", state.header.stopping ? "home-debate-control-secondary" : "home-debate-control-stop");
-  stopEl.addEventListener("click", function () {
-    var cancelling = currentState && currentState.header && currentState.header.stopping === true;
-    if (!sendControl(cancelling ? "cancel_stop" : "stop")) return;
-    stopEl.disabled = true;
-    stopEl.textContent = cancelling ? "Cancelling…" : "Stopping…";
-  });
-  actions.appendChild(handEl);
-  actions.appendChild(stopEl);
-  controlEl.appendChild(actions);
-}
-
-function buildInputMode(state) {
-  var isFloor = state.mode === "user_floor";
-  var heading = textElement("div", "home-debate-control-heading", isFloor ? "You have the floor" : "The moderator is ready to conclude");
-  heading.id = "home-debate-control-heading";
-  controlEl.appendChild(heading);
-  inputEl = document.createElement("textarea");
-  inputEl.rows = 2;
-  inputEl.placeholder = isFloor ? "Share your thoughts with the panel" : "Add an optional direction to continue";
-  inputEl.setAttribute("aria-labelledby", heading.id);
-  controlEl.appendChild(inputEl);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  if (isFloor) {
-    primaryEl = button("Send", "home-debate-control-primary");
-    primaryEl.disabled = true;
-    primaryEl.addEventListener("click", function () { submitInput("user_floor"); });
-    secondaryEl = button("Pass", "home-debate-control-secondary");
-    secondaryEl.addEventListener("click", function () {
-      if (!sendControl("user_floor", { text: "(The user passed without speaking)" })) return;
-      lockSubmission("Sending…");
-    });
-  } else {
-    primaryEl = button("Continue", "home-debate-control-primary");
-    primaryEl.addEventListener("click", function () { submitInput("conclude", "continue"); });
-    secondaryEl = button("End debate", "home-debate-control-stop");
-    secondaryEl.addEventListener("click", function () {
-      if (!sendControl("conclude", { response: "end" })) return;
-      lockSubmission("Ending…");
-    });
-  }
-  actions.appendChild(primaryEl);
-  actions.appendChild(secondaryEl);
-  controlEl.appendChild(actions);
-  bindInput(function () { submitInput(isFloor ? "user_floor" : "conclude", isFloor ? null : "continue"); });
-  focusInputOnce();
-}
-
-function terminalLabel(state) {
-  if (state.phase === "interrupted") return "Debate interrupted when Clay restarted";
-  if (state.header.reason === "error") return "The debate stopped after an error";
-  if (state.header.reason === "stopped" || state.header.reason === "user_stopped") return "Debate stopped";
-  return "Debate ended";
-}
-
-function buildTerminal(state) {
-  var status = textElement("div", "home-debate-control-terminal-status", terminalLabel(state));
-  status.setAttribute("role", "status");
-  controlEl.appendChild(status);
-  var actions = document.createElement("div");
-  actions.className = "home-debate-control-actions";
-  primaryEl = button("Resume debate", "home-debate-control-primary");
-  primaryEl.addEventListener("click", function () {
-    if (!sendControl("resume")) return;
-    lockSubmission("Resuming…");
-  });
-  actions.appendChild(primaryEl);
-  if (typeof startNewDebate === "function") {
-    secondaryEl = button("New debate", "home-debate-control-secondary");
-    secondaryEl.addEventListener("click", function () { startNewDebate(); });
-    actions.appendChild(secondaryEl);
-  }
-  controlEl.appendChild(actions);
-}
-
-function buildControls(state) {
-  slotEl.innerHTML = "";
-  controlEl = document.createElement("section");
-  controlEl.className = "home-debate-control-surface home-debate-control-" + state.mode;
-  controlEl.setAttribute("role", state.mode === "default" ? "toolbar" : "region");
-  controlEl.setAttribute("aria-label", state.mode === "terminal" ? "Debate status" : "Live debate controls");
-  slotEl.appendChild(controlEl);
-  if (state.mode === "default") buildDefault(state);
-  else if (state.mode === "user_floor" || state.mode === "conclude") buildInputMode(state);
-  else buildTerminal(state);
-  controlMode = state.mode;
-  controlStateKey = state.mode + ":" + state.phase + ":" + (state.header.reason || "");
-}
-
-function updateControls(state) {
-  if (state.mode !== "default") return;
-  var label = activityLabel(state);
-  if (activityEl && activityEl.textContent !== label) activityEl.textContent = label;
-  if (state.header.handRaised && handEl) {
-    handEl.textContent = "Hand raised";
-    handEl.disabled = true;
-    handEl.setAttribute("aria-pressed", "true");
+import { createDebateControls } from './debate-controls.js';
+export { homeDebateControlState } from './debate-controls.js';
+
+var controls = createDebateControls({
+  slotId: "home-debate-controls-slot",
+  composerId: "home-mate-chat-composer",
+  modelId: "home-mate-chat-session-model",
+  send: function (action, data, requestId) {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) return false;
+    ws.send(JSON.stringify({
+      type: "home_debate_control", action: action,
+      mateId: store.get('homeChatMateId'), sessionId: store.get('homeChatSessionId'),
+      requestId: requestId, text: data.text || "", response: data.response || null
+    }));
+    return true;
   }
-  if (stopEl) {
-    stopEl.disabled = false;
-    stopEl.textContent = state.header.stopping ? "Cancel stop" : "Stop debate";
-    stopEl.className = state.header.stopping ? "home-debate-control-secondary" : "home-debate-control-stop";
-  }
-}
+});
 
 export function renderHomeDebateControls(messages, requestId, onStartNewDebate) {
-  if (!ensureElements()) return false;
-  var state = homeDebateControlState(messages);
-  currentRequestId = requestId || null;
-  startNewDebate = onStartNewDebate || null;
-  if (!state) {
-    setSpecialMode(false);
-    clearControls();
-    return false;
-  }
-  currentState = state;
-  setSpecialMode(true);
-  var nextStateKey = state.mode + ":" + state.phase + ":" + (state.header.reason || "");
-  if (!controlEl || controlMode !== state.mode || controlStateKey !== nextStateKey) buildControls(state);
-  else updateControls(state);
-  return true;
+  return controls.render(messages, requestId, onStartNewDebate);
 }