M002/S04: output format selection, media icons, gear repositioned

- Move gear icon to left of Video/Audio toggle
- Add output format selector in options panel:
  Audio: Auto, MP3, WAV, M4A, FLAC, OPUS
  Video: Auto, MP4, WEBM
- Backend: postprocess audio to selected codec via FFmpegExtractAudio
- Backend: postprocessor_hooks capture final filename after conversion
  (fixes .webm showing when file was converted to .mp3)
- Add media type icon (video camera / music note) in download table
  next to filename, inferred from quality field and file extension
- Pass media_type and output_format through JobCreate model

backend/app/models/job.py

@@ -25,6 +25,8 @@ class JobCreate(BaseModel):
     format_id: str | None = None
     quality: str | None = None
     output_template: str | None = None
+    media_type: str | None = None       # "video" | "audio"
+    output_format: str | None = None    # e.g. "mp3", "wav", "mp4", "webm"
 
 
 class Job(BaseModel):

backend/app/services/download.py

@@ -119,6 +119,25 @@ class DownloadService:
         elif job_create.quality:
             opts["format"] = job_create.quality
 
+        # Output format post-processing (e.g. convert to mp3, mp4)
+        out_fmt = job_create.output_format
+        if out_fmt:
+            if out_fmt in ("mp3", "wav", "m4a", "flac", "opus"):
+                # Audio conversion via yt-dlp postprocessor
+                opts["postprocessors"] = [{
+                    "key": "FFmpegExtractAudio",
+                    "preferredcodec": out_fmt,
+                    "preferredquality": "0" if out_fmt in ("flac", "wav") else "192",
+                }]
+            elif out_fmt == "mp4":
+                # Prefer mp4-native streams; remux if needed
+                opts["merge_output_format"] = "mp4"
+                opts.setdefault("format", "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best")
+                opts["postprocessors"] = [{
+                    "key": "FFmpegVideoRemuxer",
+                    "preferedformat": "mp4",
+                }]
+
         self._loop.run_in_executor(
             self._executor,
             self._run_download,
@@ -245,7 +264,25 @@ class DownloadService:
             except Exception:
                 logger.exception("Job %s progress hook error (status=%s)", job_id, d.get("status"))
 
+        # Track final filename after postprocessing (e.g. audio conversion)
+        final_filename = [None]  # mutable container for closure
+
+        def postprocessor_hook(d: dict) -> None:
+            """Capture the final filename after postprocessing."""
+            if d.get("status") == "finished":
+                info = d.get("info_dict", {})
+                # After postprocessing, filepath reflects the converted file
+                filepath = info.get("filepath") or info.get("filename")
+                if filepath:
+                    abs_path = Path(filepath).resolve()
+                    out_dir = Path(self._config.downloads.output_dir).resolve()
+                    try:
+                        final_filename[0] = str(abs_path.relative_to(out_dir))
+                    except ValueError:
+                        final_filename[0] = abs_path.name
+
         opts["progress_hooks"] = [progress_hook]
+        opts["postprocessor_hooks"] = [postprocessor_hook]
 
         try:
             # Mark as downloading and notify SSE
@@ -278,6 +315,11 @@ class DownloadService:
 
                 ydl.download([url])
 
+            # Use postprocessor's final filename if available (handles
+            # audio conversion changing .webm → .mp3 etc.)
+            if final_filename[0]:
+                relative_fn = final_filename[0]
+
             # Persist filename to DB (progress hooks may not have fired
             # if the file already existed)
             if relative_fn:

frontend/src/api/types.ts

@@ -40,6 +40,8 @@ export interface JobCreate {
   format_id?: string | null
   quality?: string | null
   output_template?: string | null
+  media_type?: string | null       // "video" | "audio"
+  output_format?: string | null    // e.g. "mp3", "wav", "mp4", "webm"
 }
 
 export interface ProgressEvent {

frontend/src/components/DownloadTable.vue

@@ -102,6 +102,16 @@ function isCompleted(job: Job): boolean {
   return job.status === 'completed'
 }
 
+/** Infer whether the job is audio or video from quality/filename. */
+function isAudioJob(job: Job): boolean {
+  if (job.quality === 'bestaudio') return true
+  if (job.filename) {
+    const ext = job.filename.split('.').pop()?.toLowerCase() || ''
+    if (['mp3', 'wav', 'flac', 'opus', 'm4a', 'aac', 'ogg', 'wma'].includes(ext)) return true
+  }
+  return false
+}
+
 // File download URL — filename is relative to the output directory
 // (normalized by the backend). May contain subdirectories for source templates.
 function downloadUrl(job: Job): string {
@@ -171,7 +181,14 @@ async function clearJob(jobId: string): Promise<void> {
       </thead>
       <TransitionGroup name="table-row" tag="tbody">
         <tr v-for="job in sortedJobs" :key="job.id" :class="'row-' + job.status">
-          <td class="col-name" :title="job.url">{{ displayName(job) }}</td>
+          <td class="col-name" :title="job.url">
+            <span class="name-with-icon">
+              <!-- Media type icon -->
+              <svg v-if="isAudioJob(job)" class="media-icon audio-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+              <svg v-else class="media-icon video-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+              <span class="name-text">{{ displayName(job) }}</span>
+            </span>
+          </td>
           <td class="col-status">
             <span class="status-badge" :class="'badge-' + job.status">
               {{ job.status }}
@@ -316,6 +333,25 @@ async function clearJob(jobId: string): Promise<void> {
   white-space: nowrap;
 }
 
+.name-with-icon {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  overflow: hidden;
+}
+
+.media-icon {
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+}
+
+.name-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .col-status { width: 100px; }
 .col-progress { width: 180px; min-width: 120px; }
 .col-speed { width: 100px; }

frontend/src/components/UrlInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { api } from '@/api/client'
 import { useDownloadsStore } from '@/stores/downloads'
 import FormatPicker from './FormatPicker.vue'
@@ -16,6 +16,19 @@ const showOptions = ref(false)
 
 type MediaType = 'video' | 'audio'
 const mediaType = ref<MediaType>('video')
+const outputFormat = ref<string>('auto')
+
+const audioFormats = ['auto', 'mp3', 'wav', 'm4a', 'flac', 'opus'] as const
+const videoFormats = ['auto', 'mp4', 'webm'] as const
+
+const availableFormats = computed(() =>
+  mediaType.value === 'audio' ? audioFormats : videoFormats
+)
+
+// Reset output format when switching media type
+watch(mediaType, () => {
+  outputFormat.value = 'auto'
+})
 
 /** Whether formats have been fetched for the current URL. */
 const formatsReady = computed(() => formats.value.length > 0)
@@ -47,6 +60,8 @@ async function submitDownload(): Promise<void> {
       url: trimmed,
       format_id: selectedFormatId.value,
       quality: mediaType.value === 'audio' && !selectedFormatId.value ? 'bestaudio' : null,
+      media_type: mediaType.value,
+      output_format: outputFormat.value === 'auto' ? null : outputFormat.value,
     })
     // Reset form on success
     url.value = ''
@@ -55,6 +70,7 @@ async function submitDownload(): Promise<void> {
     selectedFormatId.value = null
     extractError.value = null
     mediaType.value = 'video'
+    outputFormat.value = 'auto'
   } catch {
     // Error already in store.submitError
   }
@@ -80,6 +96,11 @@ function toggleOptions(): void {
     extractFormats()
   }
 }
+
+function formatLabel(fmt: string): string {
+  if (fmt === 'auto') return 'Auto'
+  return fmt.toUpperCase()
+}
 </script>
 
 <template>
@@ -95,8 +116,18 @@ function toggleOptions(): void {
       :disabled="isExtracting || store.isSubmitting"
     />
 
-    <!-- Action row: media toggle, download button, gear -->
+    <!-- Action row: gear, media toggle, download button -->
     <div class="action-row">
+      <button
+        class="btn-options"
+        :class="{ active: showOptions }"
+        @click="toggleOptions"
+        :disabled="!url.trim()"
+        title="Format options"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+      </button>
+
       <div class="media-toggle">
         <button
           class="toggle-pill"
@@ -125,16 +156,6 @@ function toggleOptions(): void {
       >
         {{ store.isSubmitting ? 'Submitting…' : 'Download' }}
       </button>
-
-      <button
-        class="btn-options"
-        :class="{ active: showOptions }"
-        @click="toggleOptions"
-        :disabled="!url.trim()"
-        title="Format options"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-      </button>
     </div>
 
     <div v-if="isExtracting" class="extract-loading">
@@ -150,9 +171,26 @@ function toggleOptions(): void {
       {{ store.submitError }}
     </div>
 
-    <!-- Collapsible format picker -->
+    <!-- Collapsible options panel -->
     <Transition name="options-slide">
       <div v-if="showOptions" class="options-panel">
+        <!-- Output format selector -->
+        <div class="format-selector">
+          <label class="format-label">Output format</label>
+          <div class="format-chips">
+            <button
+              v-for="fmt in availableFormats"
+              :key="fmt"
+              class="format-chip"
+              :class="{ active: outputFormat === fmt }"
+              @click="outputFormat = fmt"
+            >
+              {{ formatLabel(fmt) }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Advanced format picker from yt-dlp extract_info -->
         <FormatPicker
           v-if="formatsReady"
           :formats="formats"
@@ -179,13 +217,39 @@ function toggleOptions(): void {
   font-size: var(--font-size-base);
 }
 
-/* Action row: toggle | download | gear */
+/* Action row: gear | toggle | download */
 .action-row {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
 }
 
+.btn-options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  flex-shrink: 0;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  transition: all 0.15s ease;
+}
+
+.btn-options:hover:not(:disabled) {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.btn-options.active {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
 .media-toggle {
   display: flex;
   gap: 0;
@@ -246,32 +310,6 @@ button:disabled {
   cursor: not-allowed;
 }
 
-.btn-options {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  flex-shrink: 0;
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  transition: all 0.15s ease;
-}
-
-.btn-options:hover:not(:disabled) {
-  color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.btn-options.active {
-  color: var(--color-accent);
-  border-color: var(--color-accent);
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-}
-
 /* Loading / errors */
 .extract-loading {
   display: flex;
@@ -302,9 +340,55 @@ button:disabled {
   padding: var(--space-sm);
 }
 
-/* Options panel transition */
+/* Options panel */
 .options-panel {
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.format-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) 0;
+}
+
+.format-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.format-chips {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+}
+
+.format-chip {
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-height: 30px;
+}
+
+.format-chip:hover {
+  color: var(--color-text);
+  border-color: var(--color-text-muted);
+}
+
+.format-chip.active {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+  border-color: var(--color-accent);
 }
 
 .options-slide-enter-active,
@@ -342,7 +426,7 @@ button:disabled {
   }
 }
 
-/* Mobile: stack URL field above action row */
+/* Mobile */
 @media (max-width: 767px) {
   .btn-download {
     padding: var(--space-sm) var(--space-md);