openclaw-navigator 1.0.0 → 2.0.0

package/cli.mjs

@@ -3,18 +3,22 @@
 /**
  * openclaw-navigator
  *
- * Standalone CLI to pair the Navigator macOS browser with an OpenClaw gateway.
+ * 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.
  *
  * Usage:
  *   npx openclaw-navigator
- *   npx openclaw-navigator --port 18789
- *   npx openclaw-navigator --url http://192.168.1.50:18789
+ *   npx openclaw-navigator --port 18790
  */
 
+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";
 
 // ── Colors (ANSI) ──────────────────────────────────────────────────────────
 
@@ -33,6 +37,22 @@ const fail = (msg) => console.error(`${RED}✗${RESET} ${msg}`);
 const info = (msg) => console.log(`${DIM}${msg}${RESET}`);
 const heading = (msg) => console.log(`\n${BOLD}${MAGENTA}${msg}${RESET}`);
 
+// ── In-memory bridge state ─────────────────────────────────────────────────
+
+const bridgeState = {
+  connected: false,
+  connectedAt: null,
+  lastHeartbeat: null,
+  activeTabCount: 0,
+  currentURL: null,
+  displayName: null,
+};
+
+const pendingCommands = [];
+const recentEvents = [];
+const MAX_EVENTS = 200;
+const validTokens = new Set();
+
 // ── Helpers ────────────────────────────────────────────────────────────────
 
 function getLocalIP() {
@@ -90,34 +110,6 @@ async function ask(question, options) {
   });
 }
 
