chore: stage all pending work — caption styling, media server, processing modal, docs, summaries

Includes:
- Extended caption styling (font, shadow, dimmed color, bg toggle)
- Media server, subtitle downloader, VTT parser, processing modal
- Waveform tiers, thumbnail/timeline improvements, transport controls
- Hybrid download model, dependency management, clip export enhancements
- 21 chat summaries, 2 implementation plans, 2 design specs

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

src/lib/components/StatusBar.svelte

@@ -1,32 +1,43 @@
 <script lang="ts">
-  import { session } from '$lib/stores/videoSession.svelte';
+  import { session, upgradePreview } from '$lib/stores/videoSession.svelte';
 
-  let progressPercent = $derived(Math.round(session.downloadProgress * 100));
-  let isDownloading = $derived(
+  let previewPercent = $derived(Math.round(session.previewProgress * 100));
+  let exportPercent = $derived(Math.round(session.exportProgress * 100));
+
+  let isPreviewDownloading = $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)
+      session.previewStatus === 'downloading' &&
+      session.previewProgress > 0 &&
+      session.previewProgress < 1
   );
+
+  let isPreviewComplete = $derived(session.previewStatus === 'complete');
+  let isExportDownloading = $derived(session.exportStatus === 'downloading');
+  let isExportComplete = $derived(session.exportStatus === 'complete');
 </script>
 
 <div class="status-bar">
-  {#if isDownloading}
+  {#if isPreviewDownloading}
     <div class="progress-bar">
-      <div class="progress-fill" style="width: {progressPercent}%"></div>
+      <div class="progress-fill" style="width: {previewPercent}%"></div>
     </div>
-    <span class="status-text">Downloading: {progressPercent}%</span>
-  {:else if isDownloaded}
-    <span class="status-text success">✓ Downloaded: {session.title}</span>
+    <span class="status-text">Preview: {previewPercent}%</span>
+  {:else if isPreviewComplete && isExportDownloading}
+    <span class="status-text success">✓ Preview ready</span>
+    <div class="progress-bar">
+      <div class="progress-fill" style="width: {exportPercent}%"></div>
+    </div>
+    <span class="status-text">Best quality: {exportPercent}%</span>
+  {:else if isPreviewComplete && isExportComplete}
+    <span class="status-text success">✓ {session.title} — ready to export</span>
+    {#if session.showUpgradeToast}
+      <button class="upgrade-link" onclick={upgradePreview}>Reload Preview (HQ)</button>
+    {/if}
   {: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'}
+  {:else if session.status === 'ready' && session.previewStatus === 'idle'}
+    <span class="status-text">Preparing download…</span>
+  {:else if session.previewStatus === 'failed' || session.exportStatus === 'failed'}
     <span class="status-text">Download failed</span>
   {:else}
     <span class="status-text">Ready</span>
@@ -64,4 +75,20 @@
   .success {
     color: var(--success);
   }
+
+  .upgrade-link {
+    background: none;
+    border: 1px solid var(--accent, #89b4fa);
+    color: var(--accent, #89b4fa);
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 3px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .upgrade-link:hover {
+    background: var(--accent, #89b4fa);
+    color: var(--bg-primary, #1e1e2e);
+  }
 </style>