Add auto-scroll, file dialog, and transcript editing

- Auto-scroll transcript to active segment during playback with smart
  pause when user manually scrolls (resumes after 3s)
- Replace prompt() with native Tauri file dialog for audio/video import
  with file type filters
- Add inline transcript editing via double-click with Enter to save,
  Esc to cancel, preserving original text for change tracking
- Show "edited" badge on modified segments

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

src/lib/components/TranscriptEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { segments, speakers } from '$lib/stores/transcript';
-  import { currentTimeMs } from '$lib/stores/playback';
+  import { currentTimeMs, isPlaying } from '$lib/stores/playback';
   import type { Segment, Word, Speaker } from '$lib/types/transcript';
 
   interface Props {
@@ -11,6 +11,9 @@
   let { onWordClick, onTextEdit }: Props = $props();
 
   let transcriptContainer: HTMLDivElement;
+  let autoScroll = $state(true);
+  let lastActiveSegmentId = $state('');
+  let userScrollTimeout: ReturnType<typeof setTimeout> | null = null;
 
   function getSpeakerName(speakerId: string | null, speakerList: Speaker[]): string {
     if (!speakerId) return 'Unknown';
@@ -39,12 +42,75 @@
     return currentMs >= segment.start_ms && currentMs <= segment.end_ms;
   }
 
+  let editingSegmentId = $state<string | null>(null);
+  let editText = $state('');
+
   function handleWordClick(word: Word) {
     onWordClick?.(word.start_ms);
   }
+
+  function startEditing(segment: Segment) {
+    editingSegmentId = segment.id;
+    // Combine word texts or fall back to segment text
+    editText = segment.words.length > 0
+      ? segment.words.map(w => w.word).join(' ')
+      : segment.text;
+  }
+
+  function finishEditing(segmentId: string) {
+    const trimmed = editText.trim();
+    if (trimmed) {
+      // Update the segment text in the store
+      segments.update(segs => segs.map(s => {
+        if (s.id !== segmentId) return s;
+        return {
+          ...s,
+          text: trimmed,
+          original_text: s.original_text ?? s.text,
+          is_edited: true,
+          edited_at: new Date().toISOString(),
+        };
+      }));
+      onTextEdit?.(segmentId, trimmed);
+    }
+    editingSegmentId = null;
+  }
+
+  function handleEditKeydown(e: KeyboardEvent, segmentId: string) {
+    if (e.key === 'Escape') {
+      editingSegmentId = null;
+    } else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      finishEditing(segmentId);
+    }
+  }
+
+  // Pause auto-scroll when user manually scrolls, resume after 3 seconds
+  function handleScroll() {
+    if (!$isPlaying) return;
+    autoScroll = false;
+    if (userScrollTimeout) clearTimeout(userScrollTimeout);
+    userScrollTimeout = setTimeout(() => {
+      autoScroll = true;
+    }, 3000);
+  }
+
+  // Auto-scroll to the active segment during playback
+  $effect(() => {
+    if (!$isPlaying || !autoScroll || !transcriptContainer) return;
+    const currentMs = $currentTimeMs;
+    const activeSegment = $segments.find(s => isSegmentActive(s, currentMs));
+    if (!activeSegment || activeSegment.id === lastActiveSegmentId) return;
+    lastActiveSegmentId = activeSegment.id;
+
+    const el = transcriptContainer.querySelector(`[data-segment-id="${activeSegment.id}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  });
 </script>
 
-<div class="transcript-editor" bind:this={transcriptContainer}>
+<div class="transcript-editor" bind:this={transcriptContainer} onscroll={handleScroll}>
   {#if $segments.length === 0}
     <div class="empty-state">
       <p>No transcript yet</p>
@@ -55,6 +121,7 @@
       <div
         class="segment"
         class:active={isSegmentActive(segment, $currentTimeMs)}
+        data-segment-id={segment.id}
       >
         <div class="segment-header">
           <span
@@ -65,20 +132,36 @@
           </span>
           <span class="timestamp">{formatTimestamp(segment.start_ms)}</span>
         </div>
-        <div class="segment-text">
-          {#each segment.words as word (word.id)}
-            <span
-              class="word"
-              class:word-active={isWordActive(word, $currentTimeMs)}
-              onclick={() => handleWordClick(word)}
-              role="button"
-              tabindex="0"
-              onkeydown={(e) => { if (e.key === 'Enter') handleWordClick(word); }}
-            >{word.word} </span>
-          {:else}
-            <span class="segment-plain-text">{segment.text}</span>
-          {/each}
-        </div>
+        {#if editingSegmentId === segment.id}
+          <div class="segment-edit">
+            <textarea
+              class="edit-textarea"
+              bind:value={editText}
+              onblur={() => finishEditing(segment.id)}
+              onkeydown={(e) => handleEditKeydown(e, segment.id)}
+            ></textarea>
+            <span class="edit-hint">Enter to save, Esc to cancel</span>
+          </div>
+        {:else}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="segment-text" ondblclick={() => startEditing(segment)}>
+            {#each segment.words as word (word.id)}
+              <span
+                class="word"
+                class:word-active={isWordActive(word, $currentTimeMs)}
+                onclick={() => handleWordClick(word)}
+                role="button"
+                tabindex="0"
+                onkeydown={(e) => { if (e.key === 'Enter') handleWordClick(word); }}
+              >{word.word} </span>
+            {:else}
+              <span class="segment-plain-text">{segment.text}</span>
+            {/each}
+            {#if segment.is_edited}
+              <span class="edited-badge">edited</span>
+            {/if}
+          </div>
+        {/if}
       </div>
     {/each}
   {/if}
@@ -151,4 +234,37 @@
   .segment-plain-text {
     color: #ccc;
   }
+  .segment-edit {
+    padding-left: 0.75rem;
+  }
+  .edit-textarea {
+    width: 100%;
+    min-height: 3rem;
+    background: #1a1a2e;
+    color: #e0e0e0;
+    border: 1px solid #e94560;
+    border-radius: 4px;
+    padding: 0.5rem;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.6;
+    resize: vertical;
+  }
+  .edit-textarea:focus {
+    outline: none;
+    border-color: #ff6b81;
+  }
+  .edit-hint {
+    font-size: 0.7rem;
+    color: #666;
+  }
+  .edited-badge {
+    font-size: 0.65rem;
+    color: #e94560;
+    background: rgba(233, 69, 96, 0.15);
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
 </style>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { invoke } from '@tauri-apps/api/core';
+  import { open } from '@tauri-apps/plugin-dialog';
   import WaveformPlayer from '$lib/components/WaveformPlayer.svelte';
   import TranscriptEditor from '$lib/components/TranscriptEditor.svelte';
   import SpeakerManager from '$lib/components/SpeakerManager.svelte';
@@ -20,8 +21,14 @@
   }
 
   async function handleFileImport() {
-    // For now, use a simple prompt — will be replaced with Tauri file dialog
-    const filePath = prompt('Enter path to audio/video file:');
+    const filePath = await open({
+      multiple: false,
+      filters: [{
+        name: 'Audio/Video',
+        extensions: ['mp3', 'wav', 'flac', 'ogg', 'm4a', 'aac', 'wma',
+                     'mp4', 'mkv', 'avi', 'mov', 'webm'],
+      }],
+    });
     if (!filePath) return;
 
     // Convert file path to URL for wavesurfer