Fix FileList live-reference bug in directory picker

FileList is a live object — e.target.value = "" empties it in place,
so the previous Array.from(files) after the reset always returned [].
Fix by snapshotting to Array before the reset.

Also improve the no-.arrow-files error to list the files that actually
arrived, making it easier to diagnose if the directory structure is
different from what's expected.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: nabeelre

src/App.jsx

@@ -67,16 +67,19 @@ export default function App() {
   };
 
   const handleDirChange = (e) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) return;
+    // Snapshot the FileList into an Array BEFORE resetting the input value.
+    // FileList is a live object — e.target.value = "" empties it in place,
+    // so any Array.from() call after the reset returns [].
+    const fileArray = Array.from(e.target.files);
     e.target.value = "";
+    if (fileArray.length === 0) return;
     const dirName =
-      files[0]?.webkitRelativePath?.split("/")[0] ?? files[0]?.name ?? "dataset";
+      fileArray[0]?.webkitRelativePath?.split("/")[0] ?? fileArray[0]?.name ?? "dataset";
     const descriptor = {
       id: `hf-disk::${dirName}`,
       label: dirName,
       source: "hf-disk",
-      files: Array.from(files),
+      files: fileArray,
     };
     setDatasets((prev) => {
       const without = prev.filter((d) => d.id !== descriptor.id);

src/data/HFDiskDataSource.js

@@ -11,12 +11,14 @@ import { tableFromIPC, DataType } from "apache-arrow";
 export class HFDiskDataSource extends DataSource {
   constructor(files) {
     super();
-    this._shards = Array.from(files)
+    const all = Array.from(files);
+    this._shards = all
       .filter((f) => f.name.endsWith(".arrow"))
       .sort((a, b) => a.name.localeCompare(b.name));
-    this._infoFile = Array.from(files).find((f) => f.name === "dataset_info.json");
+    this._infoFile = all.find((f) => f.name === "dataset_info.json");
     this.dirName =
-      files[0]?.webkitRelativePath?.split("/")[0] ?? files[0]?.name ?? "dataset";
+      all[0]?.webkitRelativePath?.split("/")[0] ?? all[0]?.name ?? "dataset";
+    this._allNames = all.map((f) => f.webkitRelativePath || f.name);
   }
 
   async getInfo() {
@@ -38,9 +40,11 @@ export class HFDiskDataSource extends DataSource {
 
   async getRows({ offset = 0, length = 100 } = {}) {
     if (this._shards.length === 0) {
+      const preview = this._allNames.slice(0, 8).join(", ") || "none";
       throw new Error(
         `No .arrow files found in "${this.dirName}". ` +
-          "Make sure you selected the directory containing the Arrow shards."
+          `Files received: ${preview}${this._allNames.length > 8 ? ", …" : ""}. ` +
+          "Select the directory that directly contains the .arrow shards."
       );
     }