openclaw-navigator 5.1.0 → 5.2.1

package/cli.mjs

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
 
 /**
- * openclaw-navigator v4.1.0
+ * openclaw-navigator v5.2.0
  *
  * 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.
- * Auto-installs, builds, and starts the OC Web UI on first run.
+ *
+ * Chat and WebSocket are transparently proxied to the OC gateway (port 18789).
+ * The web UI at port 4000 is also proxied — no local build needed.
  *
  * Usage:
  *   npx openclaw-navigator                  Auto-tunnel (default)
@@ -15,7 +17,7 @@
  */
 
 import { spawn } from "node:child_process";
-import { randomUUID, createHash } from "node:crypto";
+import { randomUUID } from "node:crypto";
 import { existsSync, appendFileSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
 import { createServer, request as httpRequest } from "node:http";
 import { connect as netConnect } from "node:net";
@@ -57,24 +59,6 @@ const recentEvents = [];
 const MAX_EVENTS = 200;
 const validTokens = new Set();
 
-// ── Chat session state ────────────────────────────────────────────────────
-const chatSessions = new Map(); // sessionKey → { messages: [...] }
-const wsClients = new Set(); // connected WebSocket clients
-
-function getChatSession(key = "main") {
-  if (!chatSessions.has(key)) {
-    chatSessions.set(key, { messages: [] });
-  }
-  return chatSessions.get(key);
-}
-
-function broadcastToWS(event) {
-  const data = JSON.stringify(event);
-  for (const ws of wsClients) {
-    try { ws.send(data); } catch {}
-  }
-}
-
 // OC Web UI reverse proxy target (configurable via --ui-port or env)
 let ocUIPort = parseInt(process.env.OPENCLAW_UI_PORT ?? "4000", 10);
 
@@ -98,7 +82,9 @@ function loadBridgeIdentity() {
     if (data.pairingCode && data.token) {
       return data;
     }
-  } catch { /* first run */ }
+  } catch {
+    /* first run */
+  }
   return null;
 }
 