-async function checkGateway(baseURL) {
-  try {
-    const resp = await fetch(`${baseURL}/navigator/status`, {
-      signal: AbortSignal.timeout(5000),
-    });
-    if (!resp.ok) return false;
-    const json = await resp.json();
-    return json.ok === true;
-  } catch {
-    return false;
-  }
-}
-
-async function generateToken(baseURL, displayName) {
-  try {
-    const resp = await fetch(`${baseURL}/navigator/pair`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ displayName }),
-      signal: AbortSignal.timeout(5000),
-    });
-    if (!resp.ok) return null;
-    return await resp.json();
-  } catch {
-    return null;
-  }
-}
-
 function startCloudflaredTunnel(port) {
   return new Promise((resolve) => {
     const child = spawn("cloudflared", ["tunnel", "--url", `http://localhost:${port}`], {
@@ -145,6 +137,181 @@ function startCloudflaredTunnel(port) {
   });
 }
 
+// ── HTTP Server (Navigator Bridge) ────────────────────────────────────────
+
+async function readBody(req, maxBytes = 1024 * 1024) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > maxBytes) throw new Error("payload too large");
+    chunks.push(chunk);
+  }
+  return Buffer.concat(chunks).toString("utf8");
+}
+
+function sendJSON(res, status, body) {
+  res.writeHead(status, {
+    "Content-Type": "application/json; charset=utf-8",
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+  });
+  res.end(JSON.stringify(body));
+}
+
+function handleRequest(req, res) {
+  // CORS preflight
+  if (req.method === "OPTIONS") {
+    res.writeHead(204, {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    });
+    res.end();
+    return;
+  }
+
+  const url = new URL(req.url ?? "/", `http://localhost`);
+  const path = url.pathname.replace(/\/+$/, "");
+
+  // ── GET /navigator/status ──
+  if (req.method === "GET" && (path === "/navigator/status" || path === "/navigator")) {
+    sendJSON(res, 200, {
+      ok: true,
+      navigator: {
+        ...bridgeState,
+        uptime: bridgeState.connectedAt ? Date.now() - bridgeState.connectedAt : null,
+        pendingCommandCount: pendingCommands.length,
+        recentEventCount: recentEvents.length,
+      },
+    });
+    return;
+  }
+
+  // ── 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();
+      console.log(`\n${GREEN}✓${RESET} ${BOLD}Navigator connected!${RESET}`);
+    }
+    bridgeState.lastHeartbeat = Date.now();
+
+    // Drain pending commands
+    const commands = [...pendingCommands];
+    pendingCommands.length = 0;
+    sendJSON(res, 200, { ok: true, commands });
+    return;
+  }
+
+  // ── 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}`);
+        }
+
+        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" });
+    });
+    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" });
+    });
+    return;
+  }
+
+  // ── POST /navigator/command (push command to Navigator) ──
+  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;
+        }
+
+        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;
+  }
+
+  // ── GET /navigator/events (read recent 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));
+    sendJSON(res, 200, { ok: true, events, total: recentEvents.length });
+    return;
+  }
+
+  // ── Health check ──
+  if (req.method === "GET" && (path === "/" || path === "/health")) {
+    sendJSON(res, 200, { ok: true, service: "openclaw-navigator-bridge", version: "1.1.0" });
+    return;
+  }
+
+  // Unknown
+  sendJSON(res, 404, { ok: false, error: "Not found" });
+}
+
 // ── Connection Box ─────────────────────────────────────────────────────────
 
 function showConnectionBox(gatewayURL, token, deepLink, method) {
@@ -175,68 +342,69 @@ function showConnectionBox(gatewayURL, token, deepLink, method) {
 // ── Main ───────────────────────────────────────────────────────────────────
 
 async function main() {
-  // Parse args
   const args = process.argv.slice(2);
-  let port = 18789;
-  let explicitURL = null;
+  let port = 18790;
 
   for (let i = 0; i < args.length; i++) {
     if (args[i] === "--port" && args[i + 1]) port = parseInt(args[i + 1], 10);
-    if (args[i] === "--url" && args[i + 1]) explicitURL = args[i + 1];
     if (args[i] === "--help" || args[i] === "-h") {
       console.log(`
-${BOLD}openclaw-navigator${RESET} — Connect Navigator browser to OpenClaw
+${BOLD}openclaw-navigator${RESET} — Navigator bridge server
 
 ${BOLD}Usage:${RESET}
-  npx openclaw-navigator
-  npx openclaw-navigator --port 18789
-  npx openclaw-navigator --url http://192.168.1.50:18789
+  npx openclaw-navigator              Start bridge + tunnel setup
+  npx openclaw-navigator --port 18790 Use a specific port
 
 ${BOLD}Options:${RESET}
-  --port <port>   Gateway port (default: 18789)
-  --url <url>     Explicit gateway HTTP base URL
+  --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.
 `);
       process.exit(0);
     }
   }
 
-  const baseURL = explicitURL ?? `http://127.0.0.1:${port}`;
+  heading("🧭 Navigator Bridge");
+  info("Self-contained bridge server for the Navigator browser\n");
 
-  heading("🧭 Navigator Setup");
-  info("Connect the Navigator browser to this OpenClaw gateway\n");
+  // ── Step 1: Start HTTP server ─────────────────────────────────────────
+  const server = createServer(handleRequest);
 
-  // ── Step 1: Check gateway ───────────────────────────────────────────────
-  process.stdout.write(`${DIM}Checking gateway at ${baseURL}...${RESET}`);
-  const running = await checkGateway(baseURL);
-
-  if (!running) {
-    process.stdout.write("\r" + " ".repeat(60) + "\r");
-    fail(`Gateway not reachable at ${baseURL}/navigator/status`);
-    console.log("");
-    console.log("  Make sure the gateway is running:");
-    console.log(`  ${CYAN}openclaw gateway --allow-unconfigured${RESET}`);
-    console.log("");
-    process.exit(1);
-  }
+  await new Promise((resolve, reject) => {
+    server.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        fail(`Port ${port} is already in use. Try: npx openclaw-navigator --port ${port + 1}`);
+        process.exit(1);
+      }
+      reject(err);
+    });
+    server.listen(port, "0.0.0.0", () => resolve());
+  });
 
-  process.stdout.write("\r" + " ".repeat(60) + "\r");
-  ok(`Gateway running at ${baseURL}`);
+  ok(`Bridge server running on port ${port}`);
+  info(`  Local: http://127.0.0.1:${port}/navigator/status`);
 
-  // ── Step 2: Choose connection method ────────────────────────────────────
+  // ── Step 2: Choose connection method ──────────────────────────────────
   const hasCloudflared = commandExists("cloudflared");
   const tailscaleIP = getTailscaleIP();
   const localIP = getLocalIP();
 
   const methods = [];
