@chrysb/alphaclaw 0.1.16 → 0.1.18

package/lib/public/css/theme.css

@@ -47,4 +47,69 @@ body::before {
 /* Google scope picker toggle buttons */
 .scope-btn { background: rgba(255,255,255,0.03); color: var(--text-muted); border: 1px solid var(--border); transition: all 0.15s; }
 .scope-btn:hover { border-color: var(--text-dim); color: var(--text); }
-.scope-btn.active { background: var(--bg-active); color: var(--accent); border-color: var(--accent-dim); }
+.scope-btn-read.active {
+  background: rgba(255, 255, 255, 0.12);
+  color: #f3f4f6;
+  border-color: rgba(255, 255, 255, 0.35);
+}
+.scope-btn-write.active {
+  background: rgba(255, 255, 255, 0.12);
+  color: #f3f4f6;
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+/* Reusable cyan action buttons */
+.ac-btn-cyan {
+  border: 1px solid var(--accent-dim);
+  background: linear-gradient(
+    180deg,
+    rgba(99, 235, 255, 0.14) 0%,
+    rgba(99, 235, 255, 0.08) 100%
+  );
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgba(99, 235, 255, 0.12);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+
+.ac-btn-cyan:hover:not(:disabled) {
+  border-color: rgba(99, 235, 255, 0.7);
+  background: linear-gradient(
+    180deg,
+    rgba(99, 235, 255, 0.24) 0%,
+    rgba(99, 235, 255, 0.12) 100%
+  );
+  color: #b9f8ff;
+  box-shadow:
+    inset 0 0 0 1px rgba(99, 235, 255, 0.2),
+    0 0 12px rgba(99, 235, 255, 0.14);
+}
+
+.ac-btn-cyan:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.ac-btn-cyan:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ac-btn-cyan-ghost {
+  border: 1px solid var(--accent-dim);
+  color: rgba(99, 235, 255, 0.75);
+  background: rgba(99, 235, 255, 0.04);
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.ac-btn-cyan-ghost:hover {
+  border-color: rgba(99, 235, 255, 0.5);
+  color: #a4f3ff;
+  background: rgba(99, 235, 255, 0.08);
+}

package/lib/public/js/app.js

@@ -27,6 +27,9 @@ import { Envars } from "./components/envars.js";
 import { ToastContainer, showToast } from "./components/toast.js";
 import { ChevronDownIcon } from "./components/icons.js";
 const html = htm.bind(h);
+const kUiTabStorageKey = "alphaclaw_ui_tab";
+const kUiTabs = ["general", "models", "envars"];
+const kDefaultUiTab = "general";
 
 const GeneralTab = ({ onSwitchTab }) => {
   const [googleKey, setGoogleKey] = useState(0);
@@ -116,15 +119,23 @@ const GeneralTab = ({ onSwitchTab }) => {
     if (!syncCron) return;
     setSyncCronEnabled(syncCron.enabled !== false);
     setSyncCronSchedule(syncCron.schedule || "0 * * * *");
-    setSyncCronChoice(syncCron.enabled === false ? "disabled" : syncCron.schedule || "0 * * * *");
+    setSyncCronChoice(
+      syncCron.enabled === false
+        ? "disabled"
+        : syncCron.schedule || "0 * * * *",
+    );
   }, [syncCron?.enabled, syncCron?.schedule]);
 
-  const saveSyncCronSettings = async ({ enabled = syncCronEnabled, schedule = syncCronSchedule }) => {
+  const saveSyncCronSettings = async ({
+    enabled = syncCronEnabled,
+    schedule = syncCronSchedule,
+  }) => {
     if (savingSyncCron) return;
     setSavingSyncCron(true);
     try {
       const data = await updateSyncCron({ enabled, schedule });
-      if (!data.ok) throw new Error(data.error || "Could not save sync settings");
+      if (!data.ok)
+        throw new Error(data.error || "Could not save sync settings");
       showToast("Sync schedule updated", "success");
       statusPoll.refresh();
     } catch (err) {
@@ -148,12 +159,26 @@ const GeneralTab = ({ onSwitchTab }) => {
       />
       <${Google} key=${googleKey} gatewayStatus=${gatewayStatus} />
 
-      ${repo && html`
+      ${repo &&
+      html`
         <div class="bg-surface border border-border rounded-xl p-4">
           <div class="flex items-center justify-between gap-3">
             <div class="flex items-center gap-2 min-w-0">
-              <svg class="w-4 h-4 text-gray-400" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
-              <a href="https://github.com/${repo}" target="_blank" class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate">${repo}</a>
+              <svg
+                class="w-4 h-4 text-gray-400"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+                />
+              </svg>
+              <a
+                href="https://github.com/${repo}"
+                target="_blank"
+                class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate"
+                >${repo}</a
+              >
             </div>
             <div class="flex items-center gap-2 shrink-0">
               <span class="text-xs text-gray-400">Auto-sync</span>
@@ -164,7 +189,9 @@ const GeneralTab = ({ onSwitchTab }) => {
                     const nextChoice = e.target.value;
                     setSyncCronChoice(nextChoice);
                     const nextEnabled = nextChoice !== "disabled";
-                    const nextSchedule = nextEnabled ? nextChoice : syncCronSchedule;
+                    const nextSchedule = nextEnabled
+                      ? nextChoice
+                      : syncCronSchedule;
                     setSyncCronEnabled(nextEnabled);
                     setSyncCronSchedule(nextSchedule);
                     saveSyncCronSettings({
@@ -176,7 +203,9 @@ const GeneralTab = ({ onSwitchTab }) => {
                   class="appearance-none bg-black/30 border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-gray-300 ${savingSyncCron
                     ? "opacity-50 cursor-not-allowed"
                     : ""}"
-                  title=${syncCron?.installed === false ? "Not Installed Yet" : syncCronStatusText}
+                  title=${syncCron?.installed === false
+                    ? "Not Installed Yet"
+                    : syncCronStatusText}
                 >
                   <option value="disabled">Disabled</option>
                   <option value="*/30 * * * *">Every 30 min</option>
@@ -195,7 +224,7 @@ const GeneralTab = ({ onSwitchTab }) => {
       <div class="bg-surface border border-border rounded-xl p-4">
         <div class="flex items-center justify-between">
           <div>
-            <h2 class="font-semibold text-sm">Gateway Dashboard</h2>
+            <h2 class="font-semibold text-sm">OpenClaw Gateway Dashboard</h2>
           </div>
           <button
             onclick=${async () => {
@@ -203,18 +232,20 @@ const GeneralTab = ({ onSwitchTab }) => {
               setDashboardLoading(true);
               try {
                 const data = await fetchDashboardUrl();
-                console.log('[dashboard] response:', JSON.stringify(data));
-                window.open(data.url || '/openclaw', '_blank');
+                console.log("[dashboard] response:", JSON.stringify(data));
+                window.open(data.url || "/openclaw", "_blank");
               } catch (err) {
-                console.error('[dashboard] error:', err);
-                window.open('/openclaw', '_blank');
+                console.error("[dashboard] error:", err);
+                window.open("/openclaw", "_blank");
               }
               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' : ''}"
+            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'}
+            ${dashboardLoading ? "Opening..." : "Open"}
           </button>
         </div>
         <${DevicePairings}
@@ -241,7 +272,14 @@ const GeneralTab = ({ onSwitchTab }) => {
 
 function App() {
   const [onboarded, setOnboarded] = useState(null);
-  const [tab, setTab] = useState("general");
+  const [tab, setTab] = useState(() => {
+    try {
+      const savedTab = localStorage.getItem(kUiTabStorageKey);
+      return kUiTabs.includes(savedTab) ? savedTab : kDefaultUiTab;
+    } catch {
+      return kDefaultUiTab;
+    }
+  });
   const [acVersion, setAcVersion] = useState(null);
   const [acLatest, setAcLatest] = useState(null);
   const [acHasUpdate, setAcHasUpdate] = useState(false);
@@ -254,6 +292,12 @@ function App() {
       .catch(() => setOnboarded(false));
   }, []);
 
+  useEffect(() => {
+    try {
+      localStorage.setItem(kUiTabStorageKey, tab);
+    } catch {}
+  }, [tab]);
+
   useEffect(() => {
     if (!onboarded) return;
     let active = true;
@@ -268,7 +312,10 @@ function App() {
     };
     check(true);
     const id = setInterval(() => check(false), 5 * 60 * 1000);
-    return () => { active = false; clearInterval(id); };
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
   }, [onboarded]);
 
   const handleAcUpdate = async () => {
@@ -292,7 +339,10 @@ function App() {
   // Still loading onboard status
   if (onboarded === null) {
     return html`
-      <div class="min-h-screen flex items-center justify-center" style="position: relative; z-index: 1">
+      <div
+        class="min-h-screen flex items-center justify-center"
+        style="position: relative; z-index: 1"
+      >
         <svg
           class="animate-spin h-6 w-6"
           style="color: var(--text-muted)"
@@ -320,7 +370,10 @@ function App() {
 
   if (!onboarded) {
     return html`
-      <div class="min-h-screen flex justify-center pt-12 pb-8 px-4" style="position: relative; z-index: 1">
+      <div
+        class="min-h-screen flex justify-center pt-12 pb-8 px-4"
+        style="position: relative; z-index: 1"
+      >
         <${Welcome} onComplete=${() => setOnboarded(true)} />
       </div>
       <${ToastContainer} />
@@ -354,13 +407,17 @@ function App() {
           )}
         </nav>
         <div class="sidebar-footer">
-          ${acHasUpdate && acLatest && !acDismissed ? html`
-            <button
-              onclick=${handleAcUpdate}
-              disabled=${acUpdating}
-              class="sidebar-update-btn"
-            >${acUpdating ? "Updating..." : `Update to v${acLatest}`}</button>
-          ` : null}
+          ${acHasUpdate && acLatest && !acDismissed
+            ? html`
+                <button
+                  onclick=${handleAcUpdate}
+                  disabled=${acUpdating}
+                  class="sidebar-update-btn"
+                >
+                  ${acUpdating ? "Updating..." : `Update to v${acLatest}`}
+                </button>
+              `
+            : null}
         </div>
       </div>
 
@@ -380,12 +437,26 @@ function App() {
 
       <div class="app-statusbar">
         <div class="statusbar-left">
-          ${acVersion ? html`<span style="color: var(--text-muted)">v${acVersion}</span>` : null}
+          ${acVersion
+            ? html`<span style="color: var(--text-muted)">v${acVersion}</span>`
+            : null}
         </div>
         <div class="statusbar-right">
-          <a href="https://docs.openclaw.ai" target="_blank" rel="noreferrer">docs</a>
-          <a href="https://discord.com/invite/clawd" target="_blank" rel="noreferrer">discord</a>
-          <a href="https://github.com/openclaw/openclaw" target="_blank" rel="noreferrer">github</a>
+          <a href="https://docs.openclaw.ai" target="_blank" rel="noreferrer"
+            >docs</a
+          >
+          <a
+            href="https://discord.com/invite/clawd"
+            target="_blank"
+            rel="noreferrer"
+            >discord</a
+          >
+          <a
+            href="https://github.com/openclaw/openclaw"
+            target="_blank"
+            rel="noreferrer"
+            >github</a
+          >
         </div>
       </div>
     </div>

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

@@ -322,13 +322,13 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
         <button
           onclick=${submit}
           disabled=${saving}
-          class="flex-1 bg-green-500 text-black font-medium py-2 rounded-lg hover:opacity-85 transition-opacity text-sm"
+          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 bg-gray-800 text-gray-300 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm"
+          class="px-4 py-2 rounded-lg text-sm ac-btn-cyan-ghost"
         >
           Cancel
         </button>

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

@@ -332,11 +332,7 @@ export const Envars = () => {
       <button
         onclick=${handleSave}
         disabled=${!dirty || saving || restartingGateway}
-        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ${dirty &&
-        !saving &&
-        !restartingGateway
-          ? "bg-white text-black hover:opacity-85"
-          : "bg-gray-800 text-gray-500 cursor-not-allowed"}"
+        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">
@@ -357,7 +353,7 @@ export const Envars = () => {
               </svg>
               Saving...
             </span>`
-          : "Save Changes"}
+          : "Save changes"}
       </button>
     </div>
   `;

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

@@ -175,10 +175,7 @@ export function Google({ gatewayStatus }) {
                   <button
                     onclick=${() => startAuth(email)}
                     disabled=${isAuthed && !scopesChanged}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg ${isAuthed &&
-                    !scopesChanged
-                      ? "bg-gray-600 text-gray-400 cursor-not-allowed"
-                      : "bg-white text-black hover:opacity-85"}"
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
                   >
                     ${isAuthed ? "Update Permissions" : "Sign in with Google"}
                   </button>
@@ -207,7 +204,7 @@ export function Google({ gatewayStatus }) {
               </p>
               <button
                 onclick=${() => setModalOpen(true)}
-                class="bg-white text-black text-sm font-medium px-4 py-2 rounded-lg hover:opacity-85"
+                class="text-sm font-medium px-4 py-2 rounded-lg ac-btn-cyan"
               >
                 Set up Google
               </button>

package/lib/public/js/components/models.js

@@ -320,7 +320,7 @@ export const Models = () => {
             ? html`
                 <button
                   onclick=${startCodexAuth}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg bg-white text-black hover:opacity-85"
+                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
                 >
                   Connect Codex OAuth
                 </button>
@@ -357,7 +357,7 @@ export const Models = () => {
                 <button
                   onclick=${completeCodexAuth}
                   disabled=${!codexManualInput.trim() || codexExchanging}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg ${!codexManualInput.trim() || codexExchanging ? "bg-gray-700 text-gray-400 cursor-not-allowed" : "bg-white text-black hover:opacity-85"}"
+                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
                 >
                   ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
                 </button>
@@ -442,9 +442,7 @@ export const Models = () => {
       <button
         onclick=${saveChanges}
         disabled=${!canSaveChanges}
-        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ${canSaveChanges
-          ? "bg-white text-black hover:opacity-85"
-          : "bg-gray-800 text-gray-500 cursor-not-allowed"}"
+        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ac-btn-cyan"
       >
         ${savingChanges ? "Saving..." : "Save changes"}
       </button>

package/lib/public/js/components/onboarding/welcome-form-step.js

@@ -110,7 +110,7 @@ export const WelcomeFormStep = ({
           onclick=${startCodexAuth}
           class="text-xs font-medium px-3 py-1.5 rounded-lg ${codexStatus.connected
             ? "border border-border text-gray-300 hover:border-gray-500"
-            : "bg-white text-black hover:opacity-85"}"
+            : "ac-btn-cyan"}"
         >
           ${codexStatus.connected ? "Reconnect Codex" : "Connect Codex OAuth"}
         </button>
@@ -148,10 +148,7 @@ export const WelcomeFormStep = ({
             type="button"
             onclick=${completeCodexAuth}
             disabled=${!codexManualInput.trim() || codexExchanging}
-            class="text-xs font-medium px-3 py-1.5 rounded-lg ${!codexManualInput.trim() ||
-            codexExchanging
-              ? "bg-gray-700 text-gray-400 cursor-not-allowed"
-              : "bg-white text-black hover:opacity-85"}"
+            class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
           >
             ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
           </button>

package/lib/public/js/components/scope-picker.js

@@ -59,8 +59,8 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
           <span class="text-sm">${s.icon} ${s.label}</span>
           <div class="flex items-center gap-2">
             ${apiIndicator}
-            <button onclick=${() => onToggle(`${s.key}:read`)} class="scope-btn ${readOn ? 'active' : ''} text-xs px-2 py-0.5 rounded">Read</button>
-            <button onclick=${() => onToggle(`${s.key}:write`)} class="scope-btn ${writeOn ? 'active' : ''} text-xs px-2 py-0.5 rounded">Write</button>
+            <button onclick=${() => onToggle(`${s.key}:read`)} class="scope-btn scope-btn-read ${readOn ? 'active' : ''} text-xs px-2 py-0.5 rounded">Read</button>
+            <button onclick=${() => onToggle(`${s.key}:write`)} class="scope-btn scope-btn-write ${writeOn ? 'active' : ''} text-xs px-2 py-0.5 rounded">Write</button>
           </div>
         </div>`;
     })}

package/lib/public/js/components/welcome.js

@@ -224,7 +224,9 @@ export const Welcome = ({ onComplete }) => {
 
     try {
       const vars = Object.entries(vals)
-        .filter(([key]) => key !== "MODEL_KEY")
+        .filter(
+          ([key]) => key !== "MODEL_KEY" && !String(key || "").startsWith("_"),
+        )
         .filter(([, v]) => v)
         .map(([key, value]) => ({ key, value }));
       const result = await runOnboard(vars, vals.MODEL_KEY);

package/lib/server/routes/google.js

@@ -91,7 +91,6 @@ const registerGoogleRoutes = ({
 
       const services = req.body.services || [
         "gmail:read",
-        "gmail:write",
         "calendar:read",
         "calendar:write",
         "drive:read",
@@ -208,7 +207,7 @@ const registerGoogleRoutes = ({
     const email = req.query.email || "";
     const services = (
       req.query.services ||
-      "gmail:read,gmail:write,calendar:read,calendar:write,drive:read,sheets:read,docs:read"
+      "gmail:read,calendar:read,calendar:write,drive:read,sheets:read,docs:read"
     )
       .split(",")
       .filter(Boolean);

package/package.json

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