@chrysb/alphaclaw 0.3.5-beta.1 → 0.4.1-beta.0

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

@@ -9,11 +9,16 @@ import {
   fetchWebhookRequests,
   fetchWebhooks,
 } from "../lib/api.js";
+import {
+  formatLocaleDateTime,
+  formatLocaleDateTimeWithTodayTime,
+} from "../lib/format.js";
 import { showToast } from "./toast.js";
 import { PageHeader } from "./page-header.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
 import { ActionButton } from "./action-button.js";
 import { ModalShell } from "./modal-shell.js";
+import { Badge } from "./badge.js";
 import { CloseIcon } from "./icons.js";
 
 const html = htm.bind(h);
@@ -21,29 +26,11 @@ const kNamePattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 const kStatusFilters = ["all", "success", "error"];
 
 const formatDateTime = (value) => {
-  if (!value) return "—";
-  try {
-    return new Date(value).toLocaleString();
-  } catch {
-    return value;
-  }
+  return formatLocaleDateTime(value, { fallback: "—" });
 };
 
 const formatLastReceived = (value) => {
-  if (!value) return "—";
-  try {
-    const timestamp = new Date(value);
-    const now = new Date();
-    const isSameDay =
-      timestamp.getFullYear() === now.getFullYear() &&
-      timestamp.getMonth() === now.getMonth() &&
-      timestamp.getDate() === now.getDate();
-    return isSameDay
-      ? timestamp.toLocaleTimeString()
-      : timestamp.toLocaleString();
-  } catch {
-    return value;
-  }
+  return formatLocaleDateTimeWithTodayTime(value, { fallback: "—" });
 };
 
 const formatBytes = (size) => {
@@ -197,6 +184,7 @@ export const Webhooks = ({
   onSelectHook = () => {},
   onBackToList = () => {},
   onRestartRequired = () => {},
+  onOpenFile = () => {},
 }) => {
   const [isCreating, setIsCreating] = useState(false);
   const [newName, setNewName] = useState("");
@@ -238,12 +226,13 @@ export const Webhooks = ({
   );
 
   const selectedWebhook = detailPoll.data;
+  const selectedWebhookManaged = Boolean(selectedWebhook?.managed);
   const requests = requestsPoll.data?.requests || [];
   const webhookUrl =
     selectedWebhook?.fullUrl || `.../hooks/${selectedHookName}`;
   const webhookUrlWithQueryToken =
     selectedWebhook?.queryStringUrl ||
-    `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<WEBHOOK_TOKEN>`;
+    `${webhookUrl}${webhookUrl.includes("?") ? "&" : "?"}token=<OPENCLAW_HOOKS_TOKEN>`;
   const derivedTokenFromQuery = (() => {
     try {
       const parsed = new URL(webhookUrlWithQueryToken);
@@ -256,17 +245,33 @@ export const Webhooks = ({
     selectedWebhook?.authHeaderValue ||
     (derivedTokenFromQuery
       ? `Authorization: Bearer ${derivedTokenFromQuery}`
-      : "Authorization: Bearer <WEBHOOK_TOKEN>");
+      : "Authorization: Bearer <OPENCLAW_HOOKS_TOKEN>");
   const bearerTokenValue = authHeaderValue.startsWith("Authorization: ")
     ? authHeaderValue.slice("Authorization: ".length)
     : authHeaderValue;
-  const webhookTestPayload = useMemo(
-    () => ({
+  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. Please acknowledge receipt.`,
-    }),
-    [selectedHookName],
-  );
+      message: `This is a test of the ${selectedHookName || "webhook"} webhook.`,
+    };
+  }, [selectedHookName]);
   const webhookTestPayloadJson = JSON.stringify(webhookTestPayload);
   const curlCommandHeaders =
     `curl -X POST "${webhookUrl}" ` +
@@ -277,8 +282,9 @@ export const Webhooks = ({
     `curl -X POST "${webhookUrlWithQueryToken}" ` +
     `-H "Content-Type: application/json" ` +
     `-d '${webhookTestPayloadJson}'`;
+  const effectiveAuthMode = selectedWebhookManaged ? "headers" : authMode;
   const activeCurlCommand =
-    authMode === "query" ? curlCommandQuery : curlCommandHeaders;
+    effectiveAuthMode === "query" ? curlCommandQuery : curlCommandHeaders;
 
   const canCreate = useMemo(() => {
     const name = String(newName || "")
@@ -376,9 +382,9 @@ export const Webhooks = ({
     if (!selectedHookName || sendingTestWebhook) return;
     setSendingTestWebhook(true);
     const requestUrl =
-      authMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
+      effectiveAuthMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
     const headers = { "Content-Type": "application/json" };
-    if (authMode === "headers") {
+    if (effectiveAuthMode === "headers") {
       headers.Authorization = bearerTokenValue;
     }
     try {
@@ -412,8 +418,8 @@ export const Webhooks = ({
       setSendingTestWebhook(false);
     }
   }, [
-    authMode,
     bearerTokenValue,
+    effectiveAuthMode,
     requestsPoll.refresh,
     selectedHookName,
     sendingTestWebhook,
@@ -430,9 +436,9 @@ export const Webhooks = ({
         return;
       }
       const requestUrl =
-        authMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
+        effectiveAuthMode === "query" ? webhookUrlWithQueryToken : webhookUrl;
       const headers = { "Content-Type": "application/json" };
-      if (authMode === "headers") {
+      if (effectiveAuthMode === "headers") {
         headers.Authorization = bearerTokenValue;
       }
       setReplayingRequestId(item.id);
@@ -468,8 +474,8 @@ export const Webhooks = ({
       }
     },
     [
-      authMode,
       bearerTokenValue,
+      effectiveAuthMode,
       replayingRequestId,
       requestsPoll.refresh,
       webhookUrl,
@@ -482,7 +488,10 @@ export const Webhooks = ({
       await navigator.clipboard.writeText(String(value || ""));
       showToast(`${label} copied`, "success");
     } catch {
-      showToast(`Could not copy ${String(label || "value").toLowerCase()}`, "error");
+      showToast(
+        `Could not copy ${String(label || "value").toLowerCase()}`,
+        "error",
+      );
     }
   }, []);
 
@@ -538,36 +547,40 @@ export const Webhooks = ({
               <div
                 class="bg-black/20 border border-border rounded-lg p-3 space-y-4"
               >
-                <div class="space-y-2">
-                  <p class="text-xs text-gray-500">Auth mode</p>
-                  <div class="flex items-center gap-2">
-                    <button
-                      class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
-                      "headers"
-                        ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                        : "border-border text-gray-400 hover:text-gray-200"}"
-                      onclick=${() => setAuthMode("headers")}
-                    >
-                      Headers
-                    </button>
-                    <button
-                      class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
-                      "query"
-                        ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
-                        : "border-border text-gray-400 hover:text-gray-200"}"
-                      onclick=${() => setAuthMode("query")}
-                    >
-                      Query string
-                    </button>
-                  </div>
-                </div>
+                ${selectedWebhookManaged
+                  ? null
+                  : html`
+                      <div class="space-y-2">
+                        <p class="text-xs text-gray-500">Auth mode</p>
+                        <div class="flex items-center gap-2">
+                          <button
+                            class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
+                            "headers"
+                              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
+                              : "border-border text-gray-400 hover:text-gray-200"}"
+                            onclick=${() => setAuthMode("headers")}
+                          >
+                            Headers
+                          </button>
+                          <button
+                            class="text-xs px-2 py-1 rounded border transition-colors ${authMode ===
+                            "query"
+                              ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
+                              : "border-border text-gray-400 hover:text-gray-200"}"
+                            onclick=${() => setAuthMode("query")}
+                          >
+                            Query string
+                          </button>
+                        </div>
+                      </div>
+                    `}
                 <div class="space-y-2">
                   <p class="text-xs text-gray-500">Webhook URL</p>
                   <div class="flex items-center gap-2">
                     <input
                       type="text"
                       readonly
-                      value=${authMode === "query"
+                      value=${effectiveAuthMode === "query"
                         ? webhookUrlWithQueryToken
                         : webhookUrl}
                       class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
@@ -577,7 +590,7 @@ export const Webhooks = ({
                       onclick=${async () => {
                         try {
                           await navigator.clipboard.writeText(
-                            authMode === "query"
+                            effectiveAuthMode === "query"
                               ? webhookUrlWithQueryToken
                               : webhookUrl,
                           );
@@ -591,44 +604,46 @@ export const Webhooks = ({
                     </button>
                   </div>
                 </div>
-                ${authMode === "headers"
-                  ? html`
-                      <div class="space-y-2">
-                        <p class="text-xs text-gray-500">Auth headers</p>
-                        <div class="flex items-center gap-2">
-                          <input
-                            type="text"
-                            readonly
-                            value=${authHeaderValue}
-                            class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
-                          />
-                          <button
-                            class="h-8 text-xs px-2.5 rounded-lg ac-btn-secondary shrink-0"
-                            onclick=${async () => {
-                              try {
-                                await navigator.clipboard.writeText(
-                                  bearerTokenValue,
-                                );
-                                showToast("Bearer token copied", "success");
-                              } catch {
-                                showToast(
-                                  "Could not copy bearer token",
-                                  "error",
-                                );
-                              }
-                            }}
-                          >
-                            Copy
-                          </button>
+                ${selectedWebhookManaged
+                  ? null
+                  : effectiveAuthMode === "headers"
+                    ? html`
+                        <div class="space-y-2">
+                          <p class="text-xs text-gray-500">Auth headers</p>
+                          <div class="flex items-center gap-2">
+                            <input
+                              type="text"
+                              readonly
+                              value=${authHeaderValue}
+                              class="h-8 flex-1 bg-black/30 border border-border rounded-lg px-3 text-xs text-gray-200 outline-none font-mono"
+                            />
+                            <button
+                              class="h-8 text-xs px-2.5 rounded-lg ac-btn-secondary shrink-0"
+                              onclick=${async () => {
+                                try {
+                                  await navigator.clipboard.writeText(
+                                    bearerTokenValue,
+                                  );
+                                  showToast("Bearer token copied", "success");
+                                } catch {
+                                  showToast(
+                                    "Could not copy bearer token",
+                                    "error",
+                                  );
+                                }
+                              }}
+                            >
+                              Copy
+                            </button>
+                          </div>
                         </div>
-                      </div>
-                    `
-                  : html`
-                      <p class="text-xs text-yellow-300">
-                        Always use auth headers when possible. Query string is
-                        less secure.
-                      </p>
-                    `}
+                      `
+                    : html`
+                        <p class="text-xs text-yellow-300">
+                          Always use auth headers when possible. Query string is
+                          less secure.
+                        </p>
+                      `}
               </div>
 
               <div
@@ -674,11 +689,16 @@ export const Webhooks = ({
               <div class="bg-black/20 border border-border rounded-lg p-3">
                 <div class="flex items-center gap-2 text-xs text-gray-300">
                   <span class="text-gray-500">Transform:</span>
-                  <code
-                    class="flex-1 min-w-0 truncate block"
-                    title=${selectedWebhook?.transformPath || "—"}
-                    >${selectedWebhook?.transformPath || "—"}</code
-                  >
+                  ${selectedWebhook?.transformPath
+                    ? html`<button
+                        type="button"
+                        class="ac-tip-link flex-1 min-w-0 truncate block text-left font-mono"
+                        title=${selectedWebhook.transformPath}
+                        onclick=${() => onOpenFile(selectedWebhook.transformPath)}
+                      >
+                        ${selectedWebhook.transformPath}
+                      </button>`
+                    : html`<code class="flex-1 min-w-0 truncate block">—</code>`}
                   <span
                     class=${`ml-auto inline-flex items-center gap-1 px-1.5 py-0.5 rounded border font-sans ${
                       selectedWebhook?.transformExists
@@ -700,23 +720,37 @@ export const Webhooks = ({
                 <p class="text-xs text-gray-600">
                   Created: ${formatDateTime(selectedWebhook?.createdAt)}
                 </p>
-                <${ActionButton}
-                  onClick=${() => {
-                    if (deleting) return;
-                    setDeleteTransformDir(true);
-                    setShowDeleteConfirm(true);
-                  }}
-                  disabled=${deleting}
-                  loading=${deleting}
-                  tone="danger"
-                  size="sm"
-                  idleLabel="Delete"
-                  loadingLabel="Deleting..."
-                  className="shrink-0 px-2.5 py-1"
-                />
+                ${selectedWebhookManaged
+                  ? null
+                  : html`<${ActionButton}
+                      onClick=${() => {
+                        if (deleting) return;
+                        setDeleteTransformDir(true);
+                        setShowDeleteConfirm(true);
+                      }}
+                      disabled=${deleting}
+                      loading=${deleting}
+                      tone="danger"
+                      size="sm"
+                      idleLabel="Delete"
+                      loadingLabel="Deleting..."
+                      className="shrink-0 px-2.5 py-1"
+                    />`}
               </div>
             </div>
 
+            ${selectedWebhookManaged
+              ? html`
+                  <div
+                    class="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3"
+                  >
+                    <p class="text-xs text-yellow-200">
+                      This webhook is managed by Gmail Watch setup and cannot
+                      be deleted or edited from this page.
+                    </p>
+                  </div>
+                `
+              : null}
             <div
               class="bg-surface border border-border rounded-xl p-4 space-y-3"
             >
@@ -749,10 +783,9 @@ export const Webhooks = ({
                   </p>`
                 : html`
                     <div class="ac-history-list">
-                      ${requests.map(
-                        (item) => {
-                          const statusTone = getRequestStatusTone(item.status);
-                          return html`
+                      ${requests.map((item) => {
+                        const statusTone = getRequestStatusTone(item.status);
+                        return html`
                           <details
                             class="ac-history-item"
                             open=${expandedRows.has(item.id)}
@@ -764,15 +797,21 @@ export const Webhooks = ({
                           >
                             <summary class="ac-history-summary">
                               <div class="ac-history-summary-row">
-                                <span class="inline-flex items-center gap-2 min-w-0">
-                                  <span class="ac-history-toggle shrink-0" aria-hidden="true"
+                                <span
+                                  class="inline-flex items-center gap-2 min-w-0"
+                                >
+                                  <span
+                                    class="ac-history-toggle shrink-0"
+                                    aria-hidden="true"
                                     >▸</span
                                   >
                                   <span class="truncate text-xs text-gray-300">
                                     ${formatLastReceived(item.createdAt)}
                                   </span>
                                 </span>
-                                <span class="inline-flex items-center gap-2 shrink-0">
+                                <span
+                                  class="inline-flex items-center gap-2 shrink-0"
+                                >
                                   <span class="text-xs text-gray-500"
                                     >${formatBytes(item.payloadSize)}</span
                                   >
@@ -827,7 +866,9 @@ ${jsonPretty(item.headers)}</pre
                                       >
 ${jsonPretty(item.payload)}</pre
                                       >
-                                      <div class="mt-2 flex justify-start gap-2">
+                                      <div
+                                        class="mt-2 flex justify-start gap-2"
+                                      >
                                         <button
                                           class="h-7 text-xs px-2.5 rounded-lg ac-btn-secondary"
                                           onclick=${() =>
@@ -882,8 +923,7 @@ ${jsonPretty(item.gatewayBody)}</pre
                               : null}
                           </details>
                         `;
-                        },
-                      )}
+                      })}
                     </div>
                   `}
             </div>
@@ -912,11 +952,12 @@ ${jsonPretty(item.gatewayBody)}</pre
                             <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="4"></td>
+                            <td class="h-2 p-0" colspan="5"></td>
                           </tr>
                           ${webhooks.map(
                             (item) => html`
@@ -955,6 +996,16 @@ ${jsonPretty(item.gatewayBody)}</pre
                                     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
+                                      >`
+                                    : html`<${Badge} tone="neutral">Custom</${Badge}>`}
+                                </td>
                               </tr>
                             `,
                           )}
@@ -976,7 +1027,9 @@ ${jsonPretty(item.gatewayBody)}</pre
         onClose=${() => setIsCreating(false)}
       />
       <${ConfirmDialog}
-        visible=${showDeleteConfirm && !!selectedHookName}
+        visible=${showDeleteConfirm &&
+        !!selectedHookName &&
+        !selectedWebhookManaged}
         title="Delete webhook?"
         message=${`This removes "/hooks/${selectedHookName}" from openclaw.json.`}
         details=${html`