@chrysb/alphaclaw 0.3.0 → 0.3.2-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 chrysb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+<p align="center">
+  <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">
+  <strong>The ops layer for OpenClaw. Deploy in minutes. Stay running for months.</strong><br>
+  <strong>Observability. Reliability. Agent discipline. Zero SSH rescue missions.</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/chrysb/alphaclaw/actions/workflows/ci.yml"><img src="https://github.com/chrysb/alphaclaw/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
+  <a href="https://www.npmjs.com/package/@chrysb/alphaclaw"><img src="https://img.shields.io/npm/v/@chrysb/alphaclaw" alt="npm version" /></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License: MIT" /></a>
+</p>
+
+<p align="center">AlphaClaw wraps <a href="https://github.com/openclaw/openclaw">OpenClaw</a> with a convenient setup wizard, self-healing watchdog, Git-backed rollback, and full browser-based observability. Ships with anti-drift prompt hardening to keep your agent disciplined, and simplifies integrations (e.g. Google Workspace, Telegram Topics) so you can manage everything from one UI instead of config files.</p>
+
+<p align="center"><em>First deploy to first message in under five minutes.</em></p>
+
+<p align="center">
+  <a href="https://railway.com/deploy/openclaw-fast-start?referralCode=jcFhp_&utm_medium=integration&utm_source=template&utm_campaign=generic"><img src="https://railway.com/button.svg" alt="Deploy on Railway" /></a>
+  <a href="https://render.com/deploy?repo=https://github.com/chrysb/openclaw-render-template"><img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" /></a>
+</p>
+
+> **Platform:** AlphaClaw currently targets Docker/Linux deployments. macOS local development is not yet supported.
+
+## Features
+
+- **Setup UI:** Password-protected web dashboard for onboarding, configuration, and day-to-day management.
+- **Guided Onboarding:** Step-by-step setup wizard — model selection, provider credentials, GitHub repo, channel pairing.
+- **Gateway Manager:** Spawns, monitors, restarts, and proxies the OpenClaw gateway as a managed child process.
+- **Watchdog:** Crash detection, crash-loop recovery, auto-repair (`openclaw doctor --fix`), and Telegram/Discord notifications.
+- **Channel Orchestration:** Telegram and Discord bot pairing, credential sync, and a guided wizard for splitting Telegram into multi-threaded topic groups as your usage grows.
+- **Webhooks:** Named webhook endpoints with per-hook transform modules, request logging, and payload inspection.
+- **Google Workspace:** OAuth integration for Gmail, Calendar, Drive, Docs, Sheets, Tasks, Contacts, and Meet.
+- **Prompt Hardening:** Ships anti-drift bootstrap prompts (`AGENTS.md`, `TOOLS.md`) injected into your agent's system prompt on every message — enforcing safe practices, commit discipline, and change summaries out of the box.
+- **Git Sync:** Automatic hourly commits of your OpenClaw workspace to GitHub with configurable cron schedule. Combined with prompt hardening, every agent action is version-controlled and auditable.
+- **Version Management:** In-place updates for both AlphaClaw and OpenClaw with changelog review and one-click apply.
+- **Codex OAuth:** Built-in PKCE flow for OpenAI Codex CLI model access.
+
+## Why AlphaClaw
+
+- **Zero to production in one deploy:** Railway/Render templates ship a complete stack — no manual gateway setup.
+- **Self-healing:** Watchdog detects crashes, enters repair mode, relaunches the gateway, and notifies you.
+- **Everything in the browser:** No SSH, no config files to hand-edit, no CLI required after first deploy.
+- **Stays out of the way:** AlphaClaw manages infrastructure; OpenClaw handles the AI.
+
+## No Lock-in. Eject Anytime.
+
+AlphaClaw simply wraps OpenClaw, it's not a dependency. Remove AlphaClaw and your agent keeps running. Nothing proprietary, nothing to migrate.
+
+## Quick Start
+
+### Deploy (recommended)
+
+[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/deploy/openclaw-fast-start?referralCode=jcFhp_&utm_medium=integration&utm_source=template&utm_campaign=generic)
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/chrysb/openclaw-render-template)
+
+Set `SETUP_PASSWORD` at deploy time and visit your deployment URL. The welcome wizard handles the rest.
+
+### Local / Docker
+
+```bash
+npm install @chrysb/alphaclaw
+npx alphaclaw start
+```
+
+Or with Docker:
+
+```dockerfile
+FROM node:22-slim
+RUN apt-get update && apt-get install -y git curl procps cron && rm -rf /var/lib/apt/lists/*
+WORKDIR /app
+COPY package.json ./
+RUN npm install --omit=dev
+ENV PATH="/app/node_modules/.bin:$PATH"
+ENV ALPHACLAW_ROOT_DIR=/data
+EXPOSE 3000
+CMD ["alphaclaw", "start"]
+```
+
+## Setup UI
+
+| Tab           | What it manages                                                                                            |
+| ------------- | ---------------------------------------------------------------------------------------------------------- |
+| **General**   | Gateway status, channel health, pending pairings, Google Workspace, repo sync schedule, OpenClaw dashboard |
+| **Watchdog**  | Health monitoring, crash-loop status, auto-repair toggle, notifications toggle, event log, live log tail   |
+| **Providers** | AI provider credentials (Anthropic, OpenAI, Gemini, Mistral, Voyage, Groq, Deepgram) and model selection   |
+| **Envars**    | Environment variables — view, edit, add — with gateway restart prompts                                     |
+| **Webhooks**  | Webhook endpoints, transform modules, request history, payload inspection                                  |
+
+## CLI
+
+| Command                                                    | Description                                   |
+| ---------------------------------------------------------- | --------------------------------------------- |
+| `alphaclaw start`                                          | Start the server (Setup UI + gateway manager) |
+| `alphaclaw git-sync -m "message"`                          | Commit and push the OpenClaw workspace        |
+| `alphaclaw telegram topic add --thread <id> --name <text>` | Register a Telegram topic mapping             |
+| `alphaclaw version`                                        | Print version                                 |
+| `alphaclaw help`                                           | Show help                                     |
+
+## Architecture
+
+```mermaid
+graph TD
+    subgraph AlphaClaw
+        UI["Setup UI<br/><small>Preact + htm + Wouter</small>"]
+        WD["Watchdog<br/><small>Crash recovery · Notifications</small>"]
+        WH["Webhooks<br/><small>Transforms · Request logging</small>"]
+        UI --> API
+        WD --> API
+        WH --> API
+        API["Express Server<br/><small>JSON APIs · Auth · Proxy</small>"]
+    end
+
+    API -- "proxy" --> GW["OpenClaw Gateway<br/><small>Child process · 127.0.0.1:18789</small>"]
+    GW --> DATA["ALPHACLAW_ROOT_DIR<br/><small>.openclaw/ · .env · logs · SQLite</small>"]
+```
+
+## Watchdog
+
+The built-in watchdog monitors gateway health and recovers from failures automatically.
+
+| Capability                  | Details                                                        |
+| --------------------------- | -------------------------------------------------------------- |
+| **Health checks**           | Periodic `openclaw health` with configurable interval          |
+| **Crash detection**         | Listens for gateway exit events                                |
+| **Crash-loop detection**    | Threshold-based (default: 3 crashes in 300s)                   |
+| **Auto-repair**             | Runs `openclaw doctor --fix --yes`, relaunches gateway         |
+| **Notifications**           | Telegram and Discord alerts for crashes, repairs, and recovery |
+| **Event log**               | SQLite-backed incident history with API and UI access          |
+
+## Environment Variables
+
+| Variable                          | Required | Description                                        |
+| --------------------------------- | -------- | -------------------------------------------------- |
+| `SETUP_PASSWORD`                  | Yes      | Password for the Setup UI                          |
+| `OPENCLAW_GATEWAY_TOKEN`          | Auto     | Gateway auth token (auto-generated if unset)       |
+| `GITHUB_TOKEN`                    | Yes      | GitHub PAT for workspace repo                      |
+| `GITHUB_WORKSPACE_REPO`           | Yes      | GitHub repo for workspace sync (e.g. `owner/repo`) |
+| `TELEGRAM_BOT_TOKEN`              | Optional | Telegram bot token                                 |
+| `DISCORD_BOT_TOKEN`               | Optional | Discord bot token                                  |
+| `WATCHDOG_AUTO_REPAIR`            | Optional | Enable auto-repair on crash (`true`/`false`)       |
+| `WATCHDOG_NOTIFICATIONS_DISABLED` | Optional | Disable watchdog notifications (`true`/`false`)    |
+| `PORT`                            | Optional | Server port (default `3000`)                       |
+| `ALPHACLAW_ROOT_DIR`              | Optional | Data directory (default `/data`)                   |
+| `TRUST_PROXY_HOPS`                | Optional | Trust proxy hop count for correct client IP        |
+
+## Security Notes
+
+AlphaClaw is a convenience wrapper — it intentionally trades some of OpenClaw's default hardening for ease of setup. You should understand what's different:
+
+| Area                    | What AlphaClaw does                                                                                                                   | Trade-off                                                                                              |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| **Setup password**      | All gateway access is gated behind a single `SETUP_PASSWORD`. Brute-force protection is built in (exponential backoff lockout).       | Simpler than OpenClaw's pairing code flow, but the password must be strong.                            |
+| **One-click pairing**   | Channel pairings (Telegram/Discord) can be approved from the Setup UI instead of the CLI.                                             | No terminal access required, but anyone with the setup password can approve pairings.                  |
+| **Auto CLI approval**   | The first CLI device pairing is auto-approved so you can connect without a second screen. Subsequent requests appear in the UI.       | Removes the manual pairing step for the initial CLI connection.                                        |
+| **Query-string tokens** | Webhook URLs support `?token=<WEBHOOK_TOKEN>` for providers that don't support `Authorization` headers. Warnings are shown in the UI. | Tokens may appear in server logs and referrer headers. Use header auth when your provider supports it. |
+| **Gateway token**       | `OPENCLAW_GATEWAY_TOKEN` is auto-generated and injected into the environment so the proxy can authenticate with the gateway.          | The token lives in the `.env` file on the server — standard for managed deployments but worth noting.  |
+
+If you need OpenClaw's full security posture (manual pairing codes, no query-string tokens, no auto-approval), use OpenClaw directly without AlphaClaw.
+
+## Development
+
+```bash
+npm install
+npm test                # Full suite (90 tests)
+npm run test:watchdog   # Watchdog-focused suite (14 tests)
+npm run test:watch      # Watch mode
+npm run test:coverage   # Coverage report
+```
+
+**Requirements:** Node.js ≥ 22.12.0
+
+## License
+
+MIT

