@chrysb/alphaclaw 0.3.3 → 0.3.4-beta.0

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

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchBrowseTree } from "../lib/api.js";
 import {
@@ -48,6 +48,37 @@ const collectFolderPaths = (node, folderPaths) => {
   );
 };
 
+const collectFilePaths = (node, filePaths) => {
+  if (!node) return;
+  if (node.type === "file") {
+    if (node.path) filePaths.push(node.path);
+    return;
+  }
+  (node.children || []).forEach((childNode) =>
+    collectFilePaths(childNode, filePaths),
+  );
+};
+
+const filterTreeNode = (node, normalizedQuery) => {
+  if (!node) return null;
+  const query = String(normalizedQuery || "").trim().toLowerCase();
+  if (!query) return node;
+  const nodeName = String(node.name || "").toLowerCase();
+  const nodePath = String(node.path || "").toLowerCase();
+  const isDirectMatch = nodeName.includes(query) || nodePath.includes(query);
+  if (node.type === "file") {
+    return isDirectMatch ? node : null;
+  }
+  const filteredChildren = (node.children || [])
+    .map((childNode) => filterTreeNode(childNode, query))
+    .filter(Boolean);
+  if (!isDirectMatch && filteredChildren.length === 0) return null;
+  return {
+    ...node,
+    children: filteredChildren,
+  };
+};
+
 const getFileIconMeta = (fileName) => {
   const normalizedName = String(fileName || "").toLowerCase();
   if (normalizedName.endsWith(".md")) {
@@ -126,17 +157,20 @@ const TreeNode = ({
   onSelectFile,
   selectedPath = "",
   draftPaths,
+  isSearchActive = false,
+  searchActivePath = "",
 }) => {
   if (!node) return null;
   if (node.type === "file") {
     const isActive = selectedPath === node.path;
+    const isSearchActiveNode = searchActivePath === node.path;
     const hasDraft = draftPaths.has(node.path || "");
     const fileIconMeta = getFileIconMeta(node.name);
     const FileTypeIcon = fileIconMeta.icon;
     return html`
       <li class="tree-item">
         <a
-          class=${isActive ? "active" : ""}
+          class=${`${isActive ? "active" : ""} ${isSearchActiveNode && !isActive ? "soft-active" : ""}`.trim()}
           onclick=${() => onSelectFile(node.path)}
           style=${{
             paddingLeft: `${kFileBasePaddingPx + depth * kTreeIndentPx}px`,
@@ -152,7 +186,7 @@ const TreeNode = ({
   }
 
   const folderPath = node.path || "";
-  const isCollapsed = collapsedPaths.has(folderPath);
+  const isCollapsed = isSearchActive ? false : collapsedPaths.has(folderPath);
   return html`
     <li class="tree-item">
       <div
@@ -178,6 +212,8 @@ const TreeNode = ({
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
             />
           `,
         )}
@@ -186,7 +222,11 @@ const TreeNode = ({
   `;
 };
 
-export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
+export const FileTree = ({
+  onSelectFile = () => {},
+  selectedPath = "",
+  onPreviewFile = () => {},
+}) => {
   const [treeRoot, setTreeRoot] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -194,6 +234,9 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     readStoredCollapsedPaths,
   );
   const [draftPaths, setDraftPaths] = useState(readStoredDraftPaths);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchActivePath, setSearchActivePath] = useState("");
+  const searchInputRef = useRef(null);
 
   useEffect(() => {
     let active = true;
@@ -223,9 +266,22 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     };
   }, []);
 
-  const rootChildren = useMemo(() => treeRoot?.children || [], [treeRoot]);
+  const normalizedSearchQuery = String(searchQuery || "").trim().toLowerCase();
+  const rootChildren = useMemo(() => {
+    const children = treeRoot?.children || [];
+    if (!normalizedSearchQuery) return children;
+    return children
+      .map((node) => filterTreeNode(node, normalizedSearchQuery))
+      .filter(Boolean);
+  }, [treeRoot, normalizedSearchQuery]);
   const safeCollapsedPaths =
     collapsedPaths instanceof Set ? collapsedPaths : new Set();
+  const isSearchActive = normalizedSearchQuery.length > 0;
+  const filteredFilePaths = useMemo(() => {
+    const filePaths = [];
+    rootChildren.forEach((node) => collectFilePaths(node, filePaths));
+    return filePaths;
+  }, [rootChildren]);
 
   useEffect(() => {
     if (!(collapsedPaths instanceof Set)) return;
@@ -278,6 +334,39 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const handleGlobalSearchShortcut = (event) => {
+      if (event.key !== "/") return;
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      const tagName = String(target?.tagName || "").toLowerCase();
+      const isTypingTarget =
+        tagName === "input" ||
+        tagName === "textarea" ||
+        tagName === "select" ||
+        target?.isContentEditable;
+      if (isTypingTarget && target !== searchInputRef.current) return;
+      event.preventDefault();
+      searchInputRef.current?.focus();
+      searchInputRef.current?.select();
+    };
+    window.addEventListener("keydown", handleGlobalSearchShortcut);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalSearchShortcut);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isSearchActive) {
+      setSearchActivePath("");
+      onPreviewFile("");
+      return;
+    }
+    if (searchActivePath && filteredFilePaths.includes(searchActivePath)) return;
+    setSearchActivePath("");
+    onPreviewFile("");
+  }, [isSearchActive, filteredFilePaths, searchActivePath, onPreviewFile]);
+
   const toggleFolder = (folderPath) => {
     setCollapsedPaths((previousPaths) => {
       const nextPaths =
@@ -288,6 +377,58 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     });
   };
 
+  const updateSearchQuery = (nextQuery) => {
+    setSearchQuery(nextQuery);
+  };
+
+  const clearSearch = () => {
+    setSearchQuery("");
+    setSearchActivePath("");
+    onPreviewFile("");
+  };
+
+  const moveSearchSelection = (direction) => {
+    if (!filteredFilePaths.length) return;
+    const currentIndex = filteredFilePaths.indexOf(searchActivePath);
+    const delta = direction === "up" ? -1 : 1;
+    const baseIndex = currentIndex === -1 ? (direction === "up" ? 0 : -1) : currentIndex;
+    const nextIndex =
+      (baseIndex + delta + filteredFilePaths.length) % filteredFilePaths.length;
+    const nextPath = filteredFilePaths[nextIndex];
+    setSearchActivePath(nextPath);
+    onPreviewFile(nextPath);
+  };
+
+  const commitSearchSelection = () => {
+    const [singlePath = ""] = filteredFilePaths;
+    const targetPath = searchActivePath || (filteredFilePaths.length === 1 ? singlePath : "");
+    if (!targetPath) return;
+    onSelectFile(targetPath);
+    clearSearch();
+  };
+
+  const onSearchKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveSearchSelection("down");
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveSearchSelection("up");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitSearchSelection();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      clearSearch();
+    }
+  };
+
   if (loading) {
     return html`<div class="file-tree-state">Loading files...</div>`;
   }
