@bakapiano/ccsm 0.17.11 → 0.18.0

package/lib/devices.js

@@ -0,0 +1,215 @@
+'use strict';
+
+// Remote-device approval store. Each browser that arrives via the tunnel
+// generates a UUID client-side (`ccsm.deviceId` in localStorage) and sends
+// it as `X-Device-Id` on every API call. server.js' middleware feeds those
+// arrivals through record() — known devices get their lastSeen bumped,
+// new ones get inserted as `pending`. Until the host explicitly Approves
+// from the Remote page, every non-loopback request returns 403 with the
+// pending status.
+//
+// Stored at ~/.ccsm/devices.json:
+//   {
+//     "<uuid>": {
+//       id, status: 'pending'|'approved'|'rejected',
+//       userAgent, ip,
+//       firstSeen, lastSeen, approvedAt,
+//       label                  // user-set or auto-derived from UA
+//     },
+//     ...
+//   }
+
+const { DATA_DIR } = require('./config');
+const { createKeyedJsonStore } = require('./jsonStore');
+const { withFileLock } = require('./atomicJson');
+
+const store = createKeyedJsonStore({
+  dataDir: DATA_DIR,
+  filename: 'devices.json',
+});
+
+// `record()` runs on EVERY non-loopback API request. Two side effects
+// without these guards:
+//   1. Concurrent calls each do load→mutate→save independently; the
+//      parallel rename(tmp → target) collides on Windows and surfaces
+//      as `EPERM: operation not permitted`.
+//   2. Even when serialized, writing on every request hammers the disk
+//      for a value that only needs ~minute-grained accuracy (lastSeen
+//      drives "seen 5m ago" labels in the UI).
+// Fix: serialize all mutators through the shared per-file lock, and
+// short-circuit lastSeen-only updates that landed within MIN_FLUSH_MS
+// of the last persisted write for the same id.
+const MIN_FLUSH_MS = 15_000;
+const lastFlushAt = new Map();   // id → ms timestamp of last save
+
+// Pending entries older than 24h are auto-pruned on each list() so a
+// drive-by scanner doesn't grow the file forever. Rejected entries kept
+// 1h so the host can see what got bounced and rename / un-reject if
+// they realize it was legit.
+const PENDING_TTL_MS  = 24 * 60 * 60 * 1000;
+const REJECTED_TTL_MS = 60 * 60 * 1000;
+
+// Quick UA → human-readable label. We keep this tiny on purpose — full
+// UA parsing libraries are huge and the only consumer is one line in
+// the approval UI. Order matters: Edge UA includes "Chrome" so detect
+// Edge first.
+function describeUA(ua) {
+  ua = String(ua || '');
+  const device =
+    /iPhone/.test(ua)       ? 'iPhone'
+    : /iPad/.test(ua)       ? 'iPad'
+    : /Android/.test(ua)    ? 'Android'
+    : /Mac OS X/.test(ua)   ? 'Mac'
+    : /Windows/.test(ua)    ? 'Windows'
+    : /Linux/.test(ua)      ? 'Linux'
+    : null;
+  const browser =
+    /Edg\//.test(ua)        ? 'Edge'
+    : /OPR\//.test(ua)      ? 'Opera'
+    : /Chrome\//.test(ua)   ? 'Chrome'
+    : /Firefox\//.test(ua)  ? 'Firefox'
+    : /Safari\//.test(ua)   ? 'Safari'
+    : null;
+  if (device && browser) return `${device} · ${browser}`;
+  if (device)            return device;
+  if (browser)           return browser;
+  return 'Unknown device';
+}
+
+async function pruneStale(map) {
+  const now = Date.now();
+  let dirty = false;
+  for (const [id, d] of Object.entries(map)) {
+    if (d.status === 'pending'  && now - d.firstSeen > PENDING_TTL_MS)  { delete map[id]; dirty = true; }
+    if (d.status === 'rejected' && now - (d.rejectedAt || d.lastSeen) > REJECTED_TTL_MS) { delete map[id]; dirty = true; }
+  }
+  if (dirty) await store.save(map);
+  return map;
+}
+
+// Upsert. Returns the (possibly newly-created) device record. Caller
+// uses .status to decide whether to gate further work.
+async function record(id, { userAgent, ip } = {}) {
+  if (!id) throw new Error('device id required');
+  return withFileLock(store.filePath, async () => {
+    const map = await store.load();
+    const now = Date.now();
+    const existing = map[id];
+    if (existing) {
+      // Throttled lastSeen update: if the only thing that would change
+      // is lastSeen and we flushed for this id within MIN_FLUSH_MS,
+      // return the in-memory copy without touching disk. Saves a
+      // disk write per request when remote pages poll at 2.5s.
+      const onlyLastSeen = (!userAgent || existing.userAgent) && (!ip || existing.ip === ip);
+      const recentlyFlushed = (now - (lastFlushAt.get(id) || 0)) < MIN_FLUSH_MS;
+      existing.lastSeen = now;
+      if (userAgent && !existing.userAgent) existing.userAgent = userAgent;
+      if (ip) existing.ip = ip;
+      if (onlyLastSeen && recentlyFlushed) return existing;
+      await store.save(map);
+      lastFlushAt.set(id, now);
+      return existing;
+    }
+    map[id] = {
+      id,
+      status: 'pending',
+      userAgent: userAgent || null,
+      ip: ip || null,
+      firstSeen: now,
+      lastSeen: now,
+      approvedAt: null,
+      rejectedAt: null,
+      label: describeUA(userAgent),
+    };
+    await store.save(map);
+    lastFlushAt.set(id, now);
+    return map[id];
+  });
+}
+
+async function get(id) {
+  const map = await store.load();
+  return map[id] || null;
+}
+
+async function isApproved(id) {
+  const d = await get(id);
+  return !!(d && d.status === 'approved');
+}
+
+async function approve(id, label) {
+  return withFileLock(store.filePath, async () => {
+    const map = await store.load();
+    const d = map[id];
+    if (!d) return null;
+    d.status = 'approved';
+    d.approvedAt = Date.now();
+    d.rejectedAt = null;
+    if (label) d.label = String(label);
+    await store.save(map);
+    lastFlushAt.set(id, Date.now());
+    return d;
+  });
+}
+
+async function reject(id) {
+  return withFileLock(store.filePath, async () => {
+    const map = await store.load();
+    const d = map[id];
+    if (!d) return null;
+    d.status = 'rejected';
+    d.rejectedAt = Date.now();
+    d.approvedAt = null;
+    await store.save(map);
+    lastFlushAt.set(id, Date.now());
+    return d;
+  });
+}
+
+// Identical to reject in storage terms, but separate API name so the UI
+// can distinguish "I'm declining a new request" from "I'm taking back
+// access from someone I'd previously approved". Both end up status:
+// 'rejected' and clear approvedAt — once cleared, the device must
+// request again from scratch.
+async function revoke(id) {
+  return reject(id);
+}
+
+async function rename(id, label) {
+  return withFileLock(store.filePath, async () => {
+    const map = await store.load();
+    const d = map[id];
+    if (!d) return null;
+    d.label = String(label || '').slice(0, 60);
+    await store.save(map);
+    return d;
+  });
+}
+
+async function remove(id) {
+  return store.remove(id);
+}
+
+async function list() {
+  const map = await pruneStale(await store.load());
+  return Object.values(map).sort((a, b) => {
+    // Pending first (so the host sees them at the top), then approved
+    // by approvedAt desc, then rejected by rejectedAt desc.
+    const order = { pending: 0, approved: 1, rejected: 2 };
+    if (order[a.status] !== order[b.status]) return order[a.status] - order[b.status];
+    return (b.lastSeen || 0) - (a.lastSeen || 0);
+  });
+}
+
+module.exports = {
+  record,
+  get,
+  isApproved,
+  approve,
+  reject,
+  revoke,
+  rename,
+  remove,
+  list,
+  describeUA,
+};

