pinokiod 8.0.113 → 8.0.116

package/kernel/vault/index.js

@@ -3349,7 +3349,10 @@ class Vault {
     const sizeSort = options.size_sort === "asc" || options.size_sort === "desc"
       ? options.size_sort
       : null
-    const nameSort = options.name_sort === "desc" ? "desc" : "asc"
+    const nameSort = options.name_sort === "asc" ||
+      options.name_sort === "desc"
+      ? options.name_sort
+      : null
     // The authorised set, not the requested id: a scoped page must not be able
     // to read another location by naming it, and a rail entry standing for a
     // group of locations -- Pinokio, Apps -- owns no files of its own, so it
@@ -3683,7 +3686,9 @@ class Vault {
         : options.size_sort,
       groupDuplicates,
       nameOnly: filesMode,
-      nameSort: options.name_sort === "desc" ? "desc" : "asc",
+      nameSort: options.name_sort === "asc" || options.name_sort === "desc"
+        ? options.name_sort
+        : null,
       cursor
     })
     let items

package/kernel/vault/registry_core.js

@@ -5045,6 +5045,15 @@ class RegistryCore {
     }
   }
 
+  // A cursor carries only what its order resumes from.
+  cursorFor(sort, row) {
+    const cursor = { sort, size: row.size, path: row.path }
+    if (sort === "name" || sort === "name_desc") {
+      cursor.name = pathNameKey(row.path)
+    }
+    return cursor
+  }
+
   encodeCursor(value) {
     return Buffer.from(JSON.stringify(value)).toString("base64url")
   }
@@ -5160,11 +5169,18 @@ class RegistryCore {
     if (sort === "desc" && left.size !== right.size) {
       return left.size > right.size ? -1 : 1
     }
+    if (sort === "name" || sort === "name_desc") {
+      const nameOrder = Buffer.compare(
+        Buffer.from(pathNameKey(left.path)),
+        Buffer.from(pathNameKey(right.path))
+      )
+      if (nameOrder) return sort === "name_desc" ? -nameOrder : nameOrder
+    }
     const pathOrder = Buffer.compare(
       Buffer.from(left.path),
       Buffer.from(right.path)
     )
-    return sort === "desc" || sort === "path_desc" ? -pathOrder : pathOrder
+    return sort === "desc" ? -pathOrder : pathOrder
   }
 
   fileStreamRows(options) {
@@ -5215,21 +5231,33 @@ class RegistryCore {
       } else if (sort === "desc" && Number.isFinite(cursor.size)) {
         where.push("(size < ? OR (size = ? AND path < ?))")
         values.push(cursor.size, cursor.size, cursor.path)
-      } else if (sort === "path_desc") {
-        where.push("path < ?")
-        values.push(cursor.path)
+      } else if (sort === "name_desc" && typeof cursor.name === "string") {
+        where.push(
+          "(pinokio_path_name(path) < ? OR " +
+          "(pinokio_path_name(path) = ? AND path < ?))")
+        values.push(cursor.name, cursor.name, cursor.path)
+      } else if (sort === "name" && typeof cursor.name === "string") {
+        where.push(
+          "(pinokio_path_name(path) > ? OR " +
+          "(pinokio_path_name(path) = ? AND path > ?))")
+        values.push(cursor.name, cursor.name, cursor.path)
       } else if (sort === "path") {
         where.push("path > ?")
         values.push(cursor.path)
       }
     }
+    // Ordering by name means the name the row shows. It costs a scan, because
+    // no index covers a derived value, so it is only asked for when the user
+    // sorts by the Name column.
     const order = sort === "asc"
       ? "size ASC, path ASC"
       : sort === "desc"
         ? "size DESC, path DESC"
