@chrysb/alphaclaw 0.9.15 → 0.9.16

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

@@ -76,6 +76,16 @@ const collectFolderPaths = (node, folderPaths) => {
   );
 };
 
+const collectTruncatedExpandedFolderPaths = (node, expandedPaths, folderPaths) => {
+  if (!node || node.type !== "folder") return;
+  if (node.truncated && expandedPaths.has(node.path || "")) {
+    folderPaths.push(node.path || "");
+  }
+  (node.children || []).forEach((childNode) =>
+    collectTruncatedExpandedFolderPaths(childNode, expandedPaths, folderPaths),
+  );
+};
+
 const collectFilePaths = (node, filePaths) => {
   if (!node) return;
   if (node.type === "file") {
@@ -104,6 +114,19 @@ const removeTreePath = (node, targetPath) => {
   };
 };
 
+const replaceTreeNode = (node, nextNode) => {
+  if (!node || !nextNode) return node;
+  if (String(node.path || "") === String(nextNode.path || "")) return nextNode;
+  if (node.type !== "folder") return node;
+  const nextChildren = (node.children || []).map((childNode) =>
+    replaceTreeNode(childNode, nextNode),
+  );
+  return {
+    ...node,
+    children: nextChildren,
+  };
+};
+
 const filterTreeNode = (node, normalizedQuery) => {
   if (!node) return null;
   const query = String(normalizedQuery || "")
@@ -410,6 +433,7 @@ const TreeNode = ({
   onCreationConfirm,
   onCreationCancel,
   dragSourcePath = "",
+  loadingFolderPaths = new Set(),
 }) => {
   if (!node) return null;
   if (node.type === "file") {
@@ -471,6 +495,7 @@ const TreeNode = ({
 
   const folderPath = node.path || "";
   const isCollapsed = isSearchActive ? false : !expandedPaths.has(folderPath);
+  const isLoadingFolder = loadingFolderPaths.has(folderPath);
   const isFolderActive = selectedPath === folderPath;
   const isFolderLocked = folderPath && matchesBrowsePolicyPath(
     kLockedBrowsePaths,
@@ -484,7 +509,7 @@ const TreeNode = ({
         class=${`tree-folder ${isCollapsed ? "collapsed" : ""} ${isFolderActive ? "active" : ""} ${isDropTarget ? "is-drop-target" : ""}`.trim()}
         onclick=${() => {
           if (!folderPath) return;
-          onSetFolderExpanded(folderPath, isCollapsed);
+          onSetFolderExpanded(folderPath, isCollapsed, node);
           onSelectFolder(folderPath);
         }}
         oncontextmenu=${(e) => {
@@ -540,8 +565,9 @@ const TreeNode = ({
             event.preventDefault();
             event.stopPropagation();
             if (!folderPath) return;
-            onSetFolderExpanded(folderPath, isCollapsed);
+            onSetFolderExpanded(folderPath, isCollapsed, node);
           }}
+          disabled=${isLoadingFolder}
         >
           <span class="arrow">▼</span>
         </button>
@@ -587,6 +613,7 @@ const TreeNode = ({
               onCreationConfirm=${onCreationConfirm}
               onCreationCancel=${onCreationCancel}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -623,6 +650,7 @@ const TreeNode = ({
               onCreationConfirm=${onCreationConfirm}
               onCreationCancel=${onCreationCancel}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -650,6 +678,7 @@ export const FileTree = ({
   const [creatingType, setCreatingType] = useState("");
   const [contextMenu, setContextMenu] = useState(null);
   const [dragSourcePath, setDragSourcePath] = useState("");
+  const [loadingFolderPaths, setLoadingFolderPaths] = useState(new Set());
   const [selectedFolder, setSelectedFolder] = useState("");
   const effectiveSelectedPath = selectedFolder || selectedPath;
   const searchInputRef = useRef(null);
@@ -661,10 +690,31 @@ export const FileTree = ({
     try {
       const data = await fetchBrowseTree();
       const nextRoot = data.root || null;
-      const nextSignature = JSON.stringify(nextRoot || {});
+      const nextExpandedPaths =
+        expandedPaths instanceof Set ? expandedPaths : new Set();
+      let hydratedRoot = nextRoot;
+      const hydratedPaths = new Set();
+      while (true) {
+        const truncatedExpandedPaths = [];
+        collectTruncatedExpandedFolderPaths(
+          hydratedRoot,
+          nextExpandedPaths,
+          truncatedExpandedPaths,
+        );
+        const nextFolderPath = truncatedExpandedPaths.find(
+          (folderPath) => !hydratedPaths.has(folderPath),
+        );
+        if (!nextFolderPath) break;
+        hydratedPaths.add(nextFolderPath);
+        const subtreeData = await fetchBrowseTree({ path: nextFolderPath });
+        if (subtreeData.root) {
+          hydratedRoot = replaceTreeNode(hydratedRoot, subtreeData.root);
+        }
+      }
+      const nextSignature = JSON.stringify(hydratedRoot || {});
       if (treeSignatureRef.current !== nextSignature) {
         treeSignatureRef.current = nextSignature;
-        setTreeRoot(nextRoot);
+        setTreeRoot(hydratedRoot);
       }
       setExpandedPaths((previousPaths) =>
         previousPaths instanceof Set ? previousPaths : new Set(),
@@ -677,7 +727,7 @@ export const FileTree = ({
     } finally {
       if (showLoading) setLoading(false);
     }
-  }, []);
+  }, [expandedPaths]);
 
   useEffect(() => {
     loadTree({ showLoading: true });
@@ -834,7 +884,31 @@ export const FileTree = ({
     onPreviewFile("");
   }, [isSearchActive, filteredFilePaths, searchActivePath, onPreviewFile]);
 
-  const setFolderExpanded = (folderPath, nextExpanded) => {
+  const setFolderExpanded = async (folderPath, nextExpanded, node = null) => {
+    if (nextExpanded === true && node?.truncated) {
+      setLoadingFolderPaths((previousPaths) => {
+        const nextPaths =
+          previousPaths instanceof Set ? new Set(previousPaths) : new Set();
+        nextPaths.add(folderPath);
+        return nextPaths;
+      });
+      try {
+        const data = await fetchBrowseTree({ path: folderPath });
+        if (data.root) {
+          setTreeRoot((previousRoot) => replaceTreeNode(previousRoot, data.root));
+        }
+      } catch (loadError) {
+        showToast(loadError.message || "Could not load folder", "error");
+        return;
+      } finally {
+        setLoadingFolderPaths((previousPaths) => {
+          const nextPaths =
+            previousPaths instanceof Set ? new Set(previousPaths) : new Set();
+          nextPaths.delete(folderPath);
+          return nextPaths;
+        });
+      }
+    }
     setExpandedPaths((previousPaths) => {
       const nextPaths =
         previousPaths instanceof Set ? new Set(previousPaths) : new Set();
@@ -1210,6 +1284,7 @@ export const FileTree = ({
               onCreationConfirm=${confirmCreate}
               onCreationCancel=${cancelCreate}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -1245,6 +1320,7 @@ export const FileTree = ({
               onCreationConfirm=${confirmCreate}
               onCreationCancel=${cancelCreate}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}

package/lib/public/js/lib/api.js

@@ -1245,8 +1245,11 @@ export async function fetchWebhookRequest(name, id) {
   return parseJsonOrThrow(res, "Could not load webhook request");
 }
 
-export const fetchBrowseTree = async (depth = 10) => {
+export const fetchBrowseTree = async (options = {}) => {
+  const { depth = 3, path = "" } =
+    typeof options === "number" ? { depth: options, path: "" } : options;
   const params = new URLSearchParams({ depth: String(depth) });
+  if (path) params.set("path", String(path));
   const res = await authFetch(`/api/browse/tree?${params.toString()}`);
   return parseJsonOrThrow(res, "Could not load file tree");
 };

package/lib/server/routes/browse/constants.js

@@ -1,4 +1,5 @@
-const kDefaultTreeDepth = 10;
+const kDefaultTreeDepth = 3;
+const kMaxTreeDepth = 3;
 const kIgnoredDirectoryNames = new Set([
   ".git",
   ".alphaclaw",
@@ -42,6 +43,7 @@ const kSqliteTablePageSize = 50;
 
 module.exports = {
   kDefaultTreeDepth,
+  kMaxTreeDepth,
   kIgnoredDirectoryNames,
   kImageMimeTypeByExtension,
   kCommitHistoryLimit,

package/lib/server/routes/browse/index.js

@@ -2,6 +2,7 @@ const path = require("path");
 const { kLockedBrowsePaths, kProtectedBrowsePaths } = require("../../constants");
 const {
   kDefaultTreeDepth,
+  kMaxTreeDepth,
   kIgnoredDirectoryNames,
   kCommitHistoryLimit,
 } = require("./constants");
@@ -34,6 +35,16 @@ const registerBrowseRoutes = ({ app, fs, kRootDir }) => {
     fs.mkdirSync(kRootResolved, { recursive: true });
   }
 
+  const readVisibleDirectoryEntries = (absolutePath) =>
+    fs
+      .readdirSync(absolutePath, { withFileTypes: true })
+      .filter((entry) => {
+        if (entry.isDirectory() && kIgnoredDirectoryNames.has(entry.name)) {
+          return false;
+        }
+        return entry.isDirectory() || entry.isFile();
+      });
+
   const buildTreeNode = (absolutePath, depthRemaining) => {
     const stats = fs.statSync(absolutePath);
     const nodeName = path.basename(absolutePath);
@@ -44,17 +55,17 @@ const registerBrowseRoutes = ({ app, fs, kRootDir }) => {
     }
 
     if (depthRemaining <= 0) {
-      return { type: "folder", name: nodeName, path: nodePath, children: [] };
+      const hasMoreChildren = readVisibleDirectoryEntries(absolutePath).length > 0;
+      return {
+        type: "folder",
+        name: nodeName,
+        path: nodePath,
+        children: [],
+        truncated: hasMoreChildren,
+      };
     }
 
-    const children = fs
-      .readdirSync(absolutePath, { withFileTypes: true })
-      .filter((entry) => {
-        if (entry.isDirectory() && kIgnoredDirectoryNames.has(entry.name)) {
-          return false;
-        }
-        return entry.isDirectory() || entry.isFile();
-      })
+    const children = readVisibleDirectoryEntries(absolutePath)
       .map((entry) =>
         buildTreeNode(path.join(absolutePath, entry.name), depthRemaining - 1),
       )
@@ -70,12 +81,29 @@ const registerBrowseRoutes = ({ app, fs, kRootDir }) => {
 
   app.get("/api/browse/tree", (req, res) => {
     const depthValue = Number.parseInt(String(req.query.depth || ""), 10);
-    const depth =
+    const requestedDepth =
       Number.isFinite(depthValue) && depthValue > 0
         ? depthValue
         : kDefaultTreeDepth;
+    const depth = Math.min(requestedDepth, kMaxTreeDepth);
+    const requestedPath = String(req.query.path || "").trim();
     try {
-      const tree = buildTreeNode(kRootResolved, depth);
+      const resolvedPath = requestedPath
+        ? resolveSafePath(
+            requestedPath,
+            kRootResolved,
+            kRootWithSep,
+            kRootDisplayName,
+          )
+        : { ok: true, absolutePath: kRootResolved };
+      if (!resolvedPath.ok) {
+        return res.status(400).json({ ok: false, error: resolvedPath.error });
+      }
+      const stats = fs.statSync(resolvedPath.absolutePath);
+      if (!stats.isDirectory()) {
+        return res.status(400).json({ ok: false, error: "Path is not a folder" });
+      }
+      const tree = buildTreeNode(resolvedPath.absolutePath, depth);
       return res.json({ ok: true, root: tree });
     } catch (error) {
       return res.status(500).json({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.9.15",
+  "version": "0.9.16",
   "publishConfig": {
     "access": "public"
   },