Fix: Remove broken getKlausurApiUrl and clean up empty lines

sed replacement left orphaned hostname references in story page
and empty lines in getApiBase functions.

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

admin-lehrer/app/(admin)/ai/magic-help/_components/TabOverview.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { SkeletonText } from '@/components/common/SkeletonText'
+import type { TrOCRStatus } from '../types'
+
+interface TabOverviewProps {
+  status: TrOCRStatus | null
+  loading: boolean
+  onRefresh: () => void
+}
+
+export function TabOverview({ status, loading, onRefresh }: TabOverviewProps) {
+  return (
+    <div className="space-y-6">
+      {/* Status Card */}
+      <div className="bg-white rounded-xl shadow-sm border p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-slate-900">Systemstatus</h2>
+          <button
+            onClick={onRefresh}
+            className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm transition-colors"
+          >
+            Aktualisieren
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="bg-slate-50 rounded-lg p-4">
+                <SkeletonText lines={1} className="mb-2" />
+                <div className="h-3 w-16 bg-slate-200 rounded animate-pulse" />
+              </div>
+            ))}
+          </div>
+        ) : status?.status === 'available' ? (
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-slate-900">{status.model_name || 'trocr-base'}</div>
+              <div className="text-xs text-slate-500">Modell</div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-slate-900">{status.device || 'CPU'}</div>
+              <div className="text-xs text-slate-500">Geraet</div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-slate-900">{status.training_examples_count || 0}</div>
+              <div className="text-xs text-slate-500">Trainingsbeispiele</div>
+            </div>
+            <div className="bg-slate-50 rounded-lg p-4">
+              <div className="text-2xl font-bold text-slate-900">{status.has_lora_adapter ? 'Aktiv' : 'Keiner'}</div>
+              <div className="text-xs text-slate-500">LoRA Adapter</div>
+            </div>
+          </div>
+        ) : status?.status === 'not_installed' ? (
+          <div className="text-slate-600">
+            <p className="mb-2">TrOCR ist nicht installiert. Fuehre aus:</p>
+            <code className="bg-slate-100 px-3 py-2 rounded text-sm block font-mono">{status.install_command}</code>
+          </div>
+        ) : (
+          <div className="text-red-600">{status?.error || 'Unbekannter Fehler'}</div>
+        )}
+      </div>
+
+      {/* Quick Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6">
+          <div className="text-3xl mb-2">🎯</div>
+          <h3 className="text-lg font-semibold text-slate-900 mb-2">Handschrifterkennung</h3>
+          <p className="text-sm text-slate-600">
+            TrOCR erkennt automatisch handgeschriebenen Text in Klausuren.
+            Das Modell wurde speziell fuer deutsche Handschriften optimiert.
+          </p>
+        </div>
+        <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
+          <div className="text-3xl mb-2">🔒</div>
+          <h3 className="text-lg font-semibold text-slate-900 mb-2">Privacy by Design</h3>
+          <p className="text-sm text-slate-600">
+            Alle Daten werden lokal verarbeitet. Schuelernamen werden durch
+            QR-Codes pseudonymisiert - DSGVO-konform.
+          </p>
+        </div>
+        <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
+          <div className="text-3xl mb-2">📈</div>
+          <h3 className="text-lg font-semibold text-slate-900 mb-2">Kontinuierliches Lernen</h3>
+          <p className="text-sm text-slate-600">
+            Mit LoRA Fine-Tuning passt sich das Modell an individuelle
+            Handschriften an - ohne das Basismodell zu veraendern.
+          </p>
+        </div>
+      </div>
+
+      {/* Workflow Overview */}
+      <div className="bg-white rounded-xl shadow-sm border p-6">
+        <h2 className="text-lg font-semibold text-slate-900 mb-4">Magic Onboarding Workflow</h2>
+        <div className="flex flex-wrap items-center gap-4 text-sm">
+          {WORKFLOW_STEPS.map((step, i) => (
+            <WorkflowStep key={step.title} step={step} showArrow={i < WORKFLOW_STEPS.length - 1} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const WORKFLOW_STEPS = [
+  { icon: '📄', title: '1. Upload', desc: '25 Klausuren hochladen' },
+  { icon: '🔍', title: '2. Analyse', desc: 'Lokale OCR in 5-10 Sek' },
+  { icon: '✅', title: '3. Bestaetigung', desc: 'Klasse, Schueler, Fach' },
+  { icon: '🤖', title: '4. KI-Korrektur', desc: 'Cloud mit Pseudonymisierung' },
+  { icon: '📊', title: '5. Integration', desc: 'Notenbuch, Zeugnisse' },
+]
+
+function WorkflowStep({ step, showArrow }: { step: typeof WORKFLOW_STEPS[number]; showArrow: boolean }) {
+  return (
+    <>
+      <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
+        <span className="text-2xl">{step.icon}</span>
+        <div>
+          <div className="font-medium text-slate-900">{step.title}</div>
+          <div className="text-slate-500">{step.desc}</div>
+        </div>
+      </div>
+      {showArrow && <div className="text-slate-400">&rarr;</div>}
+    </>
+  )
+}