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

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>
+  `;
+};

package/lib/public/js/components/webhooks/request-history/index.js

@@ -0,0 +1,241 @@
+import { h } from "https://esm.sh/preact";
+import { useMemo } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { sendAgentMessage } from "../../../lib/api.js";
+import { ActionButton } from "../../action-button.js";
+import { AgentSendModal } from "../../agent-send-modal.js";
+import { showToast } from "../../toast.js";
+import {
+  buildWebhookDebugMessage,
+  formatBytes,
+  formatLastReceived,
+  getRequestStatusTone,
+  jsonPretty,
+  kStatusFilters,
+} from "../helpers.js";
+import { useRequestHistory } from "./use-request-history.js";
+
+const html = htm.bind(h);
+
+export const RequestHistory = ({
+  selectedHookName = "",
+  effectiveAuthMode = "headers",
+  webhookUrl = "",
+  webhookUrlWithQueryToken = "",
+  bearerTokenValue = "",
+  selectedWebhook = null,
+}) => {
+  const { state, actions } = useRequestHistory({
+    selectedHookName,
+    effectiveAuthMode,
+    webhookUrl,
+    webhookUrlWithQueryToken,
+    bearerTokenValue,
+  });
+
+  const {
+    requests,
+    statusFilter,
+    expandedRows,
+    replayingRequestId,
+    debugLoadingRequestId,
+    debugRequest,
+  } = state;
+
+  const debugAgentMessage = useMemo(
+    () =>
+      buildWebhookDebugMessage({
+        hookName: selectedHookName,
+        webhook: selectedWebhook,
+        request: debugRequest,
+      }),
+    [debugRequest, selectedHookName, selectedWebhook],
+  );
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+      <div class="flex items-center justify-between gap-3">
+        <h3 class="card-label">Request history</h3>
+        <div class="flex items-center gap-2">
+          ${kStatusFilters.map(
+            (filter) => html`
+              <button
+                class="text-xs px-2 py-1 rounded border ${statusFilter === filter
+                  ? "border-cyan-400 text-cyan-200 bg-cyan-400/10"
+                  : "border-border text-gray-400 hover:text-gray-200"}"
+                onclick=${() => actions.handleSetStatusFilter(filter)}
+              >
+                ${filter}
+              </button>
+            `,
+          )}
+        </div>
+      </div>
+
+      ${requests.length === 0
+        ? html`<p class="text-sm text-gray-500">No requests logged yet.</p>`
+        : html`
+            <div class="ac-history-list">
+              ${requests.map((item) => {
+                const statusTone = getRequestStatusTone(item.status);
+                return html`
+                  <details
+                    class="ac-history-item"
+                    open=${expandedRows.has(item.id)}
+                    ontoggle=${(e) =>
+                      actions.handleRequestRowToggle(item.id, !!e.currentTarget?.open)}
+                  >
+                    <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
+                          >
+                          <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="text-xs text-gray-500"
+                            >${formatBytes(item.payloadSize)}</span
+                          >
+                          <span class=${`text-xs font-medium ${statusTone.textClass}`}
+                            >${item.gatewayStatus || "n/a"}</span
+                          >
+                          <span class="inline-flex items-center">
+                            <span
+                              class=${`h-2.5 w-2.5 rounded-full ${statusTone.dotClass}`}
+                              title=${item.status || "unknown"}
+                              aria-label=${item.status || "unknown"}
+                            ></span>
+                          </span>
+                        </span>
+                      </div>
+                    </summary>
+                    ${expandedRows.has(item.id)
+                      ? html`
+                          <div class="ac-history-body space-y-3">
+                            <div>
+                              <p class="text-[11px] text-gray-500 mb-1">Headers</p>
+                              <pre
+                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                              >
+${jsonPretty(item.headers)}</pre
+                              >
+                              <div class="mt-2 flex justify-start gap-2">
+                                <button
+                                  class="h-7 text-xs px-2.5 rounded-lg ac-btn-secondary"
+                                  onclick=${() =>
+                                    actions.handleCopyRequestField(
+                                      jsonPretty(item.headers),
+                                      "Headers",
+                                    )}
+                                >
+                                  Copy
+                                </button>
+                              </div>
+                            </div>
+                            <div>
+                              <p class="text-[11px] text-gray-500 mb-1">
+                                Payload ${item.payloadTruncated ? "(truncated)" : ""}
+                              </p>
+                              <pre
+                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                              >
+${jsonPretty(item.payload)}</pre
+                              >
+                              <div class="mt-2 flex justify-start gap-2">
+                                <button
+                                  class="h-7 text-xs px-2.5 rounded-lg ac-btn-secondary"
+                                  onclick=${() =>
+                                    actions.handleCopyRequestField(
+                                      item.payload,
+                                      "Payload",
+                                    )}
+                                >
+                                  Copy
+                                </button>
+                                <button
+                                  class="h-7 text-xs px-2.5 rounded-lg ac-btn-secondary disabled:opacity-60"
+                                  onclick=${() => actions.handleReplayRequest(item)}
+                                  disabled=${item.payloadTruncated ||
+                                  replayingRequestId === item.id}
+                                  title=${item.payloadTruncated
+                                    ? "Cannot replay truncated payload"
+                                    : "Replay this payload"}
+                                >
+                                  ${replayingRequestId === item.id
+                                    ? "Replaying..."
+                                    : "Replay"}
+                                </button>
+                              </div>
+                            </div>
+                            <div>
+                              <p class="text-[11px] text-gray-500 mb-1">
+                                Gateway response (${item.gatewayStatus || "n/a"})
+                              </p>
+                              <pre
+                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                              >
+${jsonPretty(item.gatewayBody)}</pre
+                              >
+                              <div class="mt-2 flex justify-start gap-2">
+                                <button
+                                  class="h-7 text-xs px-2.5 rounded-lg ac-btn-secondary"
+                                  onclick=${() =>
+                                    actions.handleCopyRequestField(
+                                      item.gatewayBody,
+                                      "Gateway response",
+                                    )}
+                                >
+                                  Copy
+                                </button>
+                                ${item.status === "error"
+                                  ? html`<${ActionButton}
+                                      onClick=${() =>
+                                        actions.handleAskAgentToDebug(item)}
+                                      loading=${debugLoadingRequestId === item.id}
+                                      tone="primary"
+                                      size="sm"
+                                      idleLabel="Ask agent to debug"
+                                      loadingLabel="Loading..."
+                                      className="h-7 px-2.5"
+                                    />`
+                                  : null}
+                              </div>
+                            </div>
+                          </div>
+                        `
+                      : null}
+                  </details>
+                `;
+              })}
+            </div>
+          `}
+      <${AgentSendModal}
+        visible=${!!debugRequest}
+        title="Ask agent to debug"
+        messageLabel="Debug request"
+        messageRows=${12}
+        initialMessage=${debugAgentMessage}
+        resetKey=${String(debugRequest?.id || "")}
+        submitLabel="Send debug request"
+        loadingLabel="Sending..."
+        onClose=${() => actions.setDebugRequest(null)}
+        onSubmit=${async ({ selectedSessionKey, message }) => {
+          try {
+            await sendAgentMessage({
+              message,
+              sessionKey: selectedSessionKey,
+            });
+            showToast("Debug request sent to agent", "success");
+            return true;
+          } catch (err) {
+            showToast(err.message || "Could not send debug request", "error");
+            return false;
+          }
+        }}
+      />
+    </div>
+  `;
+};