@@ -297,11 +438,43 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     </div>`;
   }
   if (!rootChildren.length) {
-    return html`<div class="file-tree-state">No files found.</div>`;
+    return html`
+      <div class="file-tree-wrap">
+        <div class="file-tree-search">
+          <input
+            class="file-tree-search-input"
+            type="text"
+            ref=${searchInputRef}
+            value=${searchQuery}
+            onInput=${(event) => updateSearchQuery(event.target.value)}
+            onKeyDown=${onSearchKeyDown}
+            placeholder="Search files..."
+            autocomplete="off"
+            spellcheck=${false}
+          />
+        </div>
+        <div class="file-tree-state">
+          ${isSearchActive ? "No matching files." : "No files found."}
+        </div>
+      </div>
+    `;
   }
 
   return html`
     <div class="file-tree-wrap">
+      <div class="file-tree-search">
+        <input
+          class="file-tree-search-input"
+          type="text"
+          ref=${searchInputRef}
+          value=${searchQuery}
+          onInput=${(event) => updateSearchQuery(event.target.value)}
+          onKeyDown=${onSearchKeyDown}
+          placeholder="Search files..."
+          autocomplete="off"
+          spellcheck=${false}
+        />
+      </div>
       <ul class="file-tree">
         ${rootChildren.map(
           (node) => html`
@@ -313,6 +486,8 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
             />
           `,
         )}

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

@@ -22,6 +22,8 @@ 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";
 
@@ -29,6 +31,7 @@ const html = htm.bind(h);
 const kFileViewerModeStorageKey = "alphaclaw.browse.fileViewerMode";
 const kLegacyFileViewerModeStorageKey = "alphaclawBrowseFileViewerMode";
 const kProtectedBrowsePaths = new Set(["openclaw.json", "devices/paired.json"]);
+const kLoadingIndicatorDelayMs = 1000;
 
 const parsePathSegments = (inputPath) =>
   String(inputPath || "")
@@ -58,13 +61,18 @@ const readStoredFileViewerMode = () => {
 };
 
 
-export const FileViewer = ({ filePath = "" }) => {
+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);
@@ -87,7 +95,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,6 +172,17 @@ 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 = "";
@@ -282,7 +301,7 @@ export const FileViewer = ({ filePath = "" }) => {
   };
 
   const handleContentInput = (event) => {
-    if (isProtectedLocked) return;
+    if (isProtectedLocked || isPreviewOnly) return;
     const nextContent = event.target.value;
     setContent(nextContent);
     if (hasSelectedPath && canEditFile) {
@@ -408,22 +427,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 +525,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}
@@ -653,7 +676,7 @@ ${formattedValue}</pre
                                   value=${content}
                                   onInput=${handleContentInput}
                                   onScroll=${handleEditorScroll}
-                                  readonly=${isProtectedLocked}
+                                  readonly=${isProtectedLocked || isPreviewOnly}
                                   spellcheck=${false}
                                   autocorrect="off"
                                   autocapitalize="off"
@@ -672,7 +695,7 @@ ${formattedValue}</pre
                                 value=${content}
                                 onInput=${handleContentInput}
                                 onScroll=${handleEditorScroll}
-                                readonly=${isProtectedLocked}
+                                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