@chrysb/alphaclaw 0.9.0-beta.7 → 0.9.0

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/routes/chat-route.js

@@ -870,15 +870,8 @@ export const ChatRoute = ({ sessions = [], selectedSessionKey = "" }) => {
         <div>
           <div class="chat-route-title">Chat</div>
           <div class="chat-route-subtitle">
-            <span class="chat-route-subtitle-label"
-              >${getSessionDisplayLabel(selectedSession) ||
-              "Pick a session in the sidebar"}</span
-            >
-            ${selectedSessionKey
-              ? html`<span class="chat-route-session-key" title="Session key"
-                  >${selectedSessionKey}</span
-                >`
-              : null}
+            ${getSessionDisplayLabel(selectedSession) ||
+            "Pick a session in the sidebar"}
           </div>
           ${connectionError
             ? html`<div class="chat-route-warning">${connectionError}</div>`

package/lib/public/js/components/routes/general-route.js

@@ -16,9 +16,6 @@ export const GeneralRoute = ({
   restartingGateway = false,
   onRestartGateway = () => {},
   restartSignal = 0,
-  openclawUpdateInProgress = false,
-  onOpenclawVersionActionComplete = () => {},
-  onOpenclawUpdate = () => {},
   onRestartRequired = () => {},
   onDismissDoctorWarning = () => {},
 }) => html`
@@ -37,9 +34,6 @@ export const GeneralRoute = ({
       restartingGateway=${restartingGateway}
       onRestartGateway=${onRestartGateway}
       restartSignal=${restartSignal}
-      openclawUpdateInProgress=${openclawUpdateInProgress}
-      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
-      onOpenclawUpdate=${onOpenclawUpdate}
       onRestartRequired=${onRestartRequired}
       onDismissDoctorWarning=${onDismissDoctorWarning}
     />

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

@@ -5,7 +5,6 @@ export { CronRoute } from "./cron-route.js";
 export { DoctorRoute } from "./doctor-route.js";
 export { EnvarsRoute } from "./envars-route.js";
 export { GeneralRoute } from "./general-route.js";
-export { McpRoute } from "./mcp-route.js";
 export { ModelsRoute } from "./models-route.js";
 export { NodesRoute } from "./nodes-route.js";
 export { ProvidersRoute } from "./providers-route.js";

package/lib/public/js/components/routes/watchdog-route.js

@@ -11,9 +11,6 @@ export const WatchdogRoute = ({
   restartingGateway = false,
   onRestartGateway = () => {},
   restartSignal = 0,
-  openclawUpdateInProgress = false,
-  onOpenclawVersionActionComplete = () => {},
-  onOpenclawUpdate = () => {},
 }) => html`
   <div class="pt-4">
     <${WatchdogTab}
@@ -24,9 +21,6 @@ export const WatchdogRoute = ({
       restartingGateway=${restartingGateway}
       onRestartGateway=${onRestartGateway}
       restartSignal=${restartSignal}
-      openclawUpdateInProgress=${openclawUpdateInProgress}
-      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
-      onOpenclawUpdate=${onOpenclawUpdate}
     />
   </div>
 `;

package/lib/public/js/components/sidebar.js

@@ -12,11 +12,10 @@ import {
   ComputerLineIcon,
   EyeLineIcon,
   FolderLineIcon,
-  LinksLineIcon,
   HomeLineIcon,
   PulseLineIcon,
   RobotLineIcon,
-  WebhookLineIcon,
+  SignalTowerLineIcon,
 } from "./icons.js";
 import { FileTree } from "./file-tree.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
@@ -34,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";
@@ -58,9 +58,8 @@ const kSidebarNavIconsById = {
   watchdog: EyeLineIcon,
   models: Brain2LineIcon,
   envars: BracesLineIcon,
-  webhooks: WebhookLineIcon,
+  webhooks: SignalTowerLineIcon,
   nodes: ComputerLineIcon,
-  mcp: LinksLineIcon,
 };
 
 const readStoredBrowseBottomPanelHeight = () => {
@@ -110,7 +109,11 @@ export const AppSidebar = ({
   onSelectBrowseFile = () => {},
   onPreviewBrowseFile = () => {},
   acHasUpdate = false,
+  acVersion = "",
+  acCurrentOpenclawVersion = "",
   acLatest = "",
+  acLatestOpenclawVersion = "",
+  acUpdateStrategy = null,
   acUpdating = false,
   onAcUpdate = () => {},
   agents = [],
@@ -248,8 +251,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}
@@ -264,6 +273,7 @@ export const AppSidebar = ({
           </${OverflowMenuItem}>
         </${OverflowMenu}>
       `}
+      </span>
     </div>
     <div class="sidebar-tabs">
       <button
@@ -351,13 +361,13 @@ export const AppSidebar = ({
         `,
       )}
       <div class="sidebar-footer">
-        ${acHasUpdate && acLatest
+        ${acHasUpdate
           ? html`
               <${UpdateActionButton}
                 onClick=${() => setUpdateModalOpen(true)}
                 loading=${acUpdating}
                 warning=${true}
-                idleLabel=${`Update to v${acLatest}`}
+                idleLabel="Update available"
                 loadingLabel="Updating..."
                 className="w-full justify-center"
               />
@@ -487,7 +497,11 @@ export const AppSidebar = ({
         if (acUpdating) return;
         setUpdateModalOpen(false);
       }}
+      currentVersion=${acVersion}
+      currentOpenclawVersion=${acCurrentOpenclawVersion}
       version=${acLatest}
+      latestOpenclawVersion=${acLatestOpenclawVersion}
+      updateStrategy=${acUpdateStrategy}
       onUpdate=${onAcUpdate}
       updating=${acUpdating}
     />

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>
+  `;
+};