package/lib/public/css/theme.css

@@ -48,6 +48,53 @@ body::before {
   color: var(--text-muted);
 }
 
+/* Shared collapsible history rows (incidents, webhook requests). */
+.ac-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ac-history-item {
+  border: 1px solid var(--panel-border-contrast);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.ac-history-summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 8px 10px;
+  color: #d1d5db;
+}
+
+.ac-history-summary::-webkit-details-marker {
+  display: none;
+}
+
+.ac-history-summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.ac-history-toggle {
+  color: var(--text-muted);
+  transition: transform 0.15s ease, color 0.15s ease;
+}
+
+.ac-history-item[open] .ac-history-toggle {
+  transform: rotate(90deg);
+  color: #d1d5db;
+}
+
+.ac-history-body {
+  margin: 4px 10px 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--panel-border-contrast);
+}
+
 /* Unified panel treatment across tabs/pages. */
 .bg-surface {
   background: var(--panel-bg-contrast) !important;

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}
@@ -243,7 +411,7 @@ export const WatchdogTab = ({
 
       <div class="bg-surface border border-border rounded-xl p-4">
         <div class="flex items-center justify-between gap-2 mb-3">
-          <h2 class="font-semibold text-sm">Logs</h2>
+          <h2 class="card-label">Logs</h2>
           <label class="inline-flex items-center gap-2 text-xs text-gray-400">
             <input
               type="checkbox"
@@ -256,12 +424,14 @@ 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">
         <div class="flex items-center justify-between gap-2 mb-3">
-          <h2 class="font-semibold text-sm">Recent incidents</h2>
+          <h2 class="card-label">Recent incidents</h2>
           <button
             class="text-xs text-gray-400 hover:text-gray-200"
             onclick=${() => eventsPoll.refresh()}
@@ -269,42 +439,46 @@ export const WatchdogTab = ({
             Refresh
           </button>
         </div>
-        <div class="space-y-2">
+        <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="border border-border rounded-lg p-2">
-                  <summary class="cursor-pointer text-xs text-gray-300 list-none [&::-webkit-details-marker]:hidden">
-                    <div class="flex items-center justify-between gap-2">
-                      <span class="inline-flex items-center gap-2 min-w-0">
-                        <span class="text-gray-500 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="mt-2 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/components/webhooks.js

@@ -48,10 +48,10 @@ const formatLastReceived = (value) => {
 
 const formatBytes = (size) => {
   const bytes = Number(size || 0);
-  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0B";
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 };
 
 const healthClassName = (health) => {
@@ -60,10 +60,24 @@ const healthClassName = (health) => {
   return "bg-green-500";
 };
 
-const statusBadgeClass = (status) =>
-  status === "success"
-    ? "bg-green-500/10 text-green-300 border border-green-500/30"
-    : "bg-red-500/10 text-red-300 border border-red-500/30";
+const getRequestStatusTone = (status) => {
+  if (status === "success") {
+    return {
+      dotClass: "bg-green-500/90",
+      textClass: "text-green-500/90",
+    };
+  }
+  if (status === "error") {
+    return {
+      dotClass: "bg-red-500/90",
+      textClass: "text-red-500/90",
+    };
+  }
+  return {
+    dotClass: "bg-gray-500/70",
+    textClass: "text-gray-400",
+  };
+};
 
 const jsonPretty = (value) => {
   if (typeof value === "string") {
@@ -349,11 +363,11 @@ export const Webhooks = ({
     onRestartRequired,
   ]);
 
-  const toggleRow = useCallback((id) => {
+  const handleRequestRowToggle = useCallback((id, isOpen) => {
     setExpandedRows((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
+      if (isOpen) next.add(id);
+      else next.delete(id);
       return next;
     });
   }, []);
@@ -707,7 +721,7 @@ export const Webhooks = ({
               class="bg-surface border border-border rounded-xl p-4 space-y-3"
             >
               <div class="flex items-center justify-between gap-3">
-                <h3 class="font-semibold text-sm">Request history</h3>
+                <h3 class="card-label">Request history</h3>
                 <div class="flex items-center gap-2">
                   ${kStatusFilters.map(
                     (filter) => html`
@@ -734,37 +748,51 @@ export const Webhooks = ({
                     No requests logged yet.
                   </p>`
                 : html`
-                    <div class="divide-y divide-border">
+                    <div class="ac-history-list">
                       ${requests.map(
-                        (item) => html`
-                          <div class="py-2">
-                            <button
-                              class="w-full text-left"
-                              onclick=${() => toggleRow(item.id)}
-                            >
-                              <div
-                                class="flex items-center justify-between gap-3"
-                              >
-                                <div class="text-xs text-gray-300">
-                                  ${formatLastReceived(item.createdAt)}
-                                </div>
-                                <div class="flex items-center gap-2">
+                        (item) => {
+                          const statusTone = getRequestStatusTone(item.status);
+                          return html`
+                          <details
+                            class="ac-history-item"
+                            open=${expandedRows.has(item.id)}
+                            ontoggle=${(e) =>
+                              handleRequestRowToggle(
+                                item.id,
+                                !!e.currentTarget?.open,
+                              )}
+                          >
+                            <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 text-xs text-gray-300">
+                                    ${formatLastReceived(item.createdAt)}
+                                  </span>
+                                </span>
+                                <span class="inline-flex items-center gap-2 shrink-0">
                                   <span class="text-xs text-gray-500"
                                     >${formatBytes(item.payloadSize)}</span
                                   >
                                   <span
-                                    class="text-[11px] px-2 py-0.5 rounded ${statusBadgeClass(
-                                      item.status,
-                                    )}"
+                                    class=${`text-xs font-medium ${statusTone.textClass}`}
+                                    >${item.gatewayStatus || "n/a"}</span
                                   >
-                                    ${item.status}
+                                  <span class="inline-flex items-center">
+                                    <span
+                                      class=${`h-2.5 w-2.5 rounded-full ${statusTone.dotClass}`}
+                                      title=${item.status || "unknown"}
+                                      aria-label=${item.status || "unknown"}
+                                    ></span>
                                   </span>
-                                </div>
+                                </span>
                               </div>
-                            </button>
+                            </summary>
                             ${expandedRows.has(item.id)
                               ? html`
-                                  <div class="mt-2 space-y-3">
+                                  <div class="ac-history-body space-y-3">
                                     <div>
                                       <p class="text-[11px] text-gray-500 mb-1">
                                         Headers
@@ -852,8 +880,9 @@ ${jsonPretty(item.gatewayBody)}</pre
                                   </div>
                                 `
                               : null}
-                          </div>
-                        `,
+                          </details>
+                        `;
+                        },
                       )}
                     </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/constants.js

@@ -143,6 +143,8 @@ const kSystemVars = new Set([
   "OPENCLAW_GATEWAY_TOKEN",
   "SETUP_PASSWORD",
   "PORT",
+  "WATCHDOG_AUTO_REPAIR",
+  "WATCHDOG_NOTIFICATIONS_DISABLED",
 ]);
 const kKnownVars = [
   {

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,10 +1,19 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.3.0",
+  "version": "0.3.2-beta.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "Setup UI, gateway manager, and onboarding wrapper for OpenClaw",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chrysb/alphaclaw.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chrysb/alphaclaw/issues"
+  },
+  "homepage": "https://github.com/chrysb/alphaclaw#readme",
+  "license": "MIT",
   "bin": {
     "alphaclaw": "bin/alphaclaw.js"
   },