refactor: split job detail page into dedicated components

Extract 8 components from the 1144-line jobs/[id]/page.tsx:
- JobSummaryBanner, JobOverviewCard, JobTimelineCard
- JobProgressCard, IndexStatsCard, ThumbnailStatsCard
- MetadataReportCards, ReadingStatusReportCards
- DownloadDetectionCards, JobErrorsCard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/backoffice/app/(app)/jobs/[id]/components/JobSummaryBanner.tsx

@@ -0,0 +1,131 @@
+import type { MetadataBatchReportDto, MetadataRefreshReportDto, ReadingStatusMatchReportDto, ReadingStatusPushReportDto, DownloadDetectionReportDto } from "@/lib/api";
+import type { TranslateFunction } from "@/lib/i18n/dictionaries";
+
+interface JobSummaryBannerProps {
+  job: {
+    type: string;
+    status: string;
+    started_at: string | null;
+    finished_at: string | null;
+    error_opt: string | null;
+    stats_json: {
+      scanned_files: number;
+      indexed_files: number;
+      removed_files: number;
+      errors: number;
+      warnings: number;
+    } | null;
+    total_files: number | null;
+    processed_files: number | null;
+  };
+  batchReport: MetadataBatchReportDto | null;
+  refreshReport: MetadataRefreshReportDto | null;
+  readingStatusReport: ReadingStatusMatchReportDto | null;
+  readingStatusPushReport: ReadingStatusPushReportDto | null;
+  downloadDetectionReport: DownloadDetectionReportDto | null;
+  t: TranslateFunction;
+  formatDuration: (start: string, end: string | null) => string;
+}
+
+export function JobSummaryBanner({
+  job, batchReport, refreshReport, readingStatusReport, readingStatusPushReport, downloadDetectionReport, t, formatDuration,
+}: JobSummaryBannerProps) {
+  const isCompleted = job.status === "success";
+  const isFailed = job.status === "failed";
+  const isCancelled = job.status === "cancelled";
+  const isMetadataBatch = job.type === "metadata_batch";
+  const isMetadataRefresh = job.type === "metadata_refresh";
+  const isReadingStatusMatch = job.type === "reading_status_match";
+  const isReadingStatusPush = job.type === "reading_status_push";
+  const isDownloadDetection = job.type === "download_detection";
+  const isThumbnailOnly = job.type === "thumbnail_rebuild" || job.type === "thumbnail_regenerate";
+
+  if (isCompleted && job.started_at) {
+    return (
+      <div className="mb-6 p-4 rounded-xl bg-success/10 border border-success/30 flex items-start gap-3">
+        <svg className="w-5 h-5 text-success mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <div className="text-sm text-success">
+          <span className="font-semibold">{t("jobDetail.completedIn", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+          {isMetadataBatch && batchReport && (
+            <span className="ml-2 text-success/80">
+              — {batchReport.auto_matched} {t("jobDetail.autoMatched").toLowerCase()}, {batchReport.already_linked} {t("jobDetail.alreadyLinked").toLowerCase()}, {batchReport.no_results} {t("jobDetail.noResults").toLowerCase()}, {batchReport.errors} {t("jobDetail.errors").toLowerCase()}
+            </span>
+          )}
+          {isMetadataRefresh && refreshReport && (
+            <span className="ml-2 text-success/80">
+              — {refreshReport.refreshed} {t("jobDetail.refreshed").toLowerCase()}, {refreshReport.unchanged} {t("jobDetail.unchanged").toLowerCase()}, {refreshReport.errors} {t("jobDetail.errors").toLowerCase()}
+            </span>
+          )}
+          {isReadingStatusMatch && readingStatusReport && (
+            <span className="ml-2 text-success/80">
+              — {readingStatusReport.linked} {t("jobDetail.linked").toLowerCase()}, {readingStatusReport.no_results} {t("jobDetail.noResults").toLowerCase()}, {readingStatusReport.ambiguous} {t("jobDetail.ambiguous").toLowerCase()}, {readingStatusReport.errors} {t("jobDetail.errors").toLowerCase()}
+            </span>
+          )}
+          {isReadingStatusPush && readingStatusPushReport && (
+            <span className="ml-2 text-success/80">
+              — {readingStatusPushReport.pushed} {t("jobDetail.pushed").toLowerCase()}, {readingStatusPushReport.no_books} {t("jobDetail.noBooks").toLowerCase()}, {readingStatusPushReport.errors} {t("jobDetail.errors").toLowerCase()}
+            </span>
+          )}
+          {isDownloadDetection && downloadDetectionReport && (
+            <span className="ml-2 text-success/80">
+              — {downloadDetectionReport.found} {t("jobDetail.downloadFound").toLowerCase()}, {downloadDetectionReport.not_found} {t("jobDetail.downloadNotFound").toLowerCase()}, {downloadDetectionReport.errors} {t("jobDetail.errors").toLowerCase()}
+            </span>
+          )}
+          {!isMetadataBatch && !isMetadataRefresh && !isReadingStatusMatch && !isReadingStatusPush && !isDownloadDetection && job.stats_json && (
+            <span className="ml-2 text-success/80">
+              — {job.stats_json.scanned_files} {t("jobDetail.scanned").toLowerCase()}, {job.stats_json.indexed_files} {t("jobDetail.indexed").toLowerCase()}
+              {job.stats_json.removed_files > 0 && `, ${job.stats_json.removed_files} ${t("jobDetail.removed").toLowerCase()}`}
+              {(job.stats_json.warnings ?? 0) > 0 && `, ${job.stats_json.warnings} ${t("jobDetail.warnings").toLowerCase()}`}
+              {job.stats_json.errors > 0 && `, ${job.stats_json.errors} ${t("jobDetail.errors").toLowerCase()}`}
+              {job.total_files != null && job.total_files > 0 && `, ${job.total_files} ${t("jobType.thumbnail_rebuild").toLowerCase()}`}
+            </span>
+          )}
+          {!isMetadataBatch && !isMetadataRefresh && !isReadingStatusMatch && !isReadingStatusPush && !job.stats_json && isThumbnailOnly && job.total_files != null && (
+            <span className="ml-2 text-success/80">
+              — {job.processed_files ?? job.total_files} {t("jobDetail.generated").toLowerCase()}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (isFailed) {
+    return (
+      <div className="mb-6 p-4 rounded-xl bg-destructive/10 border border-destructive/30 flex items-start gap-3">
+        <svg className="w-5 h-5 text-destructive mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <div className="text-sm text-destructive">
+          <span className="font-semibold">{t("jobDetail.jobFailed")}</span>
+          {job.started_at && (
+            <span className="ml-2 text-destructive/80">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+          )}
+          {job.error_opt && (
+            <p className="mt-1 text-destructive/70 font-mono text-xs break-all">{job.error_opt}</p>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (isCancelled) {
+    return (
+      <div className="mb-6 p-4 rounded-xl bg-muted border border-border flex items-start gap-3">
+        <svg className="w-5 h-5 text-muted-foreground mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+        </svg>
+        <span className="text-sm text-muted-foreground">
+          <span className="font-semibold">{t("jobDetail.cancelled")}</span>
+          {job.started_at && (
+            <span className="ml-2">{t("jobDetail.failedAfter", { duration: formatDuration(job.started_at, job.finished_at) })}</span>
+          )}
+        </span>
+      </div>
+    );
+  }
+
+  return null;
+}