GSD: M002/S02 complete — Download flow + queue redesign

- UrlInput: Download is primary one-click action, format picker is optional (⚙ toggle)
- UrlInput: Video/Audio toggle pills with icons, audio sends quality=bestaudio
- UrlInput: Paste auto-extracts formats silently in background
- DownloadTable: Sortable table with Name, Status, Progress, Speed, ETA, Actions columns
- DownloadTable: Status badges with color-coded backgrounds per status
- DownloadTable: Completed items show download/copy-link/clear action icons
- DownloadTable: Active items show cancel, failed/expired show clear
- DownloadTable: Click column headers to sort (toggle asc/desc)
- DownloadTable: Mobile hides Speed+ETA columns below 640px
- DownloadQueue: Simplified to filters + DownloadTable (removed card layout)
- All 34 frontend + 179 backend tests passing

.gsd/milestones/M002/M002-ROADMAP.md

@@ -53,10 +53,10 @@ This milestone is complete only when all are true:
 
 ## Slices
 
-- [ ] **S01: Bug Fixes + Header/Footer Rework** `risk:high` `depends:[]`
+- [x] **S01: Bug Fixes + Header/Footer Rework** `risk:high` `depends:[]`
   > After this: Cancel button works, header has no tabs, footer shows version info, welcome message block is visible with default text, theme is sun/moon toggle
 
-- [ ] **S02: Download Flow + Queue Redesign** `risk:medium` `depends:[S01]`
+- [x] **S02: Download Flow + Queue Redesign** `risk:medium` `depends:[S01]`
   > After this: Single "Download" button with optional format picker, audio/video toggle, queue displays as styled table with sorting, completed items show download/copy/clear glyphs
 
 - [ ] **S03: Mobile + Integration Polish** `risk:low` `depends:[S02]`

.gsd/milestones/M002/slices/S02/S02-PLAN.md

