@chrysb/alphaclaw 0.1.17 → 0.1.19

package/lib/public/css/theme.css

@@ -48,12 +48,12 @@ body::before {
 .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-read.active {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.03);
   color: #f3f4f6;
   border-color: rgba(255, 255, 255, 0.35);
 }
 .scope-btn-write.active {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.03);
   color: #f3f4f6;
   border-color: rgba(255, 255, 255, 0.35);
 }
@@ -113,3 +113,37 @@ body::before {
   color: #a4f3ff;
   background: rgba(99, 235, 255, 0.08);
 }
+
+.ac-btn-green {
+  border: 1px solid rgba(34, 197, 94, 0.45);
+  background: linear-gradient(
+    180deg,
+    rgba(34, 197, 94, 0.2) 0%,
+    rgba(34, 197, 94, 0.12) 100%
+  );
+  color: #86efac;
+  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 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-green:hover:not(:disabled) {
+  border-color: rgba(34, 197, 94, 0.7);
+  background: linear-gradient(
+    180deg,
+    rgba(34, 197, 94, 0.28) 0%,
+    rgba(34, 197, 94, 0.16) 100%
+  );
+  color: #bbf7d0;
+  box-shadow:
+    inset 0 0 0 1px rgba(34, 197, 94, 0.2),
+    0 0 12px rgba(34, 197, 94, 0.12);
+}
+
+.ac-btn-green:active:not(:disabled) {
+  transform: translateY(1px);
+}

package/lib/public/js/app.js

@@ -27,8 +27,11 @@ 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 GeneralTab = ({ onSwitchTab, isActive }) => {
   const [googleKey, setGoogleKey] = useState(0);
   const [dashboardLoading, setDashboardLoading] = useState(false);
 
@@ -112,6 +115,11 @@ const GeneralTab = ({ onSwitchTab }) => {
     setGoogleKey((k) => k + 1);
   };
 
+  useEffect(() => {
+    if (!isActive) return;
+    fullRefresh();
+  }, [isActive]);
+
   useEffect(() => {
     if (!syncCron) return;
     setSyncCronEnabled(syncCron.enabled !== false);
@@ -269,7 +277,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);
@@ -282,6 +297,12 @@ function App() {
       .catch(() => setOnboarded(false));
   }, []);
 
+  useEffect(() => {
+    try {
+      localStorage.setItem(kUiTabStorageKey, tab);
+    } catch {}
+  }, [tab]);
+
   useEffect(() => {
     if (!onboarded) return;
     let active = true;
@@ -408,7 +429,7 @@ function App() {
       <div class="app-content">
         <div class="max-w-2xl w-full mx-auto space-y-4">
           <div style=${{ display: tab === "general" ? "" : "none" }}>
-            <${GeneralTab} onSwitchTab=${setTab} />
+            <${GeneralTab} onSwitchTab=${setTab} isActive=${tab === "general"} />
           </div>
           <div style=${{ display: tab === "models" ? "" : "none" }}>
             <${Models} />

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

@@ -55,7 +55,7 @@ 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="bg-green-500 text-black text-xs font-medium px-3 py-1.5 rounded-lg hover:opacity-85">Approve</button>
+        <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>
       </div>
     </div>`;

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/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/pairings.js

@@ -37,7 +37,7 @@ const PairingRow = ({ p, onApprove, onReject }) => {
     <div class="bg-black/30 rounded-lg p-3 mb-2">
       <div class="font-medium text-sm mb-2">${label} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
       <div class="flex gap-2">
-        <button onclick=${() => handle("approve")} class="bg-green-500 text-black text-xs font-medium px-3 py-1.5 rounded-lg hover:opacity-85">Approve</button>
+        <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>
       </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/package.json

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