@bakapiano/ccsm 0.19.3 → 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.3",
+  "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/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/TerminalView.js

@@ -137,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
@@ -163,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) => {
@@ -202,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
@@ -217,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 {}
           });
         }
@@ -377,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;

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/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;