@@ -0,0 +1,68 @@
+# S02: Download Flow + Queue Redesign
+
+**Goal:** Simplify the download flow to a single "Download" button (with optional format picker), add an audio/video quick-toggle, convert the queue from cards to a sortable table, and add action glyphs (download file, copy link, clear) for completed items.
+**Demo:** User pastes URL → clicks "Download" → item appears in the table queue → completes → user clicks download icon to save file or copy icon to copy the download link. Table columns are sortable by status, name, progress, ETA.
+
+## Must-Haves
+
+- "Download" is the primary button (not "Get Formats") — one-click download with best quality
+- Optional format picker accessible via a secondary "⚙ Options" toggle
+- Audio/video quick-toggle (video default) that sets appropriate format flags
+- Queue rendered as a styled table with columns: Name, Status, Progress, Speed, ETA, Actions
+- Table headers are clickable to sort (ascending/descending)
+- Completed items show download (⬇), copy-link (🔗), clear (✕) action icons
+- Active items show cancel (✕) icon
+- Failed items show error message and clear (✕) icon
+- Mobile: table degrades gracefully (horizontal scroll or card fallback below 640px)
+
+## Verification
+
+- `cd frontend && npx vitest run` — all tests pass
+- `cd backend && source .venv/Scripts/activate && python -m pytest tests/ -q -m "not integration"` — no regressions
+- Browser: paste URL → click Download → job appears in table → progresses → completes
+- Browser: click download icon on completed item → file downloads
+- Browser: click copy-link icon → link copied (or tooltip confirms)
+- Browser: sort table by each column header
+- Browser: mobile viewport shows readable queue
+
+## Tasks
+
+- [x] **T01: Rework UrlInput — Download-first flow with collapsible options** `est:45m`
+  - Why: Current flow forces "Get Formats" before downloading. Most users just want to paste and go.
+  - Files: `frontend/src/components/UrlInput.vue`
+  - Do: Make "Download" the primary action button. Add a "⚙" toggle button that expands/collapses the format picker section below. Add audio/video toggle pills (Video | Audio) that set a `mediaType` ref. When `mediaType` is "audio", pass `quality: "bestaudio"` to the submit payload. When format picker is open and user selects a format, use that instead. Keep the paste-to-auto-extract behavior but make it extract silently in the background (populate formats without showing picker). "Download" works immediately with or without format selection.
+  - Verify: Paste URL → click Download → job starts without format selection. Toggle audio → Download → job starts with audio quality. Click ⚙ → format picker opens → select format → Download.
+  - Done when: Download is the primary one-click action, format picker is optional
+
+- [x] **T02: Convert queue to sortable table** `est:60m`
+  - Why: Card-based queue doesn't scan well with many items. Table with sorting is standard for download managers.
+  - Files: `frontend/src/components/DownloadQueue.vue`, `frontend/src/components/DownloadTable.vue` (new), `frontend/src/components/DownloadItem.vue` (remove or repurpose)
+  - Do: Create DownloadTable component with `<table>` markup. Columns: Name (truncated, title=full URL), Status (badge), Progress (inline bar), Speed, ETA, Actions. Add a `sortBy` ref and `sortDir` ref. Clicking a column header toggles sort. Computed `sortedJobs` applies sort. Keep the filter buttons (All/Active/Completed/Failed) above the table. Style the table with theme CSS variables. On mobile (< 640px), hide Speed and ETA columns, or use a responsive approach.
+  - Verify: Jobs render as table rows. Click column headers to sort. Filter buttons still work. Mobile view is usable.
+  - Done when: Queue is a sortable table with all columns rendering correctly
+
+- [x] **T03: Action glyphs for completed/active/failed items** `est:30m`
+  - Why: Users need to download completed files, copy links, and clear items from the queue.
+  - Files: `frontend/src/components/DownloadTable.vue`, `frontend/src/stores/downloads.ts`, `frontend/src/api/client.ts`
+  - Do: Add action icons in the Actions column. Completed: download file (anchor to `/api/downloads/{filename}`), copy download link (clipboard API), clear from queue (DELETE + remove from store). Active: cancel (existing logic). Failed: clear from queue. Style icons as small inline buttons with hover effects. Add `clearJob(id)` to downloads store that calls DELETE and removes locally.
+  - Verify: Click download icon on completed item → browser downloads file. Click copy icon → link in clipboard. Click clear → item removed. Click cancel on active → cancelled.
+  - Done when: All action icons work for each status type
+
+- [x] **T04: Update tests** `est:20m`
+  - Why: New components and store changes need test coverage. Old DownloadItem tests may need removal/update.
+  - Files: `frontend/src/tests/stores/downloads.test.ts`, `frontend/src/tests/components/` (if any)
+  - Do: Add tests for the new sort logic (sortBy, sortDir). Test clearJob action in downloads store. Verify existing download store tests still pass. Run full frontend and backend test suites.
+  - Verify: `npx vitest run` all pass, `python -m pytest tests/ -q -m "not integration"` all pass
+  - Done when: All tests green, no regressions
+
+## Files Likely Touched
+
+- `frontend/src/components/UrlInput.vue` (reworked)
+- `frontend/src/components/DownloadQueue.vue` (reworked to use table)
+- `frontend/src/components/DownloadTable.vue` (new)
+- `frontend/src/components/DownloadItem.vue` (may be removed — logic moves to table rows)
+- `frontend/src/components/FormatPicker.vue` (minor — toggled visibility)
+- `frontend/src/components/ProgressBar.vue` (minor — may need inline variant)
+- `frontend/src/stores/downloads.ts` (add clearJob, sort helpers)
+- `frontend/src/api/client.ts` (no changes expected — DELETE already exists)
+- `frontend/src/api/types.ts` (no changes expected)

frontend/src/components/DownloadQueue.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useDownloadsStore } from '@/stores/downloads'
-import DownloadItem from './DownloadItem.vue'
+import DownloadTable from './DownloadTable.vue'
 
 type Filter = 'all' | 'active' | 'completed' | 'failed'
 
