@chrysb/alphaclaw 0.2.3 → 0.3.0

package/lib/public/js/app.js

@@ -1,6 +1,7 @@
 import { h, render } from "https://esm.sh/preact";
 import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
+import { Router, Route, Switch, useLocation } from "https://esm.sh/wouter-preact";
 import {
   fetchStatus,
   fetchPairings,
@@ -16,6 +17,10 @@ import {
   updateSyncCron,
   fetchAlphaclawVersion,
   updateAlphaclaw,
+  fetchRestartStatus,
+  restartGateway,
+  fetchWatchdogStatus,
+  triggerWatchdogRepair,
 } from "./lib/api.js";
 import { usePolling } from "./hooks/usePolling.js";
 import { Gateway } from "./components/gateway.js";
@@ -27,21 +32,69 @@ import { Features } from "./components/features.js";
 import { Providers } from "./components/providers.js";
 import { Welcome } from "./components/welcome.js";
 import { Envars } from "./components/envars.js";
+import { Webhooks } from "./components/webhooks.js";
 import { ToastContainer, showToast } from "./components/toast.js";
 import { TelegramWorkspace } from "./components/telegram-workspace.js";
 import { ChevronDownIcon } from "./components/icons.js";
 import { UpdateActionButton } from "./components/update-action-button.js";
+import { GlobalRestartBanner } from "./components/global-restart-banner.js";
+import { LoadingSpinner } from "./components/loading-spinner.js";
+import { WatchdogTab } from "./components/watchdog-tab.js";
 const html = htm.bind(h);
-const kUiTabs = ["general", "providers", "envars"];
-const kSubScreens = ["telegram"];
 const kDefaultUiTab = "general";
 
-const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
+const getHashPath = () => {
+  const hash = window.location.hash.replace(/^#/, "");
+  if (!hash) return `/${kDefaultUiTab}`;
+  return hash.startsWith("/") ? hash : `/${hash}`;
+};
+
+const useHashLocation = () => {
+  const [location, setLocationState] = useState(getHashPath);
+
+  useEffect(() => {
+    const onHashChange = () => setLocationState(getHashPath());
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
+  const setLocation = useCallback((to) => {
+    const normalized = to.startsWith("/") ? to : `/${to}`;
+    const nextHash = `#${normalized}`;
+    if (window.location.hash !== nextHash) {
+      window.location.hash = normalized;
+      return;
+    }
+    setLocationState(normalized);
+  }, []);
+
+  return [location, setLocation];
+};
+
+const RouteRedirect = ({ to }) => {
+  const [, setLocation] = useLocation();
+  useEffect(() => {
+    setLocation(to);
+  }, [to, setLocation]);
+  return null;
+};
+
+const GeneralTab = ({
+  statusData = null,
+  watchdogData = null,
+  onRefreshStatuses = () => {},
+  onSwitchTab,
+  onNavigate,
+  isActive,
+  restartingGateway,
+  onRestartGateway,
+  restartSignal = 0,
+}) => {
   const [googleKey, setGoogleKey] = useState(0);
   const [dashboardLoading, setDashboardLoading] = useState(false);
-
-  const statusPoll = usePolling(fetchStatus, 15000);
-  const status = statusPoll.data;
+  const [repairingWatchdog, setRepairingWatchdog] = useState(false);
+  const status = statusData;
+  const watchdogStatus = watchdogData;
   const gatewayStatus = status?.gateway ?? null;
   const channels = status?.channels ?? null;
   const repo = status?.repo || null;
@@ -67,18 +120,10 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
   );
   const pending = pairingsPoll.data || [];
 
-  // Poll status faster when gateway isn't running yet
-  useEffect(() => {
-    if (!gatewayStatus || gatewayStatus !== "running") {
-      const id = setInterval(statusPoll.refresh, 3000);
-      return () => clearInterval(id);
-    }
-  }, [gatewayStatus, statusPoll.refresh]);
-
   const refreshAfterAction = () => {
     setTimeout(pairingsPoll.refresh, 500);
     setTimeout(pairingsPoll.refresh, 2000);
-    setTimeout(statusPoll.refresh, 3000);
+    setTimeout(onRefreshStatuses, 3000);
   };
 
   const handleApprove = async (id, channel) => {
@@ -114,7 +159,7 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
   };
 
   const fullRefresh = () => {
-    statusPoll.refresh();
+    onRefreshStatuses();
     pairingsPoll.refresh();
     devicePoll.refresh();
     setGoogleKey((k) => k + 1);
@@ -125,6 +170,33 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
     fullRefresh();
   }, [isActive]);
 
+  useEffect(() => {
+    if (!restartSignal || !isActive) return;
+    onRefreshStatuses();
+    pairingsPoll.refresh();
+    devicePoll.refresh();
+    const t1 = setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+      devicePoll.refresh();
+    }, 1200);
+    const t2 = setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+      devicePoll.refresh();
+    }, 3500);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [
+    restartSignal,
+    isActive,
+    onRefreshStatuses,
+    pairingsPoll.refresh,
+    devicePoll.refresh,
+  ]);
+
   useEffect(() => {
     if (!syncCron) return;
     setSyncCronEnabled(syncCron.enabled !== false);
@@ -147,7 +219,7 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
       if (!data.ok)
         throw new Error(data.error || "Could not save sync settings");
       showToast("Sync schedule updated", "success");
-      statusPoll.refresh();
+      onRefreshStatuses();
     } catch (err) {
       showToast(err.message || "Could not save sync settings", "error");
     }
@@ -155,10 +227,35 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
   };
 
   const syncCronStatusText = syncCronEnabled ? "Enabled" : "Disabled";
