feat(frontend): show destination format badge, fix download size to reflect converted output

The download button was showing the input file's size (carried over
client-side from upload) instead of the actual converted file's size.
It now reads outputSizeBytes from the polled job status once done.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/FileCard.jsx

@@ -4,10 +4,11 @@ import { File as FileIcon, CircleNotch, DownloadSimple } from '@phosphor-icons/r
 import { fetchJobStatus, downloadUrl } from './api.js';
 import { formatBytes } from './utils/formatBytes.js';
 
-export function FileCard({ fileName, fileSize, jobId, initialError }) {
+export function FileCard({ fileName, fileSize, targetFormat, jobId, initialError }) {
   const { t } = useTranslation();
   const [status, setStatus] = useState(initialError ? 'failed' : 'pending');
   const [errorMessage, setErrorMessage] = useState(initialError ?? null);
+  const [outputSize, setOutputSize] = useState(null);
 
   useEffect(() => {
     if (!jobId || initialError) return undefined;
@@ -18,6 +19,7 @@ export function FileCard({ fileName, fileSize, jobId, initialError }) {
       if (cancelled) return;
       setStatus(job.status);
       if (job.status === 'failed') setErrorMessage(job.errorMessage);
+      if (job.status === 'done') setOutputSize(job.outputSizeBytes);
       if (job.status === 'done' || job.status === 'failed') clearInterval(interval);
     }, 1500);
 
@@ -32,6 +34,7 @@ export function FileCard({ fileName, fileSize, jobId, initialError }) {
       <div className="file-tile-header">
         <FileIcon size={24} weight="regular" />
         <span className="file-tile-name">{fileName}</span>
+        {targetFormat && <span className="format-badge">{targetFormat.toUpperCase()}</span>}
         <span className="file-tile-size">{formatBytes(fileSize)}</span>
       </div>
       {(status === 'pending' || status === 'processing') && (
@@ -43,7 +46,7 @@ export function FileCard({ fileName, fileSize, jobId, initialError }) {
       {status === 'done' && (
         <a className="download-button" href={downloadUrl(jobId)}>
           <DownloadSimple size={20} weight="regular" />
-          {t('job.download')} ({formatBytes(fileSize)})
+          {t('job.download')} ({formatBytes(outputSize)})
         </a>
       )}
       {status === 'failed' && <span className="error">{errorMessage}</span>}