@chrysb/alphaclaw 0.7.0 → 0.7.1

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

@@ -0,0 +1,84 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Gateway } from "../gateway.js";
+import { useWatchdogTab } from "./use-watchdog-tab.js";
+import { WatchdogResourcesCard } from "./resources/index.js";
+import { WatchdogSettingsCard } from "./settings/index.js";
+import { WatchdogConsoleCard } from "./console/index.js";
+import { WatchdogIncidentsCard } from "./incidents/index.js";
+
+const html = htm.bind(h);
+
+export const WatchdogTab = ({
+  gatewayStatus = null,
+  openclawVersion = null,
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  restartingGateway = false,
+  onRestartGateway,
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate,
+}) => {
+  const state = useWatchdogTab({
+    watchdogStatus,
+    onRefreshStatuses,
+    restartSignal,
+  });
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway}
+        status=${gatewayStatus}
+        openclawVersion=${openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${state.currentWatchdogStatus}
+        onRepair=${state.onRepair}
+        repairing=${state.isRepairInProgress}
+        openclawUpdateInProgress=${openclawUpdateInProgress}
+        onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+        onOpenclawUpdate=${onOpenclawUpdate}
+      />
+
+      <${WatchdogResourcesCard}
+        resources=${state.resources}
+        memoryExpanded=${state.memoryExpanded}
+        onSetMemoryExpanded=${state.setMemoryExpanded}
+      />
+
+      <${WatchdogSettingsCard}
+        settings=${state.settings}
+        savingSettings=${state.savingSettings}
+        onToggleAutoRepair=${state.onToggleAutoRepair}
+        onToggleNotifications=${state.onToggleNotifications}
+      />
+
+      <${WatchdogConsoleCard}
+        activeConsoleTab=${state.activeConsoleTab}
+        stickToBottom=${state.stickToBottom}
+        onSetStickToBottom=${state.setStickToBottom}
+        onSelectConsoleTab=${state.handleSelectConsoleTab}
+        connectingTerminal=${state.connectingTerminal}
+        terminalConnected=${state.terminalConnected}
+        terminalEnded=${state.terminalEnded}
+        terminalStatusText=${state.terminalStatusText}
+        terminalUiSettling=${state.terminalUiSettling}
+        onRestartTerminalSession=${state.onRestartTerminalSession}
+        logsRef=${state.logsRef}
+        logs=${state.logs}
+        loadingLogs=${state.loadingLogs}
+        terminalPanelRef=${state.terminalPanelRef}
+        terminalHostRef=${state.terminalHostRef}
+        terminalInstanceRef=${state.terminalInstanceRef}
+        logsPanelHeightPx=${state.logsPanelHeightPx}
+      />
+
+      <${WatchdogIncidentsCard}
+        events=${state.events}
+        onRefresh=${state.refreshEvents}
+      />
+    </div>
+  `;
+};

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

@@ -0,0 +1,76 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const barColor = (percent) => {
+  if (percent == null) return "bg-gray-600";
+  return "bg-cyan-400";
+};
+
+export const ResourceBar = ({
+  label,
+  percent,
+  detail,
+  segments = null,
+  expanded = false,
+  onToggle = null,
+}) => html`
+  <div
+    class=${onToggle ? "cursor-pointer group" : ""}
+    onclick=${onToggle || undefined}
+  >
+    <span
+      class=${`text-xs text-gray-400 ${onToggle ? "group-hover:text-gray-200 transition-colors" : ""}`}
+      >${label}</span
+    >
+    <div
+      class=${`h-0.5 w-full bg-white/15 rounded-full overflow-hidden mt-1.5 flex ${onToggle ? "group-hover:bg-white/10 transition-colors" : ""}`}
+    >
+      ${expanded && segments
+        ? segments.map(
+            (seg) => html`
+              <div
+                class="h-full"
+                style=${{
+                  width: `${Math.min(100, seg.percent ?? 0)}%`,
+                  backgroundColor: seg.color,
+                  transition:
+                    "width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease",
+                }}
+              ></div>
+            `,
+          )
+        : html`
+            <div
+              class=${`h-full rounded-full ${barColor(percent)}`}
+              style=${{
+                width: `${Math.min(100, percent ?? 0)}%`,
+                transition:
+                  "width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease",
+              }}
+            ></div>
+          `}
+    </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>
+      ${expanded &&
+      segments &&
+      segments
+        .filter((segment) => segment.label)
+        .map(
+          (segment) => html`
+            <span
+              class="inline-flex items-center gap-1 text-xs text-gray-500 font-mono"
+            >
+              <span
+                class="inline-block w-1.5 h-1.5 rounded-full"
+                style=${{ backgroundColor: segment.color }}
+              ></span>
+              ${segment.label}
+            </span>
+          `,
+        )}
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,85 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { formatBytes } from "../helpers.js";
+import { ResourceBar } from "../resource-bar.js";
+
+const html = htm.bind(h);
+
+export const WatchdogResourcesCard = ({
+  resources = null,
+  memoryExpanded = false,
+  onSetMemoryExpanded = () => {},
+}) => {
+  if (!resources) return null;
+  const memorySegments = (() => {
+    const processes = resources.processes;
+    const totalBytes = resources.memory?.totalBytes;
+    const usedBytes = resources.memory?.usedBytes;
+    if (!processes || !totalBytes || !usedBytes) return null;
+    const segments = [];
+    let trackedBytes = 0;
+    if (processes.gateway?.rssBytes != null) {
+      trackedBytes += processes.gateway.rssBytes;
+      segments.push({
+        percent: (processes.gateway.rssBytes / totalBytes) * 100,
+        color: "#22d3ee",
+        label: `Gateway ${formatBytes(processes.gateway.rssBytes)}`,
+      });
+    }
+    if (processes.alphaclaw?.rssBytes != null) {
+      trackedBytes += processes.alphaclaw.rssBytes;
+      segments.push({
+        percent: (processes.alphaclaw.rssBytes / totalBytes) * 100,
+        color: "#a78bfa",
+        label: `AlphaClaw ${formatBytes(processes.alphaclaw.rssBytes)}`,
+      });
+    }
+    const otherBytes = Math.max(0, usedBytes - trackedBytes);
+    if (otherBytes > 0) {
+      segments.push({
+        percent: (otherBytes / totalBytes) * 100,
+        color: "#4b5563",
+        label: `Other ${formatBytes(otherBytes)}`,
+      });
+    }
+    return segments.length ? segments : null;
+  })();
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      ${memoryExpanded
+        ? html`
+            <${ResourceBar}
+              label="Memory"
+              detail=${`${formatBytes(resources.memory?.usedBytes)} / ${formatBytes(resources.memory?.totalBytes)}`}
+              percent=${resources.memory?.percent}
+              expanded=${true}
+              onToggle=${() => onSetMemoryExpanded(false)}
+              segments=${memorySegments}
+            />
+          `
+        : html`
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <${ResourceBar}
+                label="Memory"
+                percent=${resources.memory?.percent}
+                detail=${`${formatBytes(resources.memory?.usedBytes)} / ${formatBytes(resources.memory?.totalBytes)}`}
+                onToggle=${() => onSetMemoryExpanded(true)}
+              />
+              <${ResourceBar}
+                label=${`Disk${resources.disk?.path ? ` (${resources.disk.path})` : ""}`}
+                percent=${resources.disk?.percent}
+                detail=${`${formatBytes(resources.disk?.usedBytes)} / ${formatBytes(resources.disk?.totalBytes)}`}
+              />
+              <${ResourceBar}
+                label=${`CPU${resources.cpu?.cores ? ` (${resources.cpu.cores} vCPU)` : ""}`}
+                percent=${resources.cpu?.percent}
+                detail=${resources.cpu?.percent != null
+                  ? `${resources.cpu.percent}%`
+                  : "—"}
+              />
+            </div>
+          `}
+    </div>
+  `;
+};

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

@@ -0,0 +1,13 @@
+import { useState } from "https://esm.sh/preact/hooks";
+import { usePolling } from "../../../hooks/usePolling.js";
+import { fetchWatchdogResources } from "../../../lib/api.js";
+
+export const useWatchdogResources = () => {
+  const resourcesPoll = usePolling(() => fetchWatchdogResources(), 5000);
+  const [memoryExpanded, setMemoryExpanded] = useState(false);
+  return {
+    resources: resourcesPoll.data?.resources || null,
+    memoryExpanded,
+    setMemoryExpanded,
+  };
+};

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

@@ -0,0 +1,44 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { InfoTooltip } from "../../info-tooltip.js";
+import { ToggleSwitch } from "../../toggle-switch.js";
+
+const html = htm.bind(h);
+
+export const WatchdogSettingsCard = ({
+  settings = {},
+  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."
+        />
+      </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>
+      <${ToggleSwitch}
+        checked=${!!settings.notificationsEnabled}
+        disabled=${savingSettings}
+        onChange=${onToggleNotifications}
+        label=""
+      />
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,117 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import {
+  fetchWatchdogSettings,
+  triggerWatchdogRepair,
+  updateWatchdogSettings,
+} from "../../../lib/api.js";
+import { showToast } from "../../toast.js";
+
+export const useWatchdogSettings = ({
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  onRefreshIncidents = () => {},
+} = {}) => {
+  const [settings, setSettings] = useState({
+    autoRepair: false,
+    notificationsEnabled: true,
+  });
+  const [savingSettings, setSavingSettings] = useState(false);
+  const [repairing, setRepairing] = useState(false);
+  const isRepairInProgress =
+    repairing || !!(watchdogStatus || {})?.operationInProgress;
+
+  useEffect(() => {
+    let active = true;
+    const loadSettings = async () => {
+      try {
+        const data = await fetchWatchdogSettings();
+        if (!active) return;
+        setSettings(
+          data.settings || {
+            autoRepair: false,
+            notificationsEnabled: true,
+          },
+        );
+      } catch (error) {
+        if (!active) return;
+        showToast(error.message || "Could not load watchdog settings", "error");
+      }
+    };
+    loadSettings();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const onToggleAutoRepair = async (nextValue) => {
+    if (savingSettings) return;
+    setSavingSettings(true);
+    try {
+      const data = await updateWatchdogSettings({ autoRepair: !!nextValue });
+      setSettings(
+        data.settings || {
+          ...settings,
+          autoRepair: !!nextValue,
+        },
+      );
+      onRefreshStatuses();
+      showToast(`Auto-repair ${nextValue ? "enabled" : "disabled"}`, "success");
+    } catch (error) {
+      showToast(error.message || "Could not update auto-repair", "error");
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
+  const onToggleNotifications = async (nextValue) => {
+    if (savingSettings) return;
+    setSavingSettings(true);
+    try {
+      const data = await updateWatchdogSettings({
+        notificationsEnabled: !!nextValue,
+      });
+      setSettings(
+        data.settings || {
+          ...settings,
+          notificationsEnabled: !!nextValue,
+        },
+      );
+      onRefreshStatuses();
+      showToast(
+        `Notifications ${nextValue ? "enabled" : "disabled"}`,
+        "success",
+      );
+    } catch (error) {
+      showToast(error.message || "Could not update notifications", "error");
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
+  const onRepair = async () => {
+    if (isRepairInProgress) return;
+    setRepairing(true);
+    try {
+      const data = await triggerWatchdogRepair();
+      if (!data.ok) throw new Error(data.error || "Repair failed");
+      showToast("Repair triggered", "success");
+      setTimeout(() => {
+        onRefreshStatuses();
+        onRefreshIncidents();
+      }, 800);
+    } catch (error) {
+      showToast(error.message || "Could not run repair", "error");
+    } finally {
+      setRepairing(false);
+    }
+  };
+
+  return {
+    settings,
+    savingSettings,
+    isRepairInProgress,
+    onToggleAutoRepair,
+    onToggleNotifications,
+    onRepair,
+  };
+};

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

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