@chrysb/alphaclaw 0.9.0-beta.7 → 0.9.0

package/lib/public/js/components/gateway.js

@@ -1,10 +1,7 @@
 import { h } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import htm from "htm";
-import { fetchOpenclawVersion, updateOpenclaw } from "../lib/api.js";
 import { UpdateActionButton } from "./update-action-button.js";
-import { ConfirmDialog } from "./confirm-dialog.js";
-import { showToast } from "./toast.js";
 const html = htm.bind(h);
 
 const formatDuration = (ms) => {
@@ -21,287 +18,14 @@ const formatDuration = (ms) => {
   return `${seconds}s`;
 };
 
-const VersionRow = ({
-  label,
-  currentVersion,
-  fetchVersion,
-  applyUpdate,
-  updateInProgress = false,
-  onActionComplete = () => {},
-}) => {
-  const [checking, setChecking] = useState(false);
-  const [version, setVersion] = useState(currentVersion || null);
-  const [latestVersion, setLatestVersion] = useState(null);
-  const [hasUpdate, setHasUpdate] = useState(false);
-  const [error, setError] = useState("");
-  const [hasViewedChangelog, setHasViewedChangelog] = useState(false);
-  const [confirmWithoutChangelogOpen, setConfirmWithoutChangelogOpen] =
-    useState(false);
-  const simulateUpdate = (() => {
-    try {
-      const params = new URLSearchParams(window.location.search);
-      return params.get("simulateUpdate") === "1";
-    } catch {
-      return false;
-    }
-  })();
-  const simulatedVersion = (() => {
-    if (!simulateUpdate) return null;
-    try {
-      const params = new URLSearchParams(window.location.search);
-      return params.get("simulateVersion") || "v0.0.0-preview";
-    } catch {
-      return "v0.0.0-preview";
-    }
-  })();
-  const effectiveHasUpdate = simulateUpdate || hasUpdate;
-  const effectiveLatestVersion = simulatedVersion || latestVersion;
-  const isUpdateActionActive = updateInProgress || effectiveHasUpdate;
-  const updateIdleLabel = effectiveLatestVersion
-    ? `Update to ${effectiveLatestVersion}`
-    : "Update";
-  const changelogUrl = "https://github.com/openclaw/openclaw/tags";
-  const showMobileUpdateRow = effectiveHasUpdate && effectiveLatestVersion;
-
-  useEffect(() => {
-    setVersion(currentVersion || null);
-  }, [currentVersion]);
-
-  useEffect(() => {
-    let active = true;
-    const load = async (refresh = false) => {
-      try {
-        const data = await fetchVersion(refresh);
-        if (!active) return;
-        setVersion(data.currentVersion || currentVersion || null);
-        setLatestVersion(data.latestVersion || null);
-        setHasUpdate(!!data.hasUpdate);
-        setError(data.ok ? "" : data.error || "");
-      } catch (err) {
-        if (!active) return;
-        setError(err.message || "Could not check updates");
-      }
-    };
-    load(false);
-    return () => {
-      active = false;
-    };
-  }, [currentVersion, fetchVersion]);
-
-  useEffect(() => {
-    if (updateInProgress) return () => {};
-    let active = true;
-    const timeoutId = setTimeout(async () => {
-      try {
-        const data = await fetchVersion(true);
-        if (!active) return;
-        setVersion(data.currentVersion || currentVersion || null);
-        setLatestVersion(data.latestVersion || null);
-        setHasUpdate(!!data.hasUpdate);
-        setError(data.ok ? "" : data.error || "");
-      } catch {}
-    }, 1200);
-    return () => {
-      active = false;
-      clearTimeout(timeoutId);
-    };
-  }, [updateInProgress, currentVersion, fetchVersion]);
-
-  useEffect(() => {
-    if (!effectiveHasUpdate || !effectiveLatestVersion) {
-      setHasViewedChangelog(false);
-      return;
-    }
-    setHasViewedChangelog(false);
-  }, [effectiveHasUpdate, effectiveLatestVersion]);
-
-  const runAction = async () => {
-    const isUpdateAction = !!effectiveHasUpdate;
-    const busy = isUpdateActionActive ? checking || updateInProgress : checking;
-    if (busy) return;
-    setChecking(true);
-    setError("");
-    try {
-      const data = isUpdateAction
-        ? await applyUpdate()
-        : await fetchVersion(true);
-      setVersion(data.currentVersion || version);
-      setLatestVersion(data.latestVersion || null);
-      setHasUpdate(!!data.hasUpdate);
-      setError(data.ok ? "" : data.error || "");
-      if (isUpdateAction) {
-        if (!data.ok) {
-          showToast(data.error || `${label} update failed`, "error");
-        } else if (data.updated || data.restarting) {
-          showToast(
-            data.restarting
-              ? `${label} updated — restarting...`
-              : `Updated ${label} to ${data.currentVersion}`,
-            "success",
-          );
-        } else {
-          showToast(`Already at latest ${label} version`, "success");
-        }
-      } else if (data.hasUpdate && data.latestVersion) {
-        showToast(
-          `${label} update available: ${data.latestVersion}`,
-          "warning",
-        );
-      } else {
-        showToast(`${label} is up to date`, "success");
-      }
-      await onActionComplete({
-        type: isUpdateAction ? "update" : "check",
-        ok: !!data?.ok,
-        result: data,
-      });
-    } catch (err) {
-      setError(
-        err.message ||
-          (isUpdateAction
-            ? `Could not update ${label}`
-            : "Could not check updates"),
-      );
-      showToast(
-        isUpdateAction
-          ? `Could not update ${label}`
-          : "Could not check updates",
-        "error",
-      );
-      await onActionComplete({
-        type: isUpdateAction ? "update" : "check",
-        ok: false,
-        error: err,
-      });
-    } finally {
-      setChecking(false);
-    }
-  };
-
-  const handleAction = () => {
-    const busy = isUpdateActionActive ? checking || updateInProgress : checking;
-    if (busy) return;
-    if (effectiveHasUpdate && effectiveLatestVersion && !hasViewedChangelog) {
-      setConfirmWithoutChangelogOpen(true);
-      return;
-    }
-    runAction();
-  };
-
-  const handleConfirmWithoutChangelog = () => {
-    setConfirmWithoutChangelogOpen(false);
-    runAction();
-  };
-
-  const updateButtonLoading = isUpdateActionActive
-    ? checking || updateInProgress
-    : checking;
-
-  return html`
-    <div class="flex items-center justify-between gap-3">
-      <div class="min-w-0">
-        <p class="text-xs text-body truncate">
-          <span class="text-fg-muted">${label}</span>${" "}${version
-            ? `${version}`
-            : "..."}
-        </p>
-        ${error &&
-        effectiveHasUpdate &&
-        html`<div
-          class="mt-1 text-xs text-status-error bg-status-error-bg border border-status-error-border rounded-lg px-2 py-1"
-        >
-          ${error}
-        </div>`}
-      </div>
-      <div class="flex items-center gap-3 shrink-0">
-        ${effectiveHasUpdate &&
-        effectiveLatestVersion &&
-        html`
-          <a
-            href=${changelogUrl}
-            target="_blank"
-            rel="noreferrer"
-            onclick=${() => setHasViewedChangelog(true)}
-            class="hidden md:inline text-xs text-fg-muted hover:text-body transition-colors"
-            >View changelog</a
-          >
-        `}
-        ${showMobileUpdateRow
-          ? html`
-              <${UpdateActionButton}
-                onClick=${handleAction}
-                loading=${updateButtonLoading}
-                warning=${isUpdateActionActive}
-                idleLabel=${isUpdateActionActive
-                  ? updateIdleLabel
-                  : "Check updates"}
-                loadingLabel=${isUpdateActionActive
-                  ? "Updating..."
-                  : "Checking..."}
-                className="hidden md:inline-flex"
-              />
-            `
-          : html`
-              <${UpdateActionButton}
-                onClick=${handleAction}
-                loading=${updateButtonLoading}
-                warning=${isUpdateActionActive}
-                idleLabel=${isUpdateActionActive
-                  ? updateIdleLabel
-                  : "Check updates"}
-                loadingLabel=${isUpdateActionActive
-                  ? "Updating..."
-                  : "Checking..."}
-              />
-            `}
-      </div>
-    </div>
-    ${showMobileUpdateRow &&
-    html`
-      <div class="mt-2 md:hidden flex items-center gap-2">
-        <a
-          href=${changelogUrl}
-          target="_blank"
-          rel="noreferrer"
-          onclick=${() => setHasViewedChangelog(true)}
-          class="inline-flex items-center justify-center flex-1 h-9 text-xs rounded-lg border border-border text-fg-muted hover:text-body hover:border-fg-muted transition-colors"
-          >View changelog</a
-        >
-        <${UpdateActionButton}
-          onClick=${handleAction}
-          loading=${updateButtonLoading}
-          warning=${isUpdateActionActive}
-          idleLabel=${updateIdleLabel}
-          loadingLabel="Updating..."
-          className="flex-1 h-9 px-3"
-        />
-      </div>
-    `}
-    <${ConfirmDialog}
-      visible=${confirmWithoutChangelogOpen}
-      title="Update without changelog?"
-      message="Are you sure you want to update without viewing the changelog?"
-      confirmLabel=${`Update to ${effectiveLatestVersion || "latest"}`}
-      cancelLabel="Cancel"
-      confirmTone="warning"
-      onCancel=${() => setConfirmWithoutChangelogOpen(false)}
-      onConfirm=${handleConfirmWithoutChangelog}
-    />
-  `;
-};
-
 export const Gateway = ({
   status,
-  openclawVersion,
   restarting = false,
   onRestart,
   watchdogStatus = null,
   onOpenWatchdog,
   onRepair,
   repairing = false,
-  openclawUpdateInProgress = false,
-  onOpenclawVersionActionComplete = () => {},
-  onOpenclawUpdate = updateOpenclaw,
 }) => {
   const [nowMs, setNowMs] = useState(() => Date.now());
   const isRunning = status === "running" && !restarting;
@@ -436,15 +160,5 @@ export const Gateway = ({
           : null}
       </div>
     </div>
-    <div class="mt-3">
-      <${VersionRow}
-        label="OpenClaw"
-        currentVersion=${openclawVersion}
-        fetchVersion=${fetchOpenclawVersion}
-        applyUpdate=${onOpenclawUpdate}
-        updateInProgress=${openclawUpdateInProgress}
-        onActionComplete=${onOpenclawVersionActionComplete}
-      />
-    </div>
   </div>`;
 };

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

@@ -28,9 +28,6 @@ export const GeneralTab = ({
   restartingGateway = false,
   onRestartGateway = () => {},
   restartSignal = 0,
-  openclawUpdateInProgress = false,
-  onOpenclawVersionActionComplete = () => {},
-  onOpenclawUpdate = () => {},
   onRestartRequired = () => {},
   onDismissDoctorWarning = () => {},
 }) => {
@@ -47,16 +44,12 @@ export const GeneralTab = ({
     <div class="space-y-4">
       <${Gateway}
         status=${state.gatewayStatus}
-        openclawVersion=${state.openclawVersion}
         restarting=${restartingGateway}
         onRestart=${onRestartGateway}
         watchdogStatus=${state.watchdogStatus}
         onOpenWatchdog=${() => onSwitchTab("watchdog")}
         onRepair=${actions.handleWatchdogRepair}
         repairing=${state.repairingWatchdog}
-        openclawUpdateInProgress=${openclawUpdateInProgress}
-        onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
-        onOpenclawUpdate=${onOpenclawUpdate}
       />
       <${GeneralDoctorWarning}
         doctorStatus=${state.doctorStatus}

package/lib/public/js/components/icons.js

@@ -321,19 +321,6 @@ export const SignalTowerLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
-export const WebhookLineIcon = ({ className = "" }) => html`
-  <svg
-    class=${className}
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    aria-hidden="true"
-  >
-    <path
-      d="M8.86874 14.1392C8.6556 14.4912 8.55014 14.7778 8.72043 15.2253C9.1905 16.4613 8.52737 17.664 7.28097 17.9905C6.10556 18.2985 4.96035 17.526 4.72713 16.2676C4.52048 15.1537 5.38488 14.0617 6.61294 13.8877C6.67963 13.8781 6.74717 13.874 6.83351 13.8688C6.88044 13.866 6.93293 13.8628 6.99384 13.8582L8.86194 10.7257C7.687 9.55742 6.98767 8.19164 7.14246 6.49936C7.25188 5.30308 7.72226 4.26933 8.58208 3.42201C10.2288 1.79945 12.7411 1.53667 14.68 2.78212C16.5423 3.97841 17.3951 6.30867 16.6681 8.30311L14.9611 7.84C15.1895 6.73115 15.0206 5.73536 14.2727 4.88234C13.7786 4.31914 13.1446 4.02394 12.4236 3.91516C10.9783 3.69681 9.55922 4.6254 9.13816 6.04399C8.66019 7.65406 9.38355 8.96924 11.3603 9.96029C10.5311 11.3541 9.70859 12.7518 8.86874 14.1392ZM13.7838 8.27337C14.3816 9.32798 14.9886 10.3986 15.5902 11.4593C18.631 10.5186 20.9237 12.2018 21.7462 14.004C22.7396 16.1809 22.0605 18.7593 20.1094 20.1023C18.1067 21.481 15.5741 21.2454 13.7997 19.4744L15.1919 18.3094C16.9444 19.4445 18.4772 19.3911 19.6151 18.047C20.5855 16.9003 20.5644 15.1906 19.5659 14.068C18.4136 12.7726 16.8701 12.7331 15.0044 13.9767C14.2305 12.6037 13.443 11.2413 12.6936 9.85845C12.4409 9.39233 12.1618 9.12196 11.5923 9.0233C10.6411 8.85839 10.027 8.04157 9.99016 7.12642C9.95395 6.22138 10.4871 5.4033 11.3205 5.08455C12.146 4.7688 13.1148 5.02367 13.6701 5.72554C14.1239 6.29901 14.2681 6.94443 14.0293 7.65167C13.9843 7.7852 13.9304 7.91584 13.8713 8.05885C13.8431 8.12694 13.8138 8.19801 13.7838 8.27337ZM11.552 16.895H15.2126C15.2636 16.963 15.3113 17.0303 15.3579 17.0959C15.4551 17.233 15.5474 17.3632 15.6551 17.4788C16.4304 18.3077 17.7395 18.3489 18.5682 17.5795C19.4271 16.7821 19.466 15.4426 18.6544 14.6101C17.8602 13.7955 16.5029 13.7177 15.7655 14.5802C15.3176 15.1044 14.8586 15.166 14.2641 15.1567C12.7414 15.1332 11.2177 15.149 9.69524 15.149C9.79406 17.2909 8.98436 18.6255 7.37841 18.9424C5.80582 19.2528 4.3575 18.4504 3.84759 16.9864C3.26842 15.3229 3.98467 13.9925 6.05421 12.9366C5.89847 12.3725 5.74115 11.8016 5.58541 11.236C3.32977 11.7276 1.63749 13.916 1.8122 16.378C1.96652 18.5514 3.71968 20.4815 5.86369 20.8273C7.02819 21.0153 8.12233 20.82 9.13741 20.2442C10.4433 19.5032 11.2011 18.3381 11.552 16.895Z"
-    />
-  </svg>
-`;
-
 export const GitBranchLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}
@@ -521,48 +508,62 @@ export const EyeLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
-export const FullscreenLineIcon = ({ className = "" }) => html`
+export const SunIcon = ({ className = "" }) => html`
   <svg
     class=${className}
     viewBox="0 0 24 24"
-    fill="currentColor"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
     aria-hidden="true"
   >
-    <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
+    <circle cx="12" cy="12" r="5" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
   </svg>
 `;
 
-export const ComputerLineIcon = ({ className = "" }) => html`
+export const MoonIcon = ({ className = "" }) => html`
   <svg
     class=${className}
     viewBox="0 0 24 24"
-    fill="currentColor"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
     aria-hidden="true"
   >
-    <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z" />
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
   </svg>
 `;
 
-export const PlugLineIcon = ({ className = "" }) => html`
+export const FullscreenLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}
     viewBox="0 0 24 24"
     fill="currentColor"
     aria-hidden="true"
   >
-    <path d="M13 18V20H17V22H7V20H11V18H6C5.44772 18 5 17.5523 5 17V10.0001H3V8.00005H5V6C5 5.44772 5.44772 5 6 5H9V2H11V5H13V2H15V5H18C18.5523 5 19 5.44772 19 6V8.00005H21V10.0001H19V17C19 17.5523 18.5523 18 18 18H13ZM7 7V16H17V7H7Z" />
+    <path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z" />
   </svg>
 `;
 
-export const LinksLineIcon = ({ className = "" }) => html`
+export const ComputerLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}
     viewBox="0 0 24 24"
     fill="currentColor"
     aria-hidden="true"
   >
-    <path
-      d="M13.0607 8.11097L14.4749 9.52518C17.2086 12.2589 17.2086 16.691 14.4749 19.4247L14.1214 19.7782C11.3877 22.5119 6.95555 22.5119 4.22188 19.7782C1.48821 17.0446 1.48821 12.6124 4.22188 9.87874L5.6361 11.293C3.68348 13.2456 3.68348 16.4114 5.6361 18.364C7.58872 20.3166 10.7545 20.3166 12.7072 18.364L13.0607 18.0105C15.0133 16.0578 15.0133 12.892 13.0607 10.9394L11.6465 9.52518L13.0607 8.11097ZM19.7782 14.1214L18.364 12.7072C20.3166 10.7545 20.3166 7.58872 18.364 5.6361C16.4114 3.68348 13.2456 3.68348 11.293 5.6361L10.9394 5.98965C8.98678 7.94227 8.98678 11.1081 10.9394 13.0607L12.3536 14.4749L10.9394 15.8891L9.52518 14.4749C6.79151 11.7413 6.79151 7.30911 9.52518 4.57544L9.87874 4.22188C12.6124 1.48821 17.0446 1.48821 19.7782 4.22188C22.5119 6.95555 22.5119 11.3877 19.7782 14.1214Z"
-    />
+    <path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H13Z" />
   </svg>
 `;

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

@@ -29,7 +29,7 @@ export const ModalShell = ({
   return createPortal(
     html`
       <div
-        class="fixed inset-0 bg-overlay flex items-center justify-center p-4 z-50"
+        class="fixed inset-0 bg-overlay flex items-start justify-center overflow-y-auto p-4 sm:items-center z-50"
         onclick=${(event) => {
           if (closeOnOverlayClick && event.target === event.currentTarget) onClose?.();
         }}

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -5,6 +5,10 @@ import { Badge } from "../badge.js";
 import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { exchangeCodexOAuth, disconnectCodex } from "../../lib/api.js";
+import {
+  isCodexAuthCallbackMessage,
+  openCodexAuthWindow,
+} from "../../lib/codex-oauth-window.js";
 import { showToast } from "../toast.js";
 import {
   kProviderAuthFields,
@@ -108,6 +112,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   const [authWaiting, setAuthWaiting] = useState(false);
   const [manualInput, setManualInput] = useState("");
   const [exchanging, setExchanging] = useState(false);
+  const exchangeInFlightRef = useRef(false);
   const popupPollRef = useRef(null);
 
   useEffect(
@@ -117,6 +122,30 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
     [],
   );
 
+  const submitAuthInput = async (input) => {
+    const normalizedInput = String(input || "").trim();
+    if (!normalizedInput || exchangeInFlightRef.current) return;
+    exchangeInFlightRef.current = true;
+    setManualInput(normalizedInput);
+    setExchanging(true);
+    try {
+      const result = await exchangeCodexOAuth(normalizedInput);
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
+      setManualInput("");
+      showToast("Codex connected", "success");
+      setAuthStarted(false);
+      setAuthWaiting(false);
+      await onRefreshCodex();
+    } catch (err) {
+      setAuthWaiting(false);
+      showToast(err.message || "Codex OAuth exchange failed", "error");
+    } finally {
+      exchangeInFlightRef.current = false;
+      setExchanging(false);
+    }
+  };
+
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
@@ -124,6 +153,8 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
         setAuthStarted(false);
         setAuthWaiting(false);
         await onRefreshCodex();
+      } else if (isCodexAuthCallbackMessage(e.data)) {
+        await submitAuthInput(e.data.input);
       } else if (e.data?.codex === "error") {
         showToast(
           `Codex auth failed: ${e.data.message || "unknown error"}`,
@@ -133,19 +164,14 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
     };
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [onRefreshCodex]);
+  }, [onRefreshCodex, submitAuthInput]);
 
   const startAuth = () => {
     setAuthStarted(true);
     setAuthWaiting(true);
-    const popup = window.open(
-      "/auth/codex/start",
-      "codex-auth",
-      "popup=yes,width=640,height=780",
-    );
+    const popup = openCodexAuthWindow();
     if (!popup || popup.closed) {
       setAuthWaiting(false);
-      window.location.href = "/auth/codex/start";
       return;
     }
     if (popupPollRef.current) clearInterval(popupPollRef.current);
@@ -159,22 +185,7 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
   };
 
   const completeAuth = async () => {
-    if (!manualInput.trim() || exchanging) return;
-    setExchanging(true);
-    try {
-      const result = await exchangeCodexOAuth(manualInput.trim());
-      if (!result.ok)
-        throw new Error(result.error || "Codex OAuth exchange failed");
-      setManualInput("");
-      showToast("Codex connected", "success");
-      setAuthStarted(false);
-      setAuthWaiting(false);
-      await onRefreshCodex();
-    } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "error");
-    } finally {
-      setExchanging(false);
-    }
+    await submitAuthInput(manualInput);
   };
 
   const handleDisconnect = async () => {
@@ -198,7 +209,23 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
           ? html`<${Badge} tone="success">Connected</${Badge}>`
           : html`<${Badge} tone="warning">Not connected</${Badge}>`}
       </div>
-      ${codexStatus.connected
+      ${authStarted
+        ? html`
+            <div class="flex items-center justify-between gap-2">
+              <p class="text-xs text-fg-muted">
+                ${authWaiting
+                  ? "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=${startAuth}
+                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
@@ -215,32 +242,16 @@ const CodexOAuthSection = ({ codexStatus, onRefreshCodex }) => {
               </button>
             </div>
           `
-        : !authStarted
+        : html`
+            <button
+              onclick=${startAuth}
+              class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
+            >
+              Connect Codex OAuth
+            </button>
+          `}
+      ${authStarted
           ? html`
-              <button
-                onclick=${startAuth}
-                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">
-                  ${authWaiting
-                    ? "Complete login in the popup, then paste the redirect URL."
-                    : "Paste the redirect URL from your browser to finish connecting."}
-                </p>
-                <button
-                  onclick=${startAuth}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
-                >
-                  Restart
-                </button>
-              </div>
-            `}
-      ${!codexStatus.connected && authStarted
-        ? html`
             <p class="text-xs text-fg-muted">
               After login, copy the full redirect URL (starts with
               <code class="text-xs bg-field px-1 rounded"