refactor: migrate dashboard to /dashboard and implement internal reverse proxy for gateway traffic

Dockerfile

@@ -35,8 +35,10 @@ RUN ln -s /home/node/.openclaw/openclaw-app/openclaw.mjs /usr/local/bin/openclaw
 # Copy HuggingClaw files
 COPY --chown=1000:1000 dns-fix.js /opt/dns-fix.js
 COPY --chown=1000:1000 health-server.js /home/node/app/health-server.js
+COPY --chown=1000:1000 iframe-fix.cjs /home/node/app/iframe-fix.cjs
 COPY --chown=1000:1000 start.sh /home/node/app/start.sh
 COPY --chown=1000:1000 keep-alive.sh /home/node/app/keep-alive.sh
+COPY --chown=1000:1000 wa-guardian.js /home/node/app/wa-guardian.js
 COPY --chown=1000:1000 workspace-sync.py /home/node/app/workspace-sync.py
 RUN chmod +x /home/node/app/start.sh /home/node/app/keep-alive.sh
 
@@ -48,6 +50,6 @@ ENV HOME=/home/node \
 
 WORKDIR /home/node/app
 
-EXPOSE 7860
+EXPOSE 7861
 
 CMD ["/home/node/app/start.sh"]

README.md

@@ -4,7 +4,8 @@ emoji: 🦞
 colorFrom: blue
 colorTo: purple
 sdk: docker
-app_port: 7860
+app_port: 7861
+base_path: /dashboard
 pinned: true
 license: mit
 ---
@@ -95,7 +96,7 @@ After restarting, the bot should appear online on Telegram.
 
 To use WhatsApp:
 
-1. Visit your Space's Dashboard (Port 7861) and click **🚀 Open Control UI**.
+1. Visit your Space URL. It opens the dashboard at `/dashboard` by default, then click **Open Control UI**.
 2. In the Control UI, go to **Channels** → **WhatsApp** → **Login**.
 3. Scan the QR code with your phone. 📱
 
@@ -110,7 +111,7 @@ Optionally set `BACKUP_DATASET_NAME` (default: `huggingclaw-backup`) to choose t
 
 ## 📊 Dashboard & Monitoring
 
-HuggingClaw now features a beautiful web dashboard. Access it by visiting your Space's URL on port 7861 or the internal health endpoint:
+HuggingClaw now features a built-in dashboard at `/dashboard`, served from the same public HF Space URL as the Control UI:
 
 - **Uptime Tracking:** Real-time uptime monitoring.
 - **Sync Status:** Visual indicators for workspace backup operations.
@@ -165,7 +166,7 @@ See `.env.example` for complete settings. Key environment variables:
 | Variable           | Default  | Description                         |
 |--------------------|----------|-------------------------------------|
 | `OPENCLAW_VERSION` | `latest` | Pin a specific OpenClaw version     |
-| `HEALTH_PORT`      | `7861`   | Internal health endpoint port       |
+| `HEALTH_PORT`      | `7861`   | Public dashboard / proxy port on HF Spaces |
 
 ## 🤖 LLM Providers
 
@@ -226,7 +227,7 @@ cp .env.example .env
 
 ```bash
 docker build -t huggingclaw .
-docker run -p 7860:7860 --env-file .env huggingclaw
+docker run -p 7861:7861 --env-file .env huggingclaw
 ```
 
 **Without Docker:**

health-server.js

@@ -1,57 +1,67 @@
-// Lightweight health server and dashboard on port 7861
+// Single public entrypoint for HF Spaces: local dashboard + reverse proxy to OpenClaw.
 const http = require("http");
 const fs = require("fs");
+const net = require("net");
 
-const PORT = process.env.HEALTH_PORT || 7861;
+const PORT = Number(process.env.HEALTH_PORT || 7861);
+const GATEWAY_PORT = Number(process.env.GATEWAY_PORT || 7860);
+const GATEWAY_HOST = "127.0.0.1";
 const startTime = Date.now();
 const LLM_MODEL = process.env.LLM_MODEL || "Not Set";
-const GATEWAY_TOKEN = process.env.GATEWAY_TOKEN || "huggingclaw";
 const TELEGRAM_ENABLED = !!process.env.TELEGRAM_BOT_TOKEN;
 
