@chrysb/alphaclaw 0.3.5-beta.0 → 0.4.0

package/lib/public/js/components/file-viewer/use-file-viewer.js

@@ -0,0 +1,471 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import { marked } from "https://esm.sh/marked";
+import { deleteBrowseFile, restoreBrowseFile, saveFileContent } from "../../lib/api.js";
+import {
+  getFileSyntaxKind,
+  highlightEditorLines,
+  parseFrontmatter,
+} from "../../lib/syntax-highlighters/index.js";
+import {
+  clearStoredFileDraft,
+  updateDraftIndex,
+  writeStoredFileDraft,
+} from "../../lib/browse-draft-state.js";
+import {
+  kLockedBrowsePaths,
+  kProtectedBrowsePaths,
+  matchesBrowsePolicyPath,
+  normalizeBrowsePolicyPath,
+} from "../../lib/browse-file-policies.js";
+import { showToast } from "../toast.js";
+import { kFileViewerModeStorageKey, kLoadingIndicatorDelayMs } from "./constants.js";
+import { readStoredFileViewerMode, writeStoredEditorSelection } from "./storage.js";
+import { parsePathSegments } from "./utils.js";
+import { useScrollSync } from "./scroll-sync.js";
+import { useFileLoader } from "./use-file-loader.js";
+import { useFileDiff } from "./use-file-diff.js";
+import { useFileViewerDraftSync } from "./use-file-viewer-draft-sync.js";
+import { useFileViewerHotkeys } from "./use-file-viewer-hotkeys.js";
+import { useEditorSelectionRestore } from "./use-editor-selection-restore.js";
+
+export const useFileViewer = ({
+  filePath = "",
+  isPreviewOnly = false,
+  browseView = "edit",
+  onRequestClearSelection = () => {},
+  onRequestEdit = () => {},
+}) => {
+  const normalizedPath = String(filePath || "").trim();
+  const normalizedPolicyPath = normalizeBrowsePolicyPath(normalizedPath);
+  const [content, setContent] = useState("");
+  const [initialContent, setInitialContent] = useState("");
+  const [fileKind, setFileKind] = useState("text");
+  const [imageDataUrl, setImageDataUrl] = useState("");
+  const [audioDataUrl, setAudioDataUrl] = useState("");
+  const [sqliteSummary, setSqliteSummary] = useState(null);
+  const [sqliteSelectedTable, setSqliteSelectedTable] = useState("");
+  const [sqliteTableOffset, setSqliteTableOffset] = useState(0);
+  const [sqliteTableLoading, setSqliteTableLoading] = useState(false);
+  const [sqliteTableError, setSqliteTableError] = useState("");
+  const [sqliteTableData, setSqliteTableData] = useState(null);
+  const [viewMode, setViewMode] = useState(readStoredFileViewerMode);
+  const [loading, setLoading] = useState(false);
+  const [showDelayedLoadingSpinner, setShowDelayedLoadingSpinner] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [restoring, setRestoring] = useState(false);
+  const [error, setError] = useState("");
+  const [isFolderPath, setIsFolderPath] = useState(false);
+  const [frontmatterCollapsed, setFrontmatterCollapsed] = useState(false);
+  const [externalChangeNoticeShown, setExternalChangeNoticeShown] = useState(false);
+  const [protectedEditBypassPaths, setProtectedEditBypassPaths] = useState(() => new Set());
+  const editorLineNumbersRef = useRef(null);
+  const editorHighlightRef = useRef(null);
+  const editorTextareaRef = useRef(null);
+  const previewRef = useRef(null);
+  const editorLineNumberRowRefs = useRef([]);
+  const editorHighlightLineRefs = useRef([]);
+
+  const hasSelectedPath = normalizedPath.length > 0;
+  const isImageFile = fileKind === "image";
+  const isAudioFile = fileKind === "audio";
+  const isSqliteFile = fileKind === "sqlite";
+  const canEditFile =
+    hasSelectedPath && !isFolderPath && !isPreviewOnly && !isImageFile && !isAudioFile && !isSqliteFile;
+  const isDiffView = String(browseView || "edit") === "diff";
+
+  const { viewScrollRatioRef, handleEditorScroll, handlePreviewScroll, handleChangeViewMode } =
+    useScrollSync({
+      viewMode,
+      setViewMode,
+      previewRef,
+      editorTextareaRef,
+      editorLineNumbersRef,
+      editorHighlightRef,
+    });
+
+  const { loadedFilePathRef, restoredSelectionPathRef } = useFileLoader({
+    hasSelectedPath,
+    normalizedPath,
+    isDiffView,
+    isSqliteFile,
+    sqliteSelectedTable,
+    sqliteTableOffset,
+    canEditFile,
+    isFolderPath,
+    loading,
+    saving,
+    initialContent,
+    isDirty: canEditFile && content !== initialContent,
+    setLoading,
+    setContent,
+    setInitialContent,
+    setFileKind,
+    setImageDataUrl,
+    setAudioDataUrl,
+    setSqliteSummary,
+    setSqliteSelectedTable,
+    setSqliteTableOffset,
+    setSqliteTableLoading,
+    setSqliteTableError,
+    setSqliteTableData,
+    setError,
+    setIsFolderPath,
+    setExternalChangeNoticeShown,
+    externalChangeNoticeShown,
+    viewScrollRatioRef,
+  });
+
+  const { diffLoading, diffError, diffContent, diffStatus } = useFileDiff({
+    hasSelectedPath,
+    isDiffView,
+    isPreviewOnly,
+    normalizedPath,
+  });
+
+  const pathSegments = useMemo(() => parsePathSegments(normalizedPath), [normalizedPath]);
+  const isCurrentFileLoaded = loadedFilePathRef.current === normalizedPath;
+  const renderContent = isCurrentFileLoaded ? content : "";
+  const renderInitialContent = isCurrentFileLoaded ? initialContent : "";
+  const isDirty = canEditFile && renderContent !== renderInitialContent;
+  const isLockedFile =
+    canEditFile && matchesBrowsePolicyPath(kLockedBrowsePaths, normalizedPolicyPath);
+  const isProtectedFile =
+    canEditFile &&
+    !isLockedFile &&
+    matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedPolicyPath);
+  const isProtectedLocked = isProtectedFile && !protectedEditBypassPaths.has(normalizedPolicyPath);
+  const isEditBlocked = isLockedFile || isProtectedLocked;
+  const isDeleteBlocked = isLockedFile || isProtectedFile;
+  const canDeleteFile =
+    hasSelectedPath &&
+    !isFolderPath &&
+    !isPreviewOnly &&
+    !isDiffView &&
+    !deleting &&
+    !saving &&
+    !isDeleteBlocked;
+  const syntaxKind = useMemo(() => getFileSyntaxKind(normalizedPath), [normalizedPath]);
+  const isMarkdownFile = syntaxKind === "markdown";
+  const shouldUseHighlightedEditor = syntaxKind !== "plain";
+  const parsedFrontmatter = useMemo(
+    () => (isMarkdownFile ? parseFrontmatter(renderContent) : { entries: [], body: renderContent }),
+    [renderContent, isMarkdownFile],
+  );
+  const highlightedEditorLines = useMemo(
+    () => (shouldUseHighlightedEditor ? highlightEditorLines(renderContent, syntaxKind) : []),
+    [renderContent, shouldUseHighlightedEditor, syntaxKind],
+  );
+  const editorLineNumbers = useMemo(() => {
+    const lineCount = String(renderContent || "").split("\n").length;
+    return Array.from({ length: lineCount }, (_, index) => index + 1);
+  }, [renderContent]);
+  const previewHtml = useMemo(
+    () =>
+      isMarkdownFile
+        ? marked.parse(parsedFrontmatter.body || "", {
+            gfm: true,
+            breaks: true,
+          })
+        : "",
+    [parsedFrontmatter.body, isMarkdownFile],
+  );
+
+  const syncEditorLineNumberHeights = useCallback(() => {
+    if (!shouldUseHighlightedEditor || viewMode !== "edit") return;
+    const numberRows = editorLineNumberRowRefs.current;
+    const highlightRows = editorHighlightLineRefs.current;
+    const rowCount = Math.min(numberRows.length, highlightRows.length);
+    for (let index = 0; index < rowCount; index += 1) {
+      const numberRow = numberRows[index];
+      const highlightRow = highlightRows[index];
+      if (!numberRow || !highlightRow) continue;
+      numberRow.style.height = `${highlightRow.offsetHeight}px`;
+    }
+  }, [shouldUseHighlightedEditor, viewMode]);
+
+  useEffect(() => {
+    syncEditorLineNumberHeights();
+  }, [content, syncEditorLineNumberHeights]);
+
+  useEffect(() => {
+    if (!shouldUseHighlightedEditor || viewMode !== "edit") return () => {};
+    const onResize = () => syncEditorLineNumberHeights();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [shouldUseHighlightedEditor, viewMode, syncEditorLineNumberHeights]);
+
+  useEffect(() => {
+    if (!isMarkdownFile && viewMode !== "edit") {
+      setViewMode("edit");
+    }
+  }, [isMarkdownFile, viewMode]);
+
+  useEffect(() => {
+    setProtectedEditBypassPaths(new Set());
+  }, [normalizedPath]);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(kFileViewerModeStorageKey, viewMode);
+    } catch {}
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (!loading) {
+      setShowDelayedLoadingSpinner(false);
+      return () => {};
+    }
+    const timer = window.setTimeout(() => {
+      setShowDelayedLoadingSpinner(true);
+    }, kLoadingIndicatorDelayMs);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
+  useFileViewerDraftSync({
+    loadedFilePathRef,
+    normalizedPath,
+    canEditFile,
+    hasSelectedPath,
+    loading,
+    content,
+    initialContent,
+  });
+
+  useEditorSelectionRestore({
+    canEditFile,
+    isEditBlocked,
+    loading,
+    hasSelectedPath,
+    normalizedPath,
+    loadedFilePathRef,
+    restoredSelectionPathRef,
+    viewMode,
+    content,
+    editorTextareaRef,
+    editorLineNumbersRef,
+    editorHighlightRef,
+    viewScrollRatioRef,
+  });
+
+  const handleSave = useCallback(async () => {
+    if (!canEditFile || saving || !isDirty || isEditBlocked) return;
+    setSaving(true);
+    setError("");
+    try {
+      await saveFileContent(normalizedPath, content);
+      setInitialContent(content);
+      setExternalChangeNoticeShown(false);
+      clearStoredFileDraft(normalizedPath);
+      updateDraftIndex(normalizedPath, false, {
+        dispatchEvent: (event) => window.dispatchEvent(event),
+      });
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: normalizedPath },
+        }),
+      );
+      showToast("Saved", "success");
+    } catch (saveError) {
+      const message = saveError.message || "Could not save file";
+      setError(message);
+      showToast(message, "error");
+    } finally {
+      setSaving(false);
+    }
+  }, [canEditFile, saving, isDirty, isEditBlocked, normalizedPath, content]);
+
+  const handleDelete = useCallback(async () => {
+    if (!canDeleteFile) return;
+    setDeleting(true);
+    setError("");
+    try {
+      const data = await deleteBrowseFile(normalizedPath);
+      const deletedPath = String(data?.path || normalizedPath);
+      setExternalChangeNoticeShown(false);
+      clearStoredFileDraft(normalizedPath);
+      updateDraftIndex(normalizedPath, false, {
+        dispatchEvent: (event) => window.dispatchEvent(event),
+      });
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: deletedPath },
+        }),
+      );
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-deleted", {
+          detail: { path: deletedPath },
+        }),
+      );
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      showToast("File deleted", "success");
+      onRequestClearSelection();
+    } catch (deleteError) {
+      const message = deleteError.message || "Could not delete file";
+      setError(message);
+      if (/path is not a file/i.test(message)) {
+        showToast("Only files can be deleted", "warning");
+        onRequestClearSelection();
+      } else {
+        showToast(message, "error");
+      }
+    } finally {
+      setDeleting(false);
+    }
+  }, [canDeleteFile, normalizedPath, onRequestClearSelection]);
+
+  const handleRestore = useCallback(async () => {
+    if (!isDiffView || !diffStatus?.isDeleted || restoring) return;
+    setRestoring(true);
+    try {
+      const data = await restoreBrowseFile(normalizedPath);
+      const restoredPath = String(data?.path || normalizedPath);
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: restoredPath },
+        }),
+      );
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      showToast("File restored", "success");
+      onRequestEdit(restoredPath);
+    } catch (restoreError) {
+      showToast(restoreError.message || "Could not restore file", "error");
+    } finally {
+      setRestoring(false);
+    }
+  }, [
+    diffStatus?.isDeleted,
+    isDiffView,
+    normalizedPath,
+    onRequestEdit,
+    restoring,
+  ]);
+
+  useFileViewerHotkeys({
+    canEditFile,
+    isPreviewOnly,
+    isDiffView,
+    viewMode,
+    handleSave,
+  });
+
+  const handleEditProtectedFile = () => {
+    if (!normalizedPolicyPath) return;
+    setProtectedEditBypassPaths((previousPaths) => {
+      const nextPaths = new Set(previousPaths);
+      nextPaths.add(normalizedPolicyPath);
+      return nextPaths;
+    });
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        const textareaElement = editorTextareaRef.current;
+        if (!textareaElement) return;
+        if (textareaElement.disabled || textareaElement.readOnly) return;
+        textareaElement.focus();
+      });
+    });
+  };
+
+  const handleContentInput = (event) => {
+    if (isEditBlocked || isPreviewOnly) return;
+    const nextContent = event.target.value;
+    setContent(nextContent);
+    if (hasSelectedPath && canEditFile) {
+      writeStoredEditorSelection(normalizedPath, {
+        start: event.target.selectionStart,
+        end: event.target.selectionEnd,
+      });
+    }
+    if (hasSelectedPath && canEditFile) {
+      writeStoredFileDraft(normalizedPath, nextContent);
+      updateDraftIndex(normalizedPath, nextContent !== initialContent, {
+        dispatchEvent: (event) => window.dispatchEvent(event),
+      });
+    }
+  };
+
+  const handleEditorSelectionChange = () => {
+    if (!hasSelectedPath || !canEditFile || loading) return;
+    const textareaElement = editorTextareaRef.current;
+    if (!textareaElement) return;
+    writeStoredEditorSelection(normalizedPath, {
+      start: textareaElement.selectionStart,
+      end: textareaElement.selectionEnd,
+    });
+  };
+
+  return {
+    state: {
+      hasSelectedPath,
+      isPreviewOnly,
+      loading,
+      saving,
+      deleting,
+      restoring,
+      showDelayedLoadingSpinner,
+      error,
+      isFolderPath,
+      isImageFile,
+      imageDataUrl,
+      isAudioFile,
+      audioDataUrl,
+      isSqliteFile,
+      sqliteSummary,
+      sqliteSelectedTable,
+      sqliteTableOffset,
+      sqliteTableLoading,
+      sqliteTableError,
+      sqliteTableData,
+      isDiffView,
+      diffLoading,
+      diffError,
+      diffContent,
+      diffStatus,
+      isMarkdownFile,
+      frontmatterCollapsed,
+      previewHtml,
+      viewMode,
+      renderContent,
+    },
+    derived: {
+      pathSegments,
+      isDirty,
+      canEditFile,
+      canDeleteFile,
+      isDeleteBlocked,
+      isEditBlocked,
+      isLockedFile,
+      isProtectedFile,
+      isProtectedLocked,
+      shouldUseHighlightedEditor,
+      parsedFrontmatter,
+      highlightedEditorLines,
+      editorLineNumbers,
+    },
+    refs: {
+      previewRef,
+      editorLineNumbersRef,
+      editorLineNumberRowRefs,
+      editorHighlightRef,
+      editorHighlightLineRefs,
+      editorTextareaRef,
+    },
+    actions: {
+      setFrontmatterCollapsed,
+      setSqliteSelectedTable,
+      setSqliteTableOffset,
+      handleChangeViewMode,
+      handleSave,
+      handleDelete,
+      handleRestore,
+      handleEditProtectedFile,
+      handleContentInput,
+      handleEditorScroll,
+      handlePreviewScroll,
+      handleEditorSelectionChange,
+    },
+    context: {
+      normalizedPath,
+    },
+  };
+};