-  if (hasCloudflared) methods.push({ value: "cloudflare", label: "Cloudflare Tunnel (recommended)", hint: "works anywhere" });
+  if (hasCloudflared) methods.push({ value: "cloudflare", label: "Cloudflare Tunnel (recommended)", hint: "works anywhere, no config" });
   if (tailscaleIP) methods.push({ value: "tailscale", label: "Tailscale", 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 ─────────────────────────────────────────
+  // ── Step 3: Resolve gateway URL ───────────────────────────────────────
   let gatewayURL;
 
   switch (method) {
@@ -250,16 +418,16 @@ ${BOLD}Options:${RESET}
       }
       process.stdout.write("\r" + " ".repeat(60) + "\r");
       ok(`Tunnel active: ${tunnelURL}`);
-      gatewayURL = tunnelURL.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://");
+      gatewayURL = tunnelURL;
       break;
     }
     case "tailscale": {
-      gatewayURL = `ws://${tailscaleIP}:${port}`;
+      gatewayURL = `http://${tailscaleIP}:${port}`;
       ok(`Using Tailscale: ${tailscaleIP}:${port}`);
       break;
     }
     case "ssh": {
-      gatewayURL = `ws://127.0.0.1:${port}`;
+      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}`);
@@ -267,37 +435,38 @@ ${BOLD}Options:${RESET}
       break;
     }
     case "lan": {
-      gatewayURL = `ws://${localIP}:${port}`;
+      gatewayURL = `http://${localIP}:${port}`;
       ok(`Using LAN: ${localIP}:${port}`);
-      warn("Make sure gateway is bound to LAN (--bind lan) and both machines are on the same network.");
+      warn("Both machines must be on the same network.");
       break;
     }
   }
 
-  // ── Step 4: Generate pairing token ──────────────────────────────────────
+  // ── Step 4: Generate pairing token ────────────────────────────────────
   const displayName = hostname().replace(/\.local$/, "");
-  process.stdout.write(`\n${DIM}Generating pairing token...${RESET}`);
-  const pairing = await generateToken(baseURL, displayName);
+  const token = randomUUID().replace(/-/g, "");
+  validTokens.add(token);
+  ok("Pairing token generated");
 
-  if (!pairing?.token) {
-    process.stdout.write("\r" + " ".repeat(60) + "\r");
-    fail("Failed to generate pairing token from /navigator/pair");
-    process.exit(1);
-  }
+  // ── Step 5: Show result ───────────────────────────────────────────────
+  const deepLink = `navigator://connect?url=${encodeURIComponent(gatewayURL)}&token=${token}&name=${encodeURIComponent(displayName)}`;
 
-  process.stdout.write("\r" + " ".repeat(60) + "\r");
-  ok("Pairing token generated");
+  showConnectionBox(gatewayURL, token, deepLink, method);
 
-  // ── Step 5: Show result ─────────────────────────────────────────────────
-  const deepLink = `navigator://connect?url=${encodeURIComponent(gatewayURL)}&token=${pairing.token}&name=${encodeURIComponent(displayName)}`;
+  console.log(`${BOLD}${GREEN}Bridge is running.${RESET} Waiting for Navigator to connect...`);
+  console.log(`${DIM}Press Ctrl+C to stop.${RESET}\n`);
 
-  showConnectionBox(gatewayURL, pairing.token, deepLink, method);
+  // Graceful shutdown
+  process.on("SIGINT", () => {
+    console.log(`\n${DIM}Shutting down bridge...${RESET}`);
+    server.close();
+    process.exit(0);
+  });
 
-  // Keep tunnel alive if cloudflare
-  if (method === "cloudflare") {
-    console.log(`${YELLOW}Tunnel is running. Press Ctrl+C to stop.${RESET}\n`);
-    await new Promise(() => {}); // wait forever
-  }
+  process.on("SIGTERM", () => {
+    server.close();
+    process.exit(0);
+  });
 }
 
 main().catch((err) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "openclaw-navigator",
-  "version": "1.0.0",
-  "description": "Connect the Navigator browser to your OpenClaw gateway",
+  "version": "2.0.0",
+  "description": "Self-contained Navigator bridge server — connects the Navigator browser to any machine",
   "license": "MIT",
   "bin": {
     "openclaw-navigator": "cli.mjs"