package/lib/tunnel.js

@@ -0,0 +1,253 @@
+'use strict';
+
+// Tunnel manager · spawns and supervises a cloudflared or devtunnel
+// child to expose the local ccsm backend over a public URL. Captures
+// the URL from stdout, exposes state to the API, and tears down the
+// child on stop / server shutdown.
+//
+// Two providers, each with their own CLI quirk:
+//   cloudflared · `cloudflared tunnel --url http://localhost:<port>`
+//                 Prints `https://*.trycloudflare.com` somewhere in
+//                 the boot banner. No login required for quick tunnels.
+//   devtunnel   · `devtunnel host -p <port> --allow-anonymous`
+//                 Prints `Connect via browser: https://*.devtunnels.ms`.
+//                 Host must be logged in (`devtunnel user login`).
+//
+// Discovery: scan PATH first via `where.exe`, then known winget install
+// dirs. Returns the absolute path so we can spawn the child regardless
+// of whether the post-install PATH refresh has reached this Node process.
+
+const { spawn, execFileSync } = require('node:child_process');
+const path = require('node:path');
+const fs = require('node:fs');
+const os = require('node:os');
+
+const PROVIDERS = {
+  cloudflared: {
+    id: 'cloudflared',
+    label: 'Cloudflare Tunnel',
+    wingetId: 'Cloudflare.cloudflared',
+    binary: 'cloudflared.exe',
+    knownPaths: [
+      path.join(process.env['ProgramFiles'] || 'C:\\Program Files', 'cloudflared', 'cloudflared.exe'),
+      path.join(process.env['ProgramFiles(x86)'] || 'C:\\Program Files (x86)', 'cloudflared', 'cloudflared.exe'),
+    ],
+    args: (port) => ['tunnel', '--url', `http://localhost:${port}`],
+    urlRegex: /https:\/\/[a-z0-9-]+\.trycloudflare\.com/i,
+  },
+  devtunnel: {
+    id: 'devtunnel',
+    label: 'Microsoft Dev Tunnel',
+    wingetId: 'Microsoft.devtunnel',
+    binary: 'devtunnel.exe',
+    knownPaths: [
+      path.join(process.env['LOCALAPPDATA'] || '', 'Microsoft', 'WinGet', 'Packages',
+        'Microsoft.devtunnel_Microsoft.Winget.Source_8wekyb3d8bbwe', 'devtunnel.exe'),
+    ],
+    args: (port) => ['host', '-p', String(port), '--allow-anonymous'],
+    urlRegex: /https:\/\/[a-z0-9-]+\.[a-z0-9-]+\.devtunnels\.ms/i,
+    needsLogin: true,
+  },
+};
+
+// 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 token = null;     // Remote-access bearer token. Null = no remote
+                      // access enforced. Set via setToken() or by the
+                      // start() call. Server.js middleware reads via
+                      // getToken().
+
+function getToken() { return token; }
+function setToken(t) { token = t ? String(t) : null; return token; }
+
+function findBinary(provider) {
+  const p = PROVIDERS[provider];
+  if (!p) return null;
+  // PATH lookup via where.exe — works regardless of how the CLI got
+  // installed (winget, choco, manual, in-tree).
+  try {
+    const out = execFileSync('where.exe', [p.binary], { stdio: ['ignore', 'pipe', 'ignore'] })
+      .toString().trim().split(/\r?\n/)[0];
+    if (out && fs.existsSync(out)) return out;
+  } catch { /* not on PATH */ }
+  // Fall back to known install locations (winget's PATH update doesn't
+  // reach the already-running Node process).
+  for (const candidate of p.knownPaths) {
+    if (candidate && fs.existsSync(candidate)) return candidate;
+  }
+  // For devtunnel: winget's package dir has a version suffix that
+  // changes between releases. Glob it.
+  if (provider === 'devtunnel') {
+    const base = path.join(process.env['LOCALAPPDATA'] || '', 'Microsoft', 'WinGet', 'Packages');
+    try {
+      for (const entry of fs.readdirSync(base)) {
+        if (entry.startsWith('Microsoft.devtunnel_')) {
+          const candidate = path.join(base, entry, 'devtunnel.exe');
+          if (fs.existsSync(candidate)) return candidate;
+        }
+      }
+    } catch {}
+  }
+  return null;
+}
+
+function getVersion(provider, exe) {
+  try {
+    const out = execFileSync(exe, ['--version'], { stdio: ['ignore', 'pipe', 'pipe'] })
+      .toString().trim().split(/\r?\n/)[0];
+    return out || null;
+  } catch { return null; }
+}
+
+function checkDevtunnelLogin(exe) {
+  try {
+    const out = execFileSync(exe, ['user', 'show'], { stdio: ['ignore', 'pipe', 'ignore'], timeout: 5000 })
+      .toString().trim();
+    // "Logged in as <email> using <provider>." vs "Not logged in"
+    const m = out.match(/Logged in as (\S+)/);
+    if (m) return { loggedIn: true, user: m[1] };
+    return { loggedIn: false, user: null };
+  } catch {
+    return { loggedIn: false, user: null };
+  }
+}
+
+// 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
+// every 2.5s, and tunnel.start() returns a fresh status() — without this
+// cache, the loop is frozen ~40% of the time during normal operation,
+// and /api/health probes from other clients time out.
+const PROBE_TTL_MS = 30_000;
+let probeCache = null;
+let probeCacheAt = 0;
+
+function probe(force = false) {
+  if (!force && probeCache && Date.now() - probeCacheAt < PROBE_TTL_MS) {
+    return probeCache;
+  }
+  const out = {};
+  for (const id of Object.keys(PROVIDERS)) {
+    const exe = findBinary(id);
+    const p = { installed: !!exe, exe, version: exe ? getVersion(id, exe) : null };
+    if (id === 'devtunnel' && exe) {
+      Object.assign(p, checkDevtunnelLogin(exe));
+    }
+    out[id] = p;
+  }
+  probeCache = out;
+  probeCacheAt = Date.now();
+  return out;
+}
+
+// Invalidate the cache when callers know the on-disk state likely changed
+// (post-install, post-login, etc.). Next probe() re-shells.
+function invalidateProbe() { probeCache = null; probeCacheAt = 0; }
+
+function status() {
+  return {
+    providers: probe(),
+    running: !!current,
+    provider: current?.provider || null,
+    url: current?.url || null,
+    startedAt: current?.startedAt || null,
+    pid: current?.child?.pid || null,
+    log: current?.log?.slice(-50) || [],
+    token,
+    // 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
+    // anyone reaching this endpoint already knows the token.
+  };
+}
+
+// Spawn the tunnel CLI. Resolves once we've parsed the public URL out
+// of stdout (with a timeout safety net). Throws if the CLI isn't
+// installed, the provider is unknown, or another tunnel is running.
+async function start({ provider, port }) {
+  if (current) throw new Error('tunnel already running');
+  const p = PROVIDERS[provider];
+  if (!p) throw new Error(`unknown provider: ${provider}`);
+  const exe = findBinary(provider);
+  if (!exe) throw new Error(`${p.label} is not installed`);
+  if (provider === 'devtunnel') {
+    const { loggedIn } = checkDevtunnelLogin(exe);
+    if (!loggedIn) throw new Error('devtunnel requires login — run `devtunnel user login` first');
+  }
+
+  const args = p.args(port);
+  const child = spawn(exe, args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true });
+  const entry = { provider, child, url: null, startedAt: Date.now(), log: [] };
+  current = entry;
+
+  const pushLog = (line) => {
+    entry.log.push(line);
+    if (entry.log.length > 200) entry.log.shift();
+    if (!entry.url) {
+      const m = line.match(p.urlRegex);
+      if (m) entry.url = m[0];
+    }
+  };
+  child.stdout.setEncoding('utf8');
+  child.stderr.setEncoding('utf8');
+  child.stdout.on('data', (chunk) => chunk.split(/\r?\n/).forEach((l) => l && pushLog(l)));
+  child.stderr.on('data', (chunk) => chunk.split(/\r?\n/).forEach((l) => l && pushLog(l)));
+
+  child.on('exit', (code, signal) => {
+    if (current === entry) current = null;
+    console.log(`[tunnel] ${provider} exited · code=${code} signal=${signal || ''}`);
+  });
+  child.on('error', (err) => {
+    if (current === entry) current = null;
+    console.error(`[tunnel] ${provider} spawn error`, err);
+  });
+
+  // Wait up to 25s for the URL to show up in stdout.
+  const deadline = Date.now() + 25_000;
+  while (Date.now() < deadline) {
+    if (entry.url) return status();
+    if (!current || current !== entry) {
+      throw new Error('tunnel exited before reporting a URL · ' + entry.log.slice(-3).join(' / '));
+    }
+    await new Promise((r) => setTimeout(r, 200));
+  }
+  // Timed out — keep the child alive (the URL might appear later) but
+  // tell the caller we don't have one yet.
+  return status();
+}
+
+function stop() {
+  if (!current) return false;
+  try { current.child.kill(); } catch {}
+  current = null;
+  return true;
+}
+
+// Background install via winget. Returns immediately with the spawned
+// pid; the actual install completes asynchronously. Caller polls
+// probe() to learn when the binary appears on disk.
+function installViaWinget(provider) {
+  const p = PROVIDERS[provider];
+  if (!p) throw new Error(`unknown provider: ${provider}`);
+  if (process.platform !== 'win32') throw new Error('winget install only supported on Windows');
+  const child = spawn('winget', [
+    'install', p.wingetId,
+    '--accept-source-agreements',
+    '--accept-package-agreements',
+    '--silent',
+  ], { stdio: 'ignore', detached: true, windowsHide: true });
+  child.unref();
+  return { provider, pid: child.pid };
+}
+
+module.exports = {
+  PROVIDERS,
+  probe,
+  status,
+  start,
+  stop,
+  installViaWinget,
+  getToken,
+  setToken,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.17.11",
+  "version": "0.18.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/layout.css

@@ -32,6 +32,13 @@ body.is-resizing-sidebar .app {
   min-height: 0;
   padding: 0 var(--s-4);
   gap: var(--s-2);
+  /* .settings-scroll inside uses `margin-right: -var(--s-4)` to bleed
+     past .main's padding so its scrollbar sits flush with the window
+     edge. Without this clip that 16-px bleed propagates up to <body>
+     and shows a permanent horizontal scrollbar on every page. Vertical
+     scrolling stays inside .settings-scroll itself (overflow-y:auto)
+     so this clip doesn't suppress anything legitimate. */
+  overflow-x: hidden;
 }
 
 .page-head {

package/public/css/responsive.css

@@ -1,10 +1,130 @@
 /* Narrow viewports: force-collapse sidebar, single-col config grid */
 
+/* Narrow desktop / tablet viewports: stack the page-head, single-column
+   config grids. Sidebar stays at full width — user can still toggle it
+   manually via the collapse button. Phone-sized (≤ 640px) gets the FAB
+   drawer treatment below. */
 @media (max-width: 900px) {
-  .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr !important; }
-  .sidebar { padding: 0 var(--s-2); }
-  .brand-name, .nav-label, .nav-badge { opacity: 0; pointer-events: none; }
   .main { padding: 0 var(--s-4); }
   .page-head { flex-direction: column; gap: var(--s-3); }
   .config-grid { grid-template-columns: 1fr; }
 }
+
+/* Phone viewports (≤ 640px): sidebar disappears entirely from the grid
+   layout; a circular floating button bottom-left toggles a full-screen
+   drawer that re-mounts the sidebar over everything else. */
+@media (max-width: 640px) {
+  .app.is-mobile { grid-template-columns: 1fr !important; }
+  .app.is-mobile .sidebar {
+    /* Collapsed (drawer closed): out of the flow + invisible. */
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
+    padding: var(--s-3);
+    background: var(--bg);
+    border-right: 0;
+    overflow-y: auto;
+  }
+  .app.is-mobile.drawer-open .sidebar { transform: translateX(0); }
+  /* Brand + nav labels come BACK on mobile — they were hidden by the
+     900px collapse rule above. */
+  .app.is-mobile .brand-name,
+  .app.is-mobile .nav-label,
+  .app.is-mobile .nav-badge { opacity: 1; pointer-events: auto; }
+  /* Sidebar drag handle isn't useful at full-screen; close button isn't
+     either since the FAB doubles as a toggle. */
+  .app.is-mobile .sidebar [aria-label="resize sidebar"] { display: none; }
+  .app.is-mobile .collapse-toggle { display: none; }
+
+  /* Main pane occupies full width — no sidebar gutter. */
+  .app.is-mobile .main { padding: 0 var(--s-3); }
+  /* Session pane edge-to-edge margin needs to match the new padding. */
+  .app.is-mobile .session-pane { margin: 0 calc(-1 * var(--s-3)); }
+
+  /* The bottom-left FAB (52px circle + 16px margin) overlaps content
+     near the bottom-left corner. Reserve room inside scroll containers
+     so the last button / row isn't trapped under it. */
+  .app.is-mobile .settings-scroll { padding-bottom: 80px; }
+  .app.is-mobile .remote-page     { padding-bottom: 80px; }
+  /* Launch page is its own block (no scroll wrapper) — push it up too
+     so the Launch button doesn't end up under the FAB. */
+  .app.is-mobile [data-panel="launch"]   { padding-bottom: 80px; }
+  .app.is-mobile [data-panel="about"]    { padding-bottom: 80px; }
+  /* Sessions terminal: the .session-actions footer / tabs at top means
+     the FAB sits over the terminal corner — leave it; the user can
+     scroll the terminal independently. */
+
+  /* Long inline code (URLs, paths) in the About / Remote bodies break
+     out of card edges on a narrow viewport. Let them wrap on any
+     character instead of stretching the line. */
+  .settings-section code,
+  .card code,
+  .remote-fact code {
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  /* iOS Safari + Edge auto-zoom the viewport when the user taps an
+     <input>/<textarea> whose font-size is < 16px — "terminal suddenly
+     goes huge" was almost certainly this. xterm.js's hidden
+     .xterm-helper-textarea sits at 12px CSS by default; bumping it to
+     16px stops the auto-zoom without affecting visible text (the
+     textarea is positioned at the cursor and overlapped by canvas
+     glyphs). Same defensive bump on every actual form input. */
+  .xterm-helper-textarea,
+  .input,
+  input[type="text"],
+  input[type="search"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="url"],
+  textarea,
+  select { font-size: 16px !important; }
+}
+
+/* FAB + backdrop · sit above page content but BELOW dialogs. */
+.mobile-nav-fab {
+  position: fixed;
+  bottom: max(16px, env(safe-area-inset-bottom));
+  left:   max(16px, env(safe-area-inset-left));
+  z-index: 210;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: 1px solid var(--border-strong);
+  background: var(--bg-elev);
+  color: var(--ink);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 10px 24px -6px rgba(0,0,0,.28),
+    0 2px 4px rgba(0,0,0,.10);
+  cursor: pointer;
+  transition: transform .15s, box-shadow .15s, background .15s;
+}
+.mobile-nav-fab:hover  { transform: translateY(-1px); background: var(--bg); }
+.mobile-nav-fab:active { transform: translateY(0); }
+.mobile-nav-fab svg { width: 22px; height: 22px; stroke-width: 2; }
+/* Open state stays the same paper white — only the icon swaps to X.
+   Keeping the colour consistent reads as "same button, different
+   mode" instead of two different controls. */
+.mobile-nav-fab.is-open {
+  background: var(--bg-elev);
+  color: var(--ink);
+  border-color: var(--ink);
+}
+
+.mobile-nav-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 199;     /* below sidebar (200) + fab (210), above content */
+  background: rgba(26, 24, 21, 0.45);
+  backdrop-filter: blur(2px);
+  animation: panel-in .15s ease-out;
+}

package/public/css/terminals.css

@@ -418,11 +418,25 @@
   height: 100%;
 }
 .session-pane-body .terminal-empty {
-  background: var(--bg);
+  background: #1a1815;
+  color: #e8e3d5;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--s-3);
   height: 100%;
+  font-size: 13px;
+}
+.session-pane-body .terminal-empty .mono {
+  color: #e07b6e;
+}
+.session-pane-body .terminal-empty .action.primary {
+  background: #e8e3d5;
+  color: #1a1815;
+  border-color: #e8e3d5;
+}
+.session-pane-body .terminal-empty .action.primary:hover {
+  background: #faf9f5;
+  border-color: #faf9f5;
 }