@chrysb/alphaclaw 0.3.1 → 0.3.2-beta.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="771" height="339" alt="image" src="https://github.com/user-attachments/assets/99e194dd-902b-46db-ad0c-aaf723592271" />
+  <img width="771" height="339" alt="image" src="https://github.com/user-attachments/assets/b96b45ab-52f2-4010-bfbe-c640e66b0f36" />
 </p>
 <h1 align="center">AlphaClaw</h1>
 <p align="center">
@@ -47,9 +47,7 @@
 
 ## No Lock-in. Eject Anytime.
 
-AlphaClaw writes standard OpenClaw config (`openclaw.json`, `.env`). Remove AlphaClaw and your agent keeps running — nothing proprietary, nothing to migrate.
-
----
+AlphaClaw simply wraps OpenClaw, it's not a dependency. Remove AlphaClaw and your agent keeps running. Nothing proprietary, nothing to migrate.
 
 ## Quick Start
 

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

@@ -4,6 +4,7 @@ import htm from "https://esm.sh/htm";
 import {
   fetchWatchdogEvents,
   fetchWatchdogLogs,
+  fetchWatchdogResources,
   fetchWatchdogSettings,
   updateWatchdogSettings,
   triggerWatchdogRepair,
@@ -16,9 +17,96 @@ import { showToast } from "./toast.js";
 
 const html = htm.bind(h);
 
+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`;
+};
+
+const barColor = (percent) => {
+  if (percent == null) return "bg-gray-600";
+  if (percent >= 90) return "bg-red-500";
+  if (percent >= 70) return "bg-yellow-400";
+  return "bg-cyan-400";
+};
+
+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-1.5 w-full bg-white/5 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((s) => s.label)
+        .map(
+          (seg) => 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: seg.color }}
+              ></span>
+              ${seg.label}
+            </span>
+          `,
+        )}
+    </div>
+  </div>
+`;
+
 const getIncidentStatusTone = (event) => {
-  const eventType = String(event?.eventType || "").trim().toLowerCase();
-  const status = String(event?.status || "").trim().toLowerCase();
+  const eventType = String(event?.eventType || "")
+    .trim()
+    .toLowerCase();
+  const status = String(event?.status || "")
+    .trim()
+    .toLowerCase();
   if (status === "failed") {
     return {
       dotClass: "bg-red-500/90",
@@ -53,6 +141,8 @@ export const WatchdogTab = ({
   restartSignal = 0,
 }) => {
   const eventsPoll = usePolling(() => fetchWatchdogEvents(20), 15000);
+  const resourcesPoll = usePolling(() => fetchWatchdogResources(), 5000);
+  const [memoryExpanded, setMemoryExpanded] = useState(false);
   const [settings, setSettings] = useState({
     autoRepair: false,
     notificationsEnabled: true,
@@ -66,7 +156,8 @@ export const WatchdogTab = ({
 
   const currentWatchdogStatus = watchdogStatus || {};
   const events = eventsPoll.data?.events || [];
-  const isRepairInProgress = repairing || !!currentWatchdogStatus?.operationInProgress;
+  const isRepairInProgress =
+    repairing || !!currentWatchdogStatus?.operationInProgress;
 
   useEffect(() => {
     let active = true;
@@ -172,7 +263,10 @@ export const WatchdogTab = ({
         },
       );
       onRefreshStatuses();
-      showToast(`Notifications ${nextValue ? "enabled" : "disabled"}`, "success");
+      showToast(
+        `Notifications ${nextValue ? "enabled" : "disabled"}`,
+        "success",
+      );
     } catch (err) {
       showToast(err.message || "Could not update notifications", "error");
     } finally {
@@ -210,6 +304,80 @@ export const WatchdogTab = ({
         repairing=${isRepairInProgress}
       />
 
+      ${(() => {
+        const r = resourcesPoll.data?.resources;
+        if (!r) return null;
+        return html`
+          <div class="bg-surface border border-border rounded-xl p-4">
+            ${memoryExpanded
+              ? html`
+                  <${ResourceBar}
+                    label="Memory"
+                    detail=${`${formatBytes(r.memory?.usedBytes)} / ${formatBytes(r.memory?.totalBytes)}`}
+                    percent=${r.memory?.percent}
+                    expanded=${true}
+                    onToggle=${() => setMemoryExpanded(false)}
+                    segments=${(() => {
+                      const p = r.processes;
+                      const total = r.memory?.totalBytes;
+                      const used = r.memory?.usedBytes;
+                      if (!p || !total || !used) return null;
+                      const segs = [];
+                      let tracked = 0;
+                      if (p.gateway?.rssBytes != null) {
+                        tracked += p.gateway.rssBytes;
+                        segs.push({
+                          percent: (p.gateway.rssBytes / total) * 100,
+                          color: "#22d3ee",
+                          label: `Gateway ${formatBytes(p.gateway.rssBytes)}`,
+                        });
+                      }
+                      if (p.alphaclaw?.rssBytes != null) {
+                        tracked += p.alphaclaw.rssBytes;
+                        segs.push({
+                          percent: (p.alphaclaw.rssBytes / total) * 100,
+                          color: "#a78bfa",
+                          label: `AlphaClaw ${formatBytes(p.alphaclaw.rssBytes)}`,
+                        });
+                      }
+                      const other = Math.max(0, used - tracked);
+                      if (other > 0) {
+                        segs.push({
+                          percent: (other / total) * 100,
+                          color: "#4b5563",
+                          label: `Other ${formatBytes(other)}`,
+                        });
+                      }
+                      return segs.length ? segs : null;
+                    })()}
+                  />
+                `
+              : html`
+                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                    <${ResourceBar}
+                      label="Memory"
+                      percent=${r.memory?.percent}
+                      detail=${`${formatBytes(r.memory?.usedBytes)} / ${formatBytes(r.memory?.totalBytes)}`}
+                      onToggle=${() => setMemoryExpanded(true)}
+                    />
+                    <${ResourceBar}
+                      label="Disk"
+                      percent=${r.disk?.percent}
+                      detail=${`${formatBytes(r.disk?.usedBytes)} / ${formatBytes(r.disk?.totalBytes)}`}
+                    />
+                    <${ResourceBar}
+                      label=${`CPU${r.cpu?.cores ? ` (${r.cpu.cores} core${r.cpu.cores > 1 ? "s" : ""})` : ""}`}
+                      percent=${r.cpu?.percent}
+                      detail=${r.cpu?.percent != null
+                        ? `${r.cpu.percent}%`
+                        : "—"}
+                    />
+                  </div>
+                `}
+          </div>
+        `;
+      })()}
+
       <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">
@@ -229,7 +397,7 @@ export const WatchdogTab = ({
           <div class="inline-flex items-center gap-2 text-xs text-gray-400">
             <span>Notifications</span>
             <${InfoTooltip}
-              text="Sends Telegram notices for watchdog alerts and auto-repair outcomes."
+              text="Sends channel notices for watchdog alerts and auto-repair outcomes."
             />
           </div>
           <${ToggleSwitch}
@@ -256,7 +424,9 @@ export const WatchdogTab = ({
         <pre
           ref=${logsRef}
           class="bg-black/40 border border-border rounded-lg p-3 h-72 overflow-auto text-xs text-gray-300 whitespace-pre-wrap break-words"
-        >${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre>
+        >
+${loadingLogs ? "Loading logs..." : logs || "No logs yet."}</pre
+        >
       </div>
 
       <div class="bg-surface border border-border rounded-xl p-4">
@@ -272,39 +442,43 @@ export const WatchdogTab = ({
         <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>
+          ${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=${`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
-                    >
+                        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>
-                </details>
-              `;
-            },
-          )}
+                </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>
     </div>

package/lib/public/js/lib/api.js

@@ -93,6 +93,11 @@ export async function triggerWatchdogRepair() {
   return parseJsonOrThrow(res, 'Could not trigger watchdog repair');
 }
 
+export async function fetchWatchdogResources() {
+  const res = await authFetch('/api/watchdog/resources');
+  return parseJsonOrThrow(res, 'Could not load system resources');
+}
+
 export async function fetchWatchdogSettings() {
   const res = await authFetch('/api/watchdog/settings');
   return parseJsonOrThrow(res, 'Could not load watchdog settings');

package/lib/server/routes/watchdog.js

@@ -1,3 +1,5 @@
+const { getSystemResources } = require("../system-resources");
+
 const registerWatchdogRoutes = ({
   app,
   requireAuth,
@@ -55,6 +57,15 @@ const registerWatchdogRoutes = ({
     }
   });
 
+  app.get("/api/watchdog/resources", requireAuth, (req, res) => {
+    try {
+      const status = watchdog.getStatus();
+      res.json({ ok: true, resources: getSystemResources({ gatewayPid: status.gatewayPid }) });
+    } catch (err) {
+      res.status(500).json({ ok: false, error: err.message });
+    }
+  });
+
   app.put("/api/watchdog/settings", requireAuth, (req, res) => {
     try {
       const settings = watchdog.updateSettings(req.body || {});

package/lib/server/system-resources.js

@@ -0,0 +1,149 @@
+const os = require("os");
+const fs = require("fs");
+const { execSync } = require("child_process");
+
+const readCgroupFile = (filePath) => {
+  try {
+    return fs.readFileSync(filePath, "utf8").trim();
+  } catch {
+    return null;
+  }
+};
+
+const parseCgroupMemory = () => {
+  const current = readCgroupFile("/sys/fs/cgroup/memory.current");
+  const max = readCgroupFile("/sys/fs/cgroup/memory.max");
+  if (!current) return null;
+  const usedBytes = Number.parseInt(current, 10);
+  if (Number.isNaN(usedBytes)) return null;
+  const limitBytes =
+    max && max !== "max" ? Number.parseInt(max, 10) : null;
+  return {
+    usedBytes,
+    totalBytes: Number.isNaN(limitBytes) ? null : limitBytes,
+  };
+};
+
+const parseCgroupCpu = () => {
+  const stat = readCgroupFile("/sys/fs/cgroup/cpu.stat");
+  if (!stat) return null;
+  const lines = stat.split("\n");
+  const map = {};
+  for (const line of lines) {
+    const [key, val] = line.split(/\s+/);
+    if (key && val) map[key] = Number.parseInt(val, 10);
+  }
+  return {
+    usageUsec: map.usage_usec ?? null,
+    userUsec: map.user_usec ?? null,
+    systemUsec: map.system_usec ?? null,
+  };
+};
+
+const readProcStatus = (pid) => {
+  try {
+    const status = fs.readFileSync(`/proc/${pid}/status`, "utf8");
+    const vmRss = status.match(/VmRSS:\s+(\d+)\s+kB/);
+    return { rssBytes: vmRss ? Number.parseInt(vmRss[1], 10) * 1024 : null };
+  } catch {
+    return null;
+  }
+};
+
+const readPsStats = (pid) => {
+  try {
+    const out = execSync(`ps -o rss=,pcpu= -p ${pid}`, {
+      encoding: "utf8",
+      timeout: 2000,
+      stdio: ["ignore", "pipe", "ignore"],
+    }).trim();
+    const [rss, pcpu] = out.split(/\s+/);
+    return {
+      rssBytes: rss ? Number.parseInt(rss, 10) * 1024 : null,
+      cpuPercent: pcpu ? Number.parseFloat(pcpu) : null,
+    };
+  } catch {
+    return null;
+  }
+};
+
+const getProcessUsage = (pid) => {
+  if (!pid) return null;
+  const proc = readProcStatus(pid);
+  if (proc) return { rssBytes: proc.rssBytes };
+  const ps = readPsStats(pid);
+  if (ps) return { rssBytes: ps.rssBytes };
+  return null;
+};
+
+let prevCpuSnapshot = null;
+let prevCpuSnapshotAt = 0;
+
+const getSystemResources = ({ gatewayPid = null } = {}) => {
+  const cgroupMem = parseCgroupMemory();
+  const mem = {
+    usedBytes: cgroupMem?.usedBytes ?? process.memoryUsage().rss,
+    totalBytes: cgroupMem?.totalBytes ?? os.totalmem(),
+  };
+
+  let diskUsedBytes = null;
+  let diskTotalBytes = null;
+  try {
+    const stat = fs.statfsSync("/");
+    diskTotalBytes = stat.bsize * stat.blocks;
+    diskUsedBytes = stat.bsize * (stat.blocks - stat.bfree);
+  } catch {
+    // statfsSync unavailable
+  }
+
+  const cgroupCpu = parseCgroupCpu();
+  let cpuPercent = null;
+  if (cgroupCpu?.usageUsec != null) {
+    const now = Date.now();
+    if (prevCpuSnapshot && prevCpuSnapshotAt) {
+      const elapsedMs = now - prevCpuSnapshotAt;
+      if (elapsedMs > 0) {
+        const usageDeltaUs = cgroupCpu.usageUsec - prevCpuSnapshot.usageUsec;
+        const elapsedUs = elapsedMs * 1000;
+        cpuPercent = Math.min(100, Math.max(0, (usageDeltaUs / elapsedUs) * 100));
+      }
+    }
+    prevCpuSnapshot = cgroupCpu;
+    prevCpuSnapshotAt = now;
+  } else {
+    const load = os.loadavg();
+    const cpus = os.cpus().length || 1;
+    cpuPercent = Math.min(100, Math.max(0, (load[0] / cpus) * 100));
+  }
+
+  const alphaclawRss = process.memoryUsage().rss;
+  const gatewayUsage = getProcessUsage(gatewayPid);
+  const gatewayRss = gatewayUsage?.rssBytes ?? null;
+
+  return {
+    memory: {
+      usedBytes: mem.usedBytes,
+      totalBytes: mem.totalBytes,
+      percent: mem.totalBytes
+        ? Math.round((mem.usedBytes / mem.totalBytes) * 1000) / 10
+        : null,
+    },
+    disk: {
+      usedBytes: diskUsedBytes,
+      totalBytes: diskTotalBytes,
+      percent: diskTotalBytes
+        ? Math.round((diskUsedBytes / diskTotalBytes) * 1000) / 10
+        : null,
+    },
+    cpu: {
+      percent: cpuPercent != null ? Math.round(cpuPercent * 10) / 10 : null,
+      cores: os.cpus().length,
+    },
+    processes: {
+      alphaclaw: { rssBytes: alphaclawRss },
+      gateway: { rssBytes: gatewayRss, pid: gatewayPid },
+    },
+  };
+};
+
+module.exports = { getSystemResources };

package/lib/server/watchdog.js

@@ -59,6 +59,7 @@ const createWatchdog = ({
     notificationsDisabled: isTruthy(process.env.WATCHDOG_NOTIFICATIONS_DISABLED),
     operationInProgress: false,
     gatewayStartedAt: null,
+    gatewayPid: null,
     crashRecoveryActive: false,
     expectedRestartInProgress: false,
     expectedRestartUntilMs: 0,
@@ -502,13 +503,14 @@ const createWatchdog = ({
     void restartAfterCrash(correlationId);
   };
 
-  const onGatewayLaunch = ({ startedAt = Date.now() } = {}) => {
+  const onGatewayLaunch = ({ startedAt = Date.now(), pid = null } = {}) => {
     state.lifecycle = "running";
     state.health = "unknown";
     state.crashRecoveryActive = false;
     clearExpectedRestartWindow();
     state.uptimeStartedAt = startedAt;
     state.gatewayStartedAt = startedAt;
+    state.gatewayPid = pid;
     startBootstrapHealthChecks();
   };
 
@@ -566,6 +568,7 @@ const createWatchdog = ({
       crashLoopThreshold: kWatchdogCrashLoopThreshold,
       crashLoopWindowMs: kWatchdogCrashLoopWindowMs,
       operationInProgress: state.operationInProgress,
+      gatewayPid: state.gatewayPid,
     };
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.3.1",
+  "version": "0.3.2-beta.0",
   "publishConfig": {
     "access": "public"
   },