+  const handleWatchdogRepair = async () => {
+    if (repairingWatchdog) return;
+    setRepairingWatchdog(true);
+    try {
+      const data = await triggerWatchdogRepair();
+      if (!data.ok) throw new Error(data.error || "Repair failed");
+      showToast("Repair triggered", "success");
+      setTimeout(() => {
+        onRefreshStatuses();
+      }, 800);
+    } catch (err) {
+      showToast(err.message || "Could not run repair", "error");
+    } finally {
+      setRepairingWatchdog(false);
+    }
+  };
 
   return html`
     <div class="space-y-4">
-      <${Gateway} status=${gatewayStatus} openclawVersion=${openclawVersion} />
+      <${Gateway}
+        status=${gatewayStatus}
+        openclawVersion=${openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${watchdogStatus}
+        onOpenWatchdog=${() => onSwitchTab("watchdog")}
+        onRepair=${handleWatchdogRepair}
+        repairing=${repairingWatchdog}
+      />
       <${Channels} channels=${channels} onSwitchTab=${onSwitchTab} onNavigate=${onNavigate} />
       <${Pairings}
         pending=${pending}
@@ -279,17 +376,9 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
   `;
 };
 
-function App() {
+const App = () => {
   const [onboarded, setOnboarded] = useState(null);
-  const [tab, setTab] = useState(() => {
-    const hash = window.location.hash.replace("#", "");
-    if (kSubScreens.includes(hash)) return kDefaultUiTab;
-    return kUiTabs.includes(hash) ? hash : kDefaultUiTab;
-  });
-  const [subScreen, setSubScreen] = useState(() => {
-    const hash = window.location.hash.replace("#", "");
-    return kSubScreens.includes(hash) ? hash : null;
-  });
+  const [location, setLocation] = useLocation();
   const [acVersion, setAcVersion] = useState(null);
   const [acLatest, setAcLatest] = useState(null);
   const [acHasUpdate, setAcHasUpdate] = useState(false);
@@ -299,7 +388,23 @@ function App() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
+  const [restartRequired, setRestartRequired] = useState(false);
+  const [restartingGateway, setRestartingGateway] = useState(false);
+  const [gatewayRestartSignal, setGatewayRestartSignal] = useState(0);
+  const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
   const menuRef = useRef(null);
+  const sharedStatusPoll = usePolling(fetchStatus, statusPollCadenceMs, {
+    enabled: onboarded === true,
+  });
+  const sharedWatchdogPoll = usePolling(fetchWatchdogStatus, statusPollCadenceMs, {
+    enabled: onboarded === true,
+  });
+  const sharedStatus = sharedStatusPoll.data || null;
+  const sharedWatchdogStatus = sharedWatchdogPoll.data?.status || null;
+  const refreshSharedStatuses = useCallback(() => {
+    sharedStatusPoll.refresh();
+    sharedWatchdogPoll.refresh();
+  }, [sharedStatusPoll.refresh, sharedWatchdogPoll.refresh]);
 
   const closeMenu = useCallback((e) => {
     if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -323,10 +428,6 @@ function App() {
       .catch(() => {});
   }, []);
 
-  useEffect(() => {
-    history.replaceState(null, "", `#${subScreen || tab}`);
-  }, [tab, subScreen]);
-
   useEffect(() => {
     if (!mobileSidebarOpen) return;
     const previousOverflow = document.body.style.overflow;
@@ -356,6 +457,72 @@ function App() {
     };
   }, [onboarded]);
 
+  const refreshRestartStatus = useCallback(async () => {
+    if (!onboarded) return;
+    try {
+      const data = await fetchRestartStatus();
+      setRestartRequired(!!data.restartRequired);
+      setRestartingGateway(!!data.restartInProgress);
+    } catch {}
+  }, [onboarded]);
+
+  useEffect(() => {
+    if (!onboarded) return;
+    refreshRestartStatus();
+  }, [onboarded, refreshRestartStatus]);
+
+  useEffect(() => {
+    if (onboarded !== true) return;
+    const inStatusView =
+      location.startsWith("/general") || location.startsWith("/watchdog");
+    const gatewayStatus = sharedStatus?.gateway ?? null;
+    const watchdogHealth = String(sharedWatchdogStatus?.health || "").toLowerCase();
+    const watchdogLifecycle = String(sharedWatchdogStatus?.lifecycle || "").toLowerCase();
+    const shouldFastPollWatchdog =
+      watchdogHealth === "unknown" ||
+      watchdogLifecycle === "restarting" ||
+      watchdogLifecycle === "stopped" ||
+      !!sharedWatchdogStatus?.operationInProgress;
+    const shouldFastPollGateway = !gatewayStatus || gatewayStatus !== "running";
+    const nextCadenceMs =
+      inStatusView && (shouldFastPollWatchdog || shouldFastPollGateway) ? 2000 : 15000;
+    setStatusPollCadenceMs((currentCadenceMs) =>
+      currentCadenceMs === nextCadenceMs ? currentCadenceMs : nextCadenceMs,
+    );
+  }, [
+    onboarded,
+    location,
+    sharedStatus?.gateway,
+    sharedWatchdogStatus?.health,
+    sharedWatchdogStatus?.lifecycle,
+    sharedWatchdogStatus?.operationInProgress,
+  ]);
+
+  useEffect(() => {
+    if (!onboarded || (!restartRequired && !restartingGateway)) return;
+    const id = setInterval(refreshRestartStatus, 2000);
+    return () => clearInterval(id);
+  }, [onboarded, restartRequired, restartingGateway, refreshRestartStatus]);
+
+  const handleGatewayRestart = useCallback(async () => {
+    if (restartingGateway) return;
+    setRestartingGateway(true);
+    try {
+      const data = await restartGateway();
+      if (!data?.ok) throw new Error(data?.error || "Gateway restart failed");
+      setRestartRequired(!!data.restartRequired);
+      setGatewayRestartSignal(Date.now());
+      refreshSharedStatuses();
+      showToast("Gateway restarted", "success");
+      setTimeout(refreshRestartStatus, 800);
+    } catch (err) {
+      showToast(err.message || "Restart failed", "error");
+      setTimeout(refreshRestartStatus, 800);
+    } finally {
+      setRestartingGateway(false);
+    }
+  }, [restartingGateway, refreshRestartStatus, refreshSharedStatuses]);
+
   const handleAcUpdate = async () => {
     if (acUpdating) return;
     setAcUpdating(true);
@@ -380,26 +547,10 @@ function App() {
         class="min-h-screen flex items-center justify-center"
         style="position: relative; z-index: 1"
       >
-        <svg
-          class="animate-spin h-6 w-6"
+        <${LoadingSpinner}
+          className="h-6 w-6"
           style="color: var(--text-muted)"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
+        />
       </div>
       <${ToastContainer} />
     `;
@@ -418,11 +569,11 @@ function App() {
   }
 
   const navigateToSubScreen = (screen) => {
-    setSubScreen(screen);
+    setLocation(`/${screen}`);
     setMobileSidebarOpen(false);
   };
   const exitSubScreen = () => {
-    setSubScreen(null);
+    setLocation(`/${kDefaultUiTab}`);
     setMobileSidebarOpen(false);
   };
   const handleAppContentScroll = (e) => {
@@ -432,14 +583,55 @@ function App() {
     );
   };
 
-  const kNavItems = [
-    { id: "general", label: "General" },
-    { id: "providers", label: "Providers" },
-    { id: "envars", label: "Envars" },
+  const kNavSections = [
+    {
+      label: "Status",
+      items: [
+        { id: "general", label: "General" },
+        { id: "watchdog", label: "Watchdog" },
+      ],
+    },
+    {
+      label: "Config",
+      items: [
+        { id: "providers", label: "Providers" },
+        { id: "envars", label: "Envars" },
+        { id: "webhooks", label: "Webhooks" },
+      ],
+    },
   ];
 
+  const selectedNavId =
+    location === "/telegram"
+      ? ""
+      : location.startsWith("/providers")
+      ? "providers"
+      : location.startsWith("/watchdog")
+      ? "watchdog"
+      : location.startsWith("/envars")
+      ? "envars"
+      : location.startsWith("/webhooks")
+      ? "webhooks"
+      : "general";
+
+  const renderWebhooks = (hookName = "") => html`
+    <div class="pt-4">
+      <${Webhooks}
+        selectedHookName=${hookName}
+        onSelectHook=${(name) => setLocation(`/webhooks/${encodeURIComponent(name)}`)}
+        onBackToList=${() => setLocation("/webhooks")}
+        onRestartRequired=${setRestartRequired}
+      />
+    </div>
+  `;
+
   return html`
     <div class="app-shell">
+      <${GlobalRestartBanner}
+        visible=${restartRequired}
+        restarting=${restartingGateway}
+        onRestart=${handleGatewayRestart}
+      />
       <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
         <div class="sidebar-brand">
           <img src="./img/logo.svg" alt="" width="20" height="20" />
@@ -465,6 +657,10 @@ function App() {
                       e.preventDefault();
                       setMenuOpen(false);
                       await logout();
+                      try {
+                        window.localStorage.clear();
+                        window.sessionStorage.clear();
+                      } catch {}
                       window.location.href = "/login.html";
                     }}
                   >Log out</a>
@@ -473,23 +669,26 @@ function App() {
             </div>
           `}
         </div>
-        <div class="sidebar-label">Setup</div>
-        <nav class="sidebar-nav">
-          ${kNavItems.map(
-            (item) => html`
-              <a
-                class=${tab === item.id && !subScreen ? "active" : ""}
-                onclick=${() => {
-                  setSubScreen(null);
-                  setTab(item.id);
-                  setMobileSidebarOpen(false);
-                }}
-              >
-                ${item.label}
-              </a>
-            `,
-          )}
-        </nav>
+        ${kNavSections.map(
+          (section) => html`
+            <div class="sidebar-label">${section.label}</div>
+            <nav class="sidebar-nav">
+              ${section.items.map(
+                (item) => html`
+                  <a
+                    class=${selectedNavId === item.id ? "active" : ""}
+                    onclick=${() => {
+                      setLocation(`/${item.id}`);
+                      setMobileSidebarOpen(false);
+                    }}
+                  >
+                    ${item.label}
+                  </a>
+                `,
+              )}
+            </nav>
+          `,
+        )}
         <div class="sidebar-footer">
           ${acHasUpdate && acLatest && !acDismissed
             ? html`
@@ -530,28 +729,64 @@ function App() {
           </span>
         </div>
         <div class="max-w-2xl w-full mx-auto">
-          ${subScreen === "telegram"
-            ? html`
+          <${Switch}>
+            <${Route} path="/telegram">
               <div class="pt-4">
                 <${TelegramWorkspace} onBack=${exitSubScreen} />
               </div>
-            `
-            : html`
-              <div class="pt-4" style=${{ display: tab === "general" ? "" : "none" }}>
+            </${Route}>
+            <${Route} path="/general">
+              <div class="pt-4">
                 <${GeneralTab}
-                  onSwitchTab=${setTab}
+                  statusData=${sharedStatus}
+                  watchdogData=${sharedWatchdogStatus}
+                  onRefreshStatuses=${refreshSharedStatuses}
+                  onSwitchTab=${(nextTab) => setLocation(`/${nextTab}`)}
                   onNavigate=${navigateToSubScreen}
-                  isActive=${tab === "general" && !subScreen}
+                  isActive=${location === "/general"}
+                  restartingGateway=${restartingGateway}
+                  onRestartGateway=${handleGatewayRestart}
+                  restartSignal=${gatewayRestartSignal}
                 />
               </div>
-              <div class="pt-4" style=${{ display: tab === "providers" ? "" : "none" }}>
-                <${Providers} />
+            </${Route}>
+            <${Route} path="/providers">
+              <div class="pt-4">
+                <${Providers} onRestartRequired=${setRestartRequired} />
               </div>
-              <div class="pt-4" style=${{ display: tab === "envars" ? "" : "none" }}>
-                <${Envars} />
+            </${Route}>
+            <${Route} path="/watchdog">
+              <div class="pt-4">
+                <${WatchdogTab}
+                  gatewayStatus=${sharedStatus?.gateway || null}
+                  openclawVersion=${sharedStatus?.openclawVersion || null}
+                  watchdogStatus=${sharedWatchdogStatus}
+                  onRefreshStatuses=${refreshSharedStatuses}
+                  restartingGateway=${restartingGateway}
+                  onRestartGateway=${handleGatewayRestart}
+                  restartSignal=${gatewayRestartSignal}
+                />
               </div>
-            `}
+            </${Route}>
+            <${Route} path="/envars">
+              <div class="pt-4">
+                <${Envars} onRestartRequired=${setRestartRequired} />
+              </div>
+            </${Route}>
+            <${Route} path="/webhooks/:hookName">
+              ${(params) => renderWebhooks(decodeURIComponent(params.hookName || ""))}
+            </${Route}>
+            <${Route} path="/webhooks">
+              ${() => renderWebhooks("")}
+            </${Route}>
+            <${Route}>
+              <${RouteRedirect} to="/general" />
+            </${Route}>
+          </${Switch}>
         </div>
+        <${ToastContainer}
+          className="fixed bottom-10 right-4 z-50 space-y-2 pointer-events-none"
+        />
       </div>
 
       <div class="app-statusbar">
@@ -579,8 +814,14 @@ function App() {
         </div>
       </div>
     </div>
-    <${ToastContainer} />
   `;
-}
+};
 
-render(html`<${App} />`, document.getElementById("app"));
+render(
+  html`
+    <${Router} hook=${useHashLocation}>
+      <${App} />
+    </${Router}>
+  `,
+  document.getElementById("app"),
+);

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

@@ -0,0 +1,92 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { LoadingSpinner } from "./loading-spinner.js";
+
+const html = htm.bind(h);
+
+const kStaticToneClassByTone = {
+  primary: "ac-btn-cyan",
+  secondary: "ac-btn-secondary",
+  success: "ac-btn-green",
+  danger: "ac-btn-danger",
+  ghost: "ac-btn-ghost",
+};
+
+const getToneClass = (tone, isInteractive) => {
+  if (tone === "neutral") {
+    return isInteractive
+      ? "border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
+      : "border border-border text-gray-500";
+  }
+  if (tone === "warning") {
+    return isInteractive
+      ? "border 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 border-yellow-500/35 text-yellow-400 bg-yellow-500/10";
+  }
+  return kStaticToneClassByTone[tone] || kStaticToneClassByTone.primary;
+};
+
+const kSizeClassBySize = {
+  sm: "h-7 text-xs leading-none px-2.5 py-1 rounded-lg",
+  md: "h-9 text-sm font-medium leading-none px-4 rounded-xl",
+  lg: "h-10 text-sm font-medium leading-none px-5 rounded-lg",
+};
+
+export const ActionButton = ({
+  onClick,
+  type = "button",
+  disabled = false,
+  loading = false,
+  tone = "primary",
+  size = "sm",
+  idleLabel = "Action",
+  loadingLabel = "Working...",
+  loadingMode = "replace",
+  className = "",
+}) => {
+  const isDisabled = disabled || loading;
+  const isInteractive = !isDisabled;
+  const toneClass = getToneClass(tone, isInteractive);
+  const sizeClass = kSizeClassBySize[size] || kSizeClassBySize.sm;
+  const loadingClass = loading
+    ? `cursor-not-allowed ${
+        tone === "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"
+      }`
+    : "";
+  const spinnerSizeClass = size === "md" || size === "lg" ? "h-4 w-4" : "h-3 w-3";
+  const isInlineLoading = loadingMode === "inline";
+  const currentLabel = loading && !isInlineLoading ? loadingLabel : idleLabel;
+
+  return html`
+    <button
+      type=${type}
+      onclick=${onClick}
+      disabled=${isDisabled}
+      class="inline-flex items-center justify-center transition-colors whitespace-nowrap ${sizeClass} ${toneClass} ${loadingClass} ${className}"
+    >
+      ${isInlineLoading
+        ? html`
+            <span class="relative inline-flex items-center justify-center leading-none">
+              <span class=${loading ? "invisible" : ""}>${currentLabel}</span>
+              ${loading
+                ? html`
+                    <span class="absolute inset-0 inline-flex items-center justify-center">
+                      <${LoadingSpinner} className=${spinnerSizeClass} />
+                    </span>
+                  `
+                : null}
+            </span>
+          `
+        : loading
+        ? html`
+            <span class="inline-flex items-center gap-1.5 leading-none">
+              <${LoadingSpinner} className=${spinnerSizeClass} />
+              ${currentLabel}
+            </span>
+          `
+        : currentLabel}
+    </button>
+  `;
+};