-const server = http.createServer((req, res) => {
-  const uptime = Math.floor((Date.now() - startTime) / 1000);
-  const uptimeHuman = `${Math.floor(uptime / 3600)}h ${Math.floor((uptime % 3600) / 60)}m`;
-
-  if (req.url === "/health") {
-    res.writeHead(200, { "Content-Type": "application/json" });
-    res.end(
-      JSON.stringify({
-        status: "ok",
-        uptime: uptime,
-        uptimeHuman: uptimeHuman,
-        timestamp: new Date().toISOString(),
-      }),
-    );
-    return;
+function getPathname(url) {
+  try {
+    return new URL(url, "http://localhost").pathname;
+  } catch {
+    return "/";
   }
-
-  if (req.url === "/status") {
-    let syncStatus = { status: "unknown", message: "No sync data yet" };
-    try {
-      if (fs.existsSync("/tmp/sync-status.json")) {
-        syncStatus = JSON.parse(
-          fs.readFileSync("/tmp/sync-status.json", "utf8"),
-        );
-      }
-    } catch (e) {}
-
-    res.writeHead(200, { "Content-Type": "application/json" });
-    res.end(
-      JSON.stringify({
-        model: LLM_MODEL,
-        whatsapp: true,
-        telegram: TELEGRAM_ENABLED,
-        sync: syncStatus,
-        uptime: uptimeHuman,
-        token: GATEWAY_TOKEN,
-      }),
-    );
-    return;
-  }
-
-  if (req.url === "/") {
-    res.writeHead(200, { "Content-Type": "text/html" });
-    res.end(`
+}
+
+function isDashboardRoute(pathname) {
+  return pathname === "/dashboard" || pathname === "/dashboard/";
+}
+
+function isLocalRoute(pathname) {
+  return (
+    pathname === "/health" ||
+    pathname === "/status" ||
+    isDashboardRoute(pathname)
+  );
+}
+
+function appendForwarded(existingValue, nextValue) {
+  const cleanNext = nextValue || "";
+  if (!existingValue) return cleanNext;
+  if (Array.isArray(existingValue))
+    return `${existingValue.join(", ")}, ${cleanNext}`;
+  return `${existingValue}, ${cleanNext}`;
+}
+
+function buildProxyHeaders(headers, remoteAddress) {
+  return {
+    ...headers,
+    host: headers.host || `${GATEWAY_HOST}:${GATEWAY_PORT}`,
+    "x-forwarded-for": appendForwarded(
+      headers["x-forwarded-for"],
+      remoteAddress,
+    ),
+    "x-forwarded-host": headers["x-forwarded-host"] || headers.host || "",
+    "x-forwarded-proto": headers["x-forwarded-proto"] || "https",
+  };
+}
+
+function readSyncStatus() {
+  try {
+    if (fs.existsSync("/tmp/sync-status.json")) {
+      return JSON.parse(fs.readFileSync("/tmp/sync-status.json", "utf8"));
+    }
+  } catch {}
+  return { status: "unknown", message: "No sync data yet" };
+}
+
+function renderDashboard() {
+  return `
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -72,7 +82,7 @@ const server = http.createServer((req, res) => {
         }
 
         * { box-sizing: border-box; margin: 0; padding: 0; }
-        
+
         body {
             font-family: 'Outfit', sans-serif;
             background-color: var(--bg);
@@ -82,7 +92,7 @@ const server = http.createServer((req, res) => {
             align-items: center;
             min-height: 100vh;
             overflow: hidden;
-            background-image: 
+            background-image:
                 radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
                 radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
         }
@@ -224,14 +234,13 @@ const server = http.createServer((req, res) => {
         }
 
         #sync-msg { color: var(--text); display: block; margin-top: 4px; }
-
     </style>
 </head>
 <body>
     <div class="dashboard">
         <header>
             <h1>🦞 HuggingClaw</h1>
-            <p class="subtitle">Space Control Panel</p>
+            <p class="subtitle">Space Dashboard</p>
         </header>
 
         <div class="stats-grid">
@@ -251,7 +260,7 @@ const server = http.createServer((req, res) => {
                 <span class="stat-label">Telegram</span>
                 <span id="tg-status">Loading...</span>
             </div>
-            <a href="/" class="stat-btn">🚀 Open Control UI</a>
+            <a href="/" class="stat-btn">Open Control UI</a>
         </div>
 
         <div class="stat-card" style="width: 100%;">
@@ -264,7 +273,7 @@ const server = http.createServer((req, res) => {
         </div>
 
         <div class="footer">
-            &bull; Live updates every 10s &bull;
+            Live updates every 10s
         </div>
     </div>
 
@@ -276,12 +285,12 @@ const server = http.createServer((req, res) => {
 
                 document.getElementById('model-id').textContent = data.model;
                 document.getElementById('uptime').textContent = data.uptime;
-                
-                document.getElementById('wa-status').innerHTML = data.whatsapp 
+
+                document.getElementById('wa-status').innerHTML = data.whatsapp
                     ? '<div class="status-badge status-online"><div class="pulse"></div>Active</div>'
                     : '<div class="status-badge status-offline">Disabled</div>';
 
-                document.getElementById('tg-status').innerHTML = data.telegram 
+                document.getElementById('tg-status').innerHTML = data.telegram
                     ? '<div class="status-badge status-online"><div class="pulse"></div>Active</div>'
                     : '<div class="status-badge status-offline">Disabled</div>';
 
@@ -295,16 +304,13 @@ const server = http.createServer((req, res) => {
                 } else if (syncData.status === 'syncing') {
                     badgeClass = 'status-syncing';
                     pulseHtml = '<div class="pulse" style="background:#3b82f6"></div>';
-                } else if (syncData.status === 'error') {
-                    badgeClass = 'status-offline';
                 }
 
-                document.getElementById('sync-badge-container').innerHTML = 
+                document.getElementById('sync-badge-container').innerHTML =
                     '<div class="status-badge ' + badgeClass + '">' + pulseHtml + syncData.status.toUpperCase() + '</div>';
-                
+
                 document.getElementById('sync-time').textContent = syncData.timestamp || 'Never';
                 document.getElementById('sync-msg').textContent = syncData.message || 'Waiting for first sync...';
-
             } catch (e) {
                 console.error("Failed to fetch status", e);
             }
@@ -315,14 +321,155 @@ const server = http.createServer((req, res) => {
     </script>
 </body>
 </html>
-    `);
+  `;
+}
+
+function proxyHttp(req, res) {
+  const proxyReq = http.request(
+    {
+      hostname: GATEWAY_HOST,
+      port: GATEWAY_PORT,
+      method: req.method,
+      path: req.url,
+      headers: buildProxyHeaders(req.headers, req.socket.remoteAddress),
+    },
+    (proxyRes) => {
+      res.writeHead(proxyRes.statusCode || 502, proxyRes.headers);
+      proxyRes.pipe(res);
+    },
+  );
+
+  proxyReq.on("error", (error) => {
+    res.writeHead(502, { "Content-Type": "application/json" });
+    res.end(
+      JSON.stringify({
+        status: "error",
+        message: "Gateway unavailable",
+        detail: error.message,
+      }),
+    );
+  });
+
+  req.pipe(proxyReq);
+}
+
+function serializeUpgradeHeaders(req, remoteAddress) {
+  const forwardedHeaders = [];
+
+  for (let i = 0; i < req.rawHeaders.length; i += 2) {
+    const name = req.rawHeaders[i];
+    const value = req.rawHeaders[i + 1];
+    const lower = name.toLowerCase();
+
+    if (
+      lower === "x-forwarded-for" ||
+      lower === "x-forwarded-host" ||
+      lower === "x-forwarded-proto"
+    ) {
+      continue;
+    }
+
+    forwardedHeaders.push(`${name}: ${value}`);
+  }
+
+  forwardedHeaders.push(
+    `X-Forwarded-For: ${appendForwarded(req.headers["x-forwarded-for"], remoteAddress)}`,
+  );
+  forwardedHeaders.push(
+    `X-Forwarded-Host: ${req.headers["x-forwarded-host"] || req.headers.host || ""}`,
+  );
+  forwardedHeaders.push(
+    `X-Forwarded-Proto: ${req.headers["x-forwarded-proto"] || "https"}`,
+  );
+
+  return forwardedHeaders;
+}
+
+function proxyUpgrade(req, socket, head) {
+  const proxySocket = net.connect(GATEWAY_PORT, GATEWAY_HOST);
+
+  proxySocket.on("connect", () => {
+    const requestLines = [
+      `${req.method} ${req.url} HTTP/${req.httpVersion}`,
+      ...serializeUpgradeHeaders(req, req.socket.remoteAddress),
+      "",
+      "",
+    ];
+
+    proxySocket.write(requestLines.join("\r\n"));
+
+    if (head && head.length > 0) {
+      proxySocket.write(head);
+    }
+
+    socket.pipe(proxySocket).pipe(socket);
+  });
+
+  proxySocket.on("error", () => {
+    if (socket.writable) {
+      socket.write("HTTP/1.1 502 Bad Gateway\r\nConnection: close\r\n\r\n");
+    }
+    socket.destroy();
+  });
+
+  socket.on("error", () => {
+    proxySocket.destroy();
+  });
+}
+
+const server = http.createServer((req, res) => {
+  const pathname = getPathname(req.url || "/");
+  const uptime = Math.floor((Date.now() - startTime) / 1000);
+  const uptimeHuman = `${Math.floor(uptime / 3600)}h ${Math.floor((uptime % 3600) / 60)}m`;
+
+  if (pathname === "/health") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(
+      JSON.stringify({
+        status: "ok",
+        uptime,
+        uptimeHuman,
+        timestamp: new Date().toISOString(),
+      }),
+    );
+    return;
+  }
+
+  if (pathname === "/status") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(
+      JSON.stringify({
+        model: LLM_MODEL,
+        whatsapp: true,
+        telegram: TELEGRAM_ENABLED,
+        sync: readSyncStatus(),
+        uptime: uptimeHuman,
+      }),
+    );
+    return;
+  }
+
+  if (isDashboardRoute(pathname)) {
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(renderDashboard());
+    return;
+  }
+
+  proxyHttp(req, res);
+});
+
+server.on("upgrade", (req, socket, head) => {
+  const pathname = getPathname(req.url || "/");
+  if (isLocalRoute(pathname)) {
+    socket.destroy();
     return;
   }
 
-  res.writeHead(404);
-  res.end();
+  proxyUpgrade(req, socket, head);
 });
 
 server.listen(PORT, "0.0.0.0", () => {
-  console.log(`🏥 Health server & Dashboard listening on port ${PORT}`);
+  console.log(
+    `Health server listening on port ${PORT}; proxying gateway traffic to ${GATEWAY_HOST}:${GATEWAY_PORT}`,
+  );
 });

keep-alive.sh

@@ -18,8 +18,8 @@ if [ -z "$SPACE_HOST" ]; then
   exit 0
 fi
 
-# Ping the Space URL — any HTTP response (even 404) counts as activity
-PING_URL="https://${SPACE_HOST}"
+# Ping the health endpoint so we keep the Space warm without touching the gateway
+PING_URL="https://${SPACE_HOST}/health"
 
 echo "💓 Keep-alive started: pinging ${PING_URL} every ${INTERVAL}s"
 

start.sh

@@ -271,6 +271,7 @@ fi
 if [ -n "$SPACE_HOST" ]; then
 printf "  │  %-40s │\n" "Keep-alive: ✅ every ${KEEP_ALIVE_INTERVAL:-300}s"
 printf "  │  %-40s │\n" "Control UI: https://${SPACE_HOST}"
+printf "  │  %-40s │\n" "Dashboard: https://${SPACE_HOST}/dashboard"
 else
 printf "  │  %-40s │\n" "Keep-alive: ⏸️  local mode"
 fi
@@ -325,12 +326,16 @@ export LLM_MODEL="$LLM_MODEL"
 node /home/node/app/health-server.js &
 HEALTH_PID=$!
 
-# 11. Start WhatsApp Guardian (Automates pairing)
+# 11. Start HF keep-alive
+/home/node/app/keep-alive.sh &
+KEEP_ALIVE_PID=$!
+
+# 12. Start WhatsApp Guardian (Automates pairing)
 node /home/node/app/wa-guardian.js &
 GUARDIAN_PID=$!
 echo "🛡️ WhatsApp Guardian started (PID: $GUARDIAN_PID)"
 
-# 12. Start Workspace Sync
+# 13. Start Workspace Sync
 python3 -u /home/node/app/workspace-sync.py &
 
 # ── Launch gateway ──