@chrysb/alphaclaw 0.2.3 → 0.3.1

package/lib/public/js/components/providers.js

@@ -10,11 +10,13 @@ import {
   fetchCodexStatus,
   disconnectCodex,
   exchangeCodexOAuth,
-  restartGateway,
 } from "../lib/api.js";
 import { showToast } from "./toast.js";
 import { Badge } from "./badge.js";
 import { SecretInput } from "./secret-input.js";
+import { PageHeader } from "./page-header.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { ActionButton } from "./action-button.js";
 import {
   getModelProvider,
   getAuthProviderFromModelProvider,
@@ -35,12 +37,15 @@ const kAiCredentialKeys = Object.values(kProviderAuthFields)
   .filter((key, idx, arr) => arr.indexOf(key) === idx);
 let kProvidersTabCache = null;
 
-const FeatureTags = ({ provider }) => {
-  const features = kProviderFeatures[provider] || [];
-  if (!features.length) return null;
+const FeatureTags = ({ provider, features = null }) => {
+  const resolvedFeatures = Array.isArray(features)
+    ? features
+    : kProviderFeatures[provider] || [];
+  const uniqueFeatures = Array.from(new Set(resolvedFeatures));
+  if (!uniqueFeatures.length) return null;
   return html`
     <div class="flex flex-wrap gap-1.5">
-      ${features.map(
+      ${uniqueFeatures.map(
         (f) => html`
           <span
             class="text-xs px-1.5 py-0.5 rounded-md bg-white/5 text-gray-400"
@@ -52,25 +57,37 @@ const FeatureTags = ({ provider }) => {
   `;
 };
 
-export const Providers = () => {
-  const [envVars, setEnvVars] = useState(() => kProvidersTabCache?.envVars || []);
+export const Providers = ({ onRestartRequired = () => {} }) => {
+  const [envVars, setEnvVars] = useState(
+    () => kProvidersTabCache?.envVars || [],
+  );
   const [models, setModels] = useState(() => kProvidersTabCache?.models || []);
-  const [selectedModel, setSelectedModel] = useState(() => kProvidersTabCache?.selectedModel || "");
-  const [showAllModels, setShowAllModels] = useState(() => kProvidersTabCache?.showAllModels || false);
+  const [selectedModel, setSelectedModel] = useState(
+    () => kProvidersTabCache?.selectedModel || "",
+  );
+  const [showAllModels, setShowAllModels] = useState(
+    () => kProvidersTabCache?.showAllModels || false,
+  );
   const [savingChanges, setSavingChanges] = useState(false);
-  const [codexStatus, setCodexStatus] = useState(() => kProvidersTabCache?.codexStatus || { connected: false });
+  const [codexStatus, setCodexStatus] = useState(
+    () => kProvidersTabCache?.codexStatus || { connected: false },
+  );
   const [codexManualInput, setCodexManualInput] = useState("");
   const [codexExchanging, setCodexExchanging] = useState(false);
   const [codexAuthStarted, setCodexAuthStarted] = useState(false);
   const [codexAuthWaiting, setCodexAuthWaiting] = useState(false);
   const [modelsLoading, setModelsLoading] = useState(() => !kProvidersTabCache);
-  const [modelsError, setModelsError] = useState(() => kProvidersTabCache?.modelsError || "");
+  const [modelsError, setModelsError] = useState(
+    () => kProvidersTabCache?.modelsError || "",
+  );
   const [ready, setReady] = useState(() => !!kProvidersTabCache);
-  const [savedModel, setSavedModel] = useState(() => kProvidersTabCache?.savedModel || "");
+  const [savedModel, setSavedModel] = useState(
+    () => kProvidersTabCache?.savedModel || "",
+  );
   const [modelDirty, setModelDirty] = useState(false);
-  const [savedAiValues, setSavedAiValues] = useState(() => kProvidersTabCache?.savedAiValues || {});
-  const [restartRequired, setRestartRequired] = useState(false);
-  const [restartingGateway, setRestartingGateway] = useState(false);
+  const [savedAiValues, setSavedAiValues] = useState(
+    () => kProvidersTabCache?.savedAiValues || {},
+  );
   const [showMoreProviders, setShowMoreProviders] = useState(false);
   const codexPopupPollRef = useRef(null);
 
@@ -85,7 +102,9 @@ export const Providers = () => {
         fetchCodexStatus(),
       ]);
       setEnvVars(env.vars || []);
-      const catalogModels = Array.isArray(modelCatalog.models) ? modelCatalog.models : [];
+      const catalogModels = Array.isArray(modelCatalog.models)
+        ? modelCatalog.models
+        : [];
       setModels(catalogModels);
       const currentModel = modelStatus.modelKey || "";
       setSelectedModel(currentModel);
@@ -110,7 +129,7 @@ export const Providers = () => {
       };
     } catch (err) {
       setModelsError("Failed to load provider settings");
-      showToast(`Failed to load provider settings: ${err.message}`, "red");
+      showToast(`Failed to load provider settings: ${err.message}`, "error");
     } finally {
       setReady(true);
       setModelsLoading(false);
@@ -125,10 +144,16 @@ export const Providers = () => {
         setCodexAuthStarted(false);
         setCodexAuthWaiting(false);
       }
-      kProvidersTabCache = { ...(kProvidersTabCache || {}), codexStatus: codex || { connected: false } };
+      kProvidersTabCache = {
+        ...(kProvidersTabCache || {}),
+        codexStatus: codex || { connected: false },
+      };
     } catch {
       setCodexStatus({ connected: false });
-      kProvidersTabCache = { ...(kProvidersTabCache || {}), codexStatus: { connected: false } };
+      kProvidersTabCache = {
+        ...(kProvidersTabCache || {}),
+        codexStatus: { connected: false },
+      };
     }
   };
 
@@ -136,20 +161,26 @@ export const Providers = () => {
     refresh();
   }, []);
 
-  useEffect(() => () => {
-    if (codexPopupPollRef.current) {
-      clearInterval(codexPopupPollRef.current);
-      codexPopupPollRef.current = null;
-    }
-  }, []);
+  useEffect(
+    () => () => {
+      if (codexPopupPollRef.current) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+      }
+    },
+    [],
+  );
 
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
-        showToast("Codex connected", "green");
+        showToast("Codex connected", "success");
         await refreshCodexConnection();
       } else if (e.data?.codex === "error") {
-        showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "red");
+        showToast(
+          `Codex auth failed: ${e.data.message || "unknown error"}`,
+          "error",
+        );
       }
     };
     window.addEventListener("message", onMessage);
@@ -165,7 +196,9 @@ export const Providers = () => {
   };
 
   const selectedModelProvider = getModelProvider(selectedModel);
-  const selectedAuthProvider = getAuthProviderFromModelProvider(selectedModelProvider);
+  const selectedAuthProvider = getAuthProviderFromModelProvider(
+    selectedModelProvider,
+  );
   const primaryProvider = kProviderOrder.includes(selectedAuthProvider)
     ? selectedAuthProvider
     : kProviderOrder[0];
@@ -174,36 +207,47 @@ export const Providers = () => {
   const baseModelOptions = showAllModels
     ? models
     : featuredModels.length > 0
-    ? featuredModels
-    : models;
-  const selectedModelOption = models.find((model) => model.key === selectedModel);
+      ? featuredModels
+      : models;
+  const selectedModelOption = models.find(
+    (model) => model.key === selectedModel,
+  );
   const modelOptions =
     selectedModelOption &&
     !baseModelOptions.some((model) => model.key === selectedModelOption.key)
       ? [...baseModelOptions, selectedModelOption]
       : baseModelOptions;
-  const canToggleFullCatalog = featuredModels.length > 0 && models.length > featuredModels.length;
+  const canToggleFullCatalog =
+    featuredModels.length > 0 && models.length > featuredModels.length;
 
   const aiCredentialsDirty = kAiCredentialKeys.some(
     (key) => getKeyVal(envVars, key) !== (savedAiValues[key] || ""),
   );
   const hasSelectedProviderAuth =
     selectedModelProvider === "anthropic"
-      ? !!(getKeyVal(envVars, "ANTHROPIC_API_KEY") || getKeyVal(envVars, "ANTHROPIC_TOKEN"))
+      ? !!(
+          getKeyVal(envVars, "ANTHROPIC_API_KEY") ||
+          getKeyVal(envVars, "ANTHROPIC_TOKEN")
+        )
       : selectedModelProvider === "openai"
-      ? !!getKeyVal(envVars, "OPENAI_API_KEY")
-      : selectedModelProvider === "openai-codex"
-      ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
-      : selectedModelProvider === "google"
-      ? !!getKeyVal(envVars, "GEMINI_API_KEY")
-      : false;
-  const canSaveChanges = !savingChanges && (aiCredentialsDirty || (modelDirty && hasSelectedProviderAuth));
+        ? !!getKeyVal(envVars, "OPENAI_API_KEY")
+        : selectedModelProvider === "openai-codex"
+          ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
+          : selectedModelProvider === "google"
+            ? !!getKeyVal(envVars, "GEMINI_API_KEY")
+            : false;
+  const canSaveChanges =
+    !savingChanges &&
+    (aiCredentialsDirty || (modelDirty && hasSelectedProviderAuth));
 
   const saveChanges = async () => {
     if (savingChanges) return;
     if (!modelDirty && !aiCredentialsDirty) return;
     if (modelDirty && !hasSelectedProviderAuth) {
-      showToast("Add credentials for the selected model provider before saving model changes", "red");
+      showToast(
+        "Add credentials for the selected model provider before saving model changes",
+        "error",
+      );
       return;
     }
     setSavingChanges(true);
@@ -215,30 +259,38 @@ export const Providers = () => {
           .filter((v) => v.editable)
           .map((v) => ({ key: v.key, value: v.value }));
         const envResult = await saveEnvVars(payload);
-        if (!envResult.ok) throw new Error(envResult.error || "Failed to save env vars");
-        if (envResult.restartRequired) setRestartRequired(true);
+        if (!envResult.ok)
+          throw new Error(envResult.error || "Failed to save env vars");
+        if (envResult.restartRequired) onRestartRequired(true);
       }
 
       if (modelDirty && targetModel) {
         const modelResult = await setPrimaryModel(targetModel);
-        if (!modelResult.ok) throw new Error(modelResult.error || "Failed to set primary model");
+        if (!modelResult.ok)
+          throw new Error(modelResult.error || "Failed to set primary model");
         const status = await fetchModelStatus();
         if (status?.ok === false) {
           throw new Error(status.error || "Failed to verify primary model");
         }
         const activeModel = status?.modelKey || "";
         if (activeModel && activeModel !== targetModel) {
-          throw new Error(`Primary model did not apply. Expected ${targetModel} but active is ${activeModel}`);
+          throw new Error(
+            `Primary model did not apply. Expected ${targetModel} but active is ${activeModel}`,
+          );
         }
         setSavedModel(targetModel);
         setModelDirty(false);
-        kProvidersTabCache = { ...(kProvidersTabCache || {}), selectedModel: targetModel, savedModel: targetModel };
+        kProvidersTabCache = {
+          ...(kProvidersTabCache || {}),
+          selectedModel: targetModel,
+          savedModel: targetModel,
+        };
       }
 
-      showToast("Changes saved", "green");
       await refresh();
+      showToast("Changes saved", "success");
     } catch (err) {
-      showToast(err.message || "Failed to save changes", "red");
+      showToast(err.message || "Failed to save changes", "error");
     } finally {
       setSavingChanges(false);
     }
@@ -248,7 +300,11 @@ export const Providers = () => {
     if (codexStatus.connected) return;
     setCodexAuthStarted(true);
     setCodexAuthWaiting(true);
-    const popup = window.open("/auth/codex/start", "codex-auth", "popup=yes,width=640,height=780");
+    const popup = window.open(
+      "/auth/codex/start",
+      "codex-auth",
+      "popup=yes,width=640,height=780",
+    );
     if (!popup || popup.closed) {
       setCodexAuthWaiting(false);
       window.location.href = "/auth/codex/start";
@@ -271,14 +327,15 @@ export const Providers = () => {
     setCodexExchanging(true);
     try {
       const result = await exchangeCodexOAuth(codexManualInput.trim());
-      if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
       setCodexManualInput("");
-      showToast("Codex connected", "green");
+      showToast("Codex connected", "success");
       setCodexAuthStarted(false);
       setCodexAuthWaiting(false);
       await refreshCodexConnection();
     } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "red");
+      showToast(err.message || "Codex OAuth exchange failed", "error");
     } finally {
       setCodexExchanging(false);
     }
@@ -287,10 +344,10 @@ export const Providers = () => {
   const handleCodexDisconnect = async () => {
     const result = await disconnectCodex();
     if (!result.ok) {
-      showToast(result.error || "Failed to disconnect Codex", "red");
+      showToast(result.error || "Failed to disconnect Codex", "error");
       return;
     }
-    showToast("Codex disconnected", "green");
+    showToast("Codex disconnected", "success");
     setCodexAuthStarted(false);
     setCodexAuthWaiting(false);
     setCodexManualInput("");
@@ -307,7 +364,8 @@ export const Providers = () => {
               target="_blank"
               class="text-xs hover:underline"
               style="color: var(--accent-link)"
-            >Get</a>`
+              >Get</a
+            >`
           : null}
       </div>
       <${SecretInput}
@@ -336,48 +394,49 @@ export const Providers = () => {
             <div class="flex gap-2">
               <button
                 onclick=${startCodexAuth}
-                class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+                class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
               >
                 Reconnect Codex
               </button>
               <button
                 onclick=${handleCodexDisconnect}
-                class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+                class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-ghost"
               >
                 Disconnect
               </button>
             </div>
           `
         : !codexAuthStarted
-        ? html`
-            <button
-              onclick=${startCodexAuth}
-              class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
-            >
-              Connect Codex OAuth
-            </button>
-          `
-        : html`
-            <div class="flex items-center justify-between gap-2">
-              <p class="text-xs text-gray-500">
-                ${codexAuthWaiting
-                  ? "Complete login in the popup, then paste the redirect URL."
-                  : "Paste the redirect URL from your browser to finish connecting."}
-              </p>
+          ? html`
               <button
                 onclick=${startCodexAuth}
-                class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500 shrink-0"
+                class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
               >
-                Restart
+                Connect Codex OAuth
               </button>
-            </div>
-          `}
+            `
+          : html`
+              <div class="flex items-center justify-between gap-2">
+                <p class="text-xs text-gray-500">
+                  ${codexAuthWaiting
+                    ? "Complete login in the popup, then paste the redirect URL."
+                    : "Paste the redirect URL from your browser to finish connecting."}
+                </p>
+                <button
+                  onclick=${startCodexAuth}
+                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
+                >
+                  Restart
+                </button>
+              </div>
+            `}
       ${!codexStatus.connected && codexAuthStarted
         ? html`
             <p class="text-xs text-gray-500">
               After login, copy the full redirect URL (starts with
-              <code class="text-xs bg-black/30 px-1 rounded">http://localhost:1455/auth/callback</code>)
-              and paste it here.
+              <code class="text-xs bg-black/30 px-1 rounded"
+                >http://localhost:1455/auth/callback</code
+              >) and paste it here.
             </p>
             <input
               type="text"
@@ -386,13 +445,16 @@ export const Providers = () => {
               placeholder="http://localhost:1455/auth/callback?code=...&state=..."
               class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
             />
-            <button
-              onclick=${completeCodexAuth}
+            <${ActionButton}
+              onClick=${completeCodexAuth}
               disabled=${!codexManualInput.trim() || codexExchanging}
-              class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
-            >
-              ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
-            </button>
+              loading=${codexExchanging}
+              tone="primary"
+              size="sm"
+              idleLabel="Complete Codex OAuth"
+              loadingLabel="Completing..."
+              className="text-xs font-medium px-3 py-1.5"
+            />
           `
         : null}
     </div>
@@ -407,6 +469,7 @@ export const Providers = () => {
     const fields = kProviderAuthFields[provider] || [];
     const hasCodex = provider === "openai";
     const hasKey = providerHasKey(provider);
+    const openAiFeatures = kProviderFeatures.openai || [];
     return html`
       <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
         <div class="flex items-center gap-2">
@@ -414,25 +477,43 @@ export const Providers = () => {
             ${kProviderLabels[provider] || provider}
           </h3>
           ${hasKey
-            ? html`<span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500" />`
+            ? html`<span
+                class="inline-block w-1.5 h-1.5 rounded-full bg-green-500"
+              />`
             : null}
         </div>
         ${fields.map((field) => renderCredentialField(field))}
+        ${provider === "openai"
+          ? html`<${FeatureTags} features=${openAiFeatures} />`
+          : null}
         ${hasCodex ? renderCodexOAuth() : null}
-        <${FeatureTags} provider=${provider} />
+        ${provider !== "openai"
+          ? html`<${FeatureTags} provider=${provider} />`
+          : null}
       </div>
     `;
   };
 
   if (!ready) {
     return html`
-      <div class="bg-surface border border-border rounded-xl p-4">
-        <div class="flex items-center gap-2 text-sm text-gray-400">
-          <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-          </svg>
-          Loading provider settings...
+      <div class="space-y-4">
+        <${PageHeader}
+          title="Providers"
+          actions=${html`
+            <${ActionButton}
+              disabled=${true}
+              tone="primary"
+              size="sm"
+              idleLabel="Save changes"
+              className="transition-all"
+            />
+          `}
+        />
+        <div class="bg-surface border border-border rounded-xl p-4">
+          <div class="flex items-center gap-2 text-sm text-gray-400">
+            <${LoadingSpinner} className="h-4 w-4" />
+            Loading provider settings...
+          </div>
         </div>
       </div>
     `;
@@ -449,6 +530,22 @@ export const Providers = () => {
 
   return html`
     <div class="space-y-4">
+      <${PageHeader}
+        title="Providers"
+        actions=${html`
+          <${ActionButton}
+            onClick=${saveChanges}
+            disabled=${!canSaveChanges}
+            loading=${savingChanges}
+            tone="primary"
+            size="sm"
+            idleLabel="Save changes"
+            loadingLabel="Saving..."
+            className="transition-all"
+          />
+        `}
+      />
+
       <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
         <h2 class="font-semibold text-sm">Primary Agent Model</h2>
         <select
@@ -457,17 +554,27 @@ export const Providers = () => {
             const next = e.target.value;
             setSelectedModel(next);
             setModelDirty(next !== savedModel);
-            kProvidersTabCache = { ...(kProvidersTabCache || {}), selectedModel: next };
+            kProvidersTabCache = {
+              ...(kProvidersTabCache || {}),
+              selectedModel: next,
+            };
           }}
           class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
         >
           <option value="">Select a model</option>
           ${modelOptions.map(
-            (model) => html`<option value=${model.key}>${model.label || model.key}</option>`,
+            (model) =>
+              html`<option value=${model.key}>
+                ${model.label || model.key}
+              </option>`,
           )}
         </select>
         <p class="text-xs text-gray-600">
-          ${modelsLoading ? "Loading model catalog..." : modelsError ? modelsError : ""}
+          ${modelsLoading
+            ? "Loading model catalog..."
+            : modelsError
+              ? modelsError
+              : ""}
         </p>
         ${canToggleFullCatalog
           ? html`
@@ -477,12 +584,17 @@ export const Providers = () => {
                   onclick=${() =>
                     setShowAllModels((prev) => {
                       const next = !prev;
-                      kProvidersTabCache = { ...(kProvidersTabCache || {}), showAllModels: next };
+                      kProvidersTabCache = {
+                        ...(kProvidersTabCache || {}),
+                        showAllModels: next,
+                      };
                       return next;
                     })}
                   class="text-xs text-gray-500 hover:text-gray-300"
                 >
-                  ${showAllModels ? "Show recommended models" : "Show full model catalog"}
+                  ${showAllModels
+                    ? "Show recommended models"
+                    : "Show full model catalog"}
                 </button>
               </div>
             `
@@ -495,67 +607,29 @@ export const Providers = () => {
       ${otherProviders
         .filter((p) => kCoreProviders.has(p))
         .map((provider) => renderProviderCard(provider))}
-
       ${showMoreProviders
         ? otherProviders
             .filter((p) => !kCoreProviders.has(p))
             .map((provider) => renderProviderCard(provider))
         : null}
-
       ${otherProviders.some((p) => !kCoreProviders.has(p))
         ? html`
             <button
               type="button"
               onclick=${() => setShowMoreProviders((prev) => !prev)}
-              class="w-full text-xs text-gray-500 hover:text-gray-300 py-1"
+              class="w-full text-xs px-3 py-1.5 rounded-lg ac-btn-ghost"
             >
-              ${showMoreProviders ? "Hide additional providers" : "More providers"}
+              ${showMoreProviders
+                ? "Hide additional providers"
+                : "More providers"}
             </button>
           `
         : null}
-
-      ${restartRequired
-        ? html`<div
-            class="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4 flex items-center justify-between gap-3"
-          >
-            <p class="text-sm text-yellow-200">
-              Gateway restart required to apply changes.
-            </p>
-            <button
-              onclick=${async () => {
-                if (restartingGateway) return;
-                setRestartingGateway(true);
-                try {
-                  await restartGateway();
-                  setRestartRequired(false);
-                  showToast("Gateway restarted", "success");
-                } catch (err) {
-                  showToast("Restart failed: " + err.message, "error");
-                } finally {
-                  setRestartingGateway(false);
-                }
-              }}
-              disabled=${restartingGateway}
-              class="text-xs px-2.5 py-1 rounded-lg border border-yellow-500/40 text-yellow-200 hover:border-yellow-400 hover:text-yellow-100 transition-colors shrink-0 ${restartingGateway
-                ? "opacity-60 cursor-not-allowed"
-                : ""}"
-            >
-              ${restartingGateway ? "Restarting..." : "Restart Gateway"}
-            </button>
-          </div>`
-        : null}
-
-      <button
-        onclick=${saveChanges}
-        disabled=${!canSaveChanges}
-        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ac-btn-cyan"
-      >
-        ${savingChanges ? "Saving..." : "Save changes"}
-      </button>
       ${modelDirty && !hasSelectedProviderAuth
         ? html`
             <p class="text-xs text-yellow-500">
-              Set credentials for the selected provider before saving this model change.
+              Set credentials for the selected provider before saving this model
+              change.
             </p>
           `
         : null}

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

@@ -43,7 +43,7 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       const api = status[s.key];
       let apiIndicator = null;
       if (loading && !api && (readOn || writeOn)) {
-        apiIndicator = html`<span class="text-gray-500 text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full animate-spin"></span></span>`;
+        apiIndicator = html`<span class="text-gray-500 text-xs flex items-center gap-1"><span class="inline-block w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full ac-spinner"></span></span>`;
       } else if (api) {
         if (api.status === 'ok') {
           apiIndicator = html`<a href=${api.enableUrl || getApiEnableUrl(s.key)} target="_blank" class="text-green-500 hover:text-green-300 text-xs px-1.5 py-0.5 rounded bg-green-500/10">API ✓</a>`;

package/lib/public/js/components/secret-input.js

@@ -32,6 +32,7 @@ export const SecretInput = ({
         onBlur=${onBlur}
         disabled=${disabled}
         class=${inputClass}
+        autocomplete="off"
       />
       ${showToggle
         ? html`<button