clay-server 2.23.1 → 2.24.0-beta.1

package/lib/public/css/messages.css

@@ -1759,4 +1759,101 @@ pre.mermaid-error {
   }
 }
 
+/* ==========================================================================
+   Wide View Mode
+   ========================================================================== */
+
+body.wide-view {
+  --content-width: 100%;
+}
+
+body.wide-view .msg-user,
+body.wide-view .msg-assistant {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  padding: 4px 16px;
+  margin: 0;
+  border-radius: 0;
+}
+body.wide-view .msg-user:hover,
+body.wide-view .msg-assistant:hover {
+  background: var(--bg-alt);
+}
+
+body.wide-view .msg-user {
+  justify-content: flex-start;
+}
+body.wide-view .msg-user .dm-bubble-avatar-me {
+  order: -1;
+}
+body.wide-view .msg-user .bubble {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+  max-width: 100%;
+  font-size: 15px;
+  line-height: 1.46;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+body.wide-view .msg-user .msg-actions {
+  display: none;
+}
+
+body.wide-view .msg-assistant .md-content {
+  background: none;
+  border-radius: 0;
+  padding: 0;
+}
+
+body.wide-view .thinking-item,
+body.wide-view .tool-item,
+body.wide-view .tool-group {
+  max-width: 100%;
+}
+body.wide-view .turn-meta {
+  max-width: 100%;
+}
 
+/* Mobile: force bubble layout regardless of user setting */
+@media (max-width: 768px) {
+  body.wide-view { --content-width: var(--content-width, 720px); }
+  body.wide-view .msg-user,
+  body.wide-view .msg-assistant {
+    display: revert;
+    flex-direction: revert;
+    align-items: revert;
+    gap: revert;
+    max-width: revert;
+    padding: revert;
+    margin: revert;
+    border-radius: revert;
+  }
+  body.wide-view .msg-user:hover,
+  body.wide-view .msg-assistant:hover { background: revert; }
+  body.wide-view .msg-user { justify-content: revert; }
+  body.wide-view .msg-user .dm-bubble-avatar-me { order: revert; }
+  body.wide-view .msg-user .bubble {
+    background: revert;
+    border-radius: revert;
+    padding: revert;
+    max-width: revert;
+    font-size: revert;
+    line-height: revert;
+    white-space: revert;
+    word-wrap: revert;
+  }
+  body.wide-view .msg-user .msg-actions { display: revert; }
+  body.wide-view .msg-assistant .md-content {
+    background: revert;
+    border-radius: revert;
+    padding: revert;
+  }
+  body.wide-view .thinking-item,
+  body.wide-view .tool-item,
+  body.wide-view .tool-group { max-width: revert; }
+  body.wide-view .turn-meta { max-width: revert; }
+}

package/lib/public/css/overlays.css

@@ -140,8 +140,6 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
 }
 
 .pwa-modal-card {
@@ -398,8 +396,6 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   position: absolute;
   inset: 0;
   background: rgba(var(--shadow-rgb), 0.5);
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
 }
 
 .confirm-dialog {

package/lib/public/css/server-settings.css

@@ -233,6 +233,9 @@
   padding: 4px 0;
   margin-bottom: 16px;
 }
+.settings-card:has(.layout-switcher) {
+  padding: 14px 16px;
+}
 
 .settings-field {
   padding: 12px 16px;
@@ -853,3 +856,53 @@
   outline: none;
   cursor: pointer;
 }
+
+/* --- Layout switcher (Bubble / Channel) --- */
+.layout-switcher {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  padding: 4px 0;
+}
+.layout-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 22px 16px;
+  background: var(--bg);
+  border: 2px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, transform 0.1s;
+  color: var(--text);
+  font-family: inherit;
+  text-align: center;
+}
+.layout-option:hover {
+  border-color: var(--text-dimmer);
+  background: var(--bg-alt);
+}
+.layout-option:active {
+  transform: scale(0.97);
+}
+.layout-option.selected {
+  border-color: var(--accent);
+  background: var(--accent-8);
+}
+.layout-option-icon {
+  font-size: 28px;
+  line-height: 1;
+  margin-bottom: 2px;
+}
+.layout-option-label {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text);
+}
+.layout-option-desc {
+  font-size: 11.5px;
+  color: var(--text-muted);
+  line-height: 1.45;
+  margin-top: 2px;
+}

