@chrysb/alphaclaw 0.8.5 → 0.8.7-beta.0

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

@@ -1,5 +1,5 @@
 import { h } from "preact";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import htm from "htm";
 import {
   AddLineIcon,
@@ -22,6 +22,7 @@ import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
 import { UpdateModal } from "./update-modal.js";
+import { createUpdateModalSubmitHandler } from "./update-modal-helpers.js";
 import {
   readUiSettings,
   updateUiSettings,
@@ -33,6 +34,7 @@ import {
   getSessionDisplayLabel,
   getSessionRowKey,
 } from "../lib/session-keys.js";
+import { ThemeToggle } from "./theme-toggle.js";
 
 const html = htm.bind(h);
 const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
@@ -109,6 +111,7 @@ export const AppSidebar = ({
   onPreviewBrowseFile = () => {},
   acHasUpdate = false,
   acLatest = "",
+  acRestarting = false,
   acUpdating = false,
   onAcUpdate = () => {},
   agents = [],
@@ -181,6 +184,19 @@ export const AppSidebar = ({
     writeUiSettings(settings);
   }, [browseBottomPanelHeightPx]);
 
+  const handleUpdateModalClose = useCallback(() => {
+    if (acUpdating) return;
+    setUpdateModalOpen(false);
+  }, [acUpdating]);
+
+  const handleUpdateModalSubmit = useCallback(
+    createUpdateModalSubmitHandler({
+      onClose: () => setUpdateModalOpen(false),
+      onUpdate: onAcUpdate,
+    }),
+    [onAcUpdate],
+  );
+
   const getClampedBrowseBottomPanelHeight = (value) => {
     const layoutElement = browseLayoutRef.current;
     if (!layoutElement) return value;
@@ -246,8 +262,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 +284,7 @@ export const AppSidebar = ({
           </${OverflowMenuItem}>
         </${OverflowMenu}>
       `}
+      </span>
     </div>
     <div class="sidebar-tabs">
       <button
@@ -356,7 +379,7 @@ export const AppSidebar = ({
                 loading=${acUpdating}
                 warning=${true}
                 idleLabel=${`Update to v${acLatest}`}
-                loadingLabel="Updating..."
+                loadingLabel=${acRestarting ? "Restarting..." : "Updating..."}
                 className="w-full justify-center"
               />
             `
@@ -481,13 +504,11 @@ export const AppSidebar = ({
     </div>
     <${UpdateModal}
       visible=${updateModalOpen}
-      onClose=${() => {
-        if (acUpdating) return;
-        setUpdateModalOpen(false);
-      }}
+      onClose=${handleUpdateModalClose}
       version=${acLatest}
-      onUpdate=${onAcUpdate}
+      onUpdate=${handleUpdateModalSubmit}
       updating=${acUpdating}
+      updateLoadingLabel=${acRestarting ? "Restarting..." : "Updating..."}
     />
   </div>
 `;

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/update-modal-helpers.js

@@ -0,0 +1,12 @@
+export const createUpdateModalSubmitHandler = ({
+  onClose = () => {},
+  onUpdate = async () => ({ ok: false }),
+}) => {
+  return async () => {
+    const result = await onUpdate();
+    if (result?.ok) {
+      onClose();
+    }
+    return result;
+  };
+};

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

@@ -40,6 +40,7 @@ export const UpdateModal = ({
   version = "",
   onUpdate = () => {},
   updating = false,
+  updateLoadingLabel = "Updating...",
 }) => {
   const requestedTag = useMemo(() => getReleaseTagFromVersion(version), [version]);
   const [loadingNotes, setLoadingNotes] = useState(false);
@@ -163,7 +164,7 @@ export const UpdateModal = ({
           onClick=${onUpdate}
           tone="warning"
           idleLabel=${updateLabel}
-          loadingLabel="Updating..."
+          loadingLabel=${updateLoadingLabel}
           loading=${updating}
           disabled=${loadingNotes}
         />

package/lib/public/js/components/watchdog-tab/index.js

@@ -17,6 +17,7 @@ export const WatchdogTab = ({
   restartingGateway = false,
   onRestartGateway,
   restartSignal = 0,
+  openclawRestarting = false,
   openclawUpdateInProgress = false,
   onOpenclawVersionActionComplete = () => {},
   onOpenclawUpdate,
@@ -37,6 +38,7 @@ export const WatchdogTab = ({
         watchdogStatus=${state.currentWatchdogStatus}
         onRepair=${state.onRepair}
         repairing=${state.isRepairInProgress}
+        openclawRestarting=${openclawRestarting}
         openclawUpdateInProgress=${openclawUpdateInProgress}
         onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
         onOpenclawUpdate=${onOpenclawUpdate}

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

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

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

@@ -6,6 +6,7 @@ import {
   applyImport,
   fetchModels,
 } from "../../lib/api.js";
+import { useCachedFetch } from "../../hooks/use-cached-fetch.js";
 import {
   getModelProvider,
   getAuthProviderFromModelProvider,
@@ -13,8 +14,16 @@ import {
   getVisibleAiFieldKeys,
   kProviderAuthFields,
 } from "../../lib/model-config.js";
+import {
+  getInitialOnboardingModelKey,
+  getModelCatalogModels,
+  kModelCatalogCacheKey,
+} from "../../lib/model-catalog.js";
 import {
   kWelcomeGroups,
+  getWelcomeGroupError,
+  findFirstInvalidWelcomeGroup,
+  normalizeGithubRepoInput,
   isValidGithubRepoInput,
   kGithubFlowFresh,
   kGithubFlowImport,
@@ -40,6 +49,8 @@ export const kImportStepId = "import";
 export const kSecretReviewStepId = "secret-review";
 export const kPlaceholderReviewStepId = "placeholder-review";
 const kImportSubstepKey = "_IMPORT_SUBSTEP";
+const kImportAppliedKey = "_IMPORT_APPLIED";
+const kImportedSourceRepoKey = "_IMPORTED_SOURCE_REPO";
 const kImportPlaceholderReviewKey = "_IMPORT_PLACEHOLDER_REVIEW";
 const kImportPlaceholderSkipConfirmedKey = "_IMPORT_PLACEHOLDER_SKIP_CONFIRMED";
 
@@ -73,14 +84,45 @@ const normalizePlaceholderReview = (review) => {
   };
 };
 
+const normalizeTrackedRepo = (repoInput) =>
+  normalizeGithubRepoInput(repoInput).toLowerCase();
+
+export const getImportReuseState = ({
+  githubFlow,
+  importApplied,
+  sourceRepo,
+  importedSourceRepo,
+}) => {
+  const sourceImportAlreadyApplied =
+    githubFlow === kGithubFlowImport && !!importApplied;
+  const normalizedSourceRepo = normalizeTrackedRepo(sourceRepo);
+  const normalizedImportedSourceRepo = normalizeTrackedRepo(importedSourceRepo);
+  const sourceRepoChangedAfterImport =
+    sourceImportAlreadyApplied &&
+    !!normalizedImportedSourceRepo &&
+    normalizedSourceRepo !== normalizedImportedSourceRepo;
+
+  return {
+    sourceImportAlreadyApplied,
+    sourceRepoChangedAfterImport,
+  };
+};
+
 export const useWelcome = ({ onComplete }) => {
   const kSetupStepIndex = kWelcomeGroups.length;
   const kPairingStepIndex = kSetupStepIndex + 1;
-  const { vals, setVals, setValue, step, setStep, setupError, setSetupError } =
-    useWelcomeStorage({
-      kSetupStepIndex,
-      kPairingStepIndex,
-    });
+  const {
+    vals,
+    setVals,
+    setValue: setStoredValue,
+    step,
+    setStep,
+    setupError,
+    setSetupError,
+  } = useWelcomeStorage({
+    kSetupStepIndex,
+    kPairingStepIndex,
+  });
   const [models, setModels] = useState([]);
   const [modelsLoading, setModelsLoading] = useState(true);
   const [modelsError, setModelsError] = useState(null);
@@ -110,6 +152,14 @@ export const useWelcome = ({ onComplete }) => {
   const [importScanResult, setImportScanResult] = useState(null);
   const [importScanning, setImportScanning] = useState(false);
   const [importError, setImportError] = useState(null);
+  const modelsFetchState = useCachedFetch(kModelCatalogCacheKey, fetchModels, {
+    maxAgeMs: 30000,
+  });
+
+  const setValue = (key, value) => {
+    if (formError) setFormError(null);
+    setStoredValue(key, value);
+  };
 
   const setImportStep = (nextStep) => {
     setImportStepState(nextStep);
@@ -129,24 +179,58 @@ export const useWelcome = ({ onComplete }) => {
   };
 
   useEffect(() => {
-    fetchModels()
-      .then((result) => {
-        const list = Array.isArray(result.models) ? result.models : [];
-        const featured = getFeaturedModels(list);
-        setModels(list);
-        if (!vals.MODEL_KEY && list.length > 0) {
-          const defaultModel = featured[0] || list[0];
-          setVals((prev) => ({ ...prev, MODEL_KEY: defaultModel.key }));
-        }
-      })
-      .catch(() => setModelsError("Failed to load models"))
-      .finally(() => setModelsLoading(false));
-  }, []);
+    const list = getModelCatalogModels(modelsFetchState.data);
+    if (!modelsFetchState.data) return;
+    setModels(list);
+    setModelsError(list.length > 0 ? null : "No models found");
+    const defaultModelKey = getInitialOnboardingModelKey({
+      catalog: list,
+      currentModelKey: vals.MODEL_KEY,
+    });
+    if (!vals.MODEL_KEY && defaultModelKey) {
+      setVals((prev) => ({ ...prev, MODEL_KEY: defaultModelKey }));
+    }
+  }, [modelsFetchState.data, setVals, vals.MODEL_KEY]);
+
+  useEffect(() => {
+    const hasModels = getModelCatalogModels(modelsFetchState.data).length > 0;
+    setModelsLoading(modelsFetchState.loading && !hasModels);
+  }, [modelsFetchState.data, modelsFetchState.loading]);
 
-  const selectedProvider = getModelProvider(vals.MODEL_KEY);
+  useEffect(() => {
+    if (!modelsFetchState.error) return;
+    setModelsError("Failed to load models");
+    setModelsLoading(false);
+  }, [modelsFetchState.error]);
+
+  const getValidationContext = (currentVals = {}) => {
+    const currentSelectedProvider = getModelProvider(
+      String(currentVals.MODEL_KEY || "").trim(),
+    );
+    const currentSelectedAuthProvider =
+      getAuthProviderFromModelProvider(currentSelectedProvider);
+    const currentProviderAuthFields =
+      kProviderAuthFields[currentSelectedAuthProvider] || [];
+    const currentHasAi =
+      currentSelectedProvider === "openai-codex"
+        ? !!codexStatus.connected
+        : currentProviderAuthFields.some((field) =>
+            !!String(currentVals[field.key] || "").trim(),
+          );
+
+    return {
+      hasAi: currentHasAi,
+      selectedProvider: currentSelectedProvider,
+      codexLoading,
+    };
+  };
+
+  const validationContext = getValidationContext(vals);
+  const { selectedProvider, hasAi } = validationContext;
   const placeholderReview = normalizePlaceholderReview(
     vals[kImportPlaceholderReviewKey],
   );
+  const importApplied = !!vals[kImportAppliedKey];
   const featuredModels = getFeaturedModels(models);
   const baseModelOptions = showAllModels
     ? models
@@ -164,23 +248,10 @@ export const useWelcome = ({ onComplete }) => {
   const canToggleFullCatalog =
     featuredModels.length > 0 && models.length > featuredModels.length;
   const visibleAiFieldKeys = getVisibleAiFieldKeys(selectedProvider);
-  const selectedAuthProvider = getAuthProviderFromModelProvider(selectedProvider);
-  const selectedProviderAuthFields = kProviderAuthFields[selectedAuthProvider] || [];
-  const hasAi =
-    selectedProvider === "openai-codex"
-      ? !!codexStatus.connected
-      : selectedProviderAuthFields.some(
-          (field) => !!String(vals[field.key] || "").trim(),
-        );
-
-  const allValid = kWelcomeGroups.every((group) => group.validate(vals, { hasAi }));
   const isPreStep = step === -1;
   const isSetupStep = step === kSetupStepIndex;
   const isPairingStep = step === kPairingStepIndex;
   const activeGroup = step >= 0 && step < kSetupStepIndex ? kWelcomeGroups[step] : null;
-  const currentGroupValid = activeGroup
-    ? activeGroup.validate(vals, { hasAi })
-    : false;
   const selectedPairingChannel = String(
     vals[kPairingChannelKey] || getPreferredPairingChannel(vals),
   );
@@ -202,7 +273,21 @@ export const useWelcome = ({ onComplete }) => {
   const handleSubmit = async () => {
     const { normalizedVals, didChange } = normalizeOnboardingVals(vals);
     if (didChange) setVals(normalizedVals);
-    if (!kWelcomeGroups.every((group) => group.validate(normalizedVals, { hasAi }))) {
+    const submitValidationContext = getValidationContext(normalizedVals);
+    const invalidGroup = findFirstInvalidWelcomeGroup(
+      normalizedVals,
+      submitValidationContext,
+    );
+    if (invalidGroup) {
+      setFormError(
+        getWelcomeGroupError(
+          invalidGroup.id,
+          normalizedVals,
+          submitValidationContext,
+        ),
+      );
+      setSetupError(null);
+      setStep(kWelcomeGroups.findIndex((group) => group.id === invalidGroup.id));
       return;
     }
     if (loading) return;
@@ -309,7 +394,17 @@ export const useWelcome = ({ onComplete }) => {
   const goNext = async () => {
     const { normalizedVals, didChange } = normalizeOnboardingVals(vals);
     if (didChange) setVals(normalizedVals);
-    if (!activeGroup || !activeGroup.validate(normalizedVals, { hasAi })) return;
+    if (!activeGroup) return;
+    const stepValidationContext = getValidationContext(normalizedVals);
+    const stepValidationError = getWelcomeGroupError(
+      activeGroup.id,
+      normalizedVals,
+      stepValidationContext,
+    );
+    if (stepValidationError) {
+      setFormError(stepValidationError);
+      return;
+    }
     setFormError(null);
     if (activeGroup.id === "github") {
       const githubFlow = normalizedVals._GITHUB_FLOW || kGithubFlowFresh;
@@ -318,6 +413,19 @@ export const useWelcome = ({ onComplete }) => {
           ? kGithubTargetRepoModeCreate
           : normalizedVals._GITHUB_TARGET_REPO_MODE ||
             kGithubTargetRepoModeCreate;
+      const { sourceImportAlreadyApplied, sourceRepoChangedAfterImport } =
+        getImportReuseState({
+          githubFlow,
+          importApplied: normalizedVals[kImportAppliedKey],
+          sourceRepo: normalizedVals._GITHUB_SOURCE_REPO,
+          importedSourceRepo: normalizedVals[kImportedSourceRepoKey],
+        });
+      if (sourceRepoChangedAfterImport) {
+        setFormError(
+          "The source repo has already been imported into this setup. You can still change the target repo, but changing the source repo requires restarting onboarding.",
+        );
+        return;
+      }
       const targetVerifyMode =
         targetRepoMode === kGithubTargetRepoModeExistingEmpty
           ? kRepoModeExisting
@@ -327,9 +435,11 @@ export const useWelcome = ({ onComplete }) => {
           ? normalizedVals._GITHUB_SOURCE_REPO
           : normalizedVals.GITHUB_WORKSPACE_REPO;
       setGithubStepLoading(true);
-      clearPlaceholderReview();
+      if (!sourceImportAlreadyApplied) {
+        clearPlaceholderReview();
+      }
       try {
-        if (githubFlow === kGithubFlowImport) {
+        if (githubFlow === kGithubFlowImport && !sourceImportAlreadyApplied) {
           const sourceResult = await verifyGithubOnboardingRepo(
             sourceRepo,
             normalizedVals.GITHUB_TOKEN,
@@ -451,10 +561,16 @@ export const useWelcome = ({ onComplete }) => {
       const nextPlaceholderReview = normalizePlaceholderReview(
         result.placeholderReview,
       );
+      const importedSourceRepo =
+        vals._GITHUB_FLOW === kGithubFlowImport
+          ? normalizeGithubRepoInput(vals._GITHUB_SOURCE_REPO)
+          : "";
       setVals((prev) => ({
         ...prev,
         ...approvedImportVals,
         ...(result.preFill || {}),
+        [kImportAppliedKey]: true,
+        [kImportedSourceRepoKey]: importedSourceRepo,
         [kImportPlaceholderReviewKey]: nextPlaceholderReview,
         [kImportPlaceholderSkipConfirmedKey]: false,
       }));
@@ -540,17 +656,16 @@ export const useWelcome = ({ onComplete }) => {
       importScanResult,
       importScanning,
       importError,
+      importApplied,
       selectedProvider,
       modelOptions,
       canToggleFullCatalog,
       visibleAiFieldKeys,
       hasAi,
-      allValid,
       isPreStep,
       isSetupStep,
       isPairingStep,
       activeGroup,
-      currentGroupValid,
       selectedPairingChannel,
       placeholderReview,
       isImportStep,

package/lib/public/js/hooks/use-app-shell-controller.js

@@ -5,6 +5,7 @@ import {
   fetchAuthStatus,
   fetchAlphaclawVersion,
   updateAlphaclaw,
+  waitForAlphaclawRestart,
   fetchRestartStatus,
   dismissRestartStatus,
   restartGateway,
@@ -25,6 +26,7 @@ export const useAppShellController = ({ location = "" } = {}) => {
   const [acLatest, setAcLatest] = useState(null);
   const [acHasUpdate, setAcHasUpdate] = useState(false);
   const [acUpdating, setAcUpdating] = useState(false);
+  const [acRestarting, setAcRestarting] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
   const [browseRestartRequired, setBrowseRestartRequired] = useState(false);
   const [restartingGateway, setRestartingGateway] = useState(false);
@@ -32,6 +34,7 @@ export const useAppShellController = ({ location = "" } = {}) => {
   const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
   const [statusPollingGraceElapsed, setStatusPollingGraceElapsed] = useState(false);
   const [openclawUpdateInProgress, setOpenclawUpdateInProgress] = useState(false);
+  const [openclawRestarting, setOpenclawRestarting] = useState(false);
   const [statusStreamConnected, setStatusStreamConnected] = useState(false);
   const [statusStreamStatus, setStatusStreamStatus] = useState(null);
   const [statusStreamWatchdog, setStatusStreamWatchdog] = useState(null);
@@ -241,17 +244,25 @@ export const useAppShellController = ({ location = "" } = {}) => {
       return { ok: false, error: "OpenClaw update already in progress" };
     }
     setOpenclawUpdateInProgress(true);
+    setOpenclawRestarting(false);
     try {
       const data = await updateOpenclaw();
+      if (data?.ok && data?.restarting) {
+        setOpenclawRestarting(true);
+        await waitForAlphaclawRestart();
+        window.location.reload();
+        return { ...data, restartHandled: true };
+      }
+      setOpenclawUpdateInProgress(false);
+      setOpenclawRestarting(false);
       return data;
-    } finally {
+    } catch (err) {
+      const message = err.message || "Could not update OpenClaw";
       setOpenclawUpdateInProgress(false);
-      refreshSharedStatuses();
-      setTimeout(refreshSharedStatuses, 1200);
-      setTimeout(refreshSharedStatuses, 3500);
-      setTimeout(refreshRestartStatus, 1200);
+      setOpenclawRestarting(false);
+      return { ok: false, error: message };
     }
-  }, [openclawUpdateInProgress, refreshRestartStatus, refreshSharedStatuses]);
+  }, [openclawUpdateInProgress]);
 
   const handleOpenclawVersionActionComplete = useCallback(
     ({ type }) => {
@@ -263,20 +274,31 @@ export const useAppShellController = ({ location = "" } = {}) => {
   );
 
   const handleAcUpdate = useCallback(async () => {
-    if (acUpdating) return;
+    if (acUpdating) {
+      return { ok: false, error: "AlphaClaw update already in progress" };
+    }
     setAcUpdating(true);
+    setAcRestarting(false);
     try {
       const data = await updateAlphaclaw();
       if (data.ok) {
         showToast("AlphaClaw updated — restarting...", "success");
-        setTimeout(() => window.location.reload(), 5000);
+        setAcRestarting(true);
+        await waitForAlphaclawRestart();
+        window.location.reload();
+        return data;
       } else {
         showToast(data.error || "AlphaClaw update failed", "error");
         setAcUpdating(false);
+        setAcRestarting(false);
+        return data;
       }
     } catch (err) {
-      showToast(err.message || "Could not update AlphaClaw", "error");
+      const message = err.message || "Could not update AlphaClaw";
+      showToast(message, "error");
       setAcUpdating(false);
+      setAcRestarting(false);
+      return { ok: false, error: message };
     }
   }, [acUpdating]);
 
@@ -296,12 +318,14 @@ export const useAppShellController = ({ location = "" } = {}) => {
     state: {
       acHasUpdate,
       acLatest,
+      acRestarting,
       acUpdating,
       acVersion,
       authEnabled,
       gatewayRestartSignal,
       isAnyRestartRequired,
       onboarded,
+      openclawRestarting,
       openclawUpdateInProgress,
       restartingGateway,
       sharedDoctorStatus,