diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
index 1539b292..f6bfb36c 100644
--- a/web/frontend/package-lock.json
+++ b/web/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -2471,6 +2472,37 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-alert-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
@@ -2552,6 +2584,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
diff --git a/web/frontend/package.json b/web/frontend/package.json
index 052f862c..cbb0b633 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
diff --git a/web/frontend/src/components/TranscriptionConfigDialog.tsx b/web/frontend/src/components/TranscriptionConfigDialog.tsx
index 3c78ce1f..e456b418 100644
--- a/web/frontend/src/components/TranscriptionConfigDialog.tsx
+++ b/web/frontend/src/components/TranscriptionConfigDialog.tsx
@@ -1,2030 +1,5 @@
-import { useState, useEffect, memo } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Slider } from "@/components/ui/slider";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import { Separator } from "@/components/ui/separator";
-import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
-import { Info, Check, XCircle, Loader2 } from "lucide-react";
-import { useAuth } from "@/features/auth/hooks/useAuth";
-
-export interface WhisperXParams {
-  // Model family (whisper or nvidia)
-  model_family: string;
-
-  // Model parameters
-  model: string;
-  model_cache_only: boolean;
-  model_dir?: string;
-
-  // Device and computation
-  device: string;
-  device_index: number;
-  batch_size: number;
-  compute_type: string;
-  threads: number;
-
-  // Output settings
-  output_format: string;
-  verbose: boolean;
-
-  // Task and language
-  task: string;
-  language?: string;
-
-  // Alignment settings
-  align_model?: string;
-  interpolate_method: string;
-  no_align: boolean;
-  return_char_alignments: boolean;
-
-  // VAD settings
-  vad_method: string;
-  vad_onset: number;
-  vad_offset: number;
-  chunk_size: number;
-
-  // Diarization settings
-  diarize: boolean;
-  min_speakers?: number;
-  max_speakers?: number;
-  diarize_model: string;
-  speaker_embeddings: boolean;
-
-  // Transcription quality settings
-  temperature: number;
-  best_of: number;
-  beam_size: number;
-  patience: number;
-  length_penalty: number;
-  suppress_tokens?: string;
-  suppress_numerals: boolean;
-  initial_prompt?: string;
-  condition_on_previous_text: boolean;
-  fp16: boolean;
-  temperature_increment_on_fallback: number;
-  compression_ratio_threshold: number;
-  logprob_threshold: number;
-  no_speech_threshold: number;
-
-  // Output formatting
-  max_line_width?: number;
-  max_line_count?: number;
-  highlight_words: boolean;
-  segment_resolution: string;
-
-  // Token and progress
-  hf_token?: string;
-  print_progress: boolean;
-
-  // NVIDIA Parakeet-specific parameters for long-form audio
-  attention_context_left: number;
-  attention_context_right: number;
-
-  // Multi-track transcription settings
-  is_multi_track_enabled: boolean;
-
-  // OpenAI settings
-  api_key?: string;
-}
-
-// Parameter descriptions for hover cards
-const PARAM_DESCRIPTIONS = {
-  model: "Size of the Whisper model to use. Larger models are more accurate but slower and require more memory.",
-  language: "Source language of the audio. Leave as auto-detect for automatic language detection.",
-  task: "Whether to transcribe the audio or translate it to English.",
-  device: "Processing device: CPU (slower, universal), GPU (faster, requires CUDA), or AUTO (automatic selection).",
-  compute_type: "Precision type: Float16 (faster, less memory), Float32 (more accurate), Int8 (fastest, least accurate).",
-  batch_size: "Number of audio segments processed simultaneously. Higher values are faster but use more memory.",
-  diarize: "Enable speaker diarization to identify and separate different speakers in the audio.",
-  min_speakers: "Minimum number of speakers expected in the audio (leave empty for automatic detection).",
-  max_speakers: "Maximum number of speakers expected in the audio (leave empty for automatic detection).",
-  diarize_model: "Choose diarization model: Pyannote models require a HuggingFace token and support unlimited speakers. NVIDIA Sortformer is optimized for 4-speaker scenarios and doesn't require a token.",
-  temperature: "Controls randomness in output. 0 = deterministic, higher values = more creative but less accurate.",
-  beam_size: "Number of beams for beam search decoding. Higher values improve quality but are slower.",
-  best_of: "Number of candidate sequences when sampling. Higher values improve quality but are slower.",
-  patience: "Patience factor for beam search. Higher values wait longer for better sequences.",
-  length_penalty: "Penalty applied to longer sequences. >1 favors longer, <1 favors shorter sequences.",
-  initial_prompt: "Optional text to provide context for the first transcription window.",
-  suppress_numerals: "Suppress numeric symbols and currency symbols during transcription sampling.",
-  condition_on_previous_text: "Use previous transcription output as context for next segment (may cause repetition loops).",
-  vad_method: "Voice Activity Detection method: Pyannote (more accurate) or Silero (faster).",
-  vad_onset: "Sensitivity threshold for detecting speech start. Lower = more sensitive to quiet speech.",
-  vad_offset: "Sensitivity threshold for detecting speech end. Lower = continues longer into silence.",
-  chunk_size: "Duration in seconds for merging adjacent speech segments detected by VAD.",
-  compression_ratio_threshold: "Fail transcription if text compression ratio exceeds this value (indicates repetitive output).",
-  logprob_threshold: "Fail transcription if average log probability is below this value (indicates low confidence).",
-  no_speech_threshold: "Consider segment as silence if no-speech probability exceeds this value.",
-  suppress_tokens: "Comma-separated token IDs to suppress during generation (e.g., -1 for default special tokens).",
-  no_align: "Skip phoneme-level alignment for faster processing but less precise word timestamps.",
-  return_char_alignments: "Include character-level timing alignments in the output (increases processing time).",
-  fp16: "Use 16-bit floating point precision for faster inference with slightly reduced accuracy.",
-  output_format: "File format(s) to generate: SRT (subtitles), VTT (web), TXT (plain text), JSON (structured), TSV (tabular), or All.",
-  segment_resolution: "How to break up transcription: Sentence (natural breaks) or Chunk (fixed VAD segments).",
-  max_line_width: "Maximum characters per line in subtitle formats before text wrapping.",
-  max_line_count: "Maximum number of lines per subtitle segment.",
-  highlight_words: "Add word-level timing highlights in SRT/VTT formats (underlines words as spoken).",
-  verbose: "Show detailed progress and debug messages during transcription.",
-  print_progress: "Display processing progress information in the console output.",
-  hf_token: "Hugging Face API token required for accessing private or gated models.",
-  is_multi_track_enabled: "Enable multi-track transcription mode for processing individual speaker tracks. When enabled, diarization is automatically disabled as each track represents a single speaker.",
-  align_model: "Custom alignment model to use (e.g., KBLab/wav2vec2-large-voxrex-swedish).\nThe model format must be WhisperX compatible!\nLeave empty to use default."
-};
-
-interface TranscriptionConfigDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onStartTranscription: (params: WhisperXParams & { profileName?: string; profileDescription?: string }) => void;
-  loading?: boolean;
-  isProfileMode?: boolean;
-  initialParams?: WhisperXParams;
-  initialName?: string;
-  initialDescription?: string;
-  isMultiTrack?: boolean;
-  title?: string;
-}
-
-const DEFAULT_PARAMS: WhisperXParams = {
-  model_family: "whisper",
-  model: "small",
-  model_cache_only: false,
-  device: "cpu",
-  device_index: 0,
-  batch_size: 8,
-  compute_type: "float32",
-  threads: 0,
-  output_format: "all",
-  verbose: true,
-  task: "transcribe",
-  interpolate_method: "nearest",
-  no_align: false,
-  return_char_alignments: false,
-  vad_method: "pyannote",
-  vad_onset: 0.5,
-  vad_offset: 0.363,
-  chunk_size: 30,
-  diarize: false,
-  diarize_model: "pyannote",
-  speaker_embeddings: false,
-  temperature: 0,
-  best_of: 5,
-  beam_size: 5,
-  patience: 1.0,
-  length_penalty: 1.0,
-  suppress_numerals: false,
-  condition_on_previous_text: false,
-  fp16: true,
-  temperature_increment_on_fallback: 0.2,
-  compression_ratio_threshold: 2.4,
-  logprob_threshold: -1.0,
-  no_speech_threshold: 0.6,
-  highlight_words: false,
-  segment_resolution: "sentence",
-  print_progress: false,
-  attention_context_left: 256,
-  attention_context_right: 256,
-  is_multi_track_enabled: false,
-  api_key: "",
-};
-
-const WHISPER_MODELS = [
-  "tiny", "tiny.en",
-  "base", "base.en",
-  "small", "small.en",
-  "medium", "medium.en",
-  "large", "large-v1", "large-v2", "large-v3"
-];
-
-const LANGUAGES = [
-  { value: "auto", label: "Auto-detect" },
-  { value: "en", label: "English" },
-  { value: "zh", label: "Chinese" },
-  { value: "de", label: "German" },
-  { value: "es", label: "Spanish" },
-  { value: "ru", label: "Russian" },
-  { value: "ko", label: "Korean" },
-  { value: "fr", label: "French" },
-  { value: "ja", label: "Japanese" },
-  { value: "pt", label: "Portuguese" },
-  { value: "tr", label: "Turkish" },
-  { value: "pl", label: "Polish" },
-  { value: "ca", label: "Catalan" },
-  { value: "nl", label: "Dutch" },
-  { value: "ar", label: "Arabic" },
-  { value: "sv", label: "Swedish" },
-  { value: "it", label: "Italian" },
-  { value: "id", label: "Indonesian" },
-  { value: "hi", label: "Hindi" },
-  { value: "fi", label: "Finnish" },
-  { value: "vi", label: "Vietnamese" },
-  { value: "he", label: "Hebrew" },
-  { value: "uk", label: "Ukrainian" },
-  { value: "el", label: "Greek" },
-  { value: "ms", label: "Malay" },
-  { value: "cs", label: "Czech" },
-  { value: "ro", label: "Romanian" },
-  { value: "da", label: "Danish" },
-  { value: "hu", label: "Hungarian" },
-  { value: "ta", label: "Tamil" },
-  { value: "no", label: "Norwegian" },
-  { value: "th", label: "Thai" },
-  { value: "ur", label: "Urdu" },
-  { value: "hr", label: "Croatian" },
-  { value: "bg", label: "Bulgarian" },
-  { value: "lt", label: "Lithuanian" },
-  { value: "la", label: "Latin" },
-  { value: "mi", label: "Maori" },
-  { value: "ml", label: "Malayalam" },
-  { value: "cy", label: "Welsh" },
-  { value: "sk", label: "Slovak" },
-  { value: "te", label: "Telugu" },
-  { value: "fa", label: "Persian" },
-  { value: "lv", label: "Latvian" },
-  { value: "bn", label: "Bengali" },
-  { value: "sr", label: "Serbian" },
-  { value: "az", label: "Azerbaijani" },
-  { value: "sl", label: "Slovenian" },
-  { value: "kn", label: "Kannada" },
-  { value: "et", label: "Estonian" },
-  { value: "mk", label: "Macedonian" },
-  { value: "br", label: "Breton" },
-  { value: "eu", label: "Basque" },
-  { value: "is", label: "Icelandic" },
-  { value: "hy", label: "Armenian" },
-  { value: "ne", label: "Nepali" },
-  { value: "mn", label: "Mongolian" },
-  { value: "bs", label: "Bosnian" },
-  { value: "kk", label: "Kazakh" },
-  { value: "sq", label: "Albanian" },
-  { value: "sw", label: "Swahili" },
-  { value: "gl", label: "Galician" },
-  { value: "mr", label: "Marathi" },
-  { value: "pa", label: "Punjabi" },
-  { value: "si", label: "Sinhala" },
-  { value: "km", label: "Khmer" },
-  { value: "sn", label: "Shona" },
-  { value: "yo", label: "Yoruba" },
-  { value: "so", label: "Somali" },
-  { value: "af", label: "Afrikaans" },
-  { value: "oc", label: "Occitan" },
-  { value: "ka", label: "Georgian" },
-  { value: "be", label: "Belarusian" },
-  { value: "tg", label: "Tajik" },
-  { value: "sd", label: "Sindhi" },
-  { value: "gu", label: "Gujarati" },
-  { value: "am", label: "Amharic" },
-  { value: "yi", label: "Yiddish" },
-  { value: "lo", label: "Lao" },
-  { value: "uz", label: "Uzbek" },
-  { value: "fo", label: "Faroese" },
-  { value: "ht", label: "Haitian Creole" },
-  { value: "ps", label: "Pashto" },
-  { value: "tk", label: "Turkmen" },
-  { value: "nn", label: "Nynorsk" },
-  { value: "mt", label: "Maltese" },
-  { value: "sa", label: "Sanskrit" },
-  { value: "lb", label: "Luxembourgish" },
-  { value: "my", label: "Myanmar" },
-  { value: "bo", label: "Tibetan" },
-  { value: "tl", label: "Tagalog" },
-  { value: "mg", label: "Malagasy" },
-  { value: "as", label: "Assamese" },
-  { value: "tt", label: "Tatar" },
-  { value: "haw", label: "Hawaiian" },
-  { value: "ln", label: "Lingala" },
-  { value: "ha", label: "Hausa" },
-  { value: "ba", label: "Bashkir" },
-  { value: "jw", label: "Javanese" },
-  { value: "su", label: "Sundanese" },
-];
-
-const CANARY_LANGUAGES = [
-  { value: "bg", label: "Bulgarian" },
-  { value: "hr", label: "Croatian" },
-  { value: "cs", label: "Czech" },
-  { value: "da", label: "Danish" },
-  { value: "nl", label: "Dutch" },
-  { value: "en", label: "English" },
-  { value: "et", label: "Estonian" },
-  { value: "fi", label: "Finnish" },
-  { value: "fr", label: "French" },
-  { value: "de", label: "German" },
-  { value: "el", label: "Greek" },
-  { value: "hu", label: "Hungarian" },
-  { value: "it", label: "Italian" },
-  { value: "lv", label: "Latvian" },
-  { value: "lt", label: "Lithuanian" },
-  { value: "mt", label: "Maltese" },
-  { value: "pl", label: "Polish" },
-  { value: "pt", label: "Portuguese" },
-  { value: "ro", label: "Romanian" },
-  { value: "sk", label: "Slovak" },
-  { value: "sl", label: "Slovenian" },
-  { value: "es", label: "Spanish" },
-  { value: "sv", label: "Swedish" },
-  { value: "ru", label: "Russian" },
-  { value: "uk", label: "Ukrainian" },
-];
-
-export const TranscriptionConfigDialog = memo(function TranscriptionConfigDialog({
-  open,
-  onOpenChange,
-  onStartTranscription,
-  loading = false,
-  isProfileMode = false,
-  initialParams,
-  initialName = "",
-  initialDescription = "",
-  isMultiTrack = false,
-  title,
-}: TranscriptionConfigDialogProps) {
-  const [params, setParams] = useState<WhisperXParams>(DEFAULT_PARAMS);
-  const [profileName, setProfileName] = useState("");
-  const [profileDescription, setProfileDescription] = useState("");
-
-  // OpenAI Validation State
-  const [isValidating, setIsValidating] = useState(false);
-  const [validationStatus, setValidationStatus] = useState<'idle' | 'valid' | 'invalid'>('idle');
-  const [validationMessage, setValidationMessage] = useState("");
-  const { getAuthHeaders } = useAuth();
-  const [availableModels, setAvailableModels] = useState<string[]>(["whisper-1"]);
-
-  const validateAPIKey = async () => {
-    // Allow validation with empty key (will use server default)
-
-    setIsValidating(true);
-    setValidationStatus('idle');
-    setValidationMessage("");
-
-    try {
-      const response = await fetch('/api/v1/config/openai/validate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...getAuthHeaders(),
-        },
-        body: JSON.stringify({ api_key: params.api_key }),
-      });
-
-      const data = await response.json();
-
-      if (response.ok && data.valid) {
-        setValidationStatus('valid');
-        setAvailableModels(data.models || ["whisper-1"]);
-        setValidationMessage("API key validated successfully");
-      } else {
-        setValidationStatus('invalid');
-        setValidationMessage(data.error || "Invalid API key");
-        setAvailableModels(["whisper-1"]);
-      }
-    } catch (error) {
-      setValidationStatus('invalid');
-      setValidationMessage("Failed to validate API key");
-      console.error("Validation error:", error);
-    } finally {
-      setIsValidating(false);
-    }
-  };
-
-  // Reset to defaults or initial values when dialog opens
-  useEffect(() => {
-    if (open) {
-      const baseParams = initialParams || DEFAULT_PARAMS;
-      // Auto-set multi-track and diarization based on file type
-      setParams({
-        ...baseParams,
-        is_multi_track_enabled: isMultiTrack,
-        diarize: isMultiTrack ? false : baseParams.diarize
-      });
-      setProfileName(initialName);
-      setProfileDescription(initialDescription);
-    }
-  }, [open, initialParams, initialName, initialDescription, isMultiTrack]);
-
-  const updateParam = <K extends keyof WhisperXParams>(
-    key: K,
-    value: WhisperXParams[K]
-  ) => {
-    setParams(prev => {
-      const newParams = { ...prev, [key]: value };
-
-      // If switching to Whisper family, ensure diarize_model is pyannote
-      if (key === 'model_family' && value === 'whisper') {
-        newParams.diarize_model = 'pyannote';
-      }
-
-      return newParams;
-    });
-  };
-
-  const handleStartTranscription = () => {
-    if (isProfileMode) {
-      onStartTranscription({ ...params, profileName, profileDescription });
-    } else {
-      onStartTranscription(params);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-full sm:max-w-4xl w-[calc(100vw-1rem)] sm:w-auto max-h-[85vh] overflow-y-auto glass-card rounded-[var(--radius-card)] p-0 border border-[var(--border-subtle)] shadow-[var(--shadow-float)]">
-        <DialogHeader className="p-6 sm:p-8 pb-4">
-          <DialogTitle className="text-2xl font-bold tracking-tight text-[var(--text-primary)]">
-            {title || (isProfileMode
-              ? (initialName ? `Edit "${initialName}"` : "New Transcription Profile")
-              : "Transcription Configuration")
-            }
-          </DialogTitle>
-          <DialogDescription className="text-[var(--text-secondary)] mt-2">
-            {isProfileMode
-              ? (initialName ? "Update your transcription profile settings." : "Create a new profile to save and reuse your transcription settings.")
-              : "Configure WhisperX parameters for your transcription. Advanced settings allow fine-tuning quality and performance."
-            }
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="px-6 sm:px-8 space-y-6">
-          {isProfileMode && (
-            <div className="space-y-4 p-4 bg-[var(--bg-main)]/50 rounded-[var(--radius-card)] border border-[var(--border-subtle)]">
-              <div className="space-y-2">
-                <Label htmlFor="profileName" className="text-[var(--text-primary)] font-medium">
-                  Profile Name
-                </Label>
-                <Input
-                  id="profileName"
-                  value={profileName}
-                  onChange={(e) => setProfileName(e.target.value)}
-                  placeholder="Enter a name for this profile..."
-                  className="bg-[var(--bg-main)] border-[var(--border-subtle)] text-[var(--text-primary)] focus:ring-[var(--brand-light)] focus:border-[var(--brand-solid)] rounded-[var(--radius-btn)]"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="profileDescription" className="text-[var(--text-primary)] font-medium">
-                  Description <span className="text-[var(--text-tertiary)] font-normal">(optional)</span>
-                </Label>
-                <Textarea
-                  id="profileDescription"
-                  value={profileDescription}
-                  onChange={(e) => setProfileDescription(e.target.value)}
-                  placeholder="Describe this profile's purpose..."
-                  className="bg-[var(--bg-main)] border-[var(--border-subtle)] text-[var(--text-primary)] focus:ring-[var(--brand-light)] focus:border-[var(--brand-solid)] rounded-[var(--radius-btn)] resize-none"
-                  rows={2}
-                />
-              </div>
-            </div>
-          )}
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="modelFamily" className="text-[var(--text-primary)] font-medium">
-                Model Family
-              </Label>
-              <Select
-                value={params.model_family}
-                onValueChange={(value) => updateParam('model_family', value)}
-              >
-                <SelectTrigger className="h-11 bg-[var(--bg-main)] border-[var(--border-subtle)] text-[var(--text-primary)] focus:ring-[var(--brand-light)] focus:border-[var(--brand-solid)] rounded-[var(--radius-btn)] shadow-none">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="glass-card border border-[var(--border-subtle)] rounded-[var(--radius-btn)]">
-                  <SelectItem value="whisper" className="text-[var(--text-primary)] focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)] rounded-[8px] m-1 cursor-pointer">
-                    Whisper (OpenAI)
-                  </SelectItem>
-                  <SelectItem value="nvidia_parakeet" className="text-[var(--text-primary)] focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)] rounded-[8px] m-1 cursor-pointer">
-                    NVIDIA Parakeet
-                  </SelectItem>
-                  <SelectItem value="nvidia_canary" className="text-[var(--text-primary)] focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)] rounded-[8px] m-1 cursor-pointer">
-                    NVIDIA Canary
-                  </SelectItem>
-                  <SelectItem value="openai" className="text-[var(--text-primary)] focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)] rounded-[8px] m-1 cursor-pointer">
-                    OpenAI API
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          {params.model_family === "nvidia_parakeet" ? (
-            <div className="space-y-6">
-
-              {/* Multi-track status for Parakeet */}
-              {isMultiTrack && (
-                <div className="space-y-4">
-                  <h3 className="text-lg font-medium text-[var(--text-primary)]">Transcription Mode</h3>
-                  <div className="p-4 border border-[var(--brand-solid)]/20 rounded-lg bg-[var(--brand-light)]/10">
-                    <div className="flex items-center gap-2">
-                      <Info className="h-4 w-4 text-[var(--brand-solid)]" />
-                      <span className="text-sm font-medium text-[var(--text-primary)]">Multi-track audio detected</span>
-                    </div>
-                    <p className="text-sm text-[var(--text-secondary)] mt-1">
-                      Multi-track transcription is automatically enabled for this audio file.
-                    </p>
-                  </div>
-                </div>
-              )}
-
-              {/* Long-form Audio Settings */}
-              <div className="space-y-4">
-                <h3 className="text-lg font-medium text-[var(--text-primary)]">Long-form Audio Settings</h3>
-
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-                  {/* Left Context Size */}
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <Label htmlFor="attention_context_left" className="text-[var(--text-secondary)]">
-                        Left Context Size
-                      </Label>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <div className="space-y-2">
-                            <p className="text-sm font-medium text-[var(--text-primary)]">Left Attention Context</p>
-                            <p className="text-sm text-[var(--text-secondary)]">
-                              Controls how much past audio context the model considers when processing. Higher values (up to 512) improve accuracy for long audio but increase memory usage.
-                            </p>
-                            <p className="text-xs text-carbon-600 dark:text-carbon-400">
-                              • Default: 256 (good balance)
-                              • Low (64-128): Faster, less memory, may reduce accuracy
-                              • High (384-512): Better context, more memory needed
-                            </p>
-                          </div>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-                    <div className="space-y-2">
-                      <Slider
-                        value={[params.attention_context_left]}
-                        onValueChange={(value) => updateParam('attention_context_left', value[0])}
-                        max={512}
-                        min={64}
-                        step={64}
-                        className="w-full"
-                      />
-                      <div className="flex justify-between text-xs text-carbon-500 dark:text-carbon-400">
-                        <span>64 (Fast)</span>
-                        <span className="font-medium">{params.attention_context_left}</span>
-                        <span>512 (Max Context)</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Right Context Size */}
-                  <div className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <Label htmlFor="attention_context_right" className="text-[var(--text-secondary)]">
-                        Right Context Size
-                      </Label>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <div className="space-y-2">
-                            <p className="text-sm font-medium text-[var(--text-primary)]">Right Attention Context</p>
-                            <p className="text-sm text-[var(--text-secondary)]">
-                              Controls how much future audio context the model considers. Higher values improve accuracy but increase processing latency and memory usage.
-                            </p>
-                            <p className="text-xs text-carbon-600 dark:text-carbon-400">
-                              • Default: 256 (recommended)
-                              • Low (64-128): Real-time processing, may reduce accuracy
-                              • High (384-512): Better accuracy, higher latency
-                            </p>
-                          </div>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-                    <div className="space-y-2">
-                      <Slider
-                        value={[params.attention_context_right]}
-                        onValueChange={(value) => updateParam('attention_context_right', value[0])}
-                        max={512}
-                        min={64}
-                        step={64}
-                        className="w-full"
-                      />
-                      <div className="flex justify-between text-xs text-carbon-500 dark:text-carbon-400">
-                        <span>64 (Fast)</span>
-                        <span className="font-medium">{params.attention_context_right}</span>
-                        <span>512 (Max Context)</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-
-              {/* Diarization Settings for Parakeet */}
-              {!isMultiTrack && (
-                <div className="space-y-4">
-                  <h3 className="text-lg font-medium text-[var(--text-primary)]">Speaker Diarization</h3>
-
-                  <div className="flex items-center space-x-2 mb-4">
-                    <Switch
-                      id="parakeet_diarize"
-                      checked={params.diarize}
-                      onCheckedChange={(checked) => updateParam('diarize', checked)}
-                      disabled={params.is_multi_track_enabled}
-                    />
-                    <Label htmlFor="parakeet_diarize" className="text-[var(--text-secondary)]">Enable Speaker Diarization</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <div className="space-y-2">
-                          <p className="text-sm font-medium text-[var(--text-primary)]">Pyannote Speaker Diarization</p>
-                          <p className="text-sm text-[var(--text-secondary)]">
-                            Uses Pyannote to identify and separate different speakers in the audio after transcription. Requires a Hugging Face token for model access.
-                          </p>
-                        </div>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-
-                  {params.diarize && (
-                    <div className="p-4 bg-carbon-50 dark:bg-carbon-800 rounded-lg border border-[var(--border-subtle)] space-y-4">
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="parakeet_min_speakers" className="text-[var(--text-secondary)]">Min Speakers</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Minimum number of speakers expected in the audio (leave empty for automatic detection).</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="number"
-                            min="1"
-                            max="20"
-                            placeholder="Auto-detect"
-                            value={params.min_speakers || ""}
-                            onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="parakeet_max_speakers" className="text-[var(--text-secondary)]">Max Speakers</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Maximum number of speakers expected in the audio (leave empty for automatic detection).</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="number"
-                            min="1"
-                            max="20"
-                            placeholder="Auto-detect"
-                            value={params.max_speakers || ""}
-                            onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                      </div>
-
-                      <div>
-                        <div className="flex items-center gap-2 mb-2">
-                          <Label htmlFor="parakeet_diarize_model" className="text-[var(--text-secondary)]">Diarization Model</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.diarize_model}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                        <Select
-                          value={params.diarize_model}
-                          onValueChange={(value) => updateParam('diarize_model', value)}
-                        >
-                          <SelectTrigger className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <SelectItem value="pyannote" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              Pyannote (Recommended) - Requires HF Token
-                            </SelectItem>
-                            <SelectItem value="nvidia_sortformer" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              NVIDIA Sortformer - 4 Speakers Max, No Token
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      {params.diarize_model === "pyannote" && (
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="parakeet_hf_token" className="text-[var(--text-secondary)]">Hugging Face Token</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Hugging Face API token required for accessing Pyannote diarization models. Get one at https://huggingface.co/settings/tokens</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="password"
-                            placeholder="Required for Pyannote diarization models"
-                            value={params.hf_token || ""}
-                            onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                      )}
-
-                      {params.diarize_model === "nvidia_sortformer" && (
-                        <div className="p-4 border border-[var(--warning-solid)]/20 rounded-lg bg-[var(--warning-translucent)]">
-                          <div className="flex items-start gap-3">
-                            <div className="text-[var(--warning-solid)] mt-0.5">⚠️</div>
-                            <div>
-                              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-1">
-                                NVIDIA Sortformer Limitations
-                              </h4>
-                              <p className="text-sm text-[var(--text-secondary)]">
-                                This model is optimized for up to 4 speakers. Beyond 4 speakers accuracy might degrade.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                </div>
-              )}
-            </div>
-          ) : params.model_family === "nvidia_canary" ? (
-            <div className="space-y-6">
-
-              {/* Multi-track status for Canary */}
-              {isMultiTrack && (
-                <div className="space-y-4">
-                  <h3 className="text-lg font-medium text-[var(--text-primary)]">Transcription Mode</h3>
-                  <div className="p-4 border border-blue-200 dark:border-blue-700 rounded-lg bg-blue-50 dark:bg-blue-900/20">
-                    <div className="flex items-center gap-2">
-                      <Info className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-                      <span className="text-sm font-medium text-blue-800 dark:text-blue-200">Multi-track audio detected</span>
-                    </div>
-                    <p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
-                      Multi-track transcription is automatically enabled for this audio file.
-                    </p>
-                  </div>
-                </div>
-              )}
-
-              {/* Language Selection */}
-              <div className="space-y-4">
-                <h3 className="text-lg font-medium text-[var(--text-primary)]">Language Settings</h3>
-
-                <div className="space-y-2">
-                  <Label htmlFor="canary_language" className="text-[var(--text-secondary)] font-medium">
-                    Source Language
-                  </Label>
-                  <Select
-                    value={params.language || "en"}
-                    onValueChange={(value) => updateParam('language', value)}
-                  >
-                    <SelectTrigger className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)] max-h-60">
-                      {CANARY_LANGUAGES.map((lang) => (
-                        <SelectItem key={lang.value} value={lang.value} className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                          {lang.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-              </div>
-
-              {/* Diarization Settings for Canary */}
-              {!isMultiTrack && (
-                <div className="space-y-4">
-                  <h3 className="text-lg font-medium text-[var(--text-primary)]">Speaker Diarization</h3>
-
-                  <div className="flex items-center space-x-2 mb-4">
-                    <Switch
-                      id="canary_diarize"
-                      checked={params.diarize}
-                      onCheckedChange={(checked) => updateParam('diarize', checked)}
-                      disabled={params.is_multi_track_enabled}
-                    />
-                    <Label htmlFor="canary_diarize" className="text-[var(--text-secondary)]">Enable Speaker Diarization</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <div className="space-y-2">
-                          <p className="text-sm font-medium text-[var(--text-primary)]">Pyannote Speaker Diarization</p>
-                          <p className="text-sm text-[var(--text-secondary)]">
-                            Uses Pyannote to identify and separate different speakers in the audio after transcription. Requires a Hugging Face token for model access.
-                          </p>
-                        </div>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-
-                  {params.diarize && (
-                    <div className="p-4 bg-carbon-50 dark:bg-carbon-800 rounded-lg border border-[var(--border-subtle)] space-y-4">
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="canary_min_speakers" className="text-[var(--text-secondary)]">Min Speakers</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Minimum number of speakers expected in the audio (leave empty for automatic detection).</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="number"
-                            min="1"
-                            max="20"
-                            placeholder="Auto-detect"
-                            value={params.min_speakers || ""}
-                            onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="canary_max_speakers" className="text-[var(--text-secondary)]">Max Speakers</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Maximum number of speakers expected in the audio (leave empty for automatic detection).</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="number"
-                            min="1"
-                            max="20"
-                            placeholder="Auto-detect"
-                            value={params.max_speakers || ""}
-                            onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                      </div>
-
-                      <div>
-                        <div className="flex items-center gap-2 mb-2">
-                          <Label htmlFor="canary_diarize_model" className="text-[var(--text-secondary)]">Diarization Model</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.diarize_model}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                        <Select
-                          value={params.diarize_model}
-                          onValueChange={(value) => updateParam('diarize_model', value)}
-                        >
-                          <SelectTrigger className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <SelectItem value="pyannote" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              Pyannote (Recommended) - Requires HF Token
-                            </SelectItem>
-                            <SelectItem value="nvidia_sortformer" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              NVIDIA Sortformer - 4 Speakers Max, No Token
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      {params.diarize_model === "pyannote" && (
-                        <div>
-                          <div className="flex items-center gap-2 mb-2">
-                            <Label htmlFor="canary_hf_token" className="text-[var(--text-secondary)]">Hugging Face Token</Label>
-                            <HoverCard>
-                              <HoverCardTrigger asChild>
-                                <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                              </HoverCardTrigger>
-                              <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <p className="text-sm text-[var(--text-secondary)]">Hugging Face API token required for accessing Pyannote diarization models. Get one at https://huggingface.co/settings/tokens</p>
-                              </HoverCardContent>
-                            </HoverCard>
-                          </div>
-                          <Input
-                            type="password"
-                            placeholder="Required for Pyannote diarization models"
-                            value={params.hf_token || ""}
-                            onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
-                            className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                          />
-                        </div>
-                      )}
-
-                      {params.diarize_model === "nvidia_sortformer" && (
-                        <div className="p-4 border border-[var(--warning-solid)]/20 rounded-lg bg-[var(--warning-translucent)]">
-                          <div className="flex items-start gap-3">
-                            <div className="text-[var(--warning-solid)] mt-0.5">⚠️</div>
-                            <div>
-                              <h4 className="text-sm font-medium text-[var(--text-primary)] mb-1">
-                                NVIDIA Sortformer Limitations
-                              </h4>
-                              <p className="text-sm text-[var(--text-secondary)]">
-                                This model is optimized for up to 4 speakers. Beyond 4 speakers accuracy might degrade.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-
-                </div>
-              )}
-            </div>
-          ) : params.model_family === "openai" ? (
-            <div className="space-y-6">
-              <div className="p-4 border border-[var(--brand-solid)]/20 rounded-lg bg-[var(--brand-light)]/10">
-                <div className="flex items-center gap-2">
-                  <Info className="h-4 w-4 text-[var(--brand-solid)]" />
-                  <span className="text-sm font-medium text-[var(--text-primary)]">Cloud Transcription</span>
-                </div>
-                <p className="text-sm text-[var(--text-secondary)] mt-1">
-                  Audio will be sent to OpenAI servers for processing.
-                </p>
-              </div>
-
-              {/* API Key */}
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="openai_api_key" className="text-[var(--text-secondary)] font-medium">
-                    OpenAI API Key
-                  </Label>
-                  <HoverCard>
-                    <HoverCardTrigger asChild>
-                      <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                    </HoverCardTrigger>
-                    <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                      <p className="text-sm text-[var(--text-secondary)]">
-                        Your OpenAI API key. If not provided, the server-configured key will be used (if any).
-                      </p>
-                    </HoverCardContent>
-                  </HoverCard>
-                </div>
-                <div className="flex gap-2">
-                  <Input
-                    id="openai_api_key"
-                    type="password"
-                    value={params.api_key || ""}
-                    onChange={(e) => {
-                      updateParam('api_key', e.target.value);
-                      setValidationStatus('idle');
-                    }}
-                    placeholder="sk-..."
-                    className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)] flex-1"
-                  />
-                  <Button
-                    variant="outline"
-                    onClick={validateAPIKey}
-                    disabled={isValidating}
-                    className="shrink-0"
-                  >
-                    {isValidating ? (
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                    ) : (
-                      "Validate"
-                    )}
-                  </Button>
-                </div>
-                {validationStatus !== 'idle' && (
-                  <div className={`flex items-center gap-2 text-sm ${validationStatus === 'valid' ? 'text-[var(--success-solid)]' : 'text-[var(--error)]'
-                    }`}>
-                    {validationStatus === 'valid' ? (
-                      <Check className="h-4 w-4" />
-                    ) : (
-                      <XCircle className="h-4 w-4" />
-                    )}
-                    <span>{validationMessage}</span>
-                  </div>
-                )}
-              </div>
-
-              {/* Model Selection */}
-              <div className="space-y-2">
-                <Label htmlFor="openai_model" className="text-[var(--text-secondary)] font-medium">
-                  Model
-                </Label>
-                <Select
-                  value={params.model || "whisper-1"}
-                  onValueChange={(value) => updateParam('model', value)}
-                >
-                  <SelectTrigger className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                    {availableModels.map((model) => (
-                      <SelectItem key={model} value={model} className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                        {model}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {params.model && params.model !== "whisper-1" && (
-                <div className="p-4 border border-[var(--warning-solid)]/20 rounded-lg bg-[var(--warning-translucent)]">
-                  <div className="flex items-start gap-3">
-                    <div className="text-[var(--warning-solid)] mt-0.5">⚠️</div>
-                    <div>
-                      <h4 className="text-sm font-medium text-[var(--text-primary)] mb-1">
-                        Limited Synchronization
-                      </h4>
-                      <p className="text-sm text-[var(--text-secondary)]">
-                        Word-level timestamps are only supported by the <strong>whisper-1</strong> model. Synchronized playback will not be available for this model.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Language Selection */}
-              <div className="space-y-2">
-                <Label htmlFor="openai_language" className="text-[var(--text-secondary)] font-medium">
-                  Language
-                </Label>
-                <Select
-                  value={params.language || "auto"}
-                  onValueChange={(value) => updateParam('language', value === "auto" ? undefined : value)}
-                >
-                  <SelectTrigger className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                    <SelectValue placeholder="Auto-detect" />
-                  </SelectTrigger>
-                  <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)] max-h-60">
-                    {LANGUAGES.map((lang) => (
-                      <SelectItem key={lang.value} value={lang.value} className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                        {lang.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* Temperature */}
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="openai_temperature" className="text-[var(--text-secondary)]">
-                    Temperature
-                  </Label>
-                  <HoverCard>
-                    <HoverCardTrigger asChild>
-                      <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                    </HoverCardTrigger>
-                    <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                      <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.temperature}</p>
-                    </HoverCardContent>
-                  </HoverCard>
-                </div>
-                <div className="flex items-center gap-4">
-                  <Slider
-                    value={[params.temperature]}
-                    onValueChange={(value) => updateParam('temperature', value[0])}
-                    max={1}
-                    step={0.1}
-                    className="flex-1"
-                  />
-                  <span className="w-12 text-right text-sm text-carbon-600 dark:text-carbon-400">
-                    {params.temperature}
-                  </span>
-                </div>
-              </div>
-
-              {/* Initial Prompt */}
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="openai_prompt" className="text-[var(--text-secondary)]">
-                    Initial Prompt
-                  </Label>
-                  <HoverCard>
-                    <HoverCardTrigger asChild>
-                      <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                    </HoverCardTrigger>
-                    <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                      <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.initial_prompt}</p>
-                    </HoverCardContent>
-                  </HoverCard>
-                </div>
-                <Textarea
-                  id="openai_prompt"
-                  value={params.initial_prompt || ""}
-                  onChange={(e) => updateParam('initial_prompt', e.target.value || undefined)}
-                  placeholder="Optional text to guide the model's style..."
-                  className="bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)] resize-none"
-                  rows={3}
-                />
-              </div>
-            </div>
-          ) : (
-            <Tabs defaultValue="basic" className="w-full">
-              <TabsList className={`grid w-full items-center h-auto bg-[var(--bg-main)]/50 border border-[var(--border-subtle)] p-1 rounded-lg ${isMultiTrack ? 'grid-cols-3' : 'grid-cols-4'}`}>
-                <TabsTrigger value="basic" className="h-9 py-1.5 data-[state=active]:bg-white data-[state=active]:dark:bg-carbon-700 text-[var(--text-secondary)] text-xs sm:text-sm">Basic</TabsTrigger>
-                <TabsTrigger value="quality" className="h-9 py-1.5 data-[state=active]:bg-white data-[state=active]:dark:bg-carbon-700 text-[var(--text-secondary)] text-xs sm:text-sm">Quality</TabsTrigger>
-                <TabsTrigger value="advanced" className="h-9 py-1.5 data-[state=active]:bg-white data-[state=active]:dark:bg-carbon-700 text-[var(--text-secondary)] text-xs sm:text-sm">Advanced</TabsTrigger>
-                {!isMultiTrack && (
-                  <TabsTrigger value="diarization" className="h-9 py-1.5 data-[state=active]:bg-white data-[state=active]:dark:bg-carbon-700 text-[var(--text-secondary)] text-xs sm:text-sm">Diarization</TabsTrigger>
-                )}
-              </TabsList>
-
-              <TabsContent value="basic" className="space-y-6 sm:space-y-8 mt-4 sm:mt-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
-                  <div className="space-y-4 sm:space-y-6">
-                    {/* Multi-track status display */}
-                    {isMultiTrack && (
-                      <div className="p-4 border border-[var(--brand-solid)]/20 rounded-lg bg-[var(--brand-light)]/10">
-                        <div className="flex items-center gap-2">
-                          <Info className="h-4 w-4 text-[var(--brand-solid)]" />
-                          <span className="text-sm font-medium text-[var(--text-primary)]">Multi-track audio detected</span>
-                        </div>
-                        <p className="text-sm text-[var(--text-secondary)] mt-1">
-                          Multi-track transcription is automatically enabled. Diarization is disabled as each track represents a single speaker.
-                        </p>
-                      </div>
-                    )}
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="model" className="text-[var(--text-secondary)]">Model Size</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.model}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.model}
-                        onValueChange={(value) => updateParam('model', value)}
-                      >
-                        <SelectTrigger className="mt-3 w-full min-w-0 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          {WHISPER_MODELS.map((model) => (
-                            <SelectItem key={model} value={model} className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              {model}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="language" className="text-[var(--text-secondary)]">Language</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.language}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.language || "auto"}
-                        onValueChange={(value) => updateParam('language', value === "auto" ? undefined : value)}
-                      >
-                        <SelectTrigger className="mt-3 w-full min-w-0 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)] max-h-60">
-                          {LANGUAGES.map((lang) => (
-                            <SelectItem key={lang.value} value={lang.value} className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                              {lang.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="task" className="text-[var(--text-secondary)]">Task</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.task}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.task}
-                        onValueChange={(value) => updateParam('task', value)}
-                      >
-                        <SelectTrigger className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <SelectItem value="transcribe" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Transcribe</SelectItem>
-                          <SelectItem value="translate" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Translate to English</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-
-                  <div className="space-y-4 sm:space-y-6">
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="device" className="text-[var(--text-secondary)]">Device</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.device}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.device}
-                        onValueChange={(value) => updateParam('device', value)}
-                      >
-                        <SelectTrigger className="mt-3 w-full min-w-0 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <SelectItem value="cpu" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">CPU</SelectItem>
-                          <SelectItem value="cuda" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">GPU (CUDA)</SelectItem>
-
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="compute_type" className="text-[var(--text-secondary)]">Compute Type</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.compute_type}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.compute_type}
-                        onValueChange={(value) => updateParam('compute_type', value)}
-                      >
-                        <SelectTrigger className="mt-3 w-full min-w-0 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <SelectItem value="float16" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Float16 (Faster)</SelectItem>
-                          <SelectItem value="float32" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Float32 (More Accurate)</SelectItem>
-                          <SelectItem value="int8" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Int8 (Fastest)</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="batch_size" className="text-[var(--text-secondary)]">Batch Size: {params.batch_size}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.batch_size}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.batch_size]}
-                        onValueChange={([value]) => updateParam('batch_size', value)}
-                        min={1}
-                        max={32}
-                        step={1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="threads" className="text-[var(--text-secondary)]">Threads: {params.threads}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">Number of threads used by torch for CPU inference. 0 means auto-detect.</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.threads]}
-                        onValueChange={([value]) => updateParam('threads', value)}
-                        min={0}
-                        max={16}
-                        step={1}
-                        className="mt-3"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-              </TabsContent>
-
-              <TabsContent value="quality" className="space-y-6 sm:space-y-8 mt-4 sm:mt-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
-                  <div className="space-y-4 sm:space-y-6">
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="temperature" className="text-[var(--text-secondary)]">Temperature: {params.temperature}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.temperature}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.temperature]}
-                        onValueChange={([value]) => updateParam('temperature', value)}
-                        min={0}
-                        max={1}
-                        step={0.1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="beam_size" className="text-[var(--text-secondary)]">Beam Size: {params.beam_size}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.beam_size}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.beam_size]}
-                        onValueChange={([value]) => updateParam('beam_size', value)}
-                        min={1}
-                        max={20}
-                        step={1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="best_of" className="text-[var(--text-secondary)]">Best Of: {params.best_of}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.best_of}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.best_of]}
-                        onValueChange={([value]) => updateParam('best_of', value)}
-                        min={1}
-                        max={20}
-                        step={1}
-                        className="mt-3"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-4 sm:space-y-6">
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="patience" className="text-[var(--text-secondary)]">Patience: {params.patience}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.patience}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.patience]}
-                        onValueChange={([value]) => updateParam('patience', value)}
-                        min={0.1}
-                        max={3.0}
-                        step={0.1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="length_penalty" className="text-[var(--text-secondary)]">Length Penalty: {params.length_penalty}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.length_penalty}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.length_penalty]}
-                        onValueChange={([value]) => updateParam('length_penalty', value)}
-                        min={0.1}
-                        max={3.0}
-                        step={0.1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="initial_prompt" className="text-[var(--text-secondary)]">Initial Prompt</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.initial_prompt}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Textarea
-                        placeholder="Optional text to provide as context for the first window"
-                        value={params.initial_prompt || ""}
-                        onChange={(e) => updateParam('initial_prompt', e.target.value || undefined)}
-                        rows={3}
-                        className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)] placeholder:text-carbon-500 dark:placeholder:text-carbon-400"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <Separator className="bg-carbon-200 dark:bg-carbon-700 my-6 sm:my-8" />
-
-                <div className="space-y-4 sm:space-y-6">
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="suppress_numerals"
-                      checked={params.suppress_numerals}
-                      onCheckedChange={(checked) => updateParam('suppress_numerals', checked)}
-                    />
-                    <Label htmlFor="suppress_numerals" className="text-[var(--text-secondary)]">Suppress Numerals</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.suppress_numerals}</p>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="condition_on_previous_text"
-                      checked={params.condition_on_previous_text}
-                      onCheckedChange={(checked) => updateParam('condition_on_previous_text', checked)}
-                    />
-                    <Label htmlFor="condition_on_previous_text" className="text-[var(--text-secondary)]">Condition on Previous Text</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.condition_on_previous_text}</p>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-                </div>
-              </TabsContent>
-
-              <TabsContent value="advanced" className="space-y-6 sm:space-y-8 mt-4 sm:mt-6">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-8">
-                  <div className="space-y-4 sm:space-y-6">
-                    <h4 className="font-medium text-[var(--text-primary)]">VAD Settings</h4>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="vad_method" className="text-[var(--text-secondary)]">VAD Method</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.vad_method}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Select
-                        value={params.vad_method}
-                        onValueChange={(value) => updateParam('vad_method', value)}
-                      >
-                        <SelectTrigger className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <SelectItem value="pyannote" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Pyannote</SelectItem>
-                          <SelectItem value="silero" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">Silero</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="vad_onset" className="text-[var(--text-secondary)]">VAD Onset: {params.vad_onset}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.vad_onset}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.vad_onset]}
-                        onValueChange={([value]) => updateParam('vad_onset', value)}
-                        min={0.1}
-                        max={1.0}
-                        step={0.01}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="vad_offset" className="text-[var(--text-secondary)]">VAD Offset: {params.vad_offset}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.vad_offset}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.vad_offset]}
-                        onValueChange={([value]) => updateParam('vad_offset', value)}
-                        min={0.1}
-                        max={1.0}
-                        step={0.01}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="chunk_size" className="text-[var(--text-secondary)]">Chunk Size: {params.chunk_size}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.chunk_size}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.chunk_size]}
-                        onValueChange={([value]) => updateParam('chunk_size', value)}
-                        min={5}
-                        max={60}
-                        step={1}
-                        className="mt-3"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-4 sm:space-y-6">
-                    <h4 className="font-medium">Detection Thresholds</h4>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="compression_ratio_threshold" className="text-[var(--text-secondary)]">Compression Ratio: {params.compression_ratio_threshold}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.compression_ratio_threshold}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.compression_ratio_threshold]}
-                        onValueChange={([value]) => updateParam('compression_ratio_threshold', value)}
-                        min={1.0}
-                        max={5.0}
-                        step={0.1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="logprob_threshold" className="text-[var(--text-secondary)]">Log Probability: {params.logprob_threshold}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.logprob_threshold}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.logprob_threshold]}
-                        onValueChange={([value]) => updateParam('logprob_threshold', value)}
-                        min={-3.0}
-                        max={0.0}
-                        step={0.1}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center justify-between mb-2">
-                        <div className="flex items-center gap-2">
-                          <Label htmlFor="no_speech_threshold" className="text-[var(--text-secondary)]">No Speech: {params.no_speech_threshold}</Label>
-                          <HoverCard>
-                            <HoverCardTrigger asChild>
-                              <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                            </HoverCardTrigger>
-                            <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                              <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.no_speech_threshold}</p>
-                            </HoverCardContent>
-                          </HoverCard>
-                        </div>
-                      </div>
-                      <Slider
-                        value={[params.no_speech_threshold]}
-                        onValueChange={([value]) => updateParam('no_speech_threshold', value)}
-                        min={0.1}
-                        max={1.0}
-                        step={0.01}
-                        className="mt-3"
-                      />
-                    </div>
-
-                    <div>
-                      <div className="flex items-center gap-2 mb-2">
-                        <Label htmlFor="suppress_tokens" className="text-[var(--text-secondary)]">Suppress Tokens</Label>
-                        <HoverCard>
-                          <HoverCardTrigger asChild>
-                            <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                          </HoverCardTrigger>
-                          <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                            <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.suppress_tokens}</p>
-                          </HoverCardContent>
-                        </HoverCard>
-                      </div>
-                      <Input
-                        placeholder="-1 (default: suppress special characters)"
-                        value={params.suppress_tokens || ""}
-                        onChange={(e) => updateParam('suppress_tokens', e.target.value || undefined)}
-                        className="mt-3"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <Separator className="my-8" />
-
-                <div className="space-y-6">
-                  <div>
-                    <div className="flex items-center gap-2 mb-2">
-                      <Label htmlFor="align_model" className="text-gray-700 dark:text-gray-300">Custom Alignment Model</Label>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Info className="h-4 w-4 text-gray-400 cursor-help" />
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-80 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
-                          <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line">{PARAM_DESCRIPTIONS.align_model}</p>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-                    <Input
-                      id="align_model"
-                      placeholder="default: none"
-                      value={params.align_model || ""}
-                      onChange={(e) => updateParam('align_model', e.target.value || undefined)}
-                      className="mt-3 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100"
-                    />
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="no_align"
-                      checked={params.no_align}
-                      onCheckedChange={(checked) => updateParam('no_align', checked)}
-                    />
-                    <Label htmlFor="no_align" className="text-[var(--text-secondary)]">Disable Alignment</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.no_align}</p>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="return_char_alignments"
-                      checked={params.return_char_alignments}
-                      onCheckedChange={(checked) => updateParam('return_char_alignments', checked)}
-                    />
-                    <Label htmlFor="return_char_alignments" className="text-[var(--text-secondary)]">Character-level Alignments</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.return_char_alignments}</p>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-
-                  <div className="flex items-center space-x-2">
-                    <Switch
-                      id="fp16"
-                      checked={params.fp16}
-                      onCheckedChange={(checked) => updateParam('fp16', checked)}
-                    />
-                    <Label htmlFor="fp16" className="text-[var(--text-secondary)]">FP16 Inference</Label>
-                    <HoverCard>
-                      <HoverCardTrigger asChild>
-                        <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                      </HoverCardTrigger>
-                      <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                        <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.fp16}</p>
-                      </HoverCardContent>
-                    </HoverCard>
-                  </div>
-                </div>
-              </TabsContent>
-
-              {!isMultiTrack && (
-                <TabsContent value="diarization" className="space-y-6 sm:space-y-8 mt-4 sm:mt-6">
-                  <div>
-                    <div className="flex items-center space-x-2 mb-6">
-                      <Switch
-                        id="diarize"
-                        checked={params.diarize}
-                        onCheckedChange={(checked) => updateParam('diarize', checked)}
-                        disabled={params.is_multi_track_enabled}
-                      />
-                      <Label htmlFor="diarize" className="text-[var(--text-secondary)]">Enable Speaker Diarization</Label>
-                      <HoverCard>
-                        <HoverCardTrigger asChild>
-                          <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                        </HoverCardTrigger>
-                        <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                          <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.diarize}</p>
-                        </HoverCardContent>
-                      </HoverCard>
-                    </div>
-
-                    {params.diarize && (
-                      <div className="p-4 sm:p-6 border border-[var(--border-subtle)] rounded-lg bg-carbon-50 dark:bg-carbon-800 space-y-4 sm:space-y-6">
-                        {params.model_family !== 'whisper' && (
-                          <div>
-                            <div className="flex items-center gap-2 mb-2">
-                              <Label htmlFor="diarize_model" className="text-[var(--text-secondary)]">Diarization Model</Label>
-                              <HoverCard>
-                                <HoverCardTrigger asChild>
-                                  <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                                </HoverCardTrigger>
-                                <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                  <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.diarize_model}</p>
-                                </HoverCardContent>
-                              </HoverCard>
-                            </div>
-                            <Select
-                              value={params.diarize_model}
-                              onValueChange={(value) => updateParam('diarize_model', value)}
-                            >
-                              <SelectTrigger className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent className="bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                <SelectItem value="pyannote" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                                  Pyannote (Recommended) - Requires HF Token
-                                </SelectItem>
-                                <SelectItem value="nvidia_sortformer" className="text-[var(--text-primary)] focus:bg-carbon-100 dark:focus:bg-carbon-700">
-                                  NVIDIA Sortformer - 4 Speakers Max, No Token
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-                        )}
-
-                        {params.diarize_model === "pyannote" && (
-                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
-                            <div>
-                              <div className="flex items-center gap-2 mb-2">
-                                <Label htmlFor="min_speakers" className="text-[var(--text-secondary)]">Min Speakers</Label>
-                                <HoverCard>
-                                  <HoverCardTrigger asChild>
-                                    <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                                  </HoverCardTrigger>
-                                  <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                    <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.min_speakers}</p>
-                                  </HoverCardContent>
-                                </HoverCard>
-                              </div>
-                              <Input
-                                type="number"
-                                min="1"
-                                max="20"
-                                placeholder="Auto-detect"
-                                value={params.min_speakers || ""}
-                                onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                                className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                              />
-                            </div>
-                            <div>
-                              <div className="flex items-center gap-2 mb-2">
-                                <Label htmlFor="max_speakers" className="text-[var(--text-secondary)]">Max Speakers</Label>
-                                <HoverCard>
-                                  <HoverCardTrigger asChild>
-                                    <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                                  </HoverCardTrigger>
-                                  <HoverCardContent className="w-64 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                    <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.max_speakers}</p>
-                                  </HoverCardContent>
-                                </HoverCard>
-                              </div>
-                              <Input
-                                type="number"
-                                min="1"
-                                max="20"
-                                placeholder="Auto-detect"
-                                value={params.max_speakers || ""}
-                                onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
-                                className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                              />
-                            </div>
-                          </div>
-                        )}
-
-                        <Separator className="my-4 sm:my-6" />
-
-                        {params.diarize_model === "pyannote" && (
-                          <div>
-                            <div className="flex items-center gap-2 mb-2">
-                              <Label htmlFor="hf_token" className="text-[var(--text-secondary)]">Hugging Face Token</Label>
-                              <HoverCard>
-                                <HoverCardTrigger asChild>
-                                  <Info className="h-4 w-4 text-carbon-400 cursor-help" />
-                                </HoverCardTrigger>
-                                <HoverCardContent className="w-80 bg-[var(--bg-main)] border-[var(--border-subtle)]">
-                                  <p className="text-sm text-[var(--text-secondary)]">{PARAM_DESCRIPTIONS.hf_token}</p>
-                                </HoverCardContent>
-                              </HoverCard>
-                            </div>
-                            <Input
-                              type="password"
-                              placeholder="Required for Pyannote diarization models"
-                              value={params.hf_token || ""}
-                              onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
-                              className="mt-3 bg-[var(--bg-main)] border-carbon-300 dark:border-carbon-600 text-[var(--text-primary)]"
-                            />
-                          </div>
-                        )}
-
-                        {params.diarize_model === "nvidia_sortformer" && (
-                          <div className="p-4 border border-orange-200 dark:border-orange-700 rounded-lg bg-orange-50 dark:bg-orange-900/20">
-                            <div className="flex items-start gap-3">
-                              <div className="text-orange-500 dark:text-orange-400 mt-0.5">⚠️</div>
-                              <div>
-                                <h4 className="text-sm font-medium text-orange-800 dark:text-orange-200 mb-1">
-                                  NVIDIA Sortformer Limitations
-                                </h4>
-                                <p className="text-sm text-orange-700 dark:text-orange-300">
-                                  This model is optimized for up to 4 speakers. Beyond 4 speakers accuracy might degrade.
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-
-                  </div>
-                </TabsContent>
-              )}
-            </Tabs>
-          )}
-
-        </div>
-        <DialogFooter className="gap-2 border-t border-[var(--border-subtle)] pt-6 mt-8 p-6 sm:p-8">
-          <Button variant="ghost" onClick={() => onOpenChange(false)} className="rounded-[var(--radius-btn)] text-[var(--text-secondary)] hover:bg-[var(--secondary)] hover:text-[var(--text-primary)]">
-            Cancel
-          </Button>
-          <Button
-            onClick={handleStartTranscription}
-            disabled={loading || (isProfileMode && !profileName.trim())}
-            className="!bg-[var(--brand-gradient)] hover:!opacity-90 !text-black dark:!text-white border-none shadow-lg shadow-orange-500/20"
-          >
-            {loading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Starting Transcription...
-              </>
-            ) : (
-              "Start Transcription"
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-});
+/**
+ * Re-export from new location for backward compatibility
+ * The TranscriptionConfigDialog has been moved to components/transcription/
+ */
+export { TranscriptionConfigDialog, type WhisperXParams } from "@/components/transcription/TranscriptionConfigDialog";
diff --git a/web/frontend/src/components/transcription/FormHelpers.tsx b/web/frontend/src/components/transcription/FormHelpers.tsx
new file mode 100644
index 00000000..94d96500
--- /dev/null
+++ b/web/frontend/src/components/transcription/FormHelpers.tsx
@@ -0,0 +1,119 @@
+import type { ReactNode } from "react";
+import { Label } from "@/components/ui/label";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import { Info } from "lucide-react";
+
+interface FormFieldProps {
+    label: string;
+    htmlFor?: string;
+    description?: string;
+    optional?: boolean;
+    children: ReactNode;
+}
+
+/**
+ * FormField - A consistent wrapper for form inputs with optional tooltip description
+ * Follows Scriberr design system
+ */
+export function FormField({ label, htmlFor, description, optional, children }: FormFieldProps) {
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-2">
+                <Label
+                    htmlFor={htmlFor}
+                    className="text-sm font-medium text-[var(--text-primary)]"
+                >
+                    {label}
+                    {optional && (
+                        <span className="ml-1 text-[var(--text-tertiary)] font-normal">(optional)</span>
+                    )}
+                </Label>
+                {description && (
+                    <HoverCard>
+                        <HoverCardTrigger asChild>
+                            <Info className="h-4 w-4 text-[var(--text-tertiary)] cursor-help hover:text-[var(--text-secondary)] transition-colors" />
+                        </HoverCardTrigger>
+                        <HoverCardContent
+                            className="w-80 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-xl p-4"
+                            style={{ boxShadow: 'var(--shadow-float)' }}
+                        >
+                            <p className="text-sm text-[var(--text-secondary)] leading-relaxed">{description}</p>
+                        </HoverCardContent>
+                    </HoverCard>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+interface SectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+}
+
+/**
+ * Section - A grouped section with title and optional description
+ */
+export function Section({ title, description, children, className = "" }: SectionProps) {
+    return (
+        <div className={`space-y-4 ${className}`}>
+            <div>
+                <h3 className="text-base font-semibold text-[var(--text-primary)]">{title}</h3>
+                {description && (
+                    <p className="text-sm text-[var(--text-secondary)] mt-1">{description}</p>
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+interface InfoBannerProps {
+    variant: 'info' | 'warning' | 'success';
+    title: string;
+    children: ReactNode;
+}
+
+/**
+ * InfoBanner - Alert/notice banner with consistent styling
+ */
+export function InfoBanner({ variant, title, children }: InfoBannerProps) {
+    const styles = {
+        info: {
+            bg: 'bg-[var(--brand-light)]',
+            border: 'border-[var(--brand-solid)]/20',
+            icon: 'text-[var(--brand-solid)]',
+            title: 'text-[var(--text-primary)]',
+        },
+        warning: {
+            bg: 'bg-[var(--warning-translucent)]',
+            border: 'border-[var(--warning-solid)]/20',
+            icon: 'text-[var(--warning-solid)]',
+            title: 'text-[var(--text-primary)]',
+        },
+        success: {
+            bg: 'bg-[var(--success-translucent)]',
+            border: 'border-[var(--success-solid)]/20',
+            icon: 'text-[var(--success-solid)]',
+            title: 'text-[var(--text-primary)]',
+        },
+    };
+
+    const s = styles[variant];
+    const icon = variant === 'warning' ? '⚠️' : variant === 'success' ? '✓' : 'ℹ️';
+
+    return (
+        <div className={`p-4 rounded-xl border ${s.bg} ${s.border}`}>
+            <div className="flex items-start gap-3">
+                <span className={`mt-0.5 ${s.icon}`}>{icon}</span>
+                <div>
+                    <h4 className={`text-sm font-medium ${s.title} mb-1`}>{title}</h4>
+                    <div className="text-sm text-[var(--text-secondary)]">{children}</div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/web/frontend/src/components/transcription/TranscriptionConfigDialog.tsx b/web/frontend/src/components/transcription/TranscriptionConfigDialog.tsx
new file mode 100644
index 00000000..d15b2623
--- /dev/null
+++ b/web/frontend/src/components/transcription/TranscriptionConfigDialog.tsx
@@ -0,0 +1,995 @@
+import { useState, useEffect, memo } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Loader2, Check, XCircle } from "lucide-react";
+import { useAuth } from "@/features/auth/hooks/useAuth";
+import { FormField, Section, InfoBanner } from "@/components/transcription/FormHelpers";
+
+// ============================================================================
+// Types & Constants
+// ============================================================================
+
+export interface WhisperXParams {
+    model_family: string;
+    model: string;
+    model_cache_only: boolean;
+    model_dir?: string;
+    device: string;
+    device_index: number;
+    batch_size: number;
+    compute_type: string;
+    threads: number;
+    output_format: string;
+    verbose: boolean;
+    task: string;
+    language?: string;
+    align_model?: string;
+    interpolate_method: string;
+    no_align: boolean;
+    return_char_alignments: boolean;
+    vad_method: string;
+    vad_onset: number;
+    vad_offset: number;
+    chunk_size: number;
+    diarize: boolean;
+    min_speakers?: number;
+    max_speakers?: number;
+    diarize_model: string;
+    speaker_embeddings: boolean;
+    temperature: number;
+    best_of: number;
+    beam_size: number;
+    patience: number;
+    length_penalty: number;
+    suppress_tokens?: string;
+    suppress_numerals: boolean;
+    initial_prompt?: string;
+    condition_on_previous_text: boolean;
+    fp16: boolean;
+    temperature_increment_on_fallback: number;
+    compression_ratio_threshold: number;
+    logprob_threshold: number;
+    no_speech_threshold: number;
+    max_line_width?: number;
+    max_line_count?: number;
+    highlight_words: boolean;
+    segment_resolution: string;
+    hf_token?: string;
+    print_progress: boolean;
+    attention_context_left: number;
+    attention_context_right: number;
+    is_multi_track_enabled: boolean;
+    api_key?: string;
+}
+
+interface TranscriptionConfigDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onStartTranscription: (params: WhisperXParams & { profileName?: string; profileDescription?: string }) => void;
+    loading?: boolean;
+    isProfileMode?: boolean;
+    initialParams?: WhisperXParams;
+    initialName?: string;
+    initialDescription?: string;
+    isMultiTrack?: boolean;
+    title?: string;
+}
+
+const DEFAULT_PARAMS: WhisperXParams = {
+    model_family: "whisper",
+    model: "small",
+    model_cache_only: false,
+    device: "cpu",
+    device_index: 0,
+    batch_size: 8,
+    compute_type: "float32",
+    threads: 0,
+    output_format: "all",
+    verbose: true,
+    task: "transcribe",
+    interpolate_method: "nearest",
+    no_align: false,
+    return_char_alignments: false,
+    vad_method: "pyannote",
+    vad_onset: 0.5,
+    vad_offset: 0.363,
+    chunk_size: 30,
+    diarize: false,
+    diarize_model: "pyannote",
+    speaker_embeddings: false,
+    temperature: 0,
+    best_of: 5,
+    beam_size: 5,
+    patience: 1.0,
+    length_penalty: 1.0,
+    suppress_numerals: false,
+    condition_on_previous_text: false,
+    fp16: true,
+    temperature_increment_on_fallback: 0.2,
+    compression_ratio_threshold: 2.4,
+    logprob_threshold: -1.0,
+    no_speech_threshold: 0.6,
+    highlight_words: false,
+    segment_resolution: "sentence",
+    print_progress: false,
+    attention_context_left: 256,
+    attention_context_right: 256,
+    is_multi_track_enabled: false,
+    api_key: "",
+};
+
+const WHISPER_MODELS = [
+    "tiny", "tiny.en", "base", "base.en", "small", "small.en",
+    "medium", "medium.en", "large", "large-v1", "large-v2", "large-v3"
+];
+
+const LANGUAGES = [
+    { value: "auto", label: "Auto-detect" },
+    { value: "en", label: "English" },
+    { value: "zh", label: "Chinese" },
+    { value: "de", label: "German" },
+    { value: "es", label: "Spanish" },
+    { value: "ru", label: "Russian" },
+    { value: "ko", label: "Korean" },
+    { value: "fr", label: "French" },
+    { value: "ja", label: "Japanese" },
+    { value: "pt", label: "Portuguese" },
+    { value: "tr", label: "Turkish" },
+    { value: "pl", label: "Polish" },
+    { value: "nl", label: "Dutch" },
+    { value: "ar", label: "Arabic" },
+    { value: "sv", label: "Swedish" },
+    { value: "it", label: "Italian" },
+    { value: "id", label: "Indonesian" },
+    { value: "hi", label: "Hindi" },
+    { value: "fi", label: "Finnish" },
+    { value: "vi", label: "Vietnamese" },
+    { value: "he", label: "Hebrew" },
+    { value: "uk", label: "Ukrainian" },
+    { value: "el", label: "Greek" },
+];
+
+const CANARY_LANGUAGES = [
+    { value: "en", label: "English" },
+    { value: "de", label: "German" },
+    { value: "es", label: "Spanish" },
+    { value: "fr", label: "French" },
+];
+
+const PARAM_DESCRIPTIONS = {
+    model: "Size of the Whisper model. Larger = more accurate but slower.",
+    language: "Source language. Auto-detect works for most cases.",
+    task: "Transcribe in original language or translate to English.",
+    device: "CPU (universal), GPU (faster, CUDA required), or AUTO.",
+    compute_type: "Float16 (faster), Float32 (accurate), Int8 (fastest).",
+    batch_size: "Segments processed at once. Higher = faster but more memory.",
+    diarize: "Identify and separate different speakers.",
+    diarize_model: "Pyannote (accurate, needs HF token) or NVIDIA Sortformer (up to 4 speakers).",
+    temperature: "0 = deterministic, higher = more creative.",
+    beam_size: "Search beams. Higher = better quality but slower.",
+    vad_method: "Voice detection: Pyannote (accurate) or Silero (fast).",
+    initial_prompt: "Context text to guide transcription style.",
+    hf_token: "Required for Pyannote diarization models.",
+};
+
+// ============================================================================
+// Styled Input/Select Components 
+// ============================================================================
+
+const inputClassName = `
+  h-11 bg-[var(--bg-main)] border border-[var(--border-subtle)] rounded-xl
+  text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)]
+  focus:border-[var(--brand-solid)] focus:ring-2 focus:ring-[var(--brand-solid)]/20
+  transition-all duration-200
+  [color-scheme:light] dark:[color-scheme:dark]
+`;
+
+const selectTriggerClassName = `
+  h-11 bg-[var(--bg-main)] border border-[var(--border-subtle)] rounded-xl
+  text-[var(--text-primary)] shadow-none
+  focus:border-[var(--brand-solid)] focus:ring-2 focus:ring-[var(--brand-solid)]/20
+`;
+
+const selectContentClassName = `
+  bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-xl
+`;
+
+const selectItemClassName = `
+  text-[var(--text-primary)] rounded-lg mx-1 cursor-pointer
+  focus:bg-[var(--brand-light)] focus:text-[var(--brand-solid)]
+`;
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export const TranscriptionConfigDialog = memo(function TranscriptionConfigDialog({
+    open,
+    onOpenChange,
+    onStartTranscription,
+    loading = false,
+    isProfileMode = false,
+    initialParams,
+    initialName = "",
+    initialDescription = "",
+    isMultiTrack = false,
+    title,
+}: TranscriptionConfigDialogProps) {
+    const [params, setParams] = useState<WhisperXParams>(DEFAULT_PARAMS);
+    const [profileName, setProfileName] = useState("");
+    const [profileDescription, setProfileDescription] = useState("");
+
+    // OpenAI validation state
+    const [isValidating, setIsValidating] = useState(false);
+    const [validationStatus, setValidationStatus] = useState<'idle' | 'valid' | 'invalid'>('idle');
+    const [validationMessage, setValidationMessage] = useState("");
+    const { getAuthHeaders } = useAuth();
+    const [availableModels, setAvailableModels] = useState<string[]>(["whisper-1"]);
+
+    // Reset when dialog opens
+    useEffect(() => {
+        if (open) {
+            const baseParams = initialParams || DEFAULT_PARAMS;
+            setParams({
+                ...baseParams,
+                is_multi_track_enabled: isMultiTrack,
+                diarize: isMultiTrack ? false : baseParams.diarize
+            });
+            setProfileName(initialName);
+            setProfileDescription(initialDescription);
+        }
+    }, [open, initialParams, initialName, initialDescription, isMultiTrack]);
+
+    const updateParam = <K extends keyof WhisperXParams>(key: K, value: WhisperXParams[K]) => {
+        setParams(prev => {
+            const newParams = { ...prev, [key]: value };
+            if (key === 'model_family' && value === 'whisper') {
+                newParams.diarize_model = 'pyannote';
+            }
+            return newParams;
+        });
+    };
+
+    const validateAPIKey = async () => {
+        setIsValidating(true);
+        setValidationStatus('idle');
+        try {
+            const response = await fetch('/api/v1/config/openai/validate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+                body: JSON.stringify({ api_key: params.api_key }),
+            });
+            const data = await response.json();
+            if (response.ok && data.valid) {
+                setValidationStatus('valid');
+                setAvailableModels(data.models || ["whisper-1"]);
+                setValidationMessage("API key validated");
+            } else {
+                setValidationStatus('invalid');
+                setValidationMessage(data.error || "Invalid API key");
+            }
+        } catch {
+            setValidationStatus('invalid');
+            setValidationMessage("Validation failed");
+        } finally {
+            setIsValidating(false);
+        }
+    };
+
+    const handleSubmit = () => {
+        if (isProfileMode) {
+            onStartTranscription({ ...params, profileName, profileDescription });
+        } else {
+            onStartTranscription(params);
+        }
+    };
+
+    const dialogTitle = title || (isProfileMode
+        ? (initialName ? `Edit "${initialName}"` : "New Transcription Profile")
+        : "Transcription Settings"
+    );
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent
+                className="max-w-full sm:max-w-2xl w-[calc(100vw-1rem)] max-h-[90vh] overflow-hidden flex flex-col p-0 gap-0 bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-2xl"
+                style={{ boxShadow: 'var(--shadow-float)' }}
+            >
+                {/* Header */}
+                <DialogHeader className="px-6 pt-6 pb-4 border-b border-[var(--border-subtle)]">
+                    <DialogTitle className="text-xl font-semibold text-[var(--text-primary)]">
+                        {dialogTitle}
+                    </DialogTitle>
+                    <DialogDescription className="text-[var(--text-secondary)] text-sm mt-1">
+                        {isProfileMode
+                            ? "Configure and save your transcription settings."
+                            : "Choose a model and configure transcription parameters."
+                        }
+                    </DialogDescription>
+                </DialogHeader>
+
+                {/* Scrollable Content */}
+                <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
+
+                    {/* Profile Name/Description (if profile mode) */}
+                    {isProfileMode && (
+                        <div className="p-4 bg-[var(--bg-main)] rounded-xl border border-[var(--border-subtle)] space-y-4">
+                            <FormField label="Profile Name" htmlFor="profileName">
+                                <Input
+                                    id="profileName"
+                                    value={profileName}
+                                    onChange={(e) => setProfileName(e.target.value)}
+                                    placeholder="My transcription profile"
+                                    className={inputClassName}
+                                    required
+                                />
+                            </FormField>
+                            <FormField label="Description" htmlFor="profileDesc" optional>
+                                <Textarea
+                                    id="profileDesc"
+                                    value={profileDescription}
+                                    onChange={(e) => setProfileDescription(e.target.value)}
+                                    placeholder="Describe this profile..."
+                                    className={`${inputClassName} resize-none min-h-[80px]`}
+                                    rows={2}
+                                />
+                            </FormField>
+                        </div>
+                    )}
+
+                    {/* Model Family Selection */}
+                    <FormField
+                        label="Model Family"
+                        description="Choose the AI model for transcription. Each has different capabilities and requirements."
+                    >
+                        <Select
+                            value={params.model_family}
+                            onValueChange={(v) => updateParam('model_family', v)}
+                        >
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                <SelectItem value="whisper" className={selectItemClassName}>
+                                    Whisper
+                                </SelectItem>
+                                <SelectItem value="nvidia_parakeet" className={selectItemClassName}>
+                                    NVIDIA Parakeet
+                                </SelectItem>
+                                <SelectItem value="nvidia_canary" className={selectItemClassName}>
+                                    NVIDIA Canary
+                                </SelectItem>
+                                <SelectItem value="openai" className={selectItemClassName}>
+                                    OpenAI
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+
+                    {/* Multi-track notice */}
+                    {isMultiTrack && (
+                        <InfoBanner variant="info" title="Multi-track Audio Detected">
+                            Each audio track will be transcribed separately. Speaker diarization is disabled.
+                        </InfoBanner>
+                    )}
+
+                    {/* Model-Specific Configuration */}
+                    {params.model_family === "whisper" && (
+                        <WhisperConfig
+                            params={params}
+                            updateParam={updateParam}
+                            isMultiTrack={isMultiTrack}
+                        />
+                    )}
+
+                    {params.model_family === "nvidia_parakeet" && (
+                        <ParakeetConfig
+                            params={params}
+                            updateParam={updateParam}
+                            isMultiTrack={isMultiTrack}
+                        />
+                    )}
+
+                    {params.model_family === "nvidia_canary" && (
+                        <CanaryConfig
+                            params={params}
+                            updateParam={updateParam}
+                            isMultiTrack={isMultiTrack}
+                        />
+                    )}
+
+                    {params.model_family === "openai" && (
+                        <OpenAIConfig
+                            params={params}
+                            updateParam={updateParam}
+                            isValidating={isValidating}
+                            validationStatus={validationStatus}
+                            validationMessage={validationMessage}
+                            availableModels={availableModels}
+                            onValidate={validateAPIKey}
+                        />
+                    )}
+                </div>
+
+                {/* Footer */}
+                <DialogFooter className="px-6 py-4 border-t border-[var(--border-subtle)] gap-3 sm:gap-2">
+                    <Button
+                        variant="ghost"
+                        onClick={() => onOpenChange(false)}
+                        className="rounded-xl text-[var(--text-secondary)] hover:bg-[var(--bg-main)] cursor-pointer"
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={handleSubmit}
+                        disabled={loading || (isProfileMode && !profileName.trim())}
+                        className="rounded-xl text-white cursor-pointer bg-gradient-to-r from-[#FFAB40] to-[#FF3D00] hover:opacity-90 active:scale-[0.98] transition-all shadow-lg shadow-orange-500/20"
+                    >
+                        {loading ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                Starting...
+                            </>
+                        ) : (
+                            isProfileMode ? "Save Profile" : "Start Transcription"
+                        )}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+});
+
+// ============================================================================
+// Model-Specific Configuration Components
+// ============================================================================
+
+interface ConfigProps {
+    params: WhisperXParams;
+    updateParam: <K extends keyof WhisperXParams>(key: K, value: WhisperXParams[K]) => void;
+    isMultiTrack?: boolean;
+}
+
+function WhisperConfig({ params, updateParam, isMultiTrack }: ConfigProps) {
+    return (
+        <div className="space-y-6">
+            {/* Essential Settings */}
+            <Section title="Model Settings">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <FormField label="Model Size" description={PARAM_DESCRIPTIONS.model}>
+                        <Select value={params.model} onValueChange={(v) => updateParam('model', v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                {WHISPER_MODELS.map((m) => (
+                                    <SelectItem key={m} value={m} className={selectItemClassName}>{m}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+
+                    <FormField label="Language" description={PARAM_DESCRIPTIONS.language}>
+                        <Select value={params.language || "auto"} onValueChange={(v) => updateParam('language', v === "auto" ? undefined : v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                {LANGUAGES.map((l) => (
+                                    <SelectItem key={l.value} value={l.value} className={selectItemClassName}>{l.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+
+                    <FormField label="Task" description={PARAM_DESCRIPTIONS.task}>
+                        <Select value={params.task} onValueChange={(v) => updateParam('task', v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                <SelectItem value="transcribe" className={selectItemClassName}>Transcribe</SelectItem>
+                                <SelectItem value="translate" className={selectItemClassName}>Translate to English</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+
+                    <FormField label="Device" description={PARAM_DESCRIPTIONS.device}>
+                        <Select value={params.device} onValueChange={(v) => updateParam('device', v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                <SelectItem value="cpu" className={selectItemClassName}>CPU</SelectItem>
+                                <SelectItem value="cuda" className={selectItemClassName}>GPU (CUDA)</SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+                </div>
+            </Section>
+
+            {/* Speaker Diarization */}
+            {!isMultiTrack && (
+                <Section title="Speaker Diarization" description="Identify and separate different speakers in the audio">
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-3">
+                            <Switch
+                                id="diarize"
+                                checked={params.diarize}
+                                onCheckedChange={(v) => updateParam('diarize', v)}
+                            />
+                            <label htmlFor="diarize" className="text-sm text-[var(--text-primary)] cursor-pointer">
+                                Enable speaker identification
+                            </label>
+                        </div>
+
+                        {params.diarize && (
+                            <div className="p-4 bg-[var(--bg-main)] rounded-xl border border-[var(--border-subtle)] space-y-4">
+                                <div className="grid grid-cols-2 gap-4">
+                                    <FormField label="Min Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.min_speakers || ""}
+                                            onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                    <FormField label="Max Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.max_speakers || ""}
+                                            onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                </div>
+
+                                <FormField label="Hugging Face Token" description={PARAM_DESCRIPTIONS.hf_token}>
+                                    <Input
+                                        type="password"
+                                        placeholder="hf_..."
+                                        value={params.hf_token || ""}
+                                        onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
+                                        className={inputClassName}
+                                    />
+                                </FormField>
+                            </div>
+                        )}
+                    </div>
+                </Section>
+            )}
+
+            {/* Advanced Settings (Accordion) */}
+            <Accordion type="single" collapsible className="w-full">
+                <AccordionItem value="advanced" className="border border-[var(--border-subtle)] rounded-xl px-4">
+                    <AccordionTrigger className="text-sm font-medium text-[var(--text-primary)] hover:no-underline py-4">
+                        Advanced Settings
+                    </AccordionTrigger>
+                    <AccordionContent className="pb-4 space-y-4">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <FormField label="Compute Type" description={PARAM_DESCRIPTIONS.compute_type}>
+                                <Select value={params.compute_type} onValueChange={(v) => updateParam('compute_type', v)}>
+                                    <SelectTrigger className={selectTriggerClassName}>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent className={selectContentClassName}>
+                                        <SelectItem value="float32" className={selectItemClassName}>Float32 (Accurate)</SelectItem>
+                                        <SelectItem value="float16" className={selectItemClassName}>Float16 (Fast)</SelectItem>
+                                        <SelectItem value="int8" className={selectItemClassName}>Int8 (Fastest)</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </FormField>
+
+                            <FormField label="Batch Size" description={PARAM_DESCRIPTIONS.batch_size}>
+                                <Input
+                                    type="number"
+                                    min={1}
+                                    max={64}
+                                    value={params.batch_size}
+                                    onChange={(e) => updateParam('batch_size', parseInt(e.target.value) || 8)}
+                                    className={inputClassName}
+                                />
+                            </FormField>
+
+                            <FormField label="Beam Size" description={PARAM_DESCRIPTIONS.beam_size}>
+                                <Input
+                                    type="number"
+                                    min={1}
+                                    max={10}
+                                    value={params.beam_size}
+                                    onChange={(e) => updateParam('beam_size', parseInt(e.target.value) || 5)}
+                                    className={inputClassName}
+                                />
+                            </FormField>
+
+                            <FormField label="Temperature" description={PARAM_DESCRIPTIONS.temperature}>
+                                <Input
+                                    type="number"
+                                    min={0}
+                                    max={1}
+                                    step={0.1}
+                                    value={params.temperature}
+                                    onChange={(e) => updateParam('temperature', parseFloat(e.target.value) || 0)}
+                                    className={inputClassName}
+                                />
+                            </FormField>
+                        </div>
+
+                        <FormField label="Initial Prompt" description={PARAM_DESCRIPTIONS.initial_prompt} optional>
+                            <Textarea
+                                placeholder="Optional context to guide transcription..."
+                                value={params.initial_prompt || ""}
+                                onChange={(e) => updateParam('initial_prompt', e.target.value || undefined)}
+                                className={`${inputClassName} resize-none min-h-[80px]`}
+                                rows={2}
+                            />
+                        </FormField>
+
+                        <div className="flex items-center gap-3">
+                            <Switch
+                                id="suppress_numerals"
+                                checked={params.suppress_numerals}
+                                onCheckedChange={(v) => updateParam('suppress_numerals', v)}
+                            />
+                            <label htmlFor="suppress_numerals" className="text-sm text-[var(--text-primary)] cursor-pointer">
+                                Suppress numerals (write numbers as words)
+                            </label>
+                        </div>
+
+                        {/* Alignment Settings */}
+                        <div className="pt-2 border-t border-[var(--border-subtle)] space-y-4">
+                            <div className="flex items-center gap-3">
+                                <Switch
+                                    id="no_align"
+                                    checked={params.no_align}
+                                    onCheckedChange={(v) => updateParam('no_align', v)}
+                                />
+                                <label htmlFor="no_align" className="text-sm text-[var(--text-primary)] cursor-pointer">
+                                    Skip word alignment (faster, less precise timestamps)
+                                </label>
+                            </div>
+
+                            {!params.no_align && (
+                                <FormField label="Custom Alignment Model" description="WhisperX-compatible alignment model (e.g., KBLab/wav2vec2-large-voxrex-swedish). Leave empty for default." optional>
+                                    <Input
+                                        placeholder="model/path or HuggingFace ID"
+                                        value={params.align_model || ""}
+                                        onChange={(e) => updateParam('align_model', e.target.value || undefined)}
+                                        className={inputClassName}
+                                    />
+                                </FormField>
+                            )}
+                        </div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
+
+function ParakeetConfig({ params, updateParam, isMultiTrack }: ConfigProps) {
+    return (
+        <div className="space-y-6">
+            {/* Long-form Audio Settings */}
+            <Section title="Audio Context" description="Configure how much context the model uses for long audio files">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                    <div className="space-y-3">
+                        <FormField label="Left Context">
+                            <Slider
+                                value={[params.attention_context_left]}
+                                onValueChange={(v) => updateParam('attention_context_left', v[0])}
+                                max={512}
+                                min={64}
+                                step={64}
+                                className="w-full"
+                            />
+                            <div className="flex justify-between text-xs text-[var(--text-tertiary)]">
+                                <span>64</span>
+                                <span className="font-medium text-[var(--text-primary)]">{params.attention_context_left}</span>
+                                <span>512</span>
+                            </div>
+                        </FormField>
+                    </div>
+
+                    <div className="space-y-3">
+                        <FormField label="Right Context">
+                            <Slider
+                                value={[params.attention_context_right]}
+                                onValueChange={(v) => updateParam('attention_context_right', v[0])}
+                                max={512}
+                                min={64}
+                                step={64}
+                                className="w-full"
+                            />
+                            <div className="flex justify-between text-xs text-[var(--text-tertiary)]">
+                                <span>64</span>
+                                <span className="font-medium text-[var(--text-primary)]">{params.attention_context_right}</span>
+                                <span>512</span>
+                            </div>
+                        </FormField>
+                    </div>
+                </div>
+            </Section>
+
+            {/* Diarization for Parakeet */}
+            {!isMultiTrack && (
+                <Section title="Speaker Diarization">
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-3">
+                            <Switch
+                                id="parakeet_diarize"
+                                checked={params.diarize}
+                                onCheckedChange={(v) => updateParam('diarize', v)}
+                            />
+                            <label htmlFor="parakeet_diarize" className="text-sm text-[var(--text-primary)] cursor-pointer">
+                                Enable speaker identification
+                            </label>
+                        </div>
+
+                        {params.diarize && (
+                            <div className="p-4 bg-[var(--bg-main)] rounded-xl border border-[var(--border-subtle)] space-y-4">
+                                <FormField label="Diarization Model">
+                                    <Select value={params.diarize_model} onValueChange={(v) => updateParam('diarize_model', v)}>
+                                        <SelectTrigger className={selectTriggerClassName}>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent className={selectContentClassName}>
+                                            <SelectItem value="pyannote" className={selectItemClassName}>Pyannote</SelectItem>
+                                            <SelectItem value="nvidia_sortformer" className={selectItemClassName}>NVIDIA Sortformer</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </FormField>
+
+                                <div className="grid grid-cols-2 gap-4">
+                                    <FormField label="Min Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.min_speakers || ""}
+                                            onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                    <FormField label="Max Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.max_speakers || ""}
+                                            onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                </div>
+
+                                {params.diarize_model === "pyannote" && (
+                                    <FormField label="Hugging Face Token">
+                                        <Input
+                                            type="password"
+                                            placeholder="hf_..."
+                                            value={params.hf_token || ""}
+                                            onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </Section>
+            )}
+        </div>
+    );
+}
+
+function CanaryConfig({ params, updateParam, isMultiTrack }: ConfigProps) {
+    return (
+        <div className="space-y-6">
+            <Section title="Language Settings">
+                <FormField label="Source Language">
+                    <Select value={params.language || "en"} onValueChange={(v) => updateParam('language', v)}>
+                        <SelectTrigger className={selectTriggerClassName}>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent className={selectContentClassName}>
+                            {CANARY_LANGUAGES.map((l) => (
+                                <SelectItem key={l.value} value={l.value} className={selectItemClassName}>{l.label}</SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </FormField>
+            </Section>
+
+            {/* Diarization for Canary */}
+            {!isMultiTrack && (
+                <Section title="Speaker Diarization">
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-3">
+                            <Switch
+                                id="canary_diarize"
+                                checked={params.diarize}
+                                onCheckedChange={(v) => updateParam('diarize', v)}
+                            />
+                            <label htmlFor="canary_diarize" className="text-sm text-[var(--text-primary)] cursor-pointer">
+                                Enable speaker identification
+                            </label>
+                        </div>
+
+                        {params.diarize && (
+                            <div className="p-4 bg-[var(--bg-main)] rounded-xl border border-[var(--border-subtle)] space-y-4">
+                                <FormField label="Diarization Model">
+                                    <Select value={params.diarize_model} onValueChange={(v) => updateParam('diarize_model', v)}>
+                                        <SelectTrigger className={selectTriggerClassName}>
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent className={selectContentClassName}>
+                                            <SelectItem value="pyannote" className={selectItemClassName}>Pyannote</SelectItem>
+                                            <SelectItem value="nvidia_sortformer" className={selectItemClassName}>NVIDIA Sortformer</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </FormField>
+
+                                <div className="grid grid-cols-2 gap-4">
+                                    <FormField label="Min Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.min_speakers || ""}
+                                            onChange={(e) => updateParam('min_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                    <FormField label="Max Speakers" optional>
+                                        <Input
+                                            type="number"
+                                            min={1}
+                                            max={20}
+                                            placeholder="Auto"
+                                            value={params.max_speakers || ""}
+                                            onChange={(e) => updateParam('max_speakers', e.target.value ? parseInt(e.target.value) : undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                </div>
+
+                                {params.diarize_model === "pyannote" && (
+                                    <FormField label="Hugging Face Token">
+                                        <Input
+                                            type="password"
+                                            placeholder="hf_..."
+                                            value={params.hf_token || ""}
+                                            onChange={(e) => updateParam('hf_token', e.target.value || undefined)}
+                                            className={inputClassName}
+                                        />
+                                    </FormField>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </Section>
+            )}
+        </div>
+    );
+}
+
+interface OpenAIConfigProps extends ConfigProps {
+    isValidating: boolean;
+    validationStatus: 'idle' | 'valid' | 'invalid';
+    validationMessage: string;
+    availableModels: string[];
+    onValidate: () => void;
+}
+
+function OpenAIConfig({
+    params,
+    updateParam,
+    isValidating,
+    validationStatus,
+    validationMessage,
+    availableModels,
+    onValidate
+}: OpenAIConfigProps) {
+    return (
+        <div className="space-y-6">
+            <Section title="API Configuration">
+                <div className="space-y-4">
+                    <FormField label="OpenAI API Key" description="Your API key. Leave empty to use server default if configured.">
+                        <div className="flex gap-2">
+                            <Input
+                                type="password"
+                                placeholder="sk-..."
+                                value={params.api_key || ""}
+                                onChange={(e) => {
+                                    updateParam('api_key', e.target.value);
+                                }}
+                                className={`${inputClassName} flex-1`}
+                            />
+                            <Button
+                                variant="outline"
+                                onClick={onValidate}
+                                disabled={isValidating}
+                                className="shrink-0 rounded-xl border-[var(--border-subtle)] cursor-pointer"
+                            >
+                                {isValidating ? <Loader2 className="h-4 w-4 animate-spin" /> : "Validate"}
+                            </Button>
+                        </div>
+                        {validationStatus !== 'idle' && (
+                            <div className={`flex items-center gap-2 text-sm mt-2 ${validationStatus === 'valid' ? 'text-[var(--success-solid)]' : 'text-[var(--error)]'
+                                }`}>
+                                {validationStatus === 'valid' ? <Check className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
+                                <span>{validationMessage}</span>
+                            </div>
+                        )}
+                    </FormField>
+
+                    <FormField label="Model">
+                        <Select value={params.model || "whisper-1"} onValueChange={(v) => updateParam('model', v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                {availableModels.map((m) => (
+                                    <SelectItem key={m} value={m} className={selectItemClassName}>{m}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+
+                    <FormField label="Language">
+                        <Select value={params.language || "auto"} onValueChange={(v) => updateParam('language', v === "auto" ? undefined : v)}>
+                            <SelectTrigger className={selectTriggerClassName}>
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className={selectContentClassName}>
+                                {LANGUAGES.map((l) => (
+                                    <SelectItem key={l.value} value={l.value} className={selectItemClassName}>{l.label}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </FormField>
+                </div>
+            </Section>
+
+            {params.model && params.model !== "whisper-1" && (
+                <InfoBanner variant="warning" title="Limited Features">
+                    Word-level timestamps are only supported by whisper-1. Synchronized playback won't be available.
+                </InfoBanner>
+            )}
+        </div>
+    );
+}
diff --git a/web/frontend/src/components/ui/accordion.tsx b/web/frontend/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..1efdc8e5
--- /dev/null
+++ b/web/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item
+        ref={ref}
+        className={cn("border-b", className)}
+        {...props}
+    />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className="flex">
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 cursor-pointer",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+        {...props}
+    >
+        <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }