@bakapiano/ccsm 0.19.2 → 0.19.4

package/lib/config.js

@@ -75,6 +75,12 @@ const DEFAULTS = {
   // Launch button when the user doesn't override.
   clis: DEFAULT_CLIS,
   defaultCliId: 'claude',
+  // Devtunnel state. tunnelId holds the persistent (named) tunnel
+  // ccsm minted via `devtunnel create` on first Start. Reusing it
+  // across host restarts keeps the public URL — and therefore the
+  // remote browsers' approval records — stable. `devtunnel delete <id>`
+  // is invoked when the user explicitly rotates via the Reset button.
+  devtunnel: { tunnelId: null },
 };
 
 function ensureDataDir() {
@@ -106,6 +112,9 @@ migrateLegacyDataIfNeeded();
 // object so callers don't mutate DEFAULTS.
 function mergeWithDefaults(partial) {
   const out = { ...DEFAULTS, ...partial };
+  // Deep-merge devtunnel so a partial save (just .tunnelId) doesn't
+  // wipe sibling keys we may add later.
+  out.devtunnel = { ...DEFAULTS.devtunnel, ...(partial?.devtunnel || {}) };
   // Drop v0.x keys that the new architecture doesn't use.
   delete out.terminal;
   delete out.commandShell;

package/lib/tunnel.js

@@ -22,6 +22,7 @@ const path = require('node:path');
 const fs = require('node:fs');
 const os = require('node:os');
 const { promisify } = require('node:util');
+const { loadConfig, saveConfig } = require('./config');
 const execFileP = promisify(execFile);
 
 const PROVIDERS = {
@@ -46,7 +47,21 @@ const PROVIDERS = {
       path.join(process.env['LOCALAPPDATA'] || '', 'Microsoft', 'WinGet', 'Packages',
         'Microsoft.devtunnel_Microsoft.Winget.Source_8wekyb3d8bbwe', 'devtunnel.exe'),
     ],
-    args: (port) => ['host', '-p', String(port), '--allow-anonymous'],
+    args: (port, opts = {}) => {
+      // With a persistent (named) tunnel, ports + anonymous access are
+      // configured ahead of time via `devtunnel port create` and
+      // `devtunnel access create` (see ensureDevtunnelTunnelId +
+      // configureDevtunnelTunnel). The host call then takes ONLY the
+      // tunnel id — passing -p or --allow-anonymous here makes the CLI
+      // try to batch-update the existing tunnel and the service rejects
+      // it ("Batch update of ports is not supported"). Anonymous +
+      // ephemeral mode keeps the legacy flags as a fallback when no
+      // tunnel id has been minted.
+      if (opts.tunnelId) {
+        return ['host', opts.tunnelId];
+      }
+      return ['host', '-p', String(port), '--allow-anonymous'];
+    },
     // devtunnel sometimes prints two URL forms for the same tunnel:
     //   https://<id>.<region>.devtunnels.ms:<port>     ← port as suffix
     //   https://<id>-<port>.<region>.devtunnels.ms     ← port baked into
@@ -128,6 +143,115 @@ async function checkDevtunnelLogin(exe) {
   }
 }
 
+// Mint (or read back) a persistent devtunnel id and stash it in
+// config.devtunnel.tunnelId so subsequent `devtunnel host` invocations
+// reuse the same public URL.
+//
+// Why: every `devtunnel host` without a tunnel id allocates a fresh
+// random id, which means a fresh subdomain and therefore a fresh
+// browser origin on the remote side. localStorage is per-origin, so
+// approved device ids get orphaned and the remote user has to re-
+// register from scratch on every tunnel restart.
+//
+// Behaviour:
+//   - If config already has a tunnelId, return it verbatim. We do NOT
+//     validate it against `devtunnel list` here — the host child will
+//     fail loudly if the id was deleted from another machine, and
+//     callers can drop it and retry by deleting config.devtunnel.
+//   - Otherwise call `devtunnel create --json`, capture the .tunnelId
+//     from the response, persist it, return it.
+//   - If the create call fails for any reason, return null and let
+//     start() fall back to a temporary tunnel — degraded but working.
+async function ensureDevtunnelTunnelId(exe) {
+  try {
+    const cfg = await loadConfig();
+    if (cfg?.devtunnel?.tunnelId) return cfg.devtunnel.tunnelId;
+    const { stdout } = await execFileP(exe, ['create', '--json'], {
+      windowsHide: true,
+      timeout: 20_000,
+    });
+    let id = null;
+    try {
+      const j = JSON.parse(String(stdout));
+      // The CLI's JSON shape varies a bit by version; the canonical
+      // field is `tunnelId` but older builds nest it under `tunnel`.
+      id = j.tunnelId || j.tunnel?.tunnelId || j.id || null;
+    } catch {
+      // Fall back to scraping the plain-text output for `Tunnel ID: foo`
+      const m = String(stdout).match(/Tunnel ID:\s*(\S+)/i);
+      if (m) id = m[1];
+    }
+    if (!id) return null;
+    // Persist for next time. Swallow save errors — worst case the next
+    // start re-allocates one.
+    try { await saveConfig({ devtunnel: { tunnelId: id } }); }
+    catch (e) { console.warn('[tunnel] persist devtunnel id failed:', e.message); }
+    return id;
+  } catch (e) {
+    console.warn('[tunnel] ensureDevtunnelTunnelId failed:', e.message);
+    return null;
+  }
+}
+
+// Bring a named tunnel into shape for hosting: make sure the port is
+// in its port list and anonymous access is allowed. Idempotent — the
+// "already exists" errors from `port create` / `access create` are
+// silently absorbed. Required because `devtunnel host <id>` (which
+// we use for persistent tunnels) doesn't accept -p / --allow-anonymous
+// flags after the tunnel exists — passing them triggers the service
+// to reject the call with "Batch update of ports is not supported".
+async function configureDevtunnelTunnel(exe, tunnelId, port) {
+  if (!tunnelId) return;
+  // Add port. If it already exists the CLI prints an error; swallow it.
+  try {
+    await execFileP(exe, ['port', 'create', tunnelId, '-p', String(port)], {
+      windowsHide: true,
+      timeout: 10_000,
+    });
+  } catch (e) {
+    // Only surface failures that aren't "already exists" — those mean
+    // something is genuinely broken (auth lost, wrong tunnel id, etc.).
+    const msg = String(e.stderr || e.stdout || e.message || '');
+    if (!/already/i.test(msg)) {
+      console.warn('[tunnel] devtunnel port create failed:', msg.slice(0, 200));
+    }
+  }
+  // Add anonymous access. Same idempotency story.
+  try {
+    await execFileP(exe, ['access', 'create', tunnelId, '-a'], {
+      windowsHide: true,
+      timeout: 10_000,
+    });
+  } catch (e) {
+    const msg = String(e.stderr || e.stdout || e.message || '');
+    if (!/already/i.test(msg)) {
+      console.warn('[tunnel] devtunnel access create failed:', msg.slice(0, 200));
+    }
+  }
+}
+
+// Delete the persisted devtunnel id (and the remote tunnel resource
+// itself, best-effort). Used by the Reset affordance in the Remote
+// page when the user wants to rotate the public URL.
+async function resetDevtunnelTunnelId() {
+  let prevId = null;
+  try {
+    const cfg = await loadConfig();
+    prevId = cfg?.devtunnel?.tunnelId || null;
+  } catch {}
+  try { await saveConfig({ devtunnel: { tunnelId: null } }); } catch {}
+  if (prevId) {
+    const exe = await findBinary('devtunnel');
+    if (exe) {
+      // Detach from the tunnel resource on the Azure side too; failure
+      // is fine (resource may already be gone). 5s cap.
+      try { await execFileP(exe, ['delete', prevId, '-f'], { windowsHide: true, timeout: 5_000 }); }
+      catch { /* ignore */ }
+    }
+  }
+  return { previousTunnelId: prevId };
+}
+
 // Probe is cached. Each cold call shells out 4-6 sync execs (where.exe,
 // --version per provider, `devtunnel user show`) — cumulatively ~1s of
 // blocked event loop on Windows. The Remote page polls /api/tunnel/status
@@ -178,6 +302,10 @@ async function status() {
     pid: current?.child?.pid || null,
     log: current?.log?.slice(-50) || [],
     token,
+    tunnelId: current?.tunnelId || (await (async () => {
+      try { return (await loadConfig())?.devtunnel?.tunnelId || null; }
+      catch { return null; }
+    })()),
     // Token is echoed back so the Remote page can render the
     // pre-built share URL. The route itself is token-protected
     // (the middleware blocks non-loopback callers without it), so
@@ -342,9 +470,26 @@ async function start({ provider, port }) {
     if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
   }
 
-  const args = p.args(port);
+  // Resolve devtunnel's persistent id BEFORE building args so the
+  // CLI is invoked with `host <id>` and the public URL stays stable
+  // across restarts. Cloudflared has no equivalent here — quick
+  // tunnels always rotate URLs and named tunnels require a CF
+  // account + DNS setup that's outside ccsm's scope.
+  let tunnelId = null;
+  if (provider === 'devtunnel') {
+    tunnelId = await ensureDevtunnelTunnelId(exe);
+    if (tunnelId) {
+      // Make sure the port is in the tunnel's port list and anonymous
+      // access is enabled. `devtunnel host <id>` doesn't accept port /
+      // access flags after the tunnel exists, so this has to be done
+      // out of band before host.
+      await configureDevtunnelTunnel(exe, tunnelId, port);
+    }
+  }
+
+  const args = p.args(port, { tunnelId });
   const child = spawn(exe, args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true });
-  const entry = { provider, child, url: null, startedAt: Date.now(), log: [] };
+  const entry = { provider, child, url: null, startedAt: Date.now(), log: [], tunnelId };
   current = entry;
 
   const pushLog = (line) => {
@@ -420,4 +565,5 @@ module.exports = {
   cancelDevtunnelLogin,
   clearDevtunnelLogin,
   invalidateProbe,
+  resetDevtunnelTunnelId,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.19.2",
+  "version": "0.19.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/terminals.css

@@ -494,3 +494,93 @@
   font-size: 11.5px !important;
   color: rgba(232, 227, 213, 0.45) !important;
 }
+
+/* ─── Mobile terminal accessory bar (TerminalKeyBar.js) ───────────────
+   Floats just above the soft keyboard via a JS-set `bottom` offset
+   (visualViewport keyboard height). Styled against the dark terminal
+   palette — it visually belongs to the terminal, not the cream chrome —
+   so it reads as one surface with the xterm canvas above it. */
+.term-keybar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 215;                 /* above the mobile FAB (210) */
+  background: #201d19;
+  border-top: 1px solid rgba(232, 227, 213, 0.12);
+  padding: 6px 8px;
+  touch-action: manipulation;   /* kill the 300ms double-tap-zoom delay */
+  user-select: none;
+  -webkit-user-select: none;
+  /* NOT overflow:auto here — that would clip the Ctrl popover (which sits
+     at bottom:100%, above the bar). The horizontal scroll lives on the
+     inner .term-keybar-row instead. */
+}
+/* Inner scroll row — holds the keys; scrolls horizontally if they don't
+   fit, without clipping the popover that escapes the bar upward. */
+.term-keybar-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+}
+.term-keybar-row::-webkit-scrollbar { display: none; }
+
+.tkb-key {
+  flex: 0 0 auto;
+  min-width: 42px;
+  height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1;
+  color: #e8e3d5;
+  background: rgba(232, 227, 213, 0.06);
+  border: 1px solid rgba(232, 227, 213, 0.14);
+  border-radius: 8px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+.tkb-key:active,
+.tkb-key.is-active {
+  background: rgba(232, 227, 213, 0.20);
+  border-color: rgba(232, 227, 213, 0.32);
+}
+.tkb-arrow { padding: 0 10px; }
+.tkb-arrow svg { width: 18px; height: 18px; }
+/* S-Tab carries a multi-char label — let it size to content. */
+.tkb-wide { padding: 0 12px; }
+/* The ↵ glyph renders a touch small in the mono stack; bump it so it
+   matches the arrow icons' optical weight. */
+.tkb-glyph { font-size: 17px; line-height: 1; }
+
+/* Ctrl combos — a wrap grid that pops ABOVE the bar (bottom:100%). */
+.term-keybar-pop {
+  position: absolute;
+  bottom: 100%;
+  left: 8px;
+  right: 8px;
+  z-index: 1;                   /* above the key row inside the bar's context */
+  margin-bottom: 6px;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  padding: 8px;
+  background: #201d19;
+  border: 1px solid rgba(232, 227, 213, 0.16);
+  border-radius: 10px;
+  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.5);
+}
+.tkb-combo {
+  flex-direction: column;
+  height: auto;
+  min-width: 0;
+  padding: 7px 4px;
+  gap: 2px;
+}
+.tkb-combo-label { font-family: var(--mono); font-size: 13px; color: #e8e3d5; }
+.tkb-combo-hint  { font-size: 9.5px; color: rgba(232, 227, 213, 0.5); letter-spacing: 0.01em; }

package/public/css/widgets.css

@@ -1774,6 +1774,48 @@
 .provider-status-switch { margin-left: auto; }
 .provider-status-signin { margin-left: auto; }
 
+/* DevtunnelTunnelIdRow — shown under the signed-in Microsoft Dev
+   Tunnel status. The tunnel id is the persistent identifier that
+   keeps the public URL stable across `devtunnel host` restarts;
+   surfaced so the user knows what's being reused and can rotate it
+   when they want fresh credentials. */
+.tunnel-id-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+  margin-top: var(--s-2);
+  padding: 6px 10px;
+  border: 1px solid var(--border-soft);
+  border-radius: 6px;
+  background: var(--bg);
+  font-size: 12px;
+  color: var(--ink-mid);
+}
+.tunnel-id-row.is-empty { color: var(--ink-muted); }
+.tunnel-id-label {
+  font-size: 10.5px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+.tunnel-id-value {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--ink);
+  user-select: all;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--bg-elev);
+  border: 1px solid var(--border-soft);
+}
+.tunnel-id-value-empty {
+  font-style: italic;
+  color: var(--ink-muted);
+}
+.tunnel-id-reset { margin-left: auto; }
+
 /* ── Tunnel section: hero (idle) + live banner (running) ──────────
    Idle: a single horizontal card with the headline + start CTA.
    Running: a status banner (state · provider · uptime · stop link)

package/public/js/components/TerminalKeyBar.js

@@ -0,0 +1,148 @@
+// Mobile-only terminal accessory bar. The soft keyboard has no Esc / Tab /
+// arrows / Ctrl, which are exactly the keys claude & codex TUIs lean on
+// (menu nav, cancel, autocomplete, interrupt). We float a row of those
+// keys just above the soft keyboard — the same "extra-keys row" pattern
+// Termux / Blink / Termius all settled on.
+//
+// Web has no native keyboard-accessory API, so the bar is a position:fixed
+// element anchored to the top of the keyboard via the visualViewport API:
+// when the keyboard opens, visualViewport.height shrinks and the gap below
+// it (window.innerHeight − vv.height) is the keyboard's height; we park the
+// bar at that offset.
+//
+// Every button MUST preventDefault on pointerdown — otherwise tapping it
+// blurs the terminal's hidden textarea, which dismisses the soft keyboard
+// (and would hide this bar). preventDefault keeps focus on the textarea so
+// the keyboard stays up and we just inject the escape sequence over the WS.
+
+import { html } from '../html.js';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { isMobile } from '../state.js';
+import { IconChevronUp, IconChevronDown, IconChevronLeft, IconChevronRight } from '../icons.js';
+
+// Ctrl+<letter> is the letter's code & 0x1f. Pre-computed for the combos
+// that actually come up in a REPL / TUI session.
+const CTRL_COMBOS = [
+  { label: '^C', data: '\x03', hint: 'interrupt' },
+  { label: '^D', data: '\x04', hint: 'EOF' },
+  { label: '^Z', data: '\x1a', hint: 'suspend' },
+  { label: '^R', data: '\x12', hint: 'rev-search' },
+  { label: '^L', data: '\x0c', hint: 'clear' },
+  { label: '^A', data: '\x01', hint: 'line start' },
+  { label: '^E', data: '\x05', hint: 'line end' },
+  { label: '^U', data: '\x15', hint: 'kill line' },
+  { label: '^K', data: '\x0b', hint: 'kill to end' },
+  { label: '^W', data: '\x17', hint: 'kill word' },
+];
+
+export function TerminalKeyBar({ send, cliType }) {
+  if (!isMobile.value) return null;
+  const [visible, setVisible] = useState(false);
+  const [kbOffset, setKbOffset] = useState(0);
+  const [ctrlOpen, setCtrlOpen] = useState(false);
+  const gesture = useRef({ x: 0, y: 0, id: null, moved: false });
+
+  // Show only while the terminal textarea holds focus (i.e. keyboard up).
+  // Buttons preventDefault so they never steal focus → no spurious blur
+  // while the bar is in use; focusout only fires on a genuine dismissal.
+  useEffect(() => {
+    const inTerm = (el) => !!(el && el.closest && el.closest('.terminal-host'));
+    const onFocusIn = (e) => { if (inTerm(e.target)) setVisible(true); };
+    const onFocusOut = () => {
+      // Defer one tick so document.activeElement settles to the new target.
+      setTimeout(() => {
+        if (!inTerm(document.activeElement)) { setVisible(false); setCtrlOpen(false); }
+      }, 0);
+    };
+    document.addEventListener('focusin', onFocusIn);
+    document.addEventListener('focusout', onFocusOut);
+    return () => {
+      document.removeEventListener('focusin', onFocusIn);
+      document.removeEventListener('focusout', onFocusOut);
+    };
+  }, []);
+
+  // Track the keyboard's top edge. window.innerHeight stays constant when
+  // the soft keyboard opens (both iOS Safari & Android Chrome with the
+  // default resizes-visual behaviour); vv.height shrinks. The difference
+  // is the keyboard height → the bar's distance from the layout-viewport
+  // bottom.
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const sync = () => setKbOffset(Math.max(0, window.innerHeight - vv.height - vv.offsetTop));
+    sync();
+    vv.addEventListener('resize', sync);
+    vv.addEventListener('scroll', sync);
+    return () => { vv.removeEventListener('resize', sync); vv.removeEventListener('scroll', sync); };
+  }, []);
+
+  if (!visible) return null;
+
+  // Insert-newline (composer multi-line). Mirrors TerminalView's Shift/Ctrl
+  // +Enter handler: claude's prompt parses a bare LF as insert-newline;
+  // crossterm-based TUIs (codex/copilot) take ESC+CR i.e. Alt+Enter. This
+  // is the ONLY way to add a newline on a soft keyboard whose Enter submits.
+  const newlineData = cliType === 'claude' ? '\n' : '\x1b\r';
+
+  // Tap-vs-drag discrimination. The key row scrolls horizontally
+  // (overflow-x), so a swipe to scroll it starts on a button — firing the
+  // key on pointerdown meant every scroll-drag injected a keystroke. Track
+  // the pointer from down→up and only fire if it stayed put (a real tap).
+  // One pointer at a time on a touch bar, so a single shared ref is enough.
+  //
+  // preventDefault on pointerdown keeps the terminal's textarea focused (the
+  // button never grabs focus) so the soft keyboard stays up. Scrolling is
+  // governed by touch-action, not this preventDefault, so the row still pans.
+  const DRAG_PX = 8;
+  const onDown = (e) => {
+    gesture.current = { x: e.clientX, y: e.clientY, id: e.pointerId, moved: false };
+    e.preventDefault();
+  };
+  const onMove = (e) => {
+    const g = gesture.current;
+    if (g.id !== e.pointerId || g.moved) return;
+    if (Math.hypot(e.clientX - g.x, e.clientY - g.y) > DRAG_PX) g.moved = true;
+  };
+  const onCancel = () => { gesture.current.moved = true; };
+  // Fire on release, but only for a tap (no drag) and the same pointer.
+  const keyProps = (fn) => ({
+    onPointerDown: onDown,
+    onPointerMove: onMove,
+    onPointerCancel: onCancel,
+    onPointerUp: (e) => {
+      const g = gesture.current;
+      if (g.id !== e.pointerId || g.moved) return;
+      e.preventDefault();
+      fn();
+    },
+  });
+  const sendKey = (data) => keyProps(() => send(data));
+  const ctrlCombo = (data) => keyProps(() => { send(data); setCtrlOpen(false); });
+
+  return html`
+    <div class="term-keybar" style=${`bottom:${kbOffset}px`}>
+      ${ctrlOpen ? html`
+        <div class="term-keybar-pop">
+          ${CTRL_COMBOS.map((c) => html`
+            <button class="tkb-key tkb-combo" key=${c.label}
+                    ...${ctrlCombo(c.data)} title=${c.hint}>
+              <span class="tkb-combo-label">${c.label}</span>
+              <span class="tkb-combo-hint">${c.hint}</span>
+            </button>`)}
+        </div>` : null}
+
+      <div class="term-keybar-row">
+        <button class=${`tkb-key${ctrlOpen ? ' is-active' : ''}`}
+                ...${keyProps(() => setCtrlOpen((v) => !v))}>Ctrl</button>
+        <button class="tkb-key" ...${sendKey('\x1b')}>Esc</button>
+        <button class="tkb-key" ...${sendKey('\t')}>Tab</button>
+        <button class="tkb-key tkb-wide" ...${sendKey('\x1b[Z')}>S-Tab</button>
+        <button class="tkb-key tkb-arrow" ...${sendKey(newlineData)} aria-label="newline"><span class="tkb-glyph">↵</span></button>
+        <button class="tkb-key tkb-arrow" ...${sendKey('\x1b[A')} aria-label="up"><${IconChevronUp} /></button>
+        <button class="tkb-key tkb-arrow" ...${sendKey('\x1b[B')} aria-label="down"><${IconChevronDown} /></button>
+        <button class="tkb-key tkb-arrow" ...${sendKey('\x1b[D')} aria-label="left"><${IconChevronLeft} /></button>
+        <button class="tkb-key tkb-arrow" ...${sendKey('\x1b[C')} aria-label="right"><${IconChevronRight} /></button>
+      </div>
+    </div>`;
+}

package/public/js/components/TerminalView.js

@@ -3,6 +3,7 @@
 // output frames into xterm. Disposes everything on unmount or id change.
 
 import { html } from '../html.js';
+import { Fragment } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
@@ -10,6 +11,7 @@ import { WebLinksAddon } from '@xterm/addon-web-links';
 import { ClipboardAddon } from '@xterm/addon-clipboard';
 import { WebglAddon } from '@xterm/addon-webgl';
 import { wsBase, getToken, getDeviceId } from '../backend.js';
+import { TerminalKeyBar } from './TerminalKeyBar.js';
 
 // Dark xterm theme. We give the terminal a near-black ink background to
 // match what claude code's TUI assumes (it paints its own input box +
@@ -44,6 +46,13 @@ export function TerminalView({ terminalId, cliType }) {
   const [displaced, setDisplaced] = useState(false);
   const [reattachNonce, setReattach] = useState(0);
 
+  // Raw escape-sequence injector for the mobile key bar. Reads wsRef at
+  // call time so it stays valid across reattaches without re-binding.
+  const sendInput = (data) => {
+    const ws = wsRef.current;
+    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
+  };
+
   useEffect(() => {
     if (!terminalId || !hostRef.current) return;
 
@@ -128,8 +137,26 @@ export function TerminalView({ terminalId, cliType }) {
 
     const host = hostRef.current;
     term.open(host);
-    // Defer fit one tick so the container has measured layout
-    requestAnimationFrame(() => { try { fit.fit(); } catch {} });
+    // Robust fit scheduler. A single requestAnimationFrame works most
+    // of the time but races on tab/session switches: the .tab-panel
+    // just flipped from display:none to display:flex and although the
+    // browser has laid the element out by the next frame, xterm's
+    // canvas measurement occasionally still reports the pre-display
+    // size (Chromium quirk — the WebGL renderer caches its viewport
+    // before the layout flush propagates through ResizeObserver).
+    // Result: visible "wrong cols/rows until I resize the window" bug.
+    // Spraying fits at 0 / one rAF / 60ms / 200ms covers every
+    // measurement-arrival path without being expensive — fit.fit() is
+    // a no-op when cols/rows match the previous call.
+    const scheduleFit = () => {
+      try { fit.fit(); } catch {}
+      requestAnimationFrame(() => {
+        try { fit.fit(); } catch {}
+        setTimeout(() => { try { fit.fit(); } catch {} }, 60);
+        setTimeout(() => { try { fit.fit(); } catch {} }, 200);
+      });
+    };
+    scheduleFit();
     termRef.current = term;
 
     // Browser WS API can't set Authorization headers — token + device
@@ -154,7 +181,7 @@ export function TerminalView({ terminalId, cliType }) {
       // wrapped at 80 cols, and the follow-up resize from the rAF fit
       // wouldn't reflow the already-emitted bytes. Visible as squeezed
       // text on every session switch.
-      try { fit.fit(); } catch {}
+      scheduleFit();
       ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
     };
     ws.onmessage = (ev) => {
@@ -193,6 +220,20 @@ export function TerminalView({ terminalId, cliType }) {
     const ro = new ResizeObserver(() => { try { fit.fit(); } catch {} });
     ro.observe(hostRef.current);
 
+    // Mobile soft-keyboard resize. When the IME slides up on iOS /
+    // Android, the layout viewport doesn't change but `visualViewport`
+    // does — the page now has less vertical room before the keyboard
+    // covers the bottom. xterm's host element keeps its old layout
+    // height (we use 100vh-derived sizing) so half the terminal sits
+    // behind the keyboard with no resize callback fired. Listening
+    // here covers it: any visualViewport size change triggers a fit
+    // so the cell grid matches the visible area. Cheap; fit.fit() is
+    // a no-op when nothing changed.
+    const vv = window.visualViewport;
+    const onVisualResize = () => scheduleFit();
+    vv?.addEventListener?.('resize', onVisualResize);
+    vv?.addEventListener?.('scroll', onVisualResize);
+
     // Tab-switch refresh. The terminal lives inside a .tab-panel which gets
     // display:none when another tab is active. WebGL renderers keep a glyph
     // texture atlas in GPU memory; when the canvas hides + redisplays at a
@@ -208,7 +249,7 @@ export function TerminalView({ terminalId, cliType }) {
         if (panel.hasAttribute('data-active')) {
           requestAnimationFrame(() => {
             try { term.clearTextureAtlas?.(); } catch {}
-            try { fit.fit(); } catch {}
+            scheduleFit();
             try { term.refresh(0, term.rows - 1); } catch {}
           });
         }
@@ -368,6 +409,8 @@ export function TerminalView({ terminalId, cliType }) {
       }
       ro.disconnect();
       if (panelMo) panelMo.disconnect();
+      vv?.removeEventListener?.('resize', onVisualResize);
+      vv?.removeEventListener?.('scroll', onVisualResize);
       try { ws.close(); } catch {}
       try { term.dispose(); } catch {}
       termRef.current = null;
@@ -418,5 +461,9 @@ export function TerminalView({ terminalId, cliType }) {
         </div>
       </section>`;
   }
-  return html`<div key="host" ref=${hostRef} class="terminal-host"></div>`;
+  return html`
+    <${Fragment}>
+      <div key="host" ref=${hostRef} class="terminal-host"></div>
+      <${TerminalKeyBar} send=${sendInput} cliType=${cliType} />
+    </${Fragment}>`;
 }

package/public/js/pages/ConfigurePage.js

@@ -25,6 +25,22 @@ import { PageTitleBar } from '../components/PageTitleBar.js';
 import { EntityFormModal } from '../components/EntityFormModal.js';
 import { useDragSort } from '../components/useDragSort.js';
 import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
+import { parseArgs, formatArgs } from '../util.js';
+
+// Tokenize the three free-form args fields into string[] before they hit
+// the backend. Form values arrive as strings (text inputs) — backend
+// stores arrays. parseArgs handles shell-style quoting so users can type
+// `-Model "claude-opus-4-8"` or `-Path 'C:\some dir\bin'` and get sane
+// argv splitting instead of a literal-quote token.
+function tokenizeCliArgs(v) {
+  const tok = (x) => typeof x === 'string' ? parseArgs(x) : x;
+  return {
+    ...v,
+    args:             tok(v.args),
+    resumeIdArgs:     tok(v.resumeIdArgs),
+    newSessionIdArgs: tok(v.newSessionIdArgs),
+  };
+}
 
 // Type → smart defaults. Choosing a type in the form auto-fills resumeArgs
 // (and command if blank) so users don't need to remember the per-CLI flag.
@@ -72,8 +88,8 @@ function cliFieldsFor({ creating } = {}) {
     },
     { key: 'name', label: 'Name', placeholder: 'My CLI', required: true },
     { key: 'command', label: 'Command', mono: true, placeholder: 'ccp / claude / ...', required: true },
-    { key: 'args', label: 'Args (space-separated)', mono: true, placeholder: '',
-      hint: 'Used on every launch.' },
+    { key: 'args', label: 'Args', mono: true, placeholder: '',
+      hint: 'Used on every launch. Shell-style quoting: -Model "claude-opus-4-8" or -Path \'C:\\some dir\\bin\'.' },
     { key: 'newSessionIdArgs', label: 'New session id args', mono: true, placeholder: '--session-id <id>',
       // Lock for known types — those args are an integration contract
       // with the upstream CLI, not a user knob. Only Type=Other allows
@@ -194,7 +210,7 @@ export function ConfigurePage() {
             id: c.id,
             icon: html`<${Icon} />`,
             primary: c.name,
-            secondary: html`<span class="mono">${c.command}${c.args?.length ? ' ' + c.args.join(' ') : ''}</span>${c.shell && c.shell !== 'direct' ? html` · ${c.shell}` : null}`,
+            secondary: html`<span class="mono">${c.command}${c.args?.length ? ' ' + formatArgs(c.args) : ''}</span>${c.shell && c.shell !== 'direct' ? html` · ${c.shell}` : null}`,
             badges: tags,
             undeletable: c.builtin,
             raw: c,
@@ -291,7 +307,7 @@ export function ConfigurePage() {
         onClose=${close} submitLabel="Create"
         onTest=${(v) => testCli({ command: v.command, shell: v.shell, type: v.type })}
         onSubmit=${async (v) => {
-          try { await createCli(v); setToast(`created CLI · ${v.name}`); }
+          try { await createCli(tokenizeCliArgs(v)); setToast(`created CLI · ${v.name}`); }
           catch (e) { setToast(e.message, 'error'); throw e; }
         }} />` : null}
 
@@ -300,21 +316,15 @@ export function ConfigurePage() {
         readOnlyKeys=${edit.payload.builtin ? ['type'] : []}
         initial=${{
           ...edit.payload,
-          args: (edit.payload.args || []).join(' '),
-          resumeIdArgs: (edit.payload.resumeIdArgs || []).join(' '),
-          newSessionIdArgs: (edit.payload.newSessionIdArgs || []).join(' '),
+          args: formatArgs(edit.payload.args),
+          resumeIdArgs: formatArgs(edit.payload.resumeIdArgs),
+          newSessionIdArgs: formatArgs(edit.payload.newSessionIdArgs),
         }}
         onClose=${close}
         onTest=${(v) => testCli({ command: v.command, shell: v.shell, type: v.type })}
         onSubmit=${async (v) => {
           try {
-            const patch = {
-              ...v,
-              args: typeof v.args === 'string' ? v.args.split(/\s+/).filter(Boolean) : v.args,
-              resumeIdArgs: typeof v.resumeIdArgs === 'string' ? v.resumeIdArgs.split(/\s+/).filter(Boolean) : v.resumeIdArgs,
-              newSessionIdArgs: typeof v.newSessionIdArgs === 'string' ? v.newSessionIdArgs.split(/\s+/).filter(Boolean) : v.newSessionIdArgs,
-            };
-            await updateCli(edit.payload.id, patch);
+            await updateCli(edit.payload.id, tokenizeCliArgs(v));
             setToast('saved');
           } catch (e) { setToast(e.message, 'error'); throw e; }
         }} />` : null}

package/public/js/pages/LaunchPage.js

@@ -21,7 +21,32 @@ import { BrandMark, IconTerminal, IconFolder, IconFolderOpen, IconBranch, IconCh
 const ROOT_ID = 'newSessionProgress';
 const selectedRepos = signal(new Set());
 
-function initRepoSelection(repos) {
+// Persist the user's last Launch picks (CLI / folder / mode / cwd /
+// selected repos) so the form stays as they left it across reloads
+// and tab switches. localStorage is best-effort — any access failure
+// falls back silently.
+const LS_KEY = 'ccsm.launch-state';
+function loadLaunchState() {
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    if (!raw) return null;
+    const j = JSON.parse(raw);
+    if (j && typeof j === 'object') return j;
+  } catch {}
+  return null;
+}
+function saveLaunchState(s) {
+  try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch {}
+}
+
+function initRepoSelection(repos, override) {
+  if (override && Array.isArray(override)) {
+    // Only honour names that still exist in the user's repo list;
+    // anything else was deleted between sessions.
+    const valid = new Set(repos.map((r) => r.name));
+    selectedRepos.value = new Set(override.filter((n) => valid.has(n)));
+    return;
+  }
   const want = new Set(repos.filter((r) => r.defaultSelected).map((r) => r.name));
   selectedRepos.value = want;
 }
@@ -31,11 +56,15 @@ function LaunchHero() {
   const clis = cfg.clis || [];
   const repos = cfg.repos || [];
   const defaultCli = cfg.defaultCliId || clis[0]?.id || '';
+  const saved = loadLaunchState();
 
-  const [cliId, setCliId] = useState(defaultCli);
-  const [folderId, setFolderId] = useState('');
-  const [mode, setMode] = useState('auto'); // 'auto' = workspace + repos, 'cwd' = pick existing dir
-  const [cwd, setCwd] = useState(''); // only used when mode === 'cwd'
+  // Initial values pull from localStorage first (last-used picks),
+  // then fall back to config defaults. cliId is validated below in
+  // the useEffect once `clis` arrives.
+  const [cliId, setCliId] = useState(saved?.cliId || defaultCli);
+  const [folderId, setFolderId] = useState(saved?.folderId || '');
+  const [mode, setMode] = useState(saved?.mode === 'cwd' ? 'cwd' : 'auto');
+  const [cwd, setCwd] = useState(saved?.cwd || ''); // only used when mode === 'cwd'
   const [busy, setBusy] = useState(false);
   const [result, setResult] = useState('');
   const [openPicker, setOpenPicker] = useState(null); // 'cli' | 'folder' | 'workdir' | null
@@ -50,6 +79,22 @@ function LaunchHero() {
     }
   }, [defaultCli, clis.length]);
 
+  // Validate the persisted folder id against the live folders list
+  // — folders deleted between sessions snap back to "no folder".
+  useEffect(() => {
+    if (!folderId) return;
+    if (!folders.value.find((f) => f.id === folderId)) setFolderId('');
+  }, [folderId, folders.value.length]);
+
+  // Persist every change. JSON-stringifying a Set isn't useful, so
+  // we materialize selectedRepos to an array here.
+  useEffect(() => {
+    saveLaunchState({
+      cliId, folderId, mode, cwd,
+      repos: [...selectedRepos.value],
+    });
+  }, [cliId, folderId, mode, cwd, selectedRepos.value]);
+
   const folderDnd = useDragSort(
     folders.value.map((f) => f.id),
     async (nextIds) => {
@@ -59,7 +104,7 @@ function LaunchHero() {
   );
 
   const sig = repos.map((r) => r.name + ':' + r.defaultSelected).join('|');
-  useStateOnce(sig, () => initRepoSelection(repos));
+  useStateOnce(sig, () => initRepoSelection(repos, saved?.repos));
 
   const cli = clis.find((c) => c.id === cliId) || clis[0];
   const folder = folders.value.find((f) => f.id === folderId);

package/public/js/pages/RemotePage.js

@@ -104,6 +104,32 @@ function ProviderTile({ id, label, hint, icon, selected, disabled, onSelect }) {
     </button>`;
 }
 
+// Tiny inline row shown under the signed-in Microsoft Dev Tunnel
+// status. Displays the persisted (named) tunnel id ccsm reuses across
+// restarts so the public URL stays stable — and lets the user rotate
+// it on demand. Reset requires the tunnel to be stopped first; the
+// server-side route also enforces this.
+function DevtunnelTunnelIdRow({ tunnelId, running, onReset }) {
+  if (!tunnelId) {
+    return html`
+      <div class="tunnel-id-row is-empty">
+        <span class="tunnel-id-label">Tunnel id</span>
+        <span class="tunnel-id-value-empty">none yet · minted on next Start</span>
+      </div>`;
+  }
+  return html`
+    <div class="tunnel-id-row">
+      <span class="tunnel-id-label">Tunnel id</span>
+      <code class="tunnel-id-value" title="Stable public URL identifier · reused across restarts">${tunnelId}</code>
+      <button type="button" class="action subtle small tunnel-id-reset"
+              disabled=${running}
+              title=${running ? 'Stop the tunnel first' : 'Mint a fresh tunnel id (public URL will change)'}
+              onClick=${onReset}>
+        <${IconRecycle} /> Reset
+      </button>
+    </div>`;
+}
+
 function ProviderStatus({ id, info, onInstall, onLogin, loggingIn }) {
   if (!info) return html`<span class="provider-status-muted">probing…</span>`;
   if (!info.installed) {
@@ -261,9 +287,26 @@ function DevtunnelLoginPanel({ login, onCancel, onDismiss, onRetry }) {
 
 export function RemotePage() {
   clockTick.value; // re-tick fmtAgo "last seen" labels
-  const [status, setStatus] = useState(null);
-  const [provider, setProvider] = useState('cloudflared');
-  const [token, setTokenLocal] = useState('');
+  // Hydrate from a localStorage cache so the page renders the same
+  // shape it had at the end of the previous visit — provider tiles,
+  // signed-in state, tunnel id, share URL — instead of empty / placeholder
+  // chrome that fills in after the slow /api/tunnel/status round-trip
+  // (700ms+ on a cold probe). The cached snapshot is overwritten by
+  // refresh() the moment the live response lands.
+  const cachedStatus = (() => {
+    try {
+      const raw = localStorage.getItem('ccsm.remote-status-cache');
+      return raw ? JSON.parse(raw) : null;
+    } catch { return null; }
+  })();
+  const [status, setStatus] = useState(cachedStatus);
+  const [provider, setProvider] = useState(() => {
+    if (cachedStatus?.running && cachedStatus?.provider) return cachedStatus.provider;
+    if (cachedStatus?.providers?.devtunnel?.installed) return 'devtunnel';
+    if (cachedStatus?.providers?.cloudflared?.installed) return 'cloudflared';
+    return 'devtunnel';
+  });
+  const [token, setTokenLocal] = useState(cachedStatus?.token || '');
   const [busy, setBusy] = useState(false);
   const [deviceList, setDeviceList] = useState([]);
   const pollRef = useRef(null);
@@ -280,10 +323,17 @@ export function RemotePage() {
       setProvider((cur) => {
         if (s.running && s.provider) return s.provider;
         if (cur) return cur;
-        if (s.providers?.cloudflared?.installed) return 'cloudflared';
         if (s.providers?.devtunnel?.installed) return 'devtunnel';
-        return cur || 'cloudflared';
+        if (s.providers?.cloudflared?.installed) return 'cloudflared';
+        return cur || 'devtunnel';
       });
+      // Snapshot for the next mount. Skip the per-call `log` so the
+      // cache stays small.
+      try {
+        localStorage.setItem('ccsm.remote-status-cache', JSON.stringify({
+          ...s, log: undefined,
+        }));
+      } catch {}
     } catch (e) { setToast(`status load failed · ${e.message}`, 'error'); }
   }
 
@@ -400,6 +450,18 @@ export function RemotePage() {
     try { await api('POST', '/api/tunnel/devtunnel/login/dismiss'); refresh(); }
     catch (e) { setToast(`dismiss failed · ${e.message}`, 'error'); }
   }
+  async function onResetDevtunnelId() {
+    const ok = await ccsmConfirm(
+      `Mint a fresh tunnel id? The public URL changes — every approved remote device will need to re-register on the new URL. Any existing share links stop working.`,
+      { title: 'Reset Microsoft Dev Tunnel id', okLabel: 'Reset', danger: true },
+    );
+    if (!ok) return;
+    try {
+      await api('POST', '/api/tunnel/devtunnel/reset');
+      refresh();
+      setToast('Tunnel id reset · next Start mints a fresh one', 'ok');
+    } catch (e) { setToast(`reset failed · ${e.message}`, 'error'); }
+  }
 
   const running = status?.running;
   const url     = status?.url;
@@ -426,30 +488,21 @@ export function RemotePage() {
           <div class="field">
             <span class="label">Provider</span>
             <div class="provider-tile-row">
-              <${ProviderTile} id="cloudflared" label="Cloudflare Tunnel"
-                hint="Anonymous · no login"
-                icon=${html`<${IconCloudflareColor} size=${32} />`}
-                selected=${provider === 'cloudflared'}
-                disabled=${running}
-                onSelect=${setProvider} />
               <${ProviderTile} id="devtunnel" label="Microsoft Dev Tunnel"
                 hint="Requires sign-in"
                 icon=${html`<${IconMicrosoftColor} size=${32} />`}
                 selected=${provider === 'devtunnel'}
                 disabled=${running}
                 onSelect=${setProvider} />
+              <${ProviderTile} id="cloudflared" label="Cloudflare Tunnel"
+                hint="Anonymous · no login"
+                icon=${html`<${IconCloudflareColor} size=${32} />`}
+                selected=${provider === 'cloudflared'}
+                disabled=${running}
+                onSelect=${setProvider} />
             </div>
             ${running ? html`<span class="hint">Stop the tunnel to switch provider.</span>` : null}
           </div>
-          ${provider === 'cloudflared' ? html`
-            <div class="field">
-              <span class="label">Cloudflare Tunnel</span>
-              <div class="remote-status-line">
-                <${ProviderStatus} id="cloudflared" info=${cf}
-                  onInstall=${() => onInstall('cloudflared')} />
-              </div>
-            </div>
-          ` : null}
           ${provider === 'devtunnel' ? html`
             <div class="field">
               <span class="label">Microsoft Dev Tunnel</span>
@@ -466,6 +519,21 @@ export function RemotePage() {
                   onDismiss=${onLoginDismiss}
                   onRetry=${() => onLogin('devtunnel')} />
               ` : null}
+              ${dt?.loggedIn ? html`
+                <${DevtunnelTunnelIdRow}
+                  tunnelId=${status?.tunnelId}
+                  running=${running && status?.provider === 'devtunnel'}
+                  onReset=${onResetDevtunnelId} />
+              ` : null}
+            </div>
+          ` : null}
+          ${provider === 'cloudflared' ? html`
+            <div class="field">
+              <span class="label">Cloudflare Tunnel</span>
+              <div class="remote-status-line">
+                <${ProviderStatus} id="cloudflared" info=${cf}
+                  onInstall=${() => onInstall('cloudflared')} />
+              </div>
             </div>
           ` : null}
         </div>

package/public/js/util.js

@@ -22,3 +22,47 @@ export function displayTitle(label, fallback) {
 export function nowClock() {
   return new Date().toLocaleTimeString(undefined, { hour12: false });
 }
+
+// Shell-style argv tokenizer / formatter used by the CLI editor's
+// args / resumeIdArgs / newSessionIdArgs fields. Modeled on POSIX sh
+// word splitting + bash quoting (the rules every dev already has in
+// muscle memory) — not a full shell parser. Handles:
+//   bare token        -Model         → "-Model"
+//   double-quoted     "a b c"        → "a b c"
+//                                    \\ and \" are escapes inside ""; any
+//                                    other backslash is kept literal, so
+//                                    "C:\Users\foo" survives intact (bash
+//                                    rule, matters for Windows paths).
+//   single-quoted     'a b c'        → "a b c"   literal, no escapes
+//   mixed             -Foo "x y" 'z' → ["-Foo","x y","z"]
+// Anything malformed (unclosed quote, etc.) falls through to a bare
+// best-effort match so the user can keep typing without the field
+// nuking their input mid-type.
+export function parseArgs(input) {
+  const s = String(input || '');
+  const out = [];
+  const re = /'([^']*)'|"((?:[^"\\]|\\.)*)"|(\S+)/g;
+  let m;
+  while ((m = re.exec(s)) !== null) {
+    if (m[1] !== undefined)      out.push(m[1]);
+    else if (m[2] !== undefined) out.push(m[2].replace(/\\([\\"])/g, '$1'));
+    else                         out.push(m[3]);
+  }
+  return out;
+}
+
+// Inverse of parseArgs — used when re-populating the textarea from a
+// stored array. Bare-emit when the token has no shell-significant chars;
+// otherwise double-quote with \" and \\ escapes. Round-trip is stable
+// (parse(format(arr)) === arr) for any string array.
+export function formatArgs(arr) {
+  if (!Array.isArray(arr)) return '';
+  return arr.map((a) => {
+    const s = String(a ?? '');
+    if (s === '') return '""';
+    if (/[\s"'\\`$]/.test(s)) {
+      return '"' + s.replace(/([\\"])/g, '\\$1') + '"';
+    }
+    return s;
+  }).join(' ');
+}

package/server.js

@@ -1092,6 +1092,20 @@ app.post('/api/tunnel/devtunnel/login/dismiss', asyncH(async (_req, res) => {
   tunnel.clearDevtunnelLogin();
   res.json({ ok: true });
 }));
+// Wipe the persisted devtunnel tunnel id (and the remote tunnel
+// resource itself, best-effort) so the next /api/tunnel/start mints
+// a fresh one. Used by the Reset button in the Remote page when the
+// user wants to rotate the public URL. Tunnel must be stopped first
+// — refuse otherwise so we don't yank state out from under a live
+// `devtunnel host` child.
+app.post('/api/tunnel/devtunnel/reset', asyncH(async (_req, res) => {
+  const s = await tunnel.status();
+  if (s.running && s.provider === 'devtunnel') {
+    return res.status(409).json({ error: 'stop the tunnel before resetting its id' });
+  }
+  const r = await tunnel.resetDevtunnelTunnelId();
+  res.json({ ok: true, ...r, ...(await tunnel.status()) });
+}));
 
 // ---- devices ----
 //
@@ -1555,6 +1569,12 @@ function openInBrowser(url) {
   // a slow Import dialog cold-open. Fire in the background; the lib also
   // starts its own 15s refresh loop.
   try { localCliSessions.prewarmLivePids(['claude.exe']); } catch {}
+  // Prewarm tunnel provider probe. First /api/tunnel/status round-trip
+  // shells out to where.exe / --version / devtunnel user show — ~700ms
+  // of synchronous work that the user otherwise waits on the moment
+  // they open the Remote tab. Fire in the background here so the cache
+  // is warm by the time anyone clicks.
+  try { tunnel.probe(true).catch(() => {}); } catch {}
 
   if (webTerminal.available) {
     let WebSocketServer;