clay-server 2.39.0-beta.4 → 2.39.0

package/lib/daemon.js

@@ -728,6 +728,19 @@ var relay = createServer({
     console.log("[daemon] Chat layout:", val, "(web)");
     return { ok: true, chatLayout: val };
   },
+  onSetTerminalFont: function (family, size) {
+    var DEFAULT_FAMILY = "'SF Mono', Menlo, Monaco, 'Courier New', monospace";
+    var current = config.terminalFont || { family: DEFAULT_FAMILY, size: 13 };
+    var nextFamily = (typeof family === "string" && family.trim()) ? family.trim().slice(0, 200) : current.family;
+    var nextSize = current.size;
+    if (typeof size === "number" && size >= 9 && size <= 32) {
+      nextSize = Math.round(size);
+    }
+    config.terminalFont = { family: nextFamily, size: nextSize };
+    saveConfig(config);
+    console.log("[daemon] Terminal font:", nextFamily, nextSize);
+    return config.terminalFont;
+  },
   onSetMateOnboarded: function () {
     config.mateOnboardingShown = true;
     saveConfig(config);

package/lib/public/css/sidebar.css

@@ -1119,35 +1119,6 @@
   margin-left: 12px;
 }
 
-/* TUI session indicator: a tiny black "screen" with a bold green prompt
-   glyph, meant to read as a miniature terminal (CRT-style cursor) at
-   sidebar scale. Aligned to the middle of the text x-height so it sits
-   visually centered with the session title rather than dropping below. */
-.session-tui-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  background: #000;
-  margin-right: 6px;
-  vertical-align: middle;
-  flex-shrink: 0;
-  /* Nudge upward a hair so the icon optical-centers with lowercase glyphs
-     (lucide icons render slightly below the geometric center). */
-  position: relative;
-  top: -1px;
-}
-.session-tui-icon svg,
-.session-tui-icon .lucide {
-  width: 10px;
-  height: 10px;
-  color: #50fa7b;
-  stroke: #50fa7b;
-  stroke-width: 3;
-}
-
 .session-top-action:hover {
   background: var(--sidebar-hover);
   color: var(--text);

package/lib/public/css/tui-attention.css

@@ -1,3 +1,13 @@
+/* Subtle 1px divider against the sidebar so the embedded terminal
+   doesn't visually bleed into the session list. The host is
+   position:fixed and anchored to #messages' bounding rect, so its
+   left edge sits exactly on the sidebar boundary. Color matches
+   #main-area's existing border-left so the line reads as one
+   continuous edge with the rest of the chrome. */
+#tui-session-host {
+  border-left: 1px solid var(--border-subtle);
+}
+
 /* Policy notice that sits above the embedded xterm in fullscreen TUI
    sessions, explaining why this mode exists (post-2026-06-15 Agent SDK
    billing split). Thin so it doesn't eat terminal real estate. */

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

@@ -859,3 +859,46 @@
     align-items: stretch;
   }
 }
+
+/* Terminal font picker row */
+.us-term-font-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.us-term-font-family {
+  flex: 1 1 auto;
+  min-width: 180px;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  color: var(--text);
+  font-size: 13px;
+}
+.us-term-font-custom {
+  flex: 1 1 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  color: var(--text);
+  font-size: 13px;
+  font-family: "Roboto Mono", monospace;
+}
+.us-term-font-custom.hidden { display: none; }
+.us-term-font-size {
+  width: 64px;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  color: var(--text);
+  font-size: 13px;
+  text-align: center;
+}
+.us-term-font-unit {
+  font-size: 13px;
+  color: var(--text-dimmer);
+}

package/lib/public/index.html

@@ -879,7 +879,7 @@
       </div>
     </div>
     <div class="user-island-actions">
-      <button id="user-theme-toggle-btn" title="Switch theme" aria-label="Switch theme"><i data-lucide="moon"></i></button>
+      <button id="user-theme-toggle-btn" title="Themes" aria-label="Themes"><i data-lucide="palette"></i></button>
       <button id="user-settings-btn" title="User settings"><i data-lucide="settings"></i></button>
     </div>
   </div>
@@ -1002,18 +1002,22 @@
         <div class="us-section" data-section="us-appearance">
           <h2>Appearance</h2>
           <div class="settings-card">
