@chrysb/alphaclaw 0.8.0 → 0.8.1-beta.1

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

@@ -1,7 +1,7 @@
 import { usePolling } from "../../../hooks/usePolling.js";
 import { fetchNodesStatus } from "../../../lib/api.js";
 
-const kNodesPollIntervalMs = 3000;
+const kNodesPollIntervalMs = 10000;
 
 export const useConnectedNodes = ({ enabled = true } = {}) => {
   const poll = usePolling(
@@ -12,7 +12,7 @@ export const useConnectedNodes = ({ enabled = true } = {}) => {
       return { nodes, pending };
     },
     kNodesPollIntervalMs,
-    { enabled },
+    { enabled, cacheKey: "/api/nodes" },
   );
 
   return {

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

@@ -1,26 +1,30 @@
 import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
 import { fetchNodeConnectInfo } from "../../lib/api.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.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);
+  const {
+    data: connectInfo,
+    error: connectInfoError,
+  } = useCachedFetch("/api/nodes/connect-info", fetchNodeConnectInfo, {
+    maxAgeMs: 60000,
+  });
   const pairedNodes = Array.isArray(connectedNodesState.nodes)
     ? connectedNodesState.nodes.filter((entry) => entry?.paired !== false)
     : [];
 
   useEffect(() => {
-    fetchNodeConnectInfo()
-      .then((result) => {
-        setConnectInfo(result || null);
-      })
-      .catch((error) => {
-        showToast(error.message || "Could not load node connect command", "error");
-      });
-  }, []);
+    if (!connectInfoError) return;
+    showToast(
+      connectInfoError.message || "Could not load node connect command",
+      "error",
+    );
+  }, [connectInfoError]);
 
   const refreshNodes = useCallback(async () => {
     if (refreshingNodes) return;

package/lib/public/js/components/routes/webhooks-route.js

@@ -1,6 +1,6 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
-import { Webhooks } from "../webhooks.js";
+import { Webhooks } from "../webhooks/index.js";
 
 const html = htm.bind(h);
 

package/lib/public/js/components/webhooks/create-webhook-modal/index.js

@@ -0,0 +1,176 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import {
+  kNoDestinationSessionValue,
+  useDestinationSessionSelection,
+} from "../../../hooks/use-destination-session-selection.js";
+import { ActionButton } from "../../action-button.js";
+import { CloseIcon } from "../../icons.js";
+import { ModalShell } from "../../modal-shell.js";
+import { PageHeader } from "../../page-header.js";
+import { SessionSelectField } from "../../session-select-field.js";
+
+const html = htm.bind(h);
+
+export const CreateWebhookModal = ({
+  visible,
+  name,
+  mode = "webhook",
+  onModeChange = () => {},
+  onNameChange = () => {},
+  canCreate = false,
+  creating = false,
+  onCreate = () => {},
+  onClose = () => {},
+}) => {
+  const {
+    sessions: selectableSessions,
+    loading: loadingSessions,
+    error: destinationLoadError,
+    destinationSessionKey,
+    setDestinationSessionKey,
+    selectedDestination,
+  } = useDestinationSessionSelection({
+    enabled: visible,
+    resetKey: String(visible),
+  });
+
+  const normalized = String(name || "")
+    .trim()
+    .toLowerCase();
+  const previewName = normalized || "{name}";
+  const previewPath = `/hooks/${previewName}`;
+  const previewUrl =
+    mode === "oauth"
+      ? `${window.location.origin}/oauth/{id}`
+      : `${window.location.origin}${previewPath}`;
+  if (!visible) return null;
+
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${onClose}
+      panelClassName="bg-modal border border-border rounded-xl p-5 max-w-lg w-full space-y-4"
+    >
+      <${PageHeader}
+        title="Create Webhook"
+        actions=${html`
+          <button
+            type="button"
+            onclick=${onClose}
+            class="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="space-y-2">
+        <p class="text-xs text-gray-500">Endpoint mode</p>
+        <div class="flex items-center gap-2">
+          <button
+            class="text-xs px-2 py-1 rounded border transition-colors ${mode ===
+            "webhook"
+              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
+              : "border-border text-gray-400 hover:text-gray-200"}"
+            onclick=${() => onModeChange("webhook")}
+          >
+            Webhook
+          </button>
+          <button
+            class="text-xs px-2 py-1 rounded border transition-colors ${mode ===
+            "oauth"
+              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
+              : "border-border text-gray-400 hover:text-gray-200"}"
+            onclick=${() => onModeChange("oauth")}
+          >
+            OAuth Callback
+          </button>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <p class="text-xs text-gray-500">Name</p>
+        <input
+          type="text"
+          value=${name}
+          placeholder="fathom"
+          onInput=${(e) => onNameChange(e.target.value)}
+          onKeyDown=${(e) => {
+            if (e.key === "Enter" && canCreate && !creating) {
+              onCreate(selectedDestination, mode);
+            }
+            if (e.key === "Escape") onClose();
+          }}
+          class="w-full bg-black/30 border border-border rounded-lg px-3 py-1.5 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+        />
+      </div>
+      <${SessionSelectField}
+        label="Deliver to"
+        sessions=${selectableSessions}
+        selectedSessionKey=${destinationSessionKey}
+        onChangeSessionKey=${setDestinationSessionKey}
+        disabled=${loadingSessions || creating}
+        loading=${loadingSessions}
+        error=${destinationLoadError}
+        allowNone=${true}
+        noneValue=${kNoDestinationSessionValue}
+        noneLabel="Default"
+        emptyStateText="No paired chat sessions found yet. You can still create the webhook without a default destination."
+        loadingLabel="Loading destinations..."
+      />
+      <div class="border border-border rounded-lg overflow-hidden">
+        <table class="w-full text-xs">
+          <tbody>
+            <tr class="border-b border-border">
+              <td class="w-24 px-3 py-2 text-gray-500">Path</td>
+              <td class="px-3 py-2 text-gray-300 font-mono">
+                <code>${previewPath}</code>
+              </td>
+            </tr>
+            <tr class="border-b border-border">
+              <td class="w-24 px-3 py-2 text-gray-500">URL</td>
+              <td class="px-3 py-2 text-gray-300 font-mono break-all">
+                <code>${previewUrl}</code>
+              </td>
+            </tr>
+            <tr>
+              <td class="w-24 px-3 py-2 text-gray-500">Transform</td>
+              <td class="px-3 py-2 text-gray-300 font-mono">
+                <code>hooks/transforms/${previewName}/${previewName}-transform.mjs</code>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      ${mode === "oauth"
+        ? html`
+            <div class="space-y-1">
+              <p class="text-xs text-gray-500">
+                For OAuth providers that can't send auth headers. AlphaClaw
+                injects webhook auth before forwarding to /hooks/{name}.
+              </p>
+            </div>
+          `
+        : null}
+      <div class="pt-1 flex items-center justify-end gap-2">
+        <${ActionButton}
+          onClick=${onClose}
+          tone="secondary"
+          size="md"
+          idleLabel="Cancel"
+          className="px-4 py-2 rounded-lg text-sm"
+        />
+        <${ActionButton}
+          onClick=${() => onCreate(selectedDestination, mode)}
+          disabled=${!canCreate || creating}
+          loading=${creating}
+          tone="primary"
+          size="md"
+          idleLabel="Create"
+          loadingLabel="Creating..."
+          className="px-4 py-2 rounded-lg text-sm"
+        />
+      </div>
+    </${ModalShell}>
+  `;
+};

package/lib/public/js/components/webhooks/helpers.js

@@ -0,0 +1,106 @@
+import {
+  formatLocaleDateTime,
+  formatLocaleDateTimeWithTodayTime,
+} from "../../lib/format.js";
+
+export const kNamePattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+export const kStatusFilters = ["all", "success", "error"];
+
+export const formatDateTime = (value) => {
+  return formatLocaleDateTime(value, { fallback: "—" });
+};
+
+export const formatLastReceived = (value) => {
+  return formatLocaleDateTimeWithTodayTime(value, { fallback: "—" });
+};
+
+export const formatBytes = (size) => {
+  const bytes = Number(size || 0);
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0B";
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+};
+
+export const healthClassName = (health) => {
+  if (health === "red") return "bg-red-500";
+  if (health === "yellow") return "bg-yellow-500";
+  return "bg-green-500";
+};
+
+export const getRequestStatusTone = (status) => {
+  if (status === "success") {
+    return {
+      dotClass: "bg-green-500/90",
+      textClass: "text-green-500/90",
+    };
+  }
+  if (status === "error") {
+    return {
+      dotClass: "bg-red-500/90",
+      textClass: "text-red-500/90",
+    };
+  }
+  return {
+    dotClass: "bg-gray-500/70",
+    textClass: "text-gray-400",
+  };
+};
+
+export const formatAgentFallbackName = (agentId = "") =>
+  String(agentId || "")
+    .trim()
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ") || "Main Agent";
+
+export const jsonPretty = (value) => {
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return value;
+    }
+  }
+  try {
+    return JSON.stringify(value || {}, null, 2);
+  } catch {
+    return String(value || "");
+  }
+};
+
+export const buildWebhookDebugMessage = ({
+  hookName = "",
+  webhook = null,
+  request = null,
+}) => {
+  const hookPath =
+    String(webhook?.path || "").trim() ||
+    (hookName ? `/hooks/${hookName}` : "/hooks/unknown");
+  const gatewayStatus =
+    request?.gatewayStatus == null ? "n/a" : String(request.gatewayStatus);
+  return [
+    "Investigate this failed webhook request and share findings before fixing anything.",
+    "Reply with your diagnosis first, including the likely root cause, any relevant risks, and what you would change if I approve a fix.",
+    "",
+    `Webhook: ${hookPath}`,
+    `Request ID: ${String(request?.id || "unknown")}`,
+    `Time: ${String(request?.createdAt || "unknown")}`,
+    `Method: ${String(request?.method || "unknown")}`,
+    `Source IP: ${String(request?.sourceIp || "unknown")}`,
+    `Gateway status: ${gatewayStatus}`,
+    `Transform path: ${String(webhook?.transformPath || "unknown")}`,
+    `Payload truncated: ${request?.payloadTruncated ? "yes" : "no"}`,
+    "",
+    "Headers:",
+    jsonPretty(request?.headers),
+    "",
+    "Payload:",
+    jsonPretty(request?.payload),
+    "",
+    "Gateway response:",
+    jsonPretty(request?.gatewayBody),
+  ].join("\n");
+};

package/lib/public/js/components/webhooks/index.js

@@ -0,0 +1,148 @@
+import { h } from "https://esm.sh/preact";
+import { useCallback, useMemo, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { createWebhook } from "../../lib/api.js";
+import { ActionButton } from "../action-button.js";
+import { PageHeader } from "../page-header.js";
+import { showToast } from "../toast.js";
+import { CreateWebhookModal } from "./create-webhook-modal/index.js";
+import { kNamePattern } from "./helpers.js";
+import { WebhookDetail } from "./webhook-detail/index.js";
+import { WebhookList } from "./webhook-list/index.js";
+
+const html = htm.bind(h);
+
+export const Webhooks = ({
+  selectedHookName = "",
+  onSelectHook = () => {},
+  onBackToList = () => {},
+  onRestartRequired = () => {},
+  onOpenFile = () => {},
+}) => {
+  const [isCreating, setIsCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [createMode, setCreateMode] = useState("webhook");
+  const [creating, setCreating] = useState(false);
+
+  const canCreate = useMemo(() => {
+    const name = String(newName || "")
+      .trim()
+      .toLowerCase();
+    return kNamePattern.test(name);
+  }, [newName]);
+
+  const handleCreate = useCallback(
+    async (destination = null, mode = "webhook") => {
+      const candidateName = String(newName || "")
+        .trim()
+        .toLowerCase();
+      if (!kNamePattern.test(candidateName)) {
+        showToast(
+          "Name must be lowercase letters, numbers, and hyphens",
+          "error",
+        );
+        return;
+      }
+      if (creating) return;
+      setCreating(true);
+      try {
+        const data = await createWebhook(candidateName, {
+          destination,
+          oauthCallback: mode === "oauth",
+        });
+        setIsCreating(false);
+        setNewName("");
+        setCreateMode("webhook");
+        onSelectHook(candidateName);
+        if (data.restartRequired) onRestartRequired(true);
+        if (mode === "oauth" && data?.webhook?.oauthCallbackUrl) {
+          showToast("Webhook + OAuth callback created", "success");
+        } else {
+          showToast("Webhook created", "success");
+        }
+        if (data.syncWarning) {
+          showToast(`Created, but git-sync failed: ${data.syncWarning}`, "warning");
+        }
+      } catch (err) {
+        showToast(err.message || "Could not create webhook", "error");
+      } finally {
+        setCreating(false);
+      }
+    },
+    [creating, newName, onRestartRequired, onSelectHook],
+  );
+
+  return html`
+    <div class="space-y-4">
+      <${PageHeader}
+        title="Webhooks"
+        leading=${selectedHookName
+          ? html`
+              <button
+                class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 transition-colors"
+                onclick=${onBackToList}
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M10.354 3.354a.5.5 0 00-.708-.708l-5 5a.5.5 0 000 .708l5 5a.5.5 0 00.708-.708L5.707 8l4.647-4.646z"
+                  />
+                </svg>
+                Back
+              </button>
+            `
+          : null}
+        actions=${selectedHookName
+          ? null
+          : html`
+              <${ActionButton}
+                onClick=${() => {
+                  setCreateMode("webhook");
+                  setIsCreating((open) => !open);
+                }}
+                tone="secondary"
+                size="sm"
+                idleLabel="Create new"
+                className="px-3 py-1.5"
+              />
+            `}
+      />
+
+      ${selectedHookName
+        ? html`
+            <${WebhookDetail}
+              selectedHookName=${selectedHookName}
+              onBackToList=${onBackToList}
+              onRestartRequired=${onRestartRequired}
+              onOpenFile=${onOpenFile}
+            />
+          `
+        : html`
+            <${WebhookList}
+              onSelectHook=${(name) => {
+                onSelectHook(name);
+              }}
+            />
+          `}
+
+      <${CreateWebhookModal}
+        visible=${isCreating && !selectedHookName}
+        name=${newName}
+        mode=${createMode}
+        onModeChange=${setCreateMode}
+        onNameChange=${setNewName}
+        canCreate=${canCreate}
+        creating=${creating}
+        onCreate=${handleCreate}
+        onClose=${() => {
+          setIsCreating(false);
+          setCreateMode("webhook");
+        }}
+      />
+    </div>
+  `;
+};