9remote 0.1.53 → 0.1.55

package/cli/index.js

@@ -10,10 +10,12 @@ import fs from "fs";
 import os from "os";
 import { getConsistentMachineId } from "./utils/machineId.js";
 import { generateApiKeyWithMachine } from "./utils/apiKey.js";
-import { loadKey, saveKey, loadState, saveState, clearState } from "./utils/state.js";
+import { loadKey, saveKey, loadState, saveState, clearState, readAndClearCmd } from "./utils/state.js";
 import { createTempKey } from "./utils/token.js";
-import { checkAndUpdate } from "./utils/updateChecker.js";
-import { spawnQuickTunnel, killCloudflared, resetRestartCounter } from "./utils/cloudflared.js";
+import { checkAndUpdate, checkLatestVersion } from "./utils/updateChecker.js";
+import { spawnQuickTunnel, killCloudflared, resetRestartCounter, ensureCloudflared } from "./utils/cloudflared.js";
+import { showBanner, renderProgress, resetProgress, selectMenu, confirm as tuiConfirm, subscribeSSE, openPermissionPane } from "./utils/tui.js";
+import { checkPermissions } from "./utils/permissions.js";
 
 // Parse --skip-update flag
 const skipUpdate = process.argv.includes("--skip-update");
@@ -52,54 +54,23 @@ function getVersion() {
   }
 }
 
