@chrysb/alphaclaw 0.2.1 → 0.2.3

package/lib/public/css/shell.css

@@ -175,9 +175,104 @@
 
 .statusbar-left, .statusbar-right { display: flex; align-items: center; gap: 16px; margin-left: 2px; }
 
+.mobile-topbar {
+  display: none;
+}
+
+.mobile-topbar-menu {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--bg-hover);
+  color: var(--text);
+  cursor: pointer;
+}
+.mobile-topbar-menu:hover { background: var(--bg-active); }
+
+.mobile-topbar-title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+}
+
+.mobile-sidebar-overlay {
+  display: none;
+}
+
 /* ── Responsive ────────────────────────────────── */
 
 @media (max-width: 768px) {
   .app-shell { grid-template-columns: 1fr; }
-  .app-sidebar { display: none; }
+  .app-content {
+    padding: 0 14px 12px;
+  }
+
+  .mobile-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: sticky;
+    top: 0;
+    z-index: 15;
+    background: var(--panel-bg-contrast);
+    border: 0;
+    border-bottom: 1px solid var(--panel-border-contrast);
+    border-radius: 0;
+    min-height: 52px;
+    padding: 8px 14px;
+    margin: 0 -14px 10px;
+  }
+
+  .mobile-topbar.is-scrolled {
+    background: var(--bg-content);
+  }
+
+  .mobile-topbar-menu {
+    position: absolute;
+    left: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .app-sidebar {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 24px;
+    width: min(260px, 82vw);
+    z-index: 30;
+    transform: translateX(-100%);
+    transition: transform 0.18s ease;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
+  }
+
+  .app-sidebar.mobile-open {
+    transform: translateX(0);
+  }
+
+  .mobile-sidebar-overlay {
+    display: block;
+    position: fixed;
+    inset: 0 0 24px 0;
+    background: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s ease;
+    z-index: 20;
+  }
+
+  .mobile-sidebar-overlay.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }

package/lib/public/css/theme.css

@@ -156,6 +156,32 @@ textarea:focus {
   background: rgba(99, 235, 255, 0.08);
 }
 
