@chrysb/alphaclaw 0.3.4-beta.0 → 0.3.4

package/lib/public/js/components/file-tree.js

@@ -1,5 +1,11 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchBrowseTree } from "../lib/api.js";
 import {
@@ -23,6 +29,7 @@ const html = htm.bind(h);
 const kTreeIndentPx = 9;
 const kFolderBasePaddingPx = 10;
 const kFileBasePaddingPx = 14;
+const kTreeRefreshIntervalMs = 5000;
 const kCollapsedFoldersStorageKey = "alphaclaw.browse.collapsedFolders";
 const kLegacyCollapsedFoldersStorageKey = "alphaclawBrowseCollapsedFolders";
 
@@ -237,34 +244,55 @@ export const FileTree = ({
   const [searchQuery, setSearchQuery] = useState("");
   const [searchActivePath, setSearchActivePath] = useState("");
   const searchInputRef = useRef(null);
+  const treeSignatureRef = useRef("");
 
-  useEffect(() => {
-    let active = true;
-    const loadTree = async () => {
-      setLoading(true);
-      setError("");
-      try {
-        const data = await fetchBrowseTree();
-        if (!active) return;
-        setTreeRoot(data.root || null);
-        setCollapsedPaths((previousPaths) => {
-          if (previousPaths instanceof Set) return previousPaths;
-          const nextPaths = new Set();
-          collectFolderPaths(data.root, nextPaths);
-          return nextPaths;
-        });
-      } catch (loadError) {
-        if (!active) return;
+  const loadTree = useCallback(async ({ showLoading = false } = {}) => {
+    if (showLoading) setLoading(true);
+    if (showLoading) setError("");
+    try {
+      const data = await fetchBrowseTree();
+      const nextRoot = data.root || null;
+      const nextSignature = JSON.stringify(nextRoot || {});
+      if (treeSignatureRef.current !== nextSignature) {
+        treeSignatureRef.current = nextSignature;
+        setTreeRoot(nextRoot);
+      }
+      setCollapsedPaths((previousPaths) => {
+        if (previousPaths instanceof Set) return previousPaths;
+        const nextPaths = new Set();
+        collectFolderPaths(nextRoot, nextPaths);
+        return nextPaths;
+      });
+      if (showLoading) setError("");
+    } catch (loadError) {
+      if (showLoading) {
         setError(loadError.message || "Could not load file tree");
-      } finally {
-        if (active) setLoading(false);
       }
+    } finally {
+      if (showLoading) setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadTree({ showLoading: true });
+  }, [loadTree]);
+
+  useEffect(() => {
+    const refreshTree = () => {
+      loadTree({ showLoading: false });
     };
-    loadTree();
+    const refreshInterval = window.setInterval(
+      refreshTree,
+      kTreeRefreshIntervalMs,
+    );
+    window.addEventListener("alphaclaw:browse-file-saved", refreshTree);
+    window.addEventListener("alphaclaw:browse-tree-refresh", refreshTree);
     return () => {
-      active = false;
+      window.clearInterval(refreshInterval);
+      window.removeEventListener("alphaclaw:browse-file-saved", refreshTree);
+      window.removeEventListener("alphaclaw:browse-tree-refresh", refreshTree);
     };
-  }, []);
+  }, [loadTree]);
 
   const normalizedSearchQuery = String(searchQuery || "").trim().toLowerCase();
   const rootChildren = useMemo(() => {

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

@@ -30,8 +30,10 @@ import { showToast } from "./toast.js";
 const html = htm.bind(h);
 const kFileViewerModeStorageKey = "alphaclaw.browse.fileViewerMode";
 const kLegacyFileViewerModeStorageKey = "alphaclawBrowseFileViewerMode";
+const kEditorSelectionStorageKey = "alphaclaw.browse.editorSelectionByPath";
 const kProtectedBrowsePaths = new Set(["openclaw.json", "devices/paired.json"]);
 const kLoadingIndicatorDelayMs = 1000;
+const kFileRefreshIntervalMs = 5000;
 
 const parsePathSegments = (inputPath) =>
   String(inputPath || "")
@@ -60,6 +62,52 @@ const readStoredFileViewerMode = () => {
   }
 };
 
+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));
+};
+
+const readStoredEditorSelection = (filePath) => {
+  const safePath = String(filePath || "").trim();
+  if (!safePath) return null;
+  try {
+    const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);
+    if (!rawStorageValue) return null;
+    const parsedStorageValue = JSON.parse(rawStorageValue);
+    if (!parsedStorageValue || typeof parsedStorageValue !== "object") return null;
+    const selection = parsedStorageValue[safePath];
+    if (!selection || typeof selection !== "object") return null;
+    return {
+      start: selection.start,
+      end: selection.end,
+    };
+  } catch {
+    return null;
+  }
+};
+
+const writeStoredEditorSelection = (filePath, selection) => {
+  const safePath = String(filePath || "").trim();
+  if (!safePath || !selection || typeof selection !== "object") return;
+  try {
+    const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);
+    const parsedStorageValue = rawStorageValue ? JSON.parse(rawStorageValue) : {};
+    const nextStorageValue =
+      parsedStorageValue && typeof parsedStorageValue === "object"
+        ? parsedStorageValue
+        : {};
+    nextStorageValue[safePath] = {
+      start: selection.start,
+      end: selection.end,
+    };
+    window.localStorage.setItem(
+      kEditorSelectionStorageKey,
+      JSON.stringify(nextStorageValue),
+    );
+  } catch {}
+};
+
 
 export const FileViewer = ({
   filePath = "",
@@ -77,6 +125,7 @@ export const FileViewer = ({
   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(),
   );
@@ -87,6 +136,8 @@ export const FileViewer = ({
   const viewScrollRatioRef = useRef(0);
   const isSyncingScrollRef = useRef(false);
   const loadedFilePathRef = useRef("");
+  const restoredSelectionPathRef = useRef("");
+  const fileRefreshInFlightRef = useRef(false);
   const editorLineNumberRowRefs = useRef([]);
   const editorHighlightLineRefs = useRef([]);
 
@@ -186,6 +237,7 @@ export const FileViewer = ({
   useEffect(() => {
     let active = true;
     loadedFilePathRef.current = "";
+    restoredSelectionPathRef.current = "";
     if (!hasSelectedPath) {
       setContent("");
       setInitialContent("");
@@ -214,8 +266,10 @@ export const FileViewer = ({
           { dispatchEvent: (event) => window.dispatchEvent(event) },
         );
         setInitialContent(nextContent);
+        setExternalChangeNoticeShown(false);
         viewScrollRatioRef.current = 0;
         loadedFilePathRef.current = normalizedPath;
+        restoredSelectionPathRef.current = "";
       } catch (loadError) {
         if (!active) return;
         const message = loadError.message || "Could not load file";
@@ -225,6 +279,7 @@ export const FileViewer = ({
           setIsFolderPath(true);
           setError("");
           loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
           return;
         }
         setError(message);
@@ -238,6 +293,60 @@ export const FileViewer = ({
     };
   }, [hasSelectedPath, normalizedPath]);
 
+  useEffect(() => {
+    if (!hasSelectedPath || isFolderPath || !canEditFile) return () => {};
+    const refreshFromDisk = async () => {
+      if (loading || saving) return;
+      if (fileRefreshInFlightRef.current) return;
+      fileRefreshInFlightRef.current = true;
+      try {
+        const data = await fetchFileContent(normalizedPath);
+        const diskContent = data.content || "";
+        if (diskContent === initialContent) {
+          setExternalChangeNoticeShown(false);
+          return;
+        }
+        // Auto-refresh only when editor has no unsaved work.
+        if (!isDirty) {
+          setContent(diskContent);
+          setInitialContent(diskContent);
+          clearStoredFileDraft(normalizedPath);
+          updateDraftIndex(normalizedPath, false, {
+            dispatchEvent: (event) => window.dispatchEvent(event),
+          });
+          setExternalChangeNoticeShown(false);
+          window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+          return;
+        }
+        if (!externalChangeNoticeShown) {
+          showToast(
+            "This file changed on disk. Save to overwrite or reload by re-opening.",
+            "error",
+          );
+          setExternalChangeNoticeShown(true);
+        }
+      } catch {
+        // Ignore transient refresh errors to avoid interrupting editing.
+      } finally {
+        fileRefreshInFlightRef.current = false;
+      }
+    };
+    const intervalId = window.setInterval(refreshFromDisk, kFileRefreshIntervalMs);
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [
+    hasSelectedPath,
+    isFolderPath,
+    canEditFile,
+    loading,
+    saving,
+    normalizedPath,
+    initialContent,
+    isDirty,
+    externalChangeNoticeShown,
+  ]);
+
   useEffect(() => {
     if (loadedFilePathRef.current !== normalizedPath) return;
     if (!canEditFile || !hasSelectedPath || loading) return;
@@ -261,6 +370,21 @@ export const FileViewer = ({
     normalizedPath,
   ]);
 
+  useEffect(() => {
+    if (!canEditFile || loading || !hasSelectedPath) return;
+    if (loadedFilePathRef.current !== normalizedPath) return;
+    if (restoredSelectionPathRef.current === normalizedPath) return;
+    const textareaElement = editorTextareaRef.current;
+    if (!textareaElement) return;
+    const storedSelection = readStoredEditorSelection(normalizedPath);
+    restoredSelectionPathRef.current = normalizedPath;
+    if (!storedSelection) return;
+    const maxIndex = String(content || "").length;
+    const start = clampSelectionIndex(storedSelection.start, maxIndex);
+    const end = clampSelectionIndex(storedSelection.end, maxIndex);
+    textareaElement.setSelectionRange(start, Math.max(start, end));
+  }, [canEditFile, loading, hasSelectedPath, normalizedPath, content]);
+
   const handleSave = async () => {
     if (!canEditFile || saving || !isDirty || isProtectedLocked) return;
     setSaving(true);
@@ -268,6 +392,7 @@ export const FileViewer = ({
     try {
       const data = await saveFileContent(normalizedPath, content);
       setInitialContent(content);
+      setExternalChangeNoticeShown(false);
       clearStoredFileDraft(normalizedPath);
       updateDraftIndex(normalizedPath, false, {
         dispatchEvent: (event) => window.dispatchEvent(event),
@@ -304,6 +429,12 @@ export const FileViewer = ({
     if (isProtectedLocked || 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, {
@@ -312,6 +443,16 @@ export const FileViewer = ({
     }
   };
 
+  const handleEditorSelectionChange = () => {
+    if (!hasSelectedPath || !canEditFile || loading) return;
+    const textareaElement = editorTextareaRef.current;
+    if (!textareaElement) return;
+    writeStoredEditorSelection(normalizedPath, {
+      start: textareaElement.selectionStart,
+      end: textareaElement.selectionEnd,
+    });
+  };
+
   const getScrollRatio = (element) => {
     if (!element) return 0;
     const maxScrollTop = element.scrollHeight - element.clientHeight;
@@ -608,6 +749,9 @@ ${formattedValue}</pre
                             value=${content}
                             onInput=${handleContentInput}
                             onScroll=${handleEditorScroll}
+                            onSelect=${handleEditorSelectionChange}
+                            onKeyUp=${handleEditorSelectionChange}
+                            onClick=${handleEditorSelectionChange}
                             spellcheck=${false}
                             autocorrect="off"
                             autocapitalize="off"
@@ -676,6 +820,9 @@ ${formattedValue}</pre
                                   value=${content}
                                   onInput=${handleContentInput}
                                   onScroll=${handleEditorScroll}
+                                  onSelect=${handleEditorSelectionChange}
+                                  onKeyUp=${handleEditorSelectionChange}
+                                  onClick=${handleEditorSelectionChange}
                                   readonly=${isProtectedLocked || isPreviewOnly}
                                   spellcheck=${false}
                                   autocorrect="off"
@@ -695,6 +842,9 @@ ${formattedValue}</pre
                                 value=${content}
                                 onInput=${handleContentInput}
                                 onScroll=${handleEditorScroll}
+                                onSelect=${handleEditorSelectionChange}
+                                onKeyUp=${handleEditorSelectionChange}
+                                onClick=${handleEditorSelectionChange}
                                 readonly=${isProtectedLocked || isPreviewOnly}
                                 spellcheck=${false}
                                 autocorrect="off"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.3.4-beta.0",
+  "version": "0.3.4",
   "publishConfig": {
     "access": "public"
   },