-/**
- * Show banner
- */
-function showBanner() {
-  const version = getVersion();
-  const width = Math.min(44, process.stdout.columns || 44);
-  
-  console.log("");
-  console.log(ORANGE("╔" + "═".repeat(width - 2) + "╗"));
-  console.log(ORANGE("║") + " ".repeat(width - 2) + ORANGE("║"));
-  
-  const title = `🚀  9Remote v${version}`;
-  const titlePadding = Math.floor((width - 2 - title.length) / 2);
-  console.log(
-    ORANGE("║") + 
-    " ".repeat(titlePadding) + 
-    ORANGE.bold(title) + 
-    " ".repeat(width - 2 - titlePadding - title.length) + 
-    ORANGE("║")
-  );
-  
-  const subtitle = "Remote terminal access from anywhere";
-  const subtitlePadding = Math.floor((width - 2 - subtitle.length) / 2);
-  console.log(
-    ORANGE("║") + 
-    " ".repeat(subtitlePadding) + 
-    chalk.gray(subtitle) + 
-    " ".repeat(width - 2 - subtitlePadding - subtitle.length) + 
-    ORANGE("║")
-  );
-  
-  console.log(ORANGE("║") + " ".repeat(width - 2) + ORANGE("║"));
-  console.log(ORANGE("╚" + "═".repeat(width - 2) + "╝"));
-  console.log("");
-}
 
 /**
  * Helper: Show QR code for connect URL
  */
 function showQRCode(url, title = "📱 Scan QR to connect:") {
   console.log(ORANGE(`\n${title}`));
-  qrcode.generate(url, {
-    small: true,
-    type: 'terminal',
-    margin: 0,
-  }, qr => {
-    const lines = qr.trim().split('\n');
-    console.log(lines.join('\n'));
+  qrcode.generate(url, { small: true, type: "terminal", margin: 0 }, (qr) => {
+    console.log(qr.trim());
+  });
+}
+
+/** Build QR block as string (for use in headerContent) */
+function buildQRString(url) {
+  return new Promise((resolve) => {
+    qrcode.generate(url, { small: true, type: "terminal", margin: 0 }, (qr) => {
+      resolve(ORANGE_DIM("📱 Scan QR to connect:") + "\n" + qr.trim());
+    });
   });
 }
 
@@ -119,7 +90,7 @@ async function showConnectionInfo(selectedKey, tunnelUrl) {
 
   // Push ready state to UI (include permanentKey, expiresAt, workerUrl for server-side key generation)
   pushUiState({
-    step: 3,
+    step: 4,
     tunnelUrl,
     oneTimeKey: tempKeyData.tempKey,
     oneTimeKeyExpiresAt: tempKeyData.expiresAt,
@@ -152,6 +123,31 @@ async function showConnectionInfo(selectedKey, tunnelUrl) {
   console.log(ORANGE("═".repeat(width)));
 }
 
+/**
+ * Build full header string: QR + keys info (for selectMenu headerContent)
+ */
+async function buildMenuHeader(oneTimeKey, permanentKey, connectUrl) {
+  const w = Math.min(44, process.stdout.columns || 44);
+  const lines = [];
+
+  if (oneTimeKey && connectUrl) {
+    const qrBlock = await buildQRString(connectUrl);
+    lines.push(qrBlock);
+    lines.push(chalk.gray("\nQR expires in 30 minutes (one-time use)\n"));
+  } else {
+    lines.push(chalk.gray("\n(One-time key used — generate a new one from menu)\n"));
+  }
+
+  lines.push(
+    ORANGE("═".repeat(w)),
+    chalk.white("App URL".padEnd(14))      + chalk.gray(`${WORKER_URL}/login`),
+    chalk.white("One-Time Key".padEnd(14)) + (oneTimeKey ? ORANGE.bold(oneTimeKey) + chalk.dim("  (expires in 30m)") : chalk.gray("—")),
+    chalk.white("Key".padEnd(14))          + chalk.dim(permanentKey),
+    ORANGE("═".repeat(w)),
+  );
+  return lines.join("\n");
+}
+
 /**
  * Kill process on specific port
  */
@@ -279,7 +275,8 @@ function setupExitHandler(serverManager, tunnelProcess, apiKey) {
     console.log(chalk.yellow("\n\n🛑 Stopping server..."));
     
     serverManager.shutdown();
-    tunnelProcess.kill();
+    if (tunnelProcess) tunnelProcess.kill();
+    killProcessOnPort(SERVER_PORT);
     resetRestartCounter();
     clearState();
     
@@ -388,10 +385,6 @@ async function startServerAndTunnel(selectedKey) {
     return null;
   }
 
-  console.log(ORANGE(`✅ Tunnel URL: ${tunnelUrl}`));
-  const lanIp = getLanIp();
-  if (lanIp) console.log(ORANGE(`✅ Local IP: ${lanIp}:${SERVER_PORT} (LAN direct available)`));
-  console.log(ORANGE(`✅ Connection established`));
 
   // Save tunnelUrl to worker DB
   await updateTunnelUrl(selectedKey, tunnelUrl);
@@ -409,160 +402,290 @@ async function startServerAndTunnel(selectedKey) {
 
 
 /**
- * Show main menu
+ * TUI mode — main flow for `9remote` (no subcommand)
  */
-async function mainMenu() {
+async function tuiMode() {
   console.clear();
-  showBanner();
-
-  const { action } = await inquirer.prompt([
-    {
-      type: "list",
-      name: "action",
-      message: "Select action:",
-      choices: [
-        { name: "🚀 Start Server", value: "start" },
-        { name: "🔑 Manage Key", value: "key" },
-        { name: "❌ Exit", value: "exit" }
-      ]
-    }
-  ]);
 
-  switch (action) {
-    case "start":
-      await startServer();
-      break;
-    case "key":
-      await manageKey();
-      break;
-    case "exit":
-      console.log(chalk.gray("Goodbye!"));
-      process.exit(0);
-  }
-}
-
-/**
- * Start server with single key
- */
-async function startServer() {
+  // ── 1. Parallel: check latest version + start server ──────────────────────
   const machineId = await getConsistentMachineId();
   let keyData = loadKey();
-
-  // Auto create key if none exists
   if (!keyData.key) {
-    console.log(chalk.yellow("\n⚠️  No key found. Creating default key..."));
     const { key } = generateApiKeyWithMachine(machineId);
     keyData = saveKey(machineId, key, "Default");
-    console.log(chalk.green("✅ Default key created!"));
   }
 
-  const result = await startServerAndTunnel(keyData.key);
-  if (!result) {
-    await inquirer.prompt([{ type: "input", name: "c", message: "Press Enter to go back..." }]);
-    await mainMenu();
-    return;
+  // Run update check & server start in parallel
+  let tuiServerMgr = { getProcess: () => null, shutdown: () => {} };
+  const [updateInfo] = await Promise.all([
+    checkLatestVersion(),
+    (async () => {
+      const alreadyRunning = await isServerRunning();
+      if (!alreadyRunning) {
+        tuiServerMgr = startServerWithRestart(null, null);
+        await new Promise((r) => setTimeout(r, 2000));
+      }
+    })(),
+  ]);
+
+  // ── 2. Show banner (with update notice if available) ──────────────────────
+  const version = getVersion();
+  showBanner(version, updateInfo?.latest ?? null);
+
+  // ── 3. Progress: Preparing → Connecting → Tunneling → Ready ──────────────
+  resetProgress();
+  renderProgress(0); // Preparing
+
+  // Kill stale cloudflared
+  try { killCloudflared(); await new Promise((r) => setTimeout(r, 300)); } catch {}
+
+  // Step 1 — Preparing (ensureCloudflared)
+  await ensureCloudflared();
+
+  renderProgress(1, true); // Connecting
+
+  // Step 2 — Connecting (create session)
+  try {
+    const res = await fetch(`${WORKER_URL}/api/session/create`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ apiKey: keyData.key }),
+    });
+    if (!res.ok) throw new Error(`Session create failed: ${res.status}`);
+  } catch (err) {
+    console.log(chalk.red(`\n❌ Failed to connect: ${err.message}`));
+    process.exit(1);
   }
 
-  const { serverManager, tunnelProcess, tunnelUrl } = result;
+  renderProgress(2, true); // Starting tunnel
 
-  await showConnectionInfo(keyData.key, tunnelUrl);
-  setupExitHandler(serverManager, tunnelProcess, keyData.key);
+  // Step 3 — Tunnel
+  let tunnelProcess, tunnelUrl;
+  try {
+    const result = await spawnQuickTunnel(SERVER_PORT, async (newUrl) => {
+      await updateTunnelUrl(keyData.key, newUrl);
+      await pushUiState({ tunnelUrl: newUrl });
+    });
+    tunnelProcess = result.child;
+    tunnelUrl = result.tunnelUrl;
+  } catch (err) {
+    console.log(chalk.red(`\n❌ Tunnel failed: ${err.message}`));
+    process.exit(1);
+  }
 
-  // Keep process alive
-  await new Promise(() => { });
+  await updateTunnelUrl(keyData.key, tunnelUrl);
+  saveState({ apiKey: keyData.key, tunnelUrl, tunnelPid: tunnelProcess.pid });
+
+  // ── 4. Create temp key + push ready state ─────────────────────────────────
+  const tempKeyData = await createTempKey(keyData.key, WORKER_URL);
+  const connectUrl = tempKeyData
+    ? `${WORKER_URL}/login?k=${tempKeyData.tempKey}`
+    : `${WORKER_URL}/login`;
+
+  await pushUiState({
+    step: 4,
+    tunnelUrl,
+    oneTimeKey: tempKeyData?.tempKey || "",
+    oneTimeKeyExpiresAt: tempKeyData?.expiresAt || null,
+    permanentKey: keyData.key,
+    qrUrl: connectUrl,
+    workerUrl: WORKER_URL,
+  });
+
+  // ── 5. Load initial state from server ────────────────────────────────────
+  let currentOneTimeKey = tempKeyData?.tempKey || "";
+  let currentConnectUrl = connectUrl;
+
+  // ── 6. Build initial header ───────────────────────────────────────────────
+  let menuHeader = await buildMenuHeader(currentOneTimeKey, keyData.key, currentConnectUrl);
+
+  // Mutable ref for menu re-render callback (set by selectMenu)
+  let triggerMenuRedraw = null;
+
+  // ── 7. Subscribe SSE — auto-rebuild header on state changes ──────────────
+  const stopSSE = subscribeSSE(SERVER_PORT, async (type, data) => {
+    if (type === "state") {
+      const newKey = data.permanentKey || keyData.key;
+      // Explicit check: "" means cleared (one-time key consumed), preserve existing if undefined
+      const newOtk = data.oneTimeKey !== undefined ? data.oneTimeKey : currentOneTimeKey;
+      const newUrl = data.qrUrl !== undefined ? data.qrUrl : currentConnectUrl;
+      if (newOtk !== currentOneTimeKey || newKey !== keyData.key) {
+        currentOneTimeKey = newOtk;
+        currentConnectUrl = newUrl;
+        if (data.permanentKey) keyData = { ...keyData, key: data.permanentKey };
+        menuHeader = await buildMenuHeader(currentOneTimeKey, keyData.key, currentConnectUrl);
+        triggerMenuRedraw?.();
+      }
+    } else if (type === "permissions") {
+      // desktopEnabled changed — trigger redraw so menu label refreshes
+      triggerMenuRedraw?.();
+    }
+  });
+
+  setupExitHandler({
+    getProcess: tuiServerMgr.getProcess,
+    shutdown: () => { tuiServerMgr.shutdown(); stopSSE(); }
+  }, tunnelProcess, keyData.key);
+
+  // ── 8. Interactive menu loop ───────────────────────────────────────────────
+  await tuiMenuLoop(
+    keyData, tunnelUrl,
+    () => menuHeader,
+    (h) => { menuHeader = h; },
+    (cb) => { triggerMenuRedraw = cb; },
+    () => { tuiServerMgr.shutdown(); killProcessOnPort(SERVER_PORT); stopSSE(); }
+  );
+}
+
+/** Fetch desktopEnabled from server (source of truth) */
+async function fetchDesktopEnabled() {
+  try {
+    const res = await fetch(`http://localhost:${SERVER_PORT}/api/ui/state`);
+    if (res.ok) { const d = await res.json(); return !!d.desktopEnabled; }
+  } catch {}
+  return false;
 }
 
 /**
- * Manage single key menu
+ * Main menu loop after Ready.
+ * @param {object} keyData
+ * @param {string} tunnelUrl
+ * @param {() => string} getHeader - live header getter (SSE may update it)
+ * @param {(newHeader: string) => void} setHeader - update header from inside loop
+ * @param {(cb: () => void) => void} onRedrawRegister - register redraw callback
  */
-async function manageKey() {
-  const machineId = await getConsistentMachineId();
-  let keyData = loadKey();
+async function tuiMenuLoop(keyData, tunnelUrl, getHeader = () => "", setHeader = () => {}, onRedrawRegister = () => {}, onCtrlC = null) {
+  while (true) {
+    const desktopOn = await fetchDesktopEnabled();
+    const desktopLabel = `Remote Desktop: ${desktopOn ? chalk.green("ON") : chalk.gray("OFF")}  ▶`;
+    const items = [
+      { label: "Open Web UI" },
+      { label: "New One-Time Key" },
+      { label: "Regenerate Permanent Key" },
+      { label: desktopLabel },
+      { label: chalk.gray("Exit") },
+    ];
+
+    // Register SSE-triggered redraw with selectMenu
+    let redrawMenu = null;
+    onRedrawRegister(() => redrawMenu?.());
+
+    const idx = await selectMenu("Select action", items, 0, getHeader, (setRedraw) => {
+      redrawMenu = setRedraw;
+    }, onCtrlC);
+
+    if (idx === 0) {
+      // Open UI
+      const url = `http://localhost:${SERVER_PORT}`;
+      const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+      spawn(cmd, [url], { detached: true, stdio: "ignore" }).unref();
+      console.log(chalk.green(`\n🌐 Opening ${url}\n`));
+
+    } else if (idx === 1) {
+      // New One-Time Key — rebuild header with fresh QR
+      const newTempKey = await createTempKey(keyData.key, WORKER_URL);
+      if (newTempKey) {
+        const newConnectUrl = `${WORKER_URL}/login?k=${newTempKey.tempKey}`;
+        setHeader(await buildMenuHeader(newTempKey.tempKey, keyData.key, newConnectUrl));
+        await pushUiState({ oneTimeKey: newTempKey.tempKey, oneTimeKeyExpiresAt: newTempKey.expiresAt, qrUrl: newConnectUrl });
+      }
 
-  // Auto create key if none exists
-  if (!keyData.key) {
-    console.log(chalk.yellow("\n⚠️  No key found. Creating default key..."));
-    const { key } = generateApiKeyWithMachine(machineId);
-    keyData = saveKey(machineId, key, "Default");
-    console.log(chalk.green("✅ Default key created!"));
-  }
+    } else if (idx === 2) {
+      // Regenerate Key
+      const confirmed = await tuiConfirm(chalk.yellow("⚠️  Replace current key and disconnect all sessions? Continue?"));
+      if (confirmed) {
+        const machineId = await getConsistentMachineId();
+        const { key } = generateApiKeyWithMachine(machineId);
+        keyData = saveKey(machineId, key, keyData.name || "Default");
+        await pushUiState({ permanentKey: keyData.key });
+        // Rebuild header with new key
+        const newTmp = await createTempKey(keyData.key, WORKER_URL);
+        if (newTmp) {
+          const newUrl = `${WORKER_URL}/login?k=${newTmp.tempKey}`;
+          setHeader(await buildMenuHeader(newTmp.tempKey, keyData.key, newUrl));
+          await pushUiState({ oneTimeKey: newTmp.tempKey, oneTimeKeyExpiresAt: newTmp.expiresAt, qrUrl: newUrl });
+        }
+      }
 
-  console.log(ORANGE("\n🔑 Manage Key"));
-  console.log(chalk.gray("━".repeat(30)));
-  console.log(chalk.white(`Key: ${keyData.key}`));
-  console.log(chalk.gray(`Created: ${keyData.createdAt}\n`));
-
-  const { action } = await inquirer.prompt([
-    {
-      type: "list",
-      name: "action",
-      message: "Action:",
-      choices: [
-        { name: "🔐 Create One-Time Key", value: "oneTime" },
-        { name: "🔄 Regenerate Key", value: "regenerate" },
-        { name: chalk.gray("← Back"), value: "back" }
-      ]
-    }
-  ]);
+    } else if (idx === 3) {
+      // Remote Desktop submenu
+      await tuiDesktopMenu();
 
-  if (action === "oneTime") {
-    console.log(chalk.gray("\nCreating one-time key..."));
-    const tempKeyData = await createTempKey(keyData.key, WORKER_URL);
-    
-    if (tempKeyData) {
-      const connectUrl = `${WORKER_URL}/login?k=${tempKeyData.tempKey}`;
-      const width = Math.min(50, process.stdout.columns || 50);
-      
-      showQRCode(connectUrl);
-      
-      console.log(chalk.gray(`\nQR will expire in 30 minutes (one-time use)\n`));
-      
-      console.log(ORANGE("═".repeat(width)));
-      
-      // App URL
-      const appLabel = "App URL";
-      const appValue = `${WORKER_URL}/login`;
-      console.log(chalk.white(appLabel.padEnd(16)) + chalk.gray(appValue));
-      
-      // One-Time Key
-      const keyLabel = "One-Time Key";
-      const keyValue = tempKeyData.tempKey;
-      console.log(chalk.white(keyLabel.padEnd(16)) + ORANGE.bold(keyValue));
-      
-      console.log(ORANGE("═".repeat(width)));
     } else {
-      console.log(chalk.red("❌ Failed to create one-time key"));
+      // Exit — kill server child process before exiting
+      killProcessOnPort(SERVER_PORT);
+      console.log(chalk.gray("\nGoodbye!\n"));
+      process.exit(0);
     }
-    await inquirer.prompt([{ type: "input", name: "continue", message: "Press Enter to continue..." }]);
   }
+}
 
-  if (action === "regenerate") {
-    const { confirm } = await inquirer.prompt([
-      {
-        type: "confirm",
-        name: "confirm",
-        message: chalk.yellow("⚠️  This will replace your current key. Continue?"),
-        default: false
+/**
+ * Remote Desktop submenu.
+ * All state (desktopEnabled + permissions) fetched from server — no local tracking.
+ */
+async function tuiDesktopMenu() {
+  while (true) {
+    // Always read from server
+    let desktopOn = false, perms = { screenRecording: false, accessibility: false };
+    try {
+      const res = await fetch(`http://localhost:${SERVER_PORT}/api/ui/state`);
+      if (res.ok) {
+        const d = await res.json();
+        desktopOn = !!d.desktopEnabled;
+        perms = { screenRecording: !!d.screenRecording, accessibility: !!d.accessibility };
       }
-    ]);
-
-    if (confirm) {
-      const { key } = generateApiKeyWithMachine(machineId);
-      keyData = saveKey(machineId, key, keyData.name);
-      
-      console.log(chalk.green(`\n✅ Key regenerated: ${keyData.key}`));
-      await inquirer.prompt([{ type: "input", name: "continue", message: "Press Enter to continue..." }]);
+    } catch {}
+
+    const toggleLabel = `Toggle: ${desktopOn ? chalk.green("ON  → turn OFF") : chalk.gray("OFF → turn ON")}`;
+    const srLabel = `Screen Recording          ${perms.screenRecording ? chalk.green("✓") : chalk.red("✗ (click to grant)")}`;
+    const axLabel = `Mouse & Keyboard control  ${perms.accessibility  ? chalk.green("✓") : chalk.red("✗ (click to grant)")}`;
+
+    const idx = await selectMenu("Remote Desktop", [
+      { label: toggleLabel },
+      { label: srLabel },
+      { label: axLabel },
+      { label: chalk.gray("← Back") },
+    ], 0);
+
+    if (idx === 0) {
+      // Toggle — flip current value via server
+      try {
+        await fetch(`http://localhost:${SERVER_PORT}/api/desktop/toggle`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ enabled: !desktopOn }),
+        });
+      } catch {}
+
+    } else if (idx === 1 && !perms.screenRecording) {
+      try {
+        await fetch(`http://localhost:${SERVER_PORT}/api/permissions/request`, {
+          method: "POST", headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ type: "screenRecording" }),
+        });
+      } catch { openPermissionPane("screenRecording"); }
+
+    } else if (idx === 2 && !perms.accessibility) {
+      try {
+        await fetch(`http://localhost:${SERVER_PORT}/api/permissions/request`, {
+          method: "POST", headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ type: "accessibility" }),
+        });
+      } catch { openPermissionPane("accessibility"); }
+
+    } else if (idx === 3 || idx === -1) {
+      return; // Back
     }
   }
-
-  await mainMenu();
 }
 
+
 /**
  * Auto start dev server (--auto flag)
  */
 async function autoStartDev() {
-  showBanner();
+  showBanner(getVersion());
 
   const machineId = await getConsistentMachineId();
   let keyData = loadKey();
@@ -602,17 +725,74 @@ async function autoStartDev() {
 
 
 /**
- * Listen for key regen request from server UI
+ * Listen for key regen, stop-tunnel, start-tunnel from server UI
  */
-function setupKeyRegenListener() {
-  process.on("9remote:regenerate-key", async () => {
-    const machineId = await getConsistentMachineId();
-    const { key } = generateApiKeyWithMachine(machineId);
-    const existing = loadKey();
-    saveKey(machineId, key, existing?.name || "Default");
-    pushUiState({ permanentKey: key });
-    console.log(chalk.green(`✅ Key regenerated: ${key}`));
-  });
+function setupCmdPoller(getActiveTunnel, setActiveTunnel, apiKey) {
+  let busy = false;
+  setInterval(async () => {
+    if (busy) return;
+    const cmd = readAndClearCmd();
+    if (!cmd) return;
+    busy = true;
+    try {
+
+    if (cmd === "stop-tunnel") {
+      const tunnel = getActiveTunnel();
+      if (tunnel) {
+        tunnel.kill();
+        setActiveTunnel(null);
+        console.log(chalk.yellow("🛑 Tunnel stopped"));
+      }
+      await pushUiState({ step: 0, tunnelUrl: "", oneTimeKey: "", oneTimeKeyExpiresAt: null });
+    }
+
+    if (cmd === "start-tunnel") {
+      if (getActiveTunnel()) { busy = false; return; } // already running
+      console.log(ORANGE("🚀 Starting tunnel..."));
+      try {
+        // Step 1: Preparing — check/download cloudflared binary
+        await pushUiState({ step: 1 });
+        await ensureCloudflared();
+
+        // Step 2: Connecting — create session on worker
+        await pushUiState({ step: 2 });
+        const sessionResponse = await fetch(`${WORKER_URL}/api/session/create`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ apiKey }),
+        });
+        if (!sessionResponse.ok) throw new Error(`Session create failed: ${sessionResponse.status}`);
+
+        // Step 3: Tunneling — spawn cloudflared
+        await pushUiState({ step: 3 });
+        const result = await spawnQuickTunnel(SERVER_PORT, async (newUrl) => {
+          await updateTunnelUrl(apiKey, newUrl);
+          await pushUiState({ tunnelUrl: newUrl });
+        });
+        setActiveTunnel(result.child);
+        await updateTunnelUrl(apiKey, result.tunnelUrl);
+
+        // Step 4: Ready
+        await showConnectionInfo(apiKey, result.tunnelUrl);
+      } catch (err) {
+        console.log(chalk.red(`❌ Failed to start tunnel: ${err.message}`));
+        await pushUiState({ step: 0 });
+      }
+    }
+
+    if (cmd === "regenerate-key") {
+      const machineId = await getConsistentMachineId();
+      const { key } = generateApiKeyWithMachine(machineId);
+      const existing = loadKey();
+      saveKey(machineId, key, existing?.name || "Default");
+      await pushUiState({ permanentKey: key });
+      console.log(chalk.green(`✅ Key regenerated: ${key}`));
+    }
+
+    } finally {
+      busy = false;
+    }
+  }, 1000);
 }
 
 /**
@@ -632,7 +812,7 @@ async function isServerRunning() {
  * Same as "Start Server" in TUI but auto-opens browser
  */
 async function startUiMode() {
-  showBanner();
+  showBanner(getVersion());
 
   const machineId = await getConsistentMachineId();
   let keyData = loadKey();
@@ -642,12 +822,13 @@ async function startUiMode() {
     keyData = saveKey(machineId, key, "Default");
   }
 
-  const result = await startServerAndTunnel(keyData.key);
-  if (!result) process.exit(1);
-
-  const { serverManager, tunnelProcess, tunnelUrl } = result;
+  // Start server only (no tunnel yet — wait for UI Connect button)
+  const alreadyRunning = await isServerRunning();
+  const serverManager = alreadyRunning
+    ? { getProcess: () => null, shutdown: () => {} }
+    : startServerWithRestart(null, null);
 
-  await showConnectionInfo(keyData.key, tunnelUrl);
+  if (!alreadyRunning) await new Promise(resolve => setTimeout(resolve, 2000));
 
   // Open browser pointing to UI
   const url = `http://localhost:${SERVER_PORT}`;
@@ -657,16 +838,16 @@ async function startUiMode() {
   spawn(openCmd, [url], { detached: true, stdio: "ignore" }).unref();
   console.log(chalk.green(`\n🌐 UI ready at ${url}`));
 
-  setupExitHandler(serverManager, tunnelProcess, keyData.key);
-  setupKeyRegenListener();
+  // Mutable ref for active tunnel
+  let activeTunnel = null;
+  const getActiveTunnel = () => activeTunnel;
+  const setActiveTunnel = (t) => { activeTunnel = t; };
 
-  // Push stats to UI every 5s
-  const startTime = Date.now();
-  setInterval(() => {
-    const uptime = Math.floor((Date.now() - startTime) / 1000);
-    const h = Math.floor(uptime / 3600), m = Math.floor((uptime % 3600) / 60), s = uptime % 60;
-    pushUiState({ uptime: `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}` });
-  }, 5000);
+  // Push permanentKey to UI so Welcome screen can display it
+  await pushUiState({ permanentKey: keyData.key, step: 0 });
+
+  setupExitHandler(serverManager, null, keyData.key);
+  setupCmdPoller(getActiveTunnel, setActiveTunnel, keyData.key);
 
   await new Promise(() => { });
 }
@@ -686,8 +867,8 @@ async function start() {
     // Direct start: 9remote start
     await autoStartDev();
   } else {
-    // Menu mode: 9remote
-    await mainMenu();
+    // TUI mode: 9remote
+    await tuiMode();
   }
 }