Apply the Export Desk design to the current Converter

[cjocollin]

What changed

• Applies the approved MP5 Export Desk layout to the current Converter.
• Adds the Source → Metadata → Export presentation, tabbed metadata workspace, desktop output rail, mobile stage treatment, and visible mobile format picker.
• Preserves the violet MP5-L v4 badge and cyan Lossless / Bit-exact badges in one non-wrapping row.
• Keeps source replacement available by click and drag/drop.

Preservation boundary

This PR is intentionally presentation-only. It retains current main as the source of truth for codecs, MP5-L v4, workers, conversion/export, stems, AI, cancellation, filenames, metadata values, downloads, player import, playlists, and library saves.

It does not merge PR #5 wholesale and excludes its editable filename, Web Audio preview, QA demo fixtures, cancellation/export lifecycle changes, and stem changes.

Validation

• Web TypeScript/lint passed.
• Production Vite/PWA build passed.
• Focused Converter/stems suite: 118/118 passed.
• Main unit partition: 537 passed, 2 skipped; two pre-existing documentation assertions still require MP5-L v3 in the compatibility matrix and are unrelated to this five-file UI diff.

Production remains unchanged until visual QA on the Vercel preview passes.

---

Note

Low Risk
Large UI/CSS surface area in the Converter only; conversion, codecs, and export paths are described as unchanged, with main regression risk around mobile stage navigation and existing test IDs.

Overview
Replaces the single-file Converter with the MP5 Export Desk presentation: a Source → Metadata → Export progress model, two-column workspace (main column + sticky output rail), and dedicated styling under mp5-converter-*.

Flow & shell: ConverterFlowSteps collapses the old five-step pills into three labeled steps with checkmarks and a progress line; it now accepts metadataOpen so the metadata step can show as active. ConverterPanel drives a stage (source | metadata | export) on data-stage, skips straight to export on narrow viewports after load, and drops the separate empty-state card in favor of an inline source drop zone plus a loaded source card.

Source: New ConverterSourceCard shows cover/placeholder, file stats, a downsampled waveform, Replace, and drag-and-drop to swap the file.

Metadata: MetadataEditor is reorganized into Details / Artwork / Lyrics / Content / Advanced tabs (primary fields up front, “More track details” disclosure), with credits/rights/identifiers grouped behind a top-level legal disclosure and CaretDown affordances.

Export rail: Format choice is a visible control with codec badges (violet MP5 + cyan verified traits), “Advanced formats” for lab codecs/presets, a Ready to export summary, and consolidated status/progress/cancel—mobile hides the rail during metadata editing and uses summary + Continue to Export instead.

Export, codec, stem, and AI behavior are intended to stay unchanged; this is layout and CSS (large index.css addition plus responsive rules).

^{Reviewed by Cursor Bugbot for commit ac39e88. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mp5-audio	Ready	Preview, Comment	Jul 22, 2026 5:10am

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_ad728dea-0705-4c33-9f62-a299d942c485)