@chrysb/alphaclaw 0.3.3 → 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, 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";
 
@@ -48,6 +55,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 +164,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 +193,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 +219,8 @@ const TreeNode = ({
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
             />
           `,
         )}
@@ -186,7 +229,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,38 +241,75 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
     readStoredCollapsedPaths,
   );
   const [draftPaths, setDraftPaths] = useState(readStoredDraftPaths);
+  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 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 +362,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 +405,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 +466,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 +514,8 @@ export const FileTree = ({ onSelectFile = () => {}, selectedPath = "" }) => {
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
             />
           `,
         )}