From cea123440073df74a8adb225a36337af524c3421 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 10:52:23 +0200
Subject: [PATCH] feat(ocr): move training cards from system page to OCR
 overview page

OcrTrainingCard and SegmentationTrainingCard now live on the dedicated
OCR overview page. System page no longer fetches training info.
SegmentationTrainingCard updated to use shared TrainingRun type.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../SegmentationTrainingCard.svelte           | 15 ++-----------
 frontend/src/routes/admin/ocr/+page.svelte    |  8 +++++++
 frontend/src/routes/admin/system/+page.svelte | 21 -------------------
 .../routes/admin/system/page.svelte.spec.ts   |  2 --
 4 files changed, 10 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/SegmentationTrainingCard.svelte b/frontend/src/lib/components/SegmentationTrainingCard.svelte
index dfdb634a..eba98409 100644
--- a/frontend/src/lib/components/SegmentationTrainingCard.svelte
+++ b/frontend/src/lib/components/SegmentationTrainingCard.svelte
@@ -1,23 +1,12 @@
 <script lang="ts">
 import TrainingHistory from './TrainingHistory.svelte';
 import { m } from '$lib/paraglide/messages.js';
-
-interface Run {
-	id: string;
-	status: 'RUNNING' | 'DONE' | 'FAILED';
-	blockCount: number;
-	documentCount: number;
-	modelName: string;
-	errorMessage?: string;
-	triggeredBy?: string;
-	createdAt: string;
-	completedAt?: string;
-}
+import type { TrainingRun } from '$lib/types/training.js';
 
 interface TrainingInfo {
 	availableSegBlocks?: number;
 	ocrServiceAvailable?: boolean;
-	runs?: Run[];
+	runs?: TrainingRun[];
 }
 
 interface Props {
diff --git a/frontend/src/routes/admin/ocr/+page.svelte b/frontend/src/routes/admin/ocr/+page.svelte
index 9d14cc56..900dad80 100644
--- a/frontend/src/routes/admin/ocr/+page.svelte
+++ b/frontend/src/routes/admin/ocr/+page.svelte
@@ -3,6 +3,8 @@ import type { PageData } from './$types';
 import OcrHealthBar from './OcrHealthBar.svelte';
 import OcrStatCards from './OcrStatCards.svelte';
 import OcrModelsTable from './OcrModelsTable.svelte';
+import OcrTrainingCard from '$lib/components/OcrTrainingCard.svelte';
+import SegmentationTrainingCard from '$lib/components/SegmentationTrainingCard.svelte';
 import * as m from '$lib/paraglide/messages.js';
 
 let { data }: { data: PageData } = $props();
@@ -27,6 +29,12 @@ const { trainingInfo } = $derived(data);
 			availableSegBlocks={trainingInfo.availableSegBlocks ?? 0}
 		/>
 
+		<!-- Training -->
+		<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+			<OcrTrainingCard trainingInfo={trainingInfo} />
+			<SegmentationTrainingCard trainingInfo={trainingInfo} />
+		</div>
+
 		<!-- Sender models -->
 		<div>
 			<div class="mb-3 flex items-center justify-between">
diff --git a/frontend/src/routes/admin/system/+page.svelte b/frontend/src/routes/admin/system/+page.svelte
index adb7c4e3..2bc02c83 100644
--- a/frontend/src/routes/admin/system/+page.svelte
+++ b/frontend/src/routes/admin/system/+page.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
 import { onDestroy } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
-import OcrTrainingCard from '$lib/components/OcrTrainingCard.svelte';
-import SegmentationTrainingCard from '$lib/components/SegmentationTrainingCard.svelte';
-import type { components } from '$lib/generated/api.js';
-
-type TrainingInfo = components['schemas']['TrainingInfoResponse'];
-
-let trainingInfo: TrainingInfo | null = $state(null);
 
 let backfillResult: number | null = $state(null);
 let backfillLoading = $state(false);
@@ -58,16 +51,8 @@ async function triggerImport() {
 	}
 }
 
-async function fetchTrainingInfo() {
-	const res = await fetch('/api/ocr/training-info');
-	if (res.ok) {
-		trainingInfo = await res.json();
-	}
-}
-
 $effect(() => {
 	fetchImportStatus();
-	fetchTrainingInfo();
 });
 
 onDestroy(() => stopPolling());
@@ -103,12 +88,6 @@ async function backfillFileHashes() {
 
 <div class="flex-1 overflow-y-auto p-6">
 	<div class="mx-auto max-w-2xl space-y-5">
-		<!-- OCR Recognition Training -->
-		<OcrTrainingCard trainingInfo={trainingInfo} />
-
-		<!-- OCR Segmentation Training -->
-		<SegmentationTrainingCard trainingInfo={trainingInfo} />
-
 		<!-- Backfill versions -->
 		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
 			<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_backfill_heading()}</h2>
diff --git a/frontend/src/routes/admin/system/page.svelte.spec.ts b/frontend/src/routes/admin/system/page.svelte.spec.ts
index 19b36129..b094b7f5 100644
--- a/frontend/src/routes/admin/system/page.svelte.spec.ts
+++ b/frontend/src/routes/admin/system/page.svelte.spec.ts
@@ -78,8 +78,6 @@ describe('Admin system page — mass import card', () => {
 					startedAt: null
 				})
 			})
-			// training info fetch → empty
-			.mockResolvedValueOnce({ ok: true, json: async () => ({}) })
 			// trigger POST → returns RUNNING immediately
 			.mockResolvedValueOnce({
 				ok: true,