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

package/lib/public/js/components/webhooks/webhook-detail/use-webhook-detail.js

@@ -0,0 +1,277 @@
+import { useCallback, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  deleteWebhook,
+  fetchAgents,
+  fetchWebhookDetail,
+  rotateWebhookOauthCallback,
+} from "../../../lib/api.js";
+import { useCachedFetch } from "../../../hooks/use-cached-fetch.js";
+import { showToast } from "../../toast.js";
+import { formatAgentFallbackName } from "../helpers.js";
+
+export const useWebhookDetail = ({
+  selectedHookName = "",
+  onBackToList = () => {},
+  onRestartRequired = () => {},
+}) => {
+  const [authMode, setAuthMode] = useState("headers");
+  const [deleting, setDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteTransformDir, setDeleteTransformDir] = useState(true);
+  const [rotatingOauthCallback, setRotatingOauthCallback] = useState(false);
+  const [showRotateOauthConfirm, setShowRotateOauthConfirm] = useState(false);
+  const [sendingTestWebhook, setSendingTestWebhook] = useState(false);
+
+  const detailCacheKey = useMemo(
+    () => `/api/webhooks/${encodeURIComponent(String(selectedHookName || ""))}`,
+    [selectedHookName],
+  );
+  const detailFetchState = useCachedFetch(
+    detailCacheKey,
+    async () => {
+      if (!selectedHookName) return null;
+      const data = await fetchWebhookDetail(selectedHookName);
+      return data.webhook || null;
+    },
+    {
+      enabled: !!selectedHookName,
+      maxAgeMs: 15000,
+    },
+  );
+  const agentsFetchState = useCachedFetch("/api/agents", fetchAgents, {
+    enabled: true,
+    maxAgeMs: 30000,
+  });
+
+  const agents = Array.isArray(agentsFetchState.data?.agents)
+    ? agentsFetchState.data.agents
+    : [];
+  const agentNameById = useMemo(
+    () =>
+      new Map(
+        agents.map((agent) => [
+          String(agent?.id || "").trim(),
+          String(agent?.name || "").trim() || formatAgentFallbackName(agent?.id),
+        ]),
+      ),
+    [agents],
+  );
+
+  const selectedWebhook = detailFetchState.data;
+  const isWebhookLoading = !!selectedHookName && detailFetchState.loading;
+  const webhookLoadError = detailFetchState.error;
+  const selectedWebhookManaged = Boolean(selectedWebhook?.managed);
+  const selectedDeliveryAgentId =
+    String(selectedWebhook?.agentId || "main").trim() || "main";
+  const selectedDeliveryAgentName =
+    agentNameById.get(selectedDeliveryAgentId) ||
+    formatAgentFallbackName(selectedDeliveryAgentId);
+  const selectedDeliveryChannel =
+    String(selectedWebhook?.channel || "last").trim() || "last";
+
+  const webhookUrl = selectedWebhook?.fullUrl || `.../hooks/${selectedHookName}`;
+  const oauthCallbackUrl = String(selectedWebhook?.oauthCallbackUrl || "").trim();
+  const hasOauthCallback = !!oauthCallbackUrl;
+  const webhookUrlWithQueryToken =
+    selectedWebhook?.queryStringUrl ||
+    `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<WEBHOOK_TOKEN>`;
+
+  const derivedTokenFromQuery = useMemo(() => {
+    try {
+      const parsed = new URL(webhookUrlWithQueryToken);
+      return String(parsed.searchParams.get("token") || "").trim();
+    } catch {
+      return "";
+    }
+  }, [webhookUrlWithQueryToken]);
+
+  const authHeaderValue =
+    selectedWebhook?.authHeaderValue ||
+    (derivedTokenFromQuery
+      ? `Authorization: Bearer ${derivedTokenFromQuery}`
+      : "Authorization: Bearer <WEBHOOK_TOKEN>");
+  const bearerTokenValue = authHeaderValue.startsWith("Authorization: ")
+    ? authHeaderValue.slice("Authorization: ".length)
+    : authHeaderValue;
+
+  const webhookTestPayload = useMemo(() => {
+    if (
+      String(selectedHookName || "")
+        .trim()
+        .toLowerCase() === "gmail"
+    ) {
+      return {
+        payload: {
+          account: "test@gmail.com",
+          messages: [
+            {
+              id: "test-message-1",
+              from: "alerts@example.com",
+              to: ["test@gmail.com"],
+              subject: "Test Gmail webhook event",
+              snippet:
+                "This is a simulated Gmail message payload for webhook testing.",
+              receivedAt: new Date().toISOString(),
+            },
+          ],
+        },
+      };
+    }
+    return {
+      source: "manual-test",
+      message: `This is a test of the ${selectedHookName || "webhook"} webhook.`,
+    };
+  }, [selectedHookName]);
+
+  const webhookTestPayloadJson = JSON.stringify(webhookTestPayload);
+  const curlCommandHeaders =
+    `curl -X POST "${webhookUrl}" ` +
+    `-H "Content-Type: application/json" ` +
+    `-H "${authHeaderValue}" ` +
+    `-d '${webhookTestPayloadJson}'`;
+  const curlCommandQuery =
+    `curl -X POST "${webhookUrlWithQueryToken}" ` +
+    `-H "Content-Type: application/json" ` +
+    `-d '${webhookTestPayloadJson}'`;
+
+  const effectiveAuthMode = selectedWebhookManaged ? "headers" : authMode;
+  const activeCurlCommand =
+    effectiveAuthMode === "query" ? curlCommandQuery : curlCommandHeaders;
+
+  const refreshDetail = useCallback(() => {
+    detailFetchState.refresh({ force: true });
+    agentsFetchState.refresh({ force: true });
+  }, [agentsFetchState.refresh, detailFetchState.refresh]);
+
+  const handleSendTestWebhook = useCallback(async () => {
+    if (!selectedHookName || sendingTestWebhook) return;
+    setSendingTestWebhook(true);
+    const requestUrl =
+      effectiveAuthMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
+    const headers = { "Content-Type": "application/json" };
+    if (effectiveAuthMode === "headers") {
+      headers.Authorization = bearerTokenValue;
+    }
+    try {
+      const response = await fetch(requestUrl, {
+        method: "POST",
+        headers,
+        body: webhookTestPayloadJson,
+      });
+      const bodyText = await response.text();
+      let body = null;
+      try {
+        body = bodyText ? JSON.parse(bodyText) : null;
+      } catch {
+        body = null;
+      }
+      const errorMessage =
+        body?.ok === false
+          ? body?.error || "Webhook rejected"
+          : !response.ok
+            ? body?.error || bodyText || `HTTP ${response.status}`
+            : "";
+      if (errorMessage) {
+        showToast(`Test webhook failed: ${errorMessage}`, "error");
+        return;
+      }
+      showToast("Test webhook sent", "success");
+    } catch (err) {
+      showToast(err.message || "Could not send test webhook", "error");
+    } finally {
+      setSendingTestWebhook(false);
+    }
+  }, [
+    bearerTokenValue,
+    effectiveAuthMode,
+    selectedHookName,
+    sendingTestWebhook,
+    webhookTestPayloadJson,
+    webhookUrl,
+    webhookUrlWithQueryToken,
+  ]);
+
+  const handleDeleteConfirmed = useCallback(async () => {
+    if (!selectedHookName || deleting) return;
+    setDeleting(true);
+    try {
+      const data = await deleteWebhook(selectedHookName, {
+        deleteTransformDir,
+      });
+      if (data.restartRequired) onRestartRequired(true);
+      onBackToList();
+      setShowDeleteConfirm(false);
+      setDeleteTransformDir(true);
+      showToast("Webhook removed", "success");
+      if (data.deletedTransformDir) {
+        showToast("Transform directory deleted", "success");
+      }
+      if (data.syncWarning) {
+        showToast(`Deleted, but git-sync failed: ${data.syncWarning}`, "warning");
+      }
+      refreshDetail();
+    } catch (err) {
+      showToast(err.message || "Could not delete webhook", "error");
+    } finally {
+      setDeleting(false);
+    }
+  }, [
+    deleteTransformDir,
+    deleting,
+    onBackToList,
+    onRestartRequired,
+    refreshDetail,
+    selectedHookName,
+  ]);
+
+  const handleRotateOauthCallback = useCallback(async () => {
+    if (!selectedHookName || rotatingOauthCallback) return;
+    setRotatingOauthCallback(true);
+    try {
+      await rotateWebhookOauthCallback(selectedHookName);
+      showToast("OAuth callback rotated", "success");
+      setShowRotateOauthConfirm(false);
+      refreshDetail();
+    } catch (err) {
+      showToast(err.message || "Could not rotate OAuth callback", "error");
+    } finally {
+      setRotatingOauthCallback(false);
+    }
+  }, [refreshDetail, rotatingOauthCallback, selectedHookName]);
+
+  return {
+    state: {
+      authMode,
+      selectedWebhook,
+      isWebhookLoading,
+      webhookLoadError,
+      selectedWebhookManaged,
+      selectedDeliveryAgentName,
+      selectedDeliveryChannel,
+      webhookUrl,
+      oauthCallbackUrl,
+      hasOauthCallback,
+      webhookUrlWithQueryToken,
+      authHeaderValue,
+      bearerTokenValue,
+      effectiveAuthMode,
+      activeCurlCommand,
+      deleting,
+      showDeleteConfirm,
+      deleteTransformDir,
+      rotatingOauthCallback,
+      showRotateOauthConfirm,
+      sendingTestWebhook,
+    },
+    actions: {
+      refreshDetail,
+      setAuthMode,
+      setShowDeleteConfirm,
+      setDeleteTransformDir,
+      setShowRotateOauthConfirm,
+      handleDeleteConfirmed,
+      handleRotateOauthCallback,
+      handleSendTestWebhook,
+    },
+  };
+};

