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>}

frontend/src/pages/HomePage.jsx

@@ -80,7 +80,11 @@ export function HomePage() {
   async function handleConvert() {
     const validItems = pendingFiles.filter((item) => item.targetFormat);
     const jobs = await uploadFiles(validItems);
-    const jobsWithSize = jobs.map((job, i) => ({ ...job, size: validItems[i].file.size }));
+    const jobsWithSize = jobs.map((job, i) => ({
+      ...job,
+      size: validItems[i].file.size,
+      targetFormat: validItems[i].targetFormat,
+    }));
     setSubmittedJobs((current) => [...current, ...jobsWithSize]);
     setPendingFiles([]);
   }
@@ -117,9 +121,21 @@ export function HomePage() {
         <ul className="job-list">
           {submittedJobs.map((job, index) =>
             job.id ? (
-              <FileCard key={job.id} fileName={job.file} fileSize={job.size} jobId={job.id} />
+              <FileCard
+                key={job.id}
+                fileName={job.file}
+                fileSize={job.size}
+                targetFormat={job.targetFormat}
+                jobId={job.id}
+              />
             ) : (
-              <FileCard key={`${job.file}-${index}`} fileName={job.file} fileSize={job.size} initialError={job.error} />
+              <FileCard
+                key={`${job.file}-${index}`}
+                fileName={job.file}
+                fileSize={job.size}
+                targetFormat={job.targetFormat}
+                initialError={job.error}
+              />
             )
           )}
         </ul>