@chrysb/alphaclaw 0.8.0 → 0.8.1-beta.1

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/hooks/use-app-shell-controller.js

@@ -10,6 +10,7 @@ import {
   fetchWatchdogStatus,
   fetchDoctorStatus,
   updateOpenclaw,
+  subscribeStatusEvents,
 } from "../lib/api.js";
 import { shouldRequireRestartForBrowsePath } from "../lib/browse-restart-policy.js";
 import { usePolling } from "./usePolling.js";
@@ -28,19 +29,28 @@ export const useAppShellController = ({ location = "" } = {}) => {
   const [gatewayRestartSignal, setGatewayRestartSignal] = useState(0);
   const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
   const [openclawUpdateInProgress, setOpenclawUpdateInProgress] = useState(false);
+  const [statusStreamConnected, setStatusStreamConnected] = useState(false);
+  const [statusStreamStatus, setStatusStreamStatus] = useState(null);
+  const [statusStreamWatchdog, setStatusStreamWatchdog] = useState(null);
+  const [statusStreamDoctor, setStatusStreamDoctor] = useState(null);
 
   const sharedStatusPoll = usePolling(fetchStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/status",
   });
   const sharedWatchdogPoll = usePolling(fetchWatchdogStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/watchdog/status",
   });
   const sharedDoctorPoll = usePolling(fetchDoctorStatus, statusPollCadenceMs, {
-    enabled: onboarded === true,
+    enabled: onboarded === true && !statusStreamConnected,
+    cacheKey: "/api/doctor/status",
   });
