@chrysb/alphaclaw 0.1.3 → 0.1.4

package/lib/public/js/app.js

@@ -12,6 +12,8 @@ import {
   fetchOnboardStatus,
   fetchDashboardUrl,
   updateSyncCron,
+  fetchAlphaclawVersion,
+  updateAlphaclaw,
 } from "./lib/api.js";
 import { usePolling } from "./hooks/usePolling.js";
 import { Gateway } from "./components/gateway.js";
@@ -240,6 +242,11 @@ const GeneralTab = ({ onSwitchTab }) => {
 function App() {
   const [onboarded, setOnboarded] = useState(null);
   const [tab, setTab] = useState("general");
+  const [acVersion, setAcVersion] = useState(null);
+  const [acLatest, setAcLatest] = useState(null);
+  const [acHasUpdate, setAcHasUpdate] = useState(false);
+  const [acUpdating, setAcUpdating] = useState(false);
+  const [acDismissed, setAcDismissed] = useState(false);
 
   useEffect(() => {
     fetchOnboardStatus()
@@ -247,6 +254,40 @@ function App() {
       .catch(() => setOnboarded(false));
   }, []);
 
+  useEffect(() => {
+    if (!onboarded) return;
+    let active = true;
+    const check = async () => {
+      try {
+        const data = await fetchAlphaclawVersion(false);
+        if (!active) return;
+        setAcVersion(data.currentVersion || null);
+        setAcLatest(data.latestVersion || null);
+        setAcHasUpdate(!!data.hasUpdate);
+      } catch {}
+    };
+    check();
+    const id = setInterval(check, 5 * 60 * 1000);
+    return () => { active = false; clearInterval(id); };
+  }, [onboarded]);
+
+  const handleAcUpdate = async () => {
+    if (acUpdating) return;
+    setAcUpdating(true);
+    try {
+      const data = await updateAlphaclaw();
+      if (data.ok) {
+        showToast("AlphaClaw updated — restarting...", "success");
+      } else {
+        showToast(data.error || "AlphaClaw update failed", "error");
+        setAcUpdating(false);
+      }
+    } catch (err) {
+      showToast(err.message || "Could not update AlphaClaw", "error");
+      setAcUpdating(false);
+    }
+  };
+
   // Still loading onboard status
   if (onboarded === null) {
     return html`
@@ -288,11 +329,37 @@ function App() {
         <div class="flex items-center gap-3 pb-3">
           <div class="text-4xl">🦞</div>
           <div>
-            <h1 class="text-2xl font-semibold">OpenClaw Setup</h1>
+            <h1 class="text-2xl font-semibold">OpenClaw Setup${acVersion ? html`${" "}<span class="text-base font-normal text-gray-600">v${acVersion}</span>` : ""}</h1>
             <p class="text-gray-500 text-sm">This should be easy, right?</p>
           </div>
         </div>
 
+        ${acHasUpdate && acLatest && !acDismissed && html`
+          <div class="mb-3 flex items-center justify-between gap-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 px-3 py-2">
+            <p class="text-sm text-yellow-400">
+              AlphaClaw <span class="font-medium">v${acLatest}</span> is available
+            </p>
+            <div class="flex items-center gap-2 shrink-0">
+              <button
+                onclick=${handleAcUpdate}
+                disabled=${acUpdating}
+                class="text-xs font-medium px-3 py-1 rounded-lg bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30 transition-colors ${acUpdating ? "opacity-50 cursor-not-allowed" : ""}"
+              >
+                ${acUpdating ? "Updating..." : "Update now"}
+              </button>
+              <button
+                onclick=${() => setAcDismissed(true)}
+                class="text-yellow-500/60 hover:text-yellow-400 transition-colors"
+                title="Dismiss"
+              >
+                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        `}
+
         <div class="flex gap-1 border-b border-border">
           ${["general", "models", "envars"].map(
             (t) => html`

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

@@ -3,10 +3,8 @@ import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   fetchOpenclawVersion,
-  fetchAlphaclawVersion,
   restartGateway,
   updateOpenclaw,
-  updateAlphaclaw,
 } from "../lib/api.js";
 import { showToast } from "./toast.js";
 const html = htm.bind(h);
@@ -147,7 +145,7 @@ export function Gateway({ status, openclawVersion }) {
         Restart
       </button>
     </div>
-    <div class="mt-3 pt-3 border-t border-border space-y-3">
+    <div class="mt-3 pt-3 border-t border-border">
       <${VersionRow}
         label="OpenClaw"
         currentVersion=${openclawVersion}
@@ -155,13 +153,6 @@ export function Gateway({ status, openclawVersion }) {
         applyUpdate=${updateOpenclaw}
         tagsUrl="https://github.com/openclaw/openclaw/tags"
       />
-      <${VersionRow}
-        label="AlphaClaw"
-        currentVersion=${null}
-        fetchVersion=${fetchAlphaclawVersion}
-        applyUpdate=${updateAlphaclaw}
-        tagsUrl="https://www.npmjs.com/package/@chrysb/alphaclaw"
-      />
     </div>
   </div>`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },