Stop auto-loading first video from a folder pick; add an audit-marker filename

Two real findings from hands-on testing:

1. Auto-loading the first video the instant you pick a folder fired a
   full load cascade (decode, frame render, metrics panels) at the same
   moment OpenCV.js might still be mid-download - two things competing
   for attention made an unrelated few-second wait look like the whole
   app hanging. Open folder/Select videos now just populate the roster
   and stop; you click to open one. Better default regardless: a batch
   pick is "here's what's here," not "open this one specifically."

2. "Select videos" already filters to video files; "Open folder" walks
   a whole directory by design and can't be filtered by type (a real
   browser limitation - the "upload N files?" warning fires before any
   of our own filtering runs). Button row copy now says which to use
   when videos share a folder with other file types.

Also: the saved project file's suggested filename is now
"<video>_AUDITED.bmp.json", not just "<video>.bmp.json" - lets a
non-technical reader tell a trial's done at a glance in a shared folder,
without knowing what the file format even is. Verified safe first:
checkVideoFingerprint() (project-file.js:188) matches a reload by the
video's actual decode fingerprint, never by filename, so this is a pure
naming convention with zero reload risk. Logged in KNOWN_LIMITATIONS.md
alongside what it doesn't solve - still opt-in, nothing enforces it.

Two small label fixes from her live testing: the ROI keyboard dropdown
read "No mouse?" in a mouse-tracking tool - now "Keyboard only?". Topbar
toggle removed - its short and full lines were nearly identical, so the
disclosure added friction for no real payoff.

75/75 tests pass.

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

Author: sschabacker

KNOWN_LIMITATIONS.md

@@ -342,3 +342,14 @@
     solves the more urgent version of "where did my other videos go";
     this solves a slower, on-disk version of the same question that a
     saved project file already answers well enough.
+  - Cheap follow-up, added same day: the saved project file's suggested
+    filename is now `<video>_AUDITED.bmp.json`, not just
+    `<video>.bmp.json` - a non-technical reader browsing the folder can
+    tell a trial's done without knowing what the file format even is.
+    Verified safe: `checkVideoFingerprint()` (`project-file.js:188`)
+    matches a reloaded project file by its actual video fingerprint
+    (frame count, duration, dimensions, size), never by filename, so
+    this is a pure naming convention with no reload risk. Still opt-in
+    and un-enforced - nothing stops someone from skipping the save or
+    saving it somewhere other than next to the video - which is the real
+    remaining gap this doesn't close.

app/index.html

@@ -870,7 +870,7 @@ <h2>Videos</h2>
       </div>
       <p class="subtitle" id="trackScrubHint" hidden>Scrub the frame viewer above - green crosshair = tracked, red X = failed frame.</p>
 
-      <p class="subtitle" id="saveProjectFileHint" hidden>Save a portable <code>.bmp.json</code> file with everything except the video itself (which stays wherever it already lives) - open it later, on any computer, to resume without re-tracking.</p>
+      <p class="subtitle" id="saveProjectFileHint" hidden>Save a portable <code>_AUDITED.bmp.json</code> file with everything except the video itself (which stays wherever it already lives) - open it later, on any computer, to resume without re-tracking. Save it in the same folder as the video, next to it - the name makes it obvious at a glance, to you or anyone else, that this trial's already been done.</p>
       <button id="saveProjectFileBtn" type="button" hidden>Save project file</button>
       <div id="saveProjectFileStatus" role="status" aria-live="polite"></div>
     </div>
@@ -1008,7 +1008,7 @@ <h3>Confirm &amp; adjust</h3>
               <p class="subtitle">Drag a circle's edge to resize it, drag its middle to move it. Click a hole (no drag) to mark it as the target - or use the dropdown below if clicking precisely is awkward on a small screen.</p>
             </details>
             <div id="roiKeyboardNudge">
-              <label for="roiShapeSelect">No mouse? Select a shape to adjust:</label>
+              <label for="roiShapeSelect">Keyboard only? Select a shape to adjust:</label>
               <select id="roiShapeSelect"><option value="">- none -</option></select>
               <p class="subtitle">Arrow keys move it, +/&minus; resizes it - hold Shift for bigger steps. Selecting a shape moves focus to the image below.</p>
             </div>

app/js/app.js

@@ -3194,8 +3194,15 @@ saveProjectFileBtn.addEventListener('click', () => {
         classifierOverride,
     });
 
+    // "_AUDITED" in the suggested filename, not just ".bmp.json" - the
+    // point is a non-technical reader browsing the video folder can tell
+    // this trial's already done without knowing what a project file even
+    // is. Purely a filename convention: checkVideoFingerprint() below
+    // never checks what a reloaded project file is named on disk, only
+    // what's inside it, so renaming this (or a saved copy of it) later
+    // can't break reloading it.
     const baseName = currentFileName.replace(/\.[^.]+$/, '');
-    downloadFile(`${baseName}.bmp.json`, json, 'application/json;charset=utf-8');
+    downloadFile(`${baseName}_AUDITED.bmp.json`, json, 'application/json;charset=utf-8');
 
     saveProjectFileStatusEl.textContent = 'Project file saved. Keep it with the video - re-opening both together resumes without re-tracking.';
     saveProjectFileStatusEl.dataset.level = 'success';