@bakapiano/ccsm 0.21.4 → 0.22.0

package/lib/config.js

@@ -80,12 +80,24 @@ const DEFAULTS = {
   // Launch button when the user doesn't override.
   clis: DEFAULT_CLIS,
   defaultCliId: 'claude',
+  // External editor command for the "Open in editor" session action.
+  // Spawned as `<editor> "<cwd>"`; default `code` = VS Code (whose Source
+  // Control panel doubles as the review-changes view once the folder's
+  // open). Point it at `cursor`, `code-insiders`, `subl`, … as desired.
+  editor: 'code',
   // 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 },
+  // Provider-agnostic tunnel prefs. When autoStart is on, the backend
+  // brings the tunnel up during its own startup (server.js boot hook) —
+  // NOT an OS-level autostart. token is persisted so share URLs survive
+  // a backend restart; it's written ONLY while autoStart is on and is
+  // stripped from /api/config so remote devices can't read it. provider
+  // is 'devtunnel' | 'cloudflared'.
+  tunnel: { autoStart: false, provider: null, token: null },
 };
 
 function ensureDataDir() {
@@ -117,9 +129,10 @@ 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.
+  // Deep-merge devtunnel + tunnel so a partial save (just .tunnelId, or
+  // just .autoStart) doesn't wipe sibling keys.
   out.devtunnel = { ...DEFAULTS.devtunnel, ...(partial?.devtunnel || {}) };
+  out.tunnel = { ...DEFAULTS.tunnel, ...(partial?.tunnel || {}) };
   // Drop v0.x keys that the new architecture doesn't use.
   delete out.terminal;
   delete out.commandShell;
@@ -135,6 +148,7 @@ function mergeWithDefaults(partial) {
 
   if (!Array.isArray(out.repos)) out.repos = DEFAULTS.repos;
   if (!Array.isArray(out.clis)) out.clis = [];
+  if (typeof out.editor !== 'string') out.editor = DEFAULTS.editor;
   // Always inject builtin CLIs (claude, codex) if they're missing or were
   // deleted from a saved config — they're managed by ccsm, the user can
   // tweak args/shell but can't remove them. Preserves any user
@@ -231,7 +245,19 @@ async function saveConfig(partial) {
   ensureDataDir();
   return withFileLock(CONFIG_PATH, async () => {
     const current = await loadConfig();
-    const next = mergeWithDefaults({ ...current, ...partial });
+    // mergeWithDefaults re-merges nested objects (devtunnel, tunnel)
+    // against DEFAULTS only, so a partial save like
+    // saveConfig({ tunnel: { autoStart: true } }) would reset the
+    // sibling token/provider back to defaults. Pre-merge the nested
+    // blocks against `current` so a partial update preserves siblings.
+    const merged = { ...current, ...partial };
+    if (partial && partial.devtunnel) {
+      merged.devtunnel = { ...current.devtunnel, ...partial.devtunnel };
+    }
+    if (partial && partial.tunnel) {
+      merged.tunnel = { ...current.tunnel, ...partial.tunnel };
+    }
+    const next = mergeWithDefaults(merged);
     await atomicWriteJson(CONFIG_PATH, next);
     return next;
   });

package/lib/tunnel.js

@@ -80,6 +80,12 @@ const PROVIDERS = {
 // In-memory state. Single tunnel at a time — switching providers tears
 // down the old one first.
 let current = null;   // { provider, child, url, startedAt, log: string[] }
+let starting = false; // True while start() is mid-spawn. devtunnel does
+                      // ~10-20s of async create/configure BEFORE `current`
+                      // is assigned, so the `if (current)` guard alone
+                      // can't stop a second concurrent start() (boot
+                      // auto-start racing a manual click) from spawning a
+                      // duplicate child. This flag closes that window.
 let token = null;     // Remote-access bearer token. Null = no remote
                       // access enforced. Set via setToken() or by the
                       // start() call. Server.js middleware reads via
@@ -319,6 +325,10 @@ function probeCachedSWR() {
 }
 
 async function status() {
+  // One config read serves both the persisted tunnelId and the
+  // auto-start prefs the Remote page's toggle reflects.
+  let cfg = null;
+  try { cfg = await loadConfig(); } catch { /* fall back to nulls below */ }
   return {
     providers: probeCachedSWR(),
     running: !!current,
@@ -328,10 +338,11 @@ 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; }
-    })()),
+    tunnelId: current?.tunnelId || cfg?.devtunnel?.tunnelId || null,
+    // Persisted auto-start prefs — surfaced so the toggle renders the
+    // right state across reloads (the page already polls /status).
+    autoStart: cfg?.tunnel?.autoStart ?? false,
+    autoStartProvider: cfg?.tunnel?.provider ?? 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
@@ -487,36 +498,51 @@ function clearDevtunnelLogin() {
 // installed, the provider is unknown, or another tunnel is running.
 async function start({ provider, port }) {
   if (current) throw new Error('tunnel already running');
+  if (starting) throw new Error('tunnel is already starting');
   const p = PROVIDERS[provider];
   if (!p) throw new Error(`unknown provider: ${provider}`);
-  const exe = await findBinary(provider);
-  if (!exe) throw new Error(`${p.label} is not installed`);
-  if (provider === 'devtunnel') {
-    const { loggedIn } = await checkDevtunnelLogin(exe);
-    if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
-  }
 
-  // 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);
+  // Hold the `starting` flag across the async setup below. devtunnel's
+  // create/configure can take 10-20s, all of it BEFORE `current` is
+  // assigned — without this flag a second start() (boot auto-start vs.
+  // a manual click) would slip past the `if (current)` guard and spawn
+  // a duplicate child. Cleared the moment `current` is set, after which
+  // the `if (current)` guard alone is sufficient.
+  starting = true;
+  let entry;
+  let child;
+  try {
+    const exe = await findBinary(provider);
+    if (!exe) throw new Error(`${p.label} is not installed`);
+    if (provider === 'devtunnel') {
+      const { loggedIn } = await checkDevtunnelLogin(exe);
+      if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
     }
-  }
 
-  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: [], tunnelId };
-  current = entry;
+    // 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 });
+    child = spawn(exe, args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true });
+    entry = { provider, child, url: null, startedAt: Date.now(), log: [], tunnelId };
+    current = entry;
+  } finally {
+    starting = false;
+  }
 
   const pushLog = (line) => {
     entry.log.push(line);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "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

@@ -349,12 +349,17 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  /* Follow the terminal foreground so the dots read on both the light
+     (#f0f0f0) and dark (#252526) tab strip. The old hardcoded #fff was
+     invisible on the light strip. */
+  color: var(--term-on);
   cursor: pointer;
   flex-shrink: 0;
   transition: background-color .12s, color .12s;
 }
-.session-menu-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
+/* Neutral-grey hover tint works on either strip colour (darkens the light
+   one, lightens the dark one) without needing a per-theme override. */
+.session-menu-btn:hover { background: rgba(128, 128, 128, 0.2); color: var(--term-on); }
 .session-menu-btn svg { width: 16px; height: 16px; }
 
 .session-menu {

package/public/css/widgets.css

@@ -1838,6 +1838,32 @@
    Running: a status banner (state · provider · uptime · stop link)
    followed by a copyable share URL block and an optional collapsed
    CLI log. */
+.tunnel-autostart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: var(--s-4);
+}
+.tunnel-autostart-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ink-mid);
+}
+.tunnel-autostart-row input {
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.tunnel-autostart-label {
+  user-select: none;
+}
+.tunnel-autostart-hint {
+  /* indent under the checkbox so it lines up with the label text */
+  padding-left: 26px;
+}
+
 .tunnel-hero {
   display: flex;
   align-items: center;

package/public/js/api.js

@@ -259,6 +259,13 @@ export async function deleteSession(sessionId) {
   await loadSessions();
 }
 
+// Open the session's working directory in the user's configured editor
+// (Settings → Editor, default `code`). Returns { editor, cwd } so the
+// caller can surface which editor it launched.
+export function openSessionInEditor(sessionId) {
+  return api('POST', `/api/sessions/${sessionId}/open-editor`);
+}
+
 // Per-session in-flight resume promise. Sidebar.onClick and the
 // SessionsPage auto-resume effect can both fire for the same exited
 // session in the same tick (clicking an exited row mounts SessionsPage

package/public/js/pages/ConfigurePage.js

@@ -154,7 +154,7 @@ export function ConfigurePage() {
 
   useEffect(() => {
     if (cfg && !general) {
-      setGeneral({ workDir: cfg.workDir });
+      setGeneral({ workDir: cfg.workDir, editor: cfg.editor });
     }
   }, [cfg]);
 
@@ -167,6 +167,7 @@ export function ConfigurePage() {
       const saved = await api('PUT', '/api/config', {
         ...cfg,
         workDir: (merged.workDir || '').trim(),
+        editor: (merged.editor || '').trim(),
       });
       config.value = saved;
       setToast('saved');
@@ -198,6 +199,13 @@ export function ConfigurePage() {
           <span class="label">Backend</span>
           <${RestartButton} />
         </div>
+        <label class="field">
+          <span class="label">Editor</span>
+          <input type="text" class="mono" value=${general.editor || ''}
+                 placeholder="code"
+                 onChange=${(e) => saveGeneral({ editor: e.target.value })} />
+          <span class="hint">Command for a session's “Open in editor” action. Default <code>code</code> (VS Code). Try <code>cursor</code>, <code>code-insiders</code>, …</span>
+        </label>
       </div>
     </${Section}>
 

package/public/js/pages/LaunchPage.js

@@ -38,16 +38,29 @@ 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;
+function initRepoSelection(repos, saved) {
+  const valid = new Set(repos.map((r) => r.name));
+  const sel = new Set();
+  // Start from the persisted selection (last-used picks), keeping only
+  // repos that still exist.
+  if (saved && Array.isArray(saved.repos)) {
+    for (const n of saved.repos) if (valid.has(n)) sel.add(n);
   }
-  const want = new Set(repos.filter((r) => r.defaultSelected).map((r) => r.name));
-  selectedRepos.value = want;
+  // Auto-check any repo whose "pre-select on launch" default is newly
+  // active — i.e. it wasn't a default the last time we saved. This
+  // covers both a brand-new default repo and an existing repo the user
+  // just flipped to default in Configure. A default the user previously
+  // unchecked stays unchecked (it's an old default, already in
+  // knownDefaults). With no saved knownDefaults (fresh user / old
+  // state), every default applies.
+  const knownDefaults = saved && Array.isArray(saved.knownDefaults)
+    ? new Set(saved.knownDefaults) : null;
+  for (const r of repos) {
+    if (r.defaultSelected && (knownDefaults === null || !knownDefaults.has(r.name))) {
+      sel.add(r.name);
+    }
+  }
+  selectedRepos.value = sel;
 }
 
 function LaunchHero() {
@@ -86,17 +99,21 @@ function LaunchHero() {
   }, [folderId, folders.value.length]);
 
   // Persist every change. JSON-stringifying a Set isn't useful, so
-  // we materialize selectedRepos to an array here.
+  // we materialize selectedRepos to an array here. knownDefaults records
+  // which repos were marked "pre-select" at save time so
+  // initRepoSelection can tell a newly-flipped default apart from one the
+  // user deliberately unchecked.
   useEffect(() => {
     saveLaunchState({
       cliId, folderId, mode, cwd,
       repos: [...selectedRepos.value],
+      knownDefaults: repos.filter((r) => r.defaultSelected).map((r) => r.name),
     });
   }, [cliId, folderId, mode, cwd, selectedRepos.value]);
 
 
   const sig = repos.map((r) => r.name + ':' + r.defaultSelected).join('|');
-  useStateOnce(sig, () => initRepoSelection(repos, saved?.repos));
+  useStateOnce(sig, () => initRepoSelection(repos, saved));
 
   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

@@ -423,11 +423,35 @@ export function RemotePage() {
     const fresh = genToken();
     setTokenLocal(fresh);
     try {
-      const s = await api('POST', '/api/tunnel/token', { token: fresh });
+      // When auto-start is on the token must be PERSISTED, else the
+      // rotated token is lost on the next backend restart and every
+      // share URL built from it 401s. Route through the persisting
+      // endpoint in that case; otherwise the in-memory-only token
+      // endpoint is enough.
+      const s = status?.autoStart
+        ? await api('POST', '/api/tunnel/autostart', { autoStart: true, provider, token: fresh })
+        : await api('POST', '/api/tunnel/token', { token: fresh });
       setStatus(s);
       setToast('New token in effect', 'ok');
     } catch (e) { setToast(`token save failed · ${e.message}`, 'error'); }
   }
+  // Persist (or clear) the auto-start preference. On enable with no
+  // token yet, mint one first so the backend has something to reuse on
+  // its next startup. Approved devices keep working regardless of the
+  // token — it only gates NEW device registration.
+  async function onToggleAutoStart(next) {
+    setBusy(true);
+    try {
+      let tok = token;
+      if (next && (!tok || tok.length < 8)) { tok = genToken(); setTokenLocal(tok); }
+      const s = await api('POST', '/api/tunnel/autostart',
+        next ? { autoStart: true, provider, token: tok } : { autoStart: false });
+      setStatus(s);
+      setToast(next ? 'Auto-start on · tunnel comes up when ccsm starts' : 'Auto-start off', 'ok');
+    } catch (e) {
+      setToast(`auto-start ${next ? 'enable' : 'disable'} failed · ${e.message}`, 'error');
+    } finally { setBusy(false); }
+  }
   async function onInstall(p) {
     const ok = await ccsmConfirm(`Install ${p} via winget? Runs in the background — refresh after ~30s.`, {
       title: 'Install tunnel provider', okLabel: 'Install',
@@ -553,6 +577,18 @@ export function RemotePage() {
         meta=${running
           ? html`Provider <code>${status?.provider}</code> · started ${new Date(status.startedAt).toLocaleTimeString()}`
           : html`Not running.`}>
+        <div class="tunnel-autostart">
+          <label class="tunnel-autostart-row">
+            <input type="checkbox" checked=${!!status?.autoStart} disabled=${busy}
+                   onChange=${(e) => onToggleAutoStart(e.target.checked)} />
+            <span class="tunnel-autostart-label">Start this tunnel automatically when ccsm starts</span>
+          </label>
+          ${status?.autoStart && provider === 'cloudflared' ? html`
+            <span class="hint tunnel-autostart-hint">
+              Cloudflare quick tunnels get a new URL each launch — the share URL will change on
+              restart and approved devices must re-register. Use Microsoft Dev Tunnel for a stable URL.
+            </span>` : null}
+        </div>
         ${!running ? html`
           <div class="tunnel-hero">
             <div class="tunnel-hero-body">

package/public/js/pages/SessionsPage.js

@@ -7,13 +7,13 @@
 import { html } from '../html.js';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { activeSessionId, sessions, config, selectTab, selectSession, clockTick } from '../state.js';
-import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle } from '../api.js';
+import { resumeSession, clearResumeFailure, deleteSession, setSessionTitle, openSessionInEditor } from '../api.js';
 import { setToast } from '../toast.js';
 import { ccsmConfirm, ccsmPrompt } from '../dialog.js';
 import { TerminalView } from '../components/TerminalView.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { Popover } from '../components/Popover.js';
-import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal } from '../icons.js';
+import { IconMoreVert, IconPencil, IconClose, IconPlus, IconForCliType, IconTerminal, IconExternal } from '../icons.js';
 import { fmtAgo } from '../util.js';
 
 function SessionTabs({ activeId, onActivate, onNew, kebab }) {
@@ -51,7 +51,7 @@ function SessionTabs({ activeId, onActivate, onNew, kebab }) {
     </div>`;
 }
 
-function SessionMenu({ session, onRename, onDelete }) {
+function SessionMenu({ session, onRename, onDelete, onOpenEditor }) {
   const [open, setOpen] = useState(false);
   const anchor = useRef(null);
   return html`
@@ -61,9 +61,12 @@ function SessionMenu({ session, onRename, onDelete }) {
       <${IconMoreVert} />
     </button>
     ${open ? html`
-      <${Popover} anchor=${anchor} align="right" width=${180}
+      <${Popover} anchor=${anchor} align="right" width=${200}
                   onClose=${() => setOpen(false)}>
         <div class="session-menu">
+          <button class="session-menu-item" onClick=${() => { setOpen(false); onOpenEditor(); }}>
+            <${IconExternal} /> Open in editor
+          </button>
           <button class="session-menu-item" onClick=${() => { setOpen(false); onRename(); }}>
             <${IconPencil} /> Rename
           </button>
@@ -129,6 +132,12 @@ export function SessionsPage() {
       activeSessionId.value = null;
     } catch (e) { setToast(e.message, 'error'); }
   };
+  const onOpenEditor = async () => {
+    try {
+      const r = await openSessionInEditor(session.id);
+      setToast(`Opening in ${r?.editor || 'editor'}…`);
+    } catch (e) { setToast(e.message, 'error'); }
+  };
 
   return html`
     <${PageTitleBar} title=${html`
@@ -146,7 +155,7 @@ export function SessionsPage() {
       activeId=${session.id}
       onActivate=${(sid) => selectSession(sid)}
       onNew=${() => selectTab('launch')}
-      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} />`} />
+      kebab=${html`<${SessionMenu} session=${session} onRename=${onRename} onDelete=${onDelete} onOpenEditor=${onOpenEditor} />`} />
     <div class="session-pane">
       <div class="session-pane-body">
         ${running

package/server.js

@@ -456,13 +456,27 @@ function decorateConfigWithProbes(cfg) {
   };
 }
 
+// The tunnel + devtunnel config blocks are managed exclusively through
+// /api/tunnel/* (host-only) — they hold the persisted remote-access
+// token and the named tunnelId. Strip them from /api/config so (a) the
+// plaintext token never reaches an approved remote device reading config
+// and (b) the frontend's whole-object config round-trip on save can't
+// clobber tunnelId/token with a stale snapshot.
+function stripTunnelKeys(cfg) {
+  const rest = { ...cfg };
+  delete rest.tunnel;
+  delete rest.devtunnel;
+  return rest;
+}
 app.get('/api/config', asyncH(async (_req, res) => {
-  res.json(decorateConfigWithProbes(await loadConfig()));
+  res.json(decorateConfigWithProbes(stripTunnelKeys(await loadConfig())));
 }));
 
 app.put('/api/config', asyncH(async (req, res) => {
-  const cfg = await saveConfig(req.body || {});
-  res.json(decorateConfigWithProbes(cfg));
+  const body = { ...(req.body || {}) };
+  delete body.tunnel;
+  delete body.devtunnel;
+  res.json(decorateConfigWithProbes(stripTunnelKeys(await saveConfig(body))));
 }));
 
 // ---- CLI probe / test ----
@@ -633,6 +647,35 @@ app.delete('/api/sessions/:id', asyncH(async (req, res) => {
   res.json({ removed });
 }));
 
+// Open a session's working directory in the user's configured editor
+// (config.editor, default `code` = VS Code, whose Source Control panel is
+// also the review-changes view once the folder's open). Spawned detached
+// so it outlives ccsm; shell:true so Windows resolves `code.cmd` via
+// PATHEXT and a command like `code --reuse-window` parses, with the cwd
+// quoted so paths with spaces survive the shell. spawnEnv() merges the
+// user-scope PATH so `code`/`cursor` are found even when the inherited
+// env lacks them.
+app.post('/api/sessions/:id/open-editor', asyncH(async (req, res) => {
+  const record = await persistedSessions.get(req.params.id);
+  if (!record) return res.status(404).json({ error: 'session not found' });
+  const cfg = await loadConfig();
+  const editor = (cfg.editor || '').trim() || 'code';
+  const { spawn } = require('node:child_process');
+  try {
+    const child = spawn(editor, [`"${record.cwd}"`], {
+      detached: true, stdio: 'ignore', shell: true,
+      env: spawnEnv(), windowsHide: true,
+    });
+    // A bad editor command fails the shell async (after we've responded);
+    // log it so it's diagnosable, but the happy path needs no await.
+    child.on('error', (e) => console.warn(`[ccsm] open-editor "${editor}" failed:`, e.message));
+    child.unref();
+    res.json({ ok: true, editor, cwd: record.cwd });
+  } catch (e) {
+    res.status(500).json({ error: `failed to launch ${editor}: ${e.message}` });
+  }
+}));
+
 // Reorder sessions within a folder. Body: { folderId, ids } where ids
 // is the new sequence of session ids in their final display order
 // inside that folder. Each session gets `folderId` + `order: 0..N-1`
@@ -1133,6 +1176,28 @@ app.post('/api/tunnel/token', asyncH(async (req, res) => {
   tunnel.setToken(t);
   res.json(await tunnel.status());
 }));
+// Persist auto-start prefs. When ON, the backend brings this tunnel up
+// during its own startup (the boot hook in the listen IIFE below) using
+// the persisted token, so share URLs survive a backend restart. The
+// token is written to config ONLY while auto-start is on; turning it off
+// wipes the persisted token from disk. setToken keeps the in-memory copy
+// in lockstep so the share URL the page renders stays valid immediately.
+app.post('/api/tunnel/autostart', asyncH(async (req, res) => {
+  const { autoStart, provider, token } = req.body || {};
+  if (autoStart) {
+    if (!token || String(token).length < 8) {
+      return res.status(400).json({ error: 'token required (≥ 8 chars)' });
+    }
+    if (!['devtunnel', 'cloudflared'].includes(provider)) {
+      return res.status(400).json({ error: 'valid provider required' });
+    }
+    tunnel.setToken(token);
+    await saveConfig({ tunnel: { autoStart: true, provider, token } });
+  } else {
+    await saveConfig({ tunnel: { autoStart: false, provider: null, token: null } });
+  }
+  res.json(await tunnel.status());
+}));
 app.post('/api/tunnel/install', asyncH(async (req, res) => {
   const { provider } = req.body || {};
   try {
@@ -1646,6 +1711,20 @@ function openInBrowser(url) {
   // is warm by the time anyone clicks.
   try { tunnel.probe(true).catch(() => {}); } catch {}
 
+  // Auto-start the tunnel if the user enabled it on the Remote page.
+  // This is the BACKEND PROCESS bringing its own tunnel up on startup —
+  // not an OS-level autostart (no registry / scheduled task). Reuses the
+  // persisted token so share URLs stay valid across restarts. Strictly
+  // fire-and-forget: a failure here (devtunnel not signed in, provider
+  // uninstalled, etc.) must never crash boot — it just logs and the user
+  // can start manually from the Remote page.
+  if (cfg.tunnel?.autoStart && cfg.tunnel?.token && cfg.tunnel?.provider) {
+    tunnel.setToken(cfg.tunnel.token);
+    tunnel.start({ provider: cfg.tunnel.provider, port: currentPort })
+      .then((s) => console.log(`[ccsm] tunnel auto-started · ${cfg.tunnel.provider} · ${s.url || 'URL pending'}`))
+      .catch((e) => console.warn(`[ccsm] tunnel auto-start failed · ${e.message}`));
+  }
+
   if (webTerminal.available) {
     let WebSocketServer;
     try { ({ WebSocketServer } = require('ws')); } catch {}