@bakapiano/ccsm 0.18.2 → 0.18.4

package/lib/tunnel.js

@@ -17,10 +17,12 @@
 // dirs. Returns the absolute path so we can spawn the child regardless
 // of whether the post-install PATH refresh has reached this Node process.
 
-const { spawn, execFileSync } = require('node:child_process');
+const { spawn, execFile } = require('node:child_process');
 const path = require('node:path');
 const fs = require('node:fs');
 const os = require('node:os');
+const { promisify } = require('node:util');
+const execFileP = promisify(execFile);
 
 const PROVIDERS = {
   cloudflared: {
@@ -61,19 +63,15 @@ let token = null;     // Remote-access bearer token. Null = no remote
 function getToken() { return token; }
 function setToken(t) { token = t ? String(t) : null; return token; }
 
-function findBinary(provider) {
+async function findBinary(provider) {
   const p = PROVIDERS[provider];
   if (!p) return null;
   // PATH lookup via where.exe — works regardless of how the CLI got
-  // installed (winget, choco, manual, in-tree).
+  // installed (winget, choco, manual, in-tree). windowsHide stops the
+  // conhost window from flashing.
   try {
-    // windowsHide: true stops each execFileSync from briefly flashing
-    // a black conhost window. The Remote page polls /api/tunnel/status
-    // every 2.5s and probe() (when its 30s cache is cold) fires 4-6
-    // execs back-to-back — without this flag the screen popcorns with
-    // little windows every cache cycle.
-    const out = execFileSync('where.exe', [p.binary], { stdio: ['ignore', 'pipe', 'ignore'], windowsHide: true })
-      .toString().trim().split(/\r?\n/)[0];
+    const { stdout } = await execFileP('where.exe', [p.binary], { windowsHide: true });
+    const out = String(stdout).trim().split(/\r?\n/)[0];
     if (out && fs.existsSync(out)) return out;
   } catch { /* not on PATH */ }
   // Fall back to known install locations (winget's PATH update doesn't
@@ -97,20 +95,18 @@ function findBinary(provider) {
   return null;
 }
 
-function getVersion(provider, exe) {
+async function getVersion(provider, exe) {
   try {
-    const out = execFileSync(exe, ['--version'], { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true })
-      .toString().trim().split(/\r?\n/)[0];
-    return out || null;
+    const { stdout } = await execFileP(exe, ['--version'], { windowsHide: true });
+    return String(stdout).trim().split(/\r?\n/)[0] || null;
   } catch { return null; }
 }
 
-function checkDevtunnelLogin(exe) {
+async function checkDevtunnelLogin(exe) {
   try {
-    const out = execFileSync(exe, ['user', 'show'], { stdio: ['ignore', 'pipe', 'ignore'], timeout: 5000, windowsHide: true })
-      .toString().trim();
+    const { stdout } = await execFileP(exe, ['user', 'show'], { windowsHide: true, timeout: 5000 });
     // "Logged in as <email> using <provider>." vs "Not logged in"
-    const m = out.match(/Logged in as (\S+)/);
+    const m = String(stdout).trim().match(/Logged in as (\S+)/);
     if (m) return { loggedIn: true, user: m[1] };
     return { loggedIn: false, user: null };
   } catch {
@@ -128,31 +124,39 @@ const PROBE_TTL_MS = 30_000;
 let probeCache = null;
 let probeCacheAt = 0;
 
-function probe(force = false) {
+async function probe(force = false) {
   if (!force && probeCache && Date.now() - probeCacheAt < PROBE_TTL_MS) {
     return probeCache;
   }
-  const out = {};
-  for (const id of Object.keys(PROVIDERS)) {
-    const exe = findBinary(id);
-    const p = { installed: !!exe, exe, version: exe ? getVersion(id, exe) : null };
-    if (id === 'devtunnel' && exe) {
-      Object.assign(p, checkDevtunnelLogin(exe));
+  // All providers in parallel; within each, --version and the
+  // devtunnel `user show` check run together too. Cold probe drops
+  // from ~1.5s serial to ~700ms (capped by the slowest exec —
+  // typically `devtunnel user show`).
+  const ids = Object.keys(PROVIDERS);
+  const results = await Promise.all(ids.map(async (id) => {
+    const exe = await findBinary(id);
+    const p = { installed: !!exe, exe, version: null };
+    if (exe) {
+      const tasks = [getVersion(id, exe)];
+      if (id === 'devtunnel') tasks.push(checkDevtunnelLogin(exe));
+      const [version, devUser] = await Promise.all(tasks);
+      p.version = version;
+      if (devUser) Object.assign(p, devUser);
     }
-    out[id] = p;
-  }
-  probeCache = out;
+    return [id, p];
+  }));
+  probeCache = Object.fromEntries(results);
   probeCacheAt = Date.now();
-  return out;
+  return probeCache;
 }
 
 // Invalidate the cache when callers know the on-disk state likely changed
 // (post-install, post-login, etc.). Next probe() re-shells.
 function invalidateProbe() { probeCache = null; probeCacheAt = 0; }
 
-function status() {
+async function status() {
   return {
-    providers: probe(),
+    providers: await probe(),
     running: !!current,
     provider: current?.provider || null,
     url: current?.url || null,
@@ -174,10 +178,10 @@ async function start({ provider, port }) {
   if (current) throw new Error('tunnel already running');
   const p = PROVIDERS[provider];
   if (!p) throw new Error(`unknown provider: ${provider}`);
-  const exe = findBinary(provider);
+  const exe = await findBinary(provider);
   if (!exe) throw new Error(`${p.label} is not installed`);
   if (provider === 'devtunnel') {
-    const { loggedIn } = checkDevtunnelLogin(exe);
+    const { loggedIn } = await checkDevtunnelLogin(exe);
     if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
   }
 
@@ -211,7 +215,7 @@ async function start({ provider, port }) {
   // Wait up to 25s for the URL to show up in stdout.
   const deadline = Date.now() + 25_000;
   while (Date.now() < deadline) {
-    if (entry.url) return status();
+    if (entry.url) return await status();
     if (!current || current !== entry) {
       throw new Error('tunnel exited before reporting a URL · ' + entry.log.slice(-3).join(' / '));
     }
@@ -219,7 +223,7 @@ async function start({ provider, port }) {
   }
   // Timed out — keep the child alive (the URL might appear later) but
   // tell the caller we don't have one yet.
-  return status();
+  return await status();
 }
 
 function stop() {

package/lib/webTerminal.js

@@ -138,6 +138,17 @@ function attach(id, ws) {
     try { ws.close(4404, 'no such terminal'); } catch {}
     return;
   }
+  // Latest-wins: a session has at most one live WebSocket at any
+  // moment. The new attach displaces any existing ones — keeps PTY
+  // resize semantics unambiguous (each client sends its own dimensions
+  // for its own viewport; with two clients fighting, claude's TUI
+  // re-renders for whichever sent last and the other side sees a
+  // mis-sized layout). Close code 4001 + reason lets the displaced
+  // client show a clearer message than the generic "[disconnected]".
+  for (const other of entry.sockets) {
+    try { other.close(4001, 'displaced by another client'); } catch {}
+  }
+  entry.sockets.clear();
   entry.sockets.add(ws);
   if (entry.history) {
     try { ws.send(JSON.stringify({ type: 'output', data: scrubReplayResponses(entry.history) })); } catch {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Claude Code Session Manager — Windows web UI to manage many concurrent claude sessions: live list, snapshot/restore, focus existing window, new session in an isolated workspace with repo clones",
   "license": "MIT",
   "main": "server.js",

package/public/css/responsive.css

@@ -87,11 +87,13 @@
   select { font-size: 16px !important; }
 }
 
-/* FAB + backdrop · sit above page content but BELOW dialogs. */
+/* FAB + backdrop · sit above page content but BELOW dialogs. The
+   `left` and `bottom` inline styles come from MobileNavFab.js (drag-
+   persisted), so we don't set defaults here — the component seeds
+   them on mount. `touch-action: none` stops the browser from also
+   scrolling the page while the user is dragging the FAB. */
 .mobile-nav-fab {
   position: fixed;
-  bottom: max(16px, env(safe-area-inset-bottom));
-  left:   max(16px, env(safe-area-inset-left));
   z-index: 210;
   width: 52px;
   height: 52px;
@@ -105,12 +107,18 @@
   box-shadow:
     0 10px 24px -6px rgba(0,0,0,.28),
     0 2px 4px rgba(0,0,0,.10);
-  cursor: pointer;
-  transition: transform .15s, box-shadow .15s, background .15s;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  transition: box-shadow .15s, background .15s;
 }
-.mobile-nav-fab:hover  { transform: translateY(-1px); background: var(--bg); }
-.mobile-nav-fab:active { transform: translateY(0); }
-.mobile-nav-fab svg { width: 22px; height: 22px; stroke-width: 2; }
+/* No translateY on hover — would fight the inline left/bottom we set
+   on every pointermove during drag, making the FAB jitter under the
+   finger as :hover toggles on/off. Background-only hover for desktop
+   pointers; touch never matches :hover. */
+.mobile-nav-fab:hover  { background: var(--bg); }
+.mobile-nav-fab:active { cursor: grabbing; }
+.mobile-nav-fab svg { width: 22px; height: 22px; stroke-width: 2; pointer-events: none; }
 /* Open state stays the same paper white — only the icon swaps to X.
    Keeping the colour consistent reads as "same button, different
    mode" instead of two different controls. */

package/public/css/sidebar.css

@@ -1,6 +1,11 @@
 /* Left collapsible sidebar nav · brand mark · util items · collapse toggle */
 
 .sidebar {
+  /* One value drives all three "section break" gaps in the sidebar
+     column: brand-strip → first nav item, last nav item → "Sessions"
+     header, and "Sessions" header → first folder. Bump or shrink to
+     adjust how breathy the rail feels. */
+  --sidebar-section-gap: var(--s-3);
   position: sticky;
   top: 0;
   height: 100vh;
@@ -262,7 +267,9 @@
   align-items: center;
   padding: 0;
   min-height: 40px;
-  margin-bottom: var(--s-2);
+  /* Sit flush above the first nav item — no extra breathing room
+     between the brand strip and the nav list. */
+  margin-bottom: 0;
 }
 .collapse-toggle {
   appearance: none;
@@ -337,12 +344,18 @@ body.is-resizing-sidebar * {
 
 /* Compact top nav: smaller height + smaller font, so the folder tree
    below dominates. */
+/* Match the dimensions of .tree-folder-head + .tree-session below so
+   the top nav, the folder head, and the session rows form one visually
+   continuous column: same left padding (icon at x=8), same icon-label
+   gap, same row height, same corner radius. Without this the nav
+   icons sit 2px further right than the folder icons and the rows are
+   noticeably taller. */
 .sidebar-nav.compact .nav-item {
   font-size: 13px;
-  padding: 4px 10px;
-  min-height: 30px;
-  gap: 10px;
-  border-radius: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  gap: 8px;
+  border-radius: 4px;
   position: relative;
   letter-spacing: -0.005em;
   transition: background .14s ease, color .14s ease;
@@ -367,7 +380,7 @@ body.is-resizing-sidebar * {
 /* Tree section header. Looks like codex: uppercase label, small +
    button on hover. */
 .tree {
-  margin-top: var(--s-3);
+  margin-top: var(--sidebar-section-gap);
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -394,6 +407,9 @@ body.is-resizing-sidebar * {
   font-weight: 500;
   letter-spacing: 0;
   color: var(--ink-mid);
+  /* No margin-bottom — let the parent .tree's `gap: 2px` carry the
+     space below, matching what sits between folder rows. The big gap
+     above "Sessions" still comes from .tree margin-top. */
 }
 .tree-head-action {
   appearance: none;
@@ -485,7 +501,11 @@ body.is-resizing-sidebar * {
   display: none;
   gap: 2px;
 }
-.tree-folder-head:hover .tree-folder-actions { display: inline-flex; }
+/* Same touch carve-out as session-actions above — don't reveal folder
+   rename/delete on a tap-emulated hover. */
+@media (hover: hover) and (pointer: fine) {
+  .tree-folder-head:hover .tree-folder-actions { display: inline-flex; }
+}
 .tree-folder-action {
   appearance: none;
   background: transparent;
@@ -643,8 +663,18 @@ body.is-resizing-sidebar * {
   gap: 2px;
   flex-shrink: 0;
 }
-.tree-session:hover .tree-session-actions { display: inline-flex; }
-.tree-session:hover .tree-meta { display: none; }
+/* Hover-only on real-pointer devices. On touch devices the first tap
+   emulates :hover (revealing rename/delete), which means the user has
+   to tap a second time to actually open the session. (hover: hover)
+   matches a real mouse / trackpad; (pointer: fine) further requires
+   precise cursor (so hybrid touch+mouse laptops with a stylus get
+   hover but pure-touch phones / tablets do not.) Phones keep the
+   timestamp visible and never reveal the action buttons here — they
+   can use the kebab in the session pane's top bar instead. */
+@media (hover: hover) and (pointer: fine) {
+  .tree-session:hover .tree-session-actions { display: inline-flex; }
+  .tree-session:hover .tree-meta { display: none; }
+}
 .tree-session-action {
   appearance: none;
   background: transparent;

package/public/css/terminals.css

@@ -440,3 +440,57 @@
   background: #faf9f5;
   border-color: #faf9f5;
 }
+
+/* Displaced state — shown when the server kicks us off because another
+   client attached to the same session (latest-wins). Same dark surface
+   as terminal-empty so the transition from running terminal → displaced
+   doesn't flash a colour change. */
+.terminal-displaced {
+  background: #1a1815;
+  color: #e8e3d5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--s-5);
+}
+.terminal-displaced-card {
+  max-width: 460px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.terminal-displaced-card h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #faf9f5;
+  letter-spacing: -0.005em;
+}
+.terminal-displaced-card p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgba(232, 227, 213, 0.72);
+}
+.terminal-displaced-actions {
+  margin-top: var(--s-2);
+  display: flex;
+  justify-content: center;
+}
+.terminal-displaced-card .action.primary {
+  background: #e8e3d5;
+  color: #1a1815;
+  border-color: #e8e3d5;
+  padding: 9px 20px;
+  font-size: 13px;
+}
+.terminal-displaced-card .action.primary:hover {
+  background: #faf9f5;
+  border-color: #faf9f5;
+}
+.terminal-displaced-hint {
+  font-size: 11.5px !important;
+  color: rgba(232, 227, 213, 0.45) !important;
+}

package/public/css/widgets.css

@@ -1724,6 +1724,27 @@
   word-break: break-all;
 }
 
+.remote-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+  min-height: 260px;
+  color: var(--ink-muted);
+  font-size: 13px;
+}
+.remote-loading p { margin: 0; }
+.remote-loading-spinner {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--ink);
+  animation: remote-spin 0.75s linear infinite;
+}
+@keyframes remote-spin { to { transform: rotate(360deg); } }
+
 .remote-empty {
   margin: 0;
   font-size: 12.5px;

package/public/js/components/MobileNavFab.js

@@ -6,24 +6,111 @@
 // full-screen overlay. A backdrop captures taps outside the sidebar
 // and dismisses.
 //
-// Visible only when isMobile signal is true — saves a render branch
-// elsewhere.
+// The FAB is draggable — long-press-and-move lets the user reposition
+// it (the default bottom-left can cover page content). A short tap with
+// no drag still toggles the drawer. Position persists in localStorage
+// so the user doesn't have to re-place it each session.
 
 import { html } from '../html.js';
+import { useRef, useState, useEffect } from 'preact/hooks';
 import { isMobile, mobileDrawerOpen } from '../state.js';
 import { IconSidebarToggle, IconClose } from '../icons.js';
 
+const LS_POS = 'ccsm.fab.pos';
+const FAB_SIZE = 52;
+const SAFE_MARGIN = 8;
+// Movement threshold (px) before pointermove counts as a drag instead
+// of a tap. Below this, pointerup fires the toggle and the FAB stays
+// put — matches what a user expects when they meant to "press" the
+// button, not move it.
+const DRAG_HYST_PX = 6;
+
+function loadPos() {
+  try {
+    const raw = localStorage.getItem(LS_POS);
+    if (!raw) return null;
+    const p = JSON.parse(raw);
+    if (typeof p.left === 'number' && typeof p.bottom === 'number') return p;
+  } catch {}
+  return null;
+}
+function savePos(p) {
+  try { localStorage.setItem(LS_POS, JSON.stringify(p)); } catch {}
+}
+function clampPos(p) {
+  // Re-clamp on every render so a position saved at one viewport size
+  // doesn't trap the FAB off-screen at a smaller size (rotation,
+  // resize, etc.).
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  return {
+    left:   Math.max(SAFE_MARGIN, Math.min(vw - FAB_SIZE - SAFE_MARGIN, p.left)),
+    bottom: Math.max(SAFE_MARGIN, Math.min(vh - FAB_SIZE - SAFE_MARGIN, p.bottom)),
+  };
+}
+
 export function MobileNavFab() {
   if (!isMobile.value) return null;
   const open = mobileDrawerOpen.value;
+  const [pos, setPos] = useState(() => loadPos() || { left: 16, bottom: 24 });
+  const dragRef = useRef({ start: null, moved: false });
+
+  // Re-clamp on viewport changes so a rotation doesn't strand the FAB
+  // beyond the new edge.
+  useEffect(() => {
+    const onResize = () => setPos((p) => clampPos(p));
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const onPointerDown = (ev) => {
+    ev.currentTarget.setPointerCapture(ev.pointerId);
+    dragRef.current = {
+      start: { x: ev.clientX, y: ev.clientY, fromPos: pos },
+      moved: false,
+    };
+  };
+  const onPointerMove = (ev) => {
+    const d = dragRef.current;
+    if (!d.start) return;
+    const dx = ev.clientX - d.start.x;
+    const dy = ev.clientY - d.start.y;
+    if (!d.moved && Math.hypot(dx, dy) < DRAG_HYST_PX) return;
+    d.moved = true;
+    // Stop the page from also scrolling while we drag.
+    ev.preventDefault();
+    setPos(clampPos({
+      // bottom = distance from bottom edge to the FAB's bottom edge.
+      // Pointer moved DOWN (+dy) → FAB moves down → bottom decreases.
+      left:   d.start.fromPos.left + dx,
+      bottom: d.start.fromPos.bottom - dy,
+    }));
+  };
+  const onPointerUp = (ev) => {
+    const d = dragRef.current;
+    try { ev.currentTarget.releasePointerCapture(ev.pointerId); } catch {}
+    dragRef.current = { start: null, moved: false };
+    if (d.moved) {
+      // Drag finished — persist the new resting spot.
+      savePos(pos);
+      return;
+    }
+    // No appreciable movement → treat as tap.
+    mobileDrawerOpen.value = !open;
+  };
+
   return html`
     ${open ? html`
       <div class="mobile-nav-backdrop"
            onClick=${() => { mobileDrawerOpen.value = false; }} />
     ` : null}
     <button class=${`mobile-nav-fab${open ? ' is-open' : ''}`}
+            style=${`left: ${pos.left}px; bottom: ${pos.bottom}px;`}
             aria-label=${open ? 'close navigation' : 'open navigation'}
-            onClick=${() => { mobileDrawerOpen.value = !open; }}>
+            onPointerDown=${onPointerDown}
+            onPointerMove=${onPointerMove}
+            onPointerUp=${onPointerUp}
+            onPointerCancel=${onPointerUp}>
       ${open ? html`<${IconClose} />` : html`<${IconSidebarToggle} />`}
     </button>`;
 }

package/public/js/components/Sidebar.js

@@ -140,9 +140,16 @@ function SessionRow({ s, folderId, siblingIds }) {
       .catch((e) => setToast(e.message, 'error'));
   };
 
+  // Skip the HTML5 drag affordance on touch devices — `draggable=true`
+  // makes mobile browsers interpret the first tap as a drag-start
+  // gesture, swallowing the click event entirely. The user then needs
+  // a second tap to navigate. Touch users don't reorder sessions by
+  // drag anyway; we'd add a dedicated "move to folder" affordance if
+  // anyone asked.
+  const touchDevice = isMobile.value || (typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches);
   return html`
     <div class=${`tree-session${isActive ? ' is-active' : ''}${running ? ' is-running' : ' is-stopped'}${running && s.activity === 'working' ? ' is-working' : ''}${showInsertLine ? ' is-reorder-target' : ''}`}
-         draggable=${true}
+         draggable=${!touchDevice}
          onDragStart=${onDragStart}
          onDragEnd=${onDragEnd}
          onDragOver=${onRowDragOver}

package/public/js/components/TerminalView.js

@@ -3,7 +3,7 @@
 // output frames into xterm. Disposes everything on unmount or id change.
 
 import { html } from '../html.js';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
@@ -32,10 +32,17 @@ const THEME = {
   white:   '#e8e3d5', brightWhite:   '#faf9f5',
 };
 
-export function TerminalView({ terminalId }) {
+export function TerminalView({ terminalId, cliType }) {
   const hostRef = useRef(null);
   const termRef = useRef(null);
   const wsRef = useRef(null);
+  // Set when ws.onclose receives our custom "displaced by another
+  // client" code (4001) from lib/webTerminal.js's latest-wins policy.
+  // Renders a full-pane prompt with a "Take it back" button that bumps
+  // reattachNonce → useEffect re-runs → new WS, displacing whoever
+  // currently holds the session.
+  const [displaced, setDisplaced] = useState(false);
+  const [reattachNonce, setReattach] = useState(0);
 
   useEffect(() => {
     if (!terminalId || !hostRef.current) return;
@@ -148,8 +155,19 @@ export function TerminalView({ terminalId }) {
         term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
       }
     };
-    ws.onclose = () => {
-      term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
+    ws.onclose = (ev) => {
+      // Server uses code 4001 + reason "displaced by another client"
+      // when a fresh attach takes over the session (latest-wins policy
+      // in lib/webTerminal.js's attach). We replace the terminal with
+      // a full-pane prompt + Take it back button via setDisplaced(true).
+      // Generic disconnects (network blip, server restart, PTY exit)
+      // get the dim inline notice as before — those usually self-heal
+      // and aren't worth a modal.
+      if (ev && ev.code === 4001) {
+        setDisplaced(true);
+      } else {
+        term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
+      }
     };
 
     const onData = (data) => {
@@ -262,12 +280,18 @@ export function TerminalView({ terminalId }) {
     // Shift+Enter / Ctrl+Enter → insert literal newline, don't submit.
     // Background: xterm.js encodes BOTH plain Enter and Shift+Enter and
     // Ctrl+Enter as \r (0x0D / CR). The kitty keyboard / win32 input
-    // protocols (enabled in vtExtensions above) WOULD distinguish them,
-    // but they're opt-in by the running app — claude code doesn't enable
-    // either, so we never get the distinction "for free".
+    // protocols WOULD distinguish them, but they're opt-in by the
+    // running app and most CLIs don't enable them, so we never get the
+    // distinction "for free". Each CLI handles modified-Enter differently:
+    //
+    //   claude   · expects a literal LF (0x0A) — its prompt treats \n
+    //              as "insert newline", \r as "submit". Workaround = '\n'.
+    //   codex / others · use ratatui or similar TUI libs that decode
+    //              the kitty keyboard CSI u sequence. We synthesise it
+    //              explicitly: `CSI 13 ; <mod> u` where mod = 2 for
+    //              Shift, 5 for Ctrl. That maps to the exact key+mod
+    //              the user pressed and ratatui inserts a newline.
     //
-    // Send the LF (0x0A) explicitly. Claude code (and most modern TUIs)
-    // treat \n inside a prompt as a literal newline insert, \r as submit.
     // Alt+Enter already works (xterm sends \x1b\r → meta-enter) so we
     // leave that alone.
     const onShiftEnter = (ev) => {
@@ -275,11 +299,21 @@ export function TerminalView({ terminalId }) {
       if (!(ev.shiftKey || ev.ctrlKey)) return;
       if (ev.metaKey || ev.altKey) return;
       if (!isOurs()) return;
+      // claude  → LF (its prompt parses \n as insert-newline).
+      // others  → ESC+CR i.e. Alt+Enter. crossterm (codex/copilot
+      //   TUI libs) decodes ESC-prefixed sequences as Alt-modified
+      //   without needing the kitty keyboard protocol enabled — and
+      //   codex's default keymap binds Alt+Enter to insert_newline
+      //   alongside Shift+Enter (see openai/codex
+      //   codex-rs/tui/src/keymap.rs L904-909). The kitty CSI u
+      //   sequence we tried first only works after the app has
+      //   negotiated kitty mode, which codex doesn't do by default.
+      const data = cliType === 'claude' ? '\n' : '\x1b\r';
       ev.preventDefault();
       ev.stopPropagation();
       ev.stopImmediatePropagation();
       if (ws.readyState === 1) {
-        ws.send(JSON.stringify({ type: 'input', data: '\n' }));
+        ws.send(JSON.stringify({ type: 'input', data }));
       }
     };
     document.addEventListener('keydown', onShiftEnter, true);
@@ -328,10 +362,50 @@ export function TerminalView({ terminalId }) {
       termRef.current = null;
       wsRef.current = null;
     };
-  }, [terminalId]);
+  }, [terminalId, reattachNonce]);
 
   if (!terminalId) {
     return html`<div class="terminal-empty">Select a terminal on the left, or launch a new one.</div>`;
   }
-  return html`<div ref=${hostRef} class="terminal-host"></div>`;
+  if (displaced) {
+    // Distinct key (and a non-div tag) forces Preact's reconciler to
+    // UNMOUNT the host <div> and mount a fresh element. Without this,
+    // Preact reuses the same DOM node, only flipping its className —
+    // and the xterm canvases stay parented inside, visible behind our
+    // overlay text. Re-mount on reattach: bumping reattachNonce reruns
+    // the effect with a fresh Terminal + WebSocket pair, which the
+    // server's latest-wins gate handles by displacing the current
+    // holder.
+    return html`
+      <section key="displaced" class="terminal-displaced">
+        <div class="terminal-displaced-card">
+          <h2>Another device picked up this session</h2>
+          <p>
+            Only one client at a time can attach. Your terminal here was
+            closed when another browser opened this session — its keystrokes
+            and resize events would otherwise fight yours.
+          </p>
+          <div class="terminal-displaced-actions">
+            <button class="action primary"
+                    onClick=${() => {
+                      // Clear displaced FIRST so the next render swaps the
+                      // overlay out for the host div — that's the only
+                      // way hostRef.current populates. Then bump the nonce
+                      // so the effect re-runs with the freshly-mounted
+                      // host and opens a new WS. Doing both in one tick
+                      // batches the state updates; React renders, mounts
+                      // the host, then flushes effects.
+                      setDisplaced(false);
+                      setReattach((n) => n + 1);
+                    }}>
+              Take it back
+            </button>
+          </div>
+          <p class="terminal-displaced-hint">
+            Taking it back will close the other client the same way.
+          </p>
+        </div>
+      </section>`;
+  }
+  return html`<div key="host" ref=${hostRef} class="terminal-host"></div>`;
 }

package/public/js/pages/RemotePage.js

@@ -124,6 +124,12 @@ export function RemotePage() {
   const [token, setTokenLocal] = useState('');
   const [busy, setBusy] = useState(false);
   const [deviceList, setDeviceList] = useState([]);
+  // First /api/tunnel/status round-trip is the slow one — even with
+  // 30s server-side cache + parallel probe, a cold call shells out to
+  // where.exe / --version / `devtunnel user show` and adds ~700ms.
+  // We hide the form behind a spinner during that window so the user
+  // doesn't see empty radios + placeholders that suddenly fill in.
+  const [loading, setLoading] = useState(true);
   const pollRef = useRef(null);
 
   async function refresh() {
@@ -143,6 +149,7 @@ export function RemotePage() {
         return cur || 'cloudflared';
       });
     } catch (e) { setToast(`status load failed · ${e.message}`, 'error'); }
+    finally { setLoading(false); }
   }
 
   useEffect(() => {
@@ -245,6 +252,17 @@ export function RemotePage() {
   const cf      = status?.providers?.cloudflared;
   const dt      = status?.providers?.devtunnel;
 
+  if (loading) {
+    return html`
+      <${PageTitleBar} title="Remote" />
+      <div class="settings-scroll">
+        <div class="remote-loading">
+          <div class="remote-loading-spinner" aria-hidden="true"></div>
+          <p>Probing tunnel providers…</p>
+        </div>
+      </div>`;
+  }
+
   return html`
     <${PageTitleBar} title="Remote" />
     <div class="settings-scroll">

package/public/js/pages/SessionsPage.js

@@ -150,7 +150,7 @@ export function SessionsPage() {
     <div class="session-pane">
       <div class="session-pane-body">
         ${running
-          ? html`<${TerminalView} terminalId=${session.id} />`
+          ? html`<${TerminalView} terminalId=${session.id} cliType=${cli?.type} />`
           : html`
             <div class="terminal-empty">
               ${resumeError ? html`

package/server.js

@@ -1035,9 +1035,9 @@ app.post('/api/shutdown', (_req, res) => {
 // the chosen tunnel CLI. URL appears asynchronously in the CLI's
 // stdout; lib/tunnel parses it. /status returns the latest snapshot
 // for the page to poll.
-app.get('/api/tunnel/status', (_req, res) => {
-  res.json(tunnel.status());
-});
+app.get('/api/tunnel/status', asyncH(async (_req, res) => {
+  res.json(await tunnel.status());
+}));
 app.post('/api/tunnel/start', asyncH(async (req, res) => {
   const { provider, token } = req.body || {};
   if (!token || String(token).length < 8) {
@@ -1048,20 +1048,20 @@ app.post('/api/tunnel/start', asyncH(async (req, res) => {
     const result = await tunnel.start({ provider, port: currentPort });
     res.json(result);
   } catch (e) {
-    res.status(400).json({ error: e.message, providers: tunnel.probe() });
+    res.status(400).json({ error: e.message, providers: await tunnel.probe().catch(() => ({})) });
   }
 }));
-app.post('/api/tunnel/stop', (_req, res) => {
+app.post('/api/tunnel/stop', asyncH(async (_req, res) => {
   const stopped = tunnel.stop();
-  res.json({ stopped, ...tunnel.status() });
-});
-app.post('/api/tunnel/token', (req, res) => {
+  res.json({ stopped, ...(await tunnel.status()) });
+}));
+app.post('/api/tunnel/token', asyncH(async (req, res) => {
   // Bare token update without touching the running tunnel.
   // POST { token: '' } to clear and disable remote auth.
   const t = (req.body && req.body.token) || '';
   tunnel.setToken(t);
-  res.json(tunnel.status());
-});
+  res.json(await tunnel.status());
+}));
 app.post('/api/tunnel/install', asyncH(async (req, res) => {
   const { provider } = req.body || {};
   try {