@chrysb/alphaclaw 0.8.5 → 0.8.7-beta.0

package/lib/public/js/app.js

@@ -9,6 +9,7 @@ import {
 } from "wouter-preact";
 import { logout } from "./lib/api.js";
 import { Welcome } from "./components/welcome/index.js";
+import { ThemeToggle } from "./components/theme-toggle.js";
 import { ToastContainer } from "./components/toast.js";
 import { GlobalRestartBanner } from "./components/global-restart-banner.js";
 import { LoadingSpinner } from "./components/loading-spinner.js";
@@ -160,6 +161,9 @@ const App = () => {
         class="min-h-screen flex flex-col items-center pt-12 pb-8 px-4"
         style="position: relative; z-index: 1"
       >
+        <div style="position: fixed; top: 16px; right: 16px; z-index: 50;">
+          <${ThemeToggle} />
+        </div>
         <${Welcome}
           onComplete=${controllerActions.handleOnboardingComplete}
           acVersion=${controllerState.acVersion}
@@ -198,6 +202,7 @@ const App = () => {
         onPreviewBrowseFile=${browseActions.handleBrowsePreviewFile}
         acHasUpdate=${controllerState.acHasUpdate}
         acLatest=${controllerState.acLatest}
+        acRestarting=${controllerState.acRestarting}
         acUpdating=${controllerState.acUpdating}
         onAcUpdate=${controllerActions.handleAcUpdate}
         agents=${agentsState.agents}
@@ -380,6 +385,7 @@ const App = () => {
                         restartingGateway=${controllerState.restartingGateway}
                         onRestartGateway=${controllerActions.handleGatewayRestart}
                         restartSignal=${controllerState.gatewayRestartSignal}
+                        openclawRestarting=${controllerState.openclawRestarting}
                         openclawUpdateInProgress=${controllerState.openclawUpdateInProgress}
                         onOpenclawVersionActionComplete=${controllerActions.handleOpenclawVersionActionComplete}
                         onOpenclawUpdate=${controllerActions.handleOpenclawUpdate}
@@ -415,6 +421,7 @@ const App = () => {
                         restartingGateway=${controllerState.restartingGateway}
                         onRestartGateway=${controllerActions.handleGatewayRestart}
                         restartSignal=${controllerState.gatewayRestartSignal}
+                        openclawRestarting=${controllerState.openclawRestarting}
                         openclawUpdateInProgress=${controllerState.openclawUpdateInProgress}
                         onOpenclawVersionActionComplete=${controllerActions.handleOpenclawVersionActionComplete}
                         onOpenclawUpdate=${controllerActions.handleOpenclawUpdate}

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

@@ -27,6 +27,7 @@ const VersionRow = ({
   fetchVersion,
   applyUpdate,
   updateInProgress = false,
+  updateLoadingLabel = "Updating...",
   onActionComplete = () => {},
 }) => {
   const [checking, setChecking] = useState(false);
@@ -236,7 +237,7 @@ const VersionRow = ({
                   ? updateIdleLabel
                   : "Check updates"}
                 loadingLabel=${isUpdateActionActive
-                  ? "Updating..."
+                  ? updateLoadingLabel
                   : "Checking..."}
                 className="hidden md:inline-flex"
               />
@@ -250,7 +251,7 @@ const VersionRow = ({
                   ? updateIdleLabel
                   : "Check updates"}
                 loadingLabel=${isUpdateActionActive
-                  ? "Updating..."
+                  ? updateLoadingLabel
                   : "Checking..."}
               />
             `}
@@ -272,7 +273,7 @@ const VersionRow = ({
           loading=${updateButtonLoading}
           warning=${isUpdateActionActive}
           idleLabel=${updateIdleLabel}
-          loadingLabel="Updating..."
+          loadingLabel=${updateLoadingLabel}
           className="flex-1 h-9 px-3"
         />
       </div>
@@ -299,6 +300,7 @@ export const Gateway = ({
   onOpenWatchdog,
   onRepair,
   repairing = false,
+  openclawRestarting = false,
   openclawUpdateInProgress = false,
   onOpenclawVersionActionComplete = () => {},
   onOpenclawUpdate = updateOpenclaw,
@@ -443,6 +445,7 @@ export const Gateway = ({
         fetchVersion=${fetchOpenclawVersion}
         applyUpdate=${onOpenclawUpdate}
         updateInProgress=${openclawUpdateInProgress}
+        updateLoadingLabel=${openclawRestarting ? "Restarting..." : "Updating..."}
         onActionComplete=${onOpenclawVersionActionComplete}
       />
     </div>

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

@@ -28,6 +28,7 @@ export const GeneralTab = ({
   restartingGateway = false,
   onRestartGateway = () => {},
   restartSignal = 0,
+  openclawRestarting = false,
   openclawUpdateInProgress = false,
   onOpenclawVersionActionComplete = () => {},
   onOpenclawUpdate = () => {},
@@ -54,6 +55,7 @@ export const GeneralTab = ({
         onOpenWatchdog=${() => onSwitchTab("watchdog")}
         onRepair=${actions.handleWatchdogRepair}
         repairing=${state.repairingWatchdog}
+        openclawRestarting=${openclawRestarting}
         openclawUpdateInProgress=${openclawUpdateInProgress}
         onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
         onOpenclawUpdate=${onOpenclawUpdate}

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

@@ -508,6 +508,44 @@ export const EyeLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const SunIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <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 MoonIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+  </svg>
+`;
+
 export const FullscreenLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

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"

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