@chrysb/alphaclaw 0.7.0 → 0.7.1

package/lib/public/css/cron.css

@@ -400,23 +400,6 @@
   justify-content: center;
 }
 
-.cron-calendar-expand-btn {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-dim);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.cron-calendar-expand-btn:hover {
-  color: var(--text);
-  border-color: rgba(148, 163, 184, 0.5);
-}
-
 .cron-calendar-grid-wrap {
   position: relative;
 }
@@ -464,6 +447,7 @@
   border-left: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding: 5px;
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -473,6 +457,29 @@
   background: rgba(99, 235, 255, 0.04);
 }
 
+.cron-calendar-now-indicator {
+  position: absolute;
+  left: 5px;
+  right: 5px;
+  height: 2px;
+  border-radius: 999px;
+  background: rgba(248, 113, 113, 0.95);
+  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18), 0 0 8px rgba(239, 68, 68, 0.55);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.cron-calendar-now-indicator-dot {
+  position: absolute;
+  left: -3px;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(248, 113, 113, 0.98);
+  transform: translateY(-50%);
+}
+
 .cron-calendar-slot-chip {
   font-size: 11px;
   line-height: 1.2;
@@ -485,6 +492,8 @@
   width: 100%;
   max-width: 100%;
   overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
 
 .cron-calendar-slot-overflow {

package/lib/public/css/theme.css

@@ -685,3 +685,17 @@ textarea:focus {
   resize: vertical;
 }
 
+.watchdog-terminal-host {
+  position: relative;
+}
+
+.watchdog-terminal-host .xterm {
+  height: 100%;
+  letter-spacing: 0;
+  font-kerning: none;
+}
+
+.watchdog-terminal-host .xterm-viewport {
+  overflow-y: auto !important;
+}
+

package/lib/public/js/components/cron-tab/cron-calendar.js

@@ -8,7 +8,7 @@ import {
 import htm from "https://esm.sh/htm";
 import { Tooltip } from "../tooltip.js";
 import { ModalShell } from "../modal-shell.js";
-import { CloseIcon, FullscreenLineIcon } from "../icons.js";
+import { CloseIcon } from "../icons.js";
 import {
   formatCost,
   formatCronScheduleLabel,
@@ -306,6 +306,9 @@ export const CronCalendar = ({
     };
   }, []);
   const todayDayKey = toLocalDayKey(nowMs);
+  const nowDateValue = useMemo(() => new Date(nowMs), [nowMs]);
+  const currentHourOfDay = nowDateValue.getHours();
+  const currentMinuteProgress = nowDateValue.getMinutes() / 60;
   const { repeatingJobs, scheduledJobs } = useMemo(
     () => classifyRepeatingJobs(jobs),
     [jobs],
@@ -569,17 +572,7 @@ export const CronCalendar = ({
         : html`
             <div class="cron-calendar-grid-wrap">
               <div class="cron-calendar-grid-header">
-                <div class="cron-calendar-hour-cell cron-calendar-grid-corner">
-                  <button
-                    type="button"
-                    class="cron-calendar-expand-btn"
-                    title="Expand calendar"
-                    aria-label="Expand calendar"
-                    onClick=${() => setCalendarLightboxOpen(true)}
-                  >
-                    <${FullscreenLineIcon} className="w-3.5 h-3.5" />
-                  </button>
-                </div>
+                <div class="cron-calendar-hour-cell cron-calendar-grid-corner"></div>
                 ${timeline.days.map(
                   (day) => html`
                     <div
@@ -611,6 +604,18 @@ export const CronCalendar = ({
                             key=${cellKey}
                             class=${`cron-calendar-grid-cell ${day.dayKey === todayDayKey ? "is-today" : ""}`}
                           >
+                            ${day.dayKey === todayDayKey &&
+                            hourOfDay === currentHourOfDay
+                              ? html`
+                                  <div
+                                    class="cron-calendar-now-indicator"
+                                    style=${`top: ${Math.max(0, Math.min(100, currentMinuteProgress * 100))}%;`}
+                                    aria-hidden="true"
+                                  >
+                                    <span class="cron-calendar-now-indicator-dot"></span>
+                                  </div>
+                                `
+                              : null}
                             ${visibleSlots.map((slot) => {
                               const status = statusBySlotKey[slot.key] || "";
                               const isPast = slot.scheduledAtMs <= nowMs;

package/lib/public/js/components/cron-tab/cron-job-list.js

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   formatCronScheduleLabel,
@@ -202,7 +202,16 @@ export const CronJobList = ({
   onSelectAllJobs = () => {},
   onSelectJob = () => {},
 }) => {
+  const searchInputRef = useRef(null);
   const [searchQuery, setSearchQuery] = useState("");
+  useEffect(() => {
+    const frameId = window.requestAnimationFrame(() => {
+      searchInputRef.current?.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, []);
   const normalizedQuery = String(searchQuery || "").trim().toLowerCase();
   const filteredJobs = useMemo(() => {
     if (!normalizedQuery) return jobs;
@@ -236,6 +245,7 @@ export const CronJobList = ({
     <div class="cron-list-panel-inner">
       <div class="cron-list-sticky-search">
         <input
+          ref=${searchInputRef}
           type="text"
           value=${searchQuery}
           placeholder="Search cron jobs..."

package/lib/public/js/components/cron-tab/index.js

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
+import { AlarmLineIcon } from "../icons.js";
 import { PageHeader } from "../page-header.js";
 import { CronJobList } from "./cron-job-list.js";
 import { CronJobDetail } from "./cron-job-detail.js";
@@ -144,8 +145,21 @@ export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
           <main class="cron-detail-panel">
             ${noJobs
               ? html`
-                  <div class="h-full flex items-center justify-center text-sm text-gray-500">
-                    No cron jobs configured. Cron jobs are managed via the OpenClaw CLI.
+                  <div
+                    class="bg-surface border border-border rounded-xl px-6 py-10 min-h-[26rem] flex flex-col items-center justify-center text-center"
+                  >
+                    <div class="max-w-md w-full flex flex-col items-center gap-4">
+                      <${AlarmLineIcon} className="h-12 w-12 text-cyan-400" />
+                      <div class="space-y-2">
+                        <h2 class="font-semibold text-lg text-gray-100">
+                          No cron jobs yet
+                        </h2>
+                        <p class="text-xs text-gray-400 leading-5">
+                          Cron jobs are managed via the OpenClaw CLI. Once jobs are
+                          configured, schedules and run history will appear here.
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 `
               : isAllJobsSelected

package/lib/public/js/components/icons.js

@@ -429,6 +429,17 @@ export const ErrorWarningLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const AlarmLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path d="M12.0001 22.0001C7.02956 22.0001 3.00012 17.9707 3.00012 13.0001C3.00012 8.02956 7.02956 4.00012 12.0001 4.00012C16.9707 4.00012 21.0001 8.02956 21.0001 13.0001C21.0001 17.9707 16.9707 22.0001 12.0001 22.0001ZM12.0001 20.0001C15.8661 20.0001 19.0001 16.8661 19.0001 13.0001C19.0001 9.13412 15.8661 6.00012 12.0001 6.00012C8.13412 6.00012 5.00012 9.13412 5.00012 13.0001C5.00012 16.8661 8.13412 20.0001 12.0001 20.0001ZM13.0001 13.0001H16.0001V15.0001H11.0001V8.00012H13.0001V13.0001ZM1.74707 6.2826L5.2826 2.74707L6.69682 4.16128L3.16128 7.69682L1.74707 6.2826ZM18.7176 2.74707L22.2532 6.2826L20.839 7.69682L17.3034 4.16128L18.7176 2.74707Z" />
+  </svg>
+`;
+
 export const FullscreenLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/routes/watchdog-route.js

@@ -1,6 +1,6 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
-import { WatchdogTab } from "../watchdog-tab.js";
+import { WatchdogTab } from "../watchdog-tab/index.js";
 
 const html = htm.bind(h);
 

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

@@ -0,0 +1,115 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import {
+  kWatchdogConsoleTabLogs,
+  kWatchdogConsoleTabTerminal,
+} from "../helpers.js";
+import { WatchdogTerminal } from "../terminal/index.js";
+
+const html = htm.bind(h);
+
+export const WatchdogConsoleCard = ({
+  activeConsoleTab = kWatchdogConsoleTabLogs,
+  stickToBottom = true,
+  onSetStickToBottom = () => {},
+  onSelectConsoleTab = () => {},
+  connectingTerminal = false,
+  terminalConnected = false,
+  terminalEnded = false,
+  terminalStatusText = "",
+  terminalUiSettling = false,
+  onRestartTerminalSession = () => {},
+  logsRef = null,
+  logs = "",
+  loadingLogs = true,
+  terminalPanelRef = null,
+  terminalHostRef = null,
+  terminalInstanceRef = null,
+  logsPanelHeightPx = 320,
+}) => 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"
+      >
+        <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"}`}
+          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"}`}
+          onClick=${() => onSelectConsoleTab(kWatchdogConsoleTabTerminal)}
+        >
+          Terminal
+        </button>
+      </div>
+      <div class="flex items-center gap-2">
+        ${activeConsoleTab === kWatchdogConsoleTabLogs
+          ? html`
+              <label class="inline-flex items-center gap-2 text-xs text-gray-400">
+                <input
+                  type="checkbox"
+                  checked=${stickToBottom}
+                  onchange=${(event) =>
+                    onSetStickToBottom(!!event.currentTarget?.checked)}
+                />
+                Stick to bottom
+              </label>
+            `
+          : html`
+              <div class="flex items-center gap-2 pr-1">
+                ${terminalUiSettling
+                  ? null
+                  : html`
+                      <span class="text-xs text-gray-500">
+                        ${connectingTerminal
+                          ? "Connecting..."
+                          : terminalEnded
+                            ? "Session ended"
+                            : terminalConnected
+                              ? "Connected"
+                              : terminalStatusText || "Disconnected"}
+                      </span>
+                      ${connectingTerminal || terminalConnected
+                        ? null
+                        : html`
+                            <button
+                              type="button"
+                              class="ac-btn-secondary text-xs px-2.5 py-1 rounded-lg"
+                              onClick=${onRestartTerminalSession}
+                            >
+                              New session
+                            </button>
+                          `}
+                    `}
+              </div>
+            `}
+      </div>
+    </div>
+    <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"
+        style=${{ height: `${logsPanelHeightPx}px` }}
+      >
+${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre
+      >
+    </div>
+    <div
+      class=${activeConsoleTab === kWatchdogConsoleTabTerminal
+        ? "space-y-2"
+        : "hidden"}
+    >
+      <${WatchdogTerminal}
+        panelRef=${terminalPanelRef}
+        hostRef=${terminalHostRef}
+        terminalInstanceRef=${terminalInstanceRef}
+        panelHeightPx=${logsPanelHeightPx}
+      />
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { fetchWatchdogLogs } from "../../../lib/api.js";
+import { readUiSettings, writeUiSettings } from "../../../lib/ui-settings.js";
+import {
+  clampWatchdogLogsPanelHeight,
+  kWatchdogConsoleTabLogs,
+  kWatchdogConsoleTabTerminal,
+  kWatchdogConsoleTabUiSettingKey,
+  kWatchdogLogsPanelHeightUiSettingKey,
+  normalizeWatchdogConsoleTab,
+  readCssHeightPx,
+} from "../helpers.js";
+import { useWatchdogTerminal } from "../terminal/use-terminal.js";
+
+export const useWatchdogConsole = () => {
+  const [logs, setLogs] = useState("");
+  const [loadingLogs, setLoadingLogs] = useState(true);
+  const [stickToBottom, setStickToBottom] = useState(true);
+  const [activeConsoleTab, setActiveConsoleTab] = useState(() => {
+    const settings = readUiSettings();
+    return normalizeWatchdogConsoleTab(settings?.[kWatchdogConsoleTabUiSettingKey]);
+  });
+  const [logsPanelHeightPx, setLogsPanelHeightPx] = useState(() => {
+    const settings = readUiSettings();
+    return clampWatchdogLogsPanelHeight(
+      settings?.[kWatchdogLogsPanelHeightUiSettingKey],
+    );
+  });
+  const logsRef = useRef(null);
+  const terminalPanelRef = useRef(null);
+  const terminalHostRef = useRef(null);
+  const terminal = useWatchdogTerminal({
+    active: activeConsoleTab === kWatchdogConsoleTabTerminal,
+    panelRef: terminalPanelRef,
+    hostRef: terminalHostRef,
+  });
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings[kWatchdogConsoleTabUiSettingKey] =
+      normalizeWatchdogConsoleTab(activeConsoleTab);
+    writeUiSettings(settings);
+  }, [activeConsoleTab]);
+
+  useEffect(() => {
+    let active = true;
+    let timer = null;
+    const pollLogs = async () => {
+      try {
+        const text = await fetchWatchdogLogs(65536);
+        if (!active) return;
+        setLogs(text || "");
+        setLoadingLogs(false);
+      } catch {
+        if (!active) return;
+        setLoadingLogs(false);
+      }
+      if (!active) return;
+      timer = setTimeout(pollLogs, 3000);
+    };
+    pollLogs();
+    return () => {
+      active = false;
+      if (timer) clearTimeout(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const logsElement = logsRef.current;
+    if (!logsElement || !stickToBottom) return;
+    logsElement.scrollTop = logsElement.scrollHeight;
+  }, [logs, stickToBottom]);
+
+  useEffect(() => {
+    const panelElement =
+      activeConsoleTab === kWatchdogConsoleTabLogs
+        ? logsRef.current
+        : terminalPanelRef.current;
+    if (!panelElement || typeof ResizeObserver === "undefined") return () => {};
+    let saveTimer = null;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries?.[0];
+      const nextHeight = clampWatchdogLogsPanelHeight(
+        readCssHeightPx(entry?.target),
+      );
+      setLogsPanelHeightPx((currentValue) =>
+        Math.abs(currentValue - nextHeight) >= 1 ? nextHeight : currentValue,
+      );
+      if (saveTimer) window.clearTimeout(saveTimer);
+      saveTimer = window.setTimeout(() => {
+        const settings = readUiSettings();
+        settings[kWatchdogLogsPanelHeightUiSettingKey] = nextHeight;
+        writeUiSettings(settings);
+      }, 120);
+      if (activeConsoleTab === kWatchdogConsoleTabTerminal) {
+        window.requestAnimationFrame(() => {
+          terminal.fitNow();
+        });
+      }
+    });
+    observer.observe(panelElement);
+    return () => {
+      observer.disconnect();
+      if (saveTimer) window.clearTimeout(saveTimer);
+    };
+  }, [activeConsoleTab]);
+
+  const handleSelectConsoleTab = (nextTab = kWatchdogConsoleTabLogs) => {
+    const normalizedTab = normalizeWatchdogConsoleTab(nextTab);
+    if (normalizedTab === kWatchdogConsoleTabTerminal) {
+      terminal.prepareForActivate();
+    } else {
+      terminal.clearSettling();
+    }
+    setActiveConsoleTab(normalizedTab);
+  };
+
+  const onRestartTerminalSession = () => {
+    terminal.restartSession();
+    setActiveConsoleTab(kWatchdogConsoleTabTerminal);
+  };
+
+  return {
+    logs,
+    loadingLogs,
+    stickToBottom,
+    setStickToBottom,
+    activeConsoleTab,
+    handleSelectConsoleTab,
+    logsPanelHeightPx,
+    logsRef,
+    terminalPanelRef,
+    terminalHostRef,
+    onRestartTerminalSession,
+    ...terminal,
+  };
+};

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

@@ -0,0 +1,106 @@
+export const kWatchdogConsoleTabLogs = "logs";
+export const kWatchdogConsoleTabTerminal = "terminal";
+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 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"),
+    ]);
+  }
+  return xtermModulesPromise;
+};
+
+export const ensureXtermStylesheet = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("ac-xterm-css")) return;
+  const link = document.createElement("link");
+  link.id = "ac-xterm-css";
+  link.rel = "stylesheet";
+  link.href = kXtermCssUrl;
+  document.head.appendChild(link);
+};
+
+export const fitTerminalWhenVisible = ({
+  panel = null,
+  fitAddon = null,
+  minWidthPx = 120,
+  minHeightPx = 80,
+} = {}) => {
+  if (!panel || !fitAddon) return false;
+  const panelWidth = Number(panel.clientWidth || 0);
+  const panelHeight = Number(panel.clientHeight || 0);
+  if (panelWidth < minWidthPx || panelHeight < minHeightPx) return false;
+  fitAddon.fit();
+  return true;
+};
+
+export const normalizeWatchdogConsoleTab = (value) =>
+  value === kWatchdogConsoleTabTerminal
+    ? kWatchdogConsoleTabTerminal
+    : kWatchdogConsoleTabLogs;
+
+export const clampWatchdogLogsPanelHeight = (value) => {
+  const parsed = Number(value);
+  const normalized = Number.isFinite(parsed)
+    ? Math.round(parsed)
+    : kWatchdogLogsPanelDefaultHeightPx;
+  return Math.max(kWatchdogLogsPanelMinHeightPx, normalized);
+};
+
+export const readCssHeightPx = (element) => {
+  if (!element) return 0;
+  const computedHeight = Number.parseFloat(
+    window.getComputedStyle(element).height || "0",
+  );
+  return Number.isFinite(computedHeight) ? computedHeight : 0;
+};
+
+export const formatBytes = (bytes) => {
+  if (bytes == null) return "—";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+};
+
+export 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",
+  };
+};

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

@@ -0,0 +1,56 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { getIncidentStatusTone } from "../helpers.js";
+
+const html = htm.bind(h);
+
+export const WatchdogIncidentsCard = ({
+  events = [],
+  onRefresh = () => {},
+}) => html`
+  <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}>
+        Refresh
+      </button>
+    </div>
+    <div class="ac-history-list">
+      ${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="ac-history-item">
+            <summary class="ac-history-summary">
+              <div class="ac-history-summary-row">
+                <span class="inline-flex items-center gap-2 min-w-0">
+                  <span class="ac-history-toggle shrink-0" aria-hidden="true"
+                    >▸</span
+                  >
+                  <span class="truncate">
+                    ${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="ac-history-body 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>
+`;

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

@@ -0,0 +1,33 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+import { usePolling } from "../../../hooks/usePolling.js";
+import { fetchWatchdogEvents } from "../../../lib/api.js";
+
+export const useWatchdogIncidents = ({
+  restartSignal = 0,
+  onRefreshStatuses = () => {},
+} = {}) => {
+  const eventsPoll = usePolling(() => fetchWatchdogEvents(20), 15000);
+
+  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]);
+
+  return {
+    events: eventsPoll.data?.events || [],
+    refreshEvents: eventsPoll.refresh,
+  };
+};