diff --git a/codex/serializers/admin/libraries.py b/codex/serializers/admin/libraries.py
index 5f2873f40..e020c8edd 100644
--- a/codex/serializers/admin/libraries.py
+++ b/codex/serializers/admin/libraries.py
@@ -94,6 +94,8 @@ class AdminFolderListSerializer(Serializer):
     """Get a list of dirs."""
 
     root_folder = CharField(read_only=True)
+    # Null at a filesystem root, which has no parent.
+    parent_folder = CharField(read_only=True, allow_null=True)
     folders = ListField(child=CharField(read_only=True))
 
 
diff --git a/codex/views/admin/library.py b/codex/views/admin/library.py
index 353a40bdd..77648bb9c 100644
--- a/codex/views/admin/library.py
+++ b/codex/views/admin/library.py
@@ -165,9 +165,6 @@ def _get_dirs(root_path, show_hidden) -> tuple[str, ...]:
         ``Path.resolve().is_dir()`` (which chains a full readlink walk
         before stat-ing). Broken symlinks are skipped silently.
         """
-        dirs: list[str] = []
-        if root_path.parent != root_path:
-            dirs.append("..")
         subdirs: list[str] = []
         with os.scandir(root_path) as it:
             for entry in it:
@@ -180,8 +177,7 @@ def _get_dirs(root_path, show_hidden) -> tuple[str, ...]:
                     continue
                 if is_dir:
                     subdirs.append(entry.name)
-        dirs.extend(sorted(subdirs))
-        return tuple(dirs)
+        return tuple(sorted(subdirs, key=str.casefold))
 
     @staticmethod
     def _default_root_path() -> Path:
@@ -234,10 +230,20 @@ def get(self, *_args, **_kwargs) -> Response:
 
             dirs = self._get_dirs(root_path, show_hidden)
 
-            data = {"root_folder": str(root_path), "folders": dirs}
+            parent = root_path.parent
+            data = {
+                "root_folder": str(root_path),
+                "parent_folder": str(parent) if parent != root_path else None,
+                "folders": dirs,
+            }
             serializer = self.get_serializer(data)
         except ValidationError:
             raise
+        except PermissionError as exc:
+            # A folder the server may see but not list. Keyed to the path,
+            # like "Not a directory", so the envelope carries the reason.
+            reason = {"path": ["Permission denied"]}
+            raise ValidationError(reason) from exc
         except Exception as exc:
             logger.exception("get admin folder list view")
             reason = "Server Error"
diff --git a/frontend/src/components/admin/create-update-dialog/library-create-update-inputs.vue b/frontend/src/components/admin/create-update-dialog/library-create-update-inputs.vue
index 20dfc68c5..b885fbdac 100644
--- a/frontend/src/components/admin/create-update-dialog/library-create-update-inputs.vue
+++ b/frontend/src/components/admin/create-update-dialog/library-create-update-inputs.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <AdminServerFolderPicker
+    <AdminServerFolderTree
       v-if="!oldRow"
       :rules="rules.path"
       autofocus
@@ -52,8 +52,9 @@ import { mapState } from "pinia";
 import LIMITS from "@/choices/limits.json";
 import DurationInput from "@/components/admin/create-update-dialog/duration-input.vue";
 import AdminRelationPicker from "@/components/admin/create-update-dialog/relation-picker.vue";
-import AdminServerFolderPicker from "@/components/admin/create-update-dialog/server-folder-picker.vue";
 import createUpdateInputsMixin from "@/components/admin/create-update-dialog/create-update-inputs-mixin.js";
+import { isPathParent } from "@/components/admin/create-update-dialog/path-parent";
+import AdminServerFolderTree from "@/components/admin/create-update-dialog/server-folder-tree.vue";
 import { useAdminStore } from "@/stores/admin";
 
 const UPDATE_KEYS = Object.freeze([
@@ -72,29 +73,12 @@ const EMPTY_ROW = Object.freeze({
   groups: [],
 });
 
-const isPathParent = (path, potentialChildPath) => {
-  // Normalize the paths to avoid issues with different directory separator characters
-  path = path.replaceAll("\\", "/");
-  potentialChildPath = potentialChildPath.replaceAll("\\", "/");
-
-  // Ensure that both paths end with a slash to avoid false positives
-  if (!path.endsWith("/")) {
-    path += "/";
-  }
-  if (!potentialChildPath.endsWith("/")) {
-    potentialChildPath += "/";
-  }
-
-  // Check if the potential child path starts with the parent path
-  return potentialChildPath.startsWith(path);
-};
-
 export default {
   // eslint-disable-next-line no-secrets/no-secrets
   name: "AdminLibraryCreateUpdateInputs",
   components: {
     AdminRelationPicker,
-    AdminServerFolderPicker,
+    AdminServerFolderTree,
     DurationInput,
   },
   mixins: [createUpdateInputsMixin],
diff --git a/frontend/src/components/admin/create-update-dialog/path-parent.js b/frontend/src/components/admin/create-update-dialog/path-parent.js
new file mode 100644
index 000000000..30c44c9af
--- /dev/null
+++ b/frontend/src/components/admin/create-update-dialog/path-parent.js
@@ -0,0 +1,21 @@
+/*
+ * Whether ``potentialChildPath`` is ``path`` or inside it. Shared by the
+ * library form's path rules and the folder tree, which disables the
+ * folders an existing library already covers.
+ */
+export const isPathParent = (path, potentialChildPath) => {
+  // Normalize the paths to avoid issues with different directory separator characters
+  path = path.replaceAll("\\", "/");
+  potentialChildPath = potentialChildPath.replaceAll("\\", "/");
+
+  // Ensure that both paths end with a slash to avoid false positives
+  if (!path.endsWith("/")) {
+    path += "/";
+  }
+  if (!potentialChildPath.endsWith("/")) {
+    potentialChildPath += "/";
+  }
+
+  // Check if the potential child path starts with the parent path
+  return potentialChildPath.startsWith(path);
+};
diff --git a/frontend/src/components/admin/create-update-dialog/server-folder-picker.vue b/frontend/src/components/admin/create-update-dialog/server-folder-picker.vue
deleted file mode 100644
index 4b26d5613..000000000
--- a/frontend/src/components/admin/create-update-dialog/server-folder-picker.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div id="folderPicker">
-    <v-combobox
-      ref="folderPicker"
-      v-model="path"
-      v-model:menu="menuOpen"
-      v-bind="$attrs"
-      aria-label="Library folder"
-      clearable
-      :error-messages="pathErrors"
-      full-width
-      hide-details="auto"
-      :items="folders"
-      :menu-props="{ maxHeight: '370px' }"
-      validate-on="blur"
-      variant="filled"
-      @blur="onBlur"
-      @click:clear="onClear"
-      @keydown.enter.prevent.stop="onKeyDownEnter"
-    >
-      <template #item="{ internalItem, props }">
-        <v-list-item
-          v-bind="props"
-          :title="internalItem.title"
-          :value="internalItem.value"
-          @click="onItemClick(internalItem.value)"
-        />
-      </template>
-    </v-combobox>
-    <v-checkbox
-      v-model="showHidden"
-      density="compact"
-      class="showHidden"
-      hide-details="auto"
-      label="Show Hidden Folders"
-    />
-  </div>
-</template>
-
-<script>
-import { mapActions, mapState } from "pinia";
-
-import { useAdminStore } from "@/stores/admin";
-import { useCommonStore } from "@/stores/common";
-
-export default {
-  name: "AdminServerFolderPicker",
-  emits: ["change"],
-  data() {
-    return {
-      menuOpen: false,
-      originalPath: "",
-      path: "",
-      showHidden: false,
-    };
-  },
-  computed: {
-    ...mapState(useAdminStore, {
-      folders: (state) => state.folderPicker.folders,
-      rootFolder: (state) => state.folderPicker.rootFolder,
-    }),
-    ...mapState(useCommonStore, {
-      formErrors: (state) => state.form.errors,
-      formFieldErrors: (state) => state.form.fieldErrors,
-    }),
-    pathErrors() {
-      // The server's reason for THIS field when it named one -- "Library
-      // with this Path already exists." -- rather than every message the
-      // response carried.
-      return this.formFieldErrors?.path ?? this.formErrors;
-    },
-  },
-  mounted() {
-    /*
-     * Delay initial load so the dialog transition completes
-     * and the combobox has its final position for menu placement.
-     */
-    setTimeout(() => {
-      this.loadFolders()
-        .then(() => {
-          this.path = this.rootFolder;
-          this.originalPath = this.rootFolder;
-          return true;
-        })
-        .catch(console.warn);
-    }, 200);
-  },
-  methods: {
-    ...mapActions(useAdminStore, ["clearFolders", "loadFolders"]),
-    ...mapActions(useCommonStore, ["clearErrors"]),
-    forceMenuOpen() {
-      /*
-       * Vuetify can leave menuOpen true internally even when the menu
-       * is not displayed. Force a false→true transition so Vue's
-       * reactivity detects a change and Vuetify re-opens the menu.
-       */
-      this.menuOpen = false;
-      this.$nextTick(() => {
-        this.menuOpen = true;
-      });
-    },
-    change(path, { openMenu = false } = {}) {
-      let relativePath;
-      if (path) {
-        relativePath =
-          path.startsWith("/") || path.startsWith("\\")
-            ? path
-            : [this.rootFolder, path].join("/");
-      } else {
-        relativePath = this.rootFolder;
-      }
-      this.clearErrors();
-      this.loadFolders(relativePath, this.showHidden)
-        .then(() => {
-          if (this.formErrors.length === 0) {
-            this.path = this.rootFolder;
-            this.$emit("change", this.path);
-          }
-          if (openMenu && this.folders.length > 0) {
-            this.forceMenuOpen();
-          }
-        })
-        .catch(console.warn);
-    },
-    onBlur() {
-      this.change(this.path);
-    },
-    onClear() {
-      this.clearFolders(this.originalPath)
-        .then(() => {
-          return this.change(this.originalPath);
-        })
-        .catch(console.error);
-    },
-    onKeyDownEnter() {
-      this.change(this.path, { openMenu: true });
-    },
-    onItemClick(path) {
-      this.change(path);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-/* Layered: these rules beat Vuetify's component CSS by position,
- * and lose to a `color`/utility prop, which is the intended order. */
-@layer codex-components {
-  #folderPicker {
-    border-radius: 5px;
-    background-color: rgb(var(--v-theme-surface));
-  }
-
-  .showHidden :deep(.v-label) {
-    color: rgb(var(--v-theme-text-secondary));
-  }
-}
-</style>
diff --git a/frontend/src/components/admin/create-update-dialog/server-folder-tree.vue b/frontend/src/components/admin/create-update-dialog/server-folder-tree.vue
new file mode 100644
index 000000000..bd5ed5034
--- /dev/null
+++ b/frontend/src/components/admin/create-update-dialog/server-folder-tree.vue
@@ -0,0 +1,345 @@
+<template>
+  <div id="folderTree">
+    <div class="folderPathRow">
+      <v-text-field
+        v-model="path"
+        v-bind="$attrs"
+        :error-messages="pathErrors"
+        hide-details="auto"
+        variant="filled"
+        @keydown.enter.prevent.stop="onEnter"
+        @update:model-value="pathErrors = []"
+      />
+      <v-btn
+        :icon="mdiFolderArrowUpOutline"
+        :disabled="!parentFolder"
+        aria-label="Parent folder"
+        title="Parent folder"
+        variant="text"
+        @click="goToParent"
+      />
+    </div>
+    <div class="folderTreeBox">
+      <v-treeview
+        v-model:activated="activated"
+        v-model:opened="opened"
+        :items="items"
+        :load-children="loadChildren"
+        activatable
+        mandatory
+        open-on-click
+        density="compact"
+        aria-label="Server folders"
+      >
+        <template #prepend="{ item, isOpen }">
+          <v-icon :icon="folderIcon(item, isOpen)" size="small" />
+        </template>
+      </v-treeview>
+    </div>
+    <v-checkbox
+      v-model="showHidden"
+      density="compact"
+      class="showHidden"
+      hide-details="auto"
+      label="Show Hidden Folders"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  mdiBookshelf,
+  mdiFolderArrowUpOutline,
+  mdiFolderOpenOutline,
+  mdiFolderOutline,
+} from "@mdi/js";
+import { mapActions, mapState } from "pinia";
+
+import { isPathParent } from "@/components/admin/create-update-dialog/path-parent";
+import { useAdminStore } from "@/stores/admin";
+
+/*
+ * VTreeview renders every child of an open node, with no virtual scroll,
+ * and each child folder is a whole expandable group. In a production build
+ * 200 of them open in about 0.6s; 500 took up to 1.5s, and indent lines
+ * cost another third. Past this many, the rest are reached by typing the
+ * path.
+ */
+export const FOLDER_CAP = 200;
+// Ends the value of the "N more folders" leaf past the cap.
+const MORE_SUFFIX = "\0more";
+
+const joinPath = (parent, name) =>
+  parent.endsWith("/") || parent.endsWith("\\")
+    ? parent + name
+    : `${parent}/${name}`;
+
+// Where a folder goes among its siblings, in the server's caseless order.
+const sortedIndex = (children, title) => {
+  const key = title.toLowerCase();
+  const index = children.findIndex(
+    ({ title: other, value }) =>
+      value.endsWith(MORE_SUFFIX) || other.toLowerCase() > key,
+  );
+  return index === -1 ? children.length : index;
+};
+
+export default {
+  name: "AdminServerFolderTree",
+  // The parent's rules, label and autofocus belong on the path field.
+  inheritAttrs: false,
+  emits: ["change"],
+  data() {
+    return {
+      mdiFolderArrowUpOutline,
+      // The path field is the source of truth; the tree only fills it.
+      path: "",
+      pathErrors: [],
+      parentFolder: null,
+      items: [],
+      activated: [],
+      opened: [],
+      showHidden: false,
+    };
+  },
+  computed: {
+    ...mapState(useAdminStore, {
+      libraryPaths: (state) => (state.libraries || []).map(({ path }) => path),
+    }),
+  },
+  watch: {
+    path(to) {
+      this.$emit("change", to);
+    },
+    activated(to) {
+      if (to?.[0]) {
+        this.path = to[0];
+      }
+    },
+    showHidden() {
+      this.refreshTree();
+    },
+  },
+  mounted() {
+    /*
+     * No path: the server's default folder. Nothing is chosen yet, since
+     * that folder is the newest library's parent and no valid choice.
+     */
+    this.reRoot();
+  },
+  methods: {
+    ...mapActions(useAdminStore, ["fetchFolders"]),
+    libraryContaining(folder) {
+      return this.libraryPaths.find((path) => isPathParent(path, folder));
+    },
+    makeNode(folder, title = folder) {
+      const library = this.libraryContaining(folder);
+      if (library) {
+        // A folder an existing library covers can't be a new library.
+        const subtitle =
+          library === folder ? "Already a library" : `Inside ${library}`;
+        return {
+          title,
+          value: folder,
+          library: true,
+          props: { disabled: true, subtitle },
+        };
+      }
+      return { title, value: folder, children: [] };
+    },
+    fillChildren(node, names, keep = new Map()) {
+      if (names.length === 0) {
+        // An empty folder is a leaf: no chevron to open into nothing.
+        delete node.children;
+        return;
+      }
+      node.children = names.slice(0, FOLDER_CAP).map((name) => {
+        const folder = joinPath(node.value, name);
+        return keep.get(folder) || this.makeNode(folder, name);
+      });
+      const more = names.length - FOLDER_CAP;
+      if (more > 0) {
+        node.children.push({
+          title: `${more} more folders, type the path above`,
+          value: node.value + MORE_SUFFIX,
+          props: { disabled: true },
+        });
+      }
+    },
+    setRoot({ rootFolder, parentFolder, folders }, { activate = false } = {}) {
+      const root = { title: rootFolder, value: rootFolder, children: [] };
+      this.fillChildren(root, folders);
+      this.parentFolder = parentFolder;
+      this.items = [root];
+      this.opened = [rootFolder];
+      if (activate) {
+        this.activated = [rootFolder];
+      }
+      this.pathErrors = [];
+    },
+    async reRoot(folder, options) {
+      try {
+        this.setRoot(await this.fetchFolders(folder, this.showHidden), options);
+      } catch (error) {
+        this.pathErrors = [error.message];
+      }
+    },
+    openNodes() {
+      // The root and every open folder below it, as far as the tree is open.
+      const opened = new Set(this.opened);
+      const nodes = [];
+      const visit = (node) => {
+        nodes.push(node);
+        for (const child of node.children || []) {
+          if (opened.has(child.value) && child.children) {
+            visit(child);
+          }
+        }
+      };
+      visit(this.items[0]);
+      return nodes;
+    },
+    chosenBranch() {
+      // Each loaded folder on the way to the chosen one, by its parent.
+      const chosen = this.activated[0];
+      const branch = new Map();
+      let node = this.items[0];
+      while (chosen && node) {
+        const next = (node.children || []).find(({ value }) =>
+          isPathParent(value, chosen),
+        );
+        if (next) {
+          branch.set(node.value, next);
+        }
+        node = next;
+      }
+      return branch;
+    },
+    keepBranch(node, next, open) {
+      // Hiding hidden folders never hides the way to the chosen one.
+      const children = node.children || [];
+      if (children.some(({ value }) => value === next.value)) {
+        return;
+      }
+      if (!open.has(next.value) && next.children?.length) {
+        next.children = [];
+      }
+      children.splice(sortedIndex(children, next.title), 0, next);
+      node.children = children;
+    },
+    async refreshTree() {
+      /*
+       * Show Hidden Folders keeps the tree where it is: refetch the root
+       * and each open folder, keeping the open ones as they are, and keep
+       * the way to the chosen folder even when it is hidden. A closed
+       * folder goes back to unloaded, to list with the new setting when it
+       * is opened.
+       */
+      const root = this.items[0];
+      if (!root) {
+        this.reRoot();
+        return;
+      }
+      const { showHidden } = this;
+      const nodes = this.openNodes();
+      const branch = this.chosenBranch();
+      const results = await Promise.allSettled(
+        nodes.map(({ value }) => this.fetchFolders(value, showHidden)),
+      );
+      if (this.items[0] !== root || this.showHidden !== showHidden) {
+        // Re-rooted or toggled again meanwhile; this answer is stale.
+        return;
+      }
+      const open = new Map(nodes.map((node) => [node.value, node]));
+      for (const [index, node] of nodes.entries()) {
+        const result = results[index];
+        if (result.status === "fulfilled") {
+          this.fillChildren(node, result.value.folders, open);
+          const next = branch.get(node.value);
+          if (next) {
+            this.keepBranch(node, next, open);
+          }
+        } else {
+          node.props = { subtitle: result.reason.message };
+          delete node.children;
+        }
+      }
+      this.opened = [...open.keys()];
+    },
+    async loadChildren(node) {
+      try {
+        const { folders } = await this.fetchFolders(
+          node.value,
+          this.showHidden,
+        );
+        this.fillChildren(node, folders);
+      } catch (error) {
+        // The failure stays on the node; it isn't the path field's error.
+        node.props = { subtitle: error.message };
+        delete node.children;
+      }
+    },
+    onEnter() {
+      if (this.path) {
+        this.reRoot(this.path, { activate: true });
+      }
+    },
+    async goToParent() {
+      const oldRoot = this.items[0];
+      let listing;
+      try {
+        listing = await this.fetchFolders(this.parentFolder, this.showHidden);
+      } catch (error) {
+        this.pathErrors = [error.message];
+        return;
+      }
+      const opened = this.opened;
+      this.setRoot(listing);
+      // Keep the old root, open with what it already loaded.
+      const root = this.items[0];
+      const index = (root.children || []).findIndex(
+        ({ value }) => value === oldRoot.value,
+      );
+      const entry = root.children?.[index];
+      if (entry && !entry.library) {
+        root.children.splice(index, 1, { ...oldRoot, title: entry.title });
+      }
+      this.opened = [root.value, ...opened];
+    },
+    folderIcon(item, isOpen) {
+      if (item.library) {
+        return mdiBookshelf;
+      }
+      // A leaf can be "open" from a click, but there is nothing in it.
+      return isOpen && item.children ? mdiFolderOpenOutline : mdiFolderOutline;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/* Layered: these rules beat Vuetify's component CSS by position,
+ * and lose to a `color`/utility prop, which is the intended order. */
+@layer codex-components {
+  #folderTree {
+    border-radius: 5px;
+    background-color: rgb(var(--v-theme-surface));
+  }
+
+  .folderPathRow {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  // px, not em: a v-dialog sizes its content in px.
+  .folderTreeBox {
+    height: 280px;
+    overflow-y: auto;
+  }
+
+  .showHidden :deep(.v-label) {
+    color: rgb(var(--v-theme-text-secondary));
+  }
+}
+</style>
diff --git a/frontend/src/stores/admin.js b/frontend/src/stores/admin.js
index 5f98ce15f..770fb2aea 100644
--- a/frontend/src/stores/admin.js
+++ b/frontend/src/stores/admin.js
@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 
 import * as API from "@/api/v4/admin";
 import { useAuthStore } from "@/stores/auth";
-import { useCommonStore } from "@/stores/common";
+import { fieldErrorMap, getErrors, useCommonStore } from "@/stores/common";
 
 const { TABLES } = API;
 
@@ -82,10 +82,6 @@ export const useAdminStore = defineStore("admin", {
     pendingDeletes: [],
     tagWriteErrors: [],
     flags: [],
-    folderPicker: {
-      rootFolder: undefined,
-      folders: [],
-    },
     timestamps: {},
     stats: undefined,
     doctor: undefined,
@@ -184,20 +180,23 @@ export const useAdminStore = defineStore("admin", {
             tables.map((table) => this.loadTable(table, options)),
           );
     },
-    async loadFolders(path, showHidden) {
-      if (this._requireAdmin()) return false;
-      const commonStore = useCommonStore();
+    /*
+     * One folder listing for the folder tree: ``{rootFolder, parentFolder,
+     * folders}``. Throws the server's reason, so each caller decides where
+     * it shows, and leaves the shared form errors alone.
+     */
+    async fetchFolders(path, showHidden) {
+      if (this._requireAdmin()) {
+        throw new Error("Not an administrator");
+      }
       try {
         const response = await API.getFolders(path, showHidden);
-        this.folderPicker = response.data;
+        return response.data;
       } catch (error) {
-        commonStore.setErrors(error);
+        const reasons = fieldErrorMap(error).path ?? getErrors(error);
+        throw new Error(reasons.join(" "), { cause: error });
       }
     },
-    async clearFolders(rootFolder) {
-      if (this._requireAdmin()) return false;
-      this.folderPicker = { rootFolder, folders: [""] };
-    },
     /*
      * createRow and updateRow resolve true when the row saved and false when
      * it didn't, so a dialog can stay open to show the server's field errors.
diff --git a/frontend/src/stores/common.js b/frontend/src/stores/common.js
index 69907a176..e6110d1ee 100644
--- a/frontend/src/stores/common.js
+++ b/frontend/src/stores/common.js
@@ -27,7 +27,7 @@ const messagesOf = (value) =>
     .filter((message) => message !== null && message !== undefined)
     .map(String);
 
-const fieldErrorMap = (error) => {
+export const fieldErrorMap = (error) => {
   const body = error?.response?.data;
   const envelopeDetail = error?.envelopeError?.detail;
   let map;
@@ -74,7 +74,7 @@ const flattenErrors = (fieldErrors) => {
       );
 };
 
-const getErrors = (xiorError) => {
+export const getErrors = (xiorError) => {
   let errors = flattenErrors(fieldErrorMap(xiorError));
   if (errors.length === 0) {
     console.warn("Unable to parse error", xiorError);
diff --git a/frontend/tests/unit/server-folder-tree.test.js b/frontend/tests/unit/server-folder-tree.test.js
new file mode 100644
index 000000000..cc97f0995
--- /dev/null
+++ b/frontend/tests/unit/server-folder-tree.test.js
@@ -0,0 +1,293 @@
+/*
+ * The Add Library folder tree.
+ *
+ * Behavior locked in here:
+ *   - It opens on the server's default folder with nothing chosen, since
+ *     that folder is the newest library's parent and no valid choice.
+ *   - Opening a folder lists its subfolders;
+ *     an empty folder becomes a leaf; past FOLDER_CAP the rest collapse
+ *     into one disabled "type the path" leaf.
+ *   - A folder an existing library covers is disabled and says why.
+ *   - Choosing a folder fills the path field, which emits ``change``.
+ *   - Enter on a typed path re-roots there and chooses it; a bad path shows
+ *     the server's reason under the field.
+ *   - Parent folder re-roots one level up and keeps the old root, open,
+ *     with what it already loaded.
+ *   - Show Hidden Folders keeps the tree where it is: the root and the open
+ *     folders refetch and stay open, and a closed folder reloads with the
+ *     new setting when it is opened. Hiding never hides the way to the
+ *     chosen folder.
+ *   - A folder that fails to load says so on its node, not in the form's
+ *     shared errors.
+ */
+import { createTestingPinia } from "@pinia/testing";
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+
+import ServerFolderTree, {
+  FOLDER_CAP,
+} from "@/components/admin/create-update-dialog/server-folder-tree.vue";
+import vuetify from "@/plugins/vuetify";
+import { useAdminStore } from "@/stores/admin";
+import { useCommonStore } from "@/stores/common";
+
+const LISTINGS = Object.freeze({
+  "/comics": {
+    rootFolder: "/comics",
+    parentFolder: "/",
+    folders: ["DC", "empty", "Marvel"],
+  },
+  "/comics/DC": {
+    rootFolder: "/comics/DC",
+    parentFolder: "/comics",
+    folders: ["Batman"],
+  },
+  "/comics/empty": {
+    rootFolder: "/comics/empty",
+    parentFolder: "/comics",
+    folders: [],
+  },
+  "/": { rootFolder: "/", parentFolder: null, folders: ["comics", "tmp"] },
+  "/comics/.hidden": {
+    rootFolder: "/comics/.hidden",
+    parentFolder: "/comics",
+    folders: ["deep"],
+  },
+});
+
+function child(vm, title, node = vm.items[0]) {
+  return node.children.find((item) => item.title === title);
+}
+
+function mountTree({ libraries = [], listings = LISTINGS } = {}) {
+  const pinia = createTestingPinia({
+    initialState: {
+      auth: { user: { isStaff: true } },
+      admin: { libraries },
+    },
+  });
+  const store = useAdminStore(pinia);
+  // No path asks for the server's default folder. Every folder holds a
+  // hidden one.
+  store.fetchFolders.mockImplementation((path = "/comics", showHidden) => {
+    const listing = listings[path];
+    if (!listing) {
+      return Promise.reject(new Error("Not a directory"));
+    }
+    const result = structuredClone(listing);
+    if (showHidden) {
+      result.folders.push(".hidden");
+    }
+    return Promise.resolve(result);
+  });
+  const wrapper = mount(ServerFolderTree, {
+    attrs: { label: "Library Folder" },
+    global: { plugins: [vuetify, pinia] },
+  });
+  return { wrapper, vm: wrapper.vm, store };
+}
+
+describe("AdminServerFolderTree — opening", () => {
+  test("roots at the default folder with nothing chosen", async () => {
+    const { wrapper, vm, store } = mountTree();
+    await flushPromises();
+    expect(wrapper.findComponent({ name: "VTreeview" }).exists()).toBe(true);
+    expect(store.fetchFolders).toHaveBeenCalledWith(undefined, false);
+    expect(vm.items[0].value).toBe("/comics");
+    expect(vm.opened).toEqual(["/comics"]);
+    expect(vm.activated).toEqual([]);
+    expect(vm.path).toBe("");
+    expect(wrapper.find("label").text()).toBe("Library Folder");
+  });
+
+  test("lists the default folder's subfolders", async () => {
+    const { vm } = mountTree();
+    await flushPromises();
+    expect(vm.items[0].children.map(({ title }) => title)).toEqual([
+      "DC",
+      "empty",
+      "Marvel",
+    ]);
+    expect(child(vm, "DC").value).toBe("/comics/DC");
+  });
+
+  test("loading a folder fills its children; an empty one is a leaf", async () => {
+    const { vm } = mountTree();
+    await flushPromises();
+    await vm.loadChildren(child(vm, "DC"));
+    expect(child(vm, "DC").children.map(({ value }) => value)).toEqual([
+      "/comics/DC/Batman",
+    ]);
+    const empty = child(vm, "empty");
+    await vm.loadChildren(empty);
+    expect(empty).not.toHaveProperty("children");
+  });
+
+  test("past the cap the rest become one disabled leaf", async () => {
+    const many = Array.from({ length: FOLDER_CAP + 7 }, (_, i) => `f${i}`);
+    const { vm } = mountTree({
+      listings: {
+        "/comics": { rootFolder: "/comics", parentFolder: "/", folders: many },
+      },
+    });
+    await flushPromises();
+    const children = vm.items[0].children;
+    expect(children).toHaveLength(FOLDER_CAP + 1);
+    const last = children.at(-1);
+    expect(last.title).toBe("7 more folders, type the path above");
+    expect(last.props.disabled).toBe(true);
+    expect(last).not.toHaveProperty("children");
+  });
+
+  test("a folder an existing library covers is disabled with a reason", async () => {
+    const { vm } = mountTree({ libraries: [{ path: "/comics/Marvel" }] });
+    await flushPromises();
+    const marvel = child(vm, "Marvel");
+    expect(marvel.props).toEqual({
+      disabled: true,
+      subtitle: "Already a library",
+    });
+    expect(marvel).not.toHaveProperty("children");
+    expect(child(vm, "DC").props).toBeUndefined();
+  });
+});
+
+describe("AdminServerFolderTree — choosing", () => {
+  test("choosing a folder fills the path and emits change", async () => {
+    const { wrapper, vm } = mountTree();
+    await flushPromises();
+    vm.activated = ["/comics/DC"];
+    await flushPromises();
+    expect(vm.path).toBe("/comics/DC");
+    expect(wrapper.emitted("change").at(-1)).toEqual(["/comics/DC"]);
+  });
+
+  test("Enter on a typed path re-roots there and chooses it", async () => {
+    const { wrapper, vm } = mountTree();
+    await flushPromises();
+    const input = wrapper.find("input");
+    await input.setValue("/comics/DC");
+    await input.trigger("keydown", { key: "Enter" });
+    await flushPromises();
+    expect(vm.items[0].value).toBe("/comics/DC");
+    expect(vm.activated).toEqual(["/comics/DC"]);
+    expect(wrapper.emitted("change").at(-1)).toEqual(["/comics/DC"]);
+  });
+
+  test("Enter on a bad path shows the reason and keeps the tree", async () => {
+    const { wrapper, vm } = mountTree();
+    await flushPromises();
+    const input = wrapper.find("input");
+    await input.setValue("/nope");
+    await input.trigger("keydown", { key: "Enter" });
+    await flushPromises();
+    expect(vm.pathErrors).toEqual(["Not a directory"]);
+    expect(wrapper.text()).toContain("Not a directory");
+    expect(vm.items[0].value).toBe("/comics");
+  });
+});
+
+describe("AdminServerFolderTree — navigating", () => {
+  test("Parent re-roots up and keeps the old root's loaded children", async () => {
+    const { wrapper, vm } = mountTree();
+    await flushPromises();
+    await vm.loadChildren(child(vm, "DC"));
+    vm.opened = ["/comics", "/comics/DC"];
+    await wrapper.find('button[aria-label="Parent folder"]').trigger("click");
+    await flushPromises();
+    expect(vm.items[0].value).toBe("/");
+    const comics = child(vm, "comics");
+    expect(comics.title).toBe("comics");
+    expect(child(vm, "Batman", child(vm, "DC", comics)).value).toBe(
+      "/comics/DC/Batman",
+    );
+    expect(vm.opened).toEqual(["/", "/comics", "/comics/DC"]);
+    expect(vm.parentFolder).toBeNull();
+  });
+
+  test("Show Hidden Folders keeps the tree and lists hidden folders", async () => {
+    const { vm, store } = mountTree();
+    await flushPromises();
+    const dc = child(vm, "DC");
+    await vm.loadChildren(dc);
+    vm.opened = ["/comics", "/comics/DC"];
+    vm.activated = ["/comics/DC/Batman"];
+    await flushPromises();
+
+    vm.showHidden = true;
+    await flushPromises();
+
+    expect(store.fetchFolders).toHaveBeenCalledWith("/comics", true);
+    expect(store.fetchFolders).toHaveBeenCalledWith("/comics/DC", true);
+    expect(vm.items[0].value).toBe("/comics");
+    expect(child(vm, ".hidden")).toBeTruthy();
+    // The open folder is the same node, still open, now with its hidden one.
+    expect(child(vm, "DC")).toBe(dc);
+    expect(dc.children.map(({ title }) => title)).toEqual([
+      "Batman",
+      ".hidden",
+    ]);
+    expect(vm.opened).toEqual(["/comics", "/comics/DC"]);
+    expect(vm.activated).toEqual(["/comics/DC/Batman"]);
+    expect(vm.path).toBe("/comics/DC/Batman");
+
+    vm.showHidden = false;
+    await flushPromises();
+    expect(child(vm, ".hidden")).toBeUndefined();
+    expect(dc.children.map(({ title }) => title)).toEqual(["Batman"]);
+  });
+
+  test("hiding keeps the open way to a chosen folder inside a hidden one", async () => {
+    const { vm } = mountTree();
+    await flushPromises();
+    vm.showHidden = true;
+    await flushPromises();
+    const hidden = child(vm, ".hidden");
+    await vm.loadChildren(hidden);
+    vm.opened = ["/comics", "/comics/.hidden"];
+    vm.activated = ["/comics/.hidden/deep"];
+    await flushPromises();
+
+    vm.showHidden = false;
+    await flushPromises();
+
+    expect(vm.items[0].children.map(({ title }) => title)).toEqual([
+      ".hidden",
+      "DC",
+      "empty",
+      "Marvel",
+    ]);
+    expect(child(vm, ".hidden")).toBe(hidden);
+    expect(hidden.children.map(({ title }) => title)).toEqual(["deep"]);
+    expect(vm.opened).toEqual(["/comics", "/comics/.hidden"]);
+    expect(vm.path).toBe("/comics/.hidden/deep");
+  });
+
+  test("a closed folder lists with the new setting when opened", async () => {
+    const { vm } = mountTree();
+    await flushPromises();
+    await vm.loadChildren(child(vm, "empty"));
+    expect(child(vm, "empty")).not.toHaveProperty("children");
+
+    vm.showHidden = true;
+    await flushPromises();
+
+    const empty = child(vm, "empty");
+    expect(empty.children).toEqual([]);
+    await vm.loadChildren(empty);
+    expect(empty.children.map(({ title }) => title)).toEqual([".hidden"]);
+  });
+
+  test("a folder that fails to load says so on its node only", async () => {
+    const { vm } = mountTree();
+    await flushPromises();
+    const marvel = child(vm, "Marvel");
+    await vm.loadChildren(marvel);
+    expect(marvel.props).toEqual({ subtitle: "Not a directory" });
+    expect(marvel).not.toHaveProperty("children");
+    expect(vm.pathErrors).toEqual([]);
+    expect(useCommonStore().setErrors).not.toHaveBeenCalled();
+  });
+});
+
+export default {};
diff --git a/tests/test_admin_folder_list.py b/tests/test_admin_folder_list.py
new file mode 100644
index 000000000..c8125752d
--- /dev/null
+++ b/tests/test_admin_folder_list.py
@@ -0,0 +1,77 @@
+"""The admin folder list the library folder picker browses."""
+
+import shutil
+from http import HTTPStatus
+from pathlib import Path
+from typing import Final, override
+from unittest.mock import patch
+
+from django.contrib.auth.models import User
+from django.test import Client, TestCase
+
+from codex.startup import init_admin_flags
+from codex.views.admin.library import AdminFolderListView
+from tests.tmp_dirs import tmp_dir
+
+_TEST_PASSWORD: Final = "test-pw-hush-F042"  # noqa: S105
+TMP_DIR = tmp_dir("codex.tests.admin_folder_list")
+_URL: Final = "/api/v4/admin/folders"
+
+
+class AdminFolderListTestCase(TestCase):
+    """GET /admin/folders: ordering, parent folder and permission errors."""
+
+    @override
+    def setUp(self) -> None:
+        init_admin_flags()
+        for name in ("charlie", "Beta", "alpha", ".hidden"):
+            (TMP_DIR / name).mkdir(parents=True, exist_ok=True)
+        admin = User.objects.create_user(
+            username="admin", password=_TEST_PASSWORD, is_staff=True
+        )
+        self.client = Client()
+        self.client.force_login(admin)
+
+    @override
+    def tearDown(self) -> None:
+        shutil.rmtree(TMP_DIR, ignore_errors=True)
+
+    def _get(self, path: str | Path, **params):
+        return self.client.get(_URL, {"path": str(path), **params})
+
+    def test_folders_sort_ignoring_case(self) -> None:
+        """``Beta`` sorts between ``alpha`` and ``charlie``, not first."""
+        response = self._get(TMP_DIR)
+        assert response.status_code == HTTPStatus.OK, response.content
+        assert response.json()["data"]["folders"] == ["alpha", "Beta", "charlie"]
+
+    def test_hidden_folders_only_on_request(self) -> None:
+        response = self._get(TMP_DIR, showHidden="true")
+        assert response.status_code == HTTPStatus.OK, response.content
+        assert ".hidden" in response.json()["data"]["folders"]
+
+    def test_parent_folder(self) -> None:
+        response = self._get(TMP_DIR)
+        body = response.json()["data"]
+        assert body["rootFolder"] == str(TMP_DIR.resolve())
+        assert body["parentFolder"] == str(TMP_DIR.resolve().parent)
+
+    def test_no_parent_folder_at_the_filesystem_root(self) -> None:
+        response = self._get("/")
+        assert response.status_code == HTTPStatus.OK, response.content
+        body = response.json()["data"]
+        assert body["parentFolder"] is None
+
+    def test_an_unlistable_folder_is_a_400(self) -> None:
+        """Not a logged traceback and a "Server Error"."""
+        # The view's own listing, not os.scandir: that is the global os
+        # module, and servestatic scans the static root with it too.
+        with patch.object(
+            AdminFolderListView,
+            "_get_dirs",
+            side_effect=PermissionError("Operation not permitted"),
+        ):
+            response = self._get(TMP_DIR)
+        assert response.status_code == HTTPStatus.BAD_REQUEST, response.content
+        errors = response.json()["errors"]
+        assert errors[0]["detail"] == {"path": ["Permission denied"]}, errors