@chrysb/alphaclaw 0.2.2 → 0.3.0

package/lib/public/js/components/channels.js

@@ -23,10 +23,13 @@ export function Channels({ channels, onSwitchTab, onNavigate }) {
             badge = html`<a
               href="#"
               onclick=${(e) => { e.preventDefault(); onSwitchTab?.('envars'); }}
-              class="text-xs text-gray-500 hover:text-gray-300"
+              class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
             >Add token</a>`;
           } else if (info.status === 'paired') {
-            badge = html`<${Badge} tone="success">Paired (${info.paired})</${Badge}>`;
+            const pairedCount = Number(info.paired || 0);
+            badge = html`<${Badge} tone="success"
+              >${ch === 'telegram' || pairedCount <= 1 ? 'Paired' : `Paired (${pairedCount})`}</${Badge
+            }>`;
           } else {
             badge = html`<${Badge} tone="warning">Awaiting pairing</${Badge}>`;
           }
@@ -39,15 +42,21 @@ export function Channels({ channels, onSwitchTab, onNavigate }) {
                 ? html`<img src=${channelMeta.iconSrc} alt="" class="w-4 h-4 rounded-sm" aria-hidden="true" />`
                 : null}
               ${channelMeta.label}
-            </span>
-            <span class="flex items-center gap-2">
-              ${badge}
               ${isClickable && html`
-                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" class="text-gray-600">
-                  <path d="M5.646 3.354a.5.5 0 01.708 0l4.5 4.5a.5.5 0 010 .708l-4.5 4.5a.5.5 0 01-.708-.708L9.793 8 5.646 3.854a.5.5 0 010-.5z"/>
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-gray-600">
+                  <path
+                    d="M6 3.5L10.5 8L6 12.5"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
                 </svg>
               `}
             </span>
+            <span class="flex items-center gap-2">
+              ${badge}
+            </span>
           </div>`;
         }) : html`<div class="text-gray-500 text-sm text-center py-2">Loading...</div>`}
       </div>

package/lib/public/js/components/confirm-dialog.js

@@ -1,6 +1,7 @@
 import { h } from "https://esm.sh/preact";
 import { useEffect } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
+import { ActionButton } from "./action-button.js";
 
 const html = htm.bind(h);
 
@@ -8,11 +9,15 @@ export const ConfirmDialog = ({
   visible = false,
   title = "Confirm action",
   message = "Are you sure you want to continue?",
+  details = null,
   confirmLabel = "Confirm",
+  confirmLoadingLabel = "Working...",
   cancelLabel = "Cancel",
   onConfirm,
   onCancel,
   confirmTone = "primary",
+  confirmLoading = false,
+  confirmDisabled = false,
 }) => {
   useEffect(() => {
     if (!visible) return;
@@ -28,11 +33,7 @@ export const ConfirmDialog = ({
   }, [visible, onCancel]);
 
   if (!visible) return null;
-
-  const confirmClass =
-    confirmTone === "warning"
-      ? "border border-yellow-500/45 text-yellow-300 bg-[linear-gradient(180deg,rgba(234,179,8,0.22)_0%,rgba(234,179,8,0.12)_100%)] shadow-[inset_0_0_0_1px_rgba(234,179,8,0.18)] hover:border-yellow-300/75 hover:text-yellow-200 hover:bg-[linear-gradient(180deg,rgba(234,179,8,0.3)_0%,rgba(234,179,8,0.16)_100%)] hover:shadow-[inset_0_0_0_1px_rgba(234,179,8,0.26),0_0_12px_rgba(234,179,8,0.16)]"
-      : "ac-btn-cyan";
+  const actionTone = confirmTone === "warning" ? "warning" : "primary";
 
   return html`
     <div
