@chrysb/alphaclaw 0.1.22 → 0.1.24

package/bin/alphaclaw.js

@@ -122,6 +122,20 @@ try {
   console.log(`[alphaclaw] .env setup skipped: ${e.message}`);
 }
 
+// ---------------------------------------------------------------------------
+// 5. Symlink <rootDir>/.openclaw/.env -> <rootDir>/.env
+// ---------------------------------------------------------------------------
+
+const openclawEnvLink = path.join(openclawDir, ".env");
+try {
+  if (!fs.existsSync(openclawEnvLink)) {
+    fs.symlinkSync(envFilePath, openclawEnvLink);
+    console.log(`[alphaclaw] Symlinked ${openclawEnvLink} -> ${envFilePath}`);
+  }
+} catch (e) {
+  console.log(`[alphaclaw] .env symlink skipped: ${e.message}`);
+}
+
 // ---------------------------------------------------------------------------
 // 6. Load .env into process.env
 // ---------------------------------------------------------------------------

package/lib/public/css/theme.css

@@ -41,12 +41,25 @@ body::before {
   z-index: 0;
 }
 
+/* Standardised card / section label. */
+.card-label {
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
 /* Unified panel treatment across tabs/pages. */
 .bg-surface {
   background: var(--panel-bg-contrast) !important;
   border-color: var(--panel-border-contrast) !important;
 }
 
+/* Solid background for modals so page content doesn't bleed through. */
+.bg-modal {
+  background: var(--bg) !important;
+  border-color: var(--panel-border-contrast) !important;
+}
+
 .border-border {
   border-color: var(--panel-border-contrast) !important;
 }

package/lib/public/js/app.js

@@ -23,13 +23,14 @@ import { Channels, ALL_CHANNELS } from "./components/channels.js";
 import { Pairings } from "./components/pairings.js";
 import { DevicePairings } from "./components/device-pairings.js";
 import { Google } from "./components/google.js";
-import { Models } from "./components/models.js";
+import { Features } from "./components/features.js";
+import { Providers } from "./components/providers.js";
 import { Welcome } from "./components/welcome.js";
 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 kUiTabs = ["general", "models", "envars"];
+const kUiTabs = ["general", "providers", "envars"];
 const kDefaultUiTab = "general";
 
 const GeneralTab = ({ onSwitchTab, isActive }) => {
@@ -163,6 +164,7 @@ const GeneralTab = ({ onSwitchTab, isActive }) => {
         onApprove=${handleApprove}
         onReject=${handleReject}
       />
+      <${Features} onSwitchTab=${onSwitchTab} />
       <${Google} key=${googleKey} gatewayStatus=${gatewayStatus} />
 
       ${repo &&
@@ -401,7 +403,7 @@ function App() {
 
   const kNavItems = [
     { id: "general", label: "General" },
-    { id: "models", label: "Models" },
+    { id: "providers", label: "Providers" },
     { id: "envars", label: "Envars" },
   ];
 
@@ -476,8 +478,8 @@ function App() {
               isActive=${tab === "general"}
             />
           </div>
-          <div style=${{ display: tab === "models" ? "" : "none" }}>
-            <${Models} />
+          <div style=${{ display: tab === "providers" ? "" : "none" }}>
+            <${Providers} />
           </div>
           <div style=${{ display: tab === "envars" ? "" : "none" }}>
             <${Envars} />

package/lib/public/js/components/badge.js

@@ -6,6 +6,7 @@ const html = htm.bind(h);
 const kToneClasses = {
   success: "bg-green-500/10 text-green-500",
   warning: "bg-yellow-500/10 text-yellow-500",
+  danger: "bg-red-500/10 text-red-400",
   neutral: "bg-gray-500/10 text-gray-400",
 };
 

package/lib/public/js/components/channels.js

@@ -12,7 +12,7 @@ const kChannelMeta = {
 export function Channels({ channels, onSwitchTab }) {
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
-      <h2 class="font-semibold mb-3">Channels</h2>
+      <h2 class="card-label mb-3">Channels</h2>
       <div class="space-y-2">
         ${channels ? ALL_CHANNELS.map(ch => {
           const info = channels[ch];

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

@@ -100,7 +100,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
     }}
   >
     <div
-      class="bg-surface border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
+      class="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
     >
       <h2 class="text-lg font-semibold">Connect Google Workspace</h2>
       <div class="space-y-3">

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

@@ -50,7 +50,7 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
             ? "bg-green-500"
             : "bg-gray-600"}"
         />
-        <code class="text-xs truncate" style="color: var(--text-muted)">${envVar.key}</code>
+        <code class="text-sm truncate">${envVar.key}</code>
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1">
@@ -286,7 +286,7 @@ export const Envars = () => {
         .map(
           (g) => html`
             <div class="bg-surface border border-border rounded-xl overflow-hidden">
-              <h3 class="text-xs font-semibold px-4 pt-3 pb-2" style="color: var(--text-dim); letter-spacing: 0.05em">
+              <h3 class="card-label text-xs px-4 pt-3 pb-2">
                 ${kGroupLabels[g] || g}
               </h3>
               <div class="divide-y divide-border">
@@ -306,7 +306,7 @@ export const Envars = () => {
 
       <div class="bg-surface border border-border rounded-xl overflow-hidden">
         <div class="flex items-center justify-between px-4 pt-3 pb-2">
-          <h3 class="text-xs font-semibold" style="color: var(--text-dim); letter-spacing: 0.05em">Add Variable</h3>
+          <h3 class="card-label text-xs">Add Variable</h3>
           <span class="text-xs" style="color: var(--text-dim)">Paste KEY=VALUE or multiple lines</span>
         </div>
         <div class="flex items-start gap-4 px-4 py-3 border-t border-border">

package/lib/public/js/components/features.js

@@ -0,0 +1,91 @@
+import { h } from "https://esm.sh/preact";
+import { useState, useEffect } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { fetchEnvVars } from "../lib/api.js";
+import { Badge } from "./badge.js";
+import {
+  kFeatureDefs,
+  kProviderAuthFields,
+  kProviderLabels,
+} from "../lib/model-config.js";
+
+const html = htm.bind(h);
+
+const getKeyVal = (vars, key) => vars.find((v) => v.key === key)?.value || "";
+
+const resolveFeatureStatus = (feature, envVars) => {
+  for (const provider of feature.providers) {
+    const fields = kProviderAuthFields[provider] || [];
+    const hasKey = fields.some((f) => !!getKeyVal(envVars, f.key));
+    if (hasKey) return { active: true, provider };
+  }
+  return { active: false, provider: null };
+};
+
+export const Features = ({ onSwitchTab }) => {
+  const [envVars, setEnvVars] = useState([]);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    fetchEnvVars()
+      .then((data) => {
+        setEnvVars(data.vars || []);
+        setLoaded(true);
+      })
+      .catch(() => setLoaded(true));
+  }, []);
+
+  if (!loaded) return null;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      <h2 class="card-label mb-3">Features</h2>
+      <div class="space-y-2">
+        ${kFeatureDefs.map((feature) => {
+          const status = resolveFeatureStatus(feature, envVars);
+          return html`
+            <div class="flex justify-between items-center py-1.5">
+              <span class="text-sm text-gray-300">${feature.label}</span>
+              ${status.active
+                ? html`
+                    <span class="flex items-center gap-2">
+                      <span class="text-xs text-gray-400">
+                        ${kProviderLabels[status.provider] || status.provider}
+                      </span>
+                      <${Badge} tone="success">Enabled</${Badge}>
+                    </span>
+                  `
+                : feature.hasDefault
+                  ? html`
+                    <span class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        onclick=${(e) => {
+                          e.preventDefault();
+                          onSwitchTab?.("providers");
+                        }}
+                        class="text-xs text-gray-500 hover:text-gray-300"
+                      >Add provider</a>
+                      <${Badge} tone="success">Default</${Badge}>
+                    </span>
+                  `
+                  : html`
+                    <span class="flex items-center gap-2">
+                      <a
+                        href="#"
+                        onclick=${(e) => {
+                          e.preventDefault();
+                          onSwitchTab?.("providers");
+                        }}
+                        class="text-xs text-gray-500 hover:text-gray-300"
+                      >Add provider</a>
+                      <${Badge} tone="danger">Disabled</${Badge}>
+                    </span>
+                  `}
+            </div>
+          `;
+        })}
+      </div>
+    </div>
+  `;
+};

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

@@ -123,7 +123,7 @@ export function Google({ gatewayStatus }) {
 
   if (!google) {
     return html` <div class="bg-surface border border-border rounded-xl p-4">
-      <h2 class="font-semibold mb-3">Google Workspace</h2>
+      <h2 class="card-label mb-3">Google Workspace</h2>
       <div class="text-gray-500 text-sm text-center py-2">Loading...</div>
     </div>`;
   }
@@ -138,7 +138,7 @@ export function Google({ gatewayStatus }) {
 
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
-      <h2 class="font-semibold mb-3">Google Workspace</h2>
+      <h2 class="card-label mb-3">Google Workspace</h2>
       ${hasCredentials
         ? html`
             <div class="space-y-3">

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

@@ -60,7 +60,7 @@ export function Pairings({ pending, channels, visible, onApprove, onReject }) {
 
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
-      <h2 class="font-semibold mb-3">Pending Pairings</h2>
+      <h2 class="card-label mb-3">Pending Pairings</h2>
       ${pending.length > 0
         ? html`<div>
             ${pending.map(p => html`<${PairingRow} key=${p.id} p=${p} onApprove=${onApprove} onReject=${onReject} />`)}

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

@@ -0,0 +1,542 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import {
+  fetchEnvVars,
+  saveEnvVars,
+  fetchModels,
+  fetchModelStatus,
+  setPrimaryModel,
+  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 {
+  getModelProvider,
+  getAuthProviderFromModelProvider,
+  getFeaturedModels,
+  kProviderAuthFields,
+  kProviderLabels,
+  kProviderOrder,
+  kProviderFeatures,
+} from "../lib/model-config.js";
+
+const html = htm.bind(h);
+
+const getKeyVal = (vars, key) => vars.find((v) => v.key === key)?.value || "";
+const kAiCredentialKeys = Object.values(kProviderAuthFields)
+  .flat()
+  .map((field) => field.key)
+  .filter((key, idx, arr) => arr.indexOf(key) === idx);
+let kProvidersTabCache = null;
+
+const FeatureTags = ({ provider }) => {
+  const features = kProviderFeatures[provider] || [];
+  if (!features.length) return null;
+  return html`
+    <div class="flex flex-wrap gap-1.5">
+      ${features.map(
+        (f) => html`
+          <span
+            class="text-xs px-1.5 py-0.5 rounded-md bg-white/5 text-gray-400"
+            >${f}</span
+          >
+        `,
+      )}
+    </div>
+  `;
+};
+
+export const Providers = () => {
+  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 [savingChanges, setSavingChanges] = useState(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 [ready, setReady] = useState(() => !!kProvidersTabCache);
+  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 codexPopupPollRef = useRef(null);
+
+  const refresh = async () => {
+    if (!ready) setModelsLoading(true);
+    setModelsError("");
+    try {
+      const [env, modelCatalog, modelStatus, codex] = await Promise.all([
+        fetchEnvVars(),
+        fetchModels(),
+        fetchModelStatus(),
+        fetchCodexStatus(),
+      ]);
+      setEnvVars(env.vars || []);
+      const catalogModels = Array.isArray(modelCatalog.models) ? modelCatalog.models : [];
+      setModels(catalogModels);
+      const currentModel = modelStatus.modelKey || "";
+      setSelectedModel(currentModel);
+      setCodexStatus(codex || { connected: false });
+      setSavedModel(currentModel);
+      setModelDirty(false);
+      const nextSavedAiValues = Object.fromEntries(
+        kAiCredentialKeys.map((key) => [key, getKeyVal(env.vars || [], key)]),
+      );
+      setSavedAiValues(nextSavedAiValues);
+      const nextModelsError = catalogModels.length ? "" : "No models found";
+      setModelsError(nextModelsError);
+      kProvidersTabCache = {
+        envVars: env.vars || [],
+        models: catalogModels,
+        selectedModel: currentModel,
+        savedModel: currentModel,
+        savedAiValues: nextSavedAiValues,
+        codexStatus: codex || { connected: false },
+        showAllModels,
+        modelsError: nextModelsError,
+      };
+    } catch (err) {
+      setModelsError("Failed to load provider settings");
+      showToast(`Failed to load provider settings: ${err.message}`, "red");
+    } finally {
+      setReady(true);
+      setModelsLoading(false);
+    }
+  };
+
+  const refreshCodexConnection = async () => {
+    try {
+      const codex = await fetchCodexStatus();
+      setCodexStatus(codex || { connected: false });
+      if (codex?.connected) {
+        setCodexAuthStarted(false);
+        setCodexAuthWaiting(false);
+      }
+      kProvidersTabCache = { ...(kProvidersTabCache || {}), codexStatus: codex || { connected: false } };
+    } catch {
+      setCodexStatus({ connected: false });
+      kProvidersTabCache = { ...(kProvidersTabCache || {}), codexStatus: { connected: false } };
+    }
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  useEffect(() => () => {
+    if (codexPopupPollRef.current) {
+      clearInterval(codexPopupPollRef.current);
+      codexPopupPollRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const onMessage = async (e) => {
+      if (e.data?.codex === "success") {
+        showToast("Codex connected", "green");
+        await refreshCodexConnection();
+      } else if (e.data?.codex === "error") {
+        showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "red");
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, []);
+
+  const setEnvValue = (key, value) => {
+    setEnvVars((prev) => {
+      const next = prev.map((v) => (v.key === key ? { ...v, value } : v));
+      kProvidersTabCache = { ...(kProvidersTabCache || {}), envVars: next };
+      return next;
+    });
+  };
+
+  const selectedModelProvider = getModelProvider(selectedModel);
+  const selectedAuthProvider = getAuthProviderFromModelProvider(selectedModelProvider);
+  const primaryProvider = kProviderOrder.includes(selectedAuthProvider)
+    ? selectedAuthProvider
+    : kProviderOrder[0];
+  const otherProviders = kProviderOrder.filter((p) => p !== primaryProvider);
+  const featuredModels = getFeaturedModels(models);
+  const baseModelOptions = showAllModels
+    ? models
+    : featuredModels.length > 0
+    ? 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 aiCredentialsDirty = kAiCredentialKeys.some(
+    (key) => getKeyVal(envVars, key) !== (savedAiValues[key] || ""),
+  );
+  const hasSelectedProviderAuth =
+    selectedModelProvider === "anthropic"
+      ? !!(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));
+
+  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");
+      return;
+    }
+    setSavingChanges(true);
+    try {
+      const targetModel = selectedModel;
+
+      if (aiCredentialsDirty) {
+        const payload = envVars
+          .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 (modelDirty && targetModel) {
+        const modelResult = await setPrimaryModel(targetModel);
+        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}`);
+        }
+        setSavedModel(targetModel);
+        setModelDirty(false);
+        kProvidersTabCache = { ...(kProvidersTabCache || {}), selectedModel: targetModel, savedModel: targetModel };
+      }
+
+      showToast("Changes saved", "green");
+      await refresh();
+    } catch (err) {
+      showToast(err.message || "Failed to save changes", "red");
+    } finally {
+      setSavingChanges(false);
+    }
+  };
+
+  const startCodexAuth = () => {
+    if (codexStatus.connected) return;
+    setCodexAuthStarted(true);
+    setCodexAuthWaiting(true);
+    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";
+      return;
+    }
+    if (codexPopupPollRef.current) {
+      clearInterval(codexPopupPollRef.current);
+    }
+    codexPopupPollRef.current = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+        setCodexAuthWaiting(false);
+      }
+    }, 500);
+  };
+
+  const completeCodexAuth = async () => {
+    if (!codexManualInput.trim() || codexExchanging) return;
+    setCodexExchanging(true);
+    try {
+      const result = await exchangeCodexOAuth(codexManualInput.trim());
+      if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      showToast("Codex connected", "green");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexConnection();
+    } catch (err) {
+      showToast(err.message || "Codex OAuth exchange failed", "red");
+    } finally {
+      setCodexExchanging(false);
+    }
+  };
+
+  const handleCodexDisconnect = async () => {
+    const result = await disconnectCodex();
+    if (!result.ok) {
+      showToast(result.error || "Failed to disconnect Codex", "red");
+      return;
+    }
+    showToast("Codex disconnected", "green");
+    setCodexAuthStarted(false);
+    setCodexAuthWaiting(false);
+    setCodexManualInput("");
+    await refreshCodexConnection();
+  };
+
+  const renderCredentialField = (field) => html`
+    <div class="space-y-1">
+      <div class="flex items-center gap-3">
+        <label class="text-xs font-medium text-gray-400">${field.label}</label>
+        ${field.url && !getKeyVal(envVars, field.key)
+          ? html`<a
+              href=${field.url}
+              target="_blank"
+              class="text-xs hover:underline"
+              style="color: var(--accent-link)"
+            >Get</a>`
+          : null}
+      </div>
+      <${SecretInput}
+        value=${getKeyVal(envVars, field.key)}
+        onInput=${(e) => setEnvValue(field.key, e.target.value)}
+        placeholder=${field.placeholder || ""}
+        isSecret=${!field.isText}
+        inputClass="flex-1 w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+      />
+      ${field.hint
+        ? html`<p class="text-xs text-gray-600">${field.hint}</p>`
+        : null}
+    </div>
+  `;
+
+  const renderCodexOAuth = () => html`
+    <div class="border border-border rounded-lg p-3 space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs text-gray-400">Codex OAuth</span>
+        ${codexStatus.connected
+          ? html`<${Badge} tone="success">Connected</${Badge}>`
+          : html`<${Badge} tone="warning">Not connected</${Badge}>`}
+      </div>
+      ${codexStatus.connected
+        ? html`
+            <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"
+              >
+                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"
+              >
+                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>
+              <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"
+              >
+                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.
+            </p>
+            <input
+              type="text"
+              value=${codexManualInput}
+              onInput=${(e) => setCodexManualInput(e.target.value)}
+              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}
+              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>
+          `
+        : null}
+    </div>
+  `;
+
+  const providerHasKey = (provider) => {
+    const fields = kProviderAuthFields[provider] || [];
+    return fields.some((f) => !!getKeyVal(envVars, f.key));
+  };
+
+  const renderProviderCard = (provider) => {
+    const fields = kProviderAuthFields[provider] || [];
+    const hasCodex = provider === "openai";
+    const hasKey = providerHasKey(provider);
+    return html`
+      <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+        <div class="flex items-center gap-2">
+          <h3 class="font-semibold text-sm">
+            ${kProviderLabels[provider] || provider}
+          </h3>
+          ${hasKey
+            ? html`<span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500" />`
+            : null}
+        </div>
+        ${fields.map((field) => renderCredentialField(field))}
+        ${hasCodex ? renderCodexOAuth() : null}
+        <${FeatureTags} provider=${provider} />
+      </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>
+      </div>
+    `;
+  }
+
+  const renderPrimaryProviderContent = () => {
+    const fields = kProviderAuthFields[primaryProvider] || [];
+    const hasCodex = primaryProvider === "openai";
+    return html`
+      ${fields.map((field) => renderCredentialField(field))}
+      ${hasCodex ? renderCodexOAuth() : null}
+    `;
+  };
+
+  return html`
+    <div class="space-y-4">
+      <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
+          value=${selectedModel}
+          onInput=${(e) => {
+            const next = e.target.value;
+            setSelectedModel(next);
+            setModelDirty(next !== savedModel);
+            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>`,
+          )}
+        </select>
+        <p class="text-xs text-gray-600">
+          ${modelsLoading ? "Loading model catalog..." : modelsError ? modelsError : ""}
+        </p>
+        ${canToggleFullCatalog
+          ? html`
+              <div>
+                <button
+                  type="button"
+                  onclick=${() =>
+                    setShowAllModels((prev) => {
+                      const next = !prev;
+                      kProvidersTabCache = { ...(kProvidersTabCache || {}), showAllModels: next };
+                      return next;
+                    })}
+                  class="text-xs text-gray-500 hover:text-gray-300"
+                >
+                  ${showAllModels ? "Show recommended models" : "Show full model catalog"}
+                </button>
+              </div>
+            `
+          : null}
+        <div class="pt-2 border-t border-border space-y-3">
+          ${renderPrimaryProviderContent()}
+        </div>
+      </div>
+
+      ${otherProviders.map((provider) => renderProviderCard(provider))}
+
+      ${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.
+            </p>
+          `
+        : null}
+    </div>
+  `;
+};

package/lib/public/js/lib/model-config.js

@@ -46,20 +46,15 @@ export const kProviderAuthFields = {
     {
       key: "ANTHROPIC_API_KEY",
       label: "Anthropic API Key",
-      hint: html`From${" "}
-        <a
-          href="https://console.anthropic.com"
-          target="_blank"
-          class="hover:underline"
-          style="color: var(--accent-link)"
-          >console.anthropic.com</a
-        >${" "}— recommended`,
+      url: "https://console.anthropic.com",
+      linkText: "Get key",
       placeholder: "sk-ant-...",
     },
     {
       key: "ANTHROPIC_TOKEN",
       label: "Anthropic Setup Token",
       hint: "From claude setup-token (uses your Claude subscription)",
+      linkText: "Get token",
       placeholder: "Token...",
     },
   ],
@@ -67,14 +62,8 @@ export const kProviderAuthFields = {
     {
       key: "OPENAI_API_KEY",
       label: "OpenAI API Key",
-      hint: html`From${" "}
-        <a
-          href="https://platform.openai.com"
-          target="_blank"
-          class="hover:underline"
-          style="color: var(--accent-link)"
-          >platform.openai.com</a
-        >`,
+      url: "https://platform.openai.com",
+      linkText: "Get key",
       placeholder: "sk-...",
     },
   ],
@@ -82,26 +71,94 @@ export const kProviderAuthFields = {
     {
       key: "GEMINI_API_KEY",
       label: "Gemini API Key",
-      hint: html`From${" "}
-        <a
-          href="https://aistudio.google.com"
-          target="_blank"
-          class="hover:underline"
-          style="color: var(--accent-link)"
-          >aistudio.google.com</a
-        >`,
+      url: "https://aistudio.google.com",
+      linkText: "Get key",
       placeholder: "AI...",
     },
   ],
+  mistral: [
+    {
+      key: "MISTRAL_API_KEY",
+      label: "Mistral API Key",
+      url: "https://console.mistral.ai",
+      linkText: "Get key",
+      placeholder: "sk-...",
+    },
+  ],
+  voyage: [
+    {
+      key: "VOYAGE_API_KEY",
+      label: "Voyage API Key",
+      url: "https://dash.voyageai.com",
+      linkText: "Get key",
+      placeholder: "pa-...",
+    },
+  ],
+  groq: [
+    {
+      key: "GROQ_API_KEY",
+      label: "Groq API Key",
+      url: "https://console.groq.com",
+      linkText: "Get key",
+      placeholder: "gsk_...",
+    },
+  ],
+  deepgram: [
+    {
+      key: "DEEPGRAM_API_KEY",
+      label: "Deepgram API Key",
+      url: "https://console.deepgram.com",
+      linkText: "Get key",
+      placeholder: "dg-...",
+    },
+  ],
 };
 
 export const kProviderLabels = {
   anthropic: "Anthropic",
   openai: "OpenAI",
   google: "Gemini",
+  mistral: "Mistral",
+  voyage: "Voyage",
+  groq: "Groq",
+  deepgram: "Deepgram",
+};
+
+export const kProviderOrder = [
+  "anthropic",
+  "openai",
+  "google",
+  "mistral",
+  "voyage",
+  "groq",
+  "deepgram",
+];
+
+export const kProviderFeatures = {
+  anthropic: ["Agent Model"],
+  openai: ["Agent Model", "Embeddings", "Audio"],
+  google: ["Agent Model", "Embeddings", "Audio"],
+  mistral: ["Agent Model", "Embeddings", "Audio"],
+  voyage: ["Embeddings"],
+  groq: ["Agent Model", "Audio"],
+  deepgram: ["Audio"],
 };
 
-export const kProviderOrder = ["anthropic", "openai", "google"];
+export const kFeatureDefs = [
+  {
+    id: "embeddings",
+    label: "Memory Embeddings",
+    tag: "Embeddings",
+    providers: ["openai", "google", "voyage", "mistral"],
+  },
+  {
+    id: "audio",
+    label: "Audio Transcription",
+    tag: "Audio",
+    hasDefault: true,
+    providers: ["openai", "groq", "deepgram", "google", "mistral"],
+  },
+];
 
 export const getVisibleAiFieldKeys = (provider) => {
   const authProvider = getAuthProviderFromModelProvider(provider);

package/lib/server/constants.js

@@ -171,6 +171,30 @@ const kKnownVars = [
     group: "channels",
     hint: "From Discord Developer Portal",
   },
+  {
+    key: "MISTRAL_API_KEY",
+    label: "Mistral API Key",
+    group: "models",
+    hint: "From console.mistral.ai",
+  },
+  {
+    key: "VOYAGE_API_KEY",
+    label: "Voyage API Key",
+    group: "models",
+    hint: "From dash.voyageai.com",
+  },
+  {
+    key: "GROQ_API_KEY",
+    label: "Groq API Key",
+    group: "models",
+    hint: "From console.groq.com",
+  },
+  {
+    key: "DEEPGRAM_API_KEY",
+    label: "Deepgram API Key",
+    group: "models",
+    hint: "From console.deepgram.com",
+  },
   {
     key: "BRAVE_API_KEY",
     label: "Brave Search API Key",

package/lib/server/openclaw-version.js

@@ -1,5 +1,6 @@
 const { exec, execSync } = require("child_process");
 const fs = require("fs");
+const os = require("os");
 const path = require("path");
 const {
   kVersionCacheTtlMs,
@@ -85,74 +86,114 @@ const createOpenclawVersionService = ({
     }
   };
 
-  const installLatestOpenclaw = () =>
-    new Promise((resolve, reject) => {
-      const installDir = (() => {
-        // Resolve the consumer app root (for example /app in Docker), not this package directory.
-        let dir = kNpmPackageRoot;
-        while (dir !== path.dirname(dir)) {
-          const parent = path.dirname(dir);
+  const findInstallDir = () => {
+    // Resolve the consumer app root (for example /app in Docker), not this package directory.
+    let dir = kNpmPackageRoot;
+    while (dir !== path.dirname(dir)) {
+      const parent = path.dirname(dir);
+      if (
+        path.basename(parent) === "node_modules" ||
+        parent.includes(`${path.sep}node_modules${path.sep}`)
+      ) {
+        dir = parent;
+        continue;
+      }
+      const pkgPath = path.join(parent, "package.json");
+      if (fs.existsSync(pkgPath)) {
+        try {
+          const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
           if (
-            path.basename(parent) === "node_modules" ||
-            parent.includes(`${path.sep}node_modules${path.sep}`)
+            pkg.dependencies?.["@chrysb/alphaclaw"] ||
+            pkg.devDependencies?.["@chrysb/alphaclaw"] ||
+            pkg.optionalDependencies?.["@chrysb/alphaclaw"]
           ) {
-            dir = parent;
-            continue;
+            return parent;
           }
-          const pkgPath = path.join(parent, "package.json");
-          if (fs.existsSync(pkgPath)) {
-            try {
-              const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
-              if (
-                pkg.dependencies?.["@chrysb/alphaclaw"] ||
-                pkg.devDependencies?.["@chrysb/alphaclaw"] ||
-                pkg.optionalDependencies?.["@chrysb/alphaclaw"]
-              ) {
-                return parent;
-              }
-            } catch {}
-          }
-          dir = parent;
-        }
-        return kNpmPackageRoot;
-      })();
+        } catch {}
+      }
+      dir = parent;
+    }
+    return kNpmPackageRoot;
+  };
+
+  // Install to a temp directory, then copy into the real node_modules.
+  // Running `npm install` directly in the app dir causes EBUSY on Docker
+  // because npm tries to rename directories that the running process holds open.
+  // Copying individual files (cp -af) avoids the rename syscall entirely.
+  const installLatestOpenclaw = () =>
+    new Promise((resolve, reject) => {
+      const installDir = findInstallDir();
+      const tmpDir = fs.mkdtempSync(
+        path.join(os.tmpdir(), "openclaw-update-"),
+      );
+      const cleanup = () => {
+        try {
+          fs.rmSync(tmpDir, { recursive: true, force: true });
+        } catch {}
+      };
+
+      fs.writeFileSync(
+        path.join(tmpDir, "package.json"),
+        JSON.stringify({
+          private: true,
+          dependencies: { openclaw: "latest" },
+        }),
+      );
+
+      const npmEnv = {
+        ...process.env,
+        npm_config_update_notifier: "false",
+        npm_config_fund: "false",
+        npm_config_audit: "false",
+      };
+
       console.log(
-        `[alphaclaw] Running: npm install --omit=dev --no-save --package-lock=false --prefer-online openclaw@latest (cwd: ${installDir})`,
+        `[alphaclaw] Running: npm install openclaw@latest in temp dir (target: ${installDir})`,
       );
       exec(
-        "npm install --omit=dev --no-save --package-lock=false --prefer-online openclaw@latest",
-        {
-          cwd: installDir,
-          env: {
-            ...process.env,
-            npm_config_update_notifier: "false",
-            npm_config_fund: "false",
-            npm_config_audit: "false",
-          },
-          timeout: 180000,
-        },
-        (err, stdout, stderr) => {
-          if (err) {
-            const message = String(stderr || err.message || "").trim();
+        "npm install --omit=dev --prefer-online --package-lock=false",
+        { cwd: tmpDir, env: npmEnv, timeout: 180000 },
+        (installErr, stdout, stderr) => {
+          if (installErr) {
+            const message = String(stderr || installErr.message || "").trim();
             console.log(
               `[alphaclaw] openclaw install error: ${message.slice(0, 200)}`,
             );
+            cleanup();
             return reject(
               new Error(message || "Failed to install openclaw@latest"),
             );
           }
-          if (stdout && stdout.trim()) {
+          if (stdout?.trim()) {
             console.log(
               `[alphaclaw] openclaw install stdout: ${stdout.trim().slice(0, 300)}`,
             );
           }
-          if (stderr && stderr.trim()) {
-            console.log(
-              `[alphaclaw] openclaw install stderr: ${stderr.trim().slice(0, 300)}`,
-            );
-          }
-          console.log("[alphaclaw] openclaw install completed");
-          resolve({ stdout: stdout.trim(), stderr: stderr.trim() });
+
+          const src = path.join(tmpDir, "node_modules");
+          const dest = path.join(installDir, "node_modules");
+          exec(
+            `cp -af "${src}/." "${dest}/"`,
+            { timeout: 60000 },
+            (cpErr) => {
+              cleanup();
+              if (cpErr) {
+                console.log(
+                  `[alphaclaw] openclaw copy error: ${(cpErr.message || "").slice(0, 200)}`,
+                );
+                return reject(
+                  new Error(
+                    `Failed to copy updated openclaw files: ${cpErr.message}`,
+                  ),
+                );
+              }
+              console.log("[alphaclaw] openclaw install completed");
+              resolve({
+                stdout: stdout?.trim() || "",
+                stderr: stderr?.trim() || "",
+              });
+            },
+          );
         },
       );
     });

package/lib/setup/core-prompts/TOOLS.md

@@ -8,8 +8,8 @@ AlphaClaw UI: `{{SETUP_UI_URL}}`
 
 | Tab     | URL                        | What it manages                                                                                                                                         |
 | ------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| General | `{{SETUP_UI_URL}}#general` | Gateway status & restart, channel health (Telegram/Discord), pending pairings, Google Workspace connection, repo auto-sync schedule, OpenClaw dashboard |
-| Models  | `{{SETUP_UI_URL}}#models`  | AI provider credentials (Anthropic, OpenAI, Google), Codex OAuth                                                                                        |
+| General | `{{SETUP_UI_URL}}#general` | Gateway status & restart, channel health (Telegram/Discord), pending pairings, feature health (Embeddings/Audio), Google Workspace connection, repo auto-sync schedule, OpenClaw dashboard |
+| Providers | `{{SETUP_UI_URL}}#providers` | AI provider credentials (Anthropic, OpenAI, Gemini, Mistral, Voyage, Groq, Deepgram), feature capabilities, Codex OAuth |
 | Envars  | `{{SETUP_UI_URL}}#envars`  | View/edit/add environment variables (saved to `/data/.env`), gateway restart to apply changes                                                           |
 
 ### Environment variables

package/lib/setup/skills/control-ui/SKILL.md

@@ -27,7 +27,7 @@ When a user asks about pairing their Telegram or Discord account:
 
 ### Connecting OpenAI Codex OAuth
 
-> Connect or reconnect Codex OAuth from the Setup UI → **Models** tab ({{BASE_URL}}#models). Click **Connect Codex OAuth** and follow the popup flow.
+> Connect or reconnect Codex OAuth from the Setup UI → **Providers** tab ({{BASE_URL}}#providers). Click **Connect Codex OAuth** and follow the popup flow.
 
 ### Connecting Google Workspace
 
@@ -65,6 +65,6 @@ Config lives at `/data/.openclaw/gogcli/`.
 
 This is a reference so you know what's available — not an invitation to call these endpoints.
 
-- **General tab** (`{{BASE_URL}}#general`): Gateway status/restart, OpenClaw version + update, channel health, pending pairings, Google Workspace
-- **Models tab** (`{{BASE_URL}}#models`): Primary model selection, provider credentials, Codex OAuth
+- **General tab** (`{{BASE_URL}}#general`): Gateway status/restart, OpenClaw version + update, channel health, pending pairings, feature health (Embeddings/Audio), Google Workspace
+- **Providers tab** (`{{BASE_URL}}#providers`): Primary model selection, AI provider credentials, feature capabilities, Codex OAuth
 - **Envars tab** (`{{BASE_URL}}#envars`): View/edit/add environment variables, save to `/data/.env`

package/package.json

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