Phase 2: Core transcription pipeline and audio playback

- Implement faster-whisper TranscribeService with word-level timestamps,
  progress reporting, and hardware auto-detection
- Wire up Rust SidecarManager for Python process lifecycle (spawn, IPC, shutdown)
- Add transcribe_file Tauri command bridging frontend to Python sidecar
- Integrate wavesurfer.js WaveformPlayer with play/pause, skip, seek controls
- Build TranscriptEditor with word-level click-to-seek and active highlighting
- Connect file import flow: prompt → asset load → transcribe → display
- Add typed tauri-bridge service with TranscriptionResult interface
- Add Python tests for hardware detection and transcription result formatting

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

src/lib/components/WaveformPlayer.svelte

@@ -1,17 +1,144 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import WaveSurfer from 'wavesurfer.js';
+  import { isPlaying, currentTimeMs, durationMs } from '$lib/stores/playback';
+
+  interface Props {
+    audioUrl?: string;
+    onSeek?: (timeMs: number) => void;
+  }
+
+  let { audioUrl = '', onSeek }: Props = $props();
+
+  let container: HTMLDivElement;
+  let wavesurfer: WaveSurfer | null = $state(null);
+  let currentTime = $state('0:00');
+  let totalTime = $state('0:00');
+
+  function formatTime(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  }
+
+  onMount(() => {
+    wavesurfer = WaveSurfer.create({
+      container,
+      waveColor: '#4a5568',
+      progressColor: '#e94560',
+      cursorColor: '#e94560',
+      height: 80,
+      barWidth: 2,
+      barGap: 1,
+      barRadius: 2,
+    });
+
+    wavesurfer.on('timeupdate', (time: number) => {
+      currentTimeMs.set(Math.round(time * 1000));
+      currentTime = formatTime(time);
+    });
+
+    wavesurfer.on('ready', () => {
+      const dur = wavesurfer!.getDuration();
+      durationMs.set(Math.round(dur * 1000));
+      totalTime = formatTime(dur);
+    });
+
+    wavesurfer.on('play', () => isPlaying.set(true));
+    wavesurfer.on('pause', () => isPlaying.set(false));
+    wavesurfer.on('finish', () => isPlaying.set(false));
+
+    if (audioUrl) {
+      wavesurfer.load(audioUrl);
+    }
+  });
+
+  onDestroy(() => {
+    wavesurfer?.destroy();
+  });
+
+  function togglePlayPause() {
+    wavesurfer?.playPause();
+  }
+
+  function skipBack() {
+    if (wavesurfer) {
+      const time = Math.max(0, wavesurfer.getCurrentTime() - 5);
+      wavesurfer.setTime(time);
+    }
+  }
+
+  function skipForward() {
+    if (wavesurfer) {
+      const time = Math.min(wavesurfer.getDuration(), wavesurfer.getCurrentTime() + 5);
+      wavesurfer.setTime(time);
+    }
+  }
+
+  /** Seek to a specific time in milliseconds. Called from transcript click-to-seek. */
+  export function seekTo(timeMs: number) {
+    if (wavesurfer) {
+      wavesurfer.setTime(timeMs / 1000);
+      if (!wavesurfer.isPlaying()) {
+        wavesurfer.play();
+      }
+    }
+  }
+
+  /** Load a new audio file. */
+  export function loadAudio(url: string) {
+    wavesurfer?.load(url);
+  }
+</script>
+
 <div class="waveform-player">
-  <p>Waveform Player</p>
-  <p class="placeholder">wavesurfer.js will be integrated here</p>
+  <div class="waveform-container" bind:this={container}></div>
+  <div class="controls">
+    <button class="control-btn" onclick={skipBack} title="Back 5s">⏪</button>
+    <button class="control-btn play-btn" onclick={togglePlayPause} title="Play/Pause">
+      {#if $isPlaying}⏸{:else}▶{/if}
+    </button>
+    <button class="control-btn" onclick={skipForward} title="Forward 5s">⏩</button>
+    <span class="time">{currentTime} / {totalTime}</span>
+  </div>
 </div>
 
 <style>
   .waveform-player {
-    padding: 1rem;
     background: #1a1a2e;
     border-radius: 8px;
-    color: #e0e0e0;
+    padding: 0.75rem;
   }
-  .placeholder {
-    color: #666;
+  .waveform-container {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+  .control-btn {
+    background: #0f3460;
+    border: none;
+    color: #e0e0e0;
+    padding: 0.4rem 0.8rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  .control-btn:hover {
+    background: #1a4a7a;
+  }
+  .play-btn {
+    padding: 0.4rem 1rem;
+    font-size: 1.2rem;
+  }
+  .time {
+    color: #999;
     font-size: 0.875rem;
+    margin-left: auto;
+    font-variant-numeric: tabular-nums;
   }
 </style>