openclaw-navigator 2.1.0 → 4.0.0

package/cli.mjs

@@ -1,24 +1,24 @@
 #!/usr/bin/env node
 
 /**
- * openclaw-navigator
+ * openclaw-navigator v4.0.0
  *
- * Self-contained Navigator bridge server.
- * Starts an HTTP server with all Navigator endpoints, sets up a tunnel,
- * generates pairing info, and keeps running as the bridge.
- *
- * Zero dependencies — pure Node.js.
+ * One-command bridge + tunnel for the Navigator browser.
+ * Starts a local bridge, creates a Cloudflare tunnel automatically,
+ * and gives you a 6-digit pairing code. Works on any OS.
  *
  * Usage:
- *   npx openclaw-navigator
- *   npx openclaw-navigator --port 18790
+ *   npx openclaw-navigator                  Auto-tunnel (default)
+ *   npx openclaw-navigator --no-tunnel      Local only (SSH/LAN mode)
+ *   npx openclaw-navigator --port 18790     Custom port
  */
 
+import { spawn } from "node:child_process";
+import { randomUUID } from "node:crypto";
+import { existsSync } from "node:fs";
 import { createServer } from "node:http";
-import { createInterface } from "node:readline";
-import { execSync, spawn } from "node:child_process";
 import { networkInterfaces, hostname, userInfo } from "node:os";
-import { randomUUID } from "node:crypto";
+// readline reserved for future interactive mode
 
 // ── Colors (ANSI) ──────────────────────────────────────────────────────────
 
@@ -53,14 +53,26 @@ const recentEvents = [];
 const MAX_EVENTS = 200;
 const validTokens = new Set();
 
