feat: add background download manager with progress reporting

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/StatusBar.svelte

@@ -1,5 +1,36 @@
+<script lang="ts">
+  import { session } from '$lib/stores/videoSession.svelte';
+
+  let progressPercent = $derived(Math.round(session.downloadProgress * 100));
+  let isDownloading = $derived(
+    session.status === 'ready' &&
+      session.downloadStatus === 'downloading' &&
+      session.downloadProgress > 0 &&
+      session.downloadProgress < 1
+  );
+  let isDownloaded = $derived(
+    session.localFilePath !== null &&
+      (session.downloadStatus === 'complete' || session.downloadProgress >= 1)
+  );
+</script>
+
 <div class="status-bar">
-  <span class="status-text">Ready</span>
+  {#if isDownloading}
+    <div class="progress-bar">
+      <div class="progress-fill" style="width: {progressPercent}%"></div>
+    </div>
+    <span class="status-text">Downloading: {progressPercent}%</span>
+  {:else if isDownloaded}
+    <span class="status-text success">✓ Downloaded: {session.title}</span>
+  {:else if session.status === 'resolving'}
+    <span class="status-text">Resolving URL…</span>
+  {:else if session.status === 'ready' && session.downloadStatus === 'downloading'}
+    <span class="status-text">Starting download…</span>
+  {:else if session.downloadStatus === 'failed'}
+    <span class="status-text">Download failed</span>
+  {:else}
+    <span class="status-text">Ready</span>
+  {/if}
 </div>
 
 <style>
@@ -12,5 +43,25 @@
     font-size: 12px;
     color: var(--text-secondary);
     min-height: 24px;
+    gap: 8px;
+  }
+
+  .progress-bar {
+    flex: 1;
+    height: 4px;
+    background: var(--bg-primary);
+    border-radius: 2px;
+    overflow: hidden;
+    max-width: 200px;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: var(--accent);
+    transition: width 0.3s ease;
+  }
+
+  .success {
+    color: var(--success);
   }
 </style>