-        : sort === "path_desc"
-          ? "path DESC"
-          : "path ASC"
+        : sort === "name"
+          ? "pinokio_path_name(path) ASC, path ASC"
+          : sort === "name_desc"
+            ? "pinokio_path_name(path) DESC, path DESC"
+            : "path ASC"
     return this.database.prepare(`
       SELECT * FROM files
       ${where.length ? `WHERE ${where.join(" AND ")}` : ""}
@@ -5293,14 +5321,14 @@ class RegistryCore {
       if (rows.length < limit) stream.exhausted = true
       const last = rows[rows.length - 1]
       if (last) {
-        stream.cursor = {
-          sort,
-          size: last.size,
-          path: last.path
-        }
+        stream.cursor = this.cursorFor(sort, last)
       }
     }
-    for (const stream of streams) refill(stream, 1)
+    // One stream needs no merging, so it is filled in a single query. Several
+    // are probed a row at a time because most will not contribute much.
+    for (const stream of streams) {
+      refill(stream, streams.length === 1 ? pageSize + 1 : 1)
+    }
     const result = []
     while (result.length < pageSize + 1) {
       let selected = null
@@ -5316,7 +5344,10 @@ class RegistryCore {
       if (!selected) break
       result.push(selected.rows.shift())
       if (!selected.rows.length && !selected.exhausted) {
-        refill(selected, 16)
+        // Ask for what the page still needs. Refilling a fixed handful meant
+        // dozens of queries per page, which is invisible while an index serves
+        // them and ruinous for an order that has to scan.
+        refill(selected, Math.max(16, pageSize + 1 - result.length))
       }
     }
     return result
@@ -5565,9 +5596,13 @@ class RegistryCore {
       parentSeparator
     } = options
     // Size and name sorting are one server-side order, so only one can win.
+    // Name order is only ever asked for, never the default: it costs a scan,
+    // and the natural order of an inventory is its path order.
     const sort = sizeSort === "asc" || sizeSort === "desc"
       ? sizeSort
-      : nameSort === "desc" ? "path_desc" : "path"
+      : nameSort === "asc"
+        ? "name"
+        : nameSort === "desc" ? "name_desc" : "path"
     const rows = this.boundedFileRows({
       sourceIds,
       unrestricted,
@@ -5585,18 +5620,11 @@ class RegistryCore {
     if (hasMore) rows.pop()
     const last = rows[rows.length - 1]
     const nextCursor = hasMore && last
-      ? this.encodeCursor({
-        sort,
-        size: last.size,
-        path: last.path
-      })
+      ? this.encodeCursor(this.cursorFor(sort, last))
       : null
 
-    const rowCursors = rows.map((row) => this.encodeCursor({
-      sort,
-      size: row.size,
-      path: row.path
-    }))
+    const rowCursors = rows.map((row) =>
+      this.encodeCursor(this.cursorFor(sort, row)))
     const hashes = [...new Set(rows
       .filter((row) => row.status !== "linked")
       .map((row) => row.hash)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.0.113",
+  "version": "8.0.116",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/vault.css

@@ -1647,16 +1647,20 @@ body[data-vault-mode="global"] .vault-explorer {
 }
 .vault-text-button:hover { color: var(--task-text); }
 .vault-text-button:disabled { cursor: progress; opacity: .55; }
+/* The list is the only part that grows and scrolls; every other row keeps its
+   own height. Laying this out as fixed grid rows tied the footer's position to
+   how many children happened to be in flow, and a status row appearing or a
+   mode declaring a different count pushed the footer out of the pane, where no
+   amount of scrolling could reach it. */
 .vault-pane {
-  display: grid;
+  display: flex;
   min-width: 0;
   min-height: 0;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  flex-direction: column;
   overflow: hidden;
 }
-body[data-vault-mode="global"] .vault-pane {
-  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
-}
+.vault-pane > * { flex: 0 0 auto; }
+.vault-pane > .vault-table-wrap { min-height: 0; flex: 1 1 auto; }
 body.vault-page .vault-view-tabs {
   display: block;
   min-width: 0;
@@ -2192,6 +2196,10 @@ body.dark .vault-row-action .vault-text-button:hover:not(:disabled) {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  /* Now that it holds its own place at the bottom, it needs an edge: a short
+     list leaves empty space above it, and without a rule it reads as a stray
+     line of text rather than the foot of the table. */
+  border-top: 1px solid var(--task-border);
   padding: 9px var(--vault-inline) 11px;
   color: var(--task-muted);
   font-size: 10.5px;

package/server/public/vault.js

@@ -168,7 +168,7 @@ const COPY = {
   size: "Size",
   sort_largest: "Sort by size, largest first",
   sort_smallest: "Sort by size, smallest first",
-  show_more: "Show more",
+  page_number: "Page {page}",
   sort_a_z: "Sort by name, A to Z",
   sort_z_a: "Sort by name, Z to A",
   folders: "Folders",
@@ -332,7 +332,7 @@ const statusUrl = (progress = false) => {
     if (state.query) query.set("q", state.query)
     if (state.statusFilter !== "all") query.set("status_filter", state.statusFilter)
     if (state.sizeSort) query.set("size_sort", state.sizeSort)
-    if (state.nameSort === "desc") query.set("name_sort", "desc")
+    if (state.nameSort) query.set("name_sort", state.nameSort)
     // The server groups duplicates only for this view, but every view needs to
     // know the mode: the flat list matches the search against file names.
     if (state.displayMode === "files" && supportsDisplayMode()) {
@@ -365,7 +365,7 @@ const treeLevelUrl = (locationId, parent, cursor = null, directoryOffset = 0) =>
   if (state.statusFilter !== "all") query.set("status_filter", state.statusFilter)
   if (state.query) query.set("q", state.query)
   if (state.sizeSort) query.set("size_sort", state.sizeSort)
-  if (state.nameSort === "desc") query.set("name_sort", "desc")
+  if (state.nameSort) query.set("name_sort", state.nameSort)
   if (cursor) query.set("cursor", cursor)
   if (directoryOffset) query.set("directory_offset", String(directoryOffset))
   query.set("page_size", String(PAGE_SIZE))
@@ -460,7 +460,7 @@ const state = {
   statusFilter: "all",
   displayMode: "folders",
   sizeSort: null,
-  nameSort: "asc",
+  nameSort: null,
   collapsedSources: new Set(),
   // One entry per folder that has been opened, keyed by its path inside the
   // location. Folders start closed, so only what the user opens is fetched.
@@ -1924,32 +1924,34 @@ const invalidateTreeLevels = () => {
   state.treeLevels.clear()
   state.treeGeneration += 1
 }
-const loadTreeLevel = async (locationId, parent, append = false) => {
+// A level is a list, so it pages like one. Each page's starting position is
+// kept so Previous can return to it, the same way the flat file list keeps its
+// cursors.
+const loadTreeLevel = async (locationId, parent, page = 0) => {
   const key = levelKey(locationId, parent)
   const existing = state.treeLevels.get(key)
   if (existing && existing.loading) return
-  // A level continues from two places at once: how far down the folder list it
-  // got, and which file it stopped on.
   // Whatever the level is showing now was asked for under this generation. A
   // reply from an older one describes a search, filter or order that is gone.
   const generation = state.treeGeneration
-  const cursor = append && existing ? existing.nextCursor : null
-  const directoryOffset = append && existing
-    ? existing.nextDirectoryOffset || 0
-    : 0
+  const positions = existing && existing.positions
+    ? existing.positions
+    : [{ cursor: null, directoryOffset: 0 }]
+  const wanted = Math.max(0, Math.min(page, positions.length - 1))
+  const from = positions[wanted]
   state.treeLevels.set(key, {
-    items: existing && append ? existing.items : [],
+    items: existing ? existing.items : [],
     loading: true,
-    loaded: !!(existing && append),
+    loaded: !!existing,
     error: null,
-    hasNext: existing ? existing.hasNext : false,
-    nextCursor: existing ? existing.nextCursor : null,
-    nextDirectoryOffset: existing ? existing.nextDirectoryOffset : 0
+    page: wanted,
+    positions,
+    hasNext: existing ? existing.hasNext : false
   })
   render()
   try {
-    const data = await fetchJson(
-      treeLevelUrl(locationId, parent, cursor, directoryOffset))
+    const data = await fetchJson(treeLevelUrl(
+      locationId, parent, from.cursor, from.directoryOffset))
     if (generation !== state.treeGeneration) return
     // A scope holding one location has nothing to choose between, so it opens
     // rather than making the user click through a list of one.
@@ -1960,21 +1962,23 @@ const loadTreeLevel = async (locationId, parent, append = false) => {
     if (only) {
       const childKey = levelKey(only.location_id, "")
       state.expandedDirs.add(childKey)
-      if (!state.treeLevels.has(childKey)) {
-        loadTreeLevel(only.location_id, "")
-      }
+      if (!state.treeLevels.has(childKey)) loadTreeLevel(only.location_id, "")
+    }
+    const next = positions.slice(0, wanted + 1)
+    if (data.has_next) {
+      next.push({
+        cursor: data.next_cursor || null,
+        directoryOffset: Number(data.next_directory_offset) || 0
+      })
     }
-    const previous = state.treeLevels.get(key)
     state.treeLevels.set(key, {
-      items: append && previous
-        ? [...previous.items, ...(data.items || [])]
-        : (data.items || []),
+      items: data.items || [],
       loading: false,
       loaded: true,
       error: null,
-      hasNext: !!data.has_next,
-      nextCursor: data.next_cursor || null,
-      nextDirectoryOffset: Number(data.next_directory_offset) || 0
+      page: wanted,
+      positions: next,
+      hasNext: !!data.has_next
     })
   } catch (error) {
     if (generation !== state.treeGeneration) return
@@ -1983,9 +1987,9 @@ const loadTreeLevel = async (locationId, parent, append = false) => {
       loading: false,
       loaded: true,
       error: error && error.message ? error.message : String(error),
-      hasNext: false,
-      nextCursor: null,
-      nextDirectoryOffset: 0
+      page: 0,
+      positions: [{ cursor: null, directoryOffset: 0 }],
+      hasNext: false
     })
   }
   render()
@@ -2011,10 +2015,10 @@ const walkToReveal = async () => {
     // The folder on the way down can sit past the first page of a busy level,
     // so keep asking for more of that level until it appears or runs out.
     while (!next && level.hasNext) {
-      await loadTreeLevel(locationId, parent, true)
-      const grown = treeLevel(locationId, parent)
-      if (!grown || grown.error || grown.items.length === level.items.length) break
-      level = grown
+      await loadTreeLevel(locationId, parent, (Number(level.page) || 0) + 1)
+      const turned = treeLevel(locationId, parent)
+      if (!turned || turned.error || turned.page === level.page) break
+      level = turned
       next = match()
     }
     if (!next) break
@@ -2072,10 +2076,11 @@ const renderTreeLevel = (locationId, parent, depth) => {
     }
     return renderFileRow(entry, depth)
   }).join("")
-  const more = level.hasNext
-    ? treePlaceholderRow(depth, `<button class="vault-text-button" type="button" data-more-location="${attr(locationId || "")}" data-more-path="${attr(parent)}" ${level.loading ? "disabled" : ""}>${esc(COPY.show_more)}</button>`)
+  const page = Number(level.page) || 0
+  const paging = level.hasNext || page > 0
+    ? treePlaceholderRow(depth, `<span class="vault-pagination" role="navigation" aria-label="${attr(COPY.file_pages)}"><button class="vault-text-button" type="button" data-tree-page="previous" data-page-location="${attr(locationId || "")}" data-page-path="${attr(parent)}" ${page > 0 && !level.loading ? "" : "disabled"}>${esc(COPY.previous)}</button><span class="vault-page-range">${esc(COPY.page_number.replace("{page}", page + 1))}</span><button class="vault-text-button" type="button" data-tree-page="next" data-page-location="${attr(locationId || "")}" data-page-path="${attr(parent)}" ${level.hasNext && !level.loading ? "" : "disabled"}>${esc(COPY.next)}</button></span>`)
     : ""
-  return rows + more
+  return rows + paging
 }
 const groupTitle = (source) => {
   if (!source) return COPY.unknown_location
@@ -2093,10 +2098,13 @@ const sourceSort = (a, b) => {
   const rank = (source) => source && source.kind === "external" ? 1 : source ? 0 : 2
   return rank(first) - rank(second) || groupTitle(first).localeCompare(groupTitle(second))
 }
+// The flat list is ordered by the name its Name column shows, matching the
+// order the server paged in; the location is only the tie-break.
+const flatName = (item) => basename(item.relative_path)
 const flatLocation = (item) => externalLocation(item) ||
   [groupTitle(sourceById(item.source_id)), item.relative_path].filter(Boolean).join(" / ")
 const renderFlatFiles = (items) => [...items]
-  .sort((a, b) => compareRows(a, b, flatLocation))
+  .sort((a, b) => compareRows(a, b, flatName))
   .map((item) => {
     const expandable = Number(item.location_count) > 1
     return `<div class="vault-file-row">
@@ -2387,10 +2395,10 @@ const renderTable = (items) => {
   const sortableName = tableClass === "flat" ||
     tableClass === "inventory" ||
     tableClass === "matches"
-  const nameSortLabel = state.nameSort === "desc" ? COPY.sort_a_z : COPY.sort_z_a
+  const nameSortLabel = state.nameSort === "asc" ? COPY.sort_z_a : COPY.sort_a_z
   const nameSortIcon = state.nameSort === "desc"
     ? "fa-arrow-down-z-a"
-    : "fa-arrow-down-a-z"
+    : state.nameSort === "asc" ? "fa-arrow-down-a-z" : "fa-sort"
   const separatePagePaths = selectablePagePaths(items)
   const duplicatePagePaths = state.view === "duplicates"
     ? selectableDuplicatePagePaths(items)
@@ -2427,10 +2435,10 @@ const renderTable = (items) => {
     allPageSelected = separatePagePaths.every((filePath) =>
       state.selectedSeparateFiles.has(filePath))
   }
-  const nameSortButton = `<button class="vault-sort-button ${state.sizeSort ? "" : "active"}" type="button" data-sort-name aria-label="${attr(nameSortLabel)}">${esc(COPY.name)}<i class="fa-solid ${nameSortIcon}" aria-hidden="true"></i></button>`
+  const nameSortButton = `<button class="vault-sort-button ${state.nameSort ? "active" : ""}" type="button" data-sort-name aria-label="${attr(nameSortLabel)}">${esc(COPY.name)}<i class="fa-solid ${nameSortIcon}" aria-hidden="true"></i></button>`
   const nameHeader = (header) => {
     const inner = sortableName ? nameSortButton : `<span>${esc(header)}</span>`
-    const sorted = !sortableName || state.sizeSort
+    const sorted = !sortableName || !state.nameSort
       ? "none"
       : state.nameSort === "desc" ? "descending" : "ascending"
     if (pageSelectionAttribute) {
@@ -2461,7 +2469,7 @@ const orderedItems = (items) => {
       (blob) => blob.hash))
   }
   if (state.displayMode === "files" && supportsDisplayMode()) {
-    return [...items].sort((a, b) => compareRows(a, b, flatLocation))
+    return [...items].sort((a, b) => compareRows(a, b, flatName))
   }
   return [...items].sort((a, b) => {
     const sourceOrder = state.sourceId ? 0 : sourceSort([a.source_id], [b.source_id])
@@ -2522,7 +2530,9 @@ const paneFooterText = () => {
       ? COPY.sorted_largest
       : state.sizeSort === "asc"
         ? COPY.sorted_smallest
-        : state.nameSort === "desc" ? COPY.sorted_z_a : COPY.sorted_a_z
+        : state.nameSort === "desc"
+          ? COPY.sorted_z_a
+          : state.nameSort === "asc" ? COPY.sorted_a_z : ""
     return `${count}${order ? ` · ${order}` : ""}`
   }
   if (state.view === "duplicates") return COPY.duplicate_note
@@ -4021,17 +4031,23 @@ document.addEventListener("click", async (event) => {
       } else render()
     }
     return
-  } else if (target.dataset.morePath !== undefined) {
-    await loadTreeLevel(
-      target.dataset.moreLocation || null, target.dataset.morePath, true)
+  } else if (target.dataset.treePage) {
+    const locationId = target.dataset.pageLocation || null
+    const parent = target.dataset.pagePath
+    const level = treeLevel(locationId, parent)
+    const page = (Number(level && level.page) || 0) +
+      (target.dataset.treePage === "next" ? 1 : -1)
+    if (page < 0) return
+    await loadTreeLevel(locationId, parent, page)
+    // Only the root level owns the top of the table; paging a folder deeper in
+    // should leave the reader where they were looking.
+    if (!parent && !locationId) el("vault-table-wrap").scrollTop = 0
     return
   } else if (target.hasAttribute("data-sort-name")) {
     clearFileSelections()
     // Size ordering wins over name ordering server-side, so sorting by name
     // has to drop it rather than sit underneath it doing nothing visible.
-    state.nameSort = !state.sizeSort && state.nameSort === "asc"
-      ? "desc"
-      : "asc"
+    state.nameSort = state.nameSort === "asc" ? "desc" : "asc"
     state.sizeSort = null
     resetPage()
     await refresh(true)
@@ -4039,7 +4055,7 @@ document.addEventListener("click", async (event) => {
     clearFileSelections()
     state.displayMode = target.dataset.displayMode === "files" ? "files" : "folders"
     state.sizeSort = state.displayMode === "files" ? "desc" : null
-    state.nameSort = "asc"
+    state.nameSort = null
     resetPage()
     await refresh(true)
   } else if (target.dataset.view || target.id === "btn-review-cleanup") {
@@ -4050,7 +4066,7 @@ document.addEventListener("click", async (event) => {
     state.statusFilter = "all"
     state.displayMode = state.view === "shared" ? "files" : "folders"
     state.sizeSort = state.view === "shared" ? "desc" : null
-    state.nameSort = "asc"
+    state.nameSort = null
     if (state.view === "duplicates") {
       markScanReviewed()
       state.scanResult = null

package/test/vault-ui.test.js

@@ -485,22 +485,32 @@ const makePage = async (status, options = {}) => {
         directories.set(name,
           tally(directories.get(name) || empty(), entry))
       }
+      const merged = [
+        ...[...directories].map(([name, totals]) => Object.assign({
+          kind: "directory",
+          name,
+          label: name,
+          relative_path: `${prefix}${name}`,
+          source_id: locationId
+        }, totals)),
+        ...files
+      ]
+      // Honour the page size the client asks for, so a level that does not fit
+      // one page exercises the same continuation the server drives.
+      const limit = Math.max(1,
+        Number(parsed.searchParams.get("page_size")) || 500)
+      const from = Math.max(0,
+        Number(parsed.searchParams.get("directory_offset")) || 0)
+      const page = merged.slice(from, from + limit)
       return {
         ok: true,
         status: 200,
         json: async () => ({
           enabled: true,
           parent: treeParent,
-          items: [
-            ...[...directories].map(([name, totals]) => Object.assign({
-              kind: "directory",
-              name,
-              label: name,
-              relative_path: `${prefix}${name}`,
-              source_id: locationId
-            }, totals)),
-            ...files
-          ]
+          items: page,
+          has_next: from + page.length < merged.length,
+          next_directory_offset: from + page.length
         })
       }
     }
@@ -956,6 +966,55 @@ describe("Save Space interface", () => {
     dom.window.close()
   })
 
+  test("a folder level pages like the file list, one page at a time", async () => {
+    // More files in one folder than a page holds.
+    const many = Array.from({ length: 1200 }, (unused, index) => item({
+      path: `/pinokio/api/app/models/file-${String(index).padStart(4, "0")}.bin`,
+      relative_path: `models/file-${String(index).padStart(4, "0")}.bin`,
+      status: "tracked"
+    }))
+    const { dom, getRequests } = await makePage(fixture(many))
+    const document = dom.window.document
+
+    await openTree(document, waitFor)
+    const rowsNow = () => document.querySelectorAll(
+      "#vault-table-wrap .vault-file-row").length
+    // Wait for the folder's own level, not just the rows above it.
+    await waitFor(() => rowsNow() > 100)
+    const first = rowsNow()
+    // The level stops well short of the 1200 files it contains.
+    assert.ok(first < 1200, `expected a bounded level, rendered ${first}`)
+    // Every level request carries a page size; none asks for everything.
+    const sizes = getRequests
+      .map((url) => new URL(url, "http://localhost"))
+      .filter((url) => url.searchParams.get("tree_parent") !== null)
+      .map((url) => Number(url.searchParams.get("page_size")))
+    assert.ok(sizes.length > 0)
+    assert.ok(sizes.every((size) => size > 0 && size <= 500))
+
+    // The rest is a page away, and the level pages both ways.
+    const next = document.querySelector('[data-tree-page="next"]')
+    assert.ok(next, "expected the level to offer a next page")
+    assert.equal(document.querySelector('[data-tree-page="previous"]').disabled,
+      true)
+    // Read the first file on the page, not the folder rows above it.
+    const firstFile = () => [...document.querySelectorAll(
+      "#vault-table-wrap .vault-file-name")]
+      .map((node) => node.textContent)
+      .find((text) => /^file-\d+\.bin$/.test(text))
+    const opening = firstFile()
+    assert.ok(opening)
+    next.click()
+    await waitFor(() => firstFile() && firstFile() !== opening)
+    assert.match(document.querySelector(".vault-page-range").textContent,
+      /Page 2/)
+    // And back again lands on the page it came from.
+    document.querySelector('[data-tree-page="previous"]').click()
+    await waitFor(() => firstFile() === opening)
+    await settle()
+    dom.window.close()
+  })
+
   test("name sorting is offered wherever the Name column holds a name", async () => {
     const duplicate = item({
       path: "/pinokio/api/app/models/duplicate.bin",