@bakapiano/ccsm 0.19.3 → 0.20.0

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.20.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/dark.css

@@ -0,0 +1,120 @@
+/* Dark-mode overrides.
+ *
+ * The bulk of the UI flips automatically: surfaces, ink, and borders all
+ * read from CSS vars that state.js (and the pre-paint script in index.html)
+ * re-derive for the dark ground. This file only patches the stragglers —
+ * places that hardcoded a light-assuming literal color instead of a var,
+ * plus a few values that need a genuinely different treatment on dark
+ * (focus rings, primary-button hover, status text contrast, scrims).
+ *
+ * Loaded LAST so these win the cascade. Everything is scoped under
+ * [data-theme="dark"] on <html>, set by applyTheme().
+ *
+ * NOT touched here (intentionally dark already): the terminal pane, the
+ * session tabs, and the mobile key bar — those are dark in both themes. */
+
+/* ── buttons ─────────────────────────────────────────────────────── */
+/* .action.primary is bg:var(--ink)/text:var(--bg-elev) — already inverts
+   correctly (light slab, dark text) when the vars flip. Only its hover
+   hardcoded #000, which would darken the wrong way; send it brighter. */
+[data-theme="dark"] .action.primary:hover {
+  background: #ffffff;
+  border-color: #ffffff;
+  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
+}
+/* Focus rings / hover shadows used a dark ink wash that vanishes on a dark
+   ground — switch to a light wash so the affordance stays visible. */
+[data-theme="dark"] .action:hover { box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5); }
+[data-theme="dark"] .action:focus-visible { box-shadow: 0 0 0 3px rgba(236, 231, 218, 0.16); }
+[data-theme="dark"] .input:focus,
+[data-theme="dark"] input:focus,
+[data-theme="dark"] select:focus,
+[data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(236, 231, 218, 0.12); }
+[data-theme="dark"] .action.danger:hover { background: #c75050; border-color: #c75050; }
+
+/* The select chevron SVG is baked with a mid-gray stroke; lighten it. */
+[data-theme="dark"] select {
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b4ab98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+}
+
+/* ── brand mark ──────────────────────────────────────────────────── */
+/* The logo's "terminal window" rect is near-black (#1a1815) and vanishes
+   against the dark page. Lift its fill so it reads as a small elevated
+   panel — no hard outline (a border looks boxy at this size); the lighter
+   fill alone separates it. (Light mode leaves the presentation-attribute
+   fill untouched — it's already legible there.) */
+[data-theme="dark"] .brand-rect { fill: #38342f; }
+
+/* ── paper grain ─────────────────────────────────────────────────── */
+/* The noise texture is a dark-tinted SVG multiplied over the surface —
+   invisible (and wrong blend) on a dark ground. Screen-blend it at low
+   opacity so it adds faint light speckle instead. */
+[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.4; }
+
+/* ── Microsoft sign-in button ────────────────────────────────────── */
+/* Microsoft's brand guidance ships a dark-theme variant of the sign-in
+   button (dark fill, light text). The four-square logo stays as-is. */
+[data-theme="dark"] .btn-signin-microsoft {
+  background: #2b2b2b;
+  border-color: #5e5e5e;
+  color: #ffffff;
+}
+[data-theme="dark"] .btn-signin-microsoft:hover { background: #383838; border-color: #6f6f6f; }
+[data-theme="dark"] .btn-signin-microsoft:active { background: #1f1f1f; }
+
+/* ── status / semantic text contrast ─────────────────────────────── */
+/* These literals were tuned for dark-text-on-light. On a dark ground they
+   read as near-black mud — lift each to a legible tint of the same hue. */
+[data-theme="dark"] .provider-status-state.is-ok,
+[data-theme="dark"] .status-link.ok,
+[data-theme="dark"] .status-label.ok { color: #7fc77f; }
+[data-theme="dark"] .provider-status-state.is-warn,
+[data-theme="dark"] .status-label.warn,
+[data-theme="dark"] .signin-error-msg { color: #e89090; }
+[data-theme="dark"] .signin-error-msg.is-active,
+[data-theme="dark"] .tunnel-stop-link:hover { color: #f0a8a8; }
+[data-theme="dark"] .status-label.blue { color: #6fb0e8; }
+[data-theme="dark"] .remote-status-line .warn,
+[data-theme="dark"] .warning-bg { color: #d9a066; }
+[data-theme="dark"] .warning-tag { border-color: #b87a3a; background: rgba(217, 160, 102, 0.08); }
+[data-theme="dark"] .warning-bg { background: rgba(217, 160, 102, 0.16); }
+
+/* Light result panels (success/error) → translucent tints on dark. */
+[data-theme="dark"] .signin-card-result.is-ok { background: rgba(74, 138, 74, 0.14); }
+[data-theme="dark"] .signin-card-result.is-error { background: rgba(183, 63, 63, 0.16); }
+
+/* Scrims sit over content — a touch deeper reads better against dark UI. */
+[data-theme="dark"] .modal-backdrop,
+[data-theme="dark"] .offline-overlay,
+[data-theme="dark"] .kbd-recorder-overlay { background: rgba(0, 0, 0, 0.6); }
+
+/* ── terminal chrome ─────────────────────────────────────────────── */
+/* Dark values for the --term-* palette (terminals.css holds the light
+   defaults). These restore the original near-black terminal surround,
+   tab strip, empty/displaced states, and mobile key bar. Keep in lockstep
+   with TerminalView.js's THEME_DARK. */
+[data-theme="dark"] {
+  /* VSCode Dark+ neutral panel grays around the #1e1e1e terminal canvas. */
+  --term-surface:       #1e1e1e;   /* matches THEME_DARK.background */
+  --term-on:            #cccccc;
+  --term-on-dim:        rgba(204, 204, 204, 0.72);
+  --term-on-faint:      rgba(204, 204, 204, 0.45);
+  --term-heading:       #ffffff;
+  --term-prompt:        #f14c4c;   /* VSCode ansiBrightRed */
+  --term-cta-bg:        #cccccc;
+  --term-cta-fg:        #1e1e1e;
+  --term-cta-bg-hover:  #e5e5e5;
+  --term-tabstrip:      #252526;
+  --term-tab:           #2d2d2d;
+  --term-tab-hover:     #333333;
+  --term-tab-text:      rgba(204, 204, 204, 0.65);
+  --term-keybar-bg:     #252526;
+  --term-key-fg:        #cccccc;
+  --term-key-bg:        rgba(255, 255, 255, 0.06);
+  --term-key-border:    rgba(255, 255, 255, 0.14);
+  --term-key-active-bg: rgba(255, 255, 255, 0.20);
+  --term-key-active-border: rgba(255, 255, 255, 0.32);
+  --term-key-hint:      rgba(204, 204, 204, 0.5);
+  --term-pop-bg:        #252526;
+  --term-pop-border:    rgba(255, 255, 255, 0.16);
+}

package/public/css/forms.css

@@ -103,6 +103,36 @@ textarea {
   line-height: 1.55;
 }
 
+/* Segmented control — a row of mutually-exclusive pills sharing one
+   border (used for the Appearance light/dark/system toggle). */
+.seg {
+  display: inline-flex;
+  padding: 2px;
+  gap: 2px;
+  background: var(--ui-bg);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+}
+.seg-btn {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: var(--ink-mid);
+  font-family: var(--body);
+  font-size: 12.5px;
+  font-weight: 500;
+  padding: 5px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background .14s ease, color .14s ease;
+}
+.seg-btn:hover { color: var(--ink); }
+.seg-btn.is-active {
+  background: var(--bg-elev);
+  color: var(--ink);
+  box-shadow: var(--shadow-sm);
+}
+
 input[type="checkbox"] {
   appearance: none;
   width: 16px;

package/public/css/layout.css

@@ -125,11 +125,10 @@ body.is-resizing-sidebar .app {
   box-sizing: border-box;
   margin: 0 calc(-1 * var(--s-4)) 0;
   padding: 0 var(--s-5);
-  /* Replace the hard inset shadow rule with a soft gradient fade — gives
-     the top band a printed-paper masthead feeling rather than a CSS
-     divider. */
-  background:
-    linear-gradient(to bottom, rgba(216, 212, 198, 0.0) 0%, rgba(216, 212, 198, 0.0) calc(100% - 1px), var(--ui-border-soft) 100%);
+  /* Bottom divider matches the sidebar's right border exactly — same
+     1px solid var(--ui-border) — so the header underline and the
+     sidebar/main divider read as one continuous frame. */
+  border-bottom: 1px solid var(--ui-border);
   color: var(--ink);
   font-size: 13px;
   font-weight: 400;

package/public/css/terminals.css

@@ -1,5 +1,38 @@
 /* Terminals tab · left rail (active sessions) + right pane (xterm host) */
 
+/* Terminal-chrome palette. The xterm canvas itself is painted from a JS
+   theme object (TerminalView.js); these vars colour everything AROUND it —
+   the pane backdrop, the tab strip, the empty/displaced states, and the
+   mobile key bar — so the chrome tracks the canvas. Light defaults here;
+   dark.css overrides under [data-theme="dark"] with the original dark set.
+   Keep the two in lockstep with the JS THEME_LIGHT / THEME_DARK objects. */
+:root {
+  /* VSCode Light+ neutral panel grays, to sit seamlessly around the
+     white VSCode terminal canvas (THEME_LIGHT). */
+  --term-surface:       #ffffff;   /* matches THEME_LIGHT.background */
+  --term-on:            #333333;
+  --term-on-dim:        rgba(51, 51, 51, 0.70);
+  --term-on-faint:      rgba(51, 51, 51, 0.45);
+  --term-heading:       #1a1a1a;
+  --term-prompt:        #cd3131;   /* VSCode ansiRed */
+  --term-cta-bg:        #2c2c2c;
+  --term-cta-fg:        #ffffff;
+  --term-cta-bg-hover:  #000000;
+  --term-tabstrip:      #f0f0f0;
+  --term-tab:           #e4e4e4;
+  --term-tab-hover:     #d8d8d8;
+  --term-tab-text:      rgba(51, 51, 51, 0.70);
+  --term-keybar-bg:     #f0f0f0;
+  --term-key-fg:        #333333;
+  --term-key-bg:        rgba(0, 0, 0, 0.05);
+  --term-key-border:    rgba(0, 0, 0, 0.14);
+  --term-key-active-bg: rgba(0, 0, 0, 0.12);
+  --term-key-active-border: rgba(0, 0, 0, 0.28);
+  --term-key-hint:      rgba(0, 0, 0, 0.5);
+  --term-pop-bg:        #f6f6f6;
+  --term-pop-border:    rgba(0, 0, 0, 0.16);
+}
+
 .terminals-layout {
   display: grid;
   grid-template-columns: 240px 1fr;
@@ -246,7 +279,7 @@
      terminal. Negative horizontal margin cancels .main's padding so
      the strip is full-bleed like the terminal underneath. */
   margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
-  background: #2d2a26;
+  background: var(--term-tabstrip);
   border-bottom: 0;
 }
 .session-tabs-list {
@@ -272,7 +305,7 @@
 }
 .session-tab {
   appearance: none;
-  background: #423d37;
+  background: var(--term-tab);
   border: 0;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;          /* overlap container border-bottom */
@@ -282,17 +315,17 @@
   gap: 6px;
   font: inherit;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.65);
+  color: var(--term-tab-text);
   cursor: pointer;
   max-width: 200px;
   min-width: 0;
   transition: background-color .12s, color .12s;
 }
-.session-tab:hover { background: #4f4942; color: #fff; }
+.session-tab:hover { background: var(--term-tab-hover); color: var(--term-on); }
 .session-tab.is-active {
-  background: var(--ink);
-  color: #fff;
-  border-bottom-color: var(--ink);
+  background: var(--term-surface);
+  color: var(--term-on);
+  border-bottom-color: var(--term-surface);
 }
 .session-tab-icon { display: inline-flex; flex-shrink: 0; }
 .session-tab-icon svg { width: 14px; height: 14px; }
@@ -303,7 +336,7 @@
   text-overflow: ellipsis;
   min-width: 0;
 }
-.session-tab-meta { color: rgba(255, 255, 255, 0.5); font-size: 11px; }
+.session-tab-meta { color: var(--term-tab-text); font-size: 11px; }
 .session-tab.is-active .session-tab-meta { color: rgba(255, 255, 255, 0.6); }
 .session-tab-add {
   background: transparent;
@@ -412,14 +445,14 @@
 .session-pane-body {
   flex: 1;
   min-height: 0;
-  background: #1a1815;
+  background: var(--term-surface);
 }
 .session-pane-body .terminal-host {
   height: 100%;
 }
 .session-pane-body .terminal-empty {
-  background: #1a1815;
-  color: #e8e3d5;
+  background: var(--term-surface);
+  color: var(--term-on);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -429,16 +462,16 @@
   font-size: 13px;
 }
 .session-pane-body .terminal-empty .mono {
-  color: #e07b6e;
+  color: var(--term-prompt);
 }
 .session-pane-body .terminal-empty .action.primary {
-  background: #e8e3d5;
-  color: #1a1815;
-  border-color: #e8e3d5;
+  background: var(--term-cta-bg);
+  color: var(--term-cta-fg);
+  border-color: var(--term-cta-bg);
 }
 .session-pane-body .terminal-empty .action.primary:hover {
-  background: #faf9f5;
-  border-color: #faf9f5;
+  background: var(--term-cta-bg-hover);
+  border-color: var(--term-cta-bg-hover);
 }
 
 /* Displaced state — shown when the server kicks us off because another
@@ -446,8 +479,8 @@
    as terminal-empty so the transition from running terminal → displaced
    doesn't flash a colour change. */
 .terminal-displaced {
-  background: #1a1815;
-  color: #e8e3d5;
+  background: var(--term-surface);
+  color: var(--term-on);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -465,14 +498,14 @@
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #faf9f5;
+  color: var(--term-heading);
   letter-spacing: -0.005em;
 }
 .terminal-displaced-card p {
   margin: 0;
   font-size: 13px;
   line-height: 1.55;
-  color: rgba(232, 227, 213, 0.72);
+  color: var(--term-on-dim);
 }
 .terminal-displaced-actions {
   margin-top: var(--s-2);
@@ -480,19 +513,19 @@
   justify-content: center;
 }
 .terminal-displaced-card .action.primary {
-  background: #e8e3d5;
-  color: #1a1815;
-  border-color: #e8e3d5;
+  background: var(--term-cta-bg);
+  color: var(--term-cta-fg);
+  border-color: var(--term-cta-bg);
   padding: 9px 20px;
   font-size: 13px;
 }
 .terminal-displaced-card .action.primary:hover {
-  background: #faf9f5;
-  border-color: #faf9f5;
+  background: var(--term-cta-bg-hover);
+  border-color: var(--term-cta-bg-hover);
 }
 .terminal-displaced-hint {
   font-size: 11.5px !important;
-  color: rgba(232, 227, 213, 0.45) !important;
+  color: var(--term-on-faint) !important;
 }
 
 /* ─── Mobile terminal accessory bar (TerminalKeyBar.js) ───────────────
@@ -505,8 +538,8 @@
   left: 0;
   right: 0;
   z-index: 215;                 /* above the mobile FAB (210) */
-  background: #201d19;
-  border-top: 1px solid rgba(232, 227, 213, 0.12);
+  background: var(--term-keybar-bg);
+  border-top: 1px solid var(--term-key-border);
   padding: 6px 8px;
   touch-action: manipulation;   /* kill the 300ms double-tap-zoom delay */
   user-select: none;
@@ -538,17 +571,17 @@
   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);
+  color: var(--term-key-fg);
+  background: var(--term-key-bg);
+  border: 1px solid var(--term-key-border);
   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);
+  background: var(--term-key-active-bg);
+  border-color: var(--term-key-active-border);
 }
 .tkb-arrow { padding: 0 10px; }
 .tkb-arrow svg { width: 18px; height: 18px; }
@@ -570,8 +603,8 @@
   grid-template-columns: repeat(5, 1fr);
   gap: 6px;
   padding: 8px;
-  background: #201d19;
-  border: 1px solid rgba(232, 227, 213, 0.16);
+  background: var(--term-pop-bg);
+  border: 1px solid var(--term-pop-border);
   border-radius: 10px;
   box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.5);
 }
@@ -582,5 +615,5 @@
   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; }
+.tkb-combo-label { font-family: var(--mono); font-size: 13px; color: var(--term-key-fg); }
+.tkb-combo-hint  { font-size: 9.5px; color: var(--term-key-hint); 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)