package/lib/public/js/components/webhooks/webhook-list/index.js

@@ -0,0 +1,96 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Badge } from "../../badge.js";
+import { formatLastReceived, healthClassName } from "../helpers.js";
+import { useWebhookList } from "./use-webhook-list.js";
+
+const html = htm.bind(h);
+
+export const WebhookList = ({
+  onSelectHook = () => {},
+}) => {
+  const { state, actions } = useWebhookList({ onSelectHook });
+
+  const { webhooks, isListLoading } = state;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4 space-y-4">
+      ${isListLoading
+        ? html`<p class="text-xs text-gray-500">Loading webhooks...</p>`
+        : null}
+      ${!isListLoading && webhooks.length === 0
+        ? html`<p class="text-sm text-gray-500">
+            No webhooks configured yet. Create one to get started.
+          </p>`
+        : null}
+      ${webhooks.length > 0
+        ? html`
+            <div class="overflow-auto">
+              <table class="w-full text-sm">
+                <thead>
+                  <tr class="text-left text-xs text-gray-500 border-b border-border">
+                    <th class="pb-2 pr-3">Path</th>
+                    <th class="pb-2 pr-3">Last received</th>
+                    <th class="pb-2 pr-3">Errors</th>
+                    <th class="pb-2 pr-3">Health</th>
+                    <th class="pb-2 pr-3">Type</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr aria-hidden="true">
+                    <td class="h-2 p-0" colspan="5"></td>
+                  </tr>
+                  ${webhooks.map(
+                    (item) => html`
+                      <tr
+                        class="group cursor-pointer"
+                        onclick=${() => actions.handleSelectHook(item.name)}
+                      >
+                        <td
+                          class="px-3 py-2.5 group-hover:bg-white/5 first:rounded-l-lg transition-colors"
+                        >
+                          <code>${item.path || `/hooks/${item.name}`}</code>
+                        </td>
+                        <td
+                          class="px-3 py-2.5 text-xs text-gray-400 group-hover:bg-white/5 transition-colors"
+                        >
+                          ${formatLastReceived(item.lastReceived)}
+                        </td>
+                        <td
+                          class="px-3 py-2.5 text-xs group-hover:bg-white/5 transition-colors"
+                        >
+                          ${item.errorCount || 0}
+                        </td>
+                        <td
+                          class="px-3 py-2.5 group-hover:bg-white/5 last:rounded-r-lg transition-colors"
+                        >
+                          <span
+                            class="inline-block w-2.5 h-2.5 rounded-full ${healthClassName(
+                              item.health,
+                            )}"
+                            title=${item.health}
+                          />
+                        </td>
+                        <td
+                          class="px-3 py-2.5 text-xs text-gray-400 group-hover:bg-white/5 transition-colors"
+                        >
+                          ${item.managed
+                            ? html`<span
+                                class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] bg-cyan-500/10 text-cyan-200"
+                                >Managed</span
+                              >`
+                            : item.oauthCallbackEnabled
+                              ? html`<${Badge} tone="neutral">OAuth</${Badge}>`
+                              : html`<${Badge} tone="neutral">Custom</${Badge}>`}
+                        </td>
+                      </tr>
+                    `,
+                  )}
+                </tbody>
+              </table>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};

package/lib/public/js/components/webhooks/webhook-list/use-webhook-list.js

@@ -0,0 +1,30 @@
+import { useCallback } from "https://esm.sh/preact/hooks";
+import { usePolling } from "../../../hooks/usePolling.js";
+import { fetchWebhooks } from "../../../lib/api.js";
+
+export const useWebhookList = ({
+  onSelectHook = () => {},
+}) => {
+  const listPoll = usePolling(fetchWebhooks, 15000);
+
+  const webhooks = listPoll.data?.webhooks || [];
+  const isListLoading = !listPoll.data && !listPoll.error;
+
+  const handleSelectHook = useCallback(
+    (name) => {
+      onSelectHook(name);
+    },
+    [onSelectHook],
+  );
+
+  return {
+    state: {
+      webhooks,
+      isListLoading,
+    },
+    actions: {
+      refreshList: listPoll.refresh,
+      handleSelectHook,
+    },
+  };
+};

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

@@ -1133,13 +1133,17 @@ export async function fetchWebhookDetail(name) {
   return parseJsonOrThrow(res, "Could not load webhook detail");
 }
 
-export async function createWebhook(name, { destination = null } = {}) {
+export async function createWebhook(
+  name,
+  { destination = null, oauthCallback = false } = {},
+) {
   const res = await authFetch("/api/webhooks", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({
       name,
       ...(destination ? { destination } : {}),
+      oauthCallback: !!oauthCallback,
     }),
   });
   return parseJsonOrThrow(res, "Could not create webhook");
@@ -1154,6 +1158,36 @@ export async function deleteWebhook(name, { deleteTransformDir = false } = {}) {
   return parseJsonOrThrow(res, "Could not delete webhook");
 }
 
+export async function createWebhookOauthCallback(name) {
+  const res = await authFetch(
+    `/api/webhooks/${encodeURIComponent(name)}/oauth-callback`,
+    {
+      method: "POST",
+    },
+  );
+  return parseJsonOrThrow(res, "Could not enable OAuth callback");
+}
+
+export async function rotateWebhookOauthCallback(name) {
+  const res = await authFetch(
+    `/api/webhooks/${encodeURIComponent(name)}/oauth-callback/rotate`,
+    {
+      method: "POST",
+    },
+  );
+  return parseJsonOrThrow(res, "Could not rotate OAuth callback");
+}
+
+export async function deleteWebhookOauthCallback(name) {
+  const res = await authFetch(
+    `/api/webhooks/${encodeURIComponent(name)}/oauth-callback`,
+    {
+      method: "DELETE",
+    },
+  );
+  return parseJsonOrThrow(res, "Could not delete OAuth callback");
+}
+
 export async function fetchWebhookRequests(
   name,
   { limit = 50, offset = 0, status = "all" } = {},

package/lib/server/db/webhooks/index.js

@@ -1,5 +1,6 @@
 const fs = require("fs");
 const path = require("path");
+const crypto = require("crypto");
 const { DatabaseSync } = require("node:sqlite");
 const { createSchema } = require("./schema");
 
@@ -43,6 +44,19 @@ const parseJsonText = (value) => {
   }
 };
 
+const generateOauthCallbackId = () => crypto.randomBytes(16).toString("hex");
+
+const toOauthCallbackModel = (row) => {
+  if (!row) return null;
+  return {
+    callbackId: String(row.callback_id || ""),
+    hookName: String(row.hook_name || ""),
+    createdAt: row.created_at || null,
+    rotatedAt: row.rotated_at || null,
+    lastUsedAt: row.last_used_at || null,
+  };
+};
+
 const toRequestModel = (row) => {
   if (!row) return null;
   return {
@@ -220,6 +234,130 @@ const deleteRequestsByHook = (hookName) => {
   return Number(result.changes || 0);
 };
 
+const createOauthCallback = ({ hookName }) => {
+  const database = ensureDb();
+  const normalizedHookName = String(hookName || "").trim();
+  if (!normalizedHookName) throw new Error("hookName is required");
+  const callbackId = generateOauthCallbackId();
+  database
+    .prepare(`
+      INSERT INTO oauth_callbacks (
+        callback_id,
+        hook_name
+      ) VALUES (
+        $callback_id,
+        $hook_name
+      )
+    `)
+    .run({
+      $callback_id: callbackId,
+      $hook_name: normalizedHookName,
+    });
+  const inserted = database
+    .prepare(`
+      SELECT
+        callback_id,
+        hook_name,
+        created_at,
+        rotated_at,
+        last_used_at
+      FROM oauth_callbacks
+      WHERE callback_id = $callback_id
+      LIMIT 1
+    `)
+    .get({ $callback_id: callbackId });
+  return toOauthCallbackModel(inserted);
+};
+
+const getOauthCallbackByHook = (hookName) => {
+  const database = ensureDb();
+  const normalizedHookName = String(hookName || "").trim();
+  if (!normalizedHookName) return null;
+  const row = database
+    .prepare(`
+      SELECT
+        callback_id,
+        hook_name,
+        created_at,
+        rotated_at,
+        last_used_at
+      FROM oauth_callbacks
+      WHERE hook_name = $hook_name
+      LIMIT 1
+    `)
+    .get({ $hook_name: normalizedHookName });
+  return toOauthCallbackModel(row);
+};
+
+const getOauthCallbackById = (callbackId) => {
+  const database = ensureDb();
+  const normalizedCallbackId = String(callbackId || "").trim();
+  if (!normalizedCallbackId) return null;
+  const row = database
+    .prepare(`
+      SELECT
+        callback_id,
+        hook_name,
+        created_at,
+        rotated_at,
+        last_used_at
+      FROM oauth_callbacks
+      WHERE callback_id = $callback_id
+      LIMIT 1
+    `)
+    .get({ $callback_id: normalizedCallbackId });
+  return toOauthCallbackModel(row);
+};
+
+const rotateOauthCallback = (hookName) => {
+  const database = ensureDb();
+  const normalizedHookName = String(hookName || "").trim();
+  if (!normalizedHookName) throw new Error("hookName is required");
+  const existing = getOauthCallbackByHook(normalizedHookName);
+  if (!existing) throw new Error("OAuth callback not found");
+  const nextCallbackId = generateOauthCallbackId();
+  database
+    .prepare(`
+      UPDATE oauth_callbacks
+      SET
+        callback_id = $callback_id,
+        rotated_at = strftime('%Y-%m-%dT%H:%M:%fZ','now')
+      WHERE hook_name = $hook_name
+    `)
+    .run({
+      $callback_id: nextCallbackId,
+      $hook_name: normalizedHookName,
+    });
+  return getOauthCallbackById(nextCallbackId);
+};
+
+const deleteOauthCallback = (hookName) => {
+  const database = ensureDb();
+  const normalizedHookName = String(hookName || "").trim();
+  if (!normalizedHookName) return 0;
+  const result = database
+    .prepare(`
+      DELETE FROM oauth_callbacks
+      WHERE hook_name = $hook_name
+    `)
+    .run({ $hook_name: normalizedHookName });
+  return Number(result.changes || 0);
+};
+
+const markOauthCallbackUsed = (callbackId) => {
+  const database = ensureDb();
+  const normalizedCallbackId = String(callbackId || "").trim();
+  if (!normalizedCallbackId) return 0;
+  const result = database
+    .prepare(`
+      UPDATE oauth_callbacks
+      SET last_used_at = strftime('%Y-%m-%dT%H:%M:%fZ','now')
+      WHERE callback_id = $callback_id
+    `)
+    .run({ $callback_id: normalizedCallbackId });
+  return Number(result.changes || 0);
+};
+
 const pruneOldEntries = (days = 30) => {
   const database = ensureDb();
   const safeDays = Math.max(1, Number.parseInt(String(days || 30), 10) || 30);
@@ -240,5 +378,11 @@ module.exports = {
   getRequestById,
   getHookSummaries,
   deleteRequestsByHook,
+  createOauthCallback,
+  getOauthCallbackByHook,
+  getOauthCallbackById,
+  rotateOauthCallback,
+  deleteOauthCallback,
+  markOauthCallbackUsed,
   pruneOldEntries,
 };

package/lib/server/db/webhooks/schema.js

@@ -18,6 +18,19 @@ const createSchema = (database) => {
     CREATE INDEX IF NOT EXISTS idx_webhook_requests_hook_ts
     ON webhook_requests(hook_name, created_at DESC);
   `);
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS oauth_callbacks (
+      callback_id TEXT PRIMARY KEY,
+      hook_name TEXT NOT NULL UNIQUE,
+      created_at TEXT NOT NULL DEFAULT (strftime('%Y-%m-%dT%H:%M:%fZ','now')),
+      rotated_at TEXT,
+      last_used_at TEXT
+    );
+  `);
+  database.exec(`
+    CREATE INDEX IF NOT EXISTS idx_oauth_callbacks_hook_name
+    ON oauth_callbacks(hook_name);
+  `);
 };
 
 module.exports = {

package/lib/server/init/register-server-routes.js

@@ -17,6 +17,9 @@ const { registerDoctorRoutes } = require("../routes/doctor");
 const { registerAgentRoutes } = require("../routes/agents");
 const { registerCronRoutes } = require("../routes/cron");
 const { registerNodeRoutes } = require("../routes/nodes");
+const {
+  createOauthCallbackMiddleware,
+} = require("../oauth-callback-middleware");
 
 const registerServerRoutes = ({
   app,
@@ -58,6 +61,12 @@ const registerServerRoutes = ({
   getRequestById,
   getHookSummaries,
   deleteRequestsByHook,
+  createOauthCallback,
+  getOauthCallbackByHook,
+  getOauthCallbackById,
+  rotateOauthCallback,
+  deleteOauthCallback,
+  markOauthCallbackUsed,
   watchdog,
   getRecentEvents,
   readLogTail,
@@ -187,9 +196,18 @@ const registerServerRoutes = ({
       getRequestById,
       getHookSummaries,
       deleteRequestsByHook,
+      createOauthCallback,
+      getOauthCallbackByHook,
+      rotateOauthCallback,
+      deleteOauthCallback,
     },
     restartRequiredState,
   });
+  const oauthCallbackMiddleware = createOauthCallbackMiddleware({
+    getOauthCallbackById,
+    markOauthCallbackUsed,
+    webhookMiddleware,
+  });
   registerWatchdogRoutes({
     app,
     requireAuth,
@@ -235,6 +253,7 @@ const registerServerRoutes = ({
     getGatewayUrl,
     SETUP_API_PREFIXES,
     requireAuth,
+    oauthCallbackMiddleware,
     webhookMiddleware,
   });