openclaw-navigator 4.5.0 → 4.7.0

package/cli.mjs

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 
 /**
- * openclaw-navigator v4.0.0
+ * openclaw-navigator v4.1.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.
  *
  * Usage:
  *   npx openclaw-navigator                  Auto-tunnel (default)
@@ -131,6 +132,146 @@ 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;
@@ -265,6 +406,13 @@ function sendJSON(res, status, body) {
   res.end(JSON.stringify(body));
 }
 
+function validateBridgeAuth(req) {
+  const authHeader = req.headers["authorization"];
+  if (!authHeader) return false;
+  const token = authHeader.replace(/^Bearer\s+/i, "");
+  return validTokens.has(token);
+}
+
 function handleRequest(req, res) {
   // CORS preflight
   if (req.method === "OPTIONS") {
@@ -314,6 +462,10 @@ 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" });
+      return;
+    }
     if (!bridgeState.connected) {
       bridgeState.connected = true;
       bridgeState.connectedAt = Date.now();
@@ -329,6 +481,10 @@ 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" });
+      return;
+    }
     readBody(req)
       .then((bodyStr) => {
         try {
@@ -412,6 +568,10 @@ 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" });
+      return;
+    }
     readBody(req)
       .then((bodyStr) => {
         try {
@@ -704,10 +864,9 @@ function handleRequest(req, res) {
   }
 
   // ── Reverse proxy: /ui/* → OC Web UI (localhost:ocUIPort) ──────────────
-  // Strips /ui prefix so /ui/dashboard → localhost:4000/dashboard
+  // Keep /ui prefix — Next.js basePath: "/ui" expects it
   if (path === "/ui" || path.startsWith("/ui/")) {
-    const targetPath = path === "/ui" ? "/" : path.slice(3); // strip "/ui"
-    const targetURL = `${targetPath}${url.search}`;
+    const targetURL = `${path}${url.search}`;
 
     const proxyOpts = {
       hostname: "127.0.0.1",
@@ -782,32 +941,16 @@ function handleRequest(req, res) {
     return;
   }
 
-  // ── Root → proxy to OC Web UI if available, else show bridge status ──
+  // ── Root → redirect to /ui/ (Next.js basePath) or show bridge status ──
   if (req.method === "GET" && path === "") {
     // Quick probe to check if OC UI is running
     const probe = httpRequest(
-      { hostname: "127.0.0.1", port: ocUIPort, path: "/", method: "HEAD", timeout: 1000 },
+      { hostname: "127.0.0.1", port: ocUIPort, path: "/ui/", method: "HEAD", timeout: 1000 },
       (probeRes) => {
         probeRes.resume(); // drain
-        // OC UI is running — proxy root to it
-        const rootProxyOpts = {
-          hostname: "127.0.0.1",
-          port: ocUIPort,
-          path: `/${url.search}`,
-          method: req.method,
-          headers: { ...req.headers, host: `127.0.0.1:${ocUIPort}` },
-        };
-        const rootProxy = httpRequest(rootProxyOpts, (rootRes) => {
-          const headers = { ...rootRes.headers };
-          headers["access-control-allow-origin"] = "*";
-          res.writeHead(rootRes.statusCode ?? 502, headers);
-          rootRes.pipe(res, { end: true });
-        });
-        rootProxy.on("error", () => {
-          res.writeHead(302, { Location: "/ui/" });
-          res.end();
-        });
-        rootProxy.end();
+        // OC UI is running — redirect to /ui/
+        res.writeHead(302, { Location: "/ui/" });
+        res.end();
       },
     );
     probe.on("error", () => {
@@ -815,8 +958,8 @@ function handleRequest(req, res) {
       sendJSON(res, 200, {
         ok: true,
         service: "openclaw-navigator-bridge",
-        version: "4.4.0",
-        ui: { available: false, port: ocUIPort, hint: "Start the OC gateway to enable /ui/" },
+        version: "4.6.0",
+        ui: { available: false, port: ocUIPort, hint: "Start the OC Web UI to enable /ui/" },
         gateway: { port: ocGatewayPort },
         navigator: { connected: bridgeState.connected },
       });
@@ -826,7 +969,7 @@ function handleRequest(req, res) {
       sendJSON(res, 200, {
         ok: true,
         service: "openclaw-navigator-bridge",
-        version: "4.4.0",
+        version: "4.6.0",
         ui: { available: false, port: ocUIPort, hint: "OC UI timed out" },
       });
     });
@@ -931,6 +1074,9 @@ async function main() {
   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]) {
@@ -963,6 +1109,15 @@ 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
@@ -981,6 +1136,9 @@ ${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}
@@ -1025,7 +1183,7 @@ module.exports = {
   apps: [{
     name: "openclaw-navigator",
     script: "${npxPath}",
-    args: "openclaw-navigator@latest --mcp --port ${port}",
+    args: "openclaw-navigator@latest --mcp --no-ui --port ${port}",
     cwd: "${homedir()}",
     autorestart: true,
     max_restarts: 50,
@@ -1279,6 +1437,28 @@ 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()
@@ -1340,7 +1520,7 @@ module.exports = {
   };
 
   await Promise.all([
-    checkPort("OC Web UI", ocUIPort, "/"),
+    checkPort("OC Web UI", ocUIPort, "/ui/"),
     checkPort("OC Gateway", ocGatewayPort, "/health"),
   ]);
 
@@ -1763,6 +1943,10 @@ 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/package.json

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