feat: download button in clip player — watch first, then save

public/app.js

@@ -219,13 +219,25 @@ function renderClips(clips) {
     });
 }
 function playClip(path) {
-    document.getElementById('pb-player').classList.remove('hidden');
+    const player = document.getElementById('pb-player');
+    player.classList.remove('hidden');
     document.getElementById('pb-video').src = '/recordings/' + path;
+    // Store path for download button.
+    player.dataset.path = path;
 }
 document.getElementById('pb-close').addEventListener('click', () => {
     document.getElementById('pb-player').classList.add('hidden');
     document.getElementById('pb-video').src = '';
 });
+document.getElementById('pb-download').addEventListener('click', () => {
+    const path = document.getElementById('pb-player').dataset.path;
+    if (path) {
+        const a = document.createElement('a');
+        a.href = '/recordings/' + path;
+        a.download = path.split('/').pop();
+        a.click();
+    }
+});
 
 // ── Settings / Onboarding ──
 async function renderCameraCards() {

public/index.html

@@ -50,7 +50,10 @@
             <div id="pb-clips" class="clip-grid"></div>
             <div id="pb-player" class="clip-player hidden">
                 <video id="pb-video" controls></video>
-                <button id="pb-close">✕ Close</button>
+                <div style="display:flex;gap:8px;margin-top:12px">
+                    <button id="pb-download" class="btn-primary">⬇ Download</button>
+                    <button id="pb-close">✕ Close</button>
+                </div>
             </div>
         </section>
 

public/style.css

@@ -143,6 +143,7 @@ body {
 .clip-player.hidden { display: none; }
 .clip-player video { max-width: 90%; max-height: 80%; }
 .clip-player button { margin-top: 12px; }
+.clip-player .btn-primary { background: var(--accent); color: #fff; border: none; padding: 8px 20px; border-radius: var(--radius); cursor: pointer; font-size: 14px; }
 
 /* ── Settings ── */
 .settings-toolbar {