9remote 0.1.52 → 0.1.54

package/cli/index.js

@@ -8,48 +8,14 @@ import path from "path";
 import { fileURLToPath } from "url";
 import fs from "fs";
 import os from "os";
-import dns from "dns";
-import https from "https";
-import { promisify } from "util";
 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 { ensureCloudflared, spawnCloudflared, killCloudflared, resetRestartCounter } from "./utils/cloudflared.js";
-
-// DNS resolver using Cloudflare — ensures tunnel domains resolve immediately
-const cfResolver = new dns.Resolver();
-cfResolver.setServers(["1.1.1.1", "1.0.0.1"]);
-const cfResolve4 = promisify(cfResolver.resolve4.bind(cfResolver));
-
-/** Fetch via IP with correct TLS SNI — bypasses system DNS */
-function fetchWithCfDns(url, timeoutMs = 5000) {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const parsed = new URL(url);
-      const [ip] = await cfResolve4(parsed.hostname);
-      const req = https.request({
-        hostname: ip,
-        port: 443,
-        path: parsed.pathname + parsed.search,
-        method: "GET",
-        headers: { host: parsed.hostname },
-        servername: parsed.hostname,
-        rejectUnauthorized: true
-      }, (res) => {
-        let body = "";
-        res.on("data", d => { body += d; });
-        res.on("end", () => resolve({ ok: res.statusCode >= 200 && res.statusCode < 300, status: res.statusCode, body }));
-      });
-      req.setTimeout(timeoutMs, () => { req.destroy(); reject(new Error("timeout")); });
-      req.on("error", reject);
-      req.end();
-    } catch (err) {
-      reject(err);
-    }
-  });
-}
+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");
@@ -62,7 +28,6 @@ const STANDALONE_SERVER = path.resolve(__dirname, "../dist/server.cjs");
 const DEV_SERVER = path.resolve(__dirname, "../index.js");
 const WORKER_URL = "https://9remote.cc";
 const SERVER_PORT = 2208;
-const SHORT_ID_CHARS = "abcdefghijklmnpqrstuvwxyz23456789";
 const MAX_RESTART_ATTEMPTS = 10;
 const RESTART_WINDOW_MS = 60000; // 1 minute
 
@@ -89,65 +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("");
-}
-
-/**
- * Generate short random ID for tunnel subdomain
- */
-function generateShortId() {
-  let result = "";
-  for (let i = 0; i < 6; i++) {
-    result += SHORT_ID_CHARS.charAt(Math.floor(Math.random() * SHORT_ID_CHARS.length));
-  }
-  return result;
-}
 
 /**
  * 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());
+    });
   });
 }
 
@@ -165,12 +88,15 @@ async function showConnectionInfo(selectedKey, tunnelUrl) {
   const connectUrl = `${WORKER_URL}/login?k=${tempKeyData.tempKey}`;
   const width = Math.min(44, process.stdout.columns || 55);
 
-  // Push ready state to UI
+  // 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,
+    permanentKey: selectedKey,
     qrUrl: connectUrl,
+    workerUrl: WORKER_URL,
   });
 
   showQRCode(connectUrl);
@@ -197,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
  */
@@ -237,11 +188,15 @@ function startServerWithRestart(onReady, onServerCrash) {
       process.exit(1);
     }
     
+    // Strip NODE_ENV=development when running standalone server (production build)
+    const spawnEnv = { ...process.env, PORT: String(SERVER_PORT) };
+    if (!useDevServer) delete spawnEnv.NODE_ENV;
+
     currentProcess = spawn("node", [serverPath], {
       cwd: path.dirname(serverPath),
       stdio: ["ignore", "inherit", "inherit"],
       detached: false,
-      env: { ...process.env, PORT: String(SERVER_PORT) }
+      env: spawnEnv,
     });
     
 
@@ -320,7 +275,7 @@ function setupExitHandler(serverManager, tunnelProcess, apiKey) {
     console.log(chalk.yellow("\n\n🛑 Stopping server..."));
     
     serverManager.shutdown();
-    tunnelProcess.kill();
+    if (tunnelProcess) tunnelProcess.kill();
     resetRestartCounter();
     clearState();
     
@@ -342,25 +297,6 @@ function getLanIp() {
   return null;
 }
 
-/**
- * Helper: Create Named Tunnel via Worker API
- */
-async function createNamedTunnel(apiKey) {
-  const response = await fetch(`${WORKER_URL}/api/tunnel/create`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ apiKey })
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.error || "Failed to create tunnel");
-  }
-
-  const data = await response.json();
-  return data;
-}
-
 /** Push UI state to server via HTTP */
 async function pushUiState(data) {
   try {
@@ -373,7 +309,25 @@ async function pushUiState(data) {
 }
 
 /**
- * Helper: Start server and tunnel
+ * Update session tunnelUrl on worker + push to UI
+ */
+async function updateTunnelUrl(selectedKey, tunnelUrl) {
+  const lanIp = getLanIp();
+  try {
+    await fetch(`${WORKER_URL}/api/session/update`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        apiKey: selectedKey,
+        tunnelUrl,
+        localIp: lanIp ? `${lanIp}:${SERVER_PORT}` : null
+      })
+    });
+  } catch { }
+}
+
+/**
+ * Helper: Start server and quick tunnel
  */
 async function startServerAndTunnel(selectedKey) {
   console.log(ORANGE("\n🚀 Starting server..."));
@@ -382,193 +336,61 @@ async function startServerAndTunnel(selectedKey) {
   // Kill existing cloudflared process
   try {
     killCloudflared();
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await new Promise(resolve => setTimeout(resolve, 500));
   } catch { }
 
-  // Reuse existing shortId or generate new one
-  const existingState = loadState();
-  const shortId = existingState?.shortId || generateShortId();
-
-  // Create session first
+  // Create session on worker
   try {
     const sessionResponse = await fetch(`${WORKER_URL}/api/session/create`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiKey: selectedKey, shortId })
+      body: JSON.stringify({ apiKey: selectedKey })
     });
