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

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

@@ -1,16 +1,19 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+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, '\\"');
 
@@ -78,6 +81,27 @@ const withTimeout = async (promise, timeoutMs = kBrowserCheckTimeoutMs) => {
   }
 };
 
+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 = [],
@@ -88,7 +112,11 @@ export const ConnectedNodesCard = ({
   const [browserStatusByNodeId, setBrowserStatusByNodeId] = useState({});
   const [browserErrorByNodeId, setBrowserErrorByNodeId] = useState({});
   const [checkingBrowserNodeId, setCheckingBrowserNodeId] = useState("");
-  const autoCheckedNodeIdsRef = useRef(new Set());
+  const [browserAttachStateByNodeId, setBrowserAttachStateByNodeId] = useState(() =>
+    readBrowserAttachStateByNode(),
+  );
+  const browserPollCursorRef = useRef(0);
+  const browserCheckInFlightNodeIdRef = useRef("");
 
   const handleCopyCommand = async (command) => {
     const copied = await copyTextToClipboard(command);
@@ -99,10 +127,13 @@ export const ConnectedNodesCard = ({
     showToast("Could not copy connection command", "error");
   };
 
-  const handleCheckNodeBrowser = async (nodeId, { silent = false } = {}) => {
+  const handleCheckNodeBrowser = useCallback(async (nodeId, { silent = false } = {}) => {
     const normalizedNodeId = String(nodeId || "").trim();
-    if (!normalizedNodeId || checkingBrowserNodeId) return;
-    setCheckingBrowserNodeId(normalizedNodeId);
+    if (!normalizedNodeId || browserCheckInFlightNodeIdRef.current) return;
+    browserCheckInFlightNodeIdRef.current = normalizedNodeId;
+    if (!silent) {
+      setCheckingBrowserNodeId(normalizedNodeId);
+    }
     setBrowserErrorByNodeId((prev) => ({
       ...prev,
       [normalizedNodeId]: "",
@@ -126,22 +157,82 @@ export const ConnectedNodesCard = ({
         showToast(message, "error");
       }
     } finally {
-      setCheckingBrowserNodeId("");
+      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;
-    for (const node of nodes) {
-      const nodeId = String(node?.nodeId || "").trim();
-      if (!nodeId) continue;
-      if (!node?.connected || !isBrowserCapableNode(node)) continue;
-      if (autoCheckedNodeIdsRef.current.has(nodeId)) continue;
-      autoCheckedNodeIdsRef.current.add(nodeId);
-      handleCheckNodeBrowser(nodeId, { silent: true });
-      break;
-    }
-  }, [checkingBrowserNodeId, nodes]);
+    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">
@@ -197,9 +288,17 @@ export const ConnectedNodesCard = ({
                     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 && !checkingBrowser && !hasBrowserCheckResult;
+                      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">
@@ -228,9 +327,21 @@ export const ConnectedNodesCard = ({
                                 <div class="flex items-start justify-between gap-2">
                                   <div class="space-y-0.5">
                                     <div class="text-sm font-medium">Browser</div>
-                                    <div class="text-[11px] text-gray-500">
-                                      profile: <code>user</code>
-                                    </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
@@ -242,11 +353,26 @@ export const ConnectedNodesCard = ({
                                           </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}
@@ -261,10 +387,23 @@ export const ConnectedNodesCard = ({
                                 </div>
                                 ${browserStatus
                                   ? html`
-                                      <div class="flex flex-wrap gap-2 text-[11px] text-gray-500">
-                                        <span>tabs: <code>${Number(browserStatus?.tabCount || 0)}</code></span>
-                                        <span>driver: <code>${browserStatus?.driver || "unknown"}</code></span>
-                                        <span>transport: <code>${browserStatus?.transport || "unknown"}</code></span>
+                                      <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}

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

@@ -19,6 +19,8 @@ export const NodesTab = ({ onRestartRequired = () => {} }) => {
         actions=${html`
           <${ActionButton}
             onClick=${actions.refreshNodes}
+            loading=${state.refreshingNodes}
+            loadingMode="inline"
             idleLabel="Refresh"
             tone="secondary"
             size="sm"

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,6 +180,17 @@ export const NodesSetupWizard = ({
                   size="sm"
                 />
               </div>
+              ${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}
@@ -234,7 +264,8 @@ export const NodesSetupWizard = ({
                 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,9 +110,44 @@ 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 false;
@@ -150,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,4 +1,4 @@
-import { useEffect, 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";
@@ -7,6 +7,7 @@ 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()
@@ -18,19 +19,30 @@ export const useNodesTab = () => {
       });
   }, []);
 
+  const refreshNodes = useCallback(async () => {
+    if (refreshingNodes) return;
+    setRefreshingNodes(true);
+    try {
+      await connectedNodesState.refresh();
+    } finally {
+      setRefreshingNodes(false);
+    }
+  }, [connectedNodesState.refresh, refreshingNodes]);
+
   return {
     state: {
       wizardVisible,
       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/package.json

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