-// ── Helpers ────────────────────────────────────────────────────────────────
+// Pairing code state
+let pairingCode = null;
+let pairingData = null;
+
+function generatePairingCode() {
+  return String(Math.floor(100000 + Math.random() * 900000));
+}
+
+// ── Network helpers ────────────────────────────────────────────────────────
 
 function getLocalIP() {
   const ifaces = networkInterfaces();
   for (const entries of Object.values(ifaces)) {
-    if (!entries) continue;
+    if (!entries) {
+      continue;
+    }
     for (const e of entries) {
-      if (e.family === "IPv4" && !e.internal) return e.address;
+      if (e.family === "IPv4" && !e.internal) {
+        return e.address;
+      }
     }
   }
   return null;
@@ -69,85 +81,64 @@ function getLocalIP() {
 function getTailscaleIP() {
   const ifaces = networkInterfaces();
   for (const entries of Object.values(ifaces)) {
-    if (!entries) continue;
+    if (!entries) {
+      continue;
+    }
     for (const e of entries) {
-      if (e.family !== "IPv4" || e.internal) continue;
+      if (e.family !== "IPv4" || e.internal) {
+        continue;
+      }
       const [a, b] = e.address.split(".").map(Number);
-      if (a === 100 && b >= 64 && b <= 127) return e.address;
+      if (a === 100 && b >= 64 && b <= 127) {
+        return e.address;
+      }
     }
   }
   return null;
 }
 
-function getTailscaleDNS() {
-  try {
-    const raw = execSync("tailscale status --json", { encoding: "utf8", timeout: 5000 });
-    const status = JSON.parse(raw);
-    const dns = status?.Self?.DNSName;
-    if (dns) return dns.replace(/\.$/, "");
-  } catch { /* ignore */ }
-  return null;
-}
+// ── Cloudflared auto-install + tunnel ─────────────────────────────────────
 
-function setupTailscaleServe(localPort, httpsPort = 8443) {
-  try {
-    // Set up tailscale serve to proxy HTTPS → our local HTTP server
-    execSync(`tailscale serve --bg --https=${httpsPort} http://localhost:${localPort}`, {
-      stdio: "ignore",
-      timeout: 10_000,
-    });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-function teardownTailscaleServe(httpsPort = 8443) {
+/**
+ * Ensure the cloudflared binary is available.
+ * Uses the `cloudflared` npm package which auto-downloads the right binary
+ * for the current platform on first use.
+ */
+async function ensureCloudflared() {
   try {
-    execSync(`tailscale serve --https=${httpsPort} off`, { stdio: "ignore", timeout: 5000 });
-  } catch { /* ignore */ }
-}
+    const cf = await import("cloudflared");
+    const binPath = cf.bin;
+
+    if (!existsSync(binPath)) {
+      process.stdout.write(`  ${DIM}Downloading tunnel tool (one-time)...${RESET}`);
+      await cf.install(binPath);
+      process.stdout.write(`\r${" ".repeat(60)}\r`);
+      ok("Tunnel tool installed");
+    }
 
-function commandExists(cmd) {
-  try {
-    execSync(`which ${cmd}`, { stdio: "ignore" });
-    return true;
+    return binPath;
   } catch {
-    return false;
+    return null;
   }
 }
 
-async function ask(question, options) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
-    if (options) {
-      console.log(`\n${BOLD}${question}${RESET}`);
-      options.forEach((opt, i) => {
-        console.log(`  ${CYAN}${i + 1}${RESET}) ${opt.label}${opt.hint ? `  ${DIM}${opt.hint}${RESET}` : ""}`);
-      });
-      rl.question(`\n${DIM}Enter choice [1-${options.length}]:${RESET} `, (answer) => {
-        rl.close();
-        const idx = parseInt(answer, 10) - 1;
-        resolve(options[idx]?.value ?? options[0]?.value);
-      });
-    } else {
-      rl.question(`${question} `, (answer) => {
-        rl.close();
-        resolve(answer.trim());
-      });
-    }
-  });
-}
-
-function startCloudflaredTunnel(port) {
+/**
+ * Start a Cloudflare Quick Tunnel pointing at our local bridge.
+ * Returns the public https:// URL, or null on failure.
+ */
+function startTunnel(cloudflaredBin, port) {
   return new Promise((resolve) => {
-    const child = spawn("cloudflared", ["tunnel", "--url", `http://localhost:${port}`], {
+    const child = spawn(cloudflaredBin, ["tunnel", "--url", `http://localhost:${port}`], {
       stdio: ["ignore", "pipe", "pipe"],
     });
 
     let done = false;
     const timeout = setTimeout(() => {
-      if (!done) { done = true; child.kill(); resolve(null); }
+      if (!done) {
+        done = true;
+        child.kill();
+        resolve(null);
+      }
     }, 30_000);
 
     const onData = (data) => {
@@ -155,14 +146,19 @@ function startCloudflaredTunnel(port) {
       if (match && !done) {
         done = true;
         clearTimeout(timeout);
-        child.unref();
-        resolve(match[0]);
+        resolve({ url: match[0], process: child });
       }
     };
 
     child.stdout?.on("data", onData);
     child.stderr?.on("data", onData);
-    child.on("error", () => { if (!done) { done = true; clearTimeout(timeout); resolve(null); } });
+    child.on("error", () => {
+      if (!done) {
+        done = true;
+        clearTimeout(timeout);
+        resolve(null);
+      }
+    });
   });
 }
 
@@ -173,7 +169,9 @@ async function readBody(req, maxBytes = 1024 * 1024) {
   let size = 0;
   for await (const chunk of req) {
     size += chunk.length;
-    if (size > maxBytes) throw new Error("payload too large");
+    if (size > maxBytes) {
+      throw new Error("payload too large");
+    }
     chunks.push(chunk);
   }
   return Buffer.concat(chunks).toString("utf8");
@@ -201,7 +199,7 @@ function handleRequest(req, res) {
     return;
   }
 
-  const url = new URL(req.url ?? "/", `http://localhost`);
+  const url = new URL(req.url ?? "/", "http://localhost");
   const path = url.pathname.replace(/\/+$/, "");
 
   // ── GET /navigator/status ──
@@ -220,7 +218,6 @@ function handleRequest(req, res) {
 
   // ── GET /navigator/commands ──
   if (req.method === "GET" && path === "/navigator/commands") {
-    // Mark as connected on first poll
     if (!bridgeState.connected) {
       bridgeState.connected = true;
       bridgeState.connectedAt = Date.now();
@@ -228,7 +225,6 @@ function handleRequest(req, res) {
     }
     bridgeState.lastHeartbeat = Date.now();
 
-    // Drain pending commands
     const commands = [...pendingCommands];
     pendingCommands.length = 0;
     sendJSON(res, 200, { ok: true, commands });
@@ -237,93 +233,118 @@ function handleRequest(req, res) {
 
   // ── POST /navigator/events ──
   if (req.method === "POST" && path === "/navigator/events") {
-    readBody(req).then((bodyStr) => {
-      try {
-        const body = JSON.parse(bodyStr);
-        const event = {
-          type: body.type ?? "unknown",
-          url: body.url,
-          title: body.title,
-          content: body.content,
-          tabId: body.tabId,
-          timestamp: body.timestamp ?? Date.now(),
-          data: body.data,
-        };
-        recentEvents.push(event);
-        if (recentEvents.length > MAX_EVENTS) recentEvents.shift();
-
-        // Update state from heartbeats
-        if (body.type === "heartbeat") {
-          bridgeState.lastHeartbeat = Date.now();
-          bridgeState.activeTabCount = body.data?.tabCount ?? bridgeState.activeTabCount;
-          bridgeState.currentURL = body.url ?? bridgeState.currentURL;
-        }
-        if (body.type === "page.navigated") {
-          bridgeState.currentURL = body.url;
-          console.log(`  ${DIM}📄 ${body.title || body.url}${RESET}`);
+    readBody(req)
+      .then((bodyStr) => {
+        try {
+          const body = JSON.parse(bodyStr);
+          const event = {
+            type: body.type ?? "unknown",
+            url: body.url,
+            title: body.title,
+            content: body.content,
+            tabId: body.tabId,
+            timestamp: body.timestamp ?? Date.now(),
+            data: body.data,
+          };
+          recentEvents.push(event);
+          if (recentEvents.length > MAX_EVENTS) {
+            recentEvents.shift();
+          }
+
+          if (body.type === "heartbeat") {
+            bridgeState.lastHeartbeat = Date.now();
+            bridgeState.activeTabCount = body.data?.tabCount ?? bridgeState.activeTabCount;
+            bridgeState.currentURL = body.url ?? bridgeState.currentURL;
+          }
+          if (body.type === "page.navigated") {
+            bridgeState.currentURL = body.url;
+            console.log(`  ${DIM}📄 ${body.title || body.url}${RESET}`);
+          }
+
+          sendJSON(res, 200, { ok: true, received: event.type });
+        } catch {
+          sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
         }
-
-        sendJSON(res, 200, { ok: true, received: event.type });
-      } catch {
-        sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-      }
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Bad request" });
-    });
+      })
+      .catch(() => {
+        sendJSON(res, 400, { ok: false, error: "Bad request" });
+      });
     return;
   }
 
   // ── POST /navigator/pair ──
   if (req.method === "POST" && path === "/navigator/pair") {
-    readBody(req).then((bodyStr) => {
-      try {
-        const body = JSON.parse(bodyStr);
-        const displayName = body.displayName ?? hostname();
-        const token = randomUUID().replace(/-/g, "");
-        validTokens.add(token);
-
-        sendJSON(res, 200, {
-          ok: true,
-          token,
-          displayName,
-          expiresIn: "24 hours",
-        });
-      } catch {
-        sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-      }
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Bad request" });
-    });
+    readBody(req)
+      .then((bodyStr) => {
+        try {
+          const body = JSON.parse(bodyStr);
+          const displayName = body.displayName ?? hostname();
+          const token = randomUUID().replace(/-/g, "");
+          validTokens.add(token);
+
+          sendJSON(res, 200, {
+            ok: true,
+            token,
+            displayName,
+            expiresIn: "24 hours",
+          });
+        } catch {
+          sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
+        }
+      })
+      .catch(() => {
+        sendJSON(res, 400, { ok: false, error: "Bad request" });
+      });
     return;
   }
 
-  // ── POST /navigator/command (push command to Navigator) ──
+  // ── POST /navigator/command ──
   if (req.method === "POST" && path === "/navigator/command") {
-    readBody(req).then((bodyStr) => {
-      try {
-        const body = JSON.parse(bodyStr);
-        const command = body.command ?? body.action;
-        const payload = body.payload ?? {};
-
-        if (!command || typeof command !== "string") {
-          sendJSON(res, 400, { ok: false, error: "Missing 'command' field" });
-          return;
+    readBody(req)
+      .then((bodyStr) => {
+        try {
+          const body = JSON.parse(bodyStr);
+          const command = body.command ?? body.action;
+          const payload = body.payload ?? {};
+
+          if (!command || typeof command !== "string") {
+            sendJSON(res, 400, { ok: false, error: "Missing 'command' field" });
+            return;
+          }
+
+          const id = randomUUID();
+          pendingCommands.push({ id, command, payload, createdAt: Date.now() });
+          console.log(`  ${CYAN}⌘${RESET} Command queued: ${command}`);
+          sendJSON(res, 200, { ok: true, commandId: id, command });
+        } catch {
+          sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
         }
+      })
+      .catch(() => {
+        sendJSON(res, 400, { ok: false, error: "Bad request" });
+      });
+    return;
+  }
 
-        const id = randomUUID();
-        pendingCommands.push({ id, command, payload, createdAt: Date.now() });
-        console.log(`  ${CYAN}⌘${RESET} Command queued: ${command}`);
-        sendJSON(res, 200, { ok: true, commandId: id, command });
-      } catch {
-        sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-      }
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Bad request" });
+  // ── GET /navigator/resolve-code ──
+  // Navigator sends the 6-digit code; bridge returns URL + token for auto-connect
+  if (req.method === "GET" && path === "/navigator/resolve-code") {
+    const code = url.searchParams.get("code")?.trim();
+    if (!code || !pairingCode || code !== pairingCode) {
+      sendJSON(res, 403, { ok: false, error: "Invalid pairing code" });
+      return;
+    }
+    // Code is valid — return connection details
+    sendJSON(res, 200, {
+      ok: true,
+      url: pairingData.url,
+      token: pairingData.token,
+      name: pairingData.name,
     });
     return;
   }
 
-  // ── GET /navigator/events (read recent events) ──
+  // ── GET /navigator/events ──
   if (req.method === "GET" && path === "/navigator/events") {
     const limit = parseInt(url.searchParams.get("limit") ?? "50", 10);
     const events = recentEvents.slice(-Math.min(limit, MAX_EVENTS));
@@ -333,38 +354,34 @@ function handleRequest(req, res) {
 
   // ── Health check ──
   if (req.method === "GET" && (path === "/" || path === "/health")) {
-    sendJSON(res, 200, { ok: true, service: "openclaw-navigator-bridge", version: "1.1.0" });
+    sendJSON(res, 200, { ok: true, service: "openclaw-navigator-bridge", version: "4.0.0" });
     return;
   }
 
-  // Unknown
   sendJSON(res, 404, { ok: false, error: "Not found" });
 }
 
-// ── Connection Box ─────────────────────────────────────────────────────────
-
-function showConnectionBox(gatewayURL, token, deepLink, method) {
-  const w = 58;
-  const bar = "═".repeat(w);
-  const pad = (s) => s + " ".repeat(Math.max(0, w - s.length));
+// ── Display helpers ────────────────────────────────────────────────────────
 
+function showPairingCode(code) {
+  const spaced = code.split("").join(" ");
   console.log("");
-  console.log(`${MAGENTA}╔${bar}╗${RESET}`);
-  console.log(`${MAGENTA}║${RESET} ${BOLD}🧭 Navigator Connection Info${RESET}${" ".repeat(w - 30)}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}║${RESET} ${DIM}Method: ${method}${RESET}${" ".repeat(Math.max(0, w - 9 - method.length))}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}╠${bar}╣${RESET}`);
-  console.log(`${MAGENTA}║${RESET}${" ".repeat(w)}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}║${RESET} ${pad(`URL:   ${gatewayURL}`)}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}║${RESET} ${pad(`Token: ${token}`)}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}║${RESET}${" ".repeat(w)}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}╠${bar}╣${RESET}`);
-  console.log(`${MAGENTA}║${RESET} ${DIM}Deep link (paste in Navigator address bar):${RESET}${" ".repeat(Math.max(0, w - 44))}${MAGENTA}║${RESET}`);
-  console.log(`${MAGENTA}╚${bar}╝${RESET}`);
-  console.log("");
-  console.log(`  ${CYAN}${deepLink}${RESET}`);
-  console.log("");
-  console.log(`${DIM}  Paste URL + Token into Navigator > Settings > OpenClaw${RESET}`);
-  console.log(`${DIM}  Or paste the deep link into the address bar and press Enter.${RESET}`);
+  console.log(`${MAGENTA}╔══════════════════════════════════════════╗${RESET}`);
+  console.log(
+    `${MAGENTA}║${RESET}  ${BOLD}Your Pairing Code:${RESET}                      ${MAGENTA}║${RESET}`,
+  );
+  console.log(`${MAGENTA}║${RESET}                                          ${MAGENTA}║${RESET}`);
+  console.log(
+    `${MAGENTA}║${RESET}       ${BOLD}${GREEN}   ${spaced}   ${RESET}              ${MAGENTA}║${RESET}`,
+  );
+  console.log(`${MAGENTA}║${RESET}                                          ${MAGENTA}║${RESET}`);
+  console.log(
+    `${MAGENTA}║${RESET}  ${DIM}Enter this in Navigator > Settings >     ${RESET}${MAGENTA}║${RESET}`,
+  );
+  console.log(
+    `${MAGENTA}║${RESET}  ${DIM}OpenClaw > Quick Connect${RESET}                  ${MAGENTA}║${RESET}`,
+  );
+  console.log(`${MAGENTA}╚══════════════════════════════════════════╝${RESET}`);
   console.log("");
 }
 
@@ -373,35 +390,47 @@ function showConnectionBox(gatewayURL, token, deepLink, method) {
 async function main() {
   const args = process.argv.slice(2);
   let port = 18790;
+  let bindHost = "127.0.0.1";
+  let noTunnel = false;
 
   for (let i = 0; i < args.length; i++) {
-    if (args[i] === "--port" && args[i + 1]) port = parseInt(args[i + 1], 10);
+    if (args[i] === "--port" && args[i + 1]) {
+      port = parseInt(args[i + 1], 10);
+    }
+    if (args[i] === "--bind" && args[i + 1]) {
+      bindHost = args[i + 1];
+    }
+    if (args[i] === "--no-tunnel") {
+      noTunnel = true;
+    }
     if (args[i] === "--help" || args[i] === "-h") {
       console.log(`
-${BOLD}openclaw-navigator${RESET} — Navigator bridge server
+${BOLD}openclaw-navigator${RESET} — One-command bridge + tunnel for Navigator
 
 ${BOLD}Usage:${RESET}
-  npx openclaw-navigator              Start bridge + tunnel setup
-  npx openclaw-navigator --port 18790 Use a specific port
+  npx openclaw-navigator                  Auto-tunnel mode (default, works anywhere)
+  npx openclaw-navigator --no-tunnel      Local-only mode (SSH/LAN)
+  npx openclaw-navigator --port 18790     Custom port
 
 ${BOLD}Options:${RESET}
-  --port <port>   Bridge server port (default: 18790)
-  --help          Show this help
-
-${BOLD}What this does:${RESET}
-  1. Starts a local bridge server with Navigator endpoints
-  2. Sets up a tunnel so Navigator can reach it
-  3. Generates pairing info (URL + Token)
-  4. Keeps running as the bridge between Navigator and this machine
-
-  No OpenClaw installation required.
+  --port <port>    Bridge server port (default: 18790)
+  --no-tunnel      Skip auto-tunnel, use SSH or LAN instead
+  --bind <host>    Bind address (default: 127.0.0.1)
+  --help           Show this help
+
+${BOLD}How it works:${RESET}
+  1. Starts a bridge server on localhost
+  2. Creates a secure Cloudflare tunnel automatically (one-time download)
+  3. Shows a 6-digit pairing code
+  4. Enter the code in Navigator > Settings > OpenClaw > Quick Connect
+  5. That's it. Magic starts happening.
 `);
       process.exit(0);
     }
   }
 
   heading("🧭 Navigator Bridge");
-  info("Self-contained bridge server for the Navigator browser\n");
+  info("One-command bridge + tunnel for the Navigator browser\n");
 
   // ── Step 1: Start HTTP server ─────────────────────────────────────────
   const server = createServer(handleRequest);
@@ -414,117 +443,102 @@ ${BOLD}What this does:${RESET}
       }
       reject(err);
     });
-    server.listen(port, "0.0.0.0", () => resolve());
+    server.listen(port, bindHost, () => resolve());
   });
 
-  ok(`Bridge server running on port ${port}`);
-  info(`  Local: http://127.0.0.1:${port}/navigator/status`);
-
-  // ── Step 2: Choose connection method ──────────────────────────────────
-  const hasCloudflared = commandExists("cloudflared");
-  const tailscaleIP = getTailscaleIP();
-  const localIP = getLocalIP();
-
-  const tailscaleDNS = tailscaleIP ? getTailscaleDNS() : null;
-
-  const methods = [];
-  if (hasCloudflared) methods.push({ value: "cloudflare", label: "Cloudflare Tunnel (recommended)", hint: "works anywhere, no config" });
-  if (tailscaleDNS) methods.push({ value: "tailscale-https", label: "Tailscale HTTPS (recommended)", hint: tailscaleDNS });
-  else if (tailscaleIP) methods.push({ value: "tailscale", label: "Tailscale (raw IP)", hint: tailscaleIP });
-  methods.push({ value: "ssh", label: "SSH Tunnel", hint: "run SSH on your Mac" });
-  if (localIP) methods.push({ value: "lan", label: "Direct LAN", hint: localIP });
-
-  const method = await ask("How will Navigator connect to this machine?", methods);
-
-  // ── Step 3: Resolve gateway URL ───────────────────────────────────────
-  let gatewayURL;
-  let usedTailscaleServe = false;
-  const tailscaleHttpsPort = 8443;
-
-  switch (method) {
-    case "cloudflare": {
-      process.stdout.write(`\n${DIM}Starting Cloudflare tunnel...${RESET}`);
-      const tunnelURL = await startCloudflaredTunnel(port);
-      if (!tunnelURL) {
-        process.stdout.write("\r" + " ".repeat(60) + "\r");
-        fail("Failed to start tunnel. Install: brew install cloudflare/cloudflare/cloudflared");
-        process.exit(1);
-      }
-      process.stdout.write("\r" + " ".repeat(60) + "\r");
-      ok(`Tunnel active: ${tunnelURL}`);
-      gatewayURL = tunnelURL;
-      break;
-    }
-    case "tailscale-https": {
-      process.stdout.write(`\n${DIM}Setting up Tailscale HTTPS on port ${tailscaleHttpsPort}...${RESET}`);
-      const served = setupTailscaleServe(port, tailscaleHttpsPort);
-      process.stdout.write("\r" + " ".repeat(70) + "\r");
-      if (served) {
-        gatewayURL = `https://${tailscaleDNS}:${tailscaleHttpsPort}`;
-        usedTailscaleServe = true;
-        ok(`Tailscale HTTPS active: ${gatewayURL}`);
+  ok(`Bridge server running on ${bindHost}:${port}`);
+
+  // ── Step 2: Set up connectivity ───────────────────────────────────────
+  const displayName = hostname().replace(/\.local$/, "");
+  let gatewayURL = `http://localhost:${port}`;
+  let tunnelURL = null;
+  let tunnelProcess = null;
+
+  if (!noTunnel) {
+    // ── Auto-tunnel mode (default) ──────────────────────────────────
+    process.stdout.write(`  ${DIM}Setting up tunnel...${RESET}`);
+    const cloudflaredBin = await ensureCloudflared();
+
+    if (cloudflaredBin) {
+      const result = await startTunnel(cloudflaredBin, port);
+      process.stdout.write(`\r${" ".repeat(60)}\r`);
+
+      if (result) {
+        tunnelURL = result.url;
+        tunnelProcess = result.process;
+        gatewayURL = tunnelURL; // Use tunnel URL as the gateway URL
+
+        ok(`Tunnel active: ${CYAN}${tunnelURL}${RESET}`);
       } else {
-        // Fallback to raw IP
-        warn("tailscale serve failed, falling back to raw IP");
-        gatewayURL = `http://${tailscaleIP}:${port}`;
-        ok(`Using Tailscale IP: ${tailscaleIP}:${port}`);
+        process.stdout.write(`\r${" ".repeat(60)}\r`);
+        warn("Tunnel failed to start. Falling back to local-only mode.");
+        warn("Navigator must be on the same machine, or use --no-tunnel + SSH.");
       }
-      break;
-    }
-    case "tailscale": {
-      gatewayURL = `http://${tailscaleIP}:${port}`;
-      ok(`Using Tailscale: ${tailscaleIP}:${port}`);
-      break;
-    }
-    case "ssh": {
-      gatewayURL = `http://127.0.0.1:${port}`;
-      console.log("");
-      console.log(`${BOLD}Run this on your Mac:${RESET}`);
-      console.log(`  ${CYAN}ssh -L ${port}:127.0.0.1:${port} ${userInfo().username}@${hostname()}${RESET}`);
-      console.log(`${DIM}Keep SSH open while using Navigator.${RESET}`);
-      break;
+    } else {
+      process.stdout.write(`\r${" ".repeat(60)}\r`);
+      warn("Could not install tunnel tool. Falling back to local-only mode.");
     }
-    case "lan": {
-      gatewayURL = `http://${localIP}:${port}`;
-      ok(`Using LAN: ${localIP}:${port}`);
-      warn("Both machines must be on the same network.");
-      break;
+  } else {
+    // ── No-tunnel mode (SSH/LAN) ────────────────────────────────────
+    const tailscaleIP = getTailscaleIP();
+    const localIP = getLocalIP();
+    const user = userInfo().username;
+    const sshTarget = tailscaleIP ?? localIP ?? "this-machine";
+
+    console.log("");
+    console.log(`${BOLD}${MAGENTA}━━━ SSH Tunnel (for remote Navigator) ━━━${RESET}`);
+    console.log(`  On your Navigator Mac, run:`);
+    console.log(`  ${CYAN}${BOLD}ssh -L ${port}:localhost:${port} ${user}@${sshTarget} -N${RESET}`);
+    if (tailscaleIP) {
+      info(`  (${sshTarget} is your Tailscale IP)`);
+    } else if (localIP) {
+      info(`  (${sshTarget} is your LAN IP — same network required)`);
     }
+    console.log("");
   }
 
-  // ── Step 4: Generate pairing token ────────────────────────────────────
-  const displayName = hostname().replace(/\.local$/, "");
+  // ── Step 3: Generate pairing token + code ─────────────────────────────
   const token = randomUUID().replace(/-/g, "");
   validTokens.add(token);
-  ok("Pairing token generated");
+  pairingCode = generatePairingCode();
+  pairingData = { url: gatewayURL, token, name: displayName };
 
-  // ── Step 5: Show result ───────────────────────────────────────────────
+  // ── Step 4: Show connection info ──────────────────────────────────────
+  showPairingCode(pairingCode);
+
+  // Deep link (always show as fallback)
   const deepLink = `navigator://connect?url=${encodeURIComponent(gatewayURL)}&token=${token}&name=${encodeURIComponent(displayName)}`;
 
-  showConnectionBox(gatewayURL, token, deepLink, method);
+  if (tunnelURL) {
+    console.log(`  ${DIM}Or paste the deep link in Navigator's address bar:${RESET}`);
+    console.log(`  ${CYAN}${deepLink}${RESET}`);
+    console.log("");
+    info(`  Tunnel URL: ${tunnelURL}`);
+    info(`  Token:      ${token}`);
+  } else {
+    info(`  Or paste the deep link in Navigator's address bar:`);
+    console.log(`  ${CYAN}${deepLink}${RESET}`);
+    console.log("");
+    info(`  URL:   ${gatewayURL}`);
+    info(`  Token: ${token}`);
+  }
 
+  console.log("");
   console.log(`${BOLD}${GREEN}Bridge is running.${RESET} Waiting for Navigator to connect...`);
   console.log(`${DIM}Press Ctrl+C to stop.${RESET}\n`);
 
-  // Graceful shutdown
-  const cleanup = () => {
-    if (usedTailscaleServe) {
-      console.log(`${DIM}Removing tailscale serve...${RESET}`);
-      teardownTailscaleServe(tailscaleHttpsPort);
+  // ── Graceful shutdown ─────────────────────────────────────────────────
+  const shutdown = () => {
+    console.log(`\n${DIM}Shutting down bridge...${RESET}`);
+    if (tunnelProcess) {
+      tunnelProcess.kill();
     }
     server.close();
-  };
-
-  process.on("SIGINT", () => {
-    console.log(`\n${DIM}Shutting down bridge...${RESET}`);
-    cleanup();
     process.exit(0);
-  });
+  };
 
-  process.on("SIGTERM", () => {
-    cleanup();
-    process.exit(0);
-  });
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
 }
 
 main().catch((err) => {

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "openclaw-navigator",
-  "version": "2.1.0",
-  "description": "Self-contained Navigator bridge server — connects the Navigator browser to any machine",
+  "version": "4.0.0",
+  "description": "One-command bridge + tunnel for the Navigator browser — works on any machine, any OS",
+  "keywords": [
+    "browser",
+    "cloudflare",
+    "gateway",
+    "navigator",
+    "openclaw",
+    "setup",
+    "tunnel"
+  ],
   "license": "MIT",
   "bin": {
     "openclaw-navigator": "cli.mjs"
@@ -10,14 +19,10 @@
     "cli.mjs"
   ],
   "type": "module",
+  "dependencies": {
+    "cloudflared": "^0.7.1"
+  },
   "engines": {
     "node": ">=18.0.0"
-  },
-  "keywords": [
-    "openclaw",
-    "navigator",
-    "browser",
-    "gateway",
-    "setup"
-  ]
+  }
 }