@chrysb/alphaclaw 0.3.3 → 0.3.4

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

@@ -22,13 +22,18 @@ import {
   writeStoredFileDraft,
 } from "../lib/browse-draft-state.js";
 import { ActionButton } from "./action-button.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { SegmentedControl } from "./segmented-control.js";
 import { SaveFillIcon } from "./icons.js";
 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 || "")
@@ -57,18 +62,70 @@ 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;
+  }
+};
 
-export const FileViewer = ({ filePath = "" }) => {
+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 = "",
+  isPreviewOnly = false,
+}) => {
   const normalizedPath = String(filePath || "").trim();
   const normalizedPolicyPath = normalizePolicyPath(normalizedPath);
   const [content, setContent] = useState("");
   const [initialContent, setInitialContent] = useState("");
   const [viewMode, setViewMode] = useState(readStoredFileViewerMode);
   const [loading, setLoading] = useState(false);
+  const [showDelayedLoadingSpinner, setShowDelayedLoadingSpinner] =
+    useState(false);
   const [saving, setSaving] = 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(),
   );
@@ -79,6 +136,8 @@ export const FileViewer = ({ filePath = "" }) => {
   const viewScrollRatioRef = useRef(0);
   const isSyncingScrollRef = useRef(false);
   const loadedFilePathRef = useRef("");
+  const restoredSelectionPathRef = useRef("");
+  const fileRefreshInFlightRef = useRef(false);
   const editorLineNumberRowRefs = useRef([]);
   const editorHighlightLineRefs = useRef([]);
 
@@ -87,7 +146,7 @@ export const FileViewer = ({ filePath = "" }) => {
     [normalizedPath],
   );
   const hasSelectedPath = normalizedPath.length > 0;
-  const canEditFile = hasSelectedPath && !isFolderPath;
+  const canEditFile = hasSelectedPath && !isFolderPath && !isPreviewOnly;
   const isDirty = canEditFile && content !== initialContent;
   const isProtectedFile =
     canEditFile && kProtectedBrowsePaths.has(normalizedPolicyPath);
@@ -164,9 +223,21 @@ export const FileViewer = ({ filePath = "" }) => {
     } catch {}
   }, [viewMode]);
 
