voice-to-notes/src/routes/+page.svelte

<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';
  import AIChatPanel from '$lib/components/AIChatPanel.svelte';
  import ProgressOverlay from '$lib/components/ProgressOverlay.svelte';
  import { segments, speakers } from '$lib/stores/transcript';
  import type { Segment, Speaker } from '$lib/types/transcript';

  let waveformPlayer: WaveformPlayer;
  let audioUrl = $state('');
  let isTranscribing = $state(false);
  let transcriptionProgress = $state(0);
  let transcriptionStage = $state('');
  let transcriptionMessage = $state('');

  // Speaker color palette for auto-assignment
  const speakerColors = ['#e94560', '#4ecdc4', '#ffe66d', '#a8e6cf', '#ff8b94', '#c7ceea', '#ffd93d', '#6bcb77'];

  function handleWordClick(timeMs: number) {
    waveformPlayer?.seekTo(timeMs);
  }

  async function handleFileImport() {
    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
    audioUrl = `asset://localhost/${encodeURIComponent(filePath)}`;
    waveformPlayer?.loadAudio(audioUrl);

    // Start pipeline (transcription + diarization)
    isTranscribing = true;
    transcriptionProgress = 0;
    transcriptionStage = 'Starting...';

    try {
      const result = await invoke<{
        segments: Array<{
          text: string;
          start_ms: number;
          end_ms: number;
          speaker: string | null;
          words: Array<{
            word: string;
            start_ms: number;
            end_ms: number;
            confidence: number;
          }>;
        }>;
        language: string;
        duration_ms: number;
        speakers: string[];
        num_speakers: number;
      }>('run_pipeline', { filePath });

      // Create speaker entries from pipeline result
      const newSpeakers: Speaker[] = (result.speakers || []).map((label, idx) => ({
        id: `speaker-${idx}`,
        project_id: '',
        label,
        display_name: null,
        color: speakerColors[idx % speakerColors.length],
      }));
      speakers.set(newSpeakers);

      // Build speaker label → id lookup
      const speakerLookup = new Map(newSpeakers.map(s => [s.label, s.id]));

      // Convert result to our store format
      const newSegments: Segment[] = result.segments.map((seg, idx) => ({
        id: `seg-${idx}`,
        project_id: '',
        media_file_id: '',
        speaker_id: seg.speaker ? (speakerLookup.get(seg.speaker) ?? null) : null,
        start_ms: seg.start_ms,
        end_ms: seg.end_ms,
        text: seg.text,
        original_text: null,
        confidence: null,
        is_edited: false,
        edited_at: null,
        segment_index: idx,
        words: seg.words.map((w, widx) => ({
          id: `word-${idx}-${widx}`,
          segment_id: `seg-${idx}`,
          word: w.word,
          start_ms: w.start_ms,
          end_ms: w.end_ms,
          confidence: w.confidence,
          word_index: widx,
        })),
      }));

      segments.set(newSegments);
    } catch (err) {
      console.error('Pipeline failed:', err);
      alert(`Pipeline failed: ${err}`);
    } finally {
      isTranscribing = false;
    }
  }
</script>

<div class="app-header">
  <h1>Voice to Notes</h1>
  <div class="header-actions">
    <button class="import-btn" onclick={handleFileImport}>
      Import Audio/Video
    </button>
  </div>
</div>

<div class="workspace">
  <div class="main-content">
    <WaveformPlayer bind:this={waveformPlayer} {audioUrl} />
    <TranscriptEditor onWordClick={handleWordClick} />
  </div>
  <div class="sidebar-right">
    <SpeakerManager />
    <AIChatPanel />
  </div>
</div>

<ProgressOverlay
  visible={isTranscribing}
  percent={transcriptionProgress}
  stage={transcriptionStage}
  message={transcriptionMessage}
/>

<style>
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #0f3460;
    color: #e0e0e0;
  }
  h1 {
    font-size: 1.25rem;
    margin: 0;
  }
  .import-btn {
    background: #e94560;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .import-btn:hover {
    background: #d63851;
  }
  .workspace {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 3.5rem);
    background: #0a0a23;
  }
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
  .sidebar-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
  }
</style>