+.ac-btn-secondary {
+  border: 1px solid var(--panel-border-contrast);
+  color: #d1d5db;
+  background: rgba(255, 255, 255, 0.03);
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease,
+    background 0.15s ease,
+    transform 0.15s ease;
+}
+
+.ac-btn-secondary:hover:not(:disabled) {
+  border-color: rgba(255, 255, 255, 0.35);
+  color: #f3f4f6;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.ac-btn-secondary:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.ac-btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .ac-btn-green {
   border: 1px solid rgba(34, 197, 94, 0.45);
   background: linear-gradient(

package/lib/public/js/app.js

@@ -30,6 +30,7 @@ import { Envars } from "./components/envars.js";
 import { ToastContainer, showToast } from "./components/toast.js";
 import { TelegramWorkspace } from "./components/telegram-workspace.js";
 import { ChevronDownIcon } from "./components/icons.js";
+import { UpdateActionButton } from "./components/update-action-button.js";
 const html = htm.bind(h);
 const kUiTabs = ["general", "providers", "envars"];
 const kSubScreens = ["telegram"];
@@ -236,8 +237,8 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
           <div>
             <h2 class="font-semibold text-sm">OpenClaw Gateway Dashboard</h2>
           </div>
-          <button
-            onclick=${async () => {
+          <${UpdateActionButton}
+            onClick=${async () => {
               if (dashboardLoading) return;
               setDashboardLoading(true);
               try {
@@ -250,13 +251,11 @@ const GeneralTab = ({ onSwitchTab, onNavigate, isActive }) => {
               }
               setDashboardLoading(false);
             }}
-            disabled=${dashboardLoading}
-            class="text-xs px-2.5 py-1 rounded-lg border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors ${dashboardLoading
-              ? "opacity-50 cursor-not-allowed"
-              : ""}"
-          >
-            ${dashboardLoading ? "Opening..." : "Open"}
-          </button>
+            loading=${dashboardLoading}
+            warning=${false}
+            idleLabel="Open"
+            loadingLabel="Opening..."
+          />
         </div>
         <${DevicePairings}
           pending=${devicePending}
@@ -298,6 +297,8 @@ function App() {
   const [acDismissed, setAcDismissed] = useState(false);
   const [authEnabled, setAuthEnabled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
   const menuRef = useRef(null);
 
   const closeMenu = useCallback((e) => {
@@ -326,6 +327,15 @@ function App() {
     history.replaceState(null, "", `#${subScreen || tab}`);
   }, [tab, subScreen]);
 
+  useEffect(() => {
+    if (!mobileSidebarOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [mobileSidebarOpen]);
+
   useEffect(() => {
     if (!onboarded) return;
     let active = true;
@@ -363,7 +373,6 @@ function App() {
       setAcUpdating(false);
     }
   };
-
   // Still loading onboard status
   if (onboarded === null) {
     return html`
@@ -408,8 +417,20 @@ function App() {
     `;
   }
 
-  const navigateToSubScreen = (screen) => setSubScreen(screen);
-  const exitSubScreen = () => setSubScreen(null);
+  const navigateToSubScreen = (screen) => {
+    setSubScreen(screen);
+    setMobileSidebarOpen(false);
+  };
+  const exitSubScreen = () => {
+    setSubScreen(null);
+    setMobileSidebarOpen(false);
+  };
+  const handleAppContentScroll = (e) => {
+    const nextScrolled = e.currentTarget.scrollTop > 0;
+    setMobileTopbarScrolled((currentScrolled) =>
+      currentScrolled === nextScrolled ? currentScrolled : nextScrolled,
+    );
+  };
 
   const kNavItems = [
     { id: "general", label: "General" },
@@ -419,7 +440,7 @@ function App() {
 
   return html`
     <div class="app-shell">
-      <div class="app-sidebar">
+      <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
         <div class="sidebar-brand">
           <img src="./img/logo.svg" alt="" width="20" height="20" />
           <span><span style="color: var(--accent)">alpha</span>claw</span>
@@ -458,7 +479,11 @@ function App() {
             (item) => html`
               <a
                 class=${tab === item.id && !subScreen ? "active" : ""}
-                onclick=${() => { setSubScreen(null); setTab(item.id); }}
+                onclick=${() => {
+                  setSubScreen(null);
+                  setTab(item.id);
+                  setMobileSidebarOpen(false);
+                }}
               >
                 ${item.label}
               </a>
@@ -468,19 +493,42 @@ function App() {
         <div class="sidebar-footer">
           ${acHasUpdate && acLatest && !acDismissed
             ? html`
-                <button
-                  onclick=${handleAcUpdate}
-                  disabled=${acUpdating}
-                  class="sidebar-update-btn"
-                >
-                  ${acUpdating ? "Updating..." : `Update to v${acLatest}`}
-                </button>
+                <${UpdateActionButton}
+                  onClick=${handleAcUpdate}
+                  loading=${acUpdating}
+                  warning=${true}
+                  idleLabel=${`Update to v${acLatest}`}
+                  loadingLabel="Updating..."
+                  className="w-full justify-center"
+                />
               `
             : null}
         </div>
       </div>
 
-      <div class="app-content">
+      <div
+        class=${`mobile-sidebar-overlay ${mobileSidebarOpen ? "active" : ""}`}
+        onclick=${() => setMobileSidebarOpen(false)}
+      />
+
+      <div class="app-content" onscroll=${handleAppContentScroll}>
+        <div class=${`mobile-topbar ${mobileTopbarScrolled ? "is-scrolled" : ""}`}>
+          <button
+            class="mobile-topbar-menu"
+            onclick=${() => setMobileSidebarOpen((open) => !open)}
+            aria-label="Open menu"
+            aria-expanded=${mobileSidebarOpen ? "true" : "false"}
+          >
+            <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
+              <path
+                d="M2 3.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75A.75.75 0 012 8zm0 4.25a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
+              />
+            </svg>
+          </button>
+          <span class="mobile-topbar-title">
+            <span style="color: var(--accent)">alpha</span>claw
+          </span>
+        </div>
         <div class="max-w-2xl w-full mx-auto">
           ${subScreen === "telegram"
             ? html`

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

@@ -0,0 +1,66 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const ConfirmDialog = ({
+  visible = false,
+  title = "Confirm action",
+  message = "Are you sure you want to continue?",
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  confirmTone = "primary",
+}) => {
+  useEffect(() => {
+    if (!visible) return;
+
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") {
+        onCancel?.();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeydown);
+    return () => window.removeEventListener("keydown", handleKeydown);
+  }, [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";
+
+  return html`
+    <div
+      class="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50"
+      onclick=${(event) => {
+        if (event.target === event.currentTarget) onCancel?.();
+      }}
+    >
+      <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>
+        <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>
+        </div>
+      </div>
+    </div>
+  `;
+};

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

@@ -328,7 +328,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
         </button>
         <button
           onclick=${onClose}
-          class="px-4 py-2 rounded-lg text-sm ac-btn-cyan-ghost"
+          class="px-4 py-2 rounded-lg text-sm ac-btn-secondary"
         >
           Cancel
         </button>

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

@@ -7,14 +7,39 @@ import {
   updateOpenclaw,
 } from "../lib/api.js";
 import { showToast } from "./toast.js";
+import { UpdateActionButton } from "./update-action-button.js";
+import { ConfirmDialog } from "./confirm-dialog.js";
 const html = htm.bind(h);
 
-function VersionRow({ label, currentVersion, fetchVersion, applyUpdate, tagsUrl }) {
+function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
   const [checking, setChecking] = useState(false);
   const [version, setVersion] = useState(currentVersion || null);
   const [latestVersion, setLatestVersion] = useState(null);
   const [hasUpdate, setHasUpdate] = useState(false);
   const [error, setError] = useState("");
+  const [hasViewedChangelog, setHasViewedChangelog] = useState(false);
+  const [confirmWithoutChangelogOpen, setConfirmWithoutChangelogOpen] = useState(false);
+  const simulateUpdate = (() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("simulateUpdate") === "1";
+    } catch {
+      return false;
+    }
+  })();
+  const simulatedVersion = (() => {
+    if (!simulateUpdate) return null;
+    try {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("simulateVersion") || "v0.0.0-preview";
+    } catch {
+      return "v0.0.0-preview";
+    }
+  })();
+  const effectiveHasUpdate = simulateUpdate || hasUpdate;
+  const effectiveLatestVersion = simulatedVersion || latestVersion;
+  const changelogUrl = "https://github.com/openclaw/openclaw/tags";
+  const showMobileUpdateRow = effectiveHasUpdate && effectiveLatestVersion;
 
   useEffect(() => {
     setVersion(currentVersion || null);
@@ -36,22 +61,30 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate, tagsUrl
       }
     };
     load();
-    return () => { active = false; };
+    return () => {
+      active = false;
+    };
   }, []);
 
-  const handleAction = async () => {
+  useEffect(() => {
+    if (!effectiveHasUpdate || !effectiveLatestVersion) {
+      setHasViewedChangelog(false);
+      return;
+    }
+    setHasViewedChangelog(false);
+  }, [effectiveHasUpdate, effectiveLatestVersion]);
+
+  const runAction = async () => {
     if (checking) return;
     setChecking(true);
     setError("");
     try {
-      const data = hasUpdate
-        ? await applyUpdate()
-        : await fetchVersion(true);
+      const data = effectiveHasUpdate ? await applyUpdate() : await fetchVersion(true);
       setVersion(data.currentVersion || version);
       setLatestVersion(data.latestVersion || null);
       setHasUpdate(!!data.hasUpdate);
       setError(data.ok ? "" : data.error || "");
-      if (hasUpdate) {
+      if (effectiveHasUpdate) {
         if (!data.ok) {
           showToast(data.error || `${label} update failed`, "error");
         } else if (data.updated || data.restarting) {
@@ -65,42 +98,117 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate, tagsUrl
           showToast(`Already at latest ${label} version`, "success");
         }
       } else if (data.hasUpdate && data.latestVersion) {
-        showToast(`${label} update available: ${data.latestVersion}`, "warning");
+        showToast(
+          `${label} update available: ${data.latestVersion}`,
+          "warning",
+        );
       } else {
         showToast(`${label} is up to date`, "success");
       }
     } catch (err) {
-      setError(err.message || (hasUpdate ? `Could not update ${label}` : "Could not check updates"));
-      showToast(hasUpdate ? `Could not update ${label}` : "Could not check updates", "error");
+      setError(
+        err.message ||
+          (effectiveHasUpdate ? `Could not update ${label}` : "Could not check updates"),
+      );
+      showToast(
+        effectiveHasUpdate ? `Could not update ${label}` : "Could not check updates",
+        "error",
+      );
     }
     setChecking(false);
   };
 
+  const handleAction = () => {
+    if (checking) return;
+    if (effectiveHasUpdate && effectiveLatestVersion && !hasViewedChangelog) {
+      setConfirmWithoutChangelogOpen(true);
+      return;
+    }
+    runAction();
+  };
+
+  const handleConfirmWithoutChangelog = () => {
+    setConfirmWithoutChangelogOpen(false);
+    runAction();
+  };
+
   return html`
     <div class="flex items-center justify-between gap-3">
       <div class="min-w-0">
-        <p class="text-sm text-gray-300 truncate">
-          <span class="text-gray-500">${label}</span>${" "}${version ? `v${version}` : "..."}
+        <p class="text-xs text-gray-300 truncate">
+          <span class="text-gray-500">${label}</span>${" "}${version
+            ? `${version}`
+            : "..."}
         </p>
         ${error && html`<p class="text-xs text-yellow-500 mt-1">${error}</p>`}
       </div>
       <div class="flex items-center gap-2 shrink-0">
-        ${hasUpdate && latestVersion && tagsUrl && html`
-          <a href=${tagsUrl} target="_blank"
-            class="text-xs text-yellow-500 hover:text-yellow-300 transition-colors"
-          >${latestVersion} available</a>
+        ${effectiveHasUpdate && effectiveLatestVersion && html`
+          <a
+            href=${changelogUrl}
+            target="_blank"
+            rel="noreferrer"
+            onclick=${() => setHasViewedChangelog(true)}
+            class="hidden md:inline text-xs text-gray-500 hover:text-gray-300 transition-colors"
+            >View changelog</a
+          >
         `}
-        <button
-          onclick=${handleAction}
-          disabled=${checking}
-          class="text-xs px-2.5 py-1 rounded-lg border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors ${checking ? "opacity-50 cursor-not-allowed" : ""}"
-        >
-          ${checking
-            ? hasUpdate ? "Updating..." : "Checking..."
-            : hasUpdate ? "Update" : "Check updates"}
-        </button>
+        ${showMobileUpdateRow
+          ? html`
+              <${UpdateActionButton}
+                onClick=${handleAction}
+                loading=${checking}
+                warning=${effectiveHasUpdate}
+                idleLabel=${effectiveHasUpdate
+                  ? `Update to ${effectiveLatestVersion || "latest"}`
+                  : "Check updates"}
+                loadingLabel=${effectiveHasUpdate ? "Updating..." : "Checking..."}
+                className="hidden md:inline-flex"
+              />
+            `
+          : html`
+              <${UpdateActionButton}
+                onClick=${handleAction}
+                loading=${checking}
+                warning=${effectiveHasUpdate}
+                idleLabel=${effectiveHasUpdate
+                  ? `Update to ${effectiveLatestVersion || "latest"}`
+                  : "Check updates"}
+                loadingLabel=${effectiveHasUpdate ? "Updating..." : "Checking..."}
+              />
+            `}
       </div>
     </div>
+    ${showMobileUpdateRow && html`
+      <div class="mt-2 md:hidden flex items-center gap-2">
+        <a
+          href=${changelogUrl}
+          target="_blank"
+          rel="noreferrer"
+          onclick=${() => setHasViewedChangelog(true)}
+          class="inline-flex items-center justify-center flex-1 h-9 text-xs rounded-lg border border-border text-gray-400 hover:text-gray-200 hover:border-gray-500 transition-colors"
+          >View changelog</a
+        >
+        <${UpdateActionButton}
+          onClick=${handleAction}
+          loading=${checking}
+          warning=${effectiveHasUpdate}
+          idleLabel=${`Update to ${effectiveLatestVersion || "latest"}`}
+          loadingLabel="Updating..."
+          className="flex-1 h-9 px-3"
+        />
+      </div>
+    `}
+    <${ConfirmDialog}
+      visible=${confirmWithoutChangelogOpen}
+      title="Update without changelog?"
+      message="Are you sure you want to update without viewing the changelog?"
+      confirmLabel=${`Update to ${effectiveLatestVersion || "latest"}`}
+      cancelLabel="Cancel"
+      confirmTone="warning"
+      onCancel=${() => setConfirmWithoutChangelogOpen(false)}
+      onConfirm=${handleConfirmWithoutChangelog}
+    />
   `;
 }
 
@@ -134,16 +242,14 @@ export function Gateway({ status, openclawVersion }) {
           >
         </div>
       </div>
-      <button
-        onclick=${handleRestart}
-        disabled=${restarting || !status}
-        class="text-xs px-2.5 py-1 rounded-lg border border-border text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors ${restarting ||
-        !status
-          ? "opacity-50 cursor-not-allowed"
-          : ""}"
-      >
-        Restart
-      </button>
+      <${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}
@@ -151,7 +257,6 @@ export function Gateway({ status, openclawVersion }) {
         currentVersion=${openclawVersion}
         fetchVersion=${fetchOpenclawVersion}
         applyUpdate=${updateOpenclaw}
-        tagsUrl="https://github.com/openclaw/openclaw/tags"
       />
     </div>
   </div>`;

package/lib/public/js/components/google.js

@@ -12,6 +12,7 @@ import {
   getDefaultScopes,
 } from "./scope-picker.js";
 import { CredentialsModal } from "./credentials-modal.js";
+import { ConfirmDialog } from "./confirm-dialog.js";
 import { showToast } from "./toast.js";
 const html = htm.bind(h);
 
@@ -22,6 +23,7 @@ export function Google({ gatewayStatus }) {
   const [apiStatus, setApiStatus] = useState({});
   const [checkingApis, setCheckingApis] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+  const [disconnectDialogOpen, setDisconnectDialogOpen] = useState(false);
 
   const runApiCheck = useCallback(async () => {
     setApiStatus({});
@@ -98,12 +100,6 @@ export function Google({ gatewayStatus }) {
   const handleCheckApis = () => runApiCheck();
 
   const handleDisconnect = async () => {
-    if (
-      !confirm(
-        "Disconnect Google account? Your agent will lose access to Gmail, Calendar, etc.",
-      )
-    )
-      return;
     const data = await apiDisconnect();
     if (data.ok) {
       setGoogle({
@@ -188,7 +184,7 @@ export function Google({ gatewayStatus }) {
                   </button>
                 </div>
                 <button
-                  onclick=${handleDisconnect}
+                  onclick=${() => setDisconnectDialogOpen(true)}
                   class="text-xs text-red-400/60 hover:text-red-400"
                 >
                   Disconnect
@@ -216,5 +212,17 @@ export function Google({ gatewayStatus }) {
       onClose=${() => setModalOpen(false)}
       onSaved=${refresh}
     />
+    <${ConfirmDialog}
+      visible=${disconnectDialogOpen}
+      title="Disconnect Google account?"
+      message="Your agent will lose access to Gmail, Calendar, and other Google Workspace services until you reconnect."
+      confirmLabel="Disconnect"
+      cancelLabel="Cancel"
+      onCancel=${() => setDisconnectDialogOpen(false)}
+      onConfirm=${async () => {
+        setDisconnectDialogOpen(false);
+        await handleDisconnect();
+      }}
+    />
   `;
 }

package/lib/public/js/components/update-action-button.js

@@ -0,0 +1,66 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const UpdateActionButton = ({
+  onClick,
+  disabled = false,
+  loading = false,
+  warning = false,
+  idleLabel = "Check updates",
+  loadingLabel = "Checking...",
+  className = "",
+}) => {
+  const isInteractive = !loading && !disabled;
+  const toneClass = warning
+    ? isInteractive
+      ? "border-yellow-500/35 text-yellow-400 bg-yellow-500/10 hover:border-yellow-400/60 hover:text-yellow-300 hover:bg-yellow-500/15"
+      : "border-yellow-500/35 text-yellow-400 bg-yellow-500/10"
+    : isInteractive
+      ? "border-border text-gray-500 hover:text-gray-300 hover:border-gray-500"
+      : "border-border text-gray-500";
+  const loadingClass = loading
+    ? `cursor-not-allowed ${warning
+      ? "opacity-90 animate-pulse shadow-[0_0_0_1px_rgba(234,179,8,0.22),0_0_18px_rgba(234,179,8,0.12)]"
+      : "opacity-80"}`
+    : "";
+
+  return html`
+    <button
+      onclick=${onClick}
+      disabled=${disabled || loading}
+      class="inline-flex items-center justify-center h-7 text-xs leading-none px-2.5 py-1 rounded-lg border transition-colors whitespace-nowrap ${toneClass} ${loadingClass} ${className}"
+    >
+      ${loading
+        ? html`
+            <span class="inline-flex items-center gap-1.5 leading-none">
+              <svg
+                class="animate-spin"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden="true"
+              >
+                <circle
+                  class="opacity-30"
+                  cx="12"
+                  cy="12"
+                  r="9"
+                  stroke="currentColor"
+                  stroke-width="3"
+                />
+                <path
+                  class="opacity-90"
+                  fill="currentColor"
+                  d="M12 3a9 9 0 0 1 9 9h-3a6 6 0 0 0-6-6V3z"
+                />
+              </svg>
+              ${loadingLabel}
+            </span>
+          `
+        : idleLabel}
+    </button>
+  `;
+};

package/lib/public/login.html

@@ -8,6 +8,7 @@
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <link rel="icon" type="image/svg+xml" href="./img/logo.svg" />
     <link rel="stylesheet" href="./css/theme.css" />
     <script src="https://cdn.tailwindcss.com"></script>
     <script>

package/lib/public/setup.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>alphaclaw</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="icon" type="image/svg+xml" href="./img/logo.svg">
   <link rel="stylesheet" href="./css/theme.css">
   <link rel="stylesheet" href="./css/shell.css">
   <script src="https://cdn.tailwindcss.com"></script>

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "publishConfig": {
     "access": "public"
   },
   "description": "Setup UI, gateway manager, and onboarding wrapper for OpenClaw",
   "bin": {
-    "alphaclaw": "./bin/alphaclaw.js"
+    "alphaclaw": "bin/alphaclaw.js"
   },
   "files": [
     "bin/",