-  const sharedStatus = sharedStatusPoll.data || null;
-  const sharedWatchdogStatus = sharedWatchdogPoll.data?.status || null;
-  const sharedDoctorStatus = sharedDoctorPoll.data?.status || null;
+  const sharedStatus = statusStreamStatus || sharedStatusPoll.data || null;
+  const sharedWatchdogStatus =
+    statusStreamWatchdog || sharedWatchdogPoll.data?.status || null;
+  const sharedDoctorStatus =
+    statusStreamDoctor || sharedDoctorPoll.data?.status || null;
   const isAnyRestartRequired = restartRequired || browseRestartRequired;
 
   const refreshSharedStatuses = useCallback(() => {
@@ -58,6 +68,49 @@ export const useAppShellController = ({ location = "" } = {}) => {
       .catch(() => {});
   }, []);
 
+  useEffect(() => {
+    if (onboarded !== true) return;
+    let disposed = false;
+    const startStream = () => {
+      if (disposed) return;
+      try {
+        return subscribeStatusEvents({
+          onOpen: () => {
+            if (disposed) return;
+            setStatusStreamConnected(true);
+          },
+          onMessage: (payload = {}) => {
+            if (disposed) return;
+            if (payload.status && typeof payload.status === "object") {
+              setStatusStreamStatus(payload.status);
+            }
+            if (payload.watchdogStatus && typeof payload.watchdogStatus === "object") {
+              setStatusStreamWatchdog(payload.watchdogStatus);
+            }
+            if (payload.doctorStatus && typeof payload.doctorStatus === "object") {
+              setStatusStreamDoctor(payload.doctorStatus);
+            }
+          },
+          onError: () => {
+            if (disposed) return;
+            setStatusStreamConnected(false);
+          },
+        });
+      } catch {
+        setStatusStreamConnected(false);
+        return null;
+      }
+    };
+    let cleanup = startStream();
+    return () => {
+      disposed = true;
+      setStatusStreamConnected(false);
+      if (typeof cleanup === "function") {
+        cleanup();
+      }
+    };
+  }, [onboarded]);
+
   useEffect(() => {
     if (!onboarded) return;
     let active = true;

package/lib/public/js/hooks/use-cached-fetch.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { cachedFetch, getCached } from "../lib/api-cache.js";
+
+export const useCachedFetch = (
+  key,
+  fetcher,
+  {
+    enabled = true,
+    maxAgeMs = 15000,
+    staleWhileRevalidate = true,
+  } = {},
+) => {
+  const normalizedKey = useMemo(() => String(key || ""), [key]);
+  const initialCachedData = useMemo(() => getCached(normalizedKey), [normalizedKey]);
+  const [data, setData] = useState(initialCachedData);
+  const [loading, setLoading] = useState(initialCachedData === null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    setData(getCached(normalizedKey));
+  }, [normalizedKey]);
+
+  const refresh = useCallback(
+    async ({ force = false } = {}) => {
+      if (!enabled) return getCached(normalizedKey);
+      if (getCached(normalizedKey) === null) {
+        setLoading(true);
+      }
+      try {
+        const next = await cachedFetch(normalizedKey, fetcher, {
+          maxAgeMs,
+          force,
+          staleWhileRevalidate,
+          onRevalidate: (revalidatedData) => {
+            setData(revalidatedData);
+            setError(null);
+          },
+        });
+        setData(next);
+        setError(null);
+        return next;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [enabled, fetcher, maxAgeMs, normalizedKey, staleWhileRevalidate],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    refresh().catch(() => {});
+  }, [enabled, refresh]);
+
+  return {
+    data,
+    error,
+    loading,
+    refresh,
+  };
+};

package/lib/public/js/hooks/usePolling.js

@@ -1,7 +1,19 @@
-import { useState, useEffect, useCallback, useRef } from 'https://esm.sh/preact/hooks';
+import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
+import { getCached, setCached } from "../lib/api-cache.js";
 
-export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
-  const [data, setData] = useState(null);
+export const usePolling = (
+  fetcher,
+  interval,
+  {
+    enabled = true,
+    pauseWhenHidden = true,
+    cacheKey = "",
+  } = {},
+) => {
+  const normalizedCacheKey = String(cacheKey || "");
+  const [data, setData] = useState(() =>
+    normalizedCacheKey ? getCached(normalizedCacheKey) : null,
+  );
   const [error, setError] = useState(null);
   const fetcherRef = useRef(fetcher);
   fetcherRef.current = fetcher;
@@ -9,6 +21,9 @@ export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
   const refresh = useCallback(async () => {
     try {
       const result = await fetcherRef.current();
+      if (normalizedCacheKey) {
+        setCached(normalizedCacheKey, result);
+      }
       setData(result);
       setError(null);
       return result;
@@ -16,14 +31,37 @@ export const usePolling = (fetcher, interval, { enabled = true } = {}) => {
       setError(err);
       return null;
     }
-  }, []);
+  }, [normalizedCacheKey]);
+
+  useEffect(() => {
+    if (!normalizedCacheKey) return;
+    const cached = getCached(normalizedCacheKey);
+    if (cached !== null) {
+      setData(cached);
+    }
+  }, [normalizedCacheKey]);
 
   useEffect(() => {
     if (!enabled) return;
+    if (pauseWhenHidden && typeof document !== "undefined" && document.hidden) {
+      return undefined;
+    }
     refresh();
-    const id = setInterval(refresh, interval);
-    return () => clearInterval(id);
-  }, [enabled, interval, refresh]);
+    const intervalId = setInterval(refresh, interval);
+    return () => clearInterval(intervalId);
+  }, [enabled, interval, pauseWhenHidden, refresh]);
+
+  useEffect(() => {
+    if (!enabled || !pauseWhenHidden || typeof document === "undefined") return;
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refresh();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [enabled, pauseWhenHidden, refresh]);
 
   return { data, error, refresh };
 };

package/lib/public/js/lib/api-cache.js

@@ -0,0 +1,88 @@
+const kApiCache = new Map();
+const kInFlightByKey = new Map();
+
+const nowMs = () => Date.now();
+
+const isFresh = (entry, maxAgeMs) => {
+  if (!entry) return false;
+  return nowMs() - Number(entry.fetchedAt || 0) < Number(maxAgeMs || 0);
+};
+
+export const getCached = (key = "") => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return null;
+  return kApiCache.get(normalizedKey)?.data ?? null;
+};
+
+export const setCached = (key = "", data = null) => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return data;
+  kApiCache.set(normalizedKey, {
+    data,
+    fetchedAt: nowMs(),
+  });
+  return data;
+};
+
+export const invalidateCache = (key = "") => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey) return;
+  kApiCache.delete(normalizedKey);
+  kInFlightByKey.delete(normalizedKey);
+};
+
+export const cachedFetch = async (
+  key,
+  fetcher,
+  {
+    maxAgeMs = 15000,
+    force = false,
+    staleWhileRevalidate = true,
+    onRevalidate = null,
+  } = {},
+) => {
+  const normalizedKey = String(key || "");
+  if (!normalizedKey || typeof fetcher !== "function") {
+    return fetcher();
+  }
+
+  const entry = kApiCache.get(normalizedKey);
+  if (!force && isFresh(entry, maxAgeMs)) {
+    return entry.data;
+  }
+
+  if (!force && staleWhileRevalidate && entry) {
+    if (!kInFlightByKey.has(normalizedKey)) {
+      const backgroundPromise = Promise.resolve()
+        .then(() => fetcher())
+        .then((result) => {
+          setCached(normalizedKey, result);
+          if (typeof onRevalidate === "function") {
+            onRevalidate(result);
+          }
+          return result;
+        })
+        .finally(() => {
+          kInFlightByKey.delete(normalizedKey);
+        });
+      kInFlightByKey.set(normalizedKey, backgroundPromise);
+    }
+    return entry.data;
+  }
+
+  if (kInFlightByKey.has(normalizedKey)) {
+    return kInFlightByKey.get(normalizedKey);
+  }
+
+  const requestPromise = Promise.resolve()
+    .then(() => fetcher())
+    .then((result) => {
+      setCached(normalizedKey, result);
+      return result;
+    })
+    .finally(() => {
+      kInFlightByKey.delete(normalizedKey);
+    });
+  kInFlightByKey.set(normalizedKey, requestPromise);
+  return requestPromise;
+};

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

@@ -31,6 +31,35 @@ export const authFetch = async (url, opts = {}) => {
   return res;
 };
 
+export const subscribeStatusEvents = ({
+  onMessage = () => {},
+  onOpen = () => {},
+  onError = () => {},
+} = {}) => {
+  if (typeof window?.EventSource !== "function") {
+    throw new Error("Server events are not supported in this browser");
+  }
+  const source = new window.EventSource("/api/events/status", {
+    withCredentials: true,
+  });
+  const handleStatus = (event) => {
+    let payload = {};
+    try {
+      payload = event?.data ? JSON.parse(event.data) : {};
+    } catch {}
+    onMessage(payload || {});
+  };
+  source.addEventListener("status", handleStatus);
+  source.onopen = () => onOpen();
+  source.onerror = (event) => onError(event);
+  return () => {
+    source.removeEventListener("status", handleStatus);
+    source.onopen = null;
+    source.onerror = null;
+    source.close();
+  };
+};
+
 export async function fetchStatus() {
   const res = await authFetch("/api/status");
   return res.json();
@@ -1104,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");
@@ -1125,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" } = {},