@chrysb/alphaclaw 0.8.1-beta.8 → 0.8.2

package/lib/public/js/components/usage-tab/sessions-section.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 {
   formatDurationCompactMs,
   formatInteger,
@@ -51,14 +51,14 @@ const SessionInlineDetail = ({
   if (loadingDetail) {
     return html`
       <div class="ac-history-body">
-        <p class="text-xs text-gray-500">Loading session detail...</p>
+        <p class="text-xs text-fg-muted">Loading session detail...</p>
       </div>
     `;
   }
   if (!detail) {
     return html`
       <div class="ac-history-body">
-        <p class="text-xs text-gray-500">Session detail not available.</p>
+        <p class="text-xs text-fg-muted">Session detail not available.</p>
       </div>
     `;
   }
@@ -68,20 +68,20 @@ const SessionInlineDetail = ({
   return html`
     <div class="ac-history-body space-y-3 border-0 pt-0 mt-0">
       <div>
-        <p class="text-[11px] text-gray-500 mb-1">Session key</p>
-        <p class="text-xs text-gray-300 font-mono break-all">${sessionKeyValue || "n/a"}</p>
+        <p class="text-[11px] text-fg-muted mb-1">Session key</p>
+        <p class="text-xs text-body font-mono break-all">${sessionKeyValue || "n/a"}</p>
       </div>
       <div class="mt-1.5">
-        <p class="text-[11px] text-gray-500 mb-1">Model breakdown</p>
+        <p class="text-[11px] text-fg-muted mb-1">Model breakdown</p>
         ${(detail.modelBreakdown || []).length === 0
-          ? html`<p class="text-xs text-gray-500">No model usage recorded.</p>`
+          ? html`<p class="text-xs text-fg-muted">No model usage recorded.</p>`
           : html`
               <div class="space-y-1.5">
                 ${(detail.modelBreakdown || []).map(
                   (row) => html`
-                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
-                      <span class="text-gray-300 truncate">${row.model || "unknown"}</span>
-                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-surface transition-colors">
+                      <span class="text-body truncate">${row.model || "unknown"}</span>
+                      <span class="inline-flex items-center gap-3 text-fg-muted shrink-0">
                         <span>${formatInteger(row.totalTokens)} tok</span>
                         <span>${formatUsd(row.totalCost)}</span>
                         <span>${formatCountLabel(row.turnCount, "turn", "turns")}</span>
@@ -93,16 +93,16 @@ const SessionInlineDetail = ({
             `}
       </div>
       <div>
-        <p class="text-[11px] text-gray-500 mb-1">Tool usage</p>
+        <p class="text-[11px] text-fg-muted mb-1">Tool usage</p>
         ${(detail.toolUsage || []).length === 0
-          ? html`<p class="text-xs text-gray-500">No tool calls recorded.</p>`
+          ? html`<p class="text-xs text-fg-muted">No tool calls recorded.</p>`
           : html`
               <div class="space-y-1.5">
                 ${(detail.toolUsage || []).map(
                   (row) => html`
-                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-white/5 transition-colors">
-                      <span class="text-gray-300 truncate">${row.toolName}</span>
-                      <span class="inline-flex items-center gap-3 text-gray-500 shrink-0">
+                    <div class="flex items-center justify-between gap-3 text-xs px-1 py-0.5 rounded hover:bg-surface transition-colors">
+                      <span class="text-body truncate">${row.toolName}</span>
+                      <span class="inline-flex items-center gap-3 text-fg-muted shrink-0">
                         <span>${formatCountLabel(row.callCount, "call", "calls")}</span>
                         <span>${(Number(row.errorRate || 0) * 100).toFixed(1)}% err</span>
                         <span>${formatDurationCompactMs(row.avgDurationMs)}</span>
@@ -129,7 +129,7 @@ export const SessionsSection = ({
     <h2 class="card-label text-xs mb-3">Sessions</h2>
     <div class="ac-history-list">
       ${sessions.length === 0
-        ? html`<p class="text-xs text-gray-500">
+        ? html`<p class="text-xs text-fg-muted">
             ${loadingSessions ? "Loading sessions..." : "No sessions recorded yet."}
           </p>`
         : sessions.map(
@@ -143,13 +143,13 @@ export const SessionsSection = ({
                   onToggleSession(itemSessionId, isOpen);
                 }}
               >
-                <summary class="ac-history-summary hover:bg-white/5 transition-colors">
+                <summary class="ac-history-summary hover:bg-surface transition-colors">
                   <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>
                       <${SessionBadges} session=${item} />
                     </span>
-                    <span class="inline-flex items-center gap-3 shrink-0 text-xs text-gray-500">
+                    <span class="inline-flex items-center gap-3 shrink-0 text-xs text-fg-muted">
                       <span>${formatInteger(item.totalTokens)} tok</span>
                       <span>${formatUsd(item.totalCost)}</span>
                       <span>

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

@@ -4,7 +4,8 @@ import {
   useMemo,
   useRef,
   useState,
-} from "https://esm.sh/preact/hooks";
+} from "preact/hooks";
+import Chart from "chart.js/auto";
 import {
   fetchUsageSessionDetail,
   fetchUsageSessions,
@@ -233,7 +234,6 @@ export const useUsageTab = ({ sessionId = "" }) => {
 
   useEffect(() => {
     const canvas = overviewCanvasRef.current;
-    const Chart = window.Chart;
     if (!canvas || !Chart) return;
     if (overviewChartRef.current) {
       overviewChartRef.current.destroy();

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

@@ -1,5 +1,6 @@
-import { h } from "https://esm.sh/preact";
-import htm from "https://esm.sh/htm";
+import { h } from "preact";
+import htm from "htm";
+import { FileCopyLineIcon } from "../../icons.js";
 import {
   kWatchdogConsoleTabLogs,
   kWatchdogConsoleTabTerminal,
@@ -22,26 +23,28 @@ export const WatchdogConsoleCard = ({
   logsRef = null,
   logs = "",
   loadingLogs = true,
+  copyingAll = false,
   terminalPanelRef = null,
   terminalHostRef = null,
   terminalInstanceRef = null,
   logsPanelHeightPx = 320,
+  onCopyAll = () => {},
 }) => html`
   <div class="bg-surface border border-border rounded-xl p-4">
     <div class="flex items-center justify-between gap-2 mb-3">
       <div
-        class="inline-flex items-center rounded-lg border border-border bg-black/20 p-0.5"
+        class="inline-flex items-center rounded-lg border border-border bg-field p-0.5"
       >
         <button
           type="button"
-          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabLogs ? "bg-surface text-gray-100" : "text-gray-400 hover:text-gray-200"}`}
+          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabLogs ? "bg-surface text-bright" : "text-fg-muted hover:text-body"}`}
           onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabLogs)}
         >
           Logs
         </button>
         <button
           type="button"
-          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabTerminal ? "bg-surface text-gray-100" : "text-gray-400 hover:text-gray-200"}`}
+          class=${`px-2.5 py-1 text-xs rounded-md ${activeConsoleTab === kWatchdogConsoleTabTerminal ? "bg-surface text-bright" : "text-fg-muted hover:text-body"}`}
           onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabTerminal)}
         >
           Terminal
@@ -50,7 +53,7 @@ export const WatchdogConsoleCard = ({
       <div class="flex items-center gap-2">
         ${activeConsoleTab === kWatchdogConsoleTabLogs
           ? html`
-              <label class="inline-flex items-center gap-2 text-xs text-gray-400">
+              <label class="inline-flex items-center gap-2 text-xs text-fg-muted">
                 <input
                   type="checkbox"
                   checked=${stickToBottom}
@@ -65,7 +68,7 @@ export const WatchdogConsoleCard = ({
                 ${terminalUiSettling
                   ? null
                   : html`
-                      <span class="text-xs text-gray-500">
+                      <span class="text-xs text-fg-muted">
                         ${connectingTerminal
                           ? "Connecting..."
                           : terminalEnded
@@ -93,11 +96,22 @@ export const WatchdogConsoleCard = ({
     <div class=${activeConsoleTab === kWatchdogConsoleTabLogs ? "" : "hidden"}>
       <pre
         ref=${logsRef}
-        class="watchdog-logs-panel bg-black/40 border border-border rounded-lg p-3 overflow-auto text-xs text-gray-300 whitespace-pre-wrap break-words"
+        class="watchdog-logs-panel bg-field border border-border rounded-lg p-3 overflow-auto text-xs text-body whitespace-pre-wrap break-words"
         style=${{ height: `${logsPanelHeightPx}px` }}
       >
 ${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre
       >
+      <div class="mt-3 flex justify-end">
+        <button
+          type="button"
+          class=${`ac-btn-secondary text-xs px-2.5 py-1 rounded-lg inline-flex items-center gap-1.5 ${copyingAll ? "opacity-50 cursor-not-allowed" : ""}`}
+          onClick=${onCopyAll}
+          disabled=${copyingAll}
+        >
+          <${FileCopyLineIcon} className="w-3.5 h-3.5" />
+          ${copyingAll ? "Copying..." : "Copy all"}
+        </button>
+      </div>
     </div>
     <div
       class=${activeConsoleTab === kWatchdogConsoleTabTerminal

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

@@ -1,8 +1,11 @@
-import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { fetchWatchdogLogs } from "../../../lib/api.js";
+import { copyTextToClipboard } from "../../../lib/clipboard.js";
 import { readUiSettings, writeUiSettings } from "../../../lib/ui-settings.js";
+import { showToast } from "../../toast.js";
 import {
   clampWatchdogLogsPanelHeight,
+  formatWatchdogCopyAllText,
   kWatchdogConsoleTabLogs,
   kWatchdogConsoleTabTerminal,
   kWatchdogConsoleTabUiSettingKey,
@@ -12,9 +15,11 @@ import {
 } from "../helpers.js";
 import { useWatchdogTerminal } from "../terminal/use-terminal.js";
 
-export const useWatchdogConsole = () => {
+export const useWatchdogConsole = ({
+} = {}) => {
   const [logs, setLogs] = useState("");
   const [loadingLogs, setLoadingLogs] = useState(true);
+  const [copyingAll, setCopyingAll] = useState(false);
   const [stickToBottom, setStickToBottom] = useState(true);
   const [activeConsoleTab, setActiveConsoleTab] = useState(() => {
     const settings = readUiSettings();
@@ -120,9 +125,29 @@ export const useWatchdogConsole = () => {
     setActiveConsoleTab(kWatchdogConsoleTabTerminal);
   };
 
+  const handleCopyAll = async () => {
+    if (copyingAll) return;
+    setCopyingAll(true);
+    try {
+      const text = formatWatchdogCopyAllText({
+        logs,
+      });
+      const copied = await copyTextToClipboard(text);
+      if (!copied) {
+        throw new Error("Could not copy watchdog export");
+      }
+      showToast("Copied watchdog logs", "success");
+    } catch (error) {
+      showToast(error.message || "Could not copy watchdog export", "error");
+    } finally {
+      setCopyingAll(false);
+    }
+  };
+
   return {
     logs,
     loadingLogs,
+    copyingAll,
     stickToBottom,
     setStickToBottom,
     activeConsoleTab,
@@ -132,6 +157,7 @@ export const useWatchdogConsole = () => {
     terminalPanelRef,
     terminalHostRef,
     onRestartTerminalSession,
+    onCopyAll: handleCopyAll,
     ...terminal,
   };
 };

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

@@ -4,18 +4,28 @@ export const kWatchdogConsoleTabUiSettingKey = "watchdogConsoleTab";
 export const kWatchdogLogsPanelHeightUiSettingKey = "watchdogLogsPanelHeightPx";
 export const kWatchdogLogsPanelDefaultHeightPx = 320;
 export const kWatchdogLogsPanelMinHeightPx = 160;
-export const kXtermCssUrl =
-  "https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css";
+export const kXtermCssUrl = "/css/vendor/xterm.css";
 export const kWatchdogTerminalWsPath = "/api/watchdog/terminal/ws";
 
 let xtermModulesPromise = null;
 
 export const loadXtermModules = () => {
   if (!xtermModulesPromise) {
-    xtermModulesPromise = Promise.all([
-      import("https://esm.sh/@xterm/xterm@5.5.0"),
-      import("https://esm.sh/@xterm/addon-fit@0.10.0"),
-    ]);
+    xtermModulesPromise = Promise.all([import("@xterm/xterm"), import("@xterm/addon-fit")]).then(
+      ([xtermModule, fitAddonModule]) => {
+        const Terminal =
+          xtermModule?.Terminal || xtermModule?.default?.Terminal || null;
+        const FitAddon =
+          fitAddonModule?.FitAddon || fitAddonModule?.default?.FitAddon || null;
+        if (typeof Terminal !== "function") {
+          throw new Error("Xterm Terminal export not found");
+        }
+        if (typeof FitAddon !== "function") {
+          throw new Error("Xterm FitAddon export not found");
+        }
+        return { Terminal, FitAddon };
+      },
+    );
   }
   return xtermModulesPromise;
 };
@@ -104,3 +114,22 @@ export const getIncidentStatusTone = (event) => {
     label: "Unknown",
   };
 };
+
+export const formatWatchdogCopyAllText = ({
+  logs = "",
+  generatedAt = null,
+} = {}) => {
+  const sections = [];
+  const generatedAtLabel =
+    generatedAt instanceof Date && !Number.isNaN(generatedAt.getTime())
+      ? generatedAt.toISOString()
+      : new Date().toISOString();
+
+  sections.push(`# AlphaClaw Watchdog Export`);
+  sections.push(`Generated at: ${generatedAtLabel}`);
+
+  sections.push(`## Gateway Logs`);
+  sections.push(String(logs || "").trim() || "No logs yet.");
+
+  return sections.join("\n\n").trim();
+};

package/lib/public/js/components/watchdog-tab/incidents/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 { getIncidentStatusTone } from "../helpers.js";
 
 const html = htm.bind(h);
@@ -11,13 +11,13 @@ export const WatchdogIncidentsCard = ({
   <div class="bg-surface border border-border rounded-xl p-4">
     <div class="flex items-center justify-between gap-2 mb-3">
       <h2 class="card-label">Recent incidents</h2>
-      <button class="text-xs text-gray-400 hover:text-gray-200" onclick=${onRefresh}>
+      <button class="text-xs text-fg-muted hover:text-body" onclick=${onRefresh}>
         Refresh
       </button>
     </div>
     <div class="ac-history-list">
       ${events.length === 0 &&
-      html`<p class="text-xs text-gray-500">No incidents recorded.</p>`}
+      html`<p class="text-xs text-fg-muted">No incidents recorded.</p>`}
       ${events.map((event) => {
         const tone = getIncidentStatusTone(event);
         return html`
@@ -40,9 +40,9 @@ export const WatchdogIncidentsCard = ({
                 ></span>
               </div>
             </summary>
-            <div class="ac-history-body text-xs text-gray-400">
+            <div class="ac-history-body text-xs text-fg-muted">
               <div>Source: ${event.source || "unknown"}</div>
-              <pre class="mt-2 bg-black/30 rounded p-2 whitespace-pre-wrap break-words">
+              <pre class="mt-2 bg-field rounded p-2 whitespace-pre-wrap break-words">
 ${typeof event.details === "string"
                   ? event.details
                   : JSON.stringify(event.details || {}, null, 2)}</pre

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

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

package/lib/public/js/components/watchdog-tab/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 { Gateway } from "../gateway.js";
 import { useWatchdogTab } from "./use-watchdog-tab.js";
 import { WatchdogResourcesCard } from "./resources/index.js";
@@ -69,10 +69,12 @@ export const WatchdogTab = ({
         logsRef=${state.logsRef}
         logs=${state.logs}
         loadingLogs=${state.loadingLogs}
+        copyingAll=${state.copyingAll}
         terminalPanelRef=${state.terminalPanelRef}
         terminalHostRef=${state.terminalHostRef}
         terminalInstanceRef=${state.terminalInstanceRef}
         logsPanelHeightPx=${state.logsPanelHeightPx}
+        onCopyAll=${state.onCopyAll}
       />
 
       <${WatchdogIncidentsCard}

package/lib/public/js/components/watchdog-tab/resource-bar.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);
 
@@ -21,7 +21,7 @@ export const ResourceBar = ({
     onclick=${onToggle || undefined}
   >
     <span
-      class=${`text-xs text-gray-400 ${onToggle ? "group-hover:text-gray-200 transition-colors" : ""}`}
+      class=${`text-xs text-fg-muted ${onToggle ? "group-hover:text-body transition-colors" : ""}`}
       >${label}</span
     >
     <div
@@ -53,7 +53,7 @@ export const ResourceBar = ({
           `}
     </div>
     <div class="flex flex-wrap items-center gap-x-3 mt-2.5">
-      <span class="text-xs text-gray-500 font-mono flex-1">${detail}</span>
+      <span class="text-xs text-fg-muted font-mono flex-1">${detail}</span>
       ${expanded &&
       segments &&
       segments
@@ -61,7 +61,7 @@ export const ResourceBar = ({
         .map(
           (segment) => html`
             <span
-              class="inline-flex items-center gap-1 text-xs text-gray-500 font-mono"
+              class="inline-flex items-center gap-1 text-xs text-fg-muted font-mono"
             >
               <span
                 class="inline-block w-1.5 h-1.5 rounded-full"

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()}
   >