@chrysb/alphaclaw 0.7.2-beta.2 → 0.7.2-beta.4

package/lib/public/js/app.js

@@ -307,7 +307,7 @@ const App = () => {
           <${ModelsRoute} onRestartRequired=${controllerActions.setRestartRequired} />
         </div>
         <div
-          class="app-content-pane ac-fixed-header-pane"
+          class="app-content-pane"
           style=${{ display: isNodesRoute ? "block" : "none" }}
         >
           <${NodesRoute} onRestartRequired=${controllerActions.setRestartRequired} />

package/lib/public/js/components/icons.js

@@ -450,3 +450,14 @@ export const FullscreenLineIcon = ({ className = "" }) => html`
     <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
   </svg>
 `;
+
+export const ComputerLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z" />
+  </svg>
+`;

package/lib/public/js/components/nodes-tab/browser-attach/index.js

@@ -0,0 +1,85 @@
+import { h } from "https://esm.sh/preact";
+import { useMemo } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { marked } from "https://esm.sh/marked";
+
+const html = htm.bind(h);
+
+const kReleaseNotesUrl =
+  "https://github.com/openclaw/openclaw/releases/tag/v2026.3.13";
+const kSetupInstructionsMarkdown = `Release reference: [OpenClaw 2026.3.13](${kReleaseNotesUrl})
+
+## Requirements
+
+- OpenClaw 2026.3.13+
+- Chrome 144+
+- Node.js installed on the Mac node so \`npx\` is available
+
+## Setup
+
+### 1) Enable remote debugging in Chrome
+
+Open \`chrome://inspect/#remote-debugging\` and turn it on. Do **not** launch Chrome with \`--remote-debugging-port\`.
+
+### 2) Configure the node
+
+In \`~/.openclaw/openclaw.json\` on the Mac node:
+
+\`\`\`json
+{
+  "browser": {
+    "defaultProfile": "user"
+  }
+}
+\`\`\`
+
+The built-in \`user\` profile uses live Chrome attach. You do not need a custom \`existing-session\` profile.
+
+### 3) Approve Chrome consent
+
+On first connect, Chrome prompts for DevTools MCP access. Click **Allow**.
+
+## Troubleshooting
+
+| Problem | Fix |
+| --- | --- |
+| Browser proxy times out (20s) | Restart Chrome cleanly and run the check again. |
+| Config validation error on existing-session | Do not define a custom existing-session profile. Use \`defaultProfile: "user"\`. |
+| EADDRINUSE on port 9222 | Quit Chrome launched with \`--remote-debugging-port\` and relaunch normally. |
+| Consent dialog appears but attach hangs | Quit Chrome, relaunch, and approve the dialog again. |
+| \`npx chrome-devtools-mcp\` not found | Install Node.js on the Mac node so \`npx\` exists in PATH. |`;
+
+export const BrowserAttachCard = () => {
+  const setupInstructionsHtml = useMemo(
+    () =>
+      marked.parse(kSetupInstructionsMarkdown, {
+        gfm: true,
+        breaks: true,
+      }),
+    [],
+  );
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+      <div class="space-y-1">
+        <h3 class="font-semibold text-sm">Live Chrome Attach (Mac Node)</h3>
+        <p class="text-xs text-gray-500">
+          Connect your agent to real Chrome sessions (logged-in tabs, cookies,
+          and all) using the built-in <code>user</code> profile.
+        </p>
+      </div>
+
+      <details class="rounded-lg border border-border bg-black/20 px-3 py-2.5">
+        <summary
+          class="cursor-pointer text-xs text-gray-300 hover:text-gray-200"
+        >
+          Setup instructions
+        </summary>
+        <div
+          class="pt-3 file-viewer-preview release-notes-preview text-xs leading-5"
+          dangerouslySetInnerHTML=${{ __html: setupInstructionsHtml }}
+        ></div>
+      </details>
+    </div>
+  `;
+};

package/lib/public/js/components/nodes-tab/connected-nodes/index.js

@@ -1,9 +1,41 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { useCallback, useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
 import { ActionButton } from "../../action-button.js";
 import { Badge } from "../../badge.js";
+import { ComputerLineIcon, FileCopyLineIcon } from "../../icons.js";
+import { LoadingSpinner } from "../../loading-spinner.js";
+import { copyTextToClipboard } from "../../../lib/clipboard.js";
+import { fetchNodeBrowserStatusForNode } from "../../../lib/api.js";
+import { readUiSettings, updateUiSettings } from "../../../lib/ui-settings.js";
+import { showToast } from "../../toast.js";
 
 const html = htm.bind(h);
+const kBrowserCheckTimeoutMs = 10000;
+const kBrowserPollIntervalMs = 10000;
+const kBrowserAttachStateByNodeKey = "nodesBrowserAttachStateByNode";
+
+const escapeDoubleQuotes = (value) => String(value || "").replace(/"/g, '\\"');
+
+const buildReconnectCommand = ({ node, connectInfo, maskToken = false }) => {
+  const host = String(connectInfo?.gatewayHost || "").trim() || "localhost";
+  const port = Number(connectInfo?.gatewayPort) || 3000;
+  const token = String(connectInfo?.gatewayToken || "").trim();
+  const tlsFlag = connectInfo?.tls === true ? "--tls" : "";
+  const displayName = String(node?.displayName || node?.nodeId || "My Node").trim();
+  const tokenValue = maskToken ? "****" : token;
+
+  return [
+    tokenValue ? `OPENCLAW_GATEWAY_TOKEN=${tokenValue}` : "",
+    "openclaw node run",
+    `--host ${host}`,
+    `--port ${port}`,
+    tlsFlag,
+    `--display-name "${escapeDoubleQuotes(displayName)}"`,
+  ]
+    .filter(Boolean)
+    .join(" ");
+};
 
 const renderNodeStatusBadge = (node) => {
   if (node?.connected) {
@@ -15,48 +47,260 @@ const renderNodeStatusBadge = (node) => {
   return html`<${Badge} tone="danger">Pending approval</${Badge}>`;
 };
 
+const isBrowserCapableNode = (node) => {
+  const caps = Array.isArray(node?.caps) ? node.caps : [];
+  const commands = Array.isArray(node?.commands) ? node.commands : [];
+  return caps.includes("browser") || commands.includes("browser.proxy");
+};
+
+const getBrowserStatusTone = (status) => {
+  if (status.running) return "success";
+  return "warning";
+};
+
+const getBrowserStatusLabel = (status) => {
+  if (status.running) return "Attached";
+  return "Not connected";
+};
+
+const withTimeout = async (promise, timeoutMs = kBrowserCheckTimeoutMs) => {
+  let timeoutId = null;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((_, reject) => {
+        timeoutId = setTimeout(() => {
+          reject(new Error("Browser check timed out"));
+        }, timeoutMs);
+      }),
+    ]);
+  } finally {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }
+};
+
+const readBrowserAttachStateByNode = () => {
+  const uiSettings = readUiSettings();
+  const attachState = uiSettings?.[kBrowserAttachStateByNodeKey];
+  if (!attachState || typeof attachState !== "object" || Array.isArray(attachState)) {
+    return {};
+  }
+  return attachState;
+};
+
+const writeBrowserAttachStateByNode = (nextState = {}) => {
+  updateUiSettings((currentSettings) => {
+    const nextSettings =
+      currentSettings && typeof currentSettings === "object" ? currentSettings : {};
+    return {
+      ...nextSettings,
+      [kBrowserAttachStateByNodeKey]:
+        nextState && typeof nextState === "object" ? nextState : {},
+    };
+  });
+};
+
 export const ConnectedNodesCard = ({
   nodes = [],
   pending = [],
   loading = false,
   error = "",
-  onRefresh = () => {},
-}) => html`
-  <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
-    <div class="flex items-center justify-between gap-2">
-      <div class="space-y-1">
-        <h3 class="font-semibold text-sm">Connected Nodes</h3>
-        <p class="text-xs text-gray-500">
-          Nodes can run <code>system.run</code> and browser proxy commands for this gateway.
-        </p>
-      </div>
-      <${ActionButton}
-        onClick=${onRefresh}
-        idleLabel="Refresh"
-        tone="secondary"
-        size="sm"
-      />
-    </div>
+  connectInfo = null,
+}) => {
+  const [browserStatusByNodeId, setBrowserStatusByNodeId] = useState({});
+  const [browserErrorByNodeId, setBrowserErrorByNodeId] = useState({});
+  const [checkingBrowserNodeId, setCheckingBrowserNodeId] = useState("");
+  const [browserAttachStateByNodeId, setBrowserAttachStateByNodeId] = useState(() =>
+    readBrowserAttachStateByNode(),
+  );
+  const browserPollCursorRef = useRef(0);
+  const browserCheckInFlightNodeIdRef = useRef("");
+
+  const handleCopyCommand = async (command) => {
+    const copied = await copyTextToClipboard(command);
+    if (copied) {
+      showToast("Connection command copied", "success");
+      return;
+    }
+    showToast("Could not copy connection command", "error");
+  };
+
+  const handleCheckNodeBrowser = useCallback(async (nodeId, { silent = false } = {}) => {
+    const normalizedNodeId = String(nodeId || "").trim();
+    if (!normalizedNodeId || browserCheckInFlightNodeIdRef.current) return;
+    browserCheckInFlightNodeIdRef.current = normalizedNodeId;
+    if (!silent) {
+      setCheckingBrowserNodeId(normalizedNodeId);
+    }
+    setBrowserErrorByNodeId((prev) => ({
+      ...prev,
+      [normalizedNodeId]: "",
+    }));
+    try {
+      const result = await withTimeout(
+        fetchNodeBrowserStatusForNode(normalizedNodeId, "user"),
+      );
+      const status = result?.status && typeof result.status === "object" ? result.status : null;
+      setBrowserStatusByNodeId((prev) => ({
+        ...prev,
+        [normalizedNodeId]: status,
+      }));
+    } catch (error) {
+      const message = error.message || "Could not check node browser status";
+      setBrowserErrorByNodeId((prev) => ({
+        ...prev,
+        [normalizedNodeId]: message,
+      }));
+      if (!silent) {
+        showToast(message, "error");
+      }
+    } finally {
+      browserCheckInFlightNodeIdRef.current = "";
+      if (!silent) {
+        setCheckingBrowserNodeId("");
+      }
+    }
+  }, []);
+
+  const setBrowserAttachStateForNode = useCallback((nodeId, enabled) => {
+    const normalizedNodeId = String(nodeId || "").trim();
+    if (!normalizedNodeId) return;
+    setBrowserAttachStateByNodeId((prevState) => {
+      const nextState = {
+        ...(prevState && typeof prevState === "object" ? prevState : {}),
+        [normalizedNodeId]: enabled === true,
+      };
+      writeBrowserAttachStateByNode(nextState);
+      return nextState;
+    });
+  }, []);
+
+  const handleAttachNodeBrowser = useCallback(async (nodeId) => {
+    const normalizedNodeId = String(nodeId || "").trim();
+    if (!normalizedNodeId) return;
+    setBrowserAttachStateForNode(normalizedNodeId, true);
+    await handleCheckNodeBrowser(normalizedNodeId);
+  }, [handleCheckNodeBrowser, setBrowserAttachStateForNode]);
+
+  const handleDetachNodeBrowser = useCallback((nodeId) => {
+    const normalizedNodeId = String(nodeId || "").trim();
+    if (!normalizedNodeId) return;
+    setBrowserAttachStateForNode(normalizedNodeId, false);
+    setBrowserStatusByNodeId((prevState) => {
+      const nextState = { ...(prevState || {}) };
+      delete nextState[normalizedNodeId];
+      return nextState;
+    });
+    setBrowserErrorByNodeId((prevState) => {
+      const nextState = { ...(prevState || {}) };
+      delete nextState[normalizedNodeId];
+      return nextState;
+    });
+  }, [setBrowserAttachStateForNode]);
 
+  useEffect(() => {
+    if (checkingBrowserNodeId) return;
+    const pollableNodeIds = nodes
+      .map((node) => ({
+        nodeId: String(node?.nodeId || "").trim(),
+        connected: node?.connected === true,
+        browserCapable: isBrowserCapableNode(node),
+      }))
+      .filter(
+        (entry) =>
+          entry.nodeId &&
+          entry.connected &&
+          entry.browserCapable &&
+          browserAttachStateByNodeId?.[entry.nodeId] === true,
+      )
+      .map((entry) => entry.nodeId);
+    if (!pollableNodeIds.length) return;
+
+    let active = true;
+    const poll = async () => {
+      if (!active || browserCheckInFlightNodeIdRef.current) return;
+      const pollIndex = browserPollCursorRef.current % pollableNodeIds.length;
+      browserPollCursorRef.current += 1;
+      const nextNodeId = pollableNodeIds[pollIndex];
+      await handleCheckNodeBrowser(nextNodeId, { silent: true });
+    };
+    poll();
+    const timer = setInterval(poll, kBrowserPollIntervalMs);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [browserAttachStateByNodeId, handleCheckNodeBrowser, nodes]);
+
+  return html`
+  <div class="space-y-3">
     ${pending.length
       ? html`
-          <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-300">
+          <div class="bg-surface border border-yellow-500/40 rounded-xl px-4 py-3 text-xs text-yellow-300">
             ${pending.length} pending node${pending.length === 1 ? "" : "s"} waiting for approval.
           </div>
         `
       : null}
 
     ${loading
-      ? html`<div class="text-xs text-gray-500">Loading nodes...</div>`
+      ? html`
+          <div class="bg-surface border border-border rounded-xl p-4">
+            <div class="flex items-center gap-3 text-sm text-gray-400">
+              <${LoadingSpinner} className="h-4 w-4" />
+              <span>Loading nodes...</span>
+            </div>
+          </div>
+        `
       : error
-        ? html`<div class="text-xs text-red-400">${error}</div>`
+        ? html`
+            <div class="bg-surface border border-border rounded-xl p-4 text-xs text-red-400">
+              ${error}
+            </div>
+          `
         : !nodes.length
-          ? html`<div class="text-xs text-gray-500">No nodes are connected yet.</div>`
+          ? html`
+              <div
+                class="bg-surface border border-border rounded-xl px-6 py-10 min-h-[26rem] flex flex-col items-center justify-center text-center"
+              >
+                <div class="max-w-md w-full flex flex-col items-center gap-4">
+                  <${ComputerLineIcon} className="h-12 w-12 text-cyan-400" />
+                  <div class="space-y-2">
+                    <h2 class="font-semibold text-lg text-gray-100">
+                      No connected nodes yet
+                    </h2>
+                    <p class="text-xs text-gray-400 leading-5">
+                      Connect a Mac, iOS, Android, or headless node to run
+                      system and browser commands through this gateway.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            `
           : html`
               <div class="space-y-2">
                 ${nodes.map(
-                  (node) => html`
-                    <div class="ac-surface-inset rounded-lg px-3 py-2 space-y-2">
+                  (node) => {
+                    const nodeId = String(node?.nodeId || "").trim();
+                    const browserStatus = browserStatusByNodeId[nodeId] || null;
+                    const browserError = browserErrorByNodeId[nodeId] || "";
+                    const checkingBrowser = checkingBrowserNodeId === nodeId;
+                    const canCheckBrowser =
+                      node?.connected && isBrowserCapableNode(node) && nodeId;
+                    const browserAttachEnabled = browserAttachStateByNodeId?.[nodeId] === true;
+                    const hasBrowserCheckResult = !!browserStatus || !!browserError;
+                    const browserAttached = browserStatus?.running === true;
+                    const showResolvingSpinner =
+                      browserAttachEnabled && !hasBrowserCheckResult && !checkingBrowser;
+                    const showBrowserCheckButton =
+                      canCheckBrowser &&
+                      browserAttachEnabled &&
+                      !checkingBrowser &&
+                      hasBrowserCheckResult &&
+                      !browserAttached;
+                    return html`
+                    <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
                       <div class="flex items-center justify-between gap-2">
                         <div class="min-w-0">
                           <div class="text-sm font-medium truncate">
@@ -76,10 +320,144 @@ export const ConnectedNodesCard = ({
                           <code>${Array.isArray(node?.caps) ? node.caps.join(", ") : "none"}</code>
                         </span>
                       </div>
+                      ${canCheckBrowser
+                        ? html`
+                            <div class="space-y-2">
+                              <div class="ac-surface-inset rounded-lg px-3 py-2 space-y-2">
+                                <div class="flex items-start justify-between gap-2">
+                                  <div class="space-y-0.5">
+                                    <div class="text-sm font-medium">Browser</div>
+                                    ${browserAttachEnabled
+                                      ? html`
+                                          <div class="text-[11px] text-gray-500">
+                                            profile: <code>user</code>
+                                          </div>
+                                        `
+                                      : html`
+                                          <div class="text-[11px] text-gray-500">
+                                            Attach is disabled until you click
+                                            ${" "}
+                                            <code>Attach</code>
+                                            ${" "}
+                                            (prevents control prompts when opening this tab).
+                                          </div>
+                                        `}
+                                  </div>
+                                  <div class="flex items-start gap-2">
+                                    ${browserStatus
+                                      ? html`
+                                          <span class="inline-flex mt-0.5">
+                                            <${Badge} tone=${getBrowserStatusTone(browserStatus)}
+                                              >${getBrowserStatusLabel(browserStatus)}</${Badge}
+                                            >
+                                          </span>
+                                        `
+                                      : null}
+                                    ${showResolvingSpinner
+                                      ? html`
+                                          <${LoadingSpinner} className="h-3.5 w-3.5" />
+                                        `
+                                      : null}
+                                    ${checkingBrowser
+                                      ? html`
+                                          <${LoadingSpinner} className="h-3.5 w-3.5" />
+                                        `
+                                      : null}
+                                    ${canCheckBrowser && !browserAttachEnabled
+                                      ? html`
+                                          <${ActionButton}
+                                            onClick=${() => handleAttachNodeBrowser(nodeId)}
+                                            idleLabel="Attach"
+                                            tone="primary"
+                                            size="sm"
+                                          />
+                                        `
+                                      : null}
+                                    ${showBrowserCheckButton
+                                      ? html`
+                                          <${ActionButton}
+                                            onClick=${() => handleCheckNodeBrowser(nodeId)}
+                                            idleLabel="Check"
+                                            tone="secondary"
+                                            size="sm"
+                                          />
+                                        `
+                                      : null}
+                                  </div>
+                                </div>
+                                ${browserStatus
+                                  ? html`
+                                      <div class="flex items-center justify-between gap-2">
+                                        <div class="flex flex-wrap gap-2 text-[11px] text-gray-500">
+                                          <span>driver: <code>${browserStatus?.driver || "unknown"}</code></span>
+                                          <span>transport: <code>${browserStatus?.transport || "unknown"}</code></span>
+                                        </div>
+                                        ${browserAttachEnabled
+                                          ? html`
+                                              <button
+                                                type="button"
+                                                onclick=${() =>
+                                                  handleDetachNodeBrowser(nodeId)}
+                                                class="shrink-0 text-[11px] text-gray-500 hover:text-gray-300"
+                                              >
+                                                Detach
+                                              </button>
+                                            `
+                                          : null}
+                                      </div>
+                                    `
+                                  : null}
+                                ${browserError
+                                  ? html`<div class="text-[11px] text-red-400">${browserError}</div>`
+                                  : null}
+                              </div>
+                            </div>
+                          `
+                        : null}
+                      ${node?.paired && !node?.connected && connectInfo
+                        ? html`
+                            <div class="border-t border-border pt-2 space-y-2">
+                              <div class="text-[11px] text-gray-500">
+                                Reconnect command
+                              </div>
+                              <div class="flex items-center gap-2">
+                                <input
+                                  type="text"
+                                  readonly
+                                  value=${buildReconnectCommand({
+                                    node,
+                                    connectInfo,
+                                    maskToken: true,
+                                  })}
+                                  class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2 py-1.5 text-[11px] font-mono text-gray-300"
+                                />
+                                <${ActionButton}
+                                  onClick=${() =>
+                                    handleCopyCommand(
+                                      buildReconnectCommand({
+                                        node,
+                                        connectInfo,
+                                        maskToken: false,
+                                      }),
+                                    )}
+                                  tone="secondary"
+                                  size="sm"
+                                  iconOnly=${true}
+                                  idleIcon=${FileCopyLineIcon}
+                                  idleIconClassName="w-3.5 h-3.5"
+                                  ariaLabel="Copy reconnect command"
+                                  title="Copy reconnect command"
+                                />
+                              </div>
+                            </div>
+                          `
+                        : null}
                     </div>
-                  `,
+                  `;
+                  },
                 )}
               </div>
             `}
   </div>
 `;
+};

package/lib/public/js/components/nodes-tab/index.js

@@ -4,6 +4,7 @@ import { PageHeader } from "../page-header.js";
 import { ActionButton } from "../action-button.js";
 import { useNodesTab } from "./use-nodes-tab.js";
 import { ConnectedNodesCard } from "./connected-nodes/index.js";
+import { BrowserAttachCard } from "./browser-attach/index.js";
 import { NodesSetupWizard } from "./setup-wizard/index.js";
 
 const html = htm.bind(h);
@@ -16,6 +17,14 @@ export const NodesTab = ({ onRestartRequired = () => {} }) => {
       <${PageHeader}
         title="Nodes"
         actions=${html`
+          <${ActionButton}
+            onClick=${actions.refreshNodes}
+            loading=${state.refreshingNodes}
+            loadingMode="inline"
+            idleLabel="Refresh"
+            tone="secondary"
+            size="sm"
+          />
           <${ActionButton}
             onClick=${actions.openWizard}
             idleLabel="Connect Node"
@@ -30,9 +39,11 @@ export const NodesTab = ({ onRestartRequired = () => {} }) => {
         pending=${state.pending}
         loading=${state.loadingNodes}
         error=${state.nodesError}
-        onRefresh=${actions.refreshNodes}
+        connectInfo=${state.connectInfo}
       />
 
+      <${BrowserAttachCard} />
+
       <${NodesSetupWizard}
         visible=${state.wizardVisible}
         nodes=${state.nodes}

package/lib/public/js/components/nodes-tab/setup-wizard/index.js

@@ -2,7 +2,7 @@ import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { ModalShell } from "../../modal-shell.js";
 import { ActionButton } from "../../action-button.js";
-import { CloseIcon } from "../../icons.js";
+import { CloseIcon, FileCopyLineIcon } from "../../icons.js";
 import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { showToast } from "../../toast.js";
 import { useSetupWizard } from "./use-setup-wizard.js";
@@ -23,8 +23,9 @@ const renderCommandBlock = ({ command = "", onCopy = () => {} }) => html`
       <button
         type="button"
         onclick=${onCopy}
-        class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+        class="text-xs px-2 py-1 rounded-lg ac-btn-ghost inline-flex items-center gap-1.5"
       >
+        <${FileCopyLineIcon} className="w-3.5 h-3.5" />
         Copy
       </button>
     </div>
@@ -57,6 +58,7 @@ export const NodesSetupWizard = ({
     onClose,
   });
   const isFinalStep = state.step === kWizardSteps.length - 1;
+  const canApproveSelectedNode = state.selectedNode?.paired === false;
 
   return html`
     <${ModalShell}
@@ -125,6 +127,13 @@ export const NodesSetupWizard = ({
                     onCopy: () =>
                       copyAndToast(state.connectCommand || "", "command"),
                   })}
+              <div class="rounded-lg border border-border bg-black/20 px-3 py-2 text-xs text-gray-400">
+                ${state.pendingSelectableNodes.length
+                  ? `${state.pendingSelectableNodes.length} pending node${state.pendingSelectableNodes.length === 1
+                      ? ""
+                      : "s"} detected. Continue to Step 3 to approve.`
+                  : "Pairing requests will show up here. Checks every 3s."}
+              </div>
             </div>
           `
         : null}
@@ -135,6 +144,13 @@ export const NodesSetupWizard = ({
               <div class="text-xs text-gray-500">
                 Select the node to approve after you run the connect command.
               </div>
+              <div class="text-xs text-gray-500">
+                This list refreshes automatically every
+                ${" "}
+                <code>${Math.round(state.nodeDiscoveryPollIntervalMs / 1000)}s</code>
+                ${" "}
+                while this step is open.
+              </div>
               <div class="flex items-center gap-2">
                 <select
                   value=${state.selectedNodeId}
@@ -149,7 +165,10 @@ export const NodesSetupWizard = ({
                   ${state.selectableNodes.map(
                     (entry) => html`
                       <option value=${entry.nodeId}>
-                        ${entry.displayName} (${entry.nodeId.slice(0, 12)}...)
+                        ${entry.displayName} (${entry.nodeId.slice(0, 12)}...)${entry.paired ===
+                        false
+                          ? " · pending approval"
+                          : " · already paired"}
                       </option>
                     `,
                   )}
@@ -161,15 +180,17 @@ export const NodesSetupWizard = ({
                   size="sm"
                 />
               </div>
-              <${ActionButton}
-                onClick=${state.approveSelectedNode}
-                loading=${state.approvingNodeId === state.selectedNodeId}
-                idleLabel="Approve Selected Node"
-                loadingLabel="Approving..."
-                tone="primary"
-                size="sm"
-                disabled=${!state.selectedNodeId}
-              />
+              ${state.selectedNodeId && !canApproveSelectedNode
+                ? html`
+                    <div class="text-xs text-yellow-300">
+                      This node is already paired. Pick a
+                      ${" "}
+                      <code>pending approval</code>
+                      ${" "}
+                      node to continue.
+                    </div>
+                  `
+                : null}
             </div>
           `
         : null}
@@ -229,12 +250,22 @@ export const NodesSetupWizard = ({
             `
           : html`
               <${ActionButton}
-                onClick=${() => state.setStep(Math.min(kWizardSteps.length - 1, state.step + 1))}
-                idleLabel="Next"
+                onClick=${async () => {
+                  if (state.step === 2) {
+                    const approved = await state.approveSelectedNode();
+                    if (!approved) return;
+                  }
+                  state.setStep(Math.min(kWizardSteps.length - 1, state.step + 1));
+                }}
+                loading=${state.step === 2 &&
+                state.approvingNodeId === state.selectedNodeId}
+                idleLabel=${state.step === 2 ? "Approve" : "Next"}
+                loadingLabel="Approving..."
                 tone="primary"
                 size="md"
                 className="w-full justify-center"
-                disabled=${state.step === 2 && !state.selectedNodeId}
+                disabled=${state.step === 2 &&
+                (!state.selectedNodeId || !canApproveSelectedNode)}
               />
             `}
       </div>

package/lib/public/js/components/nodes-tab/setup-wizard/use-setup-wizard.js

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import {
   approveNode,
   fetchNodeConnectInfo,
@@ -6,6 +12,8 @@ import {
 } from "../../../lib/api.js";
 import { showToast } from "../../toast.js";
 
+const kNodeDiscoveryPollIntervalMs = 3000;
+
 export const useSetupWizard = ({
   visible = false,
   nodes = [],
@@ -21,6 +29,7 @@ export const useSetupWizard = ({
   const [selectedNodeId, setSelectedNodeId] = useState("");
   const [approvingNodeId, setApprovingNodeId] = useState("");
   const [configuring, setConfiguring] = useState(false);
+  const refreshInFlightRef = useRef(false);
 
   useEffect(() => {
     if (!visible) return;
@@ -46,7 +55,10 @@ export const useSetupWizard = ({
   }, [visible]);
 
   const selectableNodes = useMemo(() => {
-    const all = [...pending, ...nodes];
+    const all = [
+      ...pending.map((entry) => ({ ...entry, pendingApproval: true })),
+      ...nodes.map((entry) => ({ ...entry, pendingApproval: false })),
+    ];
     const seen = new Set();
     const unique = [];
     for (const entry of all) {
@@ -56,13 +68,18 @@ export const useSetupWizard = ({
       unique.push({
         nodeId,
         displayName: String(entry?.displayName || entry?.name || nodeId),
-        paired: entry?.paired !== false,
+        paired: entry?.pendingApproval ? false : entry?.paired !== false,
         connected: entry?.connected === true,
       });
     }
     return unique;
   }, [nodes, pending]);
 
+  const pendingSelectableNodes = useMemo(
+    () => selectableNodes.filter((entry) => entry.paired === false),
+    [selectableNodes],
+  );
+
   const selectedNode = useMemo(
     () =>
       selectableNodes.find(
@@ -93,19 +110,56 @@ export const useSetupWizard = ({
   }, [connectInfo, displayName]);
 
   const refreshNodeList = useCallback(async () => {
-    await refreshNodes();
+    if (refreshInFlightRef.current) return;
+    refreshInFlightRef.current = true;
+    try {
+      await refreshNodes();
+    } finally {
+      refreshInFlightRef.current = false;
+    }
   }, [refreshNodes]);
 
+  useEffect(() => {
+    if (!visible || (step !== 1 && step !== 2)) return;
+    let active = true;
+    const poll = async () => {
+      if (!active) return;
+      try {
+        await refreshNodeList();
+      } catch {}
+    };
+    poll();
+    const timer = setInterval(poll, kNodeDiscoveryPollIntervalMs);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [refreshNodeList, step, visible]);
+
+  useEffect(() => {
+    if (!visible || step !== 2) return;
+    const hasSelected = selectableNodes.some(
+      (entry) => entry.nodeId === String(selectedNodeId || "").trim(),
+    );
+    if (hasSelected) return;
+    const preferredNode =
+      pendingSelectableNodes.find((entry) => entry.paired === false) || selectableNodes[0];
+    if (!preferredNode) return;
+    setSelectedNodeId(preferredNode.nodeId);
+  }, [pendingSelectableNodes, selectableNodes, selectedNodeId, step, visible]);
+
   const approveSelectedNode = useCallback(async () => {
     const nodeId = String(selectedNodeId || "").trim();
-    if (!nodeId || approvingNodeId) return;
+    if (!nodeId || approvingNodeId) return false;
     setApprovingNodeId(nodeId);
     try {
       await approveNode(nodeId);
       showToast("Node approved", "success");
       await refreshNodes();
+      return true;
     } catch (err) {
       showToast(err.message || "Could not approve node", "error");
+      return false;
     } finally {
       setApprovingNodeId("");
     }
@@ -148,10 +202,12 @@ export const useSetupWizard = ({
     setSelectedNodeId,
     selectedNode,
     selectableNodes,
+    pendingSelectableNodes,
     approvingNodeId,
     configuring,
     connectCommand,
     refreshNodeList,
+    nodeDiscoveryPollIntervalMs: kNodeDiscoveryPollIntervalMs,
     approveSelectedNode,
     applyGatewayNodeRouting,
     completeWizard,

package/lib/public/js/components/nodes-tab/use-nodes-tab.js

@@ -1,9 +1,33 @@
-import { useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { fetchNodeConnectInfo } from "../../lib/api.js";
+import { showToast } from "../toast.js";
 import { useConnectedNodes } from "./connected-nodes/user-connected-nodes.js";
 
 export const useNodesTab = () => {
   const connectedNodesState = useConnectedNodes({ enabled: true });
   const [wizardVisible, setWizardVisible] = useState(false);
+  const [connectInfo, setConnectInfo] = useState(null);
+  const [refreshingNodes, setRefreshingNodes] = useState(false);
+
+  useEffect(() => {
+    fetchNodeConnectInfo()
+      .then((result) => {
+        setConnectInfo(result || null);
+      })
+      .catch((error) => {
+        showToast(error.message || "Could not load node connect command", "error");
+      });
+  }, []);
+
+  const refreshNodes = useCallback(async () => {
+    if (refreshingNodes) return;
+    setRefreshingNodes(true);
+    try {
+      await connectedNodesState.refresh();
+    } finally {
+      setRefreshingNodes(false);
+    }
+  }, [connectedNodesState.refresh, refreshingNodes]);
 
   return {
     state: {
@@ -11,12 +35,14 @@ export const useNodesTab = () => {
       nodes: connectedNodesState.nodes,
       pending: connectedNodesState.pending,
       loadingNodes: connectedNodesState.loading,
+      refreshingNodes,
       nodesError: connectedNodesState.error,
+      connectInfo,
     },
     actions: {
       openWizard: () => setWizardVisible(true),
       closeWizard: () => setWizardVisible(false),
-      refreshNodes: connectedNodesState.refresh,
+      refreshNodes,
     },
   };
 };

package/lib/public/js/components/onboarding/welcome-import-step.js

@@ -240,8 +240,8 @@ export const WelcomeImportStep = ({
             >
               AlphaClaw controls deployment tokens and env vars
               (${(scanResult.managedEnvConflicts.vars || []).join(", ")}).
-              Imported values for these will be overwritten with AlphaClaw-managed
-              env var references during import.
+              Imported values for these will be overwritten with
+              AlphaClaw-managed env var references during import.
             </div>
           `
         : null}
@@ -293,7 +293,8 @@ export const WelcomeImportStep = ({
           className="w-full"
         />
         <${ActionButton}
-          onClick=${() => onApprove(buildApprovedImportSecrets(scanResult.secrets))}
+          onClick=${() =>
+            onApprove(buildApprovedImportSecrets(scanResult.secrets))}
           loading=${scanning}
           tone="primary"
           size="md"

package/lib/public/js/lib/api.js

@@ -684,6 +684,15 @@ export const fetchNodeConnectInfo = async () => {
   return parseJsonOrThrow(res, "Could not load connect info");
 };
 
+export const fetchNodeBrowserStatusForNode = async (nodeId, profile = "user") => {
+  const safeNodeId = encodeURIComponent(String(nodeId || ""));
+  const params = new URLSearchParams({ profile: String(profile || "user") });
+  const res = await authFetch(
+    `/api/nodes/${safeNodeId}/browser-status?${params.toString()}`,
+  );
+  return parseJsonOrThrow(res, "Could not load node browser status");
+};
+
 export const fetchNodeExecConfig = async () => {
   const res = await authFetch("/api/nodes/exec-config");
   return parseJsonOrThrow(res, "Could not load node exec config");

package/lib/server/openclaw-version.js

@@ -8,6 +8,7 @@ const {
   kNpmPackageRoot,
 } = require("./constants");
 const { normalizeOpenclawVersion } = require("./helpers");
+const { parseJsonObjectFromNoisyOutput } = require("./utils/json");
 
 const createOpenclawVersionService = ({
   gatewayEnv,
@@ -62,7 +63,10 @@ const createOpenclawVersionService = ({
         timeout: 8000,
         encoding: "utf8",
       }).trim();
-      const parsed = JSON.parse(raw);
+      const parsed = parseJsonObjectFromNoisyOutput(raw);
+      if (!parsed) {
+        throw new Error("openclaw update status returned invalid JSON payload");
+      }
       const latestVersion = normalizeOpenclawVersion(
         parsed?.availability?.latestVersion ||
           parsed?.update?.registry?.latestVersion,

package/lib/server/routes/nodes.js

@@ -7,6 +7,8 @@ const kAllowedExecHosts = new Set(["gateway", "node"]);
 const kAllowedExecSecurity = new Set(["deny", "allowlist", "full"]);
 const kAllowedExecAsk = new Set(["off", "on-miss", "always"]);
 const kSafeNodeIdPattern = /^[\w\-:.]+$/;
+const kNodeBrowserInvokeTimeoutMs = 5000;
+const kNodeBrowserCliTimeoutMs = 9000;
 
 const quoteCliArg = (value) => quoteShellArg(value, { strategy: "single" });
 
@@ -32,6 +34,25 @@ const parseNodesStatus = (stdout) => {
   return { nodes, pending };
 };
 
+const parseNodeBrowserStatus = (stdout) => {
+  const parsed = parseJsonObjectFromNoisyOutput(stdout) || {};
+  const payload =
+    parsed.payload && typeof parsed.payload === "object" ? parsed.payload : {};
+  const payloadResult = payload.result;
+  let decodedResult = payloadResult;
+  if (typeof decodedResult === "string") {
+    const parsedResult = parseJsonObjectFromNoisyOutput(decodedResult);
+    decodedResult = parsedResult || decodedResult;
+  }
+  if (decodedResult && typeof decodedResult === "object" && decodedResult.result) {
+    const nestedResult = decodedResult.result;
+    if (nestedResult && typeof nestedResult === "object") {
+      decodedResult = nestedResult;
+    }
+  }
+  return decodedResult && typeof decodedResult === "object" ? decodedResult : null;
+};
+
 const readExecApprovalsFile = ({ fsModule, openclawDir }) => {
   const filePath = path.join(openclawDir, "exec-approvals.json");
   try {
@@ -164,6 +185,37 @@ const registerNodeRoutes = ({
     });
   });
 
+  app.get("/api/nodes/:id/browser-status", async (req, res) => {
+    const nodeId = String(req.params.id || "").trim();
+    if (!nodeId || !kSafeNodeIdPattern.test(nodeId)) {
+      return res.status(400).json({ ok: false, error: "Invalid node id" });
+    }
+    const profile = String(req.query?.profile || "user").trim() || "user";
+    const params = JSON.stringify({
+      method: "GET",
+      path: "/",
+      query: { profile },
+    });
+    const result = await clawCmd(
+      `nodes invoke --node ${quoteCliArg(nodeId)} --command browser.proxy --params ${quoteCliArg(params)} --invoke-timeout ${kNodeBrowserInvokeTimeoutMs} --json`,
+      { quiet: true, timeoutMs: kNodeBrowserCliTimeoutMs },
+    );
+    if (!result.ok) {
+      return res.status(500).json({
+        ok: false,
+        error: result.stderr || "Could not probe node browser status",
+      });
+    }
+    const status = parseNodeBrowserStatus(result.stdout);
+    if (!status) {
+      return res.status(500).json({
+        ok: false,
+        error: "Could not parse node browser status",
+      });
+    }
+    return res.json({ ok: true, status, profile });
+  });
+
   app.get("/api/nodes/exec-config", async (_req, res) => {
     const result = await clawCmd("config get tools.exec --json", { quiet: true });
     if (!result.ok) {

package/lib/server/routes/pairings.js

@@ -213,8 +213,8 @@ const registerPairingRoutes = ({ app, clawCmd, isOnboarded, fsModule = fs, openc
       return res.json({ pending: [], cliAutoApproveComplete: hasCliAutoApproveMarker() });
     }
     try {
-      const parsed = JSON.parse(result.stdout);
-      const pendingList = Array.isArray(parsed.pending) ? parsed.pending : [];
+      const parsed = parseJsonObjectFromNoisyOutput(result.stdout);
+      const pendingList = Array.isArray(parsed?.pending) ? parsed.pending : [];
       let autoApprovedRequestId = null;
       if (!hasCliAutoApproveMarker()) {
         const firstCliPending = pendingList.find((d) => {

package/lib/server/webhook-middleware.js

@@ -4,6 +4,15 @@ const { URL } = require("url");
 const { normalizeIp } = require("./utils/network");
 
 const kRedactedHeaderKeys = new Set(["authorization", "cookie", "x-webhook-token"]);
+const kRedactedPayloadKeys = new Set([
+  "authorization",
+  "code",
+  "token",
+  "access_token",
+  "refresh_token",
+  "id_token",
+  "client_secret",
+]);
 const kGmailDedupeTtlMs = 24 * 60 * 60 * 1000;
 const kGmailDedupeCleanupIntervalMs = 60 * 1000;
 
@@ -41,6 +50,36 @@ const truncateText = (text, maxBytes) => {
   };
 };
 
+const redactPayloadData = (value, key = "") => {
+  const normalizedKey = String(key || "").toLowerCase();
+  if (normalizedKey && kRedactedPayloadKeys.has(normalizedKey)) {
+    return "[REDACTED]";
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => redactPayloadData(item));
+  }
+
+  if (value && typeof value === "object") {
+    const redacted = {};
+    for (const [childKey, childValue] of Object.entries(value)) {
+      redacted[childKey] = redactPayloadData(childValue, childKey);
+    }
+    return redacted;
+  }
+
+  return value;
+};
+
+const sanitizePayloadForLogging = (bodyBuffer) => {
+  if (!Buffer.isBuffer(bodyBuffer) || bodyBuffer.length === 0) return bodyBuffer;
+  const parsedBody = parseJsonSafe(bodyBuffer.toString("utf8"));
+  if (!parsedBody || typeof parsedBody !== "object") {
+    return bodyBuffer;
+  }
+  return Buffer.from(JSON.stringify(redactPayloadData(parsedBody)), "utf8");
+};
+
 const toGatewayRequestHeaders = ({ reqHeaders, contentLength, authorization }) => {
   const headers = { ...reqHeaders };
   delete headers.host;
@@ -83,6 +122,42 @@ const parseJsonSafe = (rawValue) => {
   }
 };
 
+const queryParamsToObject = (searchParams) => {
+  const params = {};
+  for (const [key, value] of searchParams.entries()) {
+    if (Object.prototype.hasOwnProperty.call(params, key)) {
+      const currentValue = params[key];
+      if (Array.isArray(currentValue)) {
+        currentValue.push(value);
+      } else {
+        params[key] = [currentValue, value];
+      }
+      continue;
+    }
+    params[key] = value;
+  }
+  return params;
+};
+
+const buildBodyFromQueryParams = ({ bodyBuffer, queryParams }) => {
+  if (!queryParams || Object.keys(queryParams).length === 0) {
+    return null;
+  }
+
+  if (bodyBuffer.length === 0) {
+    return Buffer.from(JSON.stringify(queryParams), "utf8");
+  }
+
+  const parsedBody = parseJsonSafe(bodyBuffer.toString("utf8"));
+  if (!parsedBody || typeof parsedBody !== "object" || Array.isArray(parsedBody)) {
+    return null;
+  }
+
+  // Keep explicit body values authoritative when both are provided.
+  const mergedBody = { ...queryParams, ...parsedBody };
+  return Buffer.from(JSON.stringify(mergedBody), "utf8");
+};
+
 const getGmailPayloadData = (parsedBody) => {
   if (!parsedBody || typeof parsedBody !== "object") return null;
   if (parsedBody.payload && typeof parsedBody.payload === "object") {
@@ -146,12 +221,23 @@ const createWebhookMiddleware = ({
     const protocolClient = gateway.protocol === "https:" ? https : http;
     const inboundUrl = new URL(req.url, `http://${req.headers.host || "localhost"}`);
     let tokenFromQuery = "";
-    if (!req.headers.authorization && inboundUrl.searchParams.has("token")) {
-      tokenFromQuery = String(inboundUrl.searchParams.get("token") || "");
+    if (inboundUrl.searchParams.has("token")) {
+      const tokenValue = String(inboundUrl.searchParams.get("token") || "");
+      if (!req.headers.authorization) {
+        tokenFromQuery = tokenValue;
+      }
       inboundUrl.searchParams.delete("token");
     }
 
     let bodyBuffer = extractBodyBuffer(req);
+    const queryBody = queryParamsToObject(inboundUrl.searchParams);
+    const bodyWithQueryParams = buildBodyFromQueryParams({
+      bodyBuffer,
+      queryParams: queryBody,
+    });
+    if (bodyWithQueryParams) {
+      bodyBuffer = bodyWithQueryParams;
+    }
     const hookName = resolveHookName(req);
 
     if (hookName === "gmail" && bodyBuffer.length > 0) {
@@ -196,13 +282,16 @@ const createWebhookMiddleware = ({
       req.ip || req.headers["x-forwarded-for"] || req.socket?.remoteAddress || "",
     );
     const sanitizedHeaders = sanitizeHeaders(req.headers);
-    const payload = truncateText(bodyBuffer, maxPayloadBytes);
+    const payload = truncateText(sanitizePayloadForLogging(bodyBuffer), maxPayloadBytes);
 
     const gatewayHeaders = toGatewayRequestHeaders({
       reqHeaders: req.headers,
       contentLength: bodyBuffer.length,
       authorization: tokenFromQuery ? `Bearer ${tokenFromQuery}` : req.headers.authorization,
     });
+    if (bodyWithQueryParams && !gatewayHeaders["content-type"]) {
+      gatewayHeaders["content-type"] = "application/json";
+    }
 
     const requestOptions = {
       protocol: gateway.protocol,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.7.2-beta.2",
+  "version": "0.7.2-beta.4",
   "publishConfig": {
     "access": "public"
   },