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

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

@@ -25,6 +25,8 @@ export const WebhookDetail = ({
   const {
     authMode,
     selectedWebhook,
+    isWebhookLoading,
+    webhookLoadError,
     selectedWebhookManaged,
     selectedDeliveryAgentName,
     selectedDeliveryChannel,
@@ -53,9 +55,19 @@ export const WebhookDetail = ({
           </h2>
         </div>
 
-        ${hasOauthCallback
-          ? null
-          : html`<div class="bg-black/20 border border-border rounded-lg p-3 space-y-4">
+        ${isWebhookLoading
+          ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
+              <p class="text-xs text-gray-500">Loading webhook details...</p>
+            </div>`
+          : webhookLoadError
+            ? html`<div class="bg-black/20 border border-border rounded-lg p-3">
+                <p class="text-xs text-red-300">
+                  ${webhookLoadError?.message || "Could not load webhook details"}
+                </p>
+              </div>`
+            : hasOauthCallback
+              ? null
+              : html`<div class="bg-black/20 border border-border rounded-lg p-3 space-y-4">
               ${selectedWebhookManaged
                 ? null
                 : html`
@@ -152,7 +164,7 @@ export const WebhookDetail = ({
                     `}
             </div>`}
 
-        ${selectedWebhookManaged || !hasOauthCallback
+        ${isWebhookLoading || webhookLoadError || selectedWebhookManaged || !hasOauthCallback
           ? null
           : html`
               <div class="bg-black/20 border border-border rounded-lg p-3 space-y-2">
@@ -304,7 +316,7 @@ export const WebhookDetail = ({
         </div>
       </div>
 
-      ${selectedWebhookManaged
+      ${selectedWebhookManaged && !isWebhookLoading && !webhookLoadError
         ? html`
             <div class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3">
               <p class="text-xs text-yellow-200">

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

@@ -5,7 +5,7 @@ import {
   fetchWebhookDetail,
   rotateWebhookOauthCallback,
 } from "../../../lib/api.js";
-import { usePolling } from "../../../hooks/usePolling.js";
+import { useCachedFetch } from "../../../hooks/use-cached-fetch.js";
 import { showToast } from "../../toast.js";
 import { formatAgentFallbackName } from "../helpers.js";
 
@@ -22,18 +22,30 @@ export const useWebhookDetail = ({
   const [showRotateOauthConfirm, setShowRotateOauthConfirm] = useState(false);
   const [sendingTestWebhook, setSendingTestWebhook] = useState(false);
 
-  const detailPoll = usePolling(
+  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;
     },
-    10000,
-    { enabled: !!selectedHookName },
+    {
+      enabled: !!selectedHookName,
+      maxAgeMs: 15000,
+    },
   );
+  const agentsFetchState = useCachedFetch("/api/agents", fetchAgents, {
+    enabled: true,
+    maxAgeMs: 30000,
+  });
 
-  const agentsPoll = usePolling(fetchAgents, 20000);
-  const agents = Array.isArray(agentsPoll.data?.agents) ? agentsPoll.data.agents : [];
+  const agents = Array.isArray(agentsFetchState.data?.agents)
+    ? agentsFetchState.data.agents
+    : [];
   const agentNameById = useMemo(
     () =>
       new Map(
@@ -45,7 +57,9 @@ export const useWebhookDetail = ({
     [agents],
   );
 
-  const selectedWebhook = detailPoll.data;
+  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";
@@ -125,9 +139,9 @@ export const useWebhookDetail = ({
     effectiveAuthMode === "query" ? curlCommandQuery : curlCommandHeaders;
 
   const refreshDetail = useCallback(() => {
-    detailPoll.refresh();
-    agentsPoll.refresh();
-  }, [agentsPoll.refresh, detailPoll.refresh]);
+    detailFetchState.refresh({ force: true });
+    agentsFetchState.refresh({ force: true });
+  }, [agentsFetchState.refresh, detailFetchState.refresh]);
 
   const handleSendTestWebhook = useCallback(async () => {
     if (!selectedHookName || sendingTestWebhook) return;
@@ -229,6 +243,8 @@ export const useWebhookDetail = ({
     state: {
       authMode,
       selectedWebhook,
+      isWebhookLoading,
+      webhookLoadError,
       selectedWebhookManaged,
       selectedDeliveryAgentName,
       selectedDeliveryChannel,

package/package.json

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