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

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

@@ -0,0 +1,25 @@
+import { usePolling } from "../../../hooks/usePolling.js";
+import { fetchNodesStatus } from "../../../lib/api.js";
+
+const kNodesPollIntervalMs = 3000;
+
+export const useConnectedNodes = ({ enabled = true } = {}) => {
+  const poll = usePolling(
+    async () => {
+      const result = await fetchNodesStatus();
+      const nodes = Array.isArray(result?.nodes) ? result.nodes : [];
+      const pending = Array.isArray(result?.pending) ? result.pending : [];
+      return { nodes, pending };
+    },
+    kNodesPollIntervalMs,
+    { enabled },
+  );
+
+  return {
+    nodes: Array.isArray(poll.data?.nodes) ? poll.data.nodes : [],
+    pending: Array.isArray(poll.data?.pending) ? poll.data.pending : [],
+    loading: poll.data === null && !poll.error,
+    error: poll.error ? String(poll.error.message || "Could not load nodes") : "",
+    refresh: poll.refresh,
+  };
+};

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

@@ -0,0 +1,89 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../../action-button.js";
+import { useExecAllowlist } from "./use-exec-allowlist.js";
+
+const html = htm.bind(h);
+
+export const NodeExecAllowlistCard = () => {
+  const state = useExecAllowlist();
+
+  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="space-y-1">
+          <h3 class="font-semibold text-sm">Gateway Exec Allowlist</h3>
+          <p class="text-xs text-gray-500">
+            Patterns here are used when <code>tools.exec.security</code> is set to
+            <code>allowlist</code>.
+          </p>
+        </div>
+        <${ActionButton}
+          onClick=${state.refresh}
+          idleLabel="Reload"
+          tone="secondary"
+          size="sm"
+          disabled=${state.loading}
+        />
+      </div>
+
+      ${state.error ? html`<div class="text-xs text-red-400">${state.error}</div>` : null}
+
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          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"
+          disabled=${state.loading || state.saving}
+        />
+        <${ActionButton}
+          onClick=${state.addPattern}
+          loading=${state.saving}
+          idleLabel="Add Pattern"
+          loadingLabel="Adding..."
+          tone="primary"
+          size="sm"
+          disabled=${!String(state.patternInput || "").trim()}
+        />
+      </div>
+
+      <div class="text-[11px] text-gray-500">
+        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>`
+        : !state.allowlist.length
+          ? html`<div class="text-xs text-gray-500">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">
+                          ${entry?.pattern || ""}
+                        </div>
+                        <div class="text-[11px] text-gray-500 font-mono truncate">
+                          ${entry?.id || ""}
+                        </div>
+                      </div>
+                      <${ActionButton}
+                        onClick=${() => state.removePattern(entry?.id)}
+                        loading=${state.removingId === String(entry?.id || "")}
+                        idleLabel="Remove"
+                        loadingLabel="Removing..."
+                        tone="danger"
+                        size="sm"
+                      />
+                    </div>
+                  `,
+                )}
+              </div>
+            `}
+    </div>
+  `;
+};

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

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import {
+  addNodeExecAllowlistPattern,
+  fetchNodeExecApprovals,
+  removeNodeExecAllowlistPattern,
+} from "../../../lib/api.js";
+import { showToast } from "../../toast.js";
+
+export const useExecAllowlist = () => {
+  const [allowlist, setAllowlist] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [patternInput, setPatternInput] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [removingId, setRemovingId] = useState("");
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await fetchNodeExecApprovals();
+      const nextAllowlist = Array.isArray(result?.allowlist) ? result.allowlist : [];
+      setAllowlist(nextAllowlist);
+    } catch (err) {
+      setError(err.message || "Could not load allowlist");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const addPattern = useCallback(async () => {
+    const nextPattern = String(patternInput || "").trim();
+    if (!nextPattern || saving) return;
+    setSaving(true);
+    try {
+      await addNodeExecAllowlistPattern(nextPattern);
+      setPatternInput("");
+      showToast("Allowlist pattern added", "success");
+      await refresh();
+    } catch (err) {
+      showToast(err.message || "Could not add allowlist pattern", "error");
+    } finally {
+      setSaving(false);
+    }
+  }, [patternInput, refresh, saving]);
+
+  const removePattern = useCallback(async (entryId) => {
+    const id = String(entryId || "").trim();
+    if (!id || removingId) return;
+    setRemovingId(id);
+    try {
+      await removeNodeExecAllowlistPattern(id);
+      showToast("Allowlist pattern removed", "success");
+      await refresh();
+    } catch (err) {
+      showToast(err.message || "Could not remove allowlist pattern", "error");
+    } finally {
+      setRemovingId("");
+    }
+  }, [refresh, removingId]);
+
+  return {
+    allowlist,
+    loading,
+    error,
+    patternInput,
+    saving,
+    removingId,
+    setPatternInput,
+    refresh,
+    addPattern,
+    removePattern,
+  };
+};

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

@@ -0,0 +1,118 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../../action-button.js";
+import { useExecConfig } from "./use-exec-config.js";
+
+const html = htm.bind(h);
+
+export const NodeExecConfigCard = ({
+  nodes = [],
+  onRestartRequired = () => {},
+}) => {
+  const state = useExecConfig({ onRestartRequired });
+
+  const availableNodeOptions = nodes
+    .filter((node) => String(node?.nodeId || "").trim())
+    .map((node) => ({
+      value: String(node.nodeId).trim(),
+      label: String(node?.displayName || node.nodeId).trim(),
+    }));
+
+  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="space-y-1">
+          <h3 class="font-semibold text-sm">Exec Routing</h3>
+          <p class="text-xs text-gray-500">
+            Set where command execution runs and how strict approval policy should be.
+          </p>
+        </div>
+        <${ActionButton}
+          onClick=${state.refresh}
+          idleLabel="Reload"
+          tone="secondary"
+          size="sm"
+          disabled=${state.loading}
+        />
+      </div>
+
+      ${state.error ? html`<div class="text-xs text-red-400">${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>
+          <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"
+          >
+            <option value="gateway">gateway</option>
+            <option value="node">node</option>
+          </select>
+        </label>
+
+        <label class="space-y-1">
+          <div class="text-xs text-gray-500">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"
+          >
+            <option value="deny">deny</option>
+            <option value="allowlist">allowlist</option>
+            <option value="full">full</option>
+          </select>
+        </label>
+
+        <label class="space-y-1">
+          <div class="text-xs text-gray-500">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"
+          >
+            <option value="off">off</option>
+            <option value="on-miss">on-miss</option>
+            <option value="always">always</option>
+          </select>
+        </label>
+
+        <label class="space-y-1">
+          <div class="text-xs text-gray-500">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"
+          >
+            <option value="">${availableNodeOptions.length ? "Select node..." : "No nodes available"}</option>
+            ${availableNodeOptions.map(
+              (option) => html`
+                <option value=${option.value}>${option.label}</option>
+              `,
+            )}
+          </select>
+        </label>
+      </div>
+
+      <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-300">
+        Save applies config immediately, but gateway restart may still be required by OpenClaw.
+      </div>
+
+      <div class="flex justify-end">
+        <${ActionButton}
+          onClick=${state.save}
+          loading=${state.saving}
+          idleLabel="Save Exec Config"
+          loadingLabel="Saving..."
+          tone="primary"
+          size="sm"
+          disabled=${state.loading || (state.config.host === "node" && !state.config.node)}
+        />
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { fetchNodeExecConfig, saveNodeExecConfig } from "../../../lib/api.js";
+import { showToast } from "../../toast.js";
+
+const kDefaultExecConfig = {
+  host: "gateway",
+  security: "allowlist",
+  ask: "on-miss",
+  node: "",
+};
+
+export const useExecConfig = ({ onRestartRequired = () => {} } = {}) => {
+  const [config, setConfig] = useState(kDefaultExecConfig);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const result = await fetchNodeExecConfig();
+      const nextConfig = {
+        ...kDefaultExecConfig,
+        ...(result?.config || {}),
+      };
+      setConfig(nextConfig);
+    } catch (err) {
+      setError(err.message || "Could not load exec settings");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const updateField = useCallback((field, value) => {
+    setConfig((prev) => {
+      const next = { ...prev, [field]: value };
+      if (field === "host" && value !== "node") {
+        next.node = "";
+      }
+      return next;
+    });
+  }, []);
+
+  const save = useCallback(async () => {
+    if (saving) return false;
+    setSaving(true);
+    setError("");
+    try {
+      const result = await saveNodeExecConfig(config);
+      if (result?.restartRequired) {
+        onRestartRequired(true);
+      }
+      showToast("Node exec config saved", "success");
+      return true;
+    } catch (err) {
+      const message = err.message || "Could not save exec settings";
+      setError(message);
+      showToast(message, "error");
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }, [config, onRestartRequired, saving]);
+
+  return {
+    config,
+    loading,
+    saving,
+    error,
+    refresh,
+    updateField,
+    save,
+  };
+};

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

@@ -0,0 +1,46 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+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 { NodesSetupWizard } from "./setup-wizard/index.js";
+
+const html = htm.bind(h);
+
+export const NodesTab = ({ onRestartRequired = () => {} }) => {
+  const { state, actions } = useNodesTab();
+
+  return html`
+    <div class="space-y-4">
+      <${PageHeader}
+        title="Nodes"
+        actions=${html`
+          <${ActionButton}
+            onClick=${actions.openWizard}
+            idleLabel="Connect Node"
+            tone="primary"
+            size="sm"
+          />
+        `}
+      />
+
+      <${ConnectedNodesCard}
+        nodes=${state.nodes}
+        pending=${state.pending}
+        loading=${state.loadingNodes}
+        error=${state.nodesError}
+        onRefresh=${actions.refreshNodes}
+      />
+
+      <${NodesSetupWizard}
+        visible=${state.wizardVisible}
+        nodes=${state.nodes}
+        pending=${state.pending}
+        refreshNodes=${actions.refreshNodes}
+        onRestartRequired=${onRestartRequired}
+        onClose=${actions.closeWizard}
+      />
+    </div>
+  `;
+};

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

@@ -0,0 +1,243 @@
+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 { copyTextToClipboard } from "../../../lib/clipboard.js";
+import { showToast } from "../../toast.js";
+import { useSetupWizard } from "./use-setup-wizard.js";
+
+const html = htm.bind(h);
+
+const kWizardSteps = [
+  "Install OpenClaw CLI",
+  "Connect Node",
+  "Approve Node",
+  "Set Gateway Routing",
+];
+
+const renderCommandBlock = ({ command = "", onCopy = () => {} }) => html`
+  <div class="rounded-lg border border-border bg-black/30 p-3">
+    <pre class="pt-1 pl-2 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-gray-300">${command}</pre>
+    <div class="pt-3">
+      <button
+        type="button"
+        onclick=${onCopy}
+        class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+      >
+        Copy
+      </button>
+    </div>
+  </div>
+`;
+
+const copyAndToast = async (value, label = "text") => {
+  const copied = await copyTextToClipboard(value);
+  if (copied) {
+    showToast("Copied to clipboard", "success");
+    return;
+  }
+  showToast(`Could not copy ${label}`, "error");
+};
+
+export const NodesSetupWizard = ({
+  visible = false,
+  nodes = [],
+  pending = [],
+  refreshNodes = async () => {},
+  onRestartRequired = () => {},
+  onClose = () => {},
+}) => {
+  const state = useSetupWizard({
+    visible,
+    nodes,
+    pending,
+    refreshNodes,
+    onRestartRequired,
+    onClose,
+  });
+  const isFinalStep = state.step === kWizardSteps.length - 1;
+
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${onClose}
+      closeOnOverlayClick=${false}
+      closeOnEscape=${false}
+      panelClassName="relative bg-modal border border-border rounded-xl p-6 max-w-2xl w-full space-y-4"
+    >
+      <button
+        type="button"
+        onclick=${onClose}
+        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" />
+      </button>
+
+      <div class="text-xs text-gray-500">Node Setup Wizard</div>
+      <div class="flex items-center gap-1">
+        ${kWizardSteps.map(
+          (_label, idx) => html`
+            <div
+              class=${`h-1 flex-1 rounded-full transition-colors ${idx <= state.step ? "bg-accent" : "bg-border"}`}
+              style=${idx <= state.step ? "background: var(--accent)" : ""}
+            ></div>
+          `,
+        )}
+      </div>
+      <h3 class="font-semibold text-base">
+        Step ${state.step + 1} of ${kWizardSteps.length}: ${kWizardSteps[state.step]}
+      </h3>
+
+      ${state.step === 0
+        ? html`
+            <div class="text-xs text-gray-500">
+              Install OpenClaw on the machine you want to connect as a node.
+            </div>
+            ${renderCommandBlock({
+              command: "npm install -g openclaw",
+              onCopy: () => copyAndToast("npm install -g openclaw", "command"),
+            })}
+            <div class="text-xs text-gray-500">Requires Node.js 22+.</div>
+          `
+        : null}
+
+      ${state.step === 1
+        ? html`
+            <div class="space-y-2">
+              <div class="text-xs text-gray-500">
+                Run this on the device you want to connect.
+              </div>
+              <label class="space-y-1 block">
+                <div class="text-xs text-gray-500">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"
+                />
+              </label>
+              ${state.loadingConnectInfo
+                ? html`<div class="text-xs text-gray-500">Loading command...</div>`
+                : renderCommandBlock({
+                    command: state.connectCommand || "Could not build connect command.",
+                    onCopy: () =>
+                      copyAndToast(state.connectCommand || "", "command"),
+                  })}
+            </div>
+          `
+        : null}
+
+      ${state.step === 2
+        ? html`
+            <div class="space-y-2">
+              <div class="text-xs text-gray-500">
+                Select the node to approve after you run the connect command.
+              </div>
+              <div class="flex items-center gap-2">
+                <select
+                  value=${state.selectedNodeId}
+                  oninput=${(event) => state.setSelectedNodeId(event.target.value)}
+                  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"
+                >
+                  <option value="">
+                    ${state.selectableNodes.length
+                      ? "Select node..."
+                      : "No nodes found yet"}
+                  </option>
+                  ${state.selectableNodes.map(
+                    (entry) => html`
+                      <option value=${entry.nodeId}>
+                        ${entry.displayName} (${entry.nodeId.slice(0, 12)}...)
+                      </option>
+                    `,
+                  )}
+                </select>
+                <${ActionButton}
+                  onClick=${state.refreshNodeList}
+                  idleLabel="Refresh"
+                  tone="secondary"
+                  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}
+              />
+            </div>
+          `
+        : null}
+
+      ${state.step === 3
+        ? html`
+            <div class="space-y-2">
+              <div class="text-xs text-gray-500">
+                This step only updates gateway routing
+                (<code>tools.exec.host=node</code>, target node, and gateway
+                ask/security defaults).
+              </div>
+              <div class="rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-200">
+                Node-host permissions are local to the connected machine and are
+                not managed from this wizard yet.
+              </div>
+              <${ActionButton}
+                onClick=${async () => {
+                  const ok = await state.applyGatewayNodeRouting();
+                  if (ok) {
+                    await refreshNodes();
+                    state.completeWizard();
+                  }
+                }}
+                loading=${state.configuring}
+                idleLabel="Apply Gateway Routing + Finish"
+                loadingLabel="Applying..."
+                tone="primary"
+                size="sm"
+                disabled=${!state.selectedNodeId}
+              />
+            </div>
+          `
+        : null}
+
+      <div class="grid grid-cols-2 gap-2 pt-2">
+        ${state.step === 0
+          ? html`<div></div>`
+          : html`
+              <${ActionButton}
+                onClick=${() => state.setStep(Math.max(0, state.step - 1))}
+                idleLabel="Back"
+                tone="secondary"
+                size="md"
+                className="w-full justify-center"
+              />
+            `}
+        ${isFinalStep
+          ? html`
+              <${ActionButton}
+                onClick=${onClose}
+                idleLabel="Close"
+                tone="secondary"
+                size="md"
+                className="w-full justify-center"
+              />
+            `
+          : html`
+              <${ActionButton}
+                onClick=${() => state.setStep(Math.min(kWizardSteps.length - 1, state.step + 1))}
+                idleLabel="Next"
+                tone="primary"
+                size="md"
+                className="w-full justify-center"
+                disabled=${state.step === 2 && !state.selectedNodeId}
+              />
+            `}
+      </div>
+    </${ModalShell}>
+  `;
+};