@chrysb/alphaclaw 0.4.1-beta.0 → 0.4.1-beta.2

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

@@ -7,8 +7,13 @@ import {
   useState,
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
-import { fetchBrowseTree } from "../lib/api.js";
-import { deleteBrowseFile } from "../lib/api.js";
+import {
+  fetchBrowseTree,
+  deleteBrowseFile,
+  createBrowseFile,
+  createBrowseFolder,
+  moveBrowsePath,
+} from "../lib/api.js";
 import {
   kDraftIndexChangedEventName,
   readStoredDraftPaths,
@@ -32,6 +37,9 @@ import {
   Database2LineIcon,
   HashtagIcon,
   LockLineIcon,
+  FileAddLineIcon,
+  FolderAddLineIcon,
+  DeleteBinLineIcon,
 } from "./icons.js";
 import { LoadingSpinner } from "./loading-spinner.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
@@ -208,6 +216,147 @@ const getFileIconMeta = (fileName) => {
   };
 };
 
+const TreeContextMenu = ({
+  x,
+  y,
+  targetPath,
+  targetType,
+  isLocked,
+  onNewFile,
+  onNewFolder,
+  onDelete,
+  onClose,
+}) => {
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const handleScroll = () => onClose();
+    window.addEventListener("mousedown", handleClick);
+    window.addEventListener("keydown", handleKey);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("mousedown", handleClick);
+      window.removeEventListener("keydown", handleKey);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [onClose]);
+
+  const isFolder = targetType === "folder";
+  const isFile = targetType === "file";
+  const isRoot = targetType === "root";
+  const contextFolder = isFolder ? targetPath : "";
+  const canCreate = !isLocked && (isFolder || isRoot);
+  const canDelete = !isLocked && (isFolder || isFile) && targetPath;
+
+  return html`
+    <div
+      ref=${menuRef}
+      class="tree-context-menu"
+      style=${{ top: `${y}px`, left: `${x}px` }}
+    >
+      ${canCreate
+        ? html`
+            <button
+              class="tree-context-menu-item"
+              onclick=${() => { onNewFile(contextFolder); onClose(); }}
+            >
+              <${FileAddLineIcon} className="tree-context-menu-icon" />
+              <span>New File</span>
+            </button>
+            <button
+              class="tree-context-menu-item"
+              onclick=${() => { onNewFolder(contextFolder); onClose(); }}
+            >
+              <${FolderAddLineIcon} className="tree-context-menu-icon" />
+              <span>New Folder</span>
+            </button>
+          `
+        : null}
+      ${canDelete
+        ? html`
+            ${canCreate
+              ? html`<div class="tree-context-menu-sep"></div>`
+              : null}
+            <button
+              class="tree-context-menu-item"
+              onclick=${() => { onDelete(targetPath); onClose(); }}
+            >
+              <${DeleteBinLineIcon} className="tree-context-menu-icon" />
+              <span>Delete</span>
+            </button>
+          `
+        : null}
+      ${isLocked
+        ? html`
+            <div class="tree-context-menu-item is-disabled">
+              <${LockLineIcon} className="tree-context-menu-icon" />
+              <span>Managed by AlphaClaw</span>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};
+
+const CreationInput = ({ type, depth, onConfirm, onCancel }) => {
+  const inputRef = useRef(null);
+  const [value, setValue] = useState("");
+  const submittedRef = useRef(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const submit = () => {
+    const name = value.trim();
+    if (!name || submittedRef.current) {
+      onCancel();
+      return;
+    }
+    submittedRef.current = true;
+    onConfirm(name);
+  };
+
+  const IconComponent = type === "folder" ? FolderAddLineIcon : FileAddLineIcon;
+  return html`
+    <li class="tree-item">
+      <div
+        class="tree-create-row"
+        style=${{ paddingLeft: `${kFileBasePaddingPx + depth * kTreeIndentPx}px` }}
+      >
+        <${IconComponent} className="tree-create-icon" />
+        <input
+          ref=${inputRef}
+          class="tree-create-input"
+          type="text"
+          value=${value}
+          onInput=${(e) => setValue(e.target.value)}
+          onKeyDown=${(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submit();
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+          }}
+          onBlur=${submit}
+          placeholder=${type === "folder" ? "folder name" : "file name"}
+          autocomplete="off"
+          spellcheck=${false}
+        />
+      </div>
+    </li>
+  `;
+};
+
 const TreeNode = ({
   node,
   depth = 0,
@@ -216,10 +365,17 @@ const TreeNode = ({
   onSelectFolder,
   onRequestDelete,
   onSelectFile,
+  onContextMenu,
+  onDragDrop,
   selectedPath = "",
   draftPaths,
   isSearchActive = false,
   searchActivePath = "",
+  creatingInFolder = "",
+  creatingType = "",
+  onCreationConfirm,
+  onCreationCancel,
+  dragSourcePath = "",
 }) => {
   if (!node) return null;
   if (node.type === "file") {
@@ -233,10 +389,23 @@ const TreeNode = ({
     const fileIconMeta = getFileIconMeta(node.name);
     const FileTypeIcon = fileIconMeta.icon;
     return html`
-      <li class="tree-item">
+      <li class="tree-item${dragSourcePath === node.path ? " is-dragging" : ""}">
         <a
           class=${`${isActive ? "active" : ""} ${isSearchActiveNode && !isActive ? "soft-active" : ""}`.trim()}
           onclick=${() => onSelectFile(node.path)}
+          oncontextmenu=${(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onContextMenu({ x: e.clientX, y: e.clientY, targetPath: node.path, targetType: "file", isLocked });
+          }}
+          draggable=${!isLocked}
+          onDragStart=${(e) => {
+            if (isLocked) { e.preventDefault(); return; }
+            e.dataTransfer.setData("text/plain", node.path);
+            e.dataTransfer.effectAllowed = "move";
+            onDragDrop("start", node.path);
+          }}
+          onDragEnd=${() => onDragDrop("end", "")}
           onKeyDown=${(event) => {
             const isDeleteKey =
               event.key === "Delete" || event.key === "Backspace";
@@ -269,20 +438,60 @@ const TreeNode = ({
   const folderPath = node.path || "";
   const isCollapsed = isSearchActive ? false : !expandedPaths.has(folderPath);
   const isFolderActive = selectedPath === folderPath;
+  const isFolderLocked = folderPath && matchesBrowsePolicyPath(
+    kLockedBrowsePaths,
+    normalizeBrowsePolicyPath(folderPath),
+  );
+  const [isDropTarget, setIsDropTarget] = useState(false);
+  const dropCounterRef = useRef(0);
   return html`
-    <li class="tree-item">
+    <li class="tree-item${dragSourcePath === folderPath ? " is-dragging" : ""}">
       <div
-        class=${`tree-folder ${isCollapsed ? "collapsed" : ""} ${isFolderActive ? "active" : ""}`.trim()}
+        class=${`tree-folder ${isCollapsed ? "collapsed" : ""} ${isFolderActive ? "active" : ""} ${isDropTarget ? "is-drop-target" : ""}`.trim()}
         onclick=${() => {
           if (!folderPath) return;
-          if (isFolderActive) {
-            onSetFolderExpanded(folderPath, false);
-            onSelectFolder("");
-            return;
-          }
-          onSetFolderExpanded(folderPath, true);
+          onSetFolderExpanded(folderPath, isCollapsed);
           onSelectFolder(folderPath);
         }}
+        oncontextmenu=${(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu({ x: e.clientX, y: e.clientY, targetPath: folderPath, targetType: "folder", isLocked: isFolderLocked });
+        }}
+        draggable=${!!folderPath && !isFolderLocked}
+        onDragStart=${(e) => {
+          if (!folderPath || isFolderLocked) { e.preventDefault(); return; }
+          e.dataTransfer.setData("text/plain", folderPath);
+          e.dataTransfer.effectAllowed = "move";
+          onDragDrop("start", folderPath);
+        }}
+        onDragEnd=${() => { setIsDropTarget(false); dropCounterRef.current = 0; onDragDrop("end", ""); }}
+        onDragOver=${(e) => {
+          if (isFolderLocked) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        }}
+        onDragEnter=${(e) => {
+          if (isFolderLocked) return;
+          e.preventDefault();
+          dropCounterRef.current += 1;
+          if (dropCounterRef.current === 1) setIsDropTarget(true);
+        }}
+        onDragLeave=${() => {
+          dropCounterRef.current -= 1;
+          if (dropCounterRef.current <= 0) { dropCounterRef.current = 0; setIsDropTarget(false); }
+        }}
+        onDrop=${(e) => {
+          if (isFolderLocked) return;
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDropTarget(false);
+          dropCounterRef.current = 0;
+          const sourcePath = e.dataTransfer.getData("text/plain");
+          if (sourcePath && sourcePath !== folderPath) {
+            onDragDrop("drop", sourcePath, folderPath);
+          }
+        }}
         style=${{
           paddingLeft: `${kFolderBasePaddingPx + depth * kTreeIndentPx}px`,
         }}
@@ -297,19 +506,32 @@ const TreeNode = ({
             event.preventDefault();
             event.stopPropagation();
             if (!folderPath) return;
-            const shouldCollapse = !isCollapsed;
-            if (isFolderActive && shouldCollapse) {
-              onSelectFolder("");
-            }
             onSetFolderExpanded(folderPath, isCollapsed);
           }}
         >
           <span class="arrow">▼</span>
         </button>
         <span class="tree-label">${node.name}</span>
+        ${isFolderLocked
+          ? html`<${LockLineIcon}
+              className="tree-lock-icon"
+              title="Managed by AlphaClaw"
+            />`
+          : null}
       </div>
       <ul class=${`tree-children ${isCollapsed ? "hidden" : ""}`}>
-        ${(node.children || []).map(
+        ${creatingInFolder === folderPath && creatingType === "folder"
+          ? html`
+              <${CreationInput}
+                key="__creation__"
+                type="folder"
+                depth=${depth + 1}
+                onConfirm=${onCreationConfirm}
+                onCancel=${onCreationCancel}
+              />
+            `
+          : null}
+        ${(node.children || []).filter((c) => c.type === "folder").map(
           (childNode) => html`
             <${TreeNode}
               key=${childNode.path || `${folderPath}/${childNode.name}`}
@@ -320,10 +542,53 @@ const TreeNode = ({
               onSelectFolder=${onSelectFolder}
               onRequestDelete=${onRequestDelete}
               onSelectFile=${onSelectFile}
+              onContextMenu=${onContextMenu}
+              onDragDrop=${onDragDrop}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
               isSearchActive=${isSearchActive}
               searchActivePath=${searchActivePath}
+              creatingInFolder=${creatingInFolder}
+              creatingType=${creatingType}
+              onCreationConfirm=${onCreationConfirm}
+              onCreationCancel=${onCreationCancel}
+              dragSourcePath=${dragSourcePath}
+            />
+          `,
+        )}
+        ${creatingInFolder === folderPath && creatingType === "file"
+          ? html`
+              <${CreationInput}
+                key="__creation__"
+                type="file"
+                depth=${depth + 1}
+                onConfirm=${onCreationConfirm}
+                onCancel=${onCreationCancel}
+              />
+            `
+          : null}
+        ${(node.children || []).filter((c) => c.type !== "folder").map(
+          (childNode) => html`
+            <${TreeNode}
+              key=${childNode.path || `${folderPath}/${childNode.name}`}
+              node=${childNode}
+              depth=${depth + 1}
+              expandedPaths=${expandedPaths}
+              onSetFolderExpanded=${onSetFolderExpanded}
+              onSelectFolder=${onSelectFolder}
+              onRequestDelete=${onRequestDelete}
+              onSelectFile=${onSelectFile}
+              onContextMenu=${onContextMenu}
+              onDragDrop=${onDragDrop}
+              selectedPath=${selectedPath}
+              draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
+              creatingInFolder=${creatingInFolder}
+              creatingType=${creatingType}
+              onCreationConfirm=${onCreationConfirm}
+              onCreationCancel=${onCreationCancel}
+              dragSourcePath=${dragSourcePath}
             />
           `,
         )}
@@ -347,6 +612,12 @@ export const FileTree = ({
   const [searchActivePath, setSearchActivePath] = useState("");
   const [deleteTargetPath, setDeleteTargetPath] = useState("");
   const [deletingFile, setDeletingFile] = useState(false);
+  const [creatingInFolder, setCreatingInFolder] = useState("");
+  const [creatingType, setCreatingType] = useState("");
+  const [contextMenu, setContextMenu] = useState(null);
+  const [dragSourcePath, setDragSourcePath] = useState("");
+  const [selectedFolder, setSelectedFolder] = useState("");
+  const effectiveSelectedPath = selectedFolder || selectedPath;
   const searchInputRef = useRef(null);
   const treeSignatureRef = useRef("");
 
@@ -443,19 +714,19 @@ export const FileTree = ({
     } catch {}
   }, [expandedPaths]);
 
+  useEffect(() => {
+    if (selectedPath) setSelectedFolder("");
+  }, [selectedPath]);
+
   useEffect(() => {
     if (!selectedPath) return;
     const ancestorFolderPaths = collectAncestorFolderPaths(selectedPath);
-    const selectedIsFolder = folderPaths.has(selectedPath);
-    const pathsToExpand = selectedIsFolder
-      ? [...ancestorFolderPaths, selectedPath]
-      : ancestorFolderPaths;
-    if (!pathsToExpand.length) return;
+    if (!ancestorFolderPaths.length) return;
     setExpandedPaths((previousPaths) => {
       if (!(previousPaths instanceof Set)) return previousPaths;
       let didChange = false;
       const nextPaths = new Set(previousPaths);
-      pathsToExpand.forEach((ancestorPath) => {
+      ancestorFolderPaths.forEach((ancestorPath) => {
         if (!nextPaths.has(ancestorPath)) {
           nextPaths.add(ancestorPath);
           didChange = true;
@@ -463,7 +734,7 @@ export const FileTree = ({
       });
       return didChange ? nextPaths : previousPaths;
     });
-  }, [selectedPath, folderPaths]);
+  }, [selectedPath]);
 
   useEffect(() => {
     const handleDraftIndexChanged = (event) => {
@@ -547,30 +818,30 @@ export const FileTree = ({
     });
   };
 
+  const handleSelectFile = useCallback((filePath, options) => {
+    setSelectedFolder("");
+    onSelectFile(filePath, options);
+  }, [onSelectFile]);
+
   const selectFolder = (folderPath) => {
-    onSelectFile(folderPath, {
-      directory: true,
-      preservePreview: true,
-    });
+    setSelectedFolder(folderPath);
   };
 
   const requestDelete = (targetPath) => {
     const normalizedTargetPath = normalizeBrowsePolicyPath(targetPath);
     if (!normalizedTargetPath) return;
-    if (!allTreeFilePaths.has(targetPath)) {
-      showToast("Only files can be deleted", "warning");
-      return;
-    }
     if (
       matchesBrowsePolicyPath(kLockedBrowsePaths, normalizedTargetPath) ||
       matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedTargetPath)
     ) {
-      showToast("Protected or locked files cannot be deleted", "warning");
+      showToast("Protected or locked paths cannot be deleted", "warning");
       return;
     }
     setDeleteTargetPath(targetPath);
   };
 
+  const deleteTargetIsFolder = folderPaths.has(deleteTargetPath);
+
   const confirmDelete = async () => {
     if (!deleteTargetPath || deletingFile) return;
     setDeletingFile(true);
@@ -590,21 +861,115 @@ export const FileTree = ({
         removeTreePath(previousRoot, deleteTargetPath),
       );
       window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
-      onSelectFile("");
-      showToast("File deleted", "success");
+      handleSelectFile("");
+      showToast(deleteTargetIsFolder ? "Folder deleted" : "File deleted", "success");
       setDeleteTargetPath("");
     } catch (deleteError) {
-      const message = deleteError.message || "Could not delete file";
-      if (/path is not a file/i.test(message)) {
-        showToast("Only files can be deleted", "warning");
-      } else {
-        showToast(message, "error");
-      }
+      showToast(deleteError.message || "Could not delete", "error");
     } finally {
       setDeletingFile(false);
     }
   };
 
+  const getCreateFolder = (explicitFolder) => {
+    if (explicitFolder !== undefined) return explicitFolder;
+    if (!effectiveSelectedPath) return "";
+    if (folderPaths.has(effectiveSelectedPath)) return effectiveSelectedPath;
+    const lastSlash = effectiveSelectedPath.lastIndexOf("/");
+    return lastSlash > 0 ? effectiveSelectedPath.slice(0, lastSlash) : "";
+  };
+
+  const requestCreate = (folderPath, type) => {
+    const target = getCreateFolder(folderPath);
+    if (target && matchesBrowsePolicyPath(kLockedBrowsePaths, normalizeBrowsePolicyPath(target))) {
+      showToast("Cannot create inside a locked folder", "warning");
+      return;
+    }
+    setCreatingInFolder(target);
+    setCreatingType(type);
+    if (target) {
+      setExpandedPaths((prev) => {
+        const next = prev instanceof Set ? new Set(prev) : new Set();
+        next.add(target);
+        return next;
+      });
+    }
+  };
+
+  const requestCreateFromToolbar = (type) => {
+    requestCreate(getCreateFolder(), type);
+  };
+
+  const cancelCreate = () => {
+    setCreatingInFolder("");
+    setCreatingType("");
+  };
+
+  const confirmCreate = async (name) => {
+    const folder = creatingInFolder;
+    const type = creatingType;
+    cancelCreate();
+    const fullPath = folder ? `${folder}/${name}` : name;
+    try {
+      if (type === "folder") {
+        await createBrowseFolder(fullPath);
+        showToast("Folder created", "success");
+      } else {
+        await createBrowseFile(fullPath);
+        showToast("File created", "success");
+      }
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      if (folder) {
+        setExpandedPaths((prev) => {
+          const next = prev instanceof Set ? new Set(prev) : new Set();
+          next.add(folder);
+          return next;
+        });
+      }
+      if (type === "file") {
+        handleSelectFile(fullPath);
+      }
+    } catch (createError) {
+      showToast(createError.message || `Could not create ${type}`, "error");
+    }
+  };
+
+  const openContextMenu = (menu) => {
+    setContextMenu(menu);
+  };
+
+  const closeContextMenu = () => {
+    setContextMenu(null);
+  };
+
+  const handleDragDrop = async (action, sourcePath, targetFolder) => {
+    if (action === "start") {
+      setDragSourcePath(sourcePath);
+      return;
+    }
+    if (action === "end") {
+      setDragSourcePath("");
+      return;
+    }
+    if (action === "drop") {
+      setDragSourcePath("");
+      const basename = sourcePath.split("/").pop();
+      if (!basename) return;
+      const destination = targetFolder ? `${targetFolder}/${basename}` : basename;
+      if (sourcePath === destination) return;
+      try {
+        await moveBrowsePath(sourcePath, destination);
+        showToast(`Moved to ${targetFolder || "root"}`, "success");
+        window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+        if (selectedPath === sourcePath) {
+          handleSelectFile(destination);
+        }
+      } catch (moveError) {
+        showToast(moveError.message || "Could not move", "error");
+      }
+    }
+  };
+
   const updateSearchQuery = (nextQuery) => {
     setSearchQuery(nextQuery);
   };
@@ -633,7 +998,7 @@ export const FileTree = ({
     const targetPath =
       searchActivePath || (filteredFilePaths.length === 1 ? singlePath : "");
     if (!targetPath) return;
-    onSelectFile(targetPath);
+    handleSelectFile(targetPath);
     clearSearch();
   };
 
@@ -673,7 +1038,7 @@ export const FileTree = ({
       ${error}
     </div>`;
   }
-  if (!rootChildren.length) {
+  if (!rootChildren.length && !creatingType) {
     return html`
       <div class="file-tree-wrap">
         <div class="file-tree-search">
@@ -688,6 +1053,24 @@ export const FileTree = ({
             autocomplete="off"
             spellcheck=${false}
           />
+          <span class="file-tree-search-actions">
+            <button
+              type="button"
+              class="tree-folder-action"
+              title="New file"
+              onclick=${() => requestCreateFromToolbar("file")}
+            >
+              <${FileAddLineIcon} className="tree-folder-action-icon" />
+            </button>
+            <button
+              type="button"
+              class="tree-folder-action"
+              title="New folder"
+              onclick=${() => requestCreateFromToolbar("folder")}
+            >
+              <${FolderAddLineIcon} className="tree-folder-action-icon" />
+            </button>
+          </span>
         </div>
         <div class="file-tree-state">
           ${isSearchActive ? "No matching files." : "No files found."}
@@ -710,9 +1093,51 @@ export const FileTree = ({
           autocomplete="off"
           spellcheck=${false}
         />
+        <span class="file-tree-search-actions">
+          <button
+            type="button"
+            class="tree-folder-action"
+            title="New file"
+            onclick=${() => requestCreateFromToolbar("file")}
+          >
+            <${FileAddLineIcon} className="tree-folder-action-icon" />
+          </button>
+          <button
+            type="button"
+            class="tree-folder-action"
+            title="New folder"
+            onclick=${() => requestCreateFromToolbar("folder")}
+          >
+            <${FolderAddLineIcon} className="tree-folder-action-icon" />
+          </button>
+        </span>
       </div>
-      <ul class="file-tree">
-        ${rootChildren.map(
+      <div class="file-tree-scroll">
+      <ul
+        class="file-tree"
+        oncontextmenu=${(e) => {
+          e.preventDefault();
+          openContextMenu({ x: e.clientX, y: e.clientY, targetPath: "", targetType: "root" });
+        }}
+        onDragOver=${(e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; }}
+        onDrop=${(e) => {
+          e.preventDefault();
+          const sourcePath = e.dataTransfer.getData("text/plain");
+          if (sourcePath) handleDragDrop("drop", sourcePath, "");
+        }}
+      >
+        ${creatingInFolder === "" && creatingType === "folder"
+          ? html`
+              <${CreationInput}
+                key="__root-creation__"
+                type="folder"
+                depth=${0}
+                onConfirm=${confirmCreate}
+                onCancel=${cancelCreate}
+              />
+            `
+          : null}
+        ${rootChildren.filter((n) => n.type === "folder").map(
           (node) => html`
             <${TreeNode}
               key=${node.path || node.name}
@@ -721,19 +1146,79 @@ export const FileTree = ({
               onSetFolderExpanded=${setFolderExpanded}
               onSelectFolder=${selectFolder}
               onRequestDelete=${requestDelete}
-              onSelectFile=${onSelectFile}
-              selectedPath=${selectedPath}
+              onSelectFile=${handleSelectFile}
+              onContextMenu=${openContextMenu}
+              onDragDrop=${handleDragDrop}
+              selectedPath=${effectiveSelectedPath}
               draftPaths=${draftPaths}
               isSearchActive=${isSearchActive}
               searchActivePath=${searchActivePath}
+              creatingInFolder=${creatingInFolder}
+              creatingType=${creatingType}
+              onCreationConfirm=${confirmCreate}
+              onCreationCancel=${cancelCreate}
+              dragSourcePath=${dragSourcePath}
+            />
+          `,
+        )}
+        ${creatingInFolder === "" && creatingType === "file"
+          ? html`
+              <${CreationInput}
+                key="__root-creation__"
+                type="file"
+                depth=${0}
+                onConfirm=${confirmCreate}
+                onCancel=${cancelCreate}
+              />
+            `
+          : null}
+        ${rootChildren.filter((n) => n.type !== "folder").map(
+          (node) => html`
+            <${TreeNode}
+              key=${node.path || node.name}
+              node=${node}
+              expandedPaths=${safeExpandedPaths}
+              onSetFolderExpanded=${setFolderExpanded}
+              onSelectFolder=${selectFolder}
+              onRequestDelete=${requestDelete}
+              onSelectFile=${handleSelectFile}
+              onContextMenu=${openContextMenu}
+              onDragDrop=${handleDragDrop}
+              selectedPath=${effectiveSelectedPath}
+              draftPaths=${draftPaths}
+              isSearchActive=${isSearchActive}
+              searchActivePath=${searchActivePath}
+              creatingInFolder=${creatingInFolder}
+              creatingType=${creatingType}
+              onCreationConfirm=${confirmCreate}
+              onCreationCancel=${cancelCreate}
+              dragSourcePath=${dragSourcePath}
             />
           `,
         )}
       </ul>
+      </div>
+      ${contextMenu
+        ? html`
+            <${TreeContextMenu}
+              x=${contextMenu.x}
+              y=${contextMenu.y}
+              targetPath=${contextMenu.targetPath}
+              targetType=${contextMenu.targetType}
+              isLocked=${!!contextMenu.isLocked}
+              onNewFile=${(folder) => requestCreate(folder, "file")}
+              onNewFolder=${(folder) => requestCreate(folder, "folder")}
+              onDelete=${requestDelete}
+              onClose=${closeContextMenu}
+            />
+          `
+        : null}
       <${ConfirmDialog}
         visible=${!!deleteTargetPath}
-        title="Delete file?"
-        message=${`Delete ${deleteTargetPath || "this file"}? This can be restored from diff view before sync.`}
+        title=${deleteTargetIsFolder ? "Delete folder?" : "Delete file?"}
+        message=${deleteTargetIsFolder
+          ? `Delete folder ${deleteTargetPath || "this folder"} and all its contents?`
+          : `Delete ${deleteTargetPath || "this file"}? This can be restored from diff view before sync.`}
         confirmLabel="Delete"
         confirmLoadingLabel="Deleting..."
         cancelLabel="Cancel"