-    
     if (!sessionResponse.ok) {
       const text = await sessionResponse.text();
-      console.log(chalk.red(`❌ Failed to create session: ${sessionResponse.status} ${sessionResponse.statusText}`));
-      console.log(chalk.yellow(`Response: ${text.substring(0, 200)}`));
+      console.log(chalk.red(`❌ Failed to create session: ${sessionResponse.status} ${text.substring(0, 200)}`));
       return null;
     }
-    
-    const sessionData = await sessionResponse.json();
   } catch (error) {
     console.log(chalk.red(`❌ Failed to create session: ${error.message}`));
     return null;
   }
 
-  // tunnelProcess declared here so the serverManager crash callback can reference it
-  let tunnelProcess = null;
-
   // Skip spawning server if already running (e.g. nodemon in dev mode)
   const alreadyRunning = await isServerRunning();
-
-  // Start server with auto-restart (skip if already running)
   const serverManager = alreadyRunning
     ? { getProcess: () => null, shutdown: () => {} }
-    : startServerWithRestart(null, async () => {
-    // Callback khi server crash - đợi server ready rồi gửi SIGHUP
-    
-    if (!tunnelProcess) {
-      return;
-    }
-    
-    // Wait for server to be ready
-    const maxWait = 60000; // 60s
-    const checkInterval = 1000; // 1s
-    const maxRetries = Math.floor(maxWait / checkInterval);
-    let serverReady = false;
-    
-    for (let i = 0; i < maxRetries; i++) {
-      try {
-        const response = await fetch(`http://localhost:${SERVER_PORT}/api/health`, {
-          method: "GET",
-          timeout: 2000
-        });
-        
-        if (response.ok) {
-          const data = await response.json();
-          if (data.status === "ok") {
-            serverReady = true;
-            console.log(chalk.green(`✅ Server ready after ${i + 1}s`));
-            break;
-          }
-        }
-      } catch (err) {
-        // Server not ready yet
-      }
-      
-      if (i % 5 === 0) {
-      }
-      
-      await new Promise(resolve => setTimeout(resolve, checkInterval));
-    }
-    
-    if (!serverReady) {
-      console.log(chalk.red("❌ Server not ready after 60s - skipping tunnel reconnect"));
-      return;
-    }
-    
-    // Server ready - send SIGHUP to cloudflared to reconnect
-    try {
-      process.kill(tunnelProcess.pid, "SIGHUP");
-      console.log(chalk.green("✅ SIGHUP sent - cloudflared should reconnect"));
-    } catch (err) {      
-      // Fallback: kill and restart
-      try {
-        tunnelProcess.kill();
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        tunnelProcess = await startTunnel(token);
-        console.log(chalk.green("✅ Tunnel restarted"));
-      } catch (restartErr) {
-        console.log(chalk.red(`❌ Failed to restart tunnel: ${restartErr.message}`));
-      }
-    }
-  });
+    : startServerWithRestart(null, null);
 
-  // Wait for server to start (skip if already running)
-  if (!alreadyRunning) await new Promise((resolve) => setTimeout(resolve, 2000));
+  if (!alreadyRunning) await new Promise(resolve => setTimeout(resolve, 2000));
 
-  console.log(ORANGE("✅ Creating tunnel..."));
+  console.log(ORANGE("✅ Starting tunnel..."));
   pushUiState({ step: 2 });
 
-  // Ensure cloudflared binary
+  // Spawn quick tunnel — URL comes directly from cloudflared stdout
+  let tunnelProcess, tunnelUrl;
   try {
-    await ensureCloudflared();
+    const result = await spawnQuickTunnel(SERVER_PORT, async (newUrl) => {
+      // URL rotated — update worker + UI
+      console.log(ORANGE(`🔄 Tunnel URL rotated: ${newUrl}`));
+      await updateTunnelUrl(selectedKey, newUrl);
+      pushUiState({ tunnelUrl: newUrl });
+    });
+    tunnelProcess = result.child;
+    tunnelUrl = result.tunnelUrl;
   } catch (error) {
-    console.log(chalk.red(`❌ Failed to install cloudflared: ${error.message}`));
+    console.log(chalk.red(`❌ Failed to start tunnel: ${error.message}`));
     serverManager.shutdown();
     return null;
   }
 
