@bakapiano/ccsm 0.19.3 → 0.20.0

package/public/favicon.svg

@@ -1,6 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- The terminal-window body lifts on a dark browser/OS chrome so the
+       near-black mark doesn't vanish in the tab strip. Mirrors the in-app
+       BrandMark's [data-theme="dark"] .brand-rect treatment. -->
+  <style>
+    .body { fill: #1a1815; }
+    @media (prefers-color-scheme: dark) { .body { fill: #38342f; } }
+  </style>
   <!-- terminal window body -->
-  <rect x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
+  <rect class="body" x="2" y="4" width="28" height="24" rx="3"/>
   <!-- title bar divider -->
   <line x1="2" y1="10" x2="30" y2="10" stroke="#faf9f5" stroke-width="0.6" opacity="0.45"/>
   <!-- traffic-light dots -->

package/public/index.html

@@ -27,37 +27,69 @@
          redirect to ../ on backend upgrade would fall out of scope and
          the OS would re-show an address bar. -->
     <link rel="manifest" href="../manifest.webmanifest" />
-    <!-- Apply accent color BEFORE stylesheets/paint to avoid a flash
-         of the default warm-cream tokens.css bg. Mirrors
-         applyAccentCssVars() in state.js. Falls back to the Ocean
-         default (#2f6fa3) when no accent is saved so first-time
-         visitors also see the correct bg from the first frame. -->
+    <!-- Apply theme (accent + light/dark) BEFORE stylesheets/paint to
+         avoid a flash of the default light tokens.css bg. Mirrors
+         applyTheme()/applyAccentCssVars() in state.js — keep the two in
+         sync. Resolves 'system' against the OS, sets data-theme so the
+         [data-theme="dark"] CSS overrides apply from the first frame, and
+         derives the accent-tinted palette for the chosen ground. -->
     <script>
       (function () {
         try {
           var hex = localStorage.getItem('ccsm.accent');
           if (!/^#[0-9a-fA-F]{6}$/.test(hex || '')) hex = '#2f6fa3';
+          var mode = localStorage.getItem('ccsm.theme');
+          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+          var dark = mode === 'dark' || (mode === 'system'
+            && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+
           var n = parseInt(hex.slice(1), 16);
-          var r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+          var A = { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
           var toHex = function (v) { v = Math.max(0, Math.min(255, Math.round(v))); var s = v.toString(16); return s.length < 2 ? '0' + s : s; };
-          var mix = function (t) { return '#' + toHex(r * t + 255 * (1 - t)) + toHex(g * t + 255 * (1 - t)) + toHex(b * t + 255 * (1 - t)); };
-          var darken = function (a) { return '#' + toHex(r * (1 - a)) + toHex(g * (1 - a)) + toHex(b * (1 - a)); };
-          var bg = mix(0.04);
+          var rgb = function (c) { return '#' + toHex(c.r) + toHex(c.g) + toHex(c.b); };
+          var lerp = function (c1, c2, t) { return { r: c1.r + (c2.r - c1.r) * t, g: c1.g + (c2.g - c1.g) * t, b: c1.b + (c2.b - c1.b) * t }; };
+          var WHITE = { r: 255, g: 255, b: 255 }, BLACK = { r: 0, g: 0, b: 0 };
+          var DARK_BASE = { r: 0x18, g: 0x16, b: 0x12 }, LIGHT_INK = { r: 0xec, g: 0xe7, b: 0xda };
+
           var root = document.documentElement.style;
-          root.setProperty('--accent', hex);
-          root.setProperty('--accent-deep', darken(0.2));
-          root.setProperty('--accent-soft',   'rgba(' + r + ',' + g + ',' + b + ',0.10)');
-          root.setProperty('--accent-softer', 'rgba(' + r + ',' + g + ',' + b + ',0.04)');
-          root.setProperty('--bg', bg);
-          root.setProperty('--sidebar-bg', bg);
-          root.setProperty('--sidebar-hover', mix(0.10));
-          root.setProperty('--sidebar-active', mix(0.15));
-          root.setProperty('--border', mix(0.15));
-          root.setProperty('--border-soft', mix(0.12));
-          root.setProperty('--border-strong', mix(0.25));
-          root.setProperty('--ui-bg', mix(0.10));
+          var set = function (o) { for (var k in o) root.setProperty(k, o[k]); };
+          var vars;
+          if (dark) {
+            var bg = lerp(DARK_BASE, A, 0.06);
+            var lift = function (t) { return rgb(lerp(bg, LIGHT_INK, t)); };
+            vars = {
+              '--accent': hex,
+              '--accent-deep': rgb(lerp(A, LIGHT_INK, 0.18)),
+              '--accent-soft': 'rgba(' + A.r + ',' + A.g + ',' + A.b + ',0.18)',
+              '--accent-softer': 'rgba(' + A.r + ',' + A.g + ',' + A.b + ',0.07)',
+              '--bg': rgb(bg), '--bg-elev': lift(0.05), '--sidebar-bg': rgb(bg),
+              '--sidebar-hover': lift(0.09), '--sidebar-active': lift(0.15),
+              '--border': lift(0.14), '--border-soft': lift(0.09), '--border-strong': lift(0.24),
+              '--ui-bg': lift(0.05), '--ui-border': lift(0.16), '--ui-border-soft': lift(0.10),
+              '--ink': rgb(LIGHT_INK),
+              '--ink-mid': rgb(lerp(LIGHT_INK, DARK_BASE, 0.28)),
+              '--ink-muted': rgb(lerp(LIGHT_INK, DARK_BASE, 0.45)),
+              '--ink-faint': rgb(lerp(LIGHT_INK, DARK_BASE, 0.60)),
+            };
+          } else {
+            var mix = function (t) { return rgb(lerp(WHITE, A, t)); };
+            vars = {
+              '--accent': hex,
+              '--accent-deep': rgb(lerp(A, BLACK, 0.2)),
+              '--accent-soft': 'rgba(' + A.r + ',' + A.g + ',' + A.b + ',0.10)',
+              '--accent-softer': 'rgba(' + A.r + ',' + A.g + ',' + A.b + ',0.04)',
+              '--bg': mix(0.04), '--bg-elev': '#ffffff', '--sidebar-bg': mix(0.04),
+              '--sidebar-hover': mix(0.10), '--sidebar-active': mix(0.15),
+              '--border': mix(0.15), '--border-soft': mix(0.12), '--border-strong': mix(0.25),
+              '--ui-bg': mix(0.10), '--ui-border': '#d8d4c6', '--ui-border-soft': '#e6e2d4',
+              '--ink': '#1a1815', '--ink-mid': '#534e44', '--ink-muted': '#8a8475', '--ink-faint': '#b5af9d',
+            };
+          }
+          document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+          document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
+          set(vars);
           var meta = document.querySelector('meta[name="theme-color"]');
-          if (meta) meta.setAttribute('content', bg);
+          if (meta) meta.setAttribute('content', vars['--bg']);
         } catch (_) {}
       })();
     </script>
@@ -80,6 +112,8 @@
     <link rel="stylesheet" href="./css/terminals.css" />
     <link rel="stylesheet" href="./css/wco.css" />
     <link rel="stylesheet" href="./css/responsive.css" />
+    <!-- Loaded last so its [data-theme="dark"] rules win the cascade. -->
+    <link rel="stylesheet" href="./css/dark.css" />
 
     <script type="importmap">
       {

package/public/js/components/TerminalView.js

@@ -11,29 +11,50 @@ 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 { isDarkTheme, themeMode } from '../state.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 +
-// prompt with hardcoded dark backgrounds — a light terminal makes those
-// regions look like black blocks). Cursor uses the favorite-star gold so
-// it pops against the ink without dragging brand orange back in.
-const THEME = {
-  background: '#1a1815',
-  foreground: '#e8e3d5',
-  cursor:     '#e3b341',
-  cursorAccent: '#1a1815',
-  selectionBackground: '#3a3530',
-  black:   '#1a1815', brightBlack:   '#534e44',
-  red:     '#e07b6e', brightRed:     '#f0a098',
-  green:   '#7fb670', brightGreen:   '#a0d28f',
-  yellow:  '#e3b341', brightYellow:  '#f0c860',
-  blue:    '#7d9fc4', brightBlue:    '#9bb8d8',
-  magenta: '#c08fd0', brightMagenta: '#d8aae2',
-  cyan:    '#6fb0b0', brightCyan:    '#90c8c8',
-  white:   '#e8e3d5', brightWhite:   '#faf9f5',
+// Dark xterm theme — VSCode's Dark+ terminal palette, verbatim (see
+// microsoft/vscode src/.../terminal/common/terminalColorRegistry.ts).
+// #1e1e1e ground, #ccc ink, the standard saturated ANSI set.
+const THEME_DARK = {
+  background: '#1e1e1e',
+  foreground: '#cccccc',
+  cursor:     '#aeafad',
+  cursorAccent: '#1e1e1e',
+  selectionBackground: '#264f78',
+  black:   '#000000', brightBlack:   '#666666',
+  red:     '#cd3131', brightRed:     '#f14c4c',
+  green:   '#0dbc79', brightGreen:   '#23d18b',
+  yellow:  '#e5e510', brightYellow:  '#f5f543',
+  blue:    '#2472c8', brightBlue:    '#3b8eea',
+  magenta: '#bc3fbc', brightMagenta: '#d670d6',
+  cyan:    '#11a8cd', brightCyan:    '#29b8db',
+  white:   '#e5e5e5', brightWhite:   '#e5e5e5',
 };
 
+// Light xterm theme — VSCode's Light+ terminal palette, verbatim (see
+// microsoft/vscode src/.../terminal/common/terminalColorRegistry.ts). Pure
+// white ground, #333 ink, the classic saturated ANSI set tuned for legible
+// contrast on white. The surrounding chrome (terminals.css --term-* light
+// defaults) follows the same neutral light grays so it reads as one panel.
+const THEME_LIGHT = {
+  background: '#ffffff',
+  foreground: '#333333',
+  cursor:     '#000000',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#add6ff',
+  black:   '#000000', brightBlack:   '#666666',
+  red:     '#cd3131', brightRed:     '#cd3131',
+  green:   '#107c10', brightGreen:   '#14ce14',
+  yellow:  '#949800', brightYellow:  '#b5ba00',
+  blue:    '#0451a5', brightBlue:    '#0451a5',
+  magenta: '#bc05bc', brightMagenta: '#bc05bc',
+  cyan:    '#0598bc', brightCyan:    '#0598bc',
+  white:   '#555555', brightWhite:   '#a5a5a5',
+};
+const themeFor = (dark) => (dark ? THEME_DARK : THEME_LIGHT);
+
 export function TerminalView({ terminalId, cliType }) {
   const hostRef = useRef(null);
   const termRef = useRef(null);
@@ -45,6 +66,11 @@ export function TerminalView({ terminalId, cliType }) {
   // currently holds the session.
   const [displaced, setDisplaced] = useState(false);
   const [reattachNonce, setReattach] = useState(0);
+  // Subscribe to the theme signal so a Settings toggle re-renders us and
+  // the theme-sync effect below re-runs. Holds the xterm theme currently
+  // applied so the IME handlers can re-issue it with a transparent cursor.
+  const mode = themeMode.value;
+  const themeRef = useRef(themeFor(isDarkTheme()));
 
   // Raw escape-sequence injector for the mobile key bar. Reads wsRef at
   // call time so it stays valid across reattaches without re-binding.
@@ -53,6 +79,24 @@ export function TerminalView({ terminalId, cliType }) {
     if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
   };
 
+  // Swap the xterm canvas palette when the resolved theme flips — both on
+  // an explicit Settings toggle (mode dep) and on an OS change while in
+  // 'system' mode (matchMedia listener). No remount: xterm re-rasterizes
+  // its glyph atlas from the new options.theme in place.
+  useEffect(() => {
+    const apply = () => {
+      const term = termRef.current;
+      if (!term) return;
+      const theme = themeFor(isDarkTheme());
+      themeRef.current = theme;
+      try { term.options.theme = theme; } catch {}
+    };
+    apply();
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    mq.addEventListener('change', apply);
+    return () => mq.removeEventListener('change', apply);
+  }, [mode, reattachNonce]);
+
   useEffect(() => {
     if (!terminalId || !hostRef.current) return;
 
@@ -63,6 +107,8 @@ export function TerminalView({ terminalId, cliType }) {
     // next mount (rare; users typically don't rotate mid-session).
     const isMobile = window.matchMedia('(max-width: 640px)').matches;
     const baseFontSize = isMobile ? 11 : 13;
+    const initialTheme = themeFor(isDarkTheme());
+    themeRef.current = initialTheme;
     const term = new Terminal({
       fontFamily: '"Cascadia Mono", "Geist Mono", "JetBrains Mono", Consolas, monospace',
       fontSize: baseFontSize,
@@ -71,7 +117,7 @@ export function TerminalView({ terminalId, cliType }) {
       cursorStyle: 'bar',
       scrollback: 5000,
       allowProposedApi: true,
-      theme: THEME,
+      theme: initialTheme,
       // Modern keyboard protocols. Without these, xterm.js encodes
       // Shift+Enter, Ctrl+Enter, Ctrl+Shift+key etc. the same as their
       // unmodified versions (e.g. both Enter and Shift+Enter send \r),
@@ -137,8 +183,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 +227,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 +266,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 +295,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 {}
           });
         }
@@ -349,16 +427,17 @@ export function TerminalView({ terminalId, cliType }) {
     // the CSS in terminals.css does the rest.
     const onCompStart = () => {
       if (host) host.classList.add('is-composing');
-      // The terminal cursor is rendered on canvas (THEME.cursor), so CSS
+      // The terminal cursor is rendered on canvas (theme.cursor), so CSS
       // can't hide it. Theme swap alone doesn't reliably stop the blink
       // frame loop, so also issue the DECTCEM hide sequence which the
-      // renderer honours immediately.
-      try { term.options.theme = { ...THEME, cursor: 'transparent', cursorAccent: 'transparent' }; } catch {}
+      // renderer honours immediately. Use the live theme (themeRef) so the
+      // restore on compEnd matches whatever light/dark is current.
+      try { term.options.theme = { ...themeRef.current, cursor: 'transparent', cursorAccent: 'transparent' }; } catch {}
       try { term.write('\x1b[?25l'); } catch {}
     };
     const onCompEnd   = () => {
       if (host) host.classList.remove('is-composing');
-      try { term.options.theme = THEME; } catch {}
+      try { term.options.theme = themeRef.current; } catch {}
       try { term.write('\x1b[?25h'); } catch {}
     };
     const helper = host?.querySelector('.xterm-helper-textarea');
@@ -377,6 +456,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/icons.js

@@ -199,7 +199,7 @@ export const StarSmallFilled = ({ size = 14 } = {}) => html`
 // brand mark (terminal window + ccsm text — matches /favicon.svg)
 export const BrandMark = () => html`
   <svg viewBox="0 0 32 32" width="32" height="32">
-    <rect x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
+    <rect class="brand-rect" x="2" y="4" width="28" height="24" rx="3" fill="#1a1815"/>
     <line x1="2" y1="10" x2="30" y2="10" stroke="#faf9f5" stroke-width="0.6" opacity="0.45"/>
     <!-- macOS traffic-light style: red / yellow / green -->
     <circle cx="6"   cy="7" r="1" fill="#ed6a5e"/>

package/public/js/pages/ConfigurePage.js

@@ -6,8 +6,8 @@ import { html } from '../html.js';
 import { useEffect, useState } from 'preact/hooks';
 import {
   config, configDirty, accentColor, folders, workspaces, serverHealth,
-  restartInFlight,
-  setAccentColor, ACCENT_DEFAULT,
+  restartInFlight, themeMode,
+  setAccentColor, ACCENT_DEFAULT, setThemeMode,
 } from '../state.js';
 import {
   api, loadConfig, loadWorkspaces, loadFolders,
@@ -182,6 +182,10 @@ export function ConfigurePage() {
 
     <${Section} title="General">
       <div class="config-grid">
+        <div class="field">
+          <span class="label">Appearance</span>
+          <${ThemeToggle} />
+        </div>
         <div class="field">
           <span class="label">Theme accent</span>
           <${AccentPicker} />
@@ -577,6 +581,23 @@ function RestartButton() {
   `;
 }
 
+function ThemeToggle() {
+  const mode = themeMode.value;
+  const opts = [
+    { id: 'light', label: 'Light' },
+    { id: 'dark', label: 'Dark' },
+    { id: 'system', label: 'System' },
+  ];
+  return html`
+    <div class="seg" role="group" aria-label="Appearance">
+      ${opts.map((o) => html`
+        <button key=${o.id} type="button"
+                class=${`seg-btn${mode === o.id ? ' is-active' : ''}`}
+                aria-pressed=${mode === o.id}
+                onClick=${() => setThemeMode(o.id)}>${o.label}</button>`)}
+    </div>`;
+}
+
 function AccentPicker() {
   const current = (accentColor.value || '').toLowerCase();
   const matchedPreset = PRESETS.find((p) => p.hex.toLowerCase() === current);

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>