-            <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 class="settings-label" style="margin-bottom:10px;">Terminal font</div>
+            <div class="us-term-font-row">
+              <select id="us-term-font-family" class="us-term-font-family">
+                <option value="'SF Mono', Menlo, Monaco, 'Courier New', monospace">SF Mono / Menlo (default)</option>
+                <option value="'JetBrains Mono', 'SF Mono', Menlo, monospace">JetBrains Mono</option>
+                <option value="'Fira Code', 'SF Mono', Menlo, monospace">Fira Code</option>
+                <option value="'Cascadia Code', 'SF Mono', Menlo, monospace">Cascadia Code</option>
+                <option value="'IBM Plex Mono', 'SF Mono', Menlo, monospace">IBM Plex Mono</option>
+                <option value="'Source Code Pro', 'SF Mono', Menlo, monospace">Source Code Pro</option>
+                <option value="'Roboto Mono', 'SF Mono', Menlo, monospace">Roboto Mono</option>
+                <option value="ui-monospace, monospace">System monospace</option>
+                <option value="__custom__">Custom...</option>
+              </select>
+              <input type="text" id="us-term-font-family-custom" class="us-term-font-custom hidden" placeholder="e.g. 'My Font', monospace" maxlength="200">
+              <input type="number" id="us-term-font-size" class="us-term-font-size" min="9" max="32" step="1">
+              <span class="us-term-font-unit">px</span>
             </div>
           </div>
           <div class="settings-card">

package/lib/public/modules/session-tui-view.js

@@ -16,6 +16,8 @@
 
 import { getWs } from './ws-ref.js';
 import { store } from './store.js';
+import { getTerminalTheme } from './theme.js';
+import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { openArticle as openWhatsNewArticle } from './whats-new-article.js';
 
 // Stable id of the canonical "Why TUI mode?" article in
@@ -23,33 +25,9 @@ import { openArticle as openWhatsNewArticle } from './whats-new-article.js';
 // opens that article in the blog viewer instead of a one-off modal.
 var TUI_POLICY_ARTICLE_ID = "2026-06-tui-default";
 
-// Claude TUI sessions intentionally ignore Clay's dark/light theme and
-// always render with a classic black terminal look. The bottom-panel
-// shell terminal still follows the theme; this is specific to the TUI
-// session view so `claude` renders consistently across themes.
-var TUI_TERMINAL_THEME = {
-  background: "#000000",
-  foreground: "#e5e5e5",
-  cursor: "#e5e5e5",
-  cursorAccent: "#000000",
-  selectionBackground: "#3a3a3a",
-  black: "#000000",
-  red: "#cd3131",
-  green: "#0dbc79",
-  yellow: "#e5e510",
-  blue: "#2472c8",
-  magenta: "#bc3fbc",
-  cyan: "#11a8cd",
-  white: "#e5e5e5",
-  brightBlack: "#666666",
-  brightRed: "#f14c4c",
-  brightGreen: "#23d18b",
-  brightYellow: "#f5f543",
-  brightBlue: "#3b8eea",
-  brightMagenta: "#d670d6",
-  brightCyan: "#29b8db",
-  brightWhite: "#ffffff",
-};
+// Claude TUI session terminal colors follow Clay's active theme via
+// getTerminalTheme(). Live theme switches are wired through
+// setTuiSessionTheme() below, which theme.js calls from applyTheme.
 
 var hostEl = null;       // container div mounted over #messages
 var xtermContainerEl = null;
@@ -165,25 +143,73 @@ function ensureHostEl() {
   xtermContainerEl.style.position = "relative";
   hostEl.appendChild(xtermContainerEl);
 
-  // Paste-image handling. xterm.js natively pastes text but ignores
-  // image/file clipboard payloads, so an image copied in Finder/Preview
-  // would silently drop on Cmd+V. We intercept in the capture phase
-  // (before xterm's hidden textarea handles the event), upload the
-  // image to /api/upload, and inject the returned absolute path into
-  // the PTY. Claude CLI accepts file paths as prompt input - the user
-  // can then submit with Enter.
+  // Paste-image handling. Two paths cover the common platforms:
   //
-  // Capture phase + stopImmediatePropagation on image hits is what
-  // keeps xterm from ALSO pasting the file's text representation
-  // (Finder copies leave a "filename.png" string in text/plain).
-  // Text-only paste falls through so xterm's built-in text paste keeps
-  // working unchanged.
+  //   1. `paste` event in capture phase - covers Cmd+V on macOS and
+  //      Ctrl+V on Win/Linux, where the browser fires a paste event
+  //      with clipboardData populated.
+  //   2. `keydown` for Ctrl+V (no Meta) in capture phase - macOS does
+  //      not fire `paste` for Ctrl+V (Ctrl isn't the OS paste modifier
+  //      there), so the keystroke would otherwise reach claude CLI
+  //      directly. We read the system clipboard via the async
+  //      Clipboard API instead.
+  //
+  // In both paths an image hit is uploaded to /api/upload (same
+  // endpoint the GUI input uses) and the returned absolute path is
+  // injected as text into the PTY; claude CLI accepts file paths as
+  // prompt input. Capture phase + stopImmediatePropagation keep xterm
+  // from also processing the event (which would paste the filename
+  // text alongside the path).
   hostEl.addEventListener("paste", handleTuiPaste, true);
+  hostEl.addEventListener("keydown", handleTuiCtrlV, true);
 
   document.body.appendChild(hostEl);
   return hostEl;
 }
 