@@ -44,21 +45,26 @@ export const ConfirmDialog = ({
       <div class="bg-modal border border-border rounded-xl p-5 max-w-md w-full space-y-3">
         <h2 class="text-base font-semibold">${title}</h2>
         <p class="text-sm text-gray-400">${message}</p>
+        ${details}
         <div class="pt-1 flex items-center justify-end gap-2">
-          <button
-            type="button"
-            onclick=${onCancel}
-            class="px-4 py-2 rounded-lg text-sm ac-btn-secondary"
-          >
-            ${cancelLabel}
-          </button>
-          <button
-            type="button"
-            onclick=${onConfirm}
-            class="px-4 py-2 rounded-lg text-sm transition-all ${confirmClass}"
-          >
-            ${confirmLabel}
-          </button>
+          <${ActionButton}
+            onClick=${onCancel}
+            disabled=${confirmLoading}
+            tone="secondary"
+            size="md"
+            idleLabel=${cancelLabel}
+            className="px-4 py-2 rounded-lg text-sm"
+          />
+          <${ActionButton}
+            onClick=${onConfirm}
+            disabled=${confirmDisabled}
+            loading=${confirmLoading}
+            tone=${actionTone}
+            size="md"
+            idleLabel=${confirmLabel}
+            loadingLabel=${confirmLoadingLabel}
+            className="px-4 py-2 rounded-lg text-sm"
+          />
         </div>
       </div>
     </div>

package/lib/public/js/components/credentials-modal.js

@@ -3,6 +3,10 @@ import { useState, useRef } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { saveGoogleCredentials } from "../lib/api.js";
 import { SecretInput } from "./secret-input.js";
+import { ModalShell } from "./modal-shell.js";
+import { PageHeader } from "./page-header.js";
+import { ActionButton } from "./action-button.js";
+import { CloseIcon } from "./icons.js";
 const html = htm.bind(h);
 
 export const CredentialsModal = ({ visible, onClose, onSaved }) => {
@@ -93,16 +97,25 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
     </div>
   `;
 
-  return html` <div
-    class="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50"
-    onclick=${(e) => {
-      if (e.target === e.currentTarget) onClose();
-    }}
+  return html` <${ModalShell}
+    visible=${visible}
+    onClose=${onClose}
+    closeOnOverlayClick=${false}
+    panelClassName="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
   >
-    <div
-      class="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
-    >
-      <h2 class="text-lg font-semibold">Connect Google Workspace</h2>
+      <${PageHeader}
+        title="Connect Google Workspace"
+        actions=${html`
+          <button
+            type="button"
+            onclick=${onClose}
+            class="h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
+            aria-label="Close modal"
+          >
+            <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+          </button>
+        `}
+      />
       <div class="space-y-3">
         <div>
           <p class="text-gray-400 text-sm mb-3">
@@ -319,21 +332,17 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
         </div>
       </div>
       <div class="flex gap-2 pt-2">
-        <button
-          onclick=${submit}
+        <${ActionButton}
+          onClick=${submit}
           disabled=${saving}
-          class="flex-1 font-medium py-2 rounded-lg text-sm ac-btn-cyan"
-        >
-          ${saving ? "Saving..." : "Connect Google"}
-        </button>
-        <button
-          onclick=${onClose}
-          class="px-4 py-2 rounded-lg text-sm ac-btn-secondary"
-        >
-          Cancel
-        </button>
+          loading=${saving}
+          tone="primary"
+          size="lg"
+          idleLabel="Connect Google"
+          loadingLabel="Saving..."
+          className="w-full px-4 py-2 rounded-lg text-sm"
+        />
       </div>
       ${error ? html`<div class="text-red-400 text-xs">${error}</div>` : null}
-    </div>
-  </div>`;
+  </${ModalShell}>`;
 };

package/lib/public/js/components/device-pairings.js

@@ -1,6 +1,7 @@
 import { h } from 'https://esm.sh/preact';
 import { useState } from 'https://esm.sh/preact/hooks';
 import htm from 'https://esm.sh/htm';
+import { ActionButton } from './action-button.js';
 const html = htm.bind(h);
 
 const kModeLabels = {
@@ -55,8 +56,20 @@ const DeviceRow = ({ d, onApprove, onReject }) => {
         ${subtitle && html`<span class="text-xs text-gray-500">${subtitle}</span>`}
       </div>
       <div class="flex gap-2">
-        <button onclick=${() => handle('approve')} class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg">Approve</button>
-        <button onclick=${() => handle('reject')} class="bg-gray-800 text-gray-300 text-xs px-3 py-1.5 rounded-lg hover:bg-gray-700">Reject</button>
+        <${ActionButton}
+          onClick=${() => handle('approve')}
+          tone="success"
+          size="sm"
+          idleLabel="Approve"
+          className="font-medium px-3 py-1.5"
+        />
+        <${ActionButton}
+          onClick=${() => handle('reject')}
+          tone="secondary"
+          size="sm"
+          idleLabel="Reject"
+          className="font-medium px-3 py-1.5"
+        />
       </div>
     </div>`;
 };

package/lib/public/js/components/envars.js

@@ -1,9 +1,11 @@
 import { h } from "https://esm.sh/preact";
 import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { fetchEnvVars, saveEnvVars, restartGateway } from "../lib/api.js";
+import { fetchEnvVars, saveEnvVars } from "../lib/api.js";
 import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
+import { PageHeader } from "./page-header.js";
+import { ActionButton } from "./action-button.js";
 const html = htm.bind(h);
 
 const kGroupLabels = {
@@ -80,13 +82,11 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
   `;
 };
 
-export const Envars = () => {
+export const Envars = ({ onRestartRequired = () => {} }) => {
   const [vars, setVars] = useState([]);
   const [reservedKeys, setReservedKeys] = useState(() => new Set());
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [restartingGateway, setRestartingGateway] = useState(false);
-  const [restartRequired, setRestartRequired] = useState(false);
   const [newKey, setNewKey] = useState("");
   const baselineSignatureRef = useRef("[]");
 
@@ -97,7 +97,7 @@ export const Envars = () => {
       baselineSignatureRef.current = getVarsSignature(nextVars);
       setVars(nextVars);
       setReservedKeys(new Set(data.reservedKeys || []));
-      setRestartRequired(!!data.restartRequired);
+      onRestartRequired(!!data.restartRequired);
     } catch (err) {
       console.error("Failed to load env vars:", err);
     }
@@ -128,7 +128,7 @@ export const Envars = () => {
         .map((v) => ({ key: v.key, value: v.value }));
       const result = await saveEnvVars(toSave);
       const needsRestart = !!result?.restartRequired;
-      setRestartRequired(needsRestart);
+      if (needsRestart) onRestartRequired(true);
       showToast(
         needsRestart
           ? "Environment variables saved. Restart gateway to apply."
@@ -144,20 +144,6 @@ export const Envars = () => {
     }
   };
 
-  const handleRestartGateway = async () => {
-    if (restartingGateway) return;
-    setRestartingGateway(true);
-    try {
-      await restartGateway();
-      setRestartRequired(false);
-      showToast("Gateway restarted", "success");
-    } catch (err) {
-      showToast("Restart failed: " + err.message, "error");
-    } finally {
-      setRestartingGateway(false);
-    }
-  };
-
   const [newVal, setNewVal] = useState("");
 
   const parsePaste = (input) => {
@@ -281,6 +267,22 @@ export const Envars = () => {
 
   return html`
     <div class="space-y-4">
+      <${PageHeader}
+        title="Envars"
+        actions=${html`
+          <${ActionButton}
+            onClick=${handleSave}
+            disabled=${!dirty || saving}
+            loading=${saving}
+            tone="primary"
+            size="sm"
+            idleLabel="Save changes"
+            loadingLabel="Saving..."
+            className="transition-all"
+          />
+        `}
+      />
+
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
         .map(
@@ -341,51 +343,6 @@ export const Envars = () => {
         </div>
       </div>
 
-      ${restartRequired
-        ? html`<div
-            class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4 flex items-center justify-between gap-3"
-          >
-            <p class="text-sm text-yellow-200">
-              Gateway restart required to apply env changes.
-            </p>
-            <button
-              onclick=${handleRestartGateway}
-              disabled=${restartingGateway}
-              class="text-xs px-2.5 py-1 rounded-lg border border-yellow-500/40 text-yellow-200 hover:border-yellow-400 hover:text-yellow-100 transition-colors shrink-0 ${restartingGateway
-                ? "opacity-60 cursor-not-allowed"
-                : ""}"
-            >
-              ${restartingGateway ? "Restarting..." : "Restart Gateway"}
-            </button>
-          </div>`
-        : null}
-
-      <button
-        onclick=${handleSave}
-        disabled=${!dirty || saving || restartingGateway}
-        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ac-btn-cyan"
-      >
-        ${saving
-          ? html`<span class="flex items-center justify-center gap-2">
-              <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-                <circle
-                  class="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  stroke-width="4"
-                />
-                <path
-                  class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-              Saving...
-            </span>`
-          : "Save changes"}
-      </button>
     </div>
   `;
 };

package/lib/public/js/components/features.js

@@ -63,7 +63,7 @@ export const Features = ({ onSwitchTab }) => {
                           e.preventDefault();
                           onSwitchTab?.("providers");
                         }}
-                        class="text-xs text-gray-500 hover:text-gray-300"
+                        class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
                       >Add provider</a>
                       <${Badge} tone=${feature.hasDefault ? "neutral" : "danger"}>Disabled</${Badge}>
                     </span>

package/lib/public/js/components/gateway.js

@@ -1,16 +1,29 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   fetchOpenclawVersion,
-  restartGateway,
   updateOpenclaw,
 } from "../lib/api.js";
-import { showToast } from "./toast.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
+import { showToast } from "./toast.js";
 const html = htm.bind(h);
 
+const formatDuration = (ms) => {
+  const safeMs = Number(ms || 0);
+  if (!Number.isFinite(safeMs) || safeMs <= 0) return "0s";
+  const totalSeconds = Math.floor(safeMs / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (days > 0) return `${days}d ${hours % 24}h ${minutes}m ${seconds}s`;
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+};
+
 function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
   const [checking, setChecking] = useState(false);
   const [version, setVersion] = useState(currentVersion || null);
@@ -140,7 +153,12 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
             ? `${version}`
             : "..."}
         </p>
-        ${error && html`<p class="text-xs text-yellow-500 mt-1">${error}</p>`}
+        ${error && effectiveHasUpdate &&
+        html`<div
+          class="mt-1 text-xs text-red-300 bg-red-900/30 border border-red-800 rounded-lg px-2 py-1"
+        >
+          ${error}
+        </div>`}
       </div>
       <div class="flex items-center gap-2 shrink-0">
         ${effectiveHasUpdate && effectiveLatestVersion && html`
@@ -212,44 +230,133 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
   `;
 }
 
-export function Gateway({ status, openclawVersion }) {
-  const [restarting, setRestarting] = useState(false);
+export function Gateway({
+  status,
+  openclawVersion,
+  restarting = false,
+  onRestart,
+  watchdogStatus = null,
+  onOpenWatchdog,
+  onRepair,
+  repairing = false,
+}) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
   const isRunning = status === "running" && !restarting;
   const dotClass = isRunning
-    ? "w-2 h-2 rounded-full bg-green-500"
+    ? "ac-status-dot ac-status-dot--healthy"
     : "w-2 h-2 rounded-full bg-yellow-500 animate-pulse";
-
-  const handleRestart = async () => {
-    if (restarting) return;
-    setRestarting(true);
-    try {
-      await restartGateway();
-      showToast("Gateway restarted", "success");
-    } catch (err) {
-      showToast("Restart failed: " + err.message, "error");
+  const watchdogHealth = watchdogStatus?.lifecycle === "crash_loop"
+    ? "crash_loop"
+    : watchdogStatus?.health;
+  const watchdogDotClass = watchdogHealth === "healthy"
+    ? "ac-status-dot ac-status-dot--healthy ac-status-dot--healthy-offset"
+    : watchdogHealth === "degraded"
+      ? "bg-yellow-500"
+      : watchdogHealth === "unhealthy" || watchdogHealth === "crash_loop"
+        ? "bg-red-500"
+        : "bg-gray-500";
+  const watchdogLabel = watchdogHealth === "unknown"
+    ? "initializing"
+    : watchdogHealth || "unknown";
+  const isRepairInProgress = repairing || !!watchdogStatus?.operationInProgress;
+  const showRepairButton =
+    isRepairInProgress ||
+    watchdogStatus?.lifecycle === "crash_loop" ||
+    watchdogStatus?.health === "degraded" ||
+    watchdogStatus?.health === "unhealthy" ||
+    watchdogStatus?.health === "crashed";
+  const liveUptimeMs = useMemo(() => {
+    const startedAtMs = watchdogStatus?.uptimeStartedAt
+      ? Date.parse(watchdogStatus.uptimeStartedAt)
+      : null;
+    if (Number.isFinite(startedAtMs)) {
+      return Math.max(0, nowMs - startedAtMs);
     }
-    setRestarting(false);
-  };
+    return watchdogStatus?.uptimeMs || 0;
+  }, [watchdogStatus?.uptimeStartedAt, watchdogStatus?.uptimeMs, nowMs]);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setNowMs(Date.now());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
 
   return html` <div class="bg-surface border border-border rounded-xl p-4">
-    <div class="flex items-start justify-between gap-3">
-      <div class="min-w-0">
-        <div class="flex items-center gap-2">
+    <div class="space-y-2">
+      <div class="flex items-center justify-between gap-3">
+        <div class="min-w-0 flex items-center gap-2 text-sm">
           <span class=${dotClass}></span>
           <span class="font-semibold">Gateway:</span>
-          <span class="text-gray-400"
-            >${restarting ? "restarting..." : status || "checking..."}</span
-          >
+          <span class="text-gray-400">${restarting ? "restarting..." : status || "checking..."}</span>
+          ${!restarting && isRunning
+            ? html`
+                <span class="hidden md:inline text-gray-500">·</span>
+                <span class="hidden md:inline text-xs text-gray-500"
+                  >Uptime: ${formatDuration(liveUptimeMs)}</span
+                >
+              `
+            : null}
         </div>
+        <${UpdateActionButton}
+          onClick=${onRestart}
+          disabled=${!status}
+          loading=${restarting}
+          warning=${false}
+          idleLabel="Restart"
+          loadingLabel="On it..."
+        />
+      </div>
+      ${!restarting && isRunning
+        ? html`
+            <div class="md:hidden pl-4 text-xs text-gray-500">
+              Uptime: ${formatDuration(liveUptimeMs)}
+            </div>
+          `
+        : null}
+      <div class="flex items-center justify-between gap-3">
+        ${onOpenWatchdog
+          ? html`
+              <button
+                class="inline-flex items-center gap-2 text-sm hover:opacity-90"
+                onclick=${onOpenWatchdog}
+                title="Open Watchdog tab"
+              >
+                <span class=${watchdogDotClass.startsWith("ac-status-dot")
+                  ? watchdogDotClass
+                  : `w-2 h-2 rounded-full ${watchdogDotClass}`}></span>
+                <span class="font-semibold">Watchdog:</span>
+                <span class="text-gray-400">${watchdogLabel}</span>
+              </button>
+            `
+          : html`
+              <div class="inline-flex items-center gap-2 text-sm">
+                <span class=${watchdogDotClass.startsWith("ac-status-dot")
+                  ? watchdogDotClass
+                  : `w-2 h-2 rounded-full ${watchdogDotClass}`}></span>
+                <span class="font-semibold">Watchdog:</span>
+                <span class="text-gray-400">${watchdogLabel}</span>
+              </div>
+            `}
+        ${onRepair
+          ? html`
+              <div class="shrink-0 w-32 flex justify-end">
+                ${showRepairButton
+                  ? html`
+                      <${UpdateActionButton}
+                        onClick=${onRepair}
+                        loading=${isRepairInProgress}
+                        warning=${true}
+                        idleLabel="Repair"
+                        loadingLabel="Repairing..."
+                        className="w-full justify-center"
+                      />
+                    `
+                  : html`<span class="inline-flex h-7 w-full" aria-hidden="true"></span>`}
+              </div>
+            `
+          : null}
       </div>
-      <${UpdateActionButton}
-        onClick=${handleRestart}
-        disabled=${!status}
-        loading=${restarting}
-        warning=${false}
-        idleLabel="Restart"
-        loadingLabel="On it..."
-      />
     </div>
     <div class="mt-3 pt-3 border-t border-border">
       <${VersionRow}

package/lib/public/js/components/global-restart-banner.js

@@ -0,0 +1,31 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { UpdateActionButton } from "./update-action-button.js";
+
+const html = htm.bind(h);
+
+export const GlobalRestartBanner = ({
+  visible = false,
+  restarting = false,
+  onRestart,
+}) => {
+  if (!visible) return null;
+  return html`
+    <div class="global-restart-banner">
+      <div class="global-restart-banner__content">
+        <p class="global-restart-banner__text">
+          Gateway restart required to apply pending configuration changes.
+        </p>
+        <${UpdateActionButton}
+          onClick=${onRestart}
+          disabled=${restarting}
+          loading=${restarting}
+          warning=${true}
+          idleLabel="Restart Gateway"
+          loadingLabel="Restarting..."
+          className="global-restart-banner__button"
+        />
+      </div>
+    </div>
+  `;
+};