@@ -130,7 +116,15 @@ function appendJSONL(filePath, record) {
 function readJSONL(filePath, limit = 200) {
   try {
     const lines = readFileSync(filePath, "utf8").trim().split("\n").filter(Boolean);
-    const parsed = lines.map((l) => { try { return JSON.parse(l); } catch { return null; } }).filter(Boolean);
+    const parsed = lines
+      .map((l) => {
+        try {
+          return JSON.parse(l);
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
     return limit > 0 ? parsed.slice(-limit) : parsed;
   } catch {
     return [];
@@ -150,146 +144,6 @@ function writeJSON(filePath, data) {
   writeFileSync(filePath, JSON.stringify(data, null, 2) + "\n", "utf8");
 }
 
-// ── OC Web UI lifecycle ──────────────────────────────────────────────────────
-
-const UI_DIR = join(homedir(), ".openclaw", "ui");
-const UI_REPO = "https://github.com/sandman66666/openclaw-ui.git";
-let uiProcess = null;
-
-async function isUIInstalled() {
-  return existsSync(join(UI_DIR, "package.json")) && existsSync(join(UI_DIR, ".next"));
-}
-
-async function setupUI() {
-  const { execSync } = await import("node:child_process");
-
-  if (existsSync(join(UI_DIR, "package.json"))) {
-    info("  UI directory exists, reinstalling...");
-    return await buildUI();
-  }
-
-  heading("Setting up OC Web UI (first time)");
-  info("  Cloning from GitHub...");
-
-  mkdirSync(join(homedir(), ".openclaw"), { recursive: true });
-
-  try {
-    execSync(`git clone --depth 1 ${UI_REPO} "${UI_DIR}"`, {
-      stdio: ["ignore", "pipe", "pipe"],
-      timeout: 60000,
-    });
-    ok("Repository cloned");
-  } catch (err) {
-    fail(`Failed to clone UI repo: ${err.message}`);
-    return false;
-  }
-
-  return await buildUI();
-}
-
-async function buildUI() {
-  const { execSync } = await import("node:child_process");
-
-  process.stdout.write(`  ${DIM}Installing dependencies (this may take a minute)...${RESET}`);
-  try {
-    execSync("npm install --production=false", {
-      cwd: UI_DIR,
-      stdio: ["ignore", "pipe", "pipe"],
-      timeout: 120000,
-      env: { ...process.env, NODE_ENV: "development" },
-    });
-    process.stdout.write(`\r${" ".repeat(70)}\r`);
-    ok("Dependencies installed");
-  } catch (err) {
-    process.stdout.write(`\r${" ".repeat(70)}\r`);
-    fail(`npm install failed: ${err.stderr?.toString()?.slice(-200) || err.message}`);
-    return false;
-  }
-
-  process.stdout.write(`  ${DIM}Building web UI...${RESET}`);
-  try {
-    execSync("npx next build", {
-      cwd: UI_DIR,
-      stdio: ["ignore", "pipe", "pipe"],
-      timeout: 180000,
-    });
-    process.stdout.write(`\r${" ".repeat(70)}\r`);
-    ok("Web UI built successfully");
-    return true;
-  } catch (err) {
-    process.stdout.write(`\r${" ".repeat(70)}\r`);
-    fail(`Build failed: ${err.stderr?.toString()?.slice(-200) || err.message}`);
-    return false;
-  }
-}
-
-async function updateUI() {
-  const { execSync } = await import("node:child_process");
-
-  if (!existsSync(join(UI_DIR, ".git"))) {
-    warn("UI not installed yet — running full setup instead");
-    return await setupUI();
-  }
-
-  heading("Updating OC Web UI");
-
-  try {
-    const result = execSync("git pull --rebase origin main", {
-      cwd: UI_DIR,
-      encoding: "utf8",
-      timeout: 30000,
-    });
-
-    if (result.includes("Already up to date")) {
-      ok("Already up to date");
-      return true;
-    }
-
-    ok("Pulled latest changes");
-    return await buildUI();
-  } catch (err) {
-    fail(`Update failed: ${err.message}`);
-    return false;
-  }
-}
-
-function startUIServer(port) {
-  if (uiProcess) {
-    uiProcess.kill();
-    uiProcess = null;
-  }
-
-  uiProcess = spawn("npx", ["next", "start", "-p", String(port)], {
-    cwd: UI_DIR,
-    stdio: ["ignore", "pipe", "pipe"],
-    env: { ...process.env, PORT: String(port), NODE_ENV: "production" },
-  });
-
-  uiProcess.on("error", (err) => {
-    warn(`OC Web UI failed to start: ${err.message}`);
-    uiProcess = null;
-  });
-
-  uiProcess.on("exit", (code) => {
-    if (code !== null && code !== 0) {
-      warn(`OC Web UI exited with code ${code}`);
-    }
-    uiProcess = null;
-  });
-
-  return new Promise((resolve) => {
-    const timer = setTimeout(() => {
-      ok(`OC Web UI starting on port ${port} (PID ${uiProcess?.pid})`);
-      resolve(true);
-    }, 1500);
-
-    uiProcess.on("exit", () => {
-      clearTimeout(timer);
-      resolve(false);
-    });
-  });
-}
-
 // Pairing code state
 let pairingCode = null;
 let pairingData = null;
@@ -426,7 +280,9 @@ function sendJSON(res, status, body) {
 
 function validateBridgeAuth(req) {
   const authHeader = req.headers["authorization"];
-  if (!authHeader) return false;
+  if (!authHeader) {
+    return false;
+  }
   const token = authHeader.replace(/^Bearer\s+/i, "");
   return validTokens.has(token);
 }
@@ -463,9 +319,8 @@ function handleRequest(req, res) {
       },
       routing: {
         "/ui/*": `localhost:${ocUIPort}`,
-        "/api/sessions/*": "bridge (in-process chat)",
-        "/api/*": `localhost:${ocGatewayPort} (fallback)`,
-        "/ws": "bridge (in-process WebSocket)",
+        "/api/*": `localhost:${ocGatewayPort}`,
+        "/ws": `localhost:${ocGatewayPort} (WebSocket proxy)`,
       },
       tunnel: activeTunnelURL
         ? {
@@ -482,7 +337,11 @@ function handleRequest(req, res) {
   // ── GET /navigator/commands ──
   if (req.method === "GET" && path === "/navigator/commands") {
     if (!validateBridgeAuth(req)) {
-      sendJSON(res, 401, { ok: false, error: "unauthorized", hint: "Include Authorization: Bearer <token> header" });
+      sendJSON(res, 401, {
+        ok: false,
+        error: "unauthorized",
+        hint: "Include Authorization: Bearer <token> header",
+      });
       return;
     }
     if (!bridgeState.connected) {
@@ -503,7 +362,11 @@ function handleRequest(req, res) {
   // ── POST /navigator/events ──
   if (req.method === "POST" && path === "/navigator/events") {
     if (!validateBridgeAuth(req)) {
-      sendJSON(res, 401, { ok: false, error: "unauthorized", hint: "Include Authorization: Bearer <token> header" });
+      sendJSON(res, 401, {
+        ok: false,
+        error: "unauthorized",
+        hint: "Include Authorization: Bearer <token> header",
+      });
       return;
     }
     readBody(req)
@@ -590,7 +453,11 @@ function handleRequest(req, res) {
   // ── POST /navigator/command ──
   if (req.method === "POST" && path === "/navigator/command") {
     if (!validateBridgeAuth(req)) {
-      sendJSON(res, 401, { ok: false, error: "unauthorized", hint: "Include Authorization: Bearer <token> header" });
+      sendJSON(res, 401, {
+        ok: false,
+        error: "unauthorized",
+        hint: "Include Authorization: Bearer <token> header",
+      });
       return;
     }
     readBody(req)
@@ -888,6 +755,7 @@ function handleRequest(req, res) {
   // Keep /ui prefix — Next.js basePath: "/ui" expects it
   if (path === "/ui" || path.startsWith("/ui/")) {
     const targetURL = `${path}${url.search}`;
+    const incomingHost = req.headers.host || "localhost";
 
     const proxyOpts = {
       hostname: "127.0.0.1",
@@ -897,15 +765,38 @@ function handleRequest(req, res) {
       headers: {
         ...req.headers,
         host: `127.0.0.1:${ocUIPort}`,
+        "x-forwarded-host": incomingHost,
+        "x-forwarded-proto": activeTunnelURL ? "https" : "http",
+        "x-forwarded-for": req.socket.remoteAddress || "127.0.0.1",
       },
     };
 
     const proxyReq = httpRequest(proxyOpts, (proxyRes) => {
-      // Forward status + headers (add CORS for cross-origin tunnel access)
       const headers = { ...proxyRes.headers };
+
+      // CORS for cross-origin tunnel access
       headers["access-control-allow-origin"] = "*";
       headers["access-control-allow-methods"] = "GET, POST, PUT, DELETE, OPTIONS";
-      headers["access-control-allow-headers"] = "Content-Type, Authorization";
+      headers["access-control-allow-headers"] = "Content-Type, Authorization, Cookie";
+      headers["access-control-allow-credentials"] = "true";
+
+      // Fix redirects — rewrite Location from localhost:4000 to tunnel URL
+      if (headers.location) {
+        headers.location = headers.location
+          .replace(`http://127.0.0.1:${ocUIPort}`, "")
+          .replace(`http://localhost:${ocUIPort}`, "");
+      }
+
+      // Fix cookies — remove domain restriction so they work through tunnel
+      if (headers["set-cookie"]) {
+        const cookies = Array.isArray(headers["set-cookie"])
+          ? headers["set-cookie"]
+          : [headers["set-cookie"]];
+        headers["set-cookie"] = cookies.map((c) =>
+          c.replace(/;\s*domain=[^;]*/gi, "").replace(/;\s*secure/gi, ""),
+        );
+      }
+
       res.writeHead(proxyRes.statusCode ?? 502, headers);
       proxyRes.pipe(res, { end: true });
     });
@@ -913,9 +804,8 @@ function handleRequest(req, res) {
     proxyReq.on("error", (err) => {
       sendJSON(res, 502, {
         ok: false,
-        error: `OC Web UI not reachable on port ${ocUIPort}`,
+        error: `OC Web UI not reachable on port ${ocUIPort} — make sure the OC gateway is running`,
         detail: err.message,
-        hint: `Not found — Reverse proxy rule for /ui/* → localhost:${ocUIPort} is working, but the web UI is not running. Start it with: openclaw gateway start`,
       });
     });
 
@@ -924,117 +814,8 @@ function handleRequest(req, res) {
     return;
   }
 
-  // ── POST /api/sessions/send — Chat: receive user message ──
-  if (req.method === "POST" && path === "/api/sessions/send") {
-    readBody(req).then(raw => {
-      const body = JSON.parse(raw);
-      const sessionKey = body.sessionKey || "main";
-      const message = body.message;
-      if (!message) {
-        sendJSON(res, 400, { ok: false, error: "Missing 'message'" });
-        return;
-      }
-
-      const session = getChatSession(sessionKey);
-      const userMsg = {
-        role: "user",
-        content: message,
-        timestamp: Date.now(),
-        id: randomUUID(),
-      };
-      session.messages.push(userMsg);
-
-      // Also push as a bridge event so MCP tools can see it
-      recentEvents.push({
-        type: "chat.user_message",
-        sessionKey,
-        message,
-        messageId: userMsg.id,
-        timestamp: userMsg.timestamp,
-      });
-      if (recentEvents.length > MAX_EVENTS) recentEvents.shift();
-
-      // Broadcast to WebSocket clients
-      broadcastToWS({ type: "chat.user_message", sessionKey, message, messageId: userMsg.id });
-
-      sendJSON(res, 200, { ok: true, messageId: userMsg.id });
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-    });
-    return;
-  }
-
-  // ── GET /api/sessions/history — Chat: fetch history ──
-  if (req.method === "GET" && path === "/api/sessions/history") {
-    const sessionKey = url.searchParams.get("sessionKey") || "main";
-    const session = getChatSession(sessionKey);
-    sendJSON(res, 200, { ok: true, messages: session.messages });
-    return;
-  }
-
-  // ── POST /api/sessions/respond — Chat: agent sends response ──
-  // Used by MCP tools to send agent responses to the chat
-  if (req.method === "POST" && path === "/api/sessions/respond") {
-    readBody(req).then(raw => {
-      const body = JSON.parse(raw);
-      const sessionKey = body.sessionKey || "main";
-      const content = body.content || body.message;
-      if (!content) {
-        sendJSON(res, 400, { ok: false, error: "Missing 'content'" });
-        return;
-      }
-
-      const session = getChatSession(sessionKey);
-      const assistantMsg = {
-        role: "assistant",
-        content,
-        timestamp: Date.now(),
-        id: randomUUID(),
-      };
-      session.messages.push(assistantMsg);
-
-      // Broadcast final response via WebSocket
-      broadcastToWS({
-        type: "chat.final",
-        text: content,
-        content,
-        runId: body.runId || null,
-        sessionKey,
-      });
-
-      sendJSON(res, 200, { ok: true, messageId: assistantMsg.id });
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-    });
-    return;
-  }
-
-  // ── POST /api/sessions/stream — Chat: agent streams partial text ──
-  if (req.method === "POST" && path === "/api/sessions/stream") {
-    readBody(req).then(raw => {
-      const body = JSON.parse(raw);
-      const text = body.text || body.delta || "";
-      const runId = body.runId || null;
-      const sessionKey = body.sessionKey || "main";
-
-      broadcastToWS({
-        type: "chat.delta",
-        text,
-        delta: text,
-        runId,
-        sessionKey,
-      });
-
-      sendJSON(res, 200, { ok: true });
-    }).catch(() => {
-      sendJSON(res, 400, { ok: false, error: "Invalid JSON" });
-    });
-    return;
-  }
-
   // ── Reverse proxy: /api/* → OC Gateway (localhost:ocGatewayPort) ─────
-  // Keeps /api/ prefix intact so /api/sessions/send → localhost:18789/api/sessions/send
-  // This is a fallback — specific chat paths above are handled directly.
+  // Keeps /api/ prefix intact — all API calls including chat go to the gateway.
   if (path.startsWith("/api/")) {
     const targetURL = `${path}${url.search}`;
 
@@ -1063,7 +844,10 @@ function handleRequest(req, res) {
         ok: false,
         error: `OC Gateway not reachable on port ${ocGatewayPort}`,
         detail: err.message,
-        hint: "Make sure the OC gateway is running on port " + ocGatewayPort + " (openclaw gateway start)",
+        hint:
+          "Make sure the OC gateway is running on port " +
+          ocGatewayPort +
+          " (openclaw gateway start)",
       });
     });
 
@@ -1201,12 +985,9 @@ async function main() {
   let noTunnel = false;
   let withMcp = false;
   let pm2Setup = false;
-  let tunnelToken = null;   // For named tunnels (Cloudflare)
+  let tunnelToken = null; // For named tunnels (Cloudflare)
   let tunnelHostname = null; // For named tunnels (stable URL)
   let freshIdentity = false; // --new-code: force new pairing code
-  let setupUIFlag = false;
-  let updateUIFlag = false;
-  let noUIFlag = false;
 
   for (let i = 0; i < args.length; i++) {
     if (args[i] === "--port" && args[i + 1]) {
@@ -1239,15 +1020,6 @@ async function main() {
     if (args[i] === "--new-code") {
       freshIdentity = true;
     }
-    if (args[i] === "--setup-ui") {
-      setupUIFlag = true;
-    }
-    if (args[i] === "--update-ui") {
-      updateUIFlag = true;
-    }
-    if (args[i] === "--no-ui") {
-      noUIFlag = true;
-    }
     if (args[i] === "--help" || args[i] === "-h") {
       console.log(`
 ${BOLD}openclaw-navigator${RESET} — One-command bridge + tunnel for Navigator
@@ -1266,9 +1038,6 @@ ${BOLD}Options:${RESET}
   --no-tunnel               Skip auto-tunnel, use SSH or LAN instead
   --bind <host>             Bind address (default: 127.0.0.1)
   --new-code                Force a new pairing code (discard saved identity)
-  --setup-ui                Force (re)install + build OC Web UI
-  --update-ui               Pull latest UI changes and rebuild
-  --no-ui                   Don't auto-start the web UI
   --help                    Show this help
 
 ${BOLD}Stability (recommended for production):${RESET}
@@ -1277,10 +1046,9 @@ ${BOLD}Stability (recommended for production):${RESET}
   --tunnel-hostname <host>  Hostname for named tunnel (e.g. nav.yourdomain.com)
 
 ${BOLD}Routing (through Cloudflare tunnel):${RESET}
-  /ui/*                → localhost:<ui-port>      Web UI (login page, dashboard)
-  /api/sessions/*      → bridge (in-process)      Chat send/history/respond/stream
-  /ws, WebSocket       → bridge (in-process)      Real-time chat events
-  /api/* (other)       → localhost:<gateway-port> Gateway API fallback
+  /ui/*                → localhost:<ui-port>      Web UI (proxied to OC gateway's UI server)
+  /api/*               → localhost:<gateway-port> OC gateway API (chat, sessions, etc.)
+  /ws, WebSocket       → localhost:<gateway-port> WebSocket proxy to OC gateway
   /health              → bridge itself            Health check
   /navigator/*         → bridge itself            Navigator control endpoints
 
@@ -1305,7 +1073,11 @@ ${BOLD}How it works:${RESET}
   if (pm2Setup) {
     const { execSync: findNode } = await import("node:child_process");
     let npxPath;
-    try { npxPath = findNode("which npx", { encoding: "utf8" }).trim(); } catch { npxPath = "npx"; }
+    try {
+      npxPath = findNode("which npx", { encoding: "utf8" }).trim();
+    } catch {
+      npxPath = "npx";
+    }
 
     const ecosystemContent = `// PM2 ecosystem config for openclaw-navigator bridge
 // Generated by: npx openclaw-navigator --pm2-setup
@@ -1314,7 +1086,7 @@ module.exports = {
   apps: [{
     name: "openclaw-navigator",
     script: "${npxPath}",
-    args: "openclaw-navigator@latest --mcp --no-ui --port ${port}",
+    args: "openclaw-navigator@latest --mcp --port ${port}",
     cwd: "${homedir()}",
     autorestart: true,
     max_restarts: 50,
@@ -1341,7 +1113,9 @@ module.exports = {
     console.log(`  ${CYAN}npm install -g pm2${RESET}          ${DIM}(if not installed)${RESET}`);
     console.log(`  ${CYAN}pm2 start ecosystem.config.cjs${RESET}`);
     console.log(`  ${CYAN}pm2 save${RESET}                    ${DIM}(auto-start on boot)${RESET}`);
-    console.log(`  ${CYAN}pm2 startup${RESET}                 ${DIM}(install system startup hook)${RESET}`);
+    console.log(
+      `  ${CYAN}pm2 startup${RESET}                 ${DIM}(install system startup hook)${RESET}`,
+    );
     console.log("");
     console.log(`${BOLD}Useful PM2 commands:${RESET}`);
     console.log(`  ${CYAN}pm2 logs openclaw-navigator${RESET} ${DIM}(view logs)${RESET}`);
@@ -1368,141 +1142,63 @@ module.exports = {
     server.listen(port, bindHost, () => resolve());
   });
 
-  // ── WebSocket handler — manages chat connections directly ─────────────
+  // ── WebSocket proxy — forward /ws connections to OC gateway ─────────
+  // The bridge is a transparent relay: Navigator connects to /ws here,
+  // we pipe to the OC gateway WebSocket at ws://localhost:ocGatewayPort/
+  // (OC Core accepts WebSocket at root /, not /ws)
   server.on("upgrade", (req, socket, head) => {
     const reqUrl = new URL(req.url ?? "/", "http://localhost");
     const reqPath = reqUrl.pathname;
 
-    // Only handle /ws paths
+    // Only handle /ws paths (Navigator connects to /ws)
     if (reqPath !== "/ws" && !reqPath.startsWith("/ws/")) {
       socket.destroy();
       return;
     }
 
-    // Perform WebSocket handshake
-    const key = req.headers["sec-websocket-key"];
-    if (!key) {
-      socket.destroy();
-      return;
-    }
-
-    const accept = createHash("sha1")
-      .update(key + "258EAFA5-E914-47DA-95CA-5AB5DC799C07")
-      .digest("base64");
-
-    socket.write(
-      "HTTP/1.1 101 Switching Protocols\r\n" +
-      "Upgrade: websocket\r\n" +
-      "Connection: Upgrade\r\n" +
-      `Sec-WebSocket-Accept: ${accept}\r\n` +
-      "\r\n"
-    );
-
-    // Create a minimal WebSocket wrapper
-    const ws = {
-      socket,
-      send(data) {
-        const payload = Buffer.from(data);
-        const frame = [];
-        frame.push(0x81); // text frame, FIN bit
-        if (payload.length < 126) {
-          frame.push(payload.length);
-        } else if (payload.length < 65536) {
-          frame.push(126, (payload.length >> 8) & 0xFF, payload.length & 0xFF);
-        } else {
-          frame.push(127);
-          for (let i = 7; i >= 0; i--) {
-            frame.push((payload.length >> (i * 8)) & 0xFF);
-          }
-        }
-        socket.write(Buffer.concat([Buffer.from(frame), payload]));
-      },
-      close() {
-        wsClients.delete(ws);
-        socket.destroy();
-      }
-    };
-
-    wsClients.add(ws);
-    console.log(`  ${DIM}WebSocket client connected (${wsClients.size} active)${RESET}`);
-
-    // Send connected event
-    ws.send(JSON.stringify({ type: "connected" }));
-
-    // Handle incoming WebSocket frames (simplified parser)
-    let frameBuffer = Buffer.alloc(0);
-    socket.on("data", (chunk) => {
-      frameBuffer = Buffer.concat([frameBuffer, chunk]);
-
-      while (frameBuffer.length >= 2) {
-        const firstByte = frameBuffer[0];
-        const secondByte = frameBuffer[1];
-        const opcode = firstByte & 0x0F;
-        const masked = (secondByte & 0x80) !== 0;
-        let payloadLen = secondByte & 0x7F;
-        let offset = 2;
-
-        if (payloadLen === 126) {
-          if (frameBuffer.length < 4) return;
-          payloadLen = (frameBuffer[2] << 8) | frameBuffer[3];
-          offset = 4;
-        } else if (payloadLen === 127) {
-          if (frameBuffer.length < 10) return;
-          payloadLen = 0;
-          for (let i = 0; i < 8; i++) {
-            payloadLen = payloadLen * 256 + frameBuffer[2 + i];
-          }
-          offset = 10;
-        }
-
-        const maskSize = masked ? 4 : 0;
-        const totalFrameLen = offset + maskSize + payloadLen;
-        if (frameBuffer.length < totalFrameLen) return;
-
-        let payload;
-        if (masked) {
-          const mask = frameBuffer.slice(offset, offset + 4);
-          payload = Buffer.alloc(payloadLen);
-          for (let i = 0; i < payloadLen; i++) {
-            payload[i] = frameBuffer[offset + 4 + i] ^ mask[i % 4];
-          }
-        } else {
-          payload = frameBuffer.slice(offset, offset + payloadLen);
-        }
-
-        // Handle by opcode
-        if (opcode === 0x08) {
-          // Close frame
-          ws.close();
-          return;
-        } else if (opcode === 0x09) {
-          // Ping — send pong
-          const pongFrame = Buffer.from([0x8A, payload.length, ...payload]);
-          socket.write(pongFrame);
-        } else if (opcode === 0x01) {
-          // Text frame — handle as message
-          const text = payload.toString("utf8");
-          try {
-            const msg = JSON.parse(text);
-            if (msg.type === "ping") {
-              ws.send(JSON.stringify({ type: "pong" }));
-            }
-          } catch {
-            // Non-JSON message, ignore
-          }
-        }
-
-        frameBuffer = frameBuffer.slice(totalFrameLen);
+    // Connect to the gateway WebSocket
+    const gwSocket = netConnect(ocGatewayPort, "127.0.0.1", () => {
+      // Rewrite path: Navigator uses /ws but OC Core expects / (root)
+      const gwPath = reqPath === "/ws" ? "/" : reqPath.replace(/^\/ws/, "");
+      const upgradeHeaders = [
+        `${req.method} ${gwPath || "/"} HTTP/${req.httpVersion}`,
+        ...Object.entries(req.headers).map(([k, v]) => `${k}: ${v}`),
+        "",
+        "",
+      ].join("\r\n");
+      gwSocket.write(upgradeHeaders);
+      if (head && head.length > 0) {
+        gwSocket.write(head);
       }
     });
 
-    socket.on("close", () => {
-      wsClients.delete(ws);
-      console.log(`  ${DIM}WebSocket client disconnected (${wsClients.size} active)${RESET}`);
+    gwSocket.on("error", (err) => {
+      console.log(`  ${DIM}WS proxy: gateway unreachable — ${err.message}${RESET}`);
+      socket.destroy();
     });
 
-    socket.on("error", () => {
-      wsClients.delete(ws);
+    // Once the gateway responds with 101, pipe bidirectionally
+    gwSocket.once("data", (firstChunk) => {
+      const response = firstChunk.toString();
+      if (response.startsWith("HTTP/1.1 101")) {
+        // Forward the 101 response to the client
+        socket.write(firstChunk);
+        // Now pipe both directions transparently
+        socket.pipe(gwSocket);
+        gwSocket.pipe(socket);
+
+        socket.on("close", () => gwSocket.destroy());
+        gwSocket.on("close", () => socket.destroy());
+        socket.on("error", () => gwSocket.destroy());
+        gwSocket.on("error", () => socket.destroy());
+
+        console.log(`  ${DIM}WebSocket proxied to gateway:${ocGatewayPort}${RESET}`);
+      } else {
+        // Gateway rejected the upgrade
+        socket.write(firstChunk);
+        socket.destroy();
+        gwSocket.destroy();
+      }
     });
   });
 
@@ -1545,14 +1241,15 @@ module.exports = {
   const MAX_TUNNEL_RECONNECT_DELAY = 60_000; // cap at 60s
 
   async function startOrReconnectTunnel() {
-    if (!cloudflaredBin) return null;
+    if (!cloudflaredBin) {
+      return null;
+    }
 
     // Named tunnel mode (stable URL, no reconnect gymnastics needed)
+    // The tunnel routing (hostname → localhost:port) is configured in
+    // the Cloudflare Zero Trust dashboard, not on the CLI.
     if (tunnelToken) {
       const tunnelArgs = ["tunnel", "run", "--token", tunnelToken];
-      if (tunnelHostname) {
-        tunnelArgs.push("--url", `http://localhost:${port}`);
-      }
       const child = spawn(cloudflaredBin, tunnelArgs, {
         stdio: ["ignore", "pipe", "pipe"],
       });
@@ -1571,6 +1268,14 @@ module.exports = {
         gatewayURL = namedURL;
         pairingData.url = namedURL;
         ok(`Named tunnel active: ${CYAN}${namedURL}${RESET}`);
+
+        // Register with relay so QuickConnect pairing codes resolve
+        const relayOk = await registerWithRelay(pairingCode, namedURL, token, displayName);
+        if (relayOk) {
+          ok("Pairing code registered with relay");
+        } else {
+          warn("Relay unavailable — use the deep link or tunnel URL directly");
+        }
       }
       return child;
     }
@@ -1578,9 +1283,14 @@ module.exports = {
     // Quick Tunnel mode — URL changes on every start
     const result = await startTunnel(cloudflaredBin, port);
     if (!result) {
-      const delay = Math.min(2000 * Math.pow(2, tunnelReconnectAttempts), MAX_TUNNEL_RECONNECT_DELAY);
+      const delay = Math.min(
+        2000 * Math.pow(2, tunnelReconnectAttempts),
+        MAX_TUNNEL_RECONNECT_DELAY,
+      );
       tunnelReconnectAttempts++;
-      warn(`Tunnel failed — retrying in ${Math.round(delay / 1000)}s (attempt ${tunnelReconnectAttempts})...`);
+      warn(
+        `Tunnel failed — retrying in ${Math.round(delay / 1000)}s (attempt ${tunnelReconnectAttempts})...`,
+      );
       setTimeout(startOrReconnectTunnel, delay);
       return null;
     }
@@ -1612,7 +1322,10 @@ module.exports = {
       tunnelProcess = null;
       activeTunnelURL = null;
       // Exponential backoff restart
-      const delay = Math.min(3000 * Math.pow(2, tunnelReconnectAttempts), MAX_TUNNEL_RECONNECT_DELAY);
+      const delay = Math.min(
+        3000 * Math.pow(2, tunnelReconnectAttempts),
+        MAX_TUNNEL_RECONNECT_DELAY,
+      );
       tunnelReconnectAttempts++;
       setTimeout(startOrReconnectTunnel, delay);
     });
@@ -1661,33 +1374,10 @@ module.exports = {
     console.log("");
   }
 
-  // ── OC Web UI: auto-setup + start ─────────────────────────────────────
-  if (!noUIFlag) {
-    if (setupUIFlag) {
-      await setupUI();
-    } else if (updateUIFlag) {
-      await updateUI();
-    }
-
-    if (await isUIInstalled()) {
-      await startUIServer(ocUIPort);
-    } else if (!setupUIFlag && !noUIFlag) {
-      heading("OC Web UI not found — setting up automatically");
-      const setupOk = await setupUI();
-      if (setupOk) {
-        await startUIServer(ocUIPort);
-      } else {
-        warn("Web UI setup failed — you can retry with: npx openclaw-navigator --setup-ui");
-        warn("The bridge will still work, but /ui/* won't serve the dashboard");
-      }
-    }
-  }
-
   // ── Step 4: Register initial pairing code with relay ────────────────
-  if (tunnelURL && !tunnelToken) {
-    // Already registered inside startOrReconnectTunnel()
-  } else if (!tunnelURL) {
-    // Local mode — register code for local resolution
+  // Both quick-tunnel and named-tunnel register inside startOrReconnectTunnel()
+  if (!tunnelURL) {
+    // Local mode — no relay registration needed
   }
 
   // ── Step 5: Show connection info ──────────────────────────────────────
@@ -1714,10 +1404,9 @@ module.exports = {
   // ── Show OC Web UI access + routing info ─────────────────────────────
   const uiURL = tunnelURL ? `${tunnelURL}/ui/` : `http://localhost:${port}/ui/`;
   console.log(`  ${BOLD}OC Web UI:${RESET} ${CYAN}${uiURL}${RESET}`);
-  info(`  /ui/*              → localhost:${ocUIPort} (web UI)`);
-  info(`  /api/sessions/*    → bridge (in-process chat)`);
-  info(`  /ws                → bridge (in-process WebSocket)`);
-  info(`  /api/* (other)     → localhost:${ocGatewayPort} (gateway fallback)`);
+  info(`  /ui/*   → localhost:${ocUIPort} (web UI proxy)`);
+  info(`  /api/*  → localhost:${ocGatewayPort} (OC gateway)`);
+  info(`  /ws     → localhost:${ocGatewayPort} (WebSocket proxy)`);
 
   // ── Startup health checks ──────────────────────────────────────────
   console.log("");
@@ -1850,7 +1539,9 @@ module.exports = {
 
       mkdirSync(mcporterDir, { recursive: true });
       writeFileSync(mcporterConfigPath, JSON.stringify(mcporterConfig, null, 2) + "\n", "utf8");
-      ok("Registered MCP server with mcporter (34 tools: 16 browser + 10 AI + 5 profiling + 3 chat)");
+      ok(
+        "Registered MCP server with mcporter (34 tools: 16 browser + 10 AI + 5 profiling + 3 chat)",
+      );
       info(`  Config: ${mcporterConfigPath}`);
 
       // Step 3: Install the navigator-bridge skill so the OC agent knows about all tools
@@ -2045,7 +1736,7 @@ module.exports = {
         '  url="<page_url>" \\',
         '  title="<page_title>" \\',
         '  summary="<haiku_generated_summary>" \\',
-        "  signals='{\"names\":[],\"interests\":[],\"services\":[],\"purchases\":[],\"intent\":[],\"topics\":[]}'",
+        '  signals=\'{"names":[],"interests":[],"services":[],"purchases":[],"intent":[],"topics":[]}\'',
         BT,
         "",
         "### 3. Daily Profile Synthesis (You Do This — Use Opus 4.6)",
@@ -2093,7 +1784,7 @@ module.exports = {
         "",
         "- **Be smart about noise**: Ignore login pages, error pages, redirects",
         "- **Respect privacy**: Don't store passwords, tokens, or PII like SSNs/credit cards",
-        "- **Extract signal from noise**: A visit to \"Nike Air Max\" tells you about shopping interest, not just a URL",
+        '- **Extract signal from noise**: A visit to "Nike Air Max" tells you about shopping interest, not just a URL',
         "- **Cross-reference**: If user visits Stripe docs AND Vercel, they're likely a developer building a SaaS",
         "- **Temporal awareness**: Morning habits vs evening habits, weekday vs weekend",
         "- **Don't hallucinate**: Only include signals backed by actual browsing data",
@@ -2102,7 +1793,7 @@ module.exports = {
         "",
         "- **Summarization**: Every 10 minutes while the user is actively browsing",
         "- **Profile synthesis**: Once daily, preferably at end of day",
-        "- **On demand**: User can ask \"update my profile\" or \"what do you know about me\"",
+        '- **On demand**: User can ask "update my profile" or "what do you know about me"',
         "",
       ].join("\n");
       mkdirSync(profilerSkillDir, { recursive: true });
@@ -2139,6 +1830,19 @@ module.exports = {
         }
         const npxForPlist = join(dirname(nodeForPlist), "npx");
 
+        // Build ProgramArguments — include named tunnel flags if set
+        let tunnelPlistArgs = "";
+        if (tunnelToken) {
+          tunnelPlistArgs += `
+        <string>--tunnel-token</string>
+        <string>${tunnelToken}</string>`;
+        }
+        if (tunnelHostname) {
+          tunnelPlistArgs += `
+        <string>--tunnel-hostname</string>
+        <string>${tunnelHostname}</string>`;
+        }
+
         const plistContent = `<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
@@ -2151,7 +1855,7 @@ module.exports = {
         <string>openclaw-navigator@latest</string>
         <string>--mcp</string>
         <string>--port</string>
-        <string>${port}</string>
+        <string>${port}</string>${tunnelPlistArgs}
     </array>
     <key>EnvironmentVariables</key>
     <dict>
@@ -2203,10 +1907,6 @@ module.exports = {
   // ── Graceful shutdown ─────────────────────────────────────────────────
   const shutdown = () => {
     console.log(`\n${DIM}Shutting down bridge...${RESET}`);
-    if (uiProcess) {
-      uiProcess.kill();
-      uiProcess = null;
-    }
     if (mcpProcess) {
       mcpProcess.kill();
     }

package/mcp.mjs

@@ -18,8 +18,8 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { ListToolsRequestSchema, CallToolRequestSchema } from "@modelcontextprotocol/sdk/types.js";
 import { readFileSync } from "node:fs";
-import { join } from "node:path";
 import { homedir } from "node:os";
+import { join } from "node:path";
 
 // ── Configuration ─────────────────────────────────────────────────────────
 
@@ -600,35 +600,50 @@ const TOOLS = [
   // ── Chat Tools ──
   {
     name: "navigator_get_chat_messages",
-    description: "Get recent chat messages from the Navigator chat pane. Use this to see what the user is asking.",
+    description:
+      "Get recent chat messages from the Navigator chat pane. Use this to see what the user is asking.",
     inputSchema: {
       type: "object",
       properties: {
-        sessionKey: { type: "string", description: "Chat session key (default: main)", default: "main" },
+        sessionKey: {
+          type: "string",
+          description: "Chat session key (default: main)",
+          default: "main",
+        },
         limit: { type: "number", description: "Max messages to return (default: 20)", default: 20 },
       },
     },
   },
   {
     name: "navigator_chat_respond",
-    description: "Send a response message to the Navigator chat pane. The user will see this as an agent message.",
+    description:
+      "Send a response message to the Navigator chat pane. The user will see this as an agent message.",
     inputSchema: {
       type: "object",
       properties: {
         message: { type: "string", description: "The response message to send" },
-        sessionKey: { type: "string", description: "Chat session key (default: main)", default: "main" },
+        sessionKey: {
+          type: "string",
+          description: "Chat session key (default: main)",
+          default: "main",
+        },
       },
       required: ["message"],
     },
   },
   {
     name: "navigator_chat_stream",
-    description: "Stream a partial response to the Navigator chat pane (for real-time typing effect).",
+    description:
+      "Stream a partial response to the Navigator chat pane (for real-time typing effect).",
     inputSchema: {
       type: "object",
       properties: {
         text: { type: "string", description: "Partial text to stream" },
-        sessionKey: { type: "string", description: "Chat session key (default: main)", default: "main" },
+        sessionKey: {
+          type: "string",
+          description: "Chat session key (default: main)",
+          default: "main",
+        },
         runId: { type: "string", description: "Run ID for grouping streamed chunks" },
       },
       required: ["text"],
@@ -758,9 +773,7 @@ async function handleTool(name, args) {
 
       // ── AI Browser Intelligence ──
       case "navigator_analyze_page":
-        return jsonResult(
-          await sendCommand("ai.analyze", {}, { commandName: "ai.analyze" }),
-        );
+        return jsonResult(await sendCommand("ai.analyze", {}, { commandName: "ai.analyze" }));
 
       case "navigator_find_element":
         return jsonResult(
@@ -768,9 +781,7 @@ async function handleTool(name, args) {
         );
 
       case "navigator_is_ready":
-        return jsonResult(
-          await sendCommand("ai.ready", {}, { commandName: "ai.ready" }),
-        );
+        return jsonResult(await sendCommand("ai.ready", {}, { commandName: "ai.ready" }));
 
       case "navigator_wait_for_element":
         return jsonResult(
@@ -792,36 +803,22 @@ async function handleTool(name, args) {
 
       case "navigator_smart_fill":
         return jsonResult(
-          await sendCommand(
-            "ai.fill",
-            { data: args.data },
-            { commandName: "ai.fill" },
-          ),
+          await sendCommand("ai.fill", { data: args.data }, { commandName: "ai.fill" }),
         );
 
       case "navigator_intercept_api":
-        return jsonResult(
-          await sendCommand("ai.intercept", {}, { commandName: "ai.intercept" }),
-        );
+        return jsonResult(await sendCommand("ai.intercept", {}, { commandName: "ai.intercept" }));
 
       case "navigator_set_cookies":
         return jsonResult(
-          await sendCommand(
-            "ai.cookies",
-            { cookies: args.cookies },
-            { commandName: "ai.cookies" },
-          ),
+          await sendCommand("ai.cookies", { cookies: args.cookies }, { commandName: "ai.cookies" }),
         );
 
       case "navigator_get_performance":
-        return jsonResult(
-          await sendCommand("ai.metrics", {}, { commandName: "ai.metrics" }),
-        );
+        return jsonResult(await sendCommand("ai.metrics", {}, { commandName: "ai.metrics" }));
 
       case "navigator_get_page_state":
-        return jsonResult(
-          await sendCommand("ai.state", {}, { commandName: "ai.state" }),
-        );
+        return jsonResult(await sendCommand("ai.state", {}, { commandName: "ai.state" }));
 
       // ── User Profiling Tools ──
       case "navigator_get_page_visits": {
@@ -865,7 +862,9 @@ async function handleTool(name, args) {
       case "navigator_get_chat_messages": {
         const sessionKey = args.sessionKey || "main";
         const limit = args.limit ?? 20;
-        const data = await bridgeGet(`/api/sessions/history?sessionKey=${encodeURIComponent(sessionKey)}`);
+        const data = await bridgeGet(
+          `/api/sessions/history?sessionKey=${encodeURIComponent(sessionKey)}`,
+        );
         if (data.ok && Array.isArray(data.messages)) {
           return jsonResult({ ok: true, messages: data.messages.slice(-limit) });
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openclaw-navigator",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "description": "One-command bridge + tunnel for the Navigator browser — works on any machine, any OS",
   "keywords": [
     "browser",