@chrysb/alphaclaw 0.9.0-beta.6 → 0.9.0

package/lib/public/js/components/models-tab/use-models.js

@@ -8,16 +8,35 @@ import {
 } from "../../lib/api.js";
 import { showToast } from "../toast.js";
 import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
+import { usePolling } from "../../hooks/usePolling.js";
+import { invalidateCache } from "../../lib/api-cache.js";
+import {
+  getModelCatalogModels,
+  isModelCatalogRefreshing,
+  kModelCatalogCacheKey,
+  kModelCatalogPollIntervalMs,
+} from "../../lib/model-catalog.js";
 
 let kModelsTabCache = null;
 const getCredentialValue = (value) =>
   String(value?.key || value?.token || value?.access || "").trim();
+const kNoModelsFoundError = "No models found";
+const kModelSettingsLoadError = "Failed to load model settings";
 
 export const useModels = (agentId) => {
   const isScoped = !!agentId;
   const normalizedAgentId = String(agentId || "").trim();
   const useCache = !isScoped;
   const [catalog, setCatalog] = useState(() => (useCache && kModelsTabCache?.catalog) || []);
+  const [catalogStatus, setCatalogStatus] = useState(
+    () =>
+      (useCache && kModelsTabCache?.catalogStatus) || {
+        source: "",
+        fetchedAt: null,
+        stale: false,
+        refreshing: false,
+      },
+  );
   const [primary, setPrimary] = useState(() => (useCache && kModelsTabCache?.primary) || "");
   const [configuredModels, setConfiguredModels] = useState(
     () => (useCache && kModelsTabCache?.configuredModels) || {},
@@ -48,7 +67,7 @@ export const useModels = (agentId) => {
   const modelsConfigCacheKey = normalizedAgentId
     ? `/api/models/config?agentId=${encodeURIComponent(normalizedAgentId)}`
     : "/api/models/config";
-  const catalogFetchState = useCachedFetch("/api/models", fetchModels, {
+  const catalogFetchState = useCachedFetch(kModelCatalogCacheKey, fetchModels, {
     maxAgeMs: 30000,
   });
   const configFetchState = useCachedFetch(
@@ -59,6 +78,41 @@ export const useModels = (agentId) => {
   const codexFetchState = useCachedFetch("/api/codex/status", fetchCodexStatus, {
     maxAgeMs: 15000,
   });
+  const catalogPoll = usePolling(fetchModels, kModelCatalogPollIntervalMs, {
+    enabled: ready && isModelCatalogRefreshing(catalogStatus),
+    pauseWhenHidden: true,
+    cacheKey: kModelCatalogCacheKey,
+  });
+
+  const syncCatalogError = useCallback((catalogModels) => {
+    setError((current) => {
+      if (catalogModels.length > 0) {
+        return current === kNoModelsFoundError ? "" : current;
+      }
+      return current || kNoModelsFoundError;
+    });
+  }, []);
+
+  const applyCatalogResult = useCallback(
+    (catalogResult) => {
+      const catalogModels = getModelCatalogModels(catalogResult);
+      const nextCatalogStatus = {
+        source: String(catalogResult?.source || ""),
+        fetchedAt: Number(catalogResult?.fetchedAt || 0) || null,
+        stale: Boolean(catalogResult?.stale),
+        refreshing: Boolean(catalogResult?.refreshing),
+      };
+      setCatalog(catalogModels);
+      setCatalogStatus(nextCatalogStatus);
+      updateCache({
+        catalog: catalogModels,
+        catalogStatus: nextCatalogStatus,
+      });
+      syncCatalogError(catalogModels);
+      return catalogModels;
+    },
+    [syncCatalogError, updateCache],
+  );
 
   const refresh = useCallback(async () => {
     if (!ready) setLoading(true);
@@ -69,10 +123,7 @@ export const useModels = (agentId) => {
         configFetchState.refresh({ force: true }),
         codexFetchState.refresh({ force: true }),
       ]);
-      const catalogModels = Array.isArray(catalogResult.models)
-        ? catalogResult.models
-        : [];
-      setCatalog(catalogModels);
+      const catalogModels = applyCatalogResult(catalogResult);
       const p = configResult.primary || "";
       const cm = configResult.configuredModels || {};
       const ap = configResult.authProfiles || [];
@@ -94,20 +145,31 @@ export const useModels = (agentId) => {
         authOrder: ao,
         codexStatus: codex || { connected: false },
       });
-      if (!catalogModels.length) setError("No models found");
     } catch (err) {
-      setError("Failed to load model settings");
-      showToast(`Failed to load model settings: ${err.message}`, "error");
+      setError(kModelSettingsLoadError);
+      showToast(`${kModelSettingsLoadError}: ${err.message}`, "error");
     } finally {
       setReady(true);
       setLoading(false);
     }
-  }, [catalogFetchState, codexFetchState, configFetchState, ready, updateCache, agentId, isScoped]);
+  }, [
+    applyCatalogResult,
+    catalogFetchState,
+    codexFetchState,
+    configFetchState,
+    ready,
+    updateCache,
+  ]);
 
   useEffect(() => {
     refresh();
   }, [agentId]);
 
+  useEffect(() => {
+    if (!catalogPoll.data) return;
+    applyCatalogResult(catalogPoll.data);
+  }, [applyCatalogResult, catalogPoll.data]);
+
   const stableStringify = (obj) =>
     JSON.stringify(Object.keys(obj).sort().reduce((acc, k) => { acc[k] = obj[k]; return acc; }, {}));
 
@@ -261,6 +323,7 @@ export const useModels = (agentId) => {
       if (result.syncWarning) {
         showToast(`Saved, but git-sync failed: ${result.syncWarning}`, "warning");
       }
+      invalidateCache(kModelCatalogCacheKey);
       await refresh();
     } catch (err) {
       showToast(err.message || "Failed to save changes", "error");
@@ -274,6 +337,8 @@ export const useModels = (agentId) => {
     profileEdits,
     orderEdits,
     authProfiles,
+    isScoped,
+    agentId,
     refresh,
   ]);
 

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

@@ -24,6 +24,10 @@ import {
   kProviderLabels,
   kProviderOrder,
 } from "../lib/model-config.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../lib/codex-oauth-window.js";
 
 const html = htm.bind(h);
 
@@ -51,6 +55,7 @@ export const Models = () => {
   const [savedModel, setSavedModel] = useState(() => kModelsTabCache?.savedModel || "");
   const [modelDirty, setModelDirty] = useState(false);
   const [savedAiValues, setSavedAiValues] = useState(() => kModelsTabCache?.savedAiValues || {});
+  const codexExchangeInFlightRef = useRef(false);
   const codexPopupPollRef = useRef(null);
 
   const refresh = async () => {
@@ -122,18 +127,43 @@ export const Models = () => {
     }
   }, []);
 
+  const submitCodexAuthInput = async (input) => {
+    const normalizedInput = String(input || "").trim();
+    if (!normalizedInput || codexExchangeInFlightRef.current) return;
+    codexExchangeInFlightRef.current = true;
+    setCodexManualInput(normalizedInput);
+    setCodexExchanging(true);
+    try {
+      const result = await exchangeCodexOAuth(normalizedInput);
+      if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      showToast("Codex connected", "success");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexConnection();
+    } catch (err) {
+      setCodexAuthWaiting(false);
+      showToast(err.message || "Codex OAuth exchange failed", "error");
+    } finally {
+      codexExchangeInFlightRef.current = false;
+      setCodexExchanging(false);
+    }
+  };
+
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
         showToast("Codex connected", "success");
         await refreshCodexConnection();
+      } else if (isCodexAuthCallbackMessage(e.data)) {
+        await submitCodexAuthInput(e.data.input);
       } else if (e.data?.codex === "error") {
         showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "error");
       }
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, []);
+  }, [submitCodexAuthInput]);
 
   const setEnvValue = (key, value) => {
     setEnvVars((prev) => {
@@ -194,10 +224,9 @@ export const Models = () => {
     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 = openCodexAuthWindow();
     if (!popup || popup.closed) {
       setCodexAuthWaiting(false);
-      window.location.href = "/auth/codex/start";
       return;
     }
     if (codexPopupPollRef.current) {
@@ -213,21 +242,7 @@ export const Models = () => {
   };
 
   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", "success");
-      setCodexAuthStarted(false);
-      setCodexAuthWaiting(false);
-      await refreshCodexConnection();
-    } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "error");
-    } finally {
-      setCodexExchanging(false);
-    }
+    await submitCodexAuthInput(codexManualInput);
   };
 
   const handleCodexDisconnect = async () => {
@@ -301,7 +316,23 @@ export const Models = () => {
               ? html`<${Badge} tone="success">Connected</${Badge}>`
               : html`<${Badge} tone="warning">Not connected</${Badge}>`}
           </div>
-          ${codexStatus.connected
+          ${codexAuthStarted
+            ? html`
+                <div class="flex items-center justify-between gap-2">
+                  <p class="text-xs text-fg-muted">
+                    ${codexAuthWaiting
+                      ? "Complete login in the popup. AlphaClaw should finish automatically, but you can paste the redirect URL below if it doesn't."
+                      : "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
             ? html`
                 <div class="flex gap-2">
                   <button
@@ -318,31 +349,15 @@ export const Models = () => {
                   </button>
                 </div>
               `
-            : !codexAuthStarted
-            ? html`
+            : 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-fg-muted">
-                    ${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
+          ${codexAuthStarted
             ? html`
                 <p class="text-xs text-fg-muted">
                   After login, copy the full redirect URL (starts with

package/lib/public/js/components/onboarding/use-welcome-codex.js

@@ -4,6 +4,10 @@ import {
   exchangeCodexOAuth,
   fetchCodexStatus,
 } from "../../lib/api.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../../lib/codex-oauth-window.js";
 
 export const useWelcomeCodex = ({ setFormError } = {}) => {
   const [codexStatus, setCodexStatus] = useState({ connected: false });
@@ -12,6 +16,7 @@ export const useWelcomeCodex = ({ setFormError } = {}) => {
   const [codexExchanging, setCodexExchanging] = useState(false);
   const [codexAuthStarted, setCodexAuthStarted] = useState(false);
   const [codexAuthWaiting, setCodexAuthWaiting] = useState(false);
+  const codexExchangeInFlightRef = useRef(false);
   const codexPopupPollRef = useRef(null);
 
   const refreshCodexStatus = async () => {
@@ -33,10 +38,36 @@ export const useWelcomeCodex = ({ setFormError } = {}) => {
     refreshCodexStatus();
   }, []);
 
+  const submitCodexAuthInput = async (input) => {
+    const normalizedInput = String(input || "").trim();
+    if (!normalizedInput || codexExchangeInFlightRef.current) return;
+    codexExchangeInFlightRef.current = true;
+    setCodexManualInput(normalizedInput);
+    setCodexExchanging(true);
+    setFormError(null);
+    try {
+      const result = await exchangeCodexOAuth(normalizedInput);
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexStatus();
+    } catch (err) {
+      setCodexAuthWaiting(false);
+      setFormError(err.message || "Codex OAuth exchange failed");
+    } finally {
+      codexExchangeInFlightRef.current = false;
+      setCodexExchanging(false);
+    }
+  };
+
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
         await refreshCodexStatus();
+      } else if (isCodexAuthCallbackMessage(e.data)) {
+        await submitCodexAuthInput(e.data.input);
       }
       if (e.data?.codex === "error") {
         setFormError(`Codex auth failed: ${e.data.message || "unknown error"}`);
@@ -44,7 +75,7 @@ export const useWelcomeCodex = ({ setFormError } = {}) => {
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [setFormError]);
+  }, [setFormError, submitCodexAuthInput]);
 
   useEffect(
     () => () => {
@@ -60,15 +91,9 @@ export const useWelcomeCodex = ({ setFormError } = {}) => {
     if (codexStatus.connected) return;
     setCodexAuthStarted(true);
     setCodexAuthWaiting(true);
-    const authUrl = "/auth/codex/start";
-    const popup = window.open(
-      authUrl,
-      "codex-auth",
-      "popup=yes,width=640,height=780",
-    );
+    const popup = openCodexAuthWindow();
     if (!popup || popup.closed) {
       setCodexAuthWaiting(false);
-      window.location.href = authUrl;
       return;
     }
     if (codexPopupPollRef.current) {
@@ -84,22 +109,7 @@ export const useWelcomeCodex = ({ setFormError } = {}) => {
   };
 
   const completeCodexAuth = async () => {
-    if (!codexManualInput.trim() || codexExchanging) return;
-    setCodexExchanging(true);
-    setFormError(null);
-    try {
-      const result = await exchangeCodexOAuth(codexManualInput.trim());
-      if (!result.ok)
-        throw new Error(result.error || "Codex OAuth exchange failed");
-      setCodexManualInput("");
-      setCodexAuthStarted(false);
-      setCodexAuthWaiting(false);
-      await refreshCodexStatus();
-    } catch (err) {
-      setFormError(err.message || "Codex OAuth exchange failed");
-    } finally {
-      setCodexExchanging(false);
-    }
+    await submitCodexAuthInput(codexManualInput);
   };
 
   const handleCodexDisconnect = async () => {

package/lib/public/js/components/onboarding/welcome-config.js

@@ -11,6 +11,8 @@ export const kGithubFlowImport = "import";
 export const kGithubTargetRepoModeCreate = "create";
 export const kGithubTargetRepoModeExistingEmpty = "existing-empty";
 
+const hasValue = (value) => !!String(value || "").trim();
+
 export const normalizeGithubRepoInput = (repoInput) =>
   String(repoInput || "")
     .trim()
@@ -25,6 +27,74 @@ export const isValidGithubRepoInput = (repoInput) => {
   return parts.length === 2 && !parts.some((part) => /\s/.test(part));
 };
 
+const getGithubGroupError = (vals) => {
+  const githubFlow = vals._GITHUB_FLOW || kGithubFlowFresh;
+  if (!hasValue(vals.GITHUB_TOKEN)) {
+    return "Enter a GitHub personal access token to continue.";
+  }
+  if (!hasValue(vals.GITHUB_WORKSPACE_REPO)) {
+    return 'Enter the target repo as "owner/repo".';
+  }
+  if (!isValidGithubRepoInput(vals.GITHUB_WORKSPACE_REPO)) {
+    return 'Target repo must be in "owner/repo" format.';
+  }
+  if (githubFlow === kGithubFlowImport) {
+    if (!hasValue(vals._GITHUB_SOURCE_REPO)) {
+      return 'Enter the source repo as "owner/repo".';
+    }
+    if (!isValidGithubRepoInput(vals._GITHUB_SOURCE_REPO)) {
+      return 'Source repo must be in "owner/repo" format.';
+    }
+  }
+  return "";
+};
+
+const getAiGroupError = (vals, ctx = {}) => {
+  if (!hasValue(vals.MODEL_KEY) || !String(vals.MODEL_KEY).includes("/")) {
+    return "Choose a model to continue.";
+  }
+  if (ctx.selectedProvider === "openai-codex" && ctx.codexLoading) {
+    return "Checking Codex OAuth status. Try Next again in a moment.";
+  }
+  if (!ctx.hasAi) {
+    return ctx.selectedProvider === "openai-codex"
+      ? "Connect Codex OAuth to continue."
+      : "Add credentials for the selected model provider to continue.";
+  }
+  return "";
+};
+
+const getChannelsGroupError = (vals) => {
+  const hasTelegram = hasValue(vals.TELEGRAM_BOT_TOKEN);
+  const hasDiscord = hasValue(vals.DISCORD_BOT_TOKEN);
+  const hasSlackBot = hasValue(vals.SLACK_BOT_TOKEN);
+  const hasSlackApp = hasValue(vals.SLACK_APP_TOKEN);
+
+  if (hasSlackBot && !hasSlackApp) {
+    return "Add the Slack app token to continue with Slack.";
+  }
+  if (!hasSlackBot && hasSlackApp) {
+    return "Add the Slack bot token to continue with Slack.";
+  }
+  if (!hasTelegram && !hasDiscord && !(hasSlackBot && hasSlackApp)) {
+    return "Add at least one channel to continue.";
+  }
+  return "";
+};
+
+export const getWelcomeGroupError = (groupId, vals, ctx = {}) => {
+  switch (groupId) {
+    case "github":
+      return getGithubGroupError(vals);
+    case "ai":
+      return getAiGroupError(vals, ctx);
+    case "channels":
+      return getChannelsGroupError(vals);
+    default:
+      return "";
+  }
+};
+
 export const kWelcomeGroups = [
   {
     id: "github",
@@ -64,21 +134,14 @@ export const kWelcomeGroups = [
         placeholder: "ghp_... or github_pat_...",
       },
     ],
-    validate: (vals) => {
-      const githubFlow = vals._GITHUB_FLOW || kGithubFlowFresh;
-      const hasTarget = isValidGithubRepoInput(vals.GITHUB_WORKSPACE_REPO);
-      const hasSource =
-        githubFlow !== kGithubFlowImport ||
-        isValidGithubRepoInput(vals._GITHUB_SOURCE_REPO);
-      return !!(vals.GITHUB_TOKEN && hasTarget && hasSource);
-    },
+    validate: (vals, ctx = {}) => !getWelcomeGroupError("github", vals, ctx),
   },
   {
     id: "ai",
     title: "Primary Agent Model",
     description: "Choose your main model and authenticate its provider",
     fields: kAllAiAuthFields,
-    validate: (vals, ctx = {}) => !!(vals.MODEL_KEY && ctx.hasAi),
+    validate: (vals, ctx = {}) => !getWelcomeGroupError("ai", vals, ctx),
   },
   {
     id: "channels",
@@ -152,7 +215,7 @@ export const kWelcomeGroups = [
         placeholder: "xapp-...",
       },
     ],
-    validate: (vals) => !!(vals.TELEGRAM_BOT_TOKEN || vals.DISCORD_BOT_TOKEN || (vals.SLACK_BOT_TOKEN && vals.SLACK_APP_TOKEN)),
+    validate: (vals, ctx = {}) => !getWelcomeGroupError("channels", vals, ctx),
   },
   {
     id: "tools",
@@ -175,3 +238,6 @@ export const kWelcomeGroups = [
     validate: () => true,
   },
 ];
+
+export const findFirstInvalidWelcomeGroup = (vals, ctx = {}) =>
+  kWelcomeGroups.find((group) => getWelcomeGroupError(group.id, vals, ctx)) || null;

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

@@ -50,12 +50,10 @@ export const WelcomeFormStep = ({
   error,
   step,
   totalGroups,
-  currentGroupValid,
   goBack,
   goNext,
   loading,
   githubStepLoading,
-  allValid,
   handleSubmit,
 }) => {
   const [showOptionalOpenai, setShowOptionalOpenai] = useState(false);
@@ -294,13 +292,12 @@ export const WelcomeFormStep = ({
             />
           `}
         </div>
-        ${!codexStatus.connected &&
-        codexAuthStarted &&
+        ${codexAuthStarted &&
         html`
           <div class="space-y-1 pt-1">
             <p class="text-xs text-fg-muted">
               ${codexAuthWaiting
-                ? "Complete login in the popup, then paste the full redirect URL from the address bar (starts with "
+                ? "Complete login in the popup. AlphaClaw should finish automatically, but if it doesn't, paste the full redirect URL from the address bar (starts with "
                 : "Paste the full redirect URL from the address bar (starts with "}
               <code class="text-xs bg-field px-1 rounded"
                 >http://localhost:1455/auth/callback</code
@@ -442,7 +439,6 @@ export const WelcomeFormStep = ({
               : html`<div class="w-full"></div>`}
             <${ActionButton}
               onClick=${goNext}
-              disabled=${!currentGroupValid}
               loading=${activeGroup.id === "github" && githubStepLoading}
               tone="primary"
               size="md"
@@ -466,7 +462,6 @@ export const WelcomeFormStep = ({
               : html`<div class="w-full"></div>`}
             <${ActionButton}
               onClick=${handleSubmit}
-              disabled=${!allValid}
               loading=${loading}
               tone="primary"
               size="md"

package/lib/public/js/components/onboarding/welcome-header.js

@@ -20,13 +20,11 @@ export const WelcomeHeader = ({
 
   return html`
     <div class="text-center mb-1">
-      <img
-        src="./img/logo.svg"
-        alt="alphaclaw"
-        class="mx-auto mb-3"
-        width="32"
-        height="33"
-      />
+      <span
+        class="ac-logo-mark block mx-auto mb-3"
+        style="--ac-logo-width: 32px; --ac-logo-height: 33px;"
+        aria-hidden="true"
+      ></span>
       <h1 class="text-2xl font-semibold mb-2">Setup</h1>
       <p style="color: var(--text-muted)" class="text-sm">
         Let's get your agent running
@@ -34,7 +32,7 @@ export const WelcomeHeader = ({
       <div class="mt-4 mb-2 flex items-center justify-center">
         <span
           class="text-[11px] px-2.5 py-1 rounded-full border border-border font-medium"
-          style="background: rgba(0, 0, 0, 0.3); color: var(--text-muted)"
+          style="background: var(--field-bg-contrast); color: var(--text-muted)"
         >
           ${isPreStep
             ? "Choose your destiny"
@@ -51,16 +49,16 @@ export const WelcomeHeader = ({
         const isPairingComplete =
           idx < step || (isPairingStep && group.id === "pairing");
         const bg = isPreStep
-          ? "rgba(82, 94, 122, 0.45)"
+          ? "var(--border-strong)"
           : isActive
-            ? "rgba(99, 235, 255, 0.9)"
+            ? "var(--accent)"
             : group.id === "pairing"
               ? isPairingComplete
-                ? "rgba(99, 235, 255, 0.55)"
-                : "rgba(82, 94, 122, 0.45)"
+                ? "var(--accent-dim)"
+                : "var(--border-strong)"
               : isComplete
-                ? "rgba(99, 235, 255, 0.55)"
-                : "rgba(82, 94, 122, 0.45)";
+                ? "var(--accent-dim)"
+                : "var(--border-strong)";
         return html`
           <div
             class="h-1 flex-1 rounded-full transition-colors ${isActive ? "ac-step-pill-pulse" : ""}"

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

@@ -45,7 +45,7 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
   if (error) {
     return html`
       <div class="py-4 flex flex-col items-center text-center gap-3">
-        <h3 class="text-lg font-semibold text-white">Setup failed</h3>
+        <h3 class="text-lg font-semibold text-body">Setup failed</h3>
         <p class="text-sm text-fg-muted">Fix the values and try again.</p>
       </div>
       <div
@@ -83,8 +83,8 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
       <div
         class="flex-1 flex flex-col items-center justify-center text-center gap-4"
       >
-        <${LoadingSpinner} className="h-8 w-8 text-white" />
-        <h3 class="text-lg font-semibold text-white">
+        <${LoadingSpinner} className="h-8 w-8 text-body" />
+        <h3 class="text-lg font-semibold text-body">
           Initializing OpenClaw...
         </h3>
         <p class="text-sm text-fg-muted">This could take 10-15 seconds</p>