-  // Create Named Tunnel via Worker API
-  let tunnelData;
-  try {
-    tunnelData = await createNamedTunnel(selectedKey);
-    console.log(ORANGE(`✅ Tunnel ID: ${tunnelData.tunnelId}`));
-  } catch (error) {
-    console.log(chalk.red(`❌ Failed to create tunnel: ${error.message}`));
-    serverManager.shutdown();
-    return null;
-  }
 
-  const { token, hostname: tunnelUrl } = tunnelData;
+  // Save tunnelUrl to worker DB
+  await updateTunnelUrl(selectedKey, tunnelUrl);
 
-  // Spawn cloudflared with token and auto-restart callback
-  console.log(ORANGE("✅ Starting tunnel..."));
-  
-  const startTunnel = async (tunnelToken) => {
-    try {
-      tunnelProcess = await spawnCloudflared(tunnelToken, startTunnel);
-      return tunnelProcess;
-    } catch (error) {
-      console.log(chalk.red(`❌ Failed to start cloudflared: ${error.message}`));
-      return null;
-    }
-  };
-  
-  tunnelProcess = await startTunnel(token);
-  if (!tunnelProcess) {
-    serverManager.shutdown();
-    return null;
-  }
-
-  // Verify tunnel reachable via Cloudflare DNS + https.request (bypasses system DNS)
-  const spinners = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-  let tunnelReady = false;
-  for (let i = 0; i < 30; i++) {
-    try {
-      const res = await fetchWithCfDns(`${tunnelUrl}/api/health`);
-      if (res.ok) { tunnelReady = true; break; }
-    } catch { }
-    process.stdout.write(`\r   Verifying tunnel ${spinners[i % spinners.length]} (${i * 2}s)`);
-    await new Promise(r => setTimeout(r, 2000));
-  }
-  process.stdout.write("\r" + " ".repeat(40) + "\r");
-
-  if (!tunnelReady) {
-    console.log(chalk.red("❌ Tunnel not reachable from outside"));
-    serverManager.shutdown();
-    tunnelProcess.kill();
-    return null;
-  }
-
-  console.log(ORANGE(`✅ Tunnel URL: ${tunnelUrl}`));
-  const lanIpLog = getLanIp();
-  if (lanIpLog) console.log(ORANGE(`✅ Local IP: ${lanIpLog}:${SERVER_PORT} (LAN direct available)`));
-  console.log(ORANGE(`✅ Connection established`));
-
-  // Update session with tunnelUrl + localIp (worker detects publicIp via CF-Connecting-IP)
-  const lanIp = lanIpLog;
-  try {
-    await fetch(`${WORKER_URL}/api/session/update`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        apiKey: selectedKey,
-        tunnelUrl,
-        localIp: lanIp ? `${lanIp}:${SERVER_PORT}` : null
-      })
-    });
-  } catch { }
-
-  // Save state (persist shortId for reuse on restart)
+  // Save local state
   saveState({
     apiKey: selectedKey,
-    shortId,
     tunnelUrl,
     serverPid: serverManager.getProcess()?.pid,
     tunnelPid: tunnelProcess.pid
@@ -579,160 +401,284 @@ 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
+  const [updateInfo] = await Promise.all([
+    checkLatestVersion(),
+    (async () => {
+      const alreadyRunning = await isServerRunning();
+      if (!alreadyRunning) {
+        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: () => null, shutdown: () => { stopSSE(); } }, tunnelProcess, keyData.key);
+
+  // ── 8. Interactive menu loop ───────────────────────────────────────────────
+  await tuiMenuLoop(
+    keyData, tunnelUrl,
+    () => menuHeader,
+    (h) => { menuHeader = h; },
+    (cb) => { triggerMenuRedraw = cb; }
+  );
+}
+
+/** 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 = () => {}) {
+  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;
+    });
 
-  // 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!"));
-  }
+    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 });
+      }
 
-  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 === 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 });
+        }
+      }
+
+    } 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
+      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 };
       }
-    ]);
+    } catch {}
 
-    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..." }]);
+    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();
@@ -756,6 +702,7 @@ async function autoStartDev() {
 
   await showConnectionInfo(keyData.key, tunnelUrl);
   setupExitHandler(serverManager, tunnelProcess, keyData.key);
+  setupKeyRegenListener();
 
   // Push stats to UI every 5s
   const startTime = Date.now();
@@ -770,6 +717,77 @@ async function autoStartDev() {
 }
 
 
+/**
+ * Listen for key regen, stop-tunnel, start-tunnel from server UI
+ */
+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);
+}
+
 /**
  * Check if server is already running on SERVER_PORT
  */
@@ -787,7 +805,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();
@@ -797,12 +815,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}`;
@@ -812,15 +831,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);
+  // 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(() => { });
 }
@@ -840,8 +860,8 @@ async function start() {
     // Direct start: 9remote start
     await autoStartDev();
   } else {
-    // Menu mode: 9remote
-    await mainMenu();
+    // TUI mode: 9remote
+    await tuiMode();
   }
 }