Add cancel button to processing overlay with confirmation

- Cancel button on the progress overlay during transcription
- Clicking Cancel shows confirmation: "Processing is incomplete. If you
  cancel now, the transcription will need to be started over."
- "Continue Processing" dismisses the dialog, "Cancel Processing" stops
- Cancel clears partial results (segments, speakers) and resets UI
- Pipeline results are discarded if cancelled during processing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/lib/components/ProgressOverlay.svelte

@@ -4,9 +4,25 @@
     percent?: number;
     stage?: string;
     message?: string;
+    onCancel?: () => void;
   }
 
-  let { visible = false, percent = 0, stage = '', message = '' }: Props = $props();
+  let { visible = false, percent = 0, stage = '', message = '', onCancel }: Props = $props();
+
+  let showConfirm = $state(false);
+
+  function handleCancelClick() {
+    showConfirm = true;
+  }
+
+  function confirmCancel() {
+    showConfirm = false;
+    onCancel?.();
+  }
+
+  function dismissCancel() {
+    showConfirm = false;
+  }
 
   // Pipeline steps in order
   const pipelineSteps = [
@@ -89,6 +105,20 @@
 
       <p class="status-text">{message || 'Please wait...'}</p>
       <p class="hint-text">This may take several minutes for large files</p>
+
+      {#if onCancel && !showConfirm}
+        <button class="cancel-btn" onclick={handleCancelClick}>Cancel</button>
+      {/if}
+
+      {#if showConfirm}
+        <div class="confirm-box">
+          <p class="confirm-text">Processing is incomplete. If you cancel now, the transcription will need to be started over.</p>
+          <div class="confirm-actions">
+            <button class="confirm-keep" onclick={dismissCancel}>Continue Processing</button>
+            <button class="confirm-cancel" onclick={confirmCancel}>Cancel Processing</button>
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 {/if}
@@ -174,4 +204,62 @@
     font-size: 0.75rem;
     color: #555;
   }
+  .cancel-btn {
+    margin-top: 1.25rem;
+    width: 100%;
+    padding: 0.5rem;
+    background: none;
+    border: 1px solid #4a5568;
+    color: #999;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+  }
+  .cancel-btn:hover {
+    color: #e0e0e0;
+    border-color: #e94560;
+  }
+  .confirm-box {
+    margin-top: 1.25rem;
+    padding: 0.75rem;
+    background: rgba(233, 69, 96, 0.08);
+    border: 1px solid #e94560;
+    border-radius: 6px;
+  }
+  .confirm-text {
+    margin: 0 0 0.75rem;
+    font-size: 0.8rem;
+    color: #e0e0e0;
+    line-height: 1.4;
+  }
+  .confirm-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .confirm-keep {
+    flex: 1;
+    padding: 0.4rem;
+    background: #0f3460;
+    border: 1px solid #4a5568;
+    color: #e0e0e0;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+  }
+  .confirm-keep:hover {
+    background: #1a4a7a;
+  }
+  .confirm-cancel {
+    flex: 1;
+    padding: 0.4rem;
+    background: #e94560;
+    border: none;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+  }
+  .confirm-cancel:hover {
+    background: #d63851;
+  }
 </style>