package/lib/public/css/session-search.css

@@ -26,7 +26,7 @@
   position: absolute;
   top: 0;
   right: 16px;
-  z-index: 50;
+  z-index: 60;
   animation: sessionSearchSlideDown 0.15s ease-out;
 }
 

package/lib/public/css/sidebar.css

@@ -1146,8 +1146,6 @@
   inset: 0;
   background: rgba(var(--shadow-rgb), 0.6);
   z-index: 99;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
 }
 
 #sidebar-overlay.visible { display: block; }
@@ -1350,3 +1348,29 @@
   }
 }
 
+/* --- Skeleton loading placeholders --- */
+.skeleton-session-group {
+  padding: 8px 12px;
+}
+.skeleton-session-label {
+  width: 48px;
+  height: 10px;
+  border-radius: 4px;
+  background: var(--text-muted, #888);
+  margin-bottom: 10px;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.skeleton-session-item {
+  width: 100%;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--text-muted, #888);
+  margin-bottom: 6px;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+  0% { opacity: 0.1; }
+  50% { opacity: 0.18; }
+  100% { opacity: 0.1; }
+}
+

package/lib/public/index.html

@@ -59,9 +59,16 @@
       <img class="icon-strip-logo" src="icon-banded-76.png" width="38" height="38" alt="Clay">
     </div>
     <div class="icon-strip-separator"></div>
-    <div class="icon-strip-projects" id="icon-strip-projects"></div>
+    <div class="icon-strip-projects" id="icon-strip-projects">
+      <div class="skeleton-icon-strip-item"></div>
+      <div class="skeleton-icon-strip-item"></div>
+    </div>
     <button class="icon-strip-add" id="icon-strip-add" title="Add project"><i data-lucide="plus"></i></button>
-    <div class="icon-strip-users hidden" id="icon-strip-users"></div>
+    <div class="icon-strip-users" id="icon-strip-users">
+      <div class="skeleton-icon-strip-user"></div>
+      <div class="skeleton-icon-strip-user"></div>
+      <div class="skeleton-icon-strip-user"></div>
+    </div>
     <div class="icon-strip-me" id="icon-strip-me"></div>
   </div>
 
@@ -179,7 +186,14 @@
           <div id="project-list"></div>
         </div>
         <div id="sidebar-panel-sessions" class="sidebar-panel">
-          <div id="session-list"></div>
+          <div id="session-list">
+            <div class="skeleton-session-group">
+              <div class="skeleton-session-label"></div>
+              <div class="skeleton-session-item"></div>
+              <div class="skeleton-session-item"></div>
+              <div class="skeleton-session-item"></div>
+            </div>
+          </div>
         </div>
         <div id="sidebar-panel-files" class="sidebar-panel hidden">
           <div id="file-tree"></div>
@@ -203,7 +217,7 @@
         <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>
         <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
         <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
-        <button id="mate-debate-btn"><i data-lucide="mic"></i> <span>Start Debate</span></button>
+        <button id="mate-debate-btn"><i data-lucide="mic"></i> <span>Debate</span></button>
       </div>
       <div id="mate-sidebar-conversations">
         <div class="mate-sidebar-sessions-header">
@@ -288,6 +302,7 @@
         <div id="ralph-sticky" class="hidden"></div>
         <div id="debate-sticky" class="hidden"></div>
         <div class="status">
+          <button id="debate-pdf-btn" class="hidden" title="Export debate as PDF"><i data-lucide="download"></i></button>
           <button id="find-in-session-btn" title="Search in session (Ctrl+F)"><i data-lucide="search"></i></button>
           <button id="sticky-notes-toggle-btn" title="Sticky notes"><i data-lucide="sticky-note"></i><span class="sticky-notes-count hidden"></span></button>
           <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
@@ -399,6 +414,7 @@
               <button id="attach-image-btn" type="button" aria-label="Attach image" title="Attach image"><i data-lucide="image"></i></button>
               <button id="stt-btn" type="button" aria-label="Voice input" title="Voice input"><i data-lucide="mic"></i></button>
               <button id="schedule-btn" type="button" aria-label="Schedule message" title="Schedule message"><i data-lucide="clock"></i></button>
+              <button id="ask-mate-btn" type="button" aria-label="Ask Mate"><span class="ask-mate-label">@ Ask Mate</span></button>
             </div>
             <div id="input-bottom-right">
               <div id="config-chip-wrap" class="hidden">
@@ -475,6 +491,7 @@
       <button class="file-viewer-btn hidden" id="file-viewer-render" title="Toggle rendered view"><i data-lucide="book-open"></i></button>
       <button class="file-viewer-btn hidden" id="file-viewer-pdf" title="Export PDF"><i data-lucide="file-down"></i></button>
       <button class="file-viewer-btn hidden" id="file-viewer-history" title="Edit history"><i data-lucide="clock"></i></button>
+      <button class="file-viewer-btn" id="file-viewer-refresh" title="Refresh"><i data-lucide="refresh-cw"></i></button>
       <button class="file-viewer-btn" id="file-viewer-copy" title="Copy contents"><i data-lucide="copy"></i></button>
       <button class="file-viewer-btn" id="file-viewer-fullscreen" title="Toggle fullscreen"><i data-lucide="maximize-2"></i></button>
       <button class="file-viewer-btn" id="file-viewer-close" title="Close"><i data-lucide="x"></i></button>
@@ -825,14 +842,34 @@
         <div class="us-section" data-section="us-appearance">
           <h2>Appearance</h2>
           <div class="settings-card">
-            <label class="settings-toggle-row">
-              <div>
-                <span class="settings-label">Light theme</span>
-                <div class="settings-hint">Use a light color scheme instead of dark.</div>
-              </div>
-              <input type="checkbox" id="us-theme-toggle">
-              <span class="toggle-track"><span class="toggle-thumb"></span></span>
-            </label>
+            <div class="settings-label" style="margin-bottom:10px;">Theme</div>
+            <div class="layout-switcher" id="us-theme-switcher">
+              <button class="layout-option" data-theme="light">
+                <span class="layout-option-icon">☀️</span>
+                <span class="layout-option-label">Light</span>
+                <span class="layout-option-desc">For people who open curtains. Bright, clean, productive.</span>
+              </button>
+              <button class="layout-option" data-theme="dark">
+                <span class="layout-option-icon">🌙</span>
+                <span class="layout-option-label">Dark</span>
+                <span class="layout-option-desc">For those who thrive after sunset. Your screen, your cave.</span>
+              </button>
+            </div>
+          </div>
+          <div class="settings-card">
+            <div class="settings-label" style="margin-bottom:10px;">Chat layout</div>
+            <div class="layout-switcher" id="us-layout-switcher">
+              <button class="layout-option" data-layout="bubble">
+                <span class="layout-option-icon">💬</span>
+                <span class="layout-option-label">Bubble</span>
+                <span class="layout-option-desc">Centered and quiet. Just you and the AI, no distractions.</span>
+              </button>
+              <button class="layout-option" data-layout="channel">
+                <span class="layout-option-icon">💻</span>
+                <span class="layout-option-label">Channel</span>
+                <span class="layout-option-desc">Full-width with faces. Feels like your team is right there.</span>
+              </button>
+            </div>
           </div>
         </div>
 
@@ -1244,7 +1281,10 @@
   <div class="confirm-dialog paste-modal-dialog">
     <div class="paste-modal-header">
       <span class="paste-modal-title">Pasted content</span>
-      <button class="paste-modal-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+      <div class="paste-modal-actions">
+        <button class="paste-modal-copy" title="Copy to clipboard"><i data-lucide="copy" style="width:15px;height:15px"></i></button>
+        <button class="paste-modal-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
+      </div>
     </div>
     <pre class="paste-modal-body" id="paste-modal-body"></pre>
   </div>

package/lib/public/modules/debate.js

@@ -1,5 +1,5 @@
 import { mateAvatarUrl } from './avatar.js';
-import { renderMarkdown, highlightCodeBlocks } from './markdown.js';
+import { renderMarkdown, highlightCodeBlocks, buildPrintHtml, getPrintCss } from './markdown.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
@@ -21,6 +21,19 @@ var turnDrainTimer = null;
 // --- Init ---
 export function initDebate(_ctx) {
   ctx = _ctx;
+
+  var pdfBtn = document.getElementById("debate-pdf-btn");
+  if (pdfBtn) {
+    pdfBtn.addEventListener("click", function () {
+      pdfBtn.disabled = true;
+      exportDebateAsPdf().then(function () {
+        pdfBtn.disabled = false;
+      }).catch(function (err) {
+        pdfBtn.disabled = false;
+        console.error("Debate PDF export failed:", err);
+      });
+    });
+  }
 }
 
 export function resetDebateState() {
@@ -31,6 +44,7 @@ export function resetDebateState() {
   flushTurnStream();
   currentTurnEl = null;
   currentTurnMateId = null;
+  showPdfBtn(false);
   // Remove preparing indicator if present
   if (ctx && ctx.messagesEl) {
     var prep = ctx.messagesEl.querySelector(".debate-preparing-indicator");
@@ -70,6 +84,14 @@ function showDebateInfoFloat(msg) {
   refreshIcons();
 }
 
+function showPdfBtn(visible) {
+  var btn = document.getElementById("debate-pdf-btn");
+  if (btn) {
+    if (visible) btn.classList.remove("hidden");
+    else btn.classList.add("hidden");
+  }
+}
+
 function hideDebateInfoFloat() {
   var floatEl = document.getElementById("debate-info-float");
   if (floatEl) {
@@ -88,6 +110,7 @@ export function handleDebateResumed(msg) {
 
   // Show float info panel again if we have it
   showDebateInfoFloat(msg);
+  showPdfBtn(true);
 }
 
 export function handleDebatePreparing(msg) {
@@ -134,6 +157,7 @@ export function handleDebateStarted(msg) {
 
   // Show float info panel
   showDebateInfoFloat(msg);
+  showPdfBtn(true);
 
   if (ctx.scrollToBottom) ctx.scrollToBottom();
 }
@@ -393,6 +417,20 @@ function renderEndedBanner(entry) {
   });
   resumeRow.appendChild(resumeBtn);
 
+  var pdfBtn = document.createElement("button");
+  pdfBtn.className = "debate-ended-resume-btn debate-ended-pdf-btn";
+  pdfBtn.innerHTML = iconHtml("download") + " PDF";
+  pdfBtn.addEventListener("click", function () {
+    pdfBtn.disabled = true;
+    exportDebateAsPdf().then(function () {
+      pdfBtn.disabled = false;
+    }).catch(function (err) {
+      pdfBtn.disabled = false;
+      console.error("Debate PDF export failed:", err);
+    });
+  });
+  resumeRow.appendChild(pdfBtn);
+
   endBanner.appendChild(resumeRow);
 
   // Enter in textarea = resume
@@ -407,6 +445,125 @@ function renderEndedBanner(entry) {
   refreshIcons();
 }
 
+function exportDebateAsPdf() {
+  var popup = window.open("", "_blank", "width=900,height=700");
+  if (!popup) {
+    return Promise.resolve();
+  }
+
+  popup.document.write("<!DOCTYPE html><html><head><title>Preparing PDF\u2026</title></head><body><p style=\"font-family:sans-serif;padding:32px;color:#555\">Preparing PDF, please wait\u2026</p></body></html>");
+  popup.document.close();
+
+  // Build debate content HTML from DOM
+  var contentParts = [];
+  var topic = debateTopic || "Debate";
+
+  // Title
+  contentParts.push("<h1>" + escapeHtml(topic) + "</h1>");
+
+  // Metadata from info float
+  var floatEl = document.getElementById("debate-info-float");
+  if (floatEl) {
+    var modEl = floatEl.querySelector(".debate-info-mod");
+    var chips = floatEl.querySelectorAll(".debate-info-chip");
+    var metaParts = [];
+    if (modEl) metaParts.push("<strong>Moderator:</strong> " + escapeHtml(modEl.textContent.trim()));
+    if (chips.length > 0) {
+      var panelNames = [];
+      for (var c = 0; c < chips.length; c++) {
+        panelNames.push(escapeHtml(chips[c].textContent.trim()));
+      }
+      metaParts.push("<strong>Panel:</strong> " + panelNames.join(", "));
+    }
+    if (metaParts.length > 0) {
+      contentParts.push('<p class="debate-pdf-meta">' + metaParts.join(" &nbsp;|&nbsp; ") + "</p>");
+    }
+  }
+
+  contentParts.push("<hr>");
+
+  // Collect turns and user comments from DOM
+  var els = ctx.messagesEl.querySelectorAll(".debate-turn, .debate-user-comment");
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    if (el.classList.contains("debate-turn")) {
+      var nameEl = el.querySelector(".debate-speaker-name");
+      var roleEl = el.querySelector(".debate-speaker-role");
+      var avatarEl = el.querySelector(".debate-speaker-avatar");
+      var contentEl = el.querySelector(".debate-turn-content");
+      var speaker = nameEl ? nameEl.textContent.trim() : "Speaker";
+      var role = roleEl ? roleEl.textContent.trim() : "";
+      var avatarHtml = "";
+      if (avatarEl && avatarEl.src) {
+        avatarHtml = '<img class="debate-pdf-avatar" src="' + avatarEl.src + '" width="22" height="22" /> ';
+      }
+      var heading = avatarHtml + escapeHtml(speaker);
+      if (role) heading += ' <span class="debate-pdf-role">(' + escapeHtml(role) + ')</span>';
+      contentParts.push('<h2 class="debate-pdf-speaker">' + heading + "</h2>");
+      if (contentEl) {
+        var clone = contentEl.cloneNode(true);
+        // Remove copy buttons from code blocks
+        var copyBtns = clone.querySelectorAll(".code-copy-btn");
+        for (var k = 0; k < copyBtns.length; k++) copyBtns[k].remove();
+        contentParts.push(clone.innerHTML);
+      }
+    } else if (el.classList.contains("debate-user-comment")) {
+      var textEl = el.querySelector(".debate-comment-text");
+      var commentText = textEl ? escapeHtml(textEl.textContent.trim()) : "";
+      if (commentText) {
+        contentParts.push('<blockquote><strong>You:</strong> ' + commentText + '</blockquote>');
+      }
+    }
+  }
+
+  var contentHtml = contentParts.join("\n");
+  var baseCss = getPrintCss();
+  var debateCss = [
+    ".debate-pdf-meta { color: #6b6860; font-size: 10pt; margin: 4pt 0 8pt; }",
+    ".debate-pdf-speaker { display: flex; align-items: center; gap: 6pt; }",
+    ".debate-pdf-avatar { width: 22pt; height: 22pt; border-radius: 50%; flex-shrink: 0; }",
+    ".debate-pdf-role { color: #6b6860; font-weight: 400; font-size: 11pt; }",
+  ].join("\n");
+
+  var fullHtml = "<!DOCTYPE html>\n" +
+    "<html lang=\"ko\"><head>\n" +
+    "<meta charset=\"UTF-8\">\n" +
+    "<title>" + escapeHtml(topic) + "</title>\n" +
+    "<link rel=\"preconnect\" href=\"https://cdn.jsdelivr.net\">\n" +
+    "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css\">\n" +
+    "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n" +
+    "<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n" +
+    "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;1,400&display=swap\">\n" +
+    "<style>\n" + baseCss + "\n" + debateCss + "\n</style>\n" +
+    "</head><body>\n" +
+    "<div class=\"file-viewer-markdown\">" + contentHtml + "</div>\n" +
+    "</body></html>";
+
+  return new Promise(function (resolve, reject) {
+    try {
+      popup.document.open();
+      popup.document.write(fullHtml);
+      popup.document.close();
+
+      popup.onload = function () {
+        popup.document.fonts.ready.then(function () {
+          popup.focus();
+          popup.print();
+          if (typeof popup.onafterprint !== "undefined") {
+            popup.onafterprint = function () { popup.close(); };
+          } else {
+            setTimeout(function () { popup.close(); }, 1000);
+          }
+          resolve();
+        });
+      };
+    } catch (err) {
+      popup.close();
+      reject(err);
+    }
+  });
+}
+
 export function handleDebateError(msg) {
   if (ctx.messagesEl && debateActive) {
     var errEl = document.createElement("div");

package/lib/public/modules/filebrowser.js

@@ -91,6 +91,17 @@ export function initFileBrowser(_ctx) {
     }
   });
 
+  // File viewer refresh button
+  var viewerRefreshBtn = document.getElementById("file-viewer-refresh");
+  if (viewerRefreshBtn) {
+    viewerRefreshBtn.addEventListener("click", function () {
+      if (!currentFilePath) return;
+      viewerRefreshBtn.classList.add("spinning");
+      setTimeout(function () { viewerRefreshBtn.classList.remove("spinning"); }, 500);
+      requestFileContent(currentFilePath);
+    });
+  }
+
   // Refresh button
   var refreshBtn = document.getElementById("file-panel-refresh");
   if (refreshBtn) {

package/lib/public/modules/input.js

@@ -1,6 +1,6 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { setRewindMode, isRewindMode } from './rewind.js';
-import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, sendMention, renderMentionUser, removeMentionChip } from './mention.js';
+import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, stickyReapplyMention, sendMention, renderMentionUser, removeMentionChip } from './mention.js';
 
 var ctx;
 
@@ -151,8 +151,8 @@ export function sendMessage() {
     // Render user message with mention chip (same as history replay)
     renderMentionUser({ mateName: mention.mateName, text: mentionText, images: mentionImages.length > 0 ? mentionImages : null, pastes: mentionPastes.length > 0 ? mentionPastes : null });
     sendMention(mention.mateId, mentionText, mentionPastes, mentionImages);
-    clearMentionState();
     ctx.inputEl.value = "";
+    stickyReapplyMention();
     sendInputSync();
     clearPendingImages();
     autoResize();
@@ -726,6 +726,24 @@ export function initInput(_ctx) {
     });
   }
 
+  // Ask Mate button — insert @ to trigger mention menu
+  var askMateBtn = document.getElementById("ask-mate-btn");
+  if (askMateBtn) {
+    askMateBtn.addEventListener("click", function () {
+      var inputEl = document.getElementById("input");
+      if (!inputEl) return;
+      inputEl.focus();
+      // Insert @ at cursor position
+      var start = inputEl.selectionStart || 0;
+      var end = inputEl.selectionEnd || 0;
+      var val = inputEl.value;
+      inputEl.value = val.substring(0, start) + "@" + val.substring(end);
+      inputEl.selectionStart = inputEl.selectionEnd = start + 1;
+      // Trigger the mention detection
+      inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+  }
+
   // Paste handler
   document.addEventListener("paste", function (e) {
     // Don't intercept paste when typing in modals or other non-chat inputs

package/lib/public/modules/markdown.js

@@ -293,7 +293,7 @@ export function exportMarkdownAsPdf(markdownEl, filename) {
   });
 }
 
-function buildPrintHtml(title, contentHtml) {
+export function buildPrintHtml(title, contentHtml) {
   return "<!DOCTYPE html>\n" +
     "<html lang=\"ko\"><head>\n" +
     "<meta charset=\"UTF-8\">\n" +
@@ -309,7 +309,7 @@ function buildPrintHtml(title, contentHtml) {
     "</body></html>";
 }
 
-function getPrintCss() {
+export function getPrintCss() {
   return [
     /* MS Word defaults: 2.54cm (1in) margins, 11pt, 115% line-height, 8pt after para */
     "@page { margin: 2.54cm; }",