+function handleTuiCtrlV(e) {
+  // Only handle plain Ctrl+V (no Meta/Alt/Shift). Cmd+V on macOS is
+  // covered by the paste event handler. Without this intercept on macOS
+  // a Ctrl+V keystroke would just be forwarded to claude CLI's own
+  // paste path, which can't read image data out of the system
+  // clipboard reliably ("no image found in clipboard").
+  if (e.key !== "v" || !e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+  if (currentTermId == null) return;
+  if (!navigator.clipboard || typeof navigator.clipboard.read !== "function") return;
+
+  // Stop the keystroke from also reaching xterm / the PTY. We take full
+  // ownership of paste semantics: image -> upload + inject path, text
+  // -> forward via term_input, nothing -> no-op.
+  e.preventDefault();
+  e.stopImmediatePropagation();
+
+  navigator.clipboard.read().then(function (items) {
+    for (var i = 0; i < items.length; i++) {
+      var imgType = null;
+      for (var t = 0; t < items[i].types.length; t++) {
+        if (items[i].types[t].indexOf("image/") === 0) { imgType = items[i].types[t]; break; }
+      }
+      if (imgType) {
+        items[i].getType(imgType).then(uploadAndInjectPath).catch(function () {});
+        return; // handle the first image found
+      }
+    }
+    // No image - fall back to text paste behavior.
+    if (typeof navigator.clipboard.readText === "function") {
+      navigator.clipboard.readText().then(function (text) {
+        if (!text || currentTermId == null) return;
+        var ws = getWs();
+        if (!ws || ws.readyState !== 1) return;
+        ws.send(JSON.stringify({ type: "term_input", id: currentTermId, data: text }));
+      }).catch(function () {});
+    }
+  }).catch(function () {
+    // Permission denied or unsupported - silently fail. xterm received
+    // no keystroke either because we already stopped propagation, so
+    // the user can press the key again to retry.
+  });
+}
+
 function handleTuiPaste(e) {
   var cd = e.clipboardData;
   if (!cd || currentTermId == null) return;
@@ -293,14 +319,14 @@ function fitNow() {
 
 function createXterm() {
   if (typeof Terminal === "undefined") return null;
-  var theme = TUI_TERMINAL_THEME;
+  var theme = getTerminalTheme();
   // Match the host background to the xterm theme so any sub-cell gap
   // between the last rendered row and the host's bottom blends in.
   if (hostEl) hostEl.style.background = theme.background;
   var term = new Terminal({
     cursorBlink: true,
-    fontSize: 13,
-    fontFamily: "'SF Mono', Menlo, Monaco, 'Courier New', monospace",
+    fontSize: getTerminalFontSize(),
+    fontFamily: getTerminalFontFamily(),
     theme: theme,
     scrollback: 5000,
   });
@@ -450,3 +476,28 @@ export function tuiHandleTermClosed(msg) {
 export function getActiveTuiTerminalId() {
   return currentTermId;
 }
+
+// Live theme update. Called by theme.js applyTheme() whenever the user
+// switches themes - rewrites xterm colors in place and re-syncs the
+// host background so transitions are seamless without re-mounting the
+// PTY.
+export function setTuiSessionTheme(xtermTheme) {
+  if (xterm) {
+    try { xterm.options.theme = xtermTheme; } catch (e) {}
+  }
+  if (hostEl && xtermTheme && xtermTheme.background) {
+    hostEl.style.background = xtermTheme.background;
+  }
+}
+
+// Live font update. Cell metrics shift with font size, so we refit
+// after applying and let the existing resize debounce notify the PTY
+// of the new cols/rows.
+onTerminalFontChange(function (family, size) {
+  if (!xterm) return;
+  try {
+    if (family) xterm.options.fontFamily = family;
+    if (size) xterm.options.fontSize = size;
+  } catch (e) {}
+  scheduleResize();
+});

package/lib/public/modules/sidebar-sessions.js

@@ -1099,9 +1099,6 @@ function renderSessionItem(s) {
   if (store.get('isMultiUserMode') && s.sessionVisibility === "private") {
     textHtml += '<span class="session-private-icon" title="Private session">' + iconHtml("lock") + '</span>';
   }
-  if (s.mode === "tui") {
-    textHtml += '<span class="session-tui-icon" title="Claude Code terminal session">' + iconHtml("terminal") + '</span>';
-  }
   textHtml += highlightMatch(s.title || "New Session", searchQuery);
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);

package/lib/public/modules/terminal-prefs.js

@@ -0,0 +1,53 @@
+// terminal-prefs.js
+//
+// Single source of truth for terminal font preferences (family + size).
+// Every xterm in Clay (bottom shell panel, Claude TUI session view, TUI
+// attention modal) reads from here on create and re-applies on the
+// `font-change` event so live updates are seamless.
+//
+// Persistence lives server-side under the user's profile. This module
+// keeps a synchronized in-memory copy that the rest of the client reads
+// without round-trips.
+
+var DEFAULT_FAMILY = "'SF Mono', Menlo, Monaco, 'Courier New', monospace";
+var DEFAULT_SIZE = 13;
+
+var currentFamily = DEFAULT_FAMILY;
+var currentSize = DEFAULT_SIZE;
+var listeners = [];
+
+export function getTerminalFontFamily() {
+  return currentFamily || DEFAULT_FAMILY;
+}
+
+export function getTerminalFontSize() {
+  var n = Number(currentSize);
+  return (n >= 9 && n <= 32) ? n : DEFAULT_SIZE;
+}
+
+export function getDefaultTerminalFontFamily() {
+  return DEFAULT_FAMILY;
+}
+
+// Set the in-memory values and notify subscribers. Pass null/undefined
+// for any field that should stay unchanged. Persisting to the server
+// is the caller's responsibility - this only updates local UI.
+export function applyTerminalFont(family, size) {
+  var changed = false;
+  if (typeof family === "string" && family.trim() && family !== currentFamily) {
+    currentFamily = family;
+    changed = true;
+  }
+  if (typeof size === "number" && size >= 9 && size <= 32 && size !== currentSize) {
+    currentSize = Math.round(size);
+    changed = true;
+  }
+  if (!changed) return;
+  for (var i = 0; i < listeners.length; i++) {
+    try { listeners[i](currentFamily, currentSize); } catch (e) {}
+  }
+}
+
+export function onTerminalFontChange(fn) {
+  if (typeof fn === "function") listeners.push(fn);
+}

package/lib/public/modules/terminal.js

@@ -3,6 +3,7 @@ import { closeSidebar } from './sidebar.js';
 import { closeFileViewer } from './filebrowser.js';
 import { copyToClipboard } from './utils.js';
 import { getTerminalTheme } from './theme.js';
+import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 
 var ctx;
 var tabs = new Map(); // termId -> { id, title, exited, xterm, fitAddon, bodyEl }
@@ -347,8 +348,8 @@ function createXtermForTab(tab) {
 
   var xterm = new Terminal({
     cursorBlink: true,
-    fontSize: 13,
-    fontFamily: "'SF Mono', Menlo, Monaco, 'Courier New', monospace",
+    fontSize: getTerminalFontSize(),
+    fontFamily: getTerminalFontFamily(),
     theme: getTerminalTheme(),
   });
 
@@ -807,6 +808,21 @@ export function setTerminalTheme(xtermTheme) {
   }
 }
 
+// Live font update: applies family/size to every open shell terminal
+// and refits each (cell dimensions change with font size, so cols/rows
+// shift too). Hooked via onTerminalFontChange below.
+function applyFontToAllTabs(family, size) {
+  for (var tab of tabs.values()) {
+    if (!tab.xterm) continue;
+    try {
+      if (family) tab.xterm.options.fontFamily = family;
+      if (size) tab.xterm.options.fontSize = size;
+      if (tab.fitAddon) tab.fitAddon.fit();
+    } catch (e) {}
+  }
+}
+onTerminalFontChange(applyFontToAllTabs);
+
 // --- Terminal context menu ---
 function closeTermCtxMenu() {
   if (termCtxMenu) {

package/lib/public/modules/theme.js

@@ -1,5 +1,7 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { setTerminalTheme } from './terminal.js';
+import { setTuiSessionTheme } from './session-tui-view.js';
+import { setTuiAttentionTheme } from './tui-attention.js';
 import { updateMermaidTheme } from './markdown.js';
 
 // --- Color utilities ---
@@ -352,6 +354,8 @@ export function applyTheme(themeId, fromPicker) {
 
   var termTheme = computeTerminalTheme(theme);
   try { setTerminalTheme(termTheme); } catch (e) {}
+  try { setTuiSessionTheme(termTheme); } catch (e) {}
+  try { setTuiAttentionTheme(termTheme); } catch (e) {}
 
   var mermaidVars = computeMermaidVars(theme);
   try { updateMermaidTheme(mermaidVars); } catch (e) {}
@@ -538,15 +542,8 @@ function updateToggleIcon() {
   // User settings toggle
   var usToggle = document.getElementById("us-theme-toggle");
   if (usToggle) usToggle.checked = isLight;
-  // User island toggle
-  var islandToggle = document.getElementById("user-theme-toggle-btn");
-  if (islandToggle) {
-    islandToggle.classList.remove("theme-toggle-light", "theme-toggle-dark");
-    islandToggle.classList.add(isLight ? "theme-toggle-light" : "theme-toggle-dark");
-    islandToggle.innerHTML = iconHtml(isLight ? "moon" : "sun");
-    islandToggle.title = isLight ? "Switch to dark mode" : "Switch to light mode";
-    islandToggle.setAttribute("aria-label", islandToggle.title);
-  }
+  // User island button is now a static "skins / themes" trigger; no
+  // icon swap on mode change.
   refreshIcons();
 }
 
@@ -749,24 +746,96 @@ export function initTheme() {
   var islandToggle = document.getElementById("user-theme-toggle-btn");
   if (islandToggle && !islandToggle._clayThemeBound) {
     islandToggle._clayThemeBound = true;
-    islandToggle.addEventListener("click", function () {
-      toggleDarkMode();
+    // Lock down static skin icon (independent of mode) and open the
+    // theme picker popover anchored to the button.
+    islandToggle.innerHTML = iconHtml("palette");
+    islandToggle.title = "Themes";
+    islandToggle.setAttribute("aria-label", "Themes");
+    refreshIcons();
+    islandToggle.addEventListener("click", function (e) {
+      e.stopPropagation();
+      toggleIslandThemePicker(islandToggle);
     });
   }
 }
 
-// --- Settings picker (for appearance section in server settings) ---
-export function openSettingsThemePicker(containerEl) {
-  if (!containerEl) return;
+// --- Floating popover anchored to the user island button ---
+//
+// Mounts the picker (built by createThemePicker) into document.body as a
+// fixed-position overlay aligned under the anchor's right edge. Click
+// outside or Escape closes it. The picker DOM is shared with any other
+// embed point (settings page); we just reparent and reposition.
+
+var islandPickerOpen = false;
+var islandPickerOutsideHandler = null;
+var islandPickerKeyHandler = null;
+
+function positionPickerNearAnchor(anchorEl) {
+  if (!pickerEl || !anchorEl) return;
+  var rect = anchorEl.getBoundingClientRect();
+  var picker = pickerEl;
+  // Render hidden first to measure
+  picker.style.left = "0px";
+  picker.style.top = "0px";
+  var pw = picker.offsetWidth || 240;
+  var ph = picker.offsetHeight || 280;
+  var vw = window.innerWidth;
+  var vh = window.innerHeight;
+  // Right-align to anchor, drop below by 8px. Flip upward if not enough
+  // room below. Clamp into viewport on both axes.
+  var left = rect.right - pw;
+  if (left < 8) left = 8;
+  if (left + pw > vw - 8) left = vw - pw - 8;
+  var top = rect.bottom + 8;
+  if (top + ph > vh - 8) {
+    var flipped = rect.top - ph - 8;
+    if (flipped >= 8) top = flipped;
+    else top = Math.max(8, vh - ph - 8);
+  }
+  picker.style.left = left + "px";
+  picker.style.top = top + "px";
+}
 
-  if (!pickerEl) {
-    createThemePicker();
+function closeIslandThemePicker() {
+  if (!islandPickerOpen) return;
+  islandPickerOpen = false;
+  if (pickerEl) pickerEl.classList.remove("visible");
+  if (islandPickerOutsideHandler) {
+    document.removeEventListener("mousedown", islandPickerOutsideHandler, true);
+    islandPickerOutsideHandler = null;
+  }
+  if (islandPickerKeyHandler) {
+    document.removeEventListener("keydown", islandPickerKeyHandler, true);
+    islandPickerKeyHandler = null;
   }
+}
 
-  // Move picker into settings container if not already there
-  if (pickerEl.parentNode !== containerEl) {
-    containerEl.innerHTML = "";
-    containerEl.appendChild(pickerEl);
+export function toggleIslandThemePicker(anchorEl) {
+  if (islandPickerOpen) {
+    closeIslandThemePicker();
+    return;
+  }
+  if (!pickerEl) createThemePicker();
+  if (pickerEl.parentNode !== document.body) {
+    document.body.appendChild(pickerEl);
   }
+  positionPickerNearAnchor(anchorEl);
   pickerEl.classList.add("visible");
+  islandPickerOpen = true;
+
+  // Click anywhere outside picker (and not the anchor) closes it. Use
+  // capture phase + mousedown so the click that opened the picker
+  // doesn't immediately close it.
+  islandPickerOutsideHandler = function (ev) {
+    if (!pickerEl) return;
+    if (pickerEl.contains(ev.target)) return;
+    if (anchorEl && anchorEl.contains(ev.target)) return;
+    closeIslandThemePicker();
+  };
+  document.addEventListener("mousedown", islandPickerOutsideHandler, true);
+
+  islandPickerKeyHandler = function (ev) {
+    if (ev.key === "Escape") closeIslandThemePicker();
+  };
+  document.addEventListener("keydown", islandPickerKeyHandler, true);
 }

package/lib/public/modules/tui-attention.js

@@ -13,13 +13,12 @@
 // term_attach / term_input / term_output through that connection only.
 // The main WS is untouched.
 
-var TUI_TERMINAL_THEME = {
-  background: "#000000",
-  foreground: "#e5e5e5",
-  cursor: "#e5e5e5",
-  cursorAccent: "#000000",
-  selectionBackground: "#3a3a3a",
-};
+import { getTerminalTheme } from './theme.js';
+import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
+
+// TUI attention modal xterm follows Clay's active theme via
+// getTerminalTheme() and live-updates through setTuiAttentionTheme()
+// which theme.js calls from applyTheme.
 
 var modalEl = null;
 var modalXterm = null;
@@ -152,9 +151,9 @@ export function openTuiModal(terminalId, sourceSlug, info) {
   bodyEl.innerHTML = "";
   modalXterm = new Terminal({
     cursorBlink: true,
-    fontSize: 13,
-    fontFamily: "'SF Mono', Menlo, Monaco, 'Courier New', monospace",
-    theme: TUI_TERMINAL_THEME,
+    fontSize: getTerminalFontSize(),
+    fontFamily: getTerminalFontFamily(),
+    theme: getTerminalTheme(),
     scrollback: 5000,
   });
   if (typeof FitAddon !== "undefined") {
@@ -260,3 +259,29 @@ export function tuiModalHandleTermOutput() { return false; }
 export function tuiModalHandleTermResized() { return false; }
 export function tuiModalHandleTermExited() { return false; }
 export function tuiModalHandleTermClosed() { return false; }
+
+// Live theme update for the attention modal. Called by theme.js when
+// the user switches themes. Also retints the surrounding modal chrome
+// so the frame doesn't stay black when a light theme is active.
+export function setTuiAttentionTheme(xtermTheme) {
+  if (modalXterm) {
+    try { modalXterm.options.theme = xtermTheme; } catch (e) {}
+  }
+  if (modalEl && xtermTheme && xtermTheme.background) {
+    var bodyEl = modalEl.querySelector(".tui-modal-body");
+    if (bodyEl) bodyEl.style.background = xtermTheme.background;
+    var frameEl = modalEl.querySelector(".tui-modal");
+    if (frameEl) frameEl.style.background = xtermTheme.background;
+  }
+}
+
+// Live font update for the attention modal. Refit after applying so
+// cell metrics + PTY cols/rows stay in sync.
+onTerminalFontChange(function (family, size) {
+  if (!modalXterm) return;
+  try {
+    if (family) modalXterm.options.fontFamily = family;
+    if (size) modalXterm.options.fontSize = size;
+  } catch (e) {}
+  scheduleModalResize();
+});

package/lib/public/modules/user-settings.js

@@ -3,7 +3,8 @@
 
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
-import { toggleDarkMode, getCurrentTheme, getChatLayout, setChatLayout } from './theme.js';
+import { getChatLayout, setChatLayout } from './theme.js';
+import { applyTerminalFont, getTerminalFontFamily, getTerminalFontSize } from './terminal-prefs.js';
 import { showEmailSetupModal, getEmailAccountListCache } from './context-sources.js';
 import { setSTTLang } from './stt.js';
 import { userAvatarUrl } from './avatar.js';
@@ -230,21 +231,49 @@ export function initUserSettings(appCtx) {
     });
   }
 
-  // Theme switcher (Light / Dark)
-  var themeSwitcher = document.getElementById('us-theme-switcher');
-  if (themeSwitcher) {
-    var themeBtns = themeSwitcher.querySelectorAll('.layout-option');
-    for (var ti = 0; ti < themeBtns.length; ti++) {
-      themeBtns[ti].addEventListener('click', function () {
-        var mode = this.dataset.theme;
-        var current = getCurrentTheme();
-        var currentMode = (current && current.variant) || 'dark';
-        if (mode !== currentMode) toggleDarkMode();
-        for (var tj = 0; tj < themeBtns.length; tj++) {
-          themeBtns[tj].classList.toggle('selected', themeBtns[tj].dataset.theme === mode);
-        }
-      });
-    }
+  // Theme picker lives on the user island button now (palette icon).
+  // No appearance-section mount required.
+
+  // Terminal font: family select + optional custom input + size number.
+  // Saves to server on change and immediately applies to every open
+  // xterm via applyTerminalFont (terminal-prefs.js fanout).
+  var tfSelect = document.getElementById('us-term-font-family');
+  var tfCustom = document.getElementById('us-term-font-family-custom');
+  var tfSize = document.getElementById('us-term-font-size');
+
+  function persistTermFont(family, size) {
+    fetch('/api/user/terminal-font', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ family: family, size: size }),
+    }).catch(function () {});
+  }
+
+  if (tfSelect && tfCustom && tfSize) {
+    tfSelect.addEventListener('change', function () {
+      if (tfSelect.value === '__custom__') {
+        tfCustom.classList.remove('hidden');
+        tfCustom.focus();
+        return;
+      }
+      tfCustom.classList.add('hidden');
+      applyTerminalFont(tfSelect.value, undefined);
+      persistTermFont(tfSelect.value, undefined);
+    });
+    tfCustom.addEventListener('change', function () {
+      var v = tfCustom.value.trim();
+      if (!v) return;
+      applyTerminalFont(v, undefined);
+      persistTermFont(v, undefined);
+    });
+    tfSize.addEventListener('change', function () {
+      var n = Number(tfSize.value);
+      if (!isFinite(n)) return;
+      n = Math.max(9, Math.min(32, Math.round(n)));
+      tfSize.value = String(n);
+      applyTerminalFont(undefined, n);
+      persistTermFont(undefined, n);
+    });
   }
 
   // Layout switcher (Bubble / Channel)
@@ -460,18 +489,37 @@ function populateAccount() {
     // Hide account section in single-user mode (no username)
     var accountNav = settingsEl.querySelector('[data-section="us-account"]');
     if (accountNav) accountNav.style.display = data.username ? '' : 'none';
+    // Terminal font: seed in-memory prefs from server, populate inputs.
+    if (data.terminalFont && typeof data.terminalFont === "object") {
+      applyTerminalFont(data.terminalFont.family, data.terminalFont.size);
+    }
+    var tfSelectEl = document.getElementById('us-term-font-family');
+    var tfCustomEl = document.getElementById('us-term-font-family-custom');
+    var tfSizeEl = document.getElementById('us-term-font-size');
+    if (tfSelectEl && tfCustomEl) {
+      var fam = getTerminalFontFamily();
+      var matched = false;
+      for (var oi = 0; oi < tfSelectEl.options.length; oi++) {
+        if (tfSelectEl.options[oi].value === fam) {
+          tfSelectEl.value = fam;
+          matched = true;
+          break;
+        }
+      }
+      if (!matched) {
+        tfSelectEl.value = '__custom__';
+        tfCustomEl.value = fam;
+        tfCustomEl.classList.remove('hidden');
+      } else {
+        tfCustomEl.classList.add('hidden');
+      }
+    }
+    if (tfSizeEl) tfSizeEl.value = String(getTerminalFontSize());
     // Auto-continue toggle
     var acToggle = document.getElementById('us-auto-continue');
     if (acToggle) acToggle.checked = !!data.autoContinueOnRateLimit;
-    // Theme switcher
-    var tSwitcher = document.getElementById('us-theme-switcher');
-    if (tSwitcher) {
-      var currentMode = (getCurrentTheme() && getCurrentTheme().variant) || 'dark';
-      var tBtns = tSwitcher.querySelectorAll('.layout-option');
-      for (var ti = 0; ti < tBtns.length; ti++) {
-        tBtns[ti].classList.toggle('selected', tBtns[ti].dataset.theme === currentMode);
-      }
-    }
+    // Theme picker self-syncs active selection via theme.js's applyTheme
+    // change callbacks (updatePickerActive). Nothing to do here.
     // Layout switcher: sync from server response
     // Sync mate onboarding state from server
     if (data.mateOnboardingShown) {

package/lib/server-settings.js

@@ -30,6 +30,7 @@ function attachSettings(ctx) {
         profile.chatLayout = mu.chatLayout || "channel";
         profile.mateOnboardingShown = !!mu.mateOnboardingShown;
         profile.matesEnabled = mu.matesEnabled !== false;
+        try { profile.terminalFont = users.getTerminalFont(mu.id); } catch (e) {}
         res.writeHead(200, { "Content-Type": "application/json" });
         res.end(JSON.stringify(profile));
         return true;
@@ -52,6 +53,14 @@ function attachSettings(ctx) {
         profile.chatLayout = dc.chatLayout || "channel";
         profile.mateOnboardingShown = !!dc.mateOnboardingShown;
         profile.matesEnabled = dc.matesEnabled !== false;
+        if (dc.terminalFont && typeof dc.terminalFont === "object") {
+          profile.terminalFont = {
+            family: dc.terminalFont.family || "'SF Mono', Menlo, Monaco, 'Courier New', monospace",
+            size: typeof dc.terminalFont.size === "number" ? dc.terminalFont.size : 13,
+          };
+        } else {
+          profile.terminalFont = { family: "'SF Mono', Menlo, Monaco, 'Courier New', monospace", size: 13 };
+        }
       }
       // Check if custom avatar file exists
       try {
@@ -514,6 +523,52 @@ function attachSettings(ctx) {
       return true;
     }
 
+    // PUT /api/user/terminal-font
+    // Body: { family?: string, size?: number }
+    // Per-user terminal font preferences shared across every xterm in
+    // the Clay UI (bottom panel, Claude TUI session view, attention
+    // modal). Single-user mode persists into daemon config; multi-user
+    // mode persists into users.json.
+    if (req.method === "PUT" && fullUrl === "/api/user/terminal-font") {
+      var isMultiUserTF = users.isMultiUser();
+      var muTF = getMultiUserFromReq(req);
+      var bodyTF = "";
+      req.on("data", function (chunk) { bodyTF += chunk; });
+      req.on("end", function () {
+        try {
+          var dataTF = JSON.parse(bodyTF || "{}");
+          if (isMultiUserTF) {
+            if (!muTF) {
+              res.writeHead(401, { "Content-Type": "application/json" });
+              res.end('{"error":"unauthorized"}');
+              return;
+            }
+            var resultTF = users.setTerminalFont(muTF.id, dataTF.family, dataTF.size);
+            if (resultTF.error) {
+              res.writeHead(400, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({ error: resultTF.error }));
+              return;
+            }
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ ok: true, terminalFont: resultTF.terminalFont }));
+          } else {
+            if (typeof opts.onSetTerminalFont === "function") {
+              var saved = opts.onSetTerminalFont(dataTF.family, dataTF.size);
+              res.writeHead(200, { "Content-Type": "application/json" });
+              res.end(JSON.stringify({ ok: true, terminalFont: saved }));
+            } else {
+              res.writeHead(500, { "Content-Type": "application/json" });
+              res.end('{"error":"single-user font update unsupported"}');
+            }
+          }
+        } catch (e) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end('{"error":"Invalid request"}');
+        }
+      });
+      return true;
+    }
+
     // POST /api/user/mate-onboarded
     if (req.method === "POST" && fullUrl === "/api/user/mate-onboarded") {
       var isMultiUser = users.isMultiUser();

package/lib/users-preferences.js

@@ -405,6 +405,49 @@ function attachPreferences(deps) {
     return { error: "User not found" };
   }
 
+  // --- Terminal font preferences ---
+  //
+  // Per-user font family + size for every xterm in Clay (bottom panel
+  // shell, Claude TUI session view, TUI attention modal). Stored as a
+  // single object so the two values stay together.
+
+  var DEFAULT_TERM_FONT_FAMILY = "'SF Mono', Menlo, Monaco, 'Courier New', monospace";
+  var DEFAULT_TERM_FONT_SIZE = 13;
+  var MIN_TERM_FONT_SIZE = 9;
+  var MAX_TERM_FONT_SIZE = 32;
+
+  function getTerminalFont(userId) {
+    var data = loadUsers();
+    for (var i = 0; i < data.users.length; i++) {
+      if (data.users[i].id === userId) {
+        var tf = data.users[i].terminalFont || {};
+        return {
+          family: (typeof tf.family === "string" && tf.family.trim()) ? tf.family : DEFAULT_TERM_FONT_FAMILY,
+          size: (typeof tf.size === "number" && tf.size >= MIN_TERM_FONT_SIZE && tf.size <= MAX_TERM_FONT_SIZE) ? tf.size : DEFAULT_TERM_FONT_SIZE,
+        };
+      }
+    }
+    return { family: DEFAULT_TERM_FONT_FAMILY, size: DEFAULT_TERM_FONT_SIZE };
+  }
+
+  function setTerminalFont(userId, family, size) {
+    var data = loadUsers();
+    for (var i = 0; i < data.users.length; i++) {
+      if (data.users[i].id === userId) {
+        var current = data.users[i].terminalFont || {};
+        var nextFamily = (typeof family === "string" && family.trim()) ? family.trim().slice(0, 200) : current.family;
+        var nextSize = current.size;
+        if (typeof size === "number" && size >= MIN_TERM_FONT_SIZE && size <= MAX_TERM_FONT_SIZE) {
+          nextSize = Math.round(size);
+        }
+        data.users[i].terminalFont = { family: nextFamily, size: nextSize };
+        saveUsers(data);
+        return { ok: true, terminalFont: data.users[i].terminalFont };
+      }
+    }
+    return { error: "User not found" };
+  }
+
   // --- What's New seen ids ---
   //
   // Per-user list of dismissed "What's New" entry ids. The whats-new
@@ -477,6 +520,8 @@ function attachPreferences(deps) {
     setToolPalette: setToolPalette,
     getWhatsNewSeenIds: getWhatsNewSeenIds,
     markWhatsNewSeen: markWhatsNewSeen,
+    getTerminalFont: getTerminalFont,
+    setTerminalFont: setTerminalFont,
     setMateOnboarded: setMateOnboarded,
   };
 }

package/lib/users.js

@@ -426,6 +426,8 @@ var getToolPalettes = preferences.getToolPalettes;
 var setToolPalette = preferences.setToolPalette;
 var getWhatsNewSeenIds = preferences.getWhatsNewSeenIds;
 var markWhatsNewSeen = preferences.markWhatsNewSeen;
+var getTerminalFont = preferences.getTerminalFont;
+var setTerminalFont = preferences.setTerminalFont;
 var setMateOnboarded = preferences.setMateOnboarded;
 
 module.exports = {
@@ -493,6 +495,8 @@ module.exports = {
   setToolPalette: setToolPalette,
   getWhatsNewSeenIds: getWhatsNewSeenIds,
   markWhatsNewSeen: markWhatsNewSeen,
+  getTerminalFont: getTerminalFont,
+  setTerminalFont: setTerminalFont,
   getDeletedBuiltinKeys: getDeletedBuiltinKeys,
   addDeletedBuiltinKey: addDeletedBuiltinKey,
   removeDeletedBuiltinKey: removeDeletedBuiltinKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.39.0-beta.4",
+  "version": "2.39.0",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",