package/lib/public/js/components/file-viewer/utils.js

@@ -0,0 +1,11 @@
+export const parsePathSegments = (inputPath) =>
+  String(inputPath || "")
+    .split("/")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+export const clampSelectionIndex = (value, maxValue) => {
+  const numericValue = Number.parseInt(String(value ?? ""), 10);
+  if (!Number.isFinite(numericValue)) return 0;
+  return Math.max(0, Math.min(maxValue, numericValue));
+};

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

@@ -24,7 +24,14 @@ const formatDuration = (ms) => {
   return `${seconds}s`;
 };
 
-function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
+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);
@@ -51,6 +58,10 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
   })();
   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;
 
@@ -60,9 +71,9 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
 
   useEffect(() => {
     let active = true;
-    const load = async () => {
+    const load = async (refresh = false) => {
       try {
-        const data = await fetchVersion(false);
+        const data = await fetchVersion(refresh);
         if (!active) return;
         setVersion(data.currentVersion || currentVersion || null);
         setLatestVersion(data.latestVersion || null);
@@ -73,11 +84,30 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
         setError(err.message || "Could not check updates");
       }
     };
-    load();
+    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) {
@@ -88,16 +118,18 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
   }, [effectiveHasUpdate, effectiveLatestVersion]);
 
   const runAction = async () => {
-    if (checking) return;
+    const isUpdateAction = !!effectiveHasUpdate;
+    const busy = isUpdateActionActive ? checking || updateInProgress : checking;
+    if (busy) return;
     setChecking(true);
     setError("");
     try {
-      const data = effectiveHasUpdate ? await applyUpdate() : await fetchVersion(true);
+      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 (effectiveHasUpdate) {
+      if (isUpdateAction) {
         if (!data.ok) {
           showToast(data.error || `${label} update failed`, "error");
         } else if (data.updated || data.restarting) {
@@ -118,21 +150,33 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
       } else {
         showToast(`${label} is up to date`, "success");
       }
+      await onActionComplete({
+        type: isUpdateAction ? "update" : "check",
+        ok: !!data?.ok,
+        result: data,
+      });
     } catch (err) {
       setError(
         err.message ||
-          (effectiveHasUpdate ? `Could not update ${label}` : "Could not check updates"),
+          (isUpdateAction ? `Could not update ${label}` : "Could not check updates"),
       );
       showToast(
-        effectiveHasUpdate ? `Could not update ${label}` : "Could not check updates",
+        isUpdateAction ? `Could not update ${label}` : "Could not check updates",
         "error",
       );
+      await onActionComplete({
+        type: isUpdateAction ? "update" : "check",
+        ok: false,
+        error: err,
+      });
+    } finally {
+      setChecking(false);
     }
-    setChecking(false);
   };
 
   const handleAction = () => {
-    if (checking) return;
+    const busy = isUpdateActionActive ? checking || updateInProgress : checking;
+    if (busy) return;
     if (effectiveHasUpdate && effectiveLatestVersion && !hasViewedChangelog) {
       setConfirmWithoutChangelogOpen(true);
       return;
@@ -145,6 +189,10 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
     runAction();
   };
 
+  const updateButtonLoading = isUpdateActionActive
+    ? checking || updateInProgress
+    : checking;
+
   return html`
     <div class="flex items-center justify-between gap-3">
       <div class="min-w-0">
@@ -175,24 +223,24 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
           ? html`
               <${UpdateActionButton}
                 onClick=${handleAction}
-                loading=${checking}
-                warning=${effectiveHasUpdate}
-                idleLabel=${effectiveHasUpdate
-                  ? `Update to ${effectiveLatestVersion || "latest"}`
+                loading=${updateButtonLoading}
+                warning=${isUpdateActionActive}
+                idleLabel=${isUpdateActionActive
+                  ? updateIdleLabel
                   : "Check updates"}
-                loadingLabel=${effectiveHasUpdate ? "Updating..." : "Checking..."}
+                loadingLabel=${isUpdateActionActive ? "Updating..." : "Checking..."}
                 className="hidden md:inline-flex"
               />
             `
           : html`
               <${UpdateActionButton}
                 onClick=${handleAction}
-                loading=${checking}
-                warning=${effectiveHasUpdate}
-                idleLabel=${effectiveHasUpdate
-                  ? `Update to ${effectiveLatestVersion || "latest"}`
+                loading=${updateButtonLoading}
+                warning=${isUpdateActionActive}
+                idleLabel=${isUpdateActionActive
+                  ? updateIdleLabel
                   : "Check updates"}
-                loadingLabel=${effectiveHasUpdate ? "Updating..." : "Checking..."}
+                loadingLabel=${isUpdateActionActive ? "Updating..." : "Checking..."}
               />
             `}
       </div>
@@ -209,9 +257,9 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
         >
         <${UpdateActionButton}
           onClick=${handleAction}
-          loading=${checking}
-          warning=${effectiveHasUpdate}
-          idleLabel=${`Update to ${effectiveLatestVersion || "latest"}`}
+          loading=${updateButtonLoading}
+          warning=${isUpdateActionActive}
+          idleLabel=${updateIdleLabel}
           loadingLabel="Updating..."
           className="flex-1 h-9 px-3"
         />
@@ -228,9 +276,9 @@ function VersionRow({ label, currentVersion, fetchVersion, applyUpdate }) {
       onConfirm=${handleConfirmWithoutChangelog}
     />
   `;
-}
+};
 
-export function Gateway({
+export const Gateway = ({
   status,
   openclawVersion,
   restarting = false,
@@ -239,7 +287,10 @@ export function Gateway({
   onOpenWatchdog,
   onRepair,
   repairing = false,
-}) {
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = updateOpenclaw,
+}) => {
   const [nowMs, setNowMs] = useState(() => Date.now());
   const isRunning = status === "running" && !restarting;
   const dotClass = isRunning
@@ -357,8 +408,10 @@ export function Gateway({
         label="OpenClaw"
         currentVersion=${openclawVersion}
         fetchVersion=${fetchOpenclawVersion}
-        applyUpdate=${updateOpenclaw}
+        applyUpdate=${onOpenclawUpdate}
+        updateInProgress=${openclawUpdateInProgress}
+        onActionComplete=${onOpenclawVersionActionComplete}
       />
     </div>
   </div>`;
-}
+};