clay-server 2.40.0-beta.3 → 2.40.0

package/lib/public/css/sidebar.css

@@ -1034,91 +1034,6 @@
   object-fit: cover;
 }
 
-/* Split-button variant used by the Claude tile: main click area + a
-   thin chevron strip on the right that opens the mode picker. The
-   wrapping div carries the .session-top-action hover/opacity styling so
-   the two children read as a single visual unit. */
-.session-top-action-split {
-  display: flex;
-  align-items: stretch;
-  padding: 0;
-  overflow: hidden;
-}
-.session-top-action-main {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 0 8px 0 12px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-.session-top-action-chevron {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  padding: 0;
-  border: none;
-  border-left: 1px solid var(--border-subtle);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-.session-top-action-chevron .lucide,
-.session-top-action-chevron svg {
-  width: 12px;
-  height: 12px;
-}
-.session-top-action-split:hover .session-top-action-chevron {
-  background: rgba(var(--overlay-rgb), 0.05);
-}
-
-/* Claude mode dropdown menu (opened by the chevron).
-   Theme-aware: mirrors .tool-palette-ctx-menu so it follows light/dark. */
-.claude-mode-menu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 200px;
-  padding: 4px 0;
-  border-radius: 10px;
-  background: var(--sidebar-bg);
-  border: 1px solid var(--border);
-  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
-  font-family: inherit;
-}
-.claude-mode-menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  text-align: left;
-  font: inherit;
-  font-size: 13px;
-  transition: background 0.15s;
-}
-.claude-mode-menu-item:hover {
-  background: rgba(var(--overlay-rgb), 0.05);
-}
-.claude-mode-menu-label {
-  font-weight: 500;
-}
-.claude-mode-menu-hint {
-  color: var(--text-dimmer);
-  font-size: 11px;
-  margin-left: 12px;
-}
-
 .session-top-action:hover {
   background: var(--sidebar-hover);
   color: var(--text);

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

@@ -8,6 +8,47 @@
   border-left: 1px solid var(--border-subtle);
 }
 