+  useEffect(() => {
+    if (!loading) {
+      setShowDelayedLoadingSpinner(false);
+      return () => {};
+    }
+    const timer = window.setTimeout(() => {
+      setShowDelayedLoadingSpinner(true);
+    }, kLoadingIndicatorDelayMs);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
   useEffect(() => {
     let active = true;
     loadedFilePathRef.current = "";
+    restoredSelectionPathRef.current = "";
     if (!hasSelectedPath) {
       setContent("");
       setInitialContent("");
@@ -195,8 +266,10 @@ export const FileViewer = ({ filePath = "" }) => {
           { 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";
@@ -206,6 +279,7 @@ export const FileViewer = ({ filePath = "" }) => {
           setIsFolderPath(true);
           setError("");
           loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
           return;
         }
         setError(message);
@@ -219,6 +293,60 @@ export const FileViewer = ({ filePath = "" }) => {
     };
   }, [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;
@@ -242,6 +370,21 @@ export const FileViewer = ({ filePath = "" }) => {
     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);
@@ -249,6 +392,7 @@ export const FileViewer = ({ filePath = "" }) => {
     try {
       const data = await saveFileContent(normalizedPath, content);
       setInitialContent(content);
+      setExternalChangeNoticeShown(false);
       clearStoredFileDraft(normalizedPath);
       updateDraftIndex(normalizedPath, false, {
         dispatchEvent: (event) => window.dispatchEvent(event),
@@ -282,9 +426,15 @@ export const FileViewer = ({ filePath = "" }) => {
   };
 
   const handleContentInput = (event) => {
-    if (isProtectedLocked) return;
+    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, {
@@ -293,6 +443,16 @@ export const FileViewer = ({ filePath = "" }) => {
     }
   };
 
+  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;
@@ -408,22 +568,20 @@ export const FileViewer = ({ filePath = "" }) => {
             : null}
         </div>
         <div class="file-viewer-tabbar-spacer"></div>
+        ${isPreviewOnly
+          ? html`<div class="file-viewer-preview-pill">Preview</div>`
+          : null}
         ${isMarkdownFile &&
         html`
-          <div class="file-viewer-view-toggle">
-            <button
-              class=${`file-viewer-view-toggle-button ${viewMode === "edit" ? "active" : ""}`}
-              onclick=${() => handleChangeViewMode("edit")}
-            >
-              edit
-            </button>
-            <button
-              class=${`file-viewer-view-toggle-button ${viewMode === "preview" ? "active" : ""}`}
-              onclick=${() => handleChangeViewMode("preview")}
-            >
-              preview
-            </button>
-          </div>
+          <${SegmentedControl}
+            className="mr-2.5"
+            options=${[
+              { label: "edit", value: "edit" },
+              { label: "preview", value: "preview" },
+            ]}
+            value=${viewMode}
+            onChange=${handleChangeViewMode}
+          />
         `}
         <${ActionButton}
           onClick=${handleSave}
@@ -508,7 +666,13 @@ ${formattedValue}</pre
           `
         : null}
       ${loading
-        ? html`<div class="file-viewer-state">Loading file...</div>`
+        ? html`
+            <div class="file-viewer-loading-shell">
+              ${showDelayedLoadingSpinner
+                ? html`<${LoadingSpinner} className="h-4 w-4" />`
+                : null}
+            </div>
+          `
         : error
           ? html`<div class="file-viewer-state file-viewer-state-error">
               ${error}
@@ -585,6 +749,9 @@ ${formattedValue}</pre
                             value=${content}
                             onInput=${handleContentInput}
                             onScroll=${handleEditorScroll}
+                            onSelect=${handleEditorSelectionChange}
+                            onKeyUp=${handleEditorSelectionChange}
+                            onClick=${handleEditorSelectionChange}
                             spellcheck=${false}
                             autocorrect="off"
                             autocapitalize="off"
@@ -653,7 +820,10 @@ ${formattedValue}</pre
                                   value=${content}
                                   onInput=${handleContentInput}
                                   onScroll=${handleEditorScroll}
-                                  readonly=${isProtectedLocked}
+                                  onSelect=${handleEditorSelectionChange}
+                                  onKeyUp=${handleEditorSelectionChange}
+                                  onClick=${handleEditorSelectionChange}
+                                  readonly=${isProtectedLocked || isPreviewOnly}
                                   spellcheck=${false}
                                   autocorrect="off"
                                   autocapitalize="off"
@@ -672,7 +842,10 @@ ${formattedValue}</pre
                                 value=${content}
                                 onInput=${handleContentInput}
                                 onScroll=${handleEditorScroll}
-                                readonly=${isProtectedLocked}
+                                onSelect=${handleEditorSelectionChange}
+                                onKeyUp=${handleEditorSelectionChange}
+                                onClick=${handleEditorSelectionChange}
+                                readonly=${isProtectedLocked || isPreviewOnly}
                                 spellcheck=${false}
                                 autocorrect="off"
                                 autocapitalize="off"

package/lib/public/js/components/segmented-control.js

@@ -0,0 +1,33 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+/**
+ * Reusable segmented control (pill toggle).
+ *
+ * @param {Object}   props
+ * @param {Array<{label:string, value:*}>} props.options
+ * @param {*}        props.value        Currently selected value.
+ * @param {Function} props.onChange      Called with the new value on click.
+ * @param {string}   [props.className]  Extra classes on the wrapper.
+ */
+export const SegmentedControl = ({
+  options = [],
+  value,
+  onChange = () => {},
+  className = "",
+}) => html`
+  <div class=${`ac-segmented-control ${className}`}>
+    ${options.map(
+      (option) => html`
+        <button
+          class=${`ac-segmented-control-button ${option.value === value ? "active" : ""}`}
+          onclick=${() => onChange(option.value)}
+        >
+          ${option.label}
+        </button>
+      `,
+    )}
+  </div>
+`;

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

@@ -5,37 +5,26 @@ import { HomeLineIcon, FolderLineIcon } from "./icons.js";
 import { FileTree } from "./file-tree.js";
 import { UpdateActionButton } from "./update-action-button.js";
 import { SidebarGitPanel } from "./sidebar-git-panel.js";
+import { readUiSettings, writeUiSettings } from "../lib/ui-settings.js";
 
 const html = htm.bind(h);
-const kUiSettingsStorageKey = "alphaclaw.uiSettings";
-const kLegacyUiSettingsStorageKey = "alphaclawUiSettings";
 const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
 const kBrowsePanelMinHeightPx = 120;
 const kBrowseBottomMinHeightPx = 120;
 const kBrowseResizerHeightPx = 6;
 const kDefaultBrowseBottomPanelHeightPx = 160;
-const kLegacyBrowsePanelUiStorageKey = "alphaclawBrowsePanelHeightPx";
 
 const readStoredBrowseBottomPanelHeight = () => {
   try {
-    const rawSettings =
-      window.localStorage.getItem(kUiSettingsStorageKey) ||
-      window.localStorage.getItem(kLegacyUiSettingsStorageKey);
-    if (rawSettings) {
-      const parsedSettings = JSON.parse(rawSettings);
-      const fromSharedSettings = Number.parseInt(
-        String(parsedSettings?.[kBrowseBottomPanelUiSettingKey] || ""),
-        10,
-      );
-      if (Number.isFinite(fromSharedSettings) && fromSharedSettings > 0) {
-        return fromSharedSettings;
-      }
+    const settings = readUiSettings();
+    const fromSharedSettings = Number.parseInt(
+      String(settings?.[kBrowseBottomPanelUiSettingKey] || ""),
+      10,
+    );
+    if (Number.isFinite(fromSharedSettings) && fromSharedSettings > 0) {
+      return fromSharedSettings;
     }
-    const legacyRawValue = window.localStorage.getItem(kLegacyBrowsePanelUiStorageKey);
-    const parsedValue = Number.parseInt(String(legacyRawValue || ""), 10);
-    return Number.isFinite(parsedValue) && parsedValue > 0
-      ? parsedValue
-      : kDefaultBrowseBottomPanelHeightPx;
+    return kDefaultBrowseBottomPanelHeightPx;
   } catch {
     return kDefaultBrowseBottomPanelHeightPx;
   }
@@ -55,6 +44,7 @@ export const AppSidebar = ({
   onSelectNavItem = () => {},
   selectedBrowsePath = "",
   onSelectBrowseFile = () => {},
+  onPreviewBrowseFile = () => {},
   acHasUpdate = false,
   acLatest = "",
   acDismissed = false,
@@ -70,18 +60,9 @@ export const AppSidebar = ({
   const [isResizingBrowsePanels, setIsResizingBrowsePanels] = useState(false);
 
   useEffect(() => {
-    try {
-      const rawSettings =
-        window.localStorage.getItem(kUiSettingsStorageKey) ||
-        window.localStorage.getItem(kLegacyUiSettingsStorageKey);
-      const parsedSettings = rawSettings ? JSON.parse(rawSettings) : {};
-      const nextSettings =
-        parsedSettings && typeof parsedSettings === "object"
-          ? { ...parsedSettings }
-          : {};
-      nextSettings[kBrowseBottomPanelUiSettingKey] = browseBottomPanelHeightPx;
-      window.localStorage.setItem(kUiSettingsStorageKey, JSON.stringify(nextSettings));
-    } catch {}
+    const settings = readUiSettings();
+    settings[kBrowseBottomPanelUiSettingKey] = browseBottomPanelHeightPx;
+    writeUiSettings(settings);
   }, [browseBottomPanelHeightPx]);
 
   const getClampedBrowseBottomPanelHeight = (value) => {
@@ -217,6 +198,7 @@ export const AppSidebar = ({
               <${FileTree}
                 onSelectFile=${onSelectBrowseFile}
                 selectedPath=${selectedBrowsePath}
+                onPreviewFile=${onPreviewBrowseFile}
               />
             </div>
             <div