@chrysb/alphaclaw 0.8.4 → 0.8.6

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>

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

@@ -27,6 +27,10 @@ import {
   kProviderFeatures,
   kCoreProviders,
 } from "../lib/model-config.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../lib/codex-oauth-window.js";
 
 const html = htm.bind(h);
 
@@ -89,6 +93,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
     () => kProvidersTabCache?.savedAiValues || {},
   );
   const [showMoreProviders, setShowMoreProviders] = useState(false);
+  const codexExchangeInFlightRef = useRef(false);
   const codexPopupPollRef = useRef(null);
 
   const refresh = async () => {
@@ -171,11 +176,37 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
     [],
   );
 
+  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"}`,
@@ -185,7 +216,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, []);
+  }, [submitCodexAuthInput]);
 
   const setEnvValue = (key, value) => {
     setEnvVars((prev) => {
@@ -296,14 +327,9 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
     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) {
@@ -319,22 +345,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
   };
 
   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 () => {
@@ -385,7 +396,23 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
           ? 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
@@ -402,31 +429,15 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
               </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/sidebar.js

@@ -33,6 +33,7 @@ import {
   getSessionDisplayLabel,
   getSessionRowKey,
 } from "../lib/session-keys.js";
+import { ThemeToggle } from "./theme-toggle.js";
 
 const html = htm.bind(h);
 const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
@@ -246,8 +247,14 @@ export const AppSidebar = ({
   return html`
     <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
     <div class="sidebar-brand">
-      <img src="./img/logo.svg" alt="" width="20" height="20" />
+      <span
+        class="ac-logo-mark"
+        style="--ac-logo-width: 20px; --ac-logo-height: 20px;"
+        aria-hidden="true"
+      ></span>
       <span><span style="color: var(--accent)">alpha</span>claw</span>
+      <span style="margin-left: auto; display: inline-flex; align-items: center; gap: 4px;">
+        <${ThemeToggle} />
       ${authEnabled && html`
         <${OverflowMenu}
           open=${menuOpen}
@@ -262,6 +269,7 @@ export const AppSidebar = ({
           </${OverflowMenuItem}>
         </${OverflowMenu}>
       `}
+      </span>
     </div>
     <div class="sidebar-tabs">
       <button

package/lib/public/js/components/theme-toggle.js

@@ -0,0 +1,113 @@
+import { h } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import htm from "htm";
+import { ComputerLineIcon, MoonIcon, SunIcon } from "./icons.js";
+import { kThemeStorageKey } from "../lib/storage-keys.js";
+
+const html = htm.bind(h);
+
+const kOptions = [
+  { id: "dark", label: "Dark", Icon: MoonIcon },
+  { id: "light", label: "Light", Icon: SunIcon },
+  { id: "system", label: "System", Icon: ComputerLineIcon },
+];
+
+/** Map a preference to the icon component shown on the trigger button. */
+const kPrefIcon = { dark: MoonIcon, light: SunIcon, system: ComputerLineIcon };
+
+/** Resolve a preference string to an effective "dark" | "light" value. */
+const resolveEffective = (pref) => {
+  if (pref === "dark" || pref === "light") return pref;
+  try {
+    return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  } catch {
+    return "dark";
+  }
+};
+
+/** Read the stored preference. Falls back to "dark" (not OS). */
+const readPreference = () => {
+  try {
+    const saved = localStorage.getItem(kThemeStorageKey);
+    if (saved === "dark" || saved === "light" || saved === "system") return saved;
+  } catch {}
+  return "dark";
+};
+
+const applyEffective = (effective) => {
+  document.documentElement.dataset.theme = effective;
+};
+
+const savePreference = (pref) => {
+  try { localStorage.setItem(kThemeStorageKey, pref); } catch {}
+};
+
+export const ThemeToggle = () => {
+  const [pref, setPref] = useState(readPreference);
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  // Apply effective theme whenever preference changes (and listen for OS changes when "system").
+  useEffect(() => {
+    applyEffective(resolveEffective(pref));
+
+    if (pref !== "system") return;
+
+    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const onChange = () => applyEffective(resolveEffective("system"));
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [pref]);
+
+  // Close dropdown on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("click", handler, true);
+    return () => window.removeEventListener("click", handler, true);
+  }, [open]);
+
+  const select = (id) => {
+    setPref(id);
+    savePreference(id);
+    applyEffective(resolveEffective(id));
+    setOpen(false);
+  };
+
+  const TriggerIcon = kPrefIcon[pref] || MoonIcon;
+
+  return html`
+    <div
+      ref=${menuRef}
+      class="theme-toggle-menu"
+    >
+      <button
+        type="button"
+        onclick=${() => setOpen((o) => !o)}
+        title="Theme"
+        aria-label="Toggle theme"
+        aria-expanded=${open}
+        class="theme-toggle-trigger"
+      >
+        <${TriggerIcon} className="w-3.5 h-3.5" />
+      </button>
+      ${open && html`
+        <div class="theme-toggle-dropdown">
+          ${kOptions.map(({ id, label, Icon }) => html`
+            <button
+              key=${id}
+              type="button"
+              class="theme-toggle-option ${pref === id ? "active" : ""}"
+              onclick=${() => select(id)}
+            >
+              <${Icon} className="w-3.5 h-3.5" />
+              <span>${label}</span>
+            </button>
+          `)}
+        </div>
+      `}
+    </div>
+  `;
+};

package/lib/public/js/components/welcome/index.js

@@ -102,12 +102,10 @@ export const Welcome = ({ onComplete, acVersion }) => {
                         error=${state.formError}
                         step=${state.step}
                         totalGroups=${kWelcomeGroups.length}
-                        currentGroupValid=${state.currentGroupValid}
                         goBack=${actions.goBack}
                         goNext=${actions.goNext}
                         loading=${state.loading}
                         githubStepLoading=${state.githubStepLoading}
-                        allValid=${state.allValid}
                         handleSubmit=${actions.handleSubmit}
                       />
                     `}