@chrysb/alphaclaw 0.1.18 → 0.1.20

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

@@ -31,7 +31,7 @@ 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);
 
@@ -115,6 +115,11 @@ const GeneralTab = ({ onSwitchTab }) => {
     setGoogleKey((k) => k + 1);
   };
 
+  useEffect(() => {
+    if (!isActive) return;
+    fullRefresh();
+  }, [isActive]);
+
   useEffect(() => {
     if (!syncCron) return;
     setSyncCronEnabled(syncCron.enabled !== false);
@@ -424,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/onboarding/welcome-form-step.js

@@ -249,9 +249,7 @@ export const WelcomeFormStep = ({
           <button
             onclick=${goNext}
             disabled=${!currentGroupValid}
-            class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ${currentGroupValid
-              ? "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 rounded-xl transition-all ac-btn-cyan"
           >
             Next
           </button>
@@ -268,10 +266,7 @@ export const WelcomeFormStep = ({
           <button
             onclick=${handleSubmit}
             disabled=${!allValid || loading}
-            class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ${allValid &&
-            !loading
-              ? "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 rounded-xl transition-all ac-btn-cyan"
           >
             ${loading ? "Starting..." : "Complete Setup"}
           </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/login.html

@@ -60,9 +60,9 @@
           id="submit-btn"
           type="submit"
           disabled
-          class="w-full text-sm font-medium px-4 py-2 rounded-lg bg-gray-800 text-gray-500 cursor-not-allowed"
+          class="w-full text-sm font-medium px-4 py-2 rounded-lg ac-btn-cyan"
         >
-          Continue
+          Enter
         </button>
       </form>
     </div>
@@ -71,22 +71,9 @@
       const passwordEl = document.getElementById("password");
       const submitButtonEl = document.getElementById("submit-btn");
 
-      const kEnabledClasses = ["bg-white", "text-black", "hover:opacity-85"];
-      const kDisabledClasses = [
-        "bg-gray-800",
-        "text-gray-500",
-        "cursor-not-allowed",
-      ];
-
       const syncButtonState = () => {
         const hasValue = passwordEl.value.length > 0;
         submitButtonEl.disabled = !hasValue;
-        kEnabledClasses.forEach((c) =>
-          submitButtonEl.classList.toggle(c, hasValue),
-        );
-        kDisabledClasses.forEach((c) =>
-          submitButtonEl.classList.toggle(c, !hasValue),
-        );
       };
 
       passwordEl.addEventListener("input", syncButtonState);

package/package.json

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