@chrysb/alphaclaw 0.8.1 → 0.8.2

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

@@ -1,7 +1,8 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import { formatBytes } from "../helpers.js";
 import { ResourceBar } from "../resource-bar.js";
+import { Tooltip } from "../../tooltip.js";
 
 const html = htm.bind(h);
 
@@ -11,6 +12,16 @@ export const WatchdogResourcesCard = ({
   onSetMemoryExpanded = () => {},
 }) => {
   if (!resources) return null;
+  const diskLabel = resources.disk?.path
+    ? html`
+        <${Tooltip}
+          text=${resources.disk.path}
+          widthClass="w-auto max-w-80 whitespace-normal break-all"
+        >
+          <span class="inline-block cursor-help">Disk</span>
+        </${Tooltip}>
+      `
+    : "Disk";
   const memorySegments = (() => {
     const processes = resources.processes;
     const totalBytes = resources.memory?.totalBytes;
@@ -67,7 +78,7 @@ export const WatchdogResourcesCard = ({
                 onToggle=${() => onSetMemoryExpanded(true)}
               />
               <${ResourceBar}
-                label=${`Disk${resources.disk?.path ? ` (${resources.disk.path})` : ""}`}
+                label=${diskLabel}
                 percent=${resources.disk?.percent}
                 detail=${`${formatBytes(resources.disk?.usedBytes)} / ${formatBytes(resources.disk?.totalBytes)}`}
               />

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

@@ -1,4 +1,4 @@
-import { useState } from "https://esm.sh/preact/hooks";
+import { useState } from "preact/hooks";
 import { usePolling } from "../../../hooks/usePolling.js";
 import { fetchWatchdogResources } from "../../../lib/api.js";
 

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

@@ -1,7 +1,9 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useState } from "preact/hooks";
+import htm from "htm";
 import { InfoTooltip } from "../../info-tooltip.js";
 import { ToggleSwitch } from "../../toggle-switch.js";
+import { showToast } from "../../toast.js";
 
 const html = htm.bind(h);
 
@@ -10,35 +12,100 @@ export const WatchdogSettingsCard = ({
   savingSettings = false,
   onToggleAutoRepair = () => {},
   onToggleNotifications = () => {},
-}) => html`
-  <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."
+}) => {
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+
+  const handleTestNotification = async () => {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await fetch("/api/watchdog/test-notification", { method: "POST" });
+      const data = await res.json();
+      if (!data?.ok) {
+        setTestResult(data);
+        return;
+      }
+
+      const channels = data.result?.channels || data.result || {};
+      const parts = [];
+      for (const channel of ["telegram", "discord", "slack"]) {
+        const ch = channels[channel];
+        if (!ch || ch.skipped) continue;
+        if (ch.sent > 0) parts.push(`${channel}: ${ch.sent} sent`);
+        if (ch.failed > 0) parts.push(`${channel}: ${ch.failed} failed`);
+      }
+
+      if (parts.length === 0) {
+        showToast("No channels configured", "warning");
+        return;
+      }
+
+      const hasFailures = parts.some((part) => part.includes("failed"));
+      showToast(
+        hasFailures ? parts.join(", ") : `Test notification sent: ${parts.join(", ")}`,
+        hasFailures ? "warning" : "success",
+      );
+    } catch (err) {
+      setTestResult({ ok: false, error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const formatResult = (result) => {
+    if (!result) return null;
+    return html`<span class="text-status-error-muted text-xs">
+      ${result.error || "Failed"}
+    </span>`;
+  };
+
+  return html`
+    <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-fg-muted">
+          <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>
-      <${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 channel notices for watchdog alerts and auto-repair outcomes."
-        />
+      <div class="flex items-center justify-between gap-3 mt-3">
+        <div class="inline-flex items-center gap-2 text-xs text-fg-muted">
+          <span>Notifications</span>
+          <${InfoTooltip}
+            text="Sends channel notices for watchdog alerts and auto-repair outcomes."
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <button
+            class=${`text-xs px-2 py-1 rounded-lg ac-btn-ghost disabled:opacity-50 disabled:cursor-not-allowed ${
+              settings.notificationsEnabled ? "" : "invisible pointer-events-none"
+            }`}
+            onClick=${handleTestNotification}
+            disabled=${testing || savingSettings || !settings.notificationsEnabled}
+            aria-hidden=${!settings.notificationsEnabled}
+            tabIndex=${settings.notificationsEnabled ? 0 : -1}
+          >
+            ${testing ? "Sending..." : "Test"}
+          </button>
+          <${ToggleSwitch}
+            checked=${!!settings.notificationsEnabled}
+            disabled=${savingSettings}
+            onChange=${onToggleNotifications}
+            label=""
+          />
+        </div>
       </div>
-      <${ToggleSwitch}
-        checked=${!!settings.notificationsEnabled}
-        disabled=${savingSettings}
-        onChange=${onToggleNotifications}
-        label=""
-      />
+      ${testResult
+        ? html`<div class="mt-2">${formatResult(testResult)}</div>`
+        : null}
     </div>
-  </div>
-`;
+  `;
+};

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import {
   fetchWatchdogSettings,
   triggerWatchdogRepair,

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

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 
 const html = htm.bind(h);
 
@@ -11,7 +11,7 @@ export const WatchdogTerminal = ({
 }) => html`
   <div
     ref=${panelRef}
-    class="watchdog-logs-panel bg-black/40 border border-border rounded-lg p-3 overflow-hidden"
+    class="watchdog-logs-panel bg-field border border-border rounded-lg p-3 overflow-hidden"
     style=${{ height: `${panelHeightPx}px` }}
     onClick=${() => terminalInstanceRef?.current?.focus()}
   >

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { closeWatchdogTerminalSession } from "../../../lib/api.js";
 import { showToast } from "../../toast.js";
 import {
@@ -8,6 +8,33 @@ import {
   loadXtermModules,
 } from "../helpers.js";
 
+const waitForTerminalHost = ({
+  hostRef = null,
+  panelRef = null,
+  maxFrames = 8,
+} = {}) =>
+  new Promise((resolve, reject) => {
+    let framesRemaining = Math.max(1, Number(maxFrames) || 1);
+
+    const check = () => {
+      if (hostRef?.current && panelRef?.current) {
+        resolve({
+          hostElement: hostRef.current,
+          panelElement: panelRef.current,
+        });
+        return;
+      }
+      framesRemaining -= 1;
+      if (framesRemaining <= 0) {
+        reject(new Error("Terminal host not ready"));
+        return;
+      }
+      window.requestAnimationFrame(check);
+    };
+
+    check();
+  });
+
 export const useWatchdogTerminal = ({
   active = false,
   panelRef = null,
@@ -37,9 +64,14 @@ export const useWatchdogTerminal = ({
       try {
         setConnectingTerminal(true);
         ensureXtermStylesheet();
-        const [{ Terminal }, { FitAddon }] = await loadXtermModules();
+        const { Terminal, FitAddon } = await loadXtermModules();
         if (cancelled) return;
-        if (!terminalInstanceRef.current && hostRef?.current) {
+        const { hostElement } = await waitForTerminalHost({
+          hostRef,
+          panelRef,
+        });
+        if (cancelled) return;
+        if (!terminalInstanceRef.current) {
           const terminal = new Terminal({
             cursorBlink: true,
             fontFamily:
@@ -56,7 +88,7 @@ export const useWatchdogTerminal = ({
           });
           const fitAddon = new FitAddon();
           terminal.loadAddon(fitAddon);
-          terminal.open(hostRef.current);
+          terminal.open(hostElement);
           fitAddon.fit();
           terminal.attachCustomKeyEventHandler((event) => {
             if (event.type !== "keydown") return true;
@@ -161,12 +193,16 @@ export const useWatchdogTerminal = ({
           setTerminalStatusText("Connection error");
           showToast("Watchdog terminal connection failed", "error");
         };
-      } catch {
+      } catch (error) {
         if (cancelled) return;
         setConnectingTerminal(false);
         setTerminalUiSettling(false);
         setTerminalConnected(false);
         setTerminalStatusText("Terminal failed to load");
+        console.error(
+          `[watchdog-terminal] initialization failed: ${error?.message || "unknown error"}`,
+          error,
+        );
         showToast("Could not initialize terminal", "error");
       }
     };

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

@@ -36,6 +36,7 @@ export const useWatchdogTab = ({
     isRepairInProgress: settings.isRepairInProgress,
     logs: consoleState.logs,
     loadingLogs: consoleState.loadingLogs,
+    copyingAll: consoleState.copyingAll,
     stickToBottom: consoleState.stickToBottom,
     setStickToBottom: consoleState.setStickToBottom,
     activeConsoleTab: consoleState.activeConsoleTab,
@@ -51,5 +52,6 @@ export const useWatchdogTab = ({
     terminalPanelRef: consoleState.terminalPanelRef,
     terminalHostRef: consoleState.terminalHostRef,
     terminalInstanceRef: consoleState.terminalInstanceRef,
+    onCopyAll: consoleState.onCopyAll,
   };
 };

package/lib/public/js/components/webhooks/create-webhook-modal/index.js

@@ -1,5 +1,5 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
 import {
   kNoDestinationSessionValue,
   useDestinationSessionSelection,
@@ -61,18 +61,18 @@ export const CreateWebhookModal = ({
             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" />
+            <${CloseIcon} className="w-3.5 h-3.5 text-body" />
           </button>
         `}
       />
       <div class="space-y-2">
-        <p class="text-xs text-gray-500">Endpoint mode</p>
+        <p class="text-xs text-fg-muted">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"}"
+              ? "border-cyan-400 text-status-info bg-cyan-400/10"
+              : "border-border text-fg-muted hover:text-body"}"
             onclick=${() => onModeChange("webhook")}
           >
             Webhook
@@ -80,8 +80,8 @@ export const CreateWebhookModal = ({
           <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"}"
+              ? "border-cyan-400 text-status-info bg-cyan-400/10"
+              : "border-border text-fg-muted hover:text-body"}"
             onclick=${() => onModeChange("oauth")}
           >
             OAuth Callback
@@ -89,7 +89,7 @@ export const CreateWebhookModal = ({
         </div>
       </div>
       <div class="space-y-2">
-        <p class="text-xs text-gray-500">Name</p>
+        <p class="text-xs text-fg-muted">Name</p>
         <input
           type="text"
           value=${name}
@@ -101,7 +101,7 @@ export const CreateWebhookModal = ({
             }
             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"
+          class="w-full bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono"
         />
       </div>
       <${SessionSelectField}
@@ -122,20 +122,20 @@ export const CreateWebhookModal = ({
         <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">
+              <td class="w-24 px-3 py-2 text-fg-muted">Path</td>
+              <td class="px-3 py-2 text-body 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">
+              <td class="w-24 px-3 py-2 text-fg-muted">URL</td>
+              <td class="px-3 py-2 text-body 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">
+              <td class="w-24 px-3 py-2 text-fg-muted">Transform</td>
+              <td class="px-3 py-2 text-body font-mono">
                 <code>hooks/transforms/${previewName}/${previewName}-transform.mjs</code>
               </td>
             </tr>
@@ -145,7 +145,7 @@ export const CreateWebhookModal = ({
       ${mode === "oauth"
         ? html`
             <div class="space-y-1">
-              <p class="text-xs text-gray-500">
+              <p class="text-xs text-fg-muted">
                 For OAuth providers that can't send auth headers. AlphaClaw
                 injects webhook auth before forwarding to /hooks/{name}.
               </p>

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

@@ -32,18 +32,18 @@ export const getRequestStatusTone = (status) => {
   if (status === "success") {
     return {
       dotClass: "bg-green-500/90",
-      textClass: "text-green-500/90",
+      textClass: "text-status-success-muted/90",
     };
   }
   if (status === "error") {
     return {
       dotClass: "bg-red-500/90",
-      textClass: "text-red-500/90",
+      textClass: "text-status-error-muted",
     };
   }
   return {
     dotClass: "bg-gray-500/70",
-    textClass: "text-gray-400",
+    textClass: "text-fg-muted",
   };
 };
 

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

@@ -1,6 +1,6 @@
-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 { h } from "preact";
+import { useCallback, useMemo, useState } from "preact/hooks";
+import htm from "htm";
 import { createWebhook } from "../../lib/api.js";
 import { ActionButton } from "../action-button.js";
 import { PageHeader } from "../page-header.js";
@@ -79,7 +79,7 @@ export const Webhooks = ({
         leading=${selectedHookName
           ? html`
               <button
-                class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-300 transition-colors"
+                class="flex items-center gap-1.5 text-sm text-fg-muted hover:text-body transition-colors"
                 onclick=${onBackToList}
               >
                 <svg

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

@@ -1,6 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import { useMemo } from "https://esm.sh/preact/hooks";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import { useMemo } from "preact/hooks";
+import htm from "htm";
 import { sendAgentMessage } from "../../../lib/api.js";
 import { ActionButton } from "../../action-button.js";
 import { AgentSendModal } from "../../agent-send-modal.js";
@@ -63,8 +63,8 @@ export const RequestHistory = ({
             (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"}"
+                  ? "border-cyan-400 text-status-info bg-cyan-400/10"
+                  : "border-border text-fg-muted hover:text-body"}"
                 onclick=${() => actions.handleSetStatusFilter(filter)}
               >
                 ${filter}
@@ -75,7 +75,7 @@ export const RequestHistory = ({
       </div>
 
       ${requests.length === 0
-        ? html`<p class="text-sm text-gray-500">No requests logged yet.</p>`
+        ? html`<p class="text-sm text-fg-muted">No requests logged yet.</p>`
         : html`
             <div class="ac-history-list">
               ${requests.map((item) => {
@@ -93,12 +93,12 @@ export const RequestHistory = ({
                           <span class="ac-history-toggle shrink-0" aria-hidden="true"
                             >▸</span
                           >
-                          <span class="truncate text-xs text-gray-300">
+                          <span class="truncate text-xs text-body">
                             ${formatLastReceived(item.createdAt)}
                           </span>
                         </span>
                         <span class="inline-flex items-center gap-2 shrink-0">
-                          <span class="text-xs text-gray-500"
+                          <span class="text-xs text-fg-muted"
                             >${formatBytes(item.payloadSize)}</span
                           >
                           <span class=${`text-xs font-medium ${statusTone.textClass}`}
@@ -118,9 +118,9 @@ export const RequestHistory = ({
                       ? html`
                           <div class="ac-history-body space-y-3">
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">Headers</p>
+                              <p class="text-[11px] text-fg-muted mb-1">Headers</p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.headers)}</pre
                               >
@@ -138,11 +138,11 @@ ${jsonPretty(item.headers)}</pre
                               </div>
                             </div>
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">
+                              <p class="text-[11px] text-fg-muted mb-1">
                                 Payload ${item.payloadTruncated ? "(truncated)" : ""}
                               </p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.payload)}</pre
                               >
@@ -173,11 +173,11 @@ ${jsonPretty(item.payload)}</pre
                               </div>
                             </div>
                             <div>
-                              <p class="text-[11px] text-gray-500 mb-1">
+                              <p class="text-[11px] text-fg-muted mb-1">
                                 Gateway response (${item.gatewayStatus || "n/a"})
                               </p>
                               <pre
-                                class="text-xs bg-black/30 border border-border rounded p-2 overflow-auto"
+                                class="text-xs bg-field border border-border rounded p-2 overflow-auto"
                               >
 ${jsonPretty(item.gatewayBody)}</pre
                               >

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 import {
   fetchWebhookRequest,
   fetchWebhookRequests,