Stop auto-loading the first video from a folder/multi-select pick

Her real-world finding: after a hard reset, a folder pick that only
populated the roster (without auto-loading anything) felt immediate,
while the normal auto-load-the-first-one path had read as stuck. Likely
cause - auto-loading fired a full video-load cascade (decode, frame
render, metrics panels appearing) at the same moment OpenCV.js might
still be mid-download, competing for attention and making an unrelated
few-seconds wait look like the whole app hanging.

Open folder/Select videos now just populate the roster and stop; the
status line says how many were found and to click one. Better default
regardless of the OpenCV theory - a batch pick is "here's what's here,"
not "open this one specifically."

Also: "Select videos" already filters to video files (accept=
"video/mp4,.mp4"), unlike "Open folder" which walks a whole directory
tree by design and can't be filtered by type - a real browser
limitation, not something this app can route around. Updated the button
row's copy to say so directly, since pointing "Open folder" at a folder
with mixed file types is exactly what triggers the browser's own scary
"upload N files?" warning before any of our own filtering ever runs.

Tested end to end: selecting two videos via Select videos populates the
roster with both marked "Not opened yet," loads neither automatically,
and clicking one loads it correctly. 75/75 tests pass.

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

Author: sschabacker

app/index.html

@@ -142,10 +142,16 @@
   #dropZone {
     border: 2px dashed var(--border);
     border-radius: 8px;
-    padding: 1.25rem 1.5rem;
+    padding: 0.85rem 1.25rem;
     text-align: center;
-    margin: 1rem 0;
+    margin: 0.75rem 0;
   }
+  /* Every row in here was carrying the browser's default ~1em paragraph
+     margin (plus, on two rows, an explicit margin-top on top of that) -
+     the accumulated whitespace across 4 stacked rows was the real source
+     of "still looks huge," not just the button/padding sizing fixed
+     earlier. */
+  #dropZone p { margin: 0.35rem 0; }
   #dropZone.drag-over {
     border-color: var(--accent);
     background: #eef4fb;
@@ -197,9 +203,9 @@
     font-size: 0.95rem;
   }
   #dropZone label:focus-within { outline: 3px solid #000; outline-offset: 2px; }
-  #openProjectFileRow { margin-top: 1rem; font-size: 0.9rem; color: #555; }
+  #openProjectFileRow { font-size: 0.9rem; color: #555; }
   #openProjectFileRow button { font-size: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); background: white; }
-  #openMultipleRow { margin-top: 0.5rem; font-size: 0.9rem; color: #555; }
+  #openMultipleRow { font-size: 0.9rem; color: #555; }
   #openMultipleRow button { font-size: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); background: white; }
   #pendingFolderFilesEl { margin-top: 0.5rem; font-size: 0.85rem; color: #555; }
   #projectFileSummary {
@@ -661,11 +667,7 @@
 <div class="app">
   <header class="topbar">
     <h1>Barnes Maze Pipeline</h1>
-    <p class="subtitle">Load a video, then compute its median background image.</p>
-    <details class="info-toggle">
-      <summary>What does this mean?</summary>
-      <p class="subtitle">Load a video, step through it frame-accurately, and compute its median background image.</p>
-    </details>
+    <p class="subtitle">Load a video, step through it frame-accurately, and compute its median background image.</p>
   </header>
   <div class="main">
     <aside class="roster" id="rosterColumn">
@@ -704,7 +706,7 @@ <h2>Videos</h2>
     <input type="file" id="fileInput" accept="video/mp4,.mp4">
     <p id="openProjectFileRow">Already tracked this one? <button type="button" id="openProjectFileBtn">Open project file</button></p>
     <input type="file" id="projectFileInput" accept="application/json,.json" hidden>
-    <p id="openMultipleRow">Working through several trials? <button type="button" id="openFolderBtn">Open folder</button> <button type="button" id="selectVideosBtn">Select videos</button></p>
+    <p id="openMultipleRow">Working through several trials? <button type="button" id="openFolderBtn">Open folder</button> (a folder with just your videos in it) or <button type="button" id="selectVideosBtn">Select videos</button> (pick specific files - filtered to videos only, so this is the one to use if your videos share a folder with other file types).</p>
     <input type="file" id="folderInput" webkitdirectory multiple hidden>
     <input type="file" id="multiVideoInput" accept="video/mp4,.mp4" multiple hidden>
     <p id="loadExampleRow">New here? <button type="button" id="loadExampleBtn">Load an example (test50)</button> - fetches a real sample clip and its saved analysis, no video of your own required.</p>

app/js/app.js

@@ -1428,20 +1428,20 @@ function rosterEntryFor(file, opened = false) {
 // The actual "load the first one, hold the rest" behavior - split out from
 // handleMultipleFiles() so the roster-conflict banner's two buttons can
 // resume it after her decision without duplicating this logic.
+// Deliberately does NOT auto-load the first video - a batch pick (Open
+// folder/Select videos) is "here's what's available," not "open this one
+// specifically," and auto-loading used to fire a full video-load cascade
+// (decode, frame render, metrics panels appearing) at the exact moment
+// OpenCV.js might still be mid-download, which read as the whole app being
+// stuck rather than one unrelated thing still loading. Populating the
+// roster and waiting for a click is calmer either way, and matches how
+// the roster already treats a video seen via a folder pick but not yet
+// opened - this just stops making an exception for the first one.
 async function proceedWithFolderFiles(videoFiles, skippedCount) {
     videoFiles.forEach((f) => knownFiles.set(videoKeyFor(f), f));
-
-    // Awaited, and the summary status set AFTER, on purpose: loadVideo()
-    // sets its own "Loaded X: N frames" status partway through this same
-    // call - setting the "found N videos" message BEFORE that meant it
-    // got silently overwritten within the same action and was never
-    // actually seen. This message is deliberately the LAST word on what
-    // just happened, not the first.
-    await loadVideoOrSwitch(videoFiles[0]);
-    const remaining = videoFiles.length - 1;
+    await renderRosterList();
     setStatus(
-        `Loaded ${videoFiles[0].name} (1 of ${videoFiles.length}).` +
-        (remaining > 0 ? ` ${remaining} more in the Videos list on the left.` : '') +
+        `Found ${videoFiles.length} video${videoFiles.length === 1 ? '' : 's'} - click one in the Videos list on the left to open it.` +
         (skippedCount > 0 ? ` (${skippedCount} other file${skippedCount === 1 ? '' : 's'} in that selection skipped - not .mp4.)` : ''),
         'success'
     );