@chrysb/alphaclaw 0.8.1-beta.8 → 0.8.2

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

@@ -3,15 +3,16 @@ import {
   useEffect,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { fetchNodeBrowserStatusForNode, removeNode } from "../../../lib/api.js";
 import { readUiSettings, updateUiSettings } from "../../../lib/ui-settings.js";
 import { showToast } from "../../toast.js";
 
-const kBrowserCheckTimeoutMs = 15000;
+const kBrowserCheckTimeoutMs = 35000;
 const kBrowserPollIntervalMs = 10000;
 const kBrowserAttachStateByNodeKey = "nodesBrowserAttachStateByNode";
+const kBrowserClosedPageErrorPattern = /selected page has been closed/i;
 
 const withTimeout = async (promise, timeoutMs = kBrowserCheckTimeoutMs) => {
   let timeoutId = null;
@@ -37,6 +38,16 @@ const isBrowserCapableNode = (node) => {
   return caps.includes("browser") || commands.includes("browser.proxy");
 };
 
+const normalizeBrowserStatusError = (error) => {
+  const rawMessage = String(
+    error?.message || "Could not check node browser status",
+  ).trim();
+  if (kBrowserClosedPageErrorPattern.test(rawMessage)) {
+    return "Selected Chrome page was closed. Click Attach to reconnect.";
+  }
+  return rawMessage;
+};
+
 const readBrowserAttachStateByNode = () => {
   const uiSettings = readUiSettings();
   const attachState = uiSettings?.[kBrowserAttachStateByNodeKey];
@@ -120,7 +131,12 @@ export const useConnectedNodesCard = ({
           [normalizedNodeId]: status,
         }));
       } catch (error) {
-        const message = error.message || "Could not check node browser status";
+        const message = normalizeBrowserStatusError(error);
+        // Stop poll loops after failures so we do not keep retrying a stale browser session.
+        setBrowserStatusByNodeId((prev) => ({
+          ...prev,
+          [normalizedNodeId]: null,
+        }));
         setBrowserErrorByNodeId((prev) => ({
           ...prev,
           [normalizedNodeId]: message,
@@ -212,6 +228,32 @@ export const useConnectedNodesCard = ({
     removingNodeId,
   ]);
 
+  useEffect(() => {
+    if (checkingBrowserNodeId) return;
+    const pendingInitialNodeId = nodes
+      .map((node) => ({
+        nodeId: String(node?.nodeId || "").trim(),
+        connected: node?.connected === true,
+        browserCapable: isBrowserCapableNode(node),
+      }))
+      .find((entry) => {
+        if (!entry.nodeId || !entry.connected || !entry.browserCapable) return false;
+        if (browserAttachStateByNodeId?.[entry.nodeId] !== true) return false;
+        if (browserStatusByNodeId?.[entry.nodeId]) return false;
+        if (browserErrorByNodeId?.[entry.nodeId]) return false;
+        return true;
+      })?.nodeId;
+    if (!pendingInitialNodeId) return;
+    handleCheckNodeBrowser(pendingInitialNodeId, { silent: true });
+  }, [
+    browserAttachStateByNodeId,
+    browserErrorByNodeId,
+    browserStatusByNodeId,
+    checkingBrowserNodeId,
+    handleCheckNodeBrowser,
+    nodes,
+  ]);
+
   useEffect(() => {
     if (checkingBrowserNodeId) return;
     const pollableNodeIds = nodes
@@ -219,13 +261,17 @@ export const useConnectedNodesCard = ({
         nodeId: String(node?.nodeId || "").trim(),
         connected: node?.connected === true,
         browserCapable: isBrowserCapableNode(node),
+        browserRunning:
+          browserStatusByNodeId?.[String(node?.nodeId || "").trim()]?.running ===
+          true,
       }))
       .filter(
         (entry) =>
           entry.nodeId &&
           entry.connected &&
           entry.browserCapable &&
-          browserAttachStateByNodeId?.[entry.nodeId] === true,
+          browserAttachStateByNodeId?.[entry.nodeId] === true &&
+          entry.browserRunning,
       )
       .map((entry) => entry.nodeId);
     if (!pollableNodeIds.length) return;
@@ -238,13 +284,18 @@ export const useConnectedNodesCard = ({
       const nextNodeId = pollableNodeIds[pollIndex];
       await handleCheckNodeBrowser(nextNodeId, { silent: true });
     };
-    poll();
     const timer = setInterval(poll, kBrowserPollIntervalMs);
     return () => {
       active = false;
       clearInterval(timer);
     };
-  }, [browserAttachStateByNodeId, checkingBrowserNodeId, handleCheckNodeBrowser, nodes]);
+  }, [
+    browserAttachStateByNodeId,
+    browserStatusByNodeId,
+    checkingBrowserNodeId,
+    handleCheckNodeBrowser,
+    nodes,
+  ]);
 
   return {
     browserStatusByNodeId,

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { ActionButton } from "../../action-button.js";
 import { useExecAllowlist } from "./use-exec-allowlist.js";
 
@@ -13,7 +13,7 @@ export const NodeExecAllowlistCard = () => {
       <div class="flex items-center justify-between gap-2">
         <div class="space-y-1">
           <h3 class="font-semibold text-sm">Gateway Exec Allowlist</h3>
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Patterns here are used when <code>tools.exec.security</code> is set to
             <code>allowlist</code>.
           </p>
@@ -27,7 +27,7 @@ export const NodeExecAllowlistCard = () => {
         />
       </div>
 
-      ${state.error ? html`<div class="text-xs text-red-400">${state.error}</div>` : null}
+      ${state.error ? html`<div class="text-xs text-status-error-muted">${state.error}</div>` : null}
 
       <div class="flex items-center gap-2">
         <input
@@ -35,7 +35,7 @@ export const NodeExecAllowlistCard = () => {
           value=${state.patternInput}
           oninput=${(event) => state.setPatternInput(event.target.value)}
           placeholder="/usr/bin/sw_vers"
-          class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none"
+          class="flex-1 min-w-0 bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none"
           disabled=${state.loading || state.saving}
         />
         <${ActionButton}
@@ -49,25 +49,25 @@ export const NodeExecAllowlistCard = () => {
         />
       </div>
 
-      <div class="text-[11px] text-gray-500">
+      <div class="text-[11px] text-fg-muted">
         Supports wildcard patterns like <code>*</code>, <code>**</code>, and
         exact executable paths.
       </div>
 
       ${state.loading
-        ? html`<div class="text-xs text-gray-500">Loading allowlist...</div>`
+        ? html`<div class="text-xs text-fg-muted">Loading allowlist...</div>`
         : !state.allowlist.length
-          ? html`<div class="text-xs text-gray-500">No allowlist patterns configured.</div>`
+          ? html`<div class="text-xs text-fg-muted">No allowlist patterns configured.</div>`
           : html`
               <div class="space-y-2">
                 ${state.allowlist.map(
                   (entry) => html`
                     <div class="ac-surface-inset rounded-lg px-3 py-2 flex items-center justify-between gap-2">
                       <div class="min-w-0">
-                        <div class="text-xs font-mono text-gray-200 truncate">
+                        <div class="text-xs font-mono text-body truncate">
                           ${entry?.pattern || ""}
                         </div>
-                        <div class="text-[11px] text-gray-500 font-mono truncate">
+                        <div class="text-[11px] text-fg-muted font-mono truncate">
                           ${entry?.id || ""}
                         </div>
                       </div>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import {
   addNodeExecAllowlistPattern,
   fetchNodeExecApprovals,

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { ActionButton } from "../../action-button.js";
 import { useExecConfig } from "./use-exec-config.js";
 
@@ -23,7 +23,7 @@ export const NodeExecConfigCard = ({
       <div class="flex items-center justify-between gap-2">
         <div class="space-y-1">
           <h3 class="font-semibold text-sm">Exec Routing</h3>
-          <p class="text-xs text-gray-500">
+          <p class="text-xs text-fg-muted">
             Set where command execution runs and how strict approval policy should be.
           </p>
         </div>
@@ -36,16 +36,16 @@ export const NodeExecConfigCard = ({
         />
       </div>
 
-      ${state.error ? html`<div class="text-xs text-red-400">${state.error}</div>` : null}
+      ${state.error ? html`<div class="text-xs text-status-error-muted">${state.error}</div>` : null}
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Host</div>
+          <div class="text-xs text-fg-muted">Host</div>
           <select
             value=${state.config.host}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("host", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="gateway">gateway</option>
             <option value="node">node</option>
@@ -53,12 +53,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Security</div>
+          <div class="text-xs text-fg-muted">Security</div>
           <select
             value=${state.config.security}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("security", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="deny">deny</option>
             <option value="allowlist">allowlist</option>
@@ -67,12 +67,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Ask</div>
+          <div class="text-xs text-fg-muted">Ask</div>
           <select
             value=${state.config.ask}
             disabled=${state.loading || state.saving}
             oninput=${(event) => state.updateField("ask", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="off">off</option>
             <option value="on-miss">on-miss</option>
@@ -81,12 +81,12 @@ export const NodeExecConfigCard = ({
         </label>
 
         <label class="space-y-1">
-          <div class="text-xs text-gray-500">Node target</div>
+          <div class="text-xs text-fg-muted">Node target</div>
           <select
             value=${state.config.node}
             disabled=${state.loading || state.saving || state.config.host !== "node"}
             oninput=${(event) => state.updateField("node", event.target.value)}
-            class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <option value="">${availableNodeOptions.length ? "Select node..." : "No nodes available"}</option>
             ${availableNodeOptions.map(
@@ -98,7 +98,7 @@ export const NodeExecConfigCard = ({
         </label>
       </div>
 
-      <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-300">
+      <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-status-warning">
         Save applies config immediately, but gateway restart may still be required by OpenClaw.
       </div>
 

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { fetchNodeExecConfig, saveNodeExecConfig } from "../../../lib/api.js";
 import { showToast } from "../../toast.js";
 

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { PageHeader } from "../page-header.js";
 import { ActionButton } from "../action-button.js";
 import { useNodesTab } from "./use-nodes-tab.js";

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { ModalShell } from "../../modal-shell.js";
 import { ActionButton } from "../../action-button.js";
 import { CloseIcon, FileCopyLineIcon } from "../../icons.js";
@@ -13,9 +13,9 @@ const html = htm.bind(h);
 const kWizardSteps = ["Install OpenClaw CLI", "Connect Node"];
 
 const renderCommandBlock = ({ command = "", onCopy = () => {} }) => html`
-  <div class="rounded-lg border border-border bg-black/30 p-3">
+  <div class="rounded-lg border border-border bg-field p-3">
     <pre
-      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-gray-300"
+      class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-body"
     >
 ${command}</pre
     >
@@ -71,10 +71,10 @@ export const NodesSetupWizard = ({
         class="absolute top-6 right-6 h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
         aria-label="Close modal"
       >
-        <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+        <${CloseIcon} className="w-3.5 h-3.5 text-body" />
       </button>
 
-      <div class="text-xs text-gray-500">Node Setup Wizard</div>
+      <div class="text-xs text-fg-muted">Node Setup Wizard</div>
       <div class="flex items-center gap-1">
         ${kWizardSteps.map(
           (_label, idx) => html`
@@ -92,7 +92,7 @@ export const NodesSetupWizard = ({
       ${
         state.step === 0
           ? html`
-              <div class="text-xs text-gray-500">
+              <div class="text-xs text-fg-muted">
                 Install OpenClaw on the machine you want to connect as a node.
               </div>
               ${renderCommandBlock({
@@ -100,7 +100,7 @@ export const NodesSetupWizard = ({
                 onCopy: () =>
                   copyAndToast("npm install -g openclaw", "command"),
               })}
-              <div class="text-xs text-gray-500">Requires Node.js 22+.</div>
+              <div class="text-xs text-fg-muted">Requires Node.js 22+.</div>
             `
           : null
       }
@@ -110,22 +110,22 @@ export const NodesSetupWizard = ({
           ? html`
               <div class="space-y-2">
                 <label class="space-y-1 block">
-                  <div class="text-xs text-gray-500">Display name</div>
+                  <div class="text-xs text-fg-muted">Display name</div>
                   <input
                     type="text"
                     value=${state.displayName}
                     oninput=${(event) =>
                       state.setDisplayName(event.target.value)}
-                    class="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none"
+                    class="w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none"
                   />
                 </label>
 
                 <div>
-                  <div class="text-xs text-gray-500 mb-1">
+                  <div class="text-xs text-fg-muted mb-1">
                     Run this on the device you want to connect:
                   </div>
                   ${state.loadingConnectInfo
-                    ? html`<div class="text-xs text-gray-500">
+                    ? html`<div class="text-xs text-fg-muted">
                         Loading command...
                       </div>`
                     : renderCommandBlock({
@@ -148,7 +148,7 @@ export const NodesSetupWizard = ({
                       !state.selectedPairedNode.connected
                     ? html`
                         <div
-                          class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-200"
+                          class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-status-warning"
                         >
                           Node is paired but currently disconnected. Run the
                           node command again on your device, then Finish will
@@ -157,7 +157,7 @@ export const NodesSetupWizard = ({
                       `
                     : html`
                         <div
-                          class="rounded-lg border border-border bg-black/20 px-3 py-2 text-xs text-gray-400"
+                          class="rounded-lg border border-border bg-field px-3 py-2 text-xs text-fg-muted"
                         >
                           Pairing request will show up here. Checks every 3s.
                         </div>

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

@@ -4,7 +4,7 @@ import {
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
 import {
   approveDevice,
   fetchDevicePairings,

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { fetchNodeConnectInfo } from "../../lib/api.js";
 import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 import { showToast } from "../toast.js";

package/lib/public/js/components/onboarding/use-welcome-codex.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import {
   disconnectCodex,
   exchangeCodexOAuth,

package/lib/public/js/components/onboarding/use-welcome-pairing.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { approvePairing, fetchPairings, fetchStatus, rejectPairing } from "../../lib/api.js";
 import { usePolling } from "../../hooks/usePolling.js";
 import { isChannelPaired } from "./pairing-utils.js";

package/lib/public/js/components/onboarding/use-welcome-storage.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import { kOnboardingStorageKey } from "../../lib/storage-keys.js";
 export { kOnboardingStorageKey };

package/lib/public/js/components/onboarding/welcome-config.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { kAllAiAuthFields } from "../../lib/model-config.js";
 
 const html = htm.bind(h);
@@ -52,7 +52,7 @@ export const kWelcomeGroups = [
             class="hover:underline"
             style="color: var(--accent-link)"
             >classic PAT</a
-          >${" "}with${" "}<code class="text-xs bg-black/30 px-1 rounded"
+          >${" "}with${" "}<code class="text-xs bg-field px-1 rounded"
             >repo</code
           >${" "}scope, or a${" "}<a
             href="https://github.com/settings/personal-access-tokens/new"