@chrysb/alphaclaw 0.2.2 → 0.3.0

package/lib/public/js/components/telegram-workspace.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { Badge } from "./badge.js";
 import { showToast } from "./toast.js";
+import { ActionButton } from "./action-button.js";
 
 const html = htm.bind(h);
 
@@ -14,11 +15,6 @@ const authFetch = async (url, opts = {}) => {
   }
   return res;
 };
-const encodePayloadQuery = (payload) =>
-  encodeURIComponent(
-    JSON.stringify(payload && typeof payload === "object" ? payload : {}),
-  );
-
 const api = {
   verifyBot: async () => {
     const res = await authFetch("/api/telegram/bot");
@@ -35,15 +31,11 @@ const api = {
     return res.json();
   },
   verifyGroup: async (groupId) => {
-    const groupIdParam = encodeURIComponent(String(groupId || "").trim());
-    const res = await authFetch(
-      `/api/telegram/groups/verify?groupId=${groupIdParam}`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ groupId }),
-      },
-    );
+    const res = await authFetch("/api/telegram/groups/verify", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ groupId }),
+    });
     return res.json();
   },
   listTopics: async (groupId) => {
@@ -53,9 +45,8 @@ const api = {
     return res.json();
   },
   createTopicsBulk: async (groupId, topics) => {
-    const queryPayload = encodePayloadQuery({ topics });
     const res = await authFetch(
-      `/api/telegram/groups/${encodeURIComponent(groupId)}/topics/bulk?payload=${queryPayload}`,
+      `/api/telegram/groups/${encodeURIComponent(groupId)}/topics/bulk`,
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -72,9 +63,8 @@ const api = {
     return res.json();
   },
   updateTopic: async (groupId, topicId, payload) => {
-    const queryPayload = encodePayloadQuery(payload);
     const res = await authFetch(
-      `/api/telegram/groups/${encodeURIComponent(groupId)}/topics/${encodeURIComponent(topicId)}?payload=${queryPayload}`,
+      `/api/telegram/groups/${encodeURIComponent(groupId)}/topics/${encodeURIComponent(topicId)}`,
       {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -84,9 +74,8 @@ const api = {
     return res.json();
   },
   configureGroup: async (groupId, payload) => {
-    const queryPayload = encodePayloadQuery(payload);
     const res = await authFetch(
-      `/api/telegram/groups/${encodeURIComponent(groupId)}/configure?payload=${queryPayload}`,
+      `/api/telegram/groups/${encodeURIComponent(groupId)}/configure`,
       {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -427,16 +416,16 @@ const AddBotStep = ({
           placeholder="-100XXXXXXXXXX"
           class="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500"
         />
-        <button
-          onclick=${verify}
-          disabled=${loading || !input.trim()}
-          class="text-sm px-4 py-2 rounded-lg border border-border transition-colors ${loading ||
-          !input.trim()
-            ? "text-gray-600 cursor-not-allowed"
-            : "text-gray-300 hover:text-gray-100 hover:border-gray-500"}"
-        >
-          ${loading ? "Verifying..." : "Verify"}
-        </button>
+        <${ActionButton}
+          onClick=${verify}
+          disabled=${!input.trim() || loading}
+          loading=${loading}
+          tone="secondary"
+          size="md"
+          idleLabel="Verify"
+          loadingMode="inline"
+          className="rounded-lg"
+        />
       </div>
 
       ${verifyGroupError &&
@@ -652,16 +641,16 @@ const TopicsStep = ({ groupId, topics, setTopics, onNext, onBack }) => {
             class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500 resize-y"
           />
           <div class="flex justify-end">
-            <button
-              onclick=${createSingle}
+            <${ActionButton}
+              onClick=${createSingle}
               disabled=${creating || !newTopicName.trim()}
-              class="text-sm min-w-[88px] px-5 py-2 rounded-lg border border-border transition-colors ${creating ||
-              !newTopicName.trim()
-                ? "text-gray-600 cursor-not-allowed"
-                : "text-gray-300 hover:text-gray-100 hover:border-gray-500"}"
-            >
-              Add
-            </button>
+              loading=${creating}
+              tone="secondary"
+              size="lg"
+              idleLabel="Add"
+              loadingMode="inline"
+              className="min-w-[88px]"
+            />
           </div>
         </div>
       </div>
@@ -932,7 +921,7 @@ const ManageTelegramWorkspace = ({
                                         String(id)}
                                         class="text-xs px-2 py-1 rounded transition-all ac-btn-cyan ${renamingTopicId ===
                                         String(id)
-                                          ? "opacity-60 cursor-not-allowed"
+                                          ? "opacity-50 cursor-not-allowed"
                                           : ""}"
                                       >
                                         Save
@@ -1045,16 +1034,15 @@ const ManageTelegramWorkspace = ({
               class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-gray-500 resize-y"
             />
             <div class="flex justify-end">
-              <button
-                onclick=${createSingle}
+              <${ActionButton}
+                onClick=${createSingle}
                 disabled=${creating || !newTopicName.trim()}
-                class="text-sm px-3 py-2 rounded-lg border border-border transition-colors ${creating ||
-                !newTopicName.trim()
-                  ? "text-gray-600 cursor-not-allowed"
-                  : "text-gray-300 hover:text-gray-100 hover:border-gray-500"}"
-              >
-                ${creating ? "Creating..." : "Add topic"}
-              </button>
+                loading=${creating}
+                tone="secondary"
+                size="lg"
+                idleLabel="Add topic"
+                loadingLabel="Creating..."
+              />
             </div>
           </div>
         </div>

package/lib/public/js/components/toast.js

@@ -6,11 +6,38 @@ const html = htm.bind(h);
 let toastId = 0;
 let addToastFn = null;
 
-export function showToast(text, color) {
-  if (addToastFn) addToastFn({ id: ++toastId, text, color });
+const kToastTypeByAlias = {
+  success: "success",
+  error: "error",
+  warning: "warning",
+  info: "info",
+  green: "success",
+  red: "error",
+  yellow: "warning",
+  blue: "info",
+};
+
+const kToastClassByType = {
+  success: "bg-green-950/95 border border-green-700/80 text-green-200",
+  error: "bg-red-950/95 border border-red-700/80 text-red-200",
+  warning: "bg-yellow-950/95 border border-yellow-700/80 text-yellow-100",
+  info: "bg-cyan-950/95 border border-cyan-700/80 text-cyan-100",
+};
+
+const normalizeToastType = (type) => {
+  const normalized = String(type || "")
+    .trim()
+    .toLowerCase();
+  return kToastTypeByAlias[normalized] || "info";
+};
+
+export function showToast(text, type = "info") {
+  if (addToastFn) addToastFn({ id: ++toastId, text, type: normalizeToastType(type) });
 }
 
-export function ToastContainer() {
+export function ToastContainer({
+  className = "fixed bottom-4 right-4 z-50 space-y-2",
+}) {
   const [toasts, setToasts] = useState([]);
 
   useEffect(() => {
@@ -21,9 +48,11 @@ export function ToastContainer() {
     return () => { addToastFn = null; };
   }, []);
 
-  return html`<div class="fixed top-4 right-4 z-50 space-y-2">
+  if (toasts.length === 0) return null;
+
+  return html`<div class=${className}>
     ${toasts.map(t => html`
-      <div key=${t.id} class="bg-${t.color}-500/20 border border-${t.color}-500/30 text-${t.color}-400 px-4 py-2 rounded-lg text-sm">
+      <div key=${t.id} class="${kToastClassByType[normalizeToastType(t.type)]} px-4 py-2 rounded-lg text-sm">
         ${t.text}
       </div>
     `)}

package/lib/public/js/components/toggle-switch.js

@@ -0,0 +1,25 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const ToggleSwitch = ({
+  checked = false,
+  disabled = false,
+  onChange = () => {},
+  label = "Enabled",
+}) => html`
+  <label class="ac-toggle">
+    <input
+      class="ac-toggle-input"
+      type="checkbox"
+      checked=${!!checked}
+      disabled=${!!disabled}
+      onchange=${(e) => onChange(!!e.target.checked)}
+    />
+    <span class="ac-toggle-track" aria-hidden="true">
+      <span class="ac-toggle-thumb"></span>
+    </span>
+    ${label ? html`<span class="ac-toggle-label">${label}</span>` : null}
+  </label>
+`;

package/lib/public/js/components/update-action-button.js

@@ -1,5 +1,6 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { ActionButton } from "./action-button.js";
 
 const html = htm.bind(h);
 
@@ -11,56 +12,15 @@ export const UpdateActionButton = ({
   idleLabel = "Check updates",
   loadingLabel = "Checking...",
   className = "",
-}) => {
-  const isInteractive = !loading && !disabled;
-  const toneClass = warning
-    ? isInteractive
-      ? "border-yellow-500/35 text-yellow-400 bg-yellow-500/10 hover:border-yellow-400/60 hover:text-yellow-300 hover:bg-yellow-500/15"
-      : "border-yellow-500/35 text-yellow-400 bg-yellow-500/10"
-    : isInteractive
-      ? "border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
-      : "border-border text-gray-500";
-  const loadingClass = loading
-    ? `cursor-not-allowed ${warning
-      ? "opacity-90 animate-pulse shadow-[0_0_0_1px_rgba(234,179,8,0.22),0_0_18px_rgba(234,179,8,0.12)]"
-      : "opacity-80"}`
-    : "";
-
-  return html`
-    <button
-      onclick=${onClick}
-      disabled=${disabled || loading}
-      class="inline-flex items-center justify-center h-7 text-xs leading-none px-2.5 py-1 rounded-lg border transition-colors whitespace-nowrap ${toneClass} ${loadingClass} ${className}"
-    >
-      ${loading
-        ? html`
-            <span class="inline-flex items-center gap-1.5 leading-none">
-              <svg
-                class="animate-spin"
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                aria-hidden="true"
-              >
-                <circle
-                  class="opacity-30"
-                  cx="12"
-                  cy="12"
-                  r="9"
-                  stroke="currentColor"
-                  stroke-width="3"
-                />
-                <path
-                  class="opacity-90"
-                  fill="currentColor"
-                  d="M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3z"
-                />
-              </svg>
-              ${loadingLabel}
-            </span>
-          `
-        : idleLabel}
-    </button>
-  `;
-};
+}) => html`
+  <${ActionButton}
+    onClick=${onClick}
+    disabled=${disabled}
+    loading=${loading}
+    tone=${warning ? "warning" : "neutral"}
+    size="sm"
+    idleLabel=${idleLabel}
+    loadingLabel=${loadingLabel}
+    className=${className}
+  />
+`;

package/lib/public/js/components/watchdog-tab.js

@@ -0,0 +1,312 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import {
+  fetchWatchdogEvents,
+  fetchWatchdogLogs,
+  fetchWatchdogSettings,
+  updateWatchdogSettings,
+  triggerWatchdogRepair,
+} from "../lib/api.js";
+import { usePolling } from "../hooks/usePolling.js";
+import { Gateway } from "./gateway.js";
+import { InfoTooltip } from "./info-tooltip.js";
+import { ToggleSwitch } from "./toggle-switch.js";
+import { showToast } from "./toast.js";
+
+const html = htm.bind(h);
+
+const getIncidentStatusTone = (event) => {
+  const eventType = String(event?.eventType || "").trim().toLowerCase();
+  const status = String(event?.status || "").trim().toLowerCase();
+  if (status === "failed") {
+    return {
+      dotClass: "bg-red-500/90",
+      label: "Failed",
+    };
+  }
+  if (status === "ok" && eventType === "health_check") {
+    return {
+      dotClass: "bg-green-500/90",
+      label: "Healthy",
+    };
+  }
+  if (status === "warn" || status === "warning") {
+    return {
+      dotClass: "bg-yellow-400/90",
+      label: "Warning",
+    };
+  }
+  return {
+    dotClass: "bg-gray-500/70",
+    label: "Unknown",
+  };
+};
+
+export const WatchdogTab = ({
+  gatewayStatus = null,
+  openclawVersion = null,
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  restartingGateway = false,
+  onRestartGateway,
+  restartSignal = 0,
+}) => {
+  const eventsPoll = usePolling(() => fetchWatchdogEvents(20), 15000);
+  const [settings, setSettings] = useState({
+    autoRepair: false,
+    notificationsEnabled: true,
+  });
+  const [savingSettings, setSavingSettings] = useState(false);
+  const [repairing, setRepairing] = useState(false);
+  const [logs, setLogs] = useState("");
+  const [loadingLogs, setLoadingLogs] = useState(true);
+  const [stickToBottom, setStickToBottom] = useState(true);
+  const logsRef = useRef(null);
+
+  const currentWatchdogStatus = watchdogStatus || {};
+  const events = eventsPoll.data?.events || [];
+  const isRepairInProgress = repairing || !!currentWatchdogStatus?.operationInProgress;
+
+  useEffect(() => {
+    let active = true;
+    const loadSettings = async () => {
+      try {
+        const data = await fetchWatchdogSettings();
+        if (!active) return;
+        setSettings(
+          data.settings || {
+            autoRepair: false,
+            notificationsEnabled: true,
+          },
+        );
+      } catch (err) {
+        if (!active) return;
+        showToast(err.message || "Could not load watchdog settings", "error");
+      }
+    };
+    loadSettings();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+    let timer = null;
+    const pollLogs = async () => {
+      try {
+        const text = await fetchWatchdogLogs(65536);
+        if (!active) return;
+        setLogs(text || "");
+        setLoadingLogs(false);
+      } catch (err) {
+        if (!active) return;
+        setLoadingLogs(false);
+      }
+      if (!active) return;
+      timer = setTimeout(pollLogs, 3000);
+    };
+    pollLogs();
+    return () => {
+      active = false;
+      if (timer) clearTimeout(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const el = logsRef.current;
+    if (!el || !stickToBottom) return;
+    el.scrollTop = el.scrollHeight;
+  }, [logs, stickToBottom]);
+
+  useEffect(() => {
+    if (!restartSignal) return;
+    onRefreshStatuses();
+    eventsPoll.refresh();
+    const t1 = setTimeout(() => {
+      onRefreshStatuses();
+      eventsPoll.refresh();
+    }, 1200);
+    const t2 = setTimeout(() => {
+      onRefreshStatuses();
+      eventsPoll.refresh();
+    }, 3500);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [restartSignal, onRefreshStatuses, eventsPoll.refresh]);
+
+  const onToggleAutoRepair = async (nextValue) => {
+    if (savingSettings) return;
+    setSavingSettings(true);
+    try {
+      const data = await updateWatchdogSettings({ autoRepair: !!nextValue });
+      setSettings(
+        data.settings || {
+          ...settings,
+          autoRepair: !!nextValue,
+        },
+      );
+      onRefreshStatuses();
+      showToast(`Auto-repair ${nextValue ? "enabled" : "disabled"}`, "success");
+    } catch (err) {
+      showToast(err.message || "Could not update auto-repair", "error");
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
+  const onToggleNotifications = async (nextValue) => {
+    if (savingSettings) return;
+    setSavingSettings(true);
+    try {
+      const data = await updateWatchdogSettings({
+        notificationsEnabled: !!nextValue,
+      });
+      setSettings(
+        data.settings || {
+          ...settings,
+          notificationsEnabled: !!nextValue,
+        },
+      );
+      onRefreshStatuses();
+      showToast(`Notifications ${nextValue ? "enabled" : "disabled"}`, "success");
+    } catch (err) {
+      showToast(err.message || "Could not update notifications", "error");
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
+  const onRepair = async () => {
+    if (isRepairInProgress) return;
+    setRepairing(true);
+    try {
+      const data = await triggerWatchdogRepair();
+      if (!data.ok) throw new Error(data.error || "Repair failed");
+      showToast("Repair triggered", "success");
+      setTimeout(() => {
+        onRefreshStatuses();
+        eventsPoll.refresh();
+      }, 800);
+    } catch (err) {
+      showToast(err.message || "Could not run repair", "error");
+    } finally {
+      setRepairing(false);
+    }
+  };
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway}
+        status=${gatewayStatus}
+        openclawVersion=${openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${currentWatchdogStatus}
+        onRepair=${onRepair}
+        repairing=${isRepairInProgress}
+      />
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between gap-3">
+          <div class="inline-flex items-center gap-2 text-xs text-gray-400">
+            <span>Auto-repair</span>
+            <${InfoTooltip}
+              text="Automatically runs OpenClaw doctor repair when watchdog detects gateway health failures or crash loops."
+            />
+          </div>
+          <${ToggleSwitch}
+            checked=${!!settings.autoRepair}
+            disabled=${savingSettings}
+            onChange=${onToggleAutoRepair}
+            label=""
+          />
+        </div>
+        <div class="flex items-center justify-between gap-3 mt-3">
+          <div class="inline-flex items-center gap-2 text-xs text-gray-400">
+            <span>Notifications</span>
+            <${InfoTooltip}
+              text="Sends Telegram notices for watchdog alerts and auto-repair outcomes."
+            />
+          </div>
+          <${ToggleSwitch}
+            checked=${!!settings.notificationsEnabled}
+            disabled=${savingSettings}
+            onChange=${onToggleNotifications}
+            label=""
+          />
+        </div>
+      </div>
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between gap-2 mb-3">
+          <h2 class="font-semibold text-sm">Logs</h2>
+          <label class="inline-flex items-center gap-2 text-xs text-gray-400">
+            <input
+              type="checkbox"
+              checked=${stickToBottom}
+              onchange=${(e) => setStickToBottom(!!e.target.checked)}
+            />
+            Stick to bottom
+          </label>
+        </div>
+        <pre
+          ref=${logsRef}
+          class="bg-black/40 border border-border rounded-lg p-3 h-72 overflow-auto text-xs text-gray-300 whitespace-pre-wrap break-words"
+        >${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre>
+      </div>
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between gap-2 mb-3">
+          <h2 class="font-semibold text-sm">Recent incidents</h2>
+          <button
+            class="text-xs text-gray-400 hover:text-gray-200"
+            onclick=${() => eventsPoll.refresh()}
+          >
+            Refresh
+          </button>
+        </div>
+        <div class="space-y-2">
+          ${events.length === 0 &&
+          html`<p class="text-xs text-gray-500">No incidents recorded.</p>`}
+          ${events.map(
+            (event) => {
+              const tone = getIncidentStatusTone(event);
+              return html`
+                <details class="border border-border rounded-lg p-2">
+                  <summary class="cursor-pointer text-xs text-gray-300 list-none [&::-webkit-details-marker]:hidden">
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="inline-flex items-center gap-2 min-w-0">
+                        <span class="text-gray-500 shrink-0" aria-hidden="true">▸</span>
+                        <span class="truncate">
+                          ${event.createdAt || ""} · ${event.eventType || "event"} · ${event.status ||
+                          "unknown"}
+                        </span>
+                      </span>
+                      <span
+                        class=${`h-2.5 w-2.5 shrink-0 rounded-full ${tone.dotClass}`}
+                        title=${tone.label}
+                        aria-label=${tone.label}
+                      ></span>
+                    </div>
+                  </summary>
+                  <div class="mt-2 text-xs text-gray-400">
+                    <div>Source: ${event.source || "unknown"}</div>
+                    <pre class="mt-2 bg-black/30 rounded p-2 whitespace-pre-wrap break-words"
+                      >${typeof event.details === "string"
+                        ? event.details
+                        : JSON.stringify(event.details || {}, null, 2)}</pre
+                    >
+                  </div>
+                </details>
+              `;
+            },
+          )}
+        </div>
+      </div>
+    </div>
+  `;
+};