[split-required] Split website + studio-v2 monoliths (Phase 3 continued)

Website (14 monoliths split):
- compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20)
- quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11)
- i18n.ts (1,173 → 8 language files)
- unity-bridge (1,094 → 12), backlog (1,087 → 6)
- training (1,066 → 8), rag (1,063 → 8)
- Deleted index_original.ts (4,899 LOC dead backup)

Studio-v2 (5 monoliths split):
- meet/page.tsx (1,481 → 9), messages (1,166 → 9)
- AlertsB2BContext.tsx (1,165 → 5 modules)
- alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6)

All existing imports preserved. Zero new TypeScript errors.

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

website/app/admin/training/_components/TrainingJobCard.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import type { TrainingJob } from './types'
+import { ProgressRing, MiniChart, StatusBadge, MetricCard } from './ChartComponents'
+
+export function TrainingJobCard({ job, onPause, onResume, onStop, onViewDetails }: {
+  job: TrainingJob
+  onPause: () => void
+  onResume: () => void
+  onStop: () => void
+  onViewDetails: () => void
+}) {
+  const isActive = ['training', 'preparing', 'validating'].includes(job.status)
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{job.name}</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Modell: {job.model_type.charAt(0).toUpperCase() + job.model_type.slice(1)}
+          </p>
+        </div>
+        <StatusBadge status={job.status} />
+      </div>
+
+      {/* Progress Section */}
+      <div className="p-6">
+        <div className="flex items-center gap-8">
+          <ProgressRing
+            progress={job.progress}
+            color={job.status === 'failed' ? '#EF4444' : '#10B981'}
+          />
+          <div className="flex-1 space-y-4">
+            {/* Epoch Progress */}
+            <div>
+              <div className="flex justify-between text-sm mb-1">
+                <span className="text-gray-600 dark:text-gray-400">Epoche</span>
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {job.current_epoch} / {job.total_epochs}
+                </span>
+              </div>
+              <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-500"
+                  style={{ width: `${(job.current_epoch / job.total_epochs) * 100}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Documents Progress */}
+            <div>
+              <div className="flex justify-between text-sm mb-1">
+                <span className="text-gray-600 dark:text-gray-400">Dokumente</span>
+                <span className="font-medium text-gray-900 dark:text-white">
+                  {job.documents_processed.toLocaleString()} / {job.total_documents.toLocaleString()}
+                </span>
+              </div>
+              <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
+                  style={{ width: `${(job.documents_processed / job.total_documents) * 100}%` }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Metrics */}
+        <div className="grid grid-cols-4 gap-3 mt-6">
+          <MetricCard label="Loss" value={job.loss} trend="down" color="#3B82F6" />
+          <MetricCard label="Val Loss" value={job.val_loss} trend="down" color="#8B5CF6" />
+          <MetricCard label="Precision" value={job.metrics.precision} color="#10B981" />
+          <MetricCard label="F1 Score" value={job.metrics.f1_score} color="#F59E0B" />
+        </div>
+
+        {/* Loss Chart */}
+        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
+          <div className="flex justify-between items-center mb-3">
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Loss-Verlauf
+            </span>
+            <div className="flex gap-4 text-xs">
+              <span className="flex items-center gap-1">
+                <span className="w-3 h-0.5 bg-blue-500 rounded" />
+                Training
+              </span>
+              <span className="flex items-center gap-1">
+                <span className="w-3 h-0.5 bg-purple-500 rounded" />
+                Validation
+              </span>
+            </div>
+          </div>
+          <div className="flex gap-4">
+            <MiniChart data={job.metrics.loss_history} color="#3B82F6" />
+            <MiniChart data={job.metrics.val_loss_history} color="#8B5CF6" />
+          </div>
+        </div>
+
+        {/* Time Info */}
+        <div className="mt-4 flex justify-between text-sm text-gray-500 dark:text-gray-400">
+          <span>
+            Gestartet: {job.started_at ? new Date(job.started_at).toLocaleTimeString('de-DE') : '-'}
+          </span>
+          <span>
+            Geschätzte Fertigstellung: {job.estimated_completion
+              ? new Date(job.estimated_completion).toLocaleTimeString('de-DE')
+              : '-'
+            }
+          </span>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex justify-between">
+        <button
+          onClick={onViewDetails}
+          className="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
+        >
+          Details anzeigen
+        </button>
+        <div className="flex gap-2">
+          {isActive && (
+            <>
+              <button
+                onClick={job.status === 'paused' ? onResume : onPause}
+                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                {job.status === 'paused' ? 'Fortsetzen' : 'Pausieren'}
+              </button>
+              <button
+                onClick={onStop}
+                className="px-4 py-2 text-sm font-medium text-red-600 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/40"
+              >
+                Abbrechen
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}