@@ -57,13 +57,7 @@ function setFilter(f: Filter): void {
       </template>
     </div>
 
-    <TransitionGroup name="job-list" tag="div" class="queue-list">
+    <DownloadTable v-else :jobs="filteredJobs" />
-      <DownloadItem
-        v-for="job in filteredJobs"
-        :key="job.id"
-        :job="job"
-      />
-    </TransitionGroup>
   </div>
 </template>
 
@@ -113,32 +107,6 @@ function setFilter(f: Filter): void {
   font-size: var(--font-size-base);
 }
 
-.queue-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-/* Transition animations */
-.job-list-enter-active,
-.job-list-leave-active {
-  transition: all 0.3s ease;
-}
-
-.job-list-enter-from {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-.job-list-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.job-list-move {
-  transition: transform 0.3s ease;
-}
-
 /* Mobile: full-width filters */
 @media (max-width: 767px) {
   .queue-filters {

frontend/src/components/DownloadTable.vue

@@ -0,0 +1,473 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useDownloadsStore } from '@/stores/downloads'
+import ProgressBar from './ProgressBar.vue'
+import type { Job } from '@/api/types'
+
+const props = defineProps<{
+  jobs: Job[]
+}>()
+
+const store = useDownloadsStore()
+
+// Sort state
+type SortKey = 'name' | 'status' | 'progress' | 'speed' | 'eta'
+const sortBy = ref<SortKey>('name')
+const sortDir = ref<'asc' | 'desc'>('asc')
+
+function toggleSort(key: SortKey): void {
+  if (sortBy.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortBy.value = key
+    sortDir.value = key === 'progress' ? 'desc' : 'asc'
+  }
+}
+
+function sortIndicator(key: SortKey): string {
+  if (sortBy.value !== key) return ''
+  return sortDir.value === 'asc' ? ' ▲' : ' ▼'
+}
+
+const sortedJobs = computed<Job[]>(() => {
+  const list = [...props.jobs]
+  const dir = sortDir.value === 'asc' ? 1 : -1
+
+  list.sort((a, b) => {
+    switch (sortBy.value) {
+      case 'name':
+        return dir * displayName(a).localeCompare(displayName(b))
+      case 'status':
+        return dir * a.status.localeCompare(b.status)
+      case 'progress':
+        return dir * (a.progress_percent - b.progress_percent)
+      case 'speed':
+        return dir * (parseSpeed(a.speed) - parseSpeed(b.speed))
+      case 'eta':
+        return dir * (parseEta(a.eta) - parseEta(b.eta))
+      default:
+        return 0
+    }
+  })
+  return list
+})
+
+function displayName(job: Job): string {
+  if (job.filename) {
+    const parts = job.filename.replace(/\\/g, '/').split('/')
+    return parts[parts.length - 1]
+  }
+  try {
+    const u = new URL(job.url)
+    return `${u.hostname}${u.pathname}`.slice(0, 80)
+  } catch {
+    return job.url.slice(0, 80)
+  }
+}
+
+function parseSpeed(speed: string | null): number {
+  if (!speed) return 0
+  const match = speed.match(/([\d.]+)\s*(B|KiB|MiB|GiB)/)
+  if (!match) return 0
+  const val = parseFloat(match[1])
+  const unit = match[2]
+  const multipliers: Record<string, number> = { B: 1, KiB: 1024, MiB: 1048576, GiB: 1073741824 }
+  return val * (multipliers[unit] || 1)
+}
+
+function parseEta(eta: string | null): number {
+  if (!eta) return Infinity
+  // yt-dlp formats ETA as HH:MM:SS or MM:SS or SS
+  const parts = eta.split(':').map(Number)
+  if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2]
+  if (parts.length === 2) return parts[0] * 60 + parts[1]
+  return parts[0] || Infinity
+}
+
+function isActive(job: Job): boolean {
+  return !store.isTerminal(job.status)
+}
+
+function isCompleted(job: Job): boolean {
+  return job.status === 'completed'
+}
+
+// File download URL
+function downloadUrl(job: Job): string {
+  if (!job.filename) return '#'
+  const name = job.filename.replace(/\\/g, '/').split('/').pop() || ''
+  return `/api/downloads/${encodeURIComponent(name)}`
+}
+
+// Copy download link to clipboard
+async function copyLink(job: Job): Promise<void> {
+  const url = `${window.location.origin}${downloadUrl(job)}`
+  try {
+    await navigator.clipboard.writeText(url)
+  } catch {
+    // Fallback — clipboard API may fail in non-secure contexts
+    console.warn('[DownloadTable] Clipboard write failed')
+  }
+}
+
+const cancelling = ref<Set<string>>(new Set())
+
+async function cancel(jobId: string): Promise<void> {
+  if (cancelling.value.has(jobId)) return
+  cancelling.value.add(jobId)
+  try {
+    await store.cancelDownload(jobId)
+  } catch (err) {
+    console.error('[DownloadTable] Cancel failed:', err)
+  } finally {
+    cancelling.value.delete(jobId)
+  }
+}
+
+async function clearJob(jobId: string): Promise<void> {
+  try {
+    await store.cancelDownload(jobId)
+  } catch {
+    // If DELETE fails (already gone), just remove locally
+    store.handleJobRemoved(jobId)
+  }
+}
+</script>
+
+<template>
+  <div class="download-table-wrap">
+    <table class="download-table">
+      <thead>
+        <tr>
+          <th class="col-name sortable" @click="toggleSort('name')">
+            Name{{ sortIndicator('name') }}
+          </th>
+          <th class="col-status sortable" @click="toggleSort('status')">
+            Status{{ sortIndicator('status') }}
+          </th>
+          <th class="col-progress sortable" @click="toggleSort('progress')">
+            Progress{{ sortIndicator('progress') }}
+          </th>
+          <th class="col-speed sortable hide-mobile" @click="toggleSort('speed')">
+            Speed{{ sortIndicator('speed') }}
+          </th>
+          <th class="col-eta sortable hide-mobile" @click="toggleSort('eta')">
+            ETA{{ sortIndicator('eta') }}
+          </th>
+          <th class="col-actions">Actions</th>
+        </tr>
+      </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-status">
+            <span class="status-badge" :class="'badge-' + job.status">
+              {{ job.status }}
+            </span>
+          </td>
+          <td class="col-progress">
+            <ProgressBar
+              v-if="job.status === 'downloading' || job.status === 'extracting'"
+              :percent="job.progress_percent"
+            />
+            <span v-else-if="isCompleted(job)" class="progress-done">Done</span>
+            <span v-else-if="job.error_message" class="progress-error" :title="job.error_message">
+              {{ job.error_message.slice(0, 40) }}
+            </span>
+            <span v-else class="progress-na">—</span>
+          </td>
+          <td class="col-speed hide-mobile">
+            <span v-if="job.speed" class="mono">{{ job.speed }}</span>
+            <span v-else class="text-muted">—</span>
+          </td>
+          <td class="col-eta hide-mobile">
+            <span v-if="job.eta" class="mono">{{ job.eta }}</span>
+            <span v-else class="text-muted">—</span>
+          </td>
+          <td class="col-actions">
+            <div class="action-group">
+              <!-- Completed: download, copy link, clear -->
+              <template v-if="isCompleted(job)">
+                <a
+                  :href="downloadUrl(job)"
+                  class="action-btn action-download"
+                  title="Download file"
+                  download
+                >
+                  <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                </a>
+                <button
+                  class="action-btn action-copy"
+                  title="Copy download link"
+                  @click="copyLink(job)"
+                >
+                  <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"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                </button>
+                <button
+                  class="action-btn action-clear"
+                  title="Remove from list"
+                  @click="clearJob(job.id)"
+                >
+                  <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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              </template>
+              <!-- Active: cancel -->
+              <template v-else-if="isActive(job)">
+                <button
+                  class="action-btn action-cancel"
+                  :disabled="cancelling.has(job.id)"
+                  title="Cancel download"
+                  @click.stop="cancel(job.id)"
+                >
+                  <svg v-if="!cancelling.has(job.id)" 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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  <span v-else class="spinner-sm"></span>
+                </button>
+              </template>
+              <!-- Failed/expired: clear -->
+              <template v-else>
+                <button
+                  class="action-btn action-clear"
+                  title="Remove from list"
+                  @click="clearJob(job.id)"
+                >
+                  <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"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              </template>
+            </div>
+          </td>
+        </tr>
+      </TransitionGroup>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.download-table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.download-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+}
+
+.download-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.download-table th {
+  padding: var(--space-sm) var(--space-md);
+  text-align: left;
+  font-weight: 600;
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted);
+  background: var(--color-surface);
+  border-bottom: 2px solid var(--color-border);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.download-table th.sortable {
+  cursor: pointer;
+}
+
+.download-table th.sortable:hover {
+  color: var(--color-accent);
+}
+
+.download-table td {
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+
+.download-table tbody tr {
+  transition: background-color 0.15s ease;
+}
+
+.download-table tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+
+/* Column widths */
+.col-name {
+  min-width: 200px;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.col-status { width: 100px; }
+.col-progress { width: 180px; min-width: 120px; }
+.col-speed { width: 100px; }
+.col-eta { width: 80px; }
+.col-actions { width: 110px; }
+
+/* Status badges */
+.status-badge {
+  display: inline-block;
+  padding: 2px var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+
+.badge-queued {
+  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+  color: var(--color-text-muted);
+}
+.badge-extracting {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+.badge-downloading {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+.badge-completed {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+.badge-failed {
+  background: color-mix(in srgb, var(--color-error) 15%, transparent);
+  color: var(--color-error);
+}
+.badge-expired {
+  background: color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+  color: var(--color-text-muted);
+}
+
+/* Progress cell */
+.progress-done {
+  color: var(--color-success);
+  font-weight: 500;
+}
+.progress-error {
+  color: var(--color-error);
+  font-size: var(--font-size-sm);
+}
+.progress-na {
+  color: var(--color-text-muted);
+}
+
+/* Utility */
+.mono {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+}
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+/* Actions */
+.action-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-decoration: none;
+}
+
+.action-btn:hover {
+  background: var(--color-surface-hover);
+}
+
+.action-download:hover {
+  color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.action-copy:hover {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.action-cancel:hover,
+.action-clear:hover {
+  color: var(--color-error);
+  border-color: var(--color-error);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spinner-sm {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Table row transitions */
+.table-row-enter-active,
+.table-row-leave-active {
+  transition: all 0.3s ease;
+}
+
+.table-row-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.table-row-leave-to {
+  opacity: 0;
+}
+
+/* Mobile: hide speed and ETA columns */
+@media (max-width: 639px) {
+  .hide-mobile {
+    display: none;
+  }
+
+  .col-name {
+    min-width: 120px;
+    max-width: 200px;
+  }
+
+  .col-progress {
+    min-width: 80px;
+    width: 100px;
+  }
+
+  .col-actions {
+    width: 80px;
+  }
+
+  .download-table th,
+  .download-table td {
+    padding: var(--space-xs) var(--space-sm);
+  }
+}
+</style>

frontend/src/components/UrlInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { api } from '@/api/client'
 import { useDownloadsStore } from '@/stores/downloads'
 import FormatPicker from './FormatPicker.vue'
@@ -12,7 +12,13 @@ const formats = ref<FormatInfo[]>([])
 const selectedFormatId = ref<string | null>(null)
 const isExtracting = ref(false)
 const extractError = ref<string | null>(null)
-const showFormats = ref(false)
+const showOptions = ref(false)
+
+type MediaType = 'video' | 'audio'
+const mediaType = ref<MediaType>('video')
+
+/** Whether formats have been fetched for the current URL. */
+const formatsReady = computed(() => formats.value.length > 0)
 
 async function extractFormats(): Promise<void> {
   const trimmed = url.value.trim()
@@ -21,12 +27,10 @@ async function extractFormats(): Promise<void> {
   isExtracting.value = true
   extractError.value = null
   formats.value = []
-  showFormats.value = false
   selectedFormatId.value = null
 
   try {
     formats.value = await api.getFormats(trimmed)
-    showFormats.value = true
   } catch (err: any) {
     extractError.value = err.message || 'Failed to extract formats'
   } finally {
@@ -42,13 +46,15 @@ async function submitDownload(): Promise<void> {
     await store.submitDownload({
       url: trimmed,
       format_id: selectedFormatId.value,
+      quality: mediaType.value === 'audio' && !selectedFormatId.value ? 'bestaudio' : null,
     })
     // Reset form on success
     url.value = ''
     formats.value = []
-    showFormats.value = false
+    showOptions.value = false
     selectedFormatId.value = null
     extractError.value = null
+    mediaType.value = 'video'
   } catch {
     // Error already in store.submitError
   }
@@ -59,13 +65,21 @@ function onFormatSelect(formatId: string | null): void {
 }
 
 function handlePaste(): void {
-  // Auto-extract on paste after a tick (value not yet updated in paste event)
+  // Auto-extract on paste (populate formats silently in background)
   setTimeout(() => {
     if (url.value.trim()) {
       extractFormats()
     }
   }, 50)
 }
+
+function toggleOptions(): void {
+  showOptions.value = !showOptions.value
+  // Extract formats when opening options if we haven't yet
+  if (showOptions.value && !formatsReady.value && url.value.trim() && !isExtracting.value) {
+    extractFormats()
+  }
+}
 </script>
 
 <template>
@@ -77,27 +91,50 @@ function handlePaste(): void {
         placeholder="Paste a URL to download…"
         class="url-field"
         @paste="handlePaste"
-        @keydown.enter="showFormats ? submitDownload() : extractFormats()"
+        @keydown.enter="submitDownload"
-        :disabled="isExtracting"
+        :disabled="isExtracting || store.isSubmitting"
       />
       <button
-        v-if="!showFormats"
-        class="btn-extract"
-        @click="extractFormats"
-        :disabled="!url.trim() || isExtracting"
-      >
-        {{ isExtracting ? 'Extracting…' : 'Get Formats' }}
-      </button>
-      <button
-        v-else
         class="btn-download"
         @click="submitDownload"
-        :disabled="store.isSubmitting"
+        :disabled="!url.trim() || store.isSubmitting"
       >
         {{ store.isSubmitting ? 'Submitting…' : 'Download' }}
       </button>
     </div>
 
+    <!-- Controls row: media type toggle + options gear -->
+    <div class="controls-row">
+      <div class="media-toggle">
+        <button
+          class="toggle-pill"
+          :class="{ active: mediaType === 'video' }"
+          @click="mediaType = 'video'"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
+          Video
+        </button>
+        <button
+          class="toggle-pill"
+          :class="{ active: mediaType === 'audio' }"
+          @click="mediaType = 'audio'"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
+          Audio
+        </button>
+      </div>
+
+      <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">
       <span class="spinner"></span>
       Extracting available formats…
@@ -111,11 +148,19 @@ function handlePaste(): void {
       {{ store.submitError }}
     </div>
 
-    <FormatPicker
+    <!-- Collapsible format picker -->
-      v-if="showFormats"
+    <Transition name="options-slide">
-      :formats="formats"
+      <div v-if="showOptions" class="options-panel">
-      @select="onFormatSelect"
+        <FormatPicker
-    />
+          v-if="formatsReady"
+          :formats="formats"
+          @select="onFormatSelect"
+        />
+        <div v-else-if="!isExtracting" class="options-hint">
+          Paste a URL and formats will load automatically.
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -137,24 +182,10 @@ function handlePaste(): void {
   font-size: var(--font-size-base);
 }
 
-.btn-extract,
 .btn-download {
   white-space: nowrap;
   padding: var(--space-sm) var(--space-lg);
   font-weight: 600;
-}
-
-.btn-extract {
-  background: var(--color-surface);
-  color: var(--color-accent);
-  border: 1px solid var(--color-accent);
-}
-
-.btn-extract:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-.btn-download {
   background: var(--color-accent);
   color: var(--color-bg);
 }
@@ -168,6 +199,76 @@ button:disabled {
   cursor: not-allowed;
 }
 
+/* Controls row */
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
+
+.media-toggle {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.toggle-pill {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-md);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  border: none;
+  border-radius: 0;
+  font-size: var(--font-size-sm);
+  min-height: 32px;
+  transition: all 0.15s ease;
+}
+
+.toggle-pill:not(:last-child) {
+  border-right: 1px solid var(--color-border);
+}
+
+.toggle-pill:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text);
+}
+
+.toggle-pill.active {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+
+.btn-options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 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;
   align-items: center;
@@ -197,13 +298,41 @@ button:disabled {
   padding: var(--space-sm);
 }
 
+/* Options panel transition */
+.options-panel {
+  overflow: hidden;
+}
+
+.options-slide-enter-active,
+.options-slide-leave-active {
+  transition: all 0.25s ease;
+}
+
+.options-slide-enter-from,
+.options-slide-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.options-slide-enter-to,
+.options-slide-leave-from {
+  opacity: 1;
+  max-height: 400px;
+}
+
+.options-hint {
+  padding: var(--space-md);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
 /* Mobile: stack vertically */
 @media (max-width: 767px) {
   .input-row {
     flex-direction: column;
   }
 
-  .btn-extract,
   .btn-download {
     width: 100%;
   }