+/* Lazy-resume bar: shown in place of the composer when a born-TUI session is
+   displayed read-only (no live PTY). Clicking Resume spawns claude --resume.
+   Toggled by body.tui-suspended (set in session-tui-view.js). */
+#tui-resume-bar { display: none; }
+body.tui-suspended #input-area { display: none !important; }
+body.tui-suspended #tui-resume-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 14px 16px;
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
+  border-top: 1px solid var(--border);
+  background: var(--bg-alt);
+}
+.tui-resume-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 18px;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.tui-resume-btn:hover { filter: brightness(1.08); }
+.tui-resume-btn:active { filter: brightness(0.95); }
+.tui-resume-btn .lucide { width: 16px; height: 16px; }
+.tui-resume-hint {
+  font-size: 12px;
+  color: var(--text-dimmer);
+}
+@media (max-width: 768px) {
+  .tui-resume-hint { display: none; }
+}
+
 /* 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/index.html

@@ -362,6 +362,7 @@
           <span class="header-title" id="header-title">Connecting...</span>
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <button id="header-rename-btn" type="button" title="Rename session"><i data-lucide="pencil"></i></button>
+          <button type="button" id="header-tui-close-btn" class="header-tui-close-btn hidden" title="Close terminal (keeps history, resume anytime)" aria-label="Close terminal"><i data-lucide="power"></i></button>
           <div id="mate-mobile-title" class="mate-mobile-title hidden">
             <img id="mate-mobile-avatar" class="mate-mobile-avatar" alt="">
             <span id="mate-mobile-name" class="mate-mobile-name"></span>
@@ -855,7 +856,7 @@
         <button class="file-viewer-btn" id="terminal-close" title="Hide panel"><i data-lucide="minus"></i></button>
       </div>
     </div>
-    <div id="terminal-toolbar" class="hidden">
+    <div id="terminal-toolbar" class="term-toolbar hidden">
       <button class="term-key" data-key="tab">Tab</button>
       <button class="term-key term-key-toggle" data-key="ctrl">Ctrl</button>
       <button class="term-key" data-key="esc">Esc</button>

package/lib/public/modules/app-messages.js

@@ -27,7 +27,7 @@ import { handleFsList, handleFsRead, handleFileChanged, handleDirChanged, handle
 import { isProjectSettingsOpen, handleInstructionsRead, handleInstructionsWrite, handleProjectEnv, handleProjectEnvSaved, handleProjectSharedEnv, handleProjectSharedEnvSaved, handleProjectOwnerChanged } from './project-settings.js';
 import { updateSettingsModels, updateSettingsStats, updateDaemonConfig, handleSetPinResult, handleKeepAwakeChanged, handleAutoContinueChanged, handleRestartResult, handleShutdownResult, handleSharedEnv, handleSharedEnvSaved, handleGlobalClaudeMdRead, handleGlobalClaudeMdWrite } from './server-settings.js';
 import { handleTermList, handleTermCreated, sendTerminalCommand, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed } from './terminal.js';
-import { attachTuiView, detachTuiView, tuiHandleTermOutput, tuiHandleTermResized, tuiHandleTermExited, tuiHandleTermClosed } from './session-tui-view.js';
+import { attachTuiView, detachTuiView, setTuiSuspendedView, tuiHandleTermOutput, tuiHandleTermResized, tuiHandleTermExited, tuiHandleTermClosed } from './session-tui-view.js';
 import { tuiModalHandleTermOutput, tuiModalHandleTermResized, tuiModalHandleTermExited, tuiModalHandleTermClosed } from './tui-attention.js';
 import { updateTerminalList, handleContextSourcesState, updateEmailAccountList, updateEmailUnreadCounts, handleEmailTestResult, handleEmailAddResult, handleEmailRemoveResult, handleEmailDefaults } from './context-sources.js';
 import { refreshEmailSettings } from './user-settings.js';
@@ -620,6 +620,9 @@ export function processMessage(msg) {
         } else {
           detachTuiView();
         }
+        // Born-TUI session with no live PTY: read-only transcript + Resume bar
+        // (the composer is hidden; clicking Resume spawns claude --resume).
+        setTuiSuspendedView(!!msg.tuiSuspended, msg.id);
         if (msg.vendor) {
           if (!store.get('vendorSelectionLocked') || msg.hasHistory) {
             store.set({ currentVendor: msg.vendor });

package/lib/public/modules/input.js

@@ -4,6 +4,7 @@ import { renderPicker as renderContextPicker } from './context-sources.js';
 import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, stickyReapplyMention, sendMention, sendUserMention, renderMentionUser, renderUserMention, removeMentionChip } from './mention.js';
 import { store } from './store.js';
 import { mateAvatarUrl } from './avatar.js';
+import { tuiIsActive, tuiSubmitText } from './session-tui-view.js';
 
 var ctx;
 
@@ -101,6 +102,28 @@ export function sendMessage() {
   hideSlashMenu();
   if (ctx.hideSuggestionChips) ctx.hideSuggestionChips();
 
+  // TUI session: on mobile the GUI composer stays visible so the native IME
+  // can compose Korean/CJK (xterm's hidden textarea can't on mobile WebKit).
+  // Forward the typed line straight to the PTY instead of the SDK message
+  // path - no chat bubble, the terminal renders its own echo. Attached files
+  // were uploaded to a path (uploadFile -> pendingFiles); the claude CLI
+  // accepts file paths in the prompt, so append them (quoted if they contain
+  // spaces). Pasted inline images have no path and aren't supported here.
+  if (tuiIsActive()) {
+    var tuiParts = [];
+    if (text) tuiParts.push(text);
+    for (var pf = 0; pf < pendingFiles.length; pf++) {
+      var pfPath = pendingFiles[pf].path;
+      if (pfPath) tuiParts.push(/\s/.test(pfPath) ? '"' + pfPath + '"' : pfPath);
+    }
+    tuiSubmitText(tuiParts.join(" "));
+    ctx.inputEl.value = "";
+    sendInputSync();
+    clearPendingImages();
+    autoResize();
+    return;
+  }
+
   if (text === "/clear") {
     ctx.inputEl.value = "";
     clearPendingImages();
@@ -521,8 +544,11 @@ var MAX_UPLOAD_BYTES = 50 * 1024 * 1024; // 50 MB
 
 // --- File upload ---
 function uploadFile(file) {
+  // Clipboard blobs may have no name; synthesize one so the server can store
+  // and name the file (the attach button passes real File objects).
+  var uploadName = file.name || ("upload-" + Date.now());
   if (file.size > MAX_UPLOAD_BYTES) {
-    if (ctx.addSystemMessage) ctx.addSystemMessage("File too large (max 50MB): " + file.name, true);
+    if (ctx.addSystemMessage) ctx.addSystemMessage("File too large (max 50MB): " + uploadName, true);
     return;
   }
   uploadingCount++;
@@ -541,10 +567,10 @@ function uploadFile(file) {
       if (xhr.status === 200) {
         try {
           var resp = JSON.parse(xhr.responseText);
-          pendingFiles.push({ name: resp.name || file.name, path: resp.path });
+          pendingFiles.push({ name: resp.name || uploadName, path: resp.path });
         } catch (e) {}
       } else {
-        if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + file.name, true);
+        if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + uploadName, true);
       }
       renderInputPreviews();
       if (ctx.processing && ctx.setSendBtnMode) {
@@ -553,18 +579,25 @@ function uploadFile(file) {
     };
     xhr.onerror = function () {
       uploadingCount--;
-      if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + file.name, true);
+      if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + uploadName, true);
       renderInputPreviews();
       if (ctx.processing && ctx.setSendBtnMode) {
         ctx.setSendBtnMode(hasSendableContent() ? "send" : "stop");
       }
     };
-    xhr.send(JSON.stringify({ name: file.name, data: b64 }));
+    xhr.send(JSON.stringify({ name: uploadName, data: b64 }));
   };
   reader.readAsDataURL(file);
 }
 
 function readImageBlob(blob) {
+  // TUI sessions take file PATHS in the prompt, not inline base64 images.
+  // Upload the image to a path (pendingFiles) so the typed line can reference
+  // it; the claude CLI then reads the file. No client-side resize needed.
+  if (tuiIsActive()) {
+    uploadFile(blob);
+    return;
+  }
   var reader = new FileReader();
   reader.onload = function (ev) {
     var dataUrl = ev.target.result;
@@ -1027,6 +1060,11 @@ export function initInput(_ctx) {
     } else if (val === "/") {
       showSlashMenu("");
       hideMentionMenu();
+    } else if (tuiIsActive()) {
+      // TUI session: the composer is a plain conduit to the PTY. Mentions
+      // (@mate) don't apply, so don't pop the menu on "@".
+      hideSlashMenu();
+      hideMentionMenu();
     } else {
       hideSlashMenu();
       // Check for @mention

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

@@ -20,6 +20,8 @@ import { getTerminalTheme } from './theme.js';
 import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { showHeaderTuiFont, hideHeaderTuiFont } from './header-tui-font.js';
 import { openArticle as openWhatsNewArticle } from './whats-new-article.js';
+import { createKeyToolbar, TERMINAL_TOOLBAR_HTML } from './terminal-toolbar.js';
+import { refreshIcons, iconHtml } from './icons.js';
 
 // Stable id of the canonical "Why TUI mode?" article in
 // lib/whats-new-content.js. The TUI policy notice's "Learn more" button
@@ -32,6 +34,14 @@ var TUI_POLICY_ARTICLE_ID = "2026-06-tui-default";
 
 var hostEl = null;       // container div mounted over #messages
 var xtermContainerEl = null;
+var keyToolbar = null;   // shared mobile control-key bar (terminal-toolbar.js)
+var isTouchDevice = "ontouchstart" in window;
+// Mobile input strategy: iOS WebKit (and other mobile IMEs) don't fire usable
+// composition events on xterm's hidden helper textarea, so Korean/CJK input
+// reaches the PTY as decomposed jamo. Rather than reinvent an input surface,
+// we keep the regular GUI composer (#input) visible below the terminal on
+// touch devices and forward its send into the PTY (input.js -> tuiSubmitText).
+// xterm is render-only on mobile.
 
 // The TUI policy notice's "Learn more" button opens the canonical
 // "Why TUI mode?" entry in the What's New blog viewer. The full
@@ -46,6 +56,14 @@ var xterm = null;        // xterm.js instance
 var fitAddon = null;
 var webglAddon = null;
 var currentTermId = null;
+// IME composition state. Mobile keyboards (and CJK input generally) compose
+// a character from several keystrokes; xterm's onData fires for each
+// intermediate jamo/kana, which on the PTY shows up as decomposed text
+// (e.g. Korean "안녕" arriving as "ㅇㅏㄴㄴㅕㅇ"). We gate onData while a
+// composition is active and emit the finished string on compositionend.
+var imeComposing = false;
+var imeLastComposed = "";
+var imeLastComposedAt = 0;
 var resizeObserver = null;
 var windowResizeBound = false;
 var resizeDebounce = null;
@@ -113,6 +131,22 @@ function ensureHostEl() {
   // so cols/rows stay correct.
   hostEl.style.padding = "4px";
 
+  // Mobile control-key bar at the top of the TUI: soft keyboards lack
+  // Esc/Tab/Ctrl/arrows, which the Claude TUI relies on. Reuses the shared
+  // terminal-toolbar component (same markup/keys as the bottom-panel shell).
+  // Touch devices only; on desktop a hardware keyboard already has the keys.
+  if (isTouchDevice) {
+    var toolbarEl = document.createElement("div");
+    toolbarEl.id = "tui-key-toolbar";
+    toolbarEl.className = "term-toolbar";
+    toolbarEl.innerHTML = TERMINAL_TOOLBAR_HTML;
+    hostEl.appendChild(toolbarEl);
+    keyToolbar = createKeyToolbar({
+      toolbar: toolbarEl,
+      send: sendTermInput,
+    });
+  }
+
   // Policy notice: explains why TUI mode exists (Anthropic split Agent
   // SDK usage into a separate billing bucket on 2026-06-15; running
   // `claude` in a real terminal keeps usage in the Interactive bucket).
@@ -144,6 +178,30 @@ function ensureHostEl() {
   xtermContainerEl.style.position = "relative";
   hostEl.appendChild(xtermContainerEl);
 
+  // Mobile: route typing through the regular GUI composer (#input). Its
+  // native textarea composes Korean/CJK correctly, unlike xterm's hidden
+  // helper textarea on mobile WebKit. On touch devices the composer stays
+  // visible below the terminal (see hideGuiChrome) and its send is
+  // intercepted into the PTY (see input.js -> tuiSubmitText). Tapping the
+  // terminal focuses the composer so the keyboard opens, and the toolbar's
+  // sticky Ctrl is applied to composer letters here (Ctrl+C etc.).
+  if (isTouchDevice) {
+    xtermContainerEl.addEventListener("click", focusGuiComposer);
+    var composer = document.getElementById("input");
+    if (composer) {
+      composer.addEventListener("keydown", function (e) {
+        if (currentTermId == null) return;
+        if (e.key && e.key.length === 1 && keyToolbar && keyToolbar.takeCtrl()) {
+          var cc = e.key.toUpperCase().charCodeAt(0);
+          if (cc >= 65 && cc <= 90) {
+            e.preventDefault();
+            sendTermInput(String.fromCharCode(cc - 64));
+          }
+        }
+      }, true);
+    }
+  }
+
   // Paste-image handling. Two paths cover the common platforms:
   //
   //   1. `paste` event in capture phase - covers Cmd+V on macOS and
@@ -282,22 +340,36 @@ function syncHostBounds() {
   var messagesEl = document.getElementById("messages");
   if (!messagesEl) return;
   var r = messagesEl.getBoundingClientRect();
-  // Extend down to the bottom of the viewport so the empty band that used
-  // to sit below #messages (where #input-area lived before we hid it) gets
-  // covered by the same terminal background instead of showing through.
   hostEl.style.top = r.top + "px";
   hostEl.style.left = r.left + "px";
   hostEl.style.width = r.width + "px";
-  hostEl.style.height = (window.innerHeight - r.top) + "px";
+  // Desktop hides the GUI composer and extends the terminal to the viewport
+  // bottom (covering the band where #input-area used to sit). Mobile keeps
+  // the composer visible below the terminal, so end the host at #messages'
+  // own bottom and leave the composer its space.
+  if (isTouchDevice) {
+    hostEl.style.height = r.height + "px";
+  } else {
+    hostEl.style.height = Math.max(0, window.innerHeight - r.top) + "px";
+  }
 }
 
 function hideGuiChrome(hide) {
   var messagesEl = document.getElementById("messages");
   var inputArea = document.getElementById("input-area");
   if (messagesEl) messagesEl.style.visibility = hide ? "hidden" : "";
-  if (inputArea) inputArea.style.display = hide ? "none" : "";
+  // Mobile keeps the composer visible during TUI so the native IME can
+  // compose Korean/CJK; its send is routed to the PTY. Desktop hides it and
+  // types straight into xterm.
+  if (inputArea && !isTouchDevice) inputArea.style.display = hide ? "none" : "";
   var newMsgBtn = document.getElementById("new-msg-btn");
   if (newMsgBtn) newMsgBtn.style.display = hide ? "none" : "";
+  // On mobile, mark the body while the composer is acting as a TUI conduit so
+  // CSS hides composer controls that don't apply (schedule, mention, model/
+  // vendor config). Attach + voice stay available.
+  if (isTouchDevice && document.body) {
+    document.body.classList.toggle("tui-composer-active", hide);
+  }
 }
 
 function fitNow() {
@@ -350,6 +422,8 @@ function createXterm() {
     try { term.loadAddon(new WebLinksAddon.WebLinksAddon()); } catch (e) {}
   }
   term.open(xtermContainerEl || hostEl);
+  bindImeComposition(term);
+  if (keyToolbar) keyToolbar.bindXterm(term);
   if (typeof WebglAddon !== "undefined") {
     try {
       webglAddon = new WebglAddon.WebglAddon();
@@ -360,15 +434,148 @@ function createXterm() {
       term.loadAddon(webglAddon);
     } catch (e) {}
   }
-  // Route keystrokes back to the PTY.
+  // Route keystrokes back to the PTY. Suppress while an IME composition is
+  // in flight (the intermediate jamo/kana would otherwise reach the PTY as
+  // decomposed text); the finished string is sent from compositionend.
   term.onData(function (data) {
     if (currentTermId == null) return;
+    if (imeComposing) return;
+    // Drop xterm's own echo of the just-composed string (it re-emits the
+    // finalized text via onData right after compositionend).
+    if (data && data === imeLastComposed && (Date.now() - imeLastComposedAt) < 120) {
+      imeLastComposed = "";
+      return;
+    }
+    sendTermInput(data);
+  });
+  return term;
+}
+
+function sendTermInput(data) {
+  if (currentTermId == null || !data) return;
+  var ws = getWs();
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "term_input", id: currentTermId, data: data }));
+  }
+}
+
+// Focus the GUI composer (touch) or xterm (desktop). On mobile the composer
+// owns input so the IME composes in a real textarea; focusing xterm's hidden
+// textarea is what breaks Korean composition in the first place.
+function focusGuiComposer() {
+  try {
+    if (isTouchDevice) {
+      var composer = document.getElementById("input");
+      if (composer) composer.focus();
+    } else if (xterm) {
+      xterm.focus();
+    }
+  } catch (e) {}
+}
+
+// --- Title-bar "Close" button (live TUI only) ---
+// Explicitly closes the running PTY now (suspend_tui_session) instead of
+// waiting for the idle sweep; the session drops to read-only history + Resume.
+var closeBtnBound = false;
+function bindCloseBtn() {
+  if (closeBtnBound) return;
+  var btn = document.getElementById("header-tui-close-btn");
+  if (!btn) return;
+  closeBtnBound = true;
+  btn.addEventListener("click", function () {
+    var sid = store.get("activeSessionId");
+    if (sid == null) return;
     var ws = getWs();
     if (ws && ws.readyState === 1) {
-      ws.send(JSON.stringify({ type: "term_input", id: currentTermId, data: data }));
+      ws.send(JSON.stringify({ type: "suspend_tui_session", id: sid }));
     }
   });
-  return term;
+}
+function showHeaderTuiClose() {
+  bindCloseBtn();
+  var btn = document.getElementById("header-tui-close-btn");
+  if (btn) btn.classList.remove("hidden");
+}
+function hideHeaderTuiClose() {
+  var btn = document.getElementById("header-tui-close-btn");
+  if (btn) btn.classList.add("hidden");
+}
+
+// True while a TUI session is mounted. input.js uses this to route the GUI
+// composer's send into the PTY instead of the normal SDK message path.
+export function tuiIsActive() {
+  return currentTermId != null;
+}
+
+// Submit a line typed in the GUI composer to the TUI's PTY (text + Enter).
+export function tuiSubmitText(text) {
+  if (currentTermId == null) return;
+  if (text) sendTermInput(text);
+  sendTermInput("\r");
+}
+
+// --- Lazy-resume "suspended" view ---
+// A born-TUI session whose PTY isn't running is shown as a read-only
+// transcript (server hydrates history) with the composer hidden and a Resume
+// bar in its place. Clicking Resume asks the server to spawn `claude --resume`
+// (resume_tui_session); the follow-up session_switched then attaches xterm.
+var resumeBarEl = null;
+var resumeBarSessionId = null;
+
+function ensureResumeBar() {
+  if (resumeBarEl) return resumeBarEl;
+  resumeBarEl = document.createElement("div");
+  resumeBarEl.id = "tui-resume-bar";
+  resumeBarEl.innerHTML =
+    '<button type="button" class="tui-resume-btn">' +
+    iconHtml("play") + '<span>Resume in terminal</span></button>' +
+    '<span class="tui-resume-hint">Read-only history · resume to continue in the terminal</span>';
+  resumeBarEl.querySelector(".tui-resume-btn").addEventListener("click", function () {
+    if (resumeBarSessionId == null) return;
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "resume_tui_session", id: resumeBarSessionId }));
+    }
+  });
+  var inputArea = document.getElementById("input-area");
+  if (inputArea && inputArea.parentNode) {
+    inputArea.parentNode.insertBefore(resumeBarEl, inputArea.nextSibling);
+  } else {
+    document.body.appendChild(resumeBarEl);
+  }
+  return resumeBarEl;
+}
+
+// Toggle the read-only/Resume presentation. `active` true hides the composer
+// and shows the Resume bar for `sessionId`; false restores normal chrome.
+export function setTuiSuspendedView(active, sessionId) {
+  if (active) {
+    ensureResumeBar();
+    resumeBarSessionId = sessionId;
+    if (document.body) document.body.classList.add("tui-suspended");
+    refreshIcons();
+  } else {
+    resumeBarSessionId = null;
+    if (document.body) document.body.classList.remove("tui-suspended");
+  }
+}
+
+// Bind IME composition handlers to xterm's helper textarea so CJK / mobile
+// composed input is sent as whole characters instead of per-keystroke jamo.
+function bindImeComposition(term) {
+  var ta = term && term.textarea;
+  if (!ta) return;
+  ta.addEventListener("compositionstart", function () {
+    imeComposing = true;
+  });
+  ta.addEventListener("compositionend", function (e) {
+    imeComposing = false;
+    var composed = (e && e.data) || "";
+    if (!composed) return;
+    imeLastComposed = composed;
+    imeLastComposedAt = Date.now();
+    sendTermInput(composed);
+  });
 }
 
 function teardownXterm() {
@@ -381,6 +588,9 @@ function teardownXterm() {
     xterm = null;
   }
   fitAddon = null;
+  imeComposing = false;
+  imeLastComposed = "";
+  imeLastComposedAt = 0;
 }
 
 export function attachTuiView(terminalId) {
@@ -390,8 +600,9 @@ export function attachTuiView(terminalId) {
     if (hostEl) hostEl.style.display = "flex";
     hideGuiChrome(true);
     showHeaderTuiFont();
+    showHeaderTuiClose();
     fitNow();
-    try { xterm.focus(); } catch (e) {}
+    focusGuiComposer();
     return;
   }
   // Switching to a different TUI terminal: tear down the old one cleanly.
@@ -402,6 +613,7 @@ export function attachTuiView(terminalId) {
   hostEl.style.display = "flex";
   hideGuiChrome(true);
   showHeaderTuiFont();
+  showHeaderTuiClose();
   syncHostBounds();
 
   currentTermId = terminalId;
@@ -418,7 +630,7 @@ export function attachTuiView(terminalId) {
   // First fit pass; defer a second pass for layout to settle.
   fitNow();
   setTimeout(fitNow, 50);
-  try { xterm.focus(); } catch (e) {}
+  focusGuiComposer();
 
   if (!resizeObserver && typeof ResizeObserver !== "undefined") {
     // Watch the chat-content area, not the host: the host's size is
@@ -449,9 +661,11 @@ export function detachTuiView() {
   }
   currentTermId = null;
   teardownXterm();
+  if (keyToolbar) keyToolbar.reset();
   if (hostEl) hostEl.style.display = "none";
   hideGuiChrome(false);
   hideHeaderTuiFont();
+  hideHeaderTuiClose();
 }
 
 // Route a term_output frame to the embedded xterm if it belongs to the

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

@@ -709,7 +709,8 @@ function renderMobileSessionsInto(container) {
   claudeBtn.innerHTML = '<img src="/claude-code-avatar.png" class="mobile-session-new-icon" alt=""><span>Claude</span>';
   claudeBtn.addEventListener("click", function () {
     if (getWs() && store.get('connected')) {
-      getWs().send(JSON.stringify({ type: "new_session", vendor: "claude", mode: "tui" }));
+      // No explicit mode: the server applies the user's claudeOpenMode pref.
+      getWs().send(JSON.stringify({ type: "new_session", vendor: "claude" }));
     }
     closeMobileSheet();
   });