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)/infrastructure/tests/_components/BacklogTab.tsx

@@ -0,0 +1,490 @@
+'use client'
+
+import { useState } from 'react'
+import type { LLMRoutingOption } from '@/types/infrastructure-modules'
+import type { FailedTest, BacklogItem, BacklogPriority } from '../types'
+
+// ==============================================================================
+// FailedTestCard
+// ==============================================================================
+
+function FailedTestCard({
+  test,
+  onStatusChange,
+  onPriorityChange,
+  priority = 'medium',
+  failureCount = 1,
+}: {
+  test: FailedTest
+  onStatusChange: (testId: string, status: string) => void
+  onPriorityChange?: (testId: string, priority: string) => void
+  priority?: BacklogPriority
+  failureCount?: number
+}) {
+  const errorTypeColors: Record<string, string> = {
+    assertion: 'bg-amber-100 text-amber-700',
+    nil_pointer: 'bg-red-100 text-red-700',
+    type_error: 'bg-purple-100 text-purple-700',
+    network: 'bg-blue-100 text-blue-700',
+    timeout: 'bg-orange-100 text-orange-700',
+    logic_error: 'bg-slate-100 text-slate-700',
+    unknown: 'bg-slate-100 text-slate-700',
+  }
+
+  const statusColors: Record<string, string> = {
+    open: 'bg-red-100 text-red-700',
+    in_progress: 'bg-blue-100 text-blue-700',
+    fixed: 'bg-emerald-100 text-emerald-700',
+    wont_fix: 'bg-slate-100 text-slate-700',
+    flaky: 'bg-purple-100 text-purple-700',
+  }
+
+  const priorityColors: Record<string, string> = {
+    critical: 'bg-red-500 text-white',
+    high: 'bg-orange-500 text-white',
+    medium: 'bg-yellow-500 text-white',
+    low: 'bg-slate-400 text-white',
+  }
+
+  const priorityLabels: Record<string, string> = {
+    critical: '!!! Kritisch',
+    high: '!! Hoch',
+    medium: '! Mittel',
+    low: 'Niedrig',
+  }
+
+  return (
+    <div className="bg-white rounded-lg border border-slate-200 p-4 hover:border-red-300 transition-colors">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1 flex-wrap">
+            <span className={`px-2 py-0.5 rounded text-xs font-medium ${priorityColors[priority]}`}>
+              {priorityLabels[priority]}
+            </span>
+            <span className={`px-2 py-0.5 rounded text-xs font-medium ${errorTypeColors[test.error_type] || errorTypeColors.unknown}`}>
+              {test.error_type.replace('_', ' ')}
+            </span>
+            <span className="text-xs text-slate-400">{test.service}</span>
+            {failureCount > 1 && (
+              <span className="px-1.5 py-0.5 rounded bg-red-100 text-red-600 text-xs font-medium">
+                {failureCount}x fehlgeschlagen
+              </span>
+            )}
+          </div>
+          <h4 className="font-mono text-sm font-medium text-slate-900 truncate" title={test.name}>
+            {test.name}
+          </h4>
+          <p className="text-xs text-slate-500 truncate" title={test.file_path}>
+            {test.file_path}
+          </p>
+        </div>
+        <div className="flex flex-col gap-1 ml-2">
+          <select
+            value={test.status}
+            onChange={(e) => onStatusChange(test.id, e.target.value)}
+            className={`px-2 py-1 rounded text-xs font-medium cursor-pointer border-0 ${statusColors[test.status]}`}
+          >
+            <option value="open">Offen</option>
+            <option value="in_progress">In Arbeit</option>
+            <option value="fixed">Behoben</option>
+            <option value="wont_fix">Ignoriert</option>
+            <option value="flaky">Flaky</option>
+          </select>
+          {onPriorityChange && (
+            <select
+              value={priority}
+              onChange={(e) => onPriorityChange(test.id, e.target.value)}
+              className="px-2 py-1 rounded text-xs font-medium cursor-pointer border border-slate-200"
+            >
+              <option value="critical">Kritisch</option>
+              <option value="high">Hoch</option>
+              <option value="medium">Mittel</option>
+              <option value="low">Niedrig</option>
+            </select>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-red-50 rounded-lg p-3 mb-3">
+        <p className="text-sm text-red-800 font-medium mb-1">Fehlermeldung:</p>
+        <p className="text-xs text-red-700 font-mono break-words">
+          {test.error_message || 'Keine Details verfuegbar'}
+        </p>
+      </div>
+
+      {test.suggestion && (
+        <div className="bg-emerald-50 rounded-lg p-3">
+          <p className="text-sm text-emerald-800 font-medium mb-1">Loesungsvorschlag:</p>
+          <p className="text-xs text-emerald-700">
+            {test.suggestion}
+          </p>
+        </div>
+      )}
+
+      <div className="mt-3 pt-3 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400">
+        <span>Zuletzt fehlgeschlagen: {test.last_failed ? new Date(test.last_failed).toLocaleString('de-DE') : 'Unbekannt'}</span>
+        <button
+          className="text-orange-600 hover:text-orange-700 font-medium"
+          onClick={() => {
+            navigator.clipboard.writeText(test.id)
+          }}
+        >
+          ID kopieren
+        </button>
+      </div>
+    </div>
+  )
+}
+
+// ==============================================================================
+// BacklogTab
+// ==============================================================================
+
+export function BacklogTab({
+  failedTests,
+  onStatusChange,
+  onPriorityChange,
+  isLoading,
+  backlogItems,
+  usePostgres = false,
+}: {
+  failedTests: FailedTest[]
+  onStatusChange: (testId: string, status: string) => void
+  onPriorityChange?: (testId: string, priority: string) => void
+  isLoading: boolean
+  backlogItems?: BacklogItem[]
+  usePostgres?: boolean
+}) {
+  const [filterStatus, setFilterStatus] = useState<string>('open')
+  const [filterService, setFilterService] = useState<string>('all')
+  const [filterPriority, setFilterPriority] = useState<string>('all')
+  const [llmAutoAnalysis, setLlmAutoAnalysis] = useState<boolean>(true)
+  const [llmRouting, setLlmRouting] = useState<LLMRoutingOption>('smart_routing')
+
+  // Nutze PostgreSQL-Backlog wenn verfuegbar, sonst Legacy
+  const items = usePostgres && backlogItems ? backlogItems : failedTests
+
+  // Gruppiere nach Service
+  const services = [...new Set(items.map(t => 'service' in t ? t.service : (t as BacklogItem).service))]
+
+  // Filtere Items
+  const filteredItems = items.filter(item => {
+    const status = 'status' in item ? item.status : 'open'
+    const service = 'service' in item ? item.service : ''
+    const priority = 'priority' in item ? (item as BacklogItem).priority : 'medium'
+
+    if (filterStatus !== 'all' && status !== filterStatus) return false
+    if (filterService !== 'all' && service !== filterService) return false
+    if (filterPriority !== 'all' && priority !== filterPriority) return false
+    return true
+  })
+
+  // Zaehle nach Status
+  const openCount = items.filter(t => t.status === 'open').length
+  const inProgressCount = items.filter(t => t.status === 'in_progress').length
+  const fixedCount = items.filter(t => t.status === 'fixed').length
+  const flakyCount = items.filter(t => t.status === 'flaky').length
+
+  // Zaehle nach Prioritaet (nur bei PostgreSQL)
+  const criticalCount = backlogItems?.filter(t => t.priority === 'critical').length || 0
+  const highCount = backlogItems?.filter(t => t.priority === 'high').length || 0
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
+      </div>
+    )
+  }
+
+  // Konvertiere BacklogItem zu FailedTest fuer die Anzeige
+  const convertToFailedTest = (item: BacklogItem): FailedTest => ({
+    id: String(item.id),
+    name: item.test_name,
+    service: item.service,
+    file_path: item.test_file || '',
+    error_message: item.error_message || '',
+    error_type: item.error_type || 'unknown',
+    suggestion: item.fix_suggestion || '',
+    run_id: '',
+    last_failed: item.last_failed_at,
+    status: item.status,
+  })
+
+  return (
+    <div className="space-y-6">
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div className="bg-red-50 border border-red-200 rounded-xl p-4">
+          <p className="text-2xl font-bold text-red-600">{openCount}</p>
+          <p className="text-sm text-red-700">Offene Fehler</p>
+        </div>
+        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+          <p className="text-2xl font-bold text-blue-600">{inProgressCount}</p>
+          <p className="text-sm text-blue-700">In Arbeit</p>
+        </div>
+        <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
+          <p className="text-2xl font-bold text-emerald-600">{fixedCount}</p>
+          <p className="text-sm text-emerald-700">Behoben</p>
+        </div>
+        <div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
+          <p className="text-2xl font-bold text-purple-600">{flakyCount}</p>
+          <p className="text-sm text-purple-700">Flaky</p>
+        </div>
+        {usePostgres && criticalCount + highCount > 0 && (
+          <div className="bg-orange-50 border border-orange-200 rounded-xl p-4">
+            <p className="text-2xl font-bold text-orange-600">{criticalCount + highCount}</p>
+            <p className="text-sm text-orange-700">Kritisch/Hoch</p>
+          </div>
+        )}
+      </div>
+
+      {/* PostgreSQL Badge */}
+      {usePostgres && (
+        <div className="flex items-center gap-2 px-3 py-1.5 bg-emerald-50 border border-emerald-200 rounded-lg w-fit">
+          <svg className="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <span className="text-xs text-emerald-700 font-medium">Persistente Speicherung aktiv (PostgreSQL)</span>
+        </div>
+      )}
+
+      {/* LLM Analysis Toggle */}
+      <LLMAnalysisPanel
+        llmAutoAnalysis={llmAutoAnalysis}
+        setLlmAutoAnalysis={setLlmAutoAnalysis}
+        llmRouting={llmRouting}
+        setLlmRouting={setLlmRouting}
+      />
+
+      {/* Filter */}
+      <div className="flex flex-wrap gap-4 items-center">
+        <div>
+          <label className="text-sm text-slate-600 mr-2">Status:</label>
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+            className="px-3 py-1.5 rounded-lg border border-slate-200 text-sm"
+          >
+            <option value="all">Alle</option>
+            <option value="open">Offen ({openCount})</option>
+            <option value="in_progress">In Arbeit ({inProgressCount})</option>
+            <option value="fixed">Behoben ({fixedCount})</option>
+            <option value="flaky">Flaky ({flakyCount})</option>
+            <option value="wont_fix">Ignoriert</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-sm text-slate-600 mr-2">Service:</label>
+          <select
+            value={filterService}
+            onChange={(e) => setFilterService(e.target.value)}
+            className="px-3 py-1.5 rounded-lg border border-slate-200 text-sm"
+          >
+            <option value="all">Alle Services</option>
+            {services.map(s => (
+              <option key={s} value={s}>{s}</option>
+            ))}
+          </select>
+        </div>
+        {usePostgres && (
+          <div>
+            <label className="text-sm text-slate-600 mr-2">Prioritaet:</label>
+            <select
+              value={filterPriority}
+              onChange={(e) => setFilterPriority(e.target.value)}
+              className="px-3 py-1.5 rounded-lg border border-slate-200 text-sm"
+            >
+              <option value="all">Alle</option>
+              <option value="critical">Kritisch</option>
+              <option value="high">Hoch</option>
+              <option value="medium">Mittel</option>
+              <option value="low">Niedrig</option>
+            </select>
+          </div>
+        )}
+        <div className="ml-auto text-sm text-slate-500">
+          {filteredItems.length} von {items.length} Tests angezeigt
+        </div>
+      </div>
+
+      {/* Test-Liste */}
+      {filteredItems.length === 0 ? (
+        <div className="text-center py-12 bg-emerald-50 rounded-xl border border-emerald-200">
+          <svg className="w-12 h-12 mx-auto text-emerald-400 mb-4" 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>
+          <p className="text-emerald-700 font-medium">
+            {filterStatus === 'open' ? 'Keine offenen Fehler!' : 'Keine Tests mit diesem Filter gefunden.'}
+          </p>
+          {filterStatus === 'open' && (
+            <p className="text-sm text-emerald-600 mt-2">
+              Alle Tests bestanden. Bereit fuer Go-Live!
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {filteredItems.map((item) => {
+            const test = usePostgres && 'test_name' in item
+              ? convertToFailedTest(item as BacklogItem)
+              : item as FailedTest
+            const priority = usePostgres && 'priority' in item
+              ? (item as BacklogItem).priority
+              : 'medium'
+            const failureCount = usePostgres && 'failure_count' in item
+              ? (item as BacklogItem).failure_count
+              : 1
+
+            return (
+              <FailedTestCard
+                key={test.id}
+                test={test}
+                onStatusChange={onStatusChange}
+                onPriorityChange={onPriorityChange}
+                priority={priority}
+                failureCount={failureCount}
+              />
+            )
+          })}
+        </div>
+      )}
+
+      {/* Info */}
+      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div>
+            <p className="text-sm text-blue-800 font-medium">Workflow fuer fehlgeschlagene Tests:</p>
+            <ol className="text-xs text-blue-700 mt-2 space-y-1 list-decimal list-inside">
+              <li>Markiere den Test als &quot;In Arbeit&quot; wenn du daran arbeitest</li>
+              <li>Analysiere die Fehlermeldung und den Loesungsvorschlag</li>
+              <li>Behebe den Fehler im Code</li>
+              <li>Fuehre den Test erneut aus (Button im Service-Tab)</li>
+              <li>Markiere als &quot;Behoben&quot; wenn der Test besteht</li>
+              {usePostgres && <li>Setze &quot;Flaky&quot; fuer sporadisch fehlschlagende Tests</li>}
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ==============================================================================
+// LLM Analysis Panel (internal)
+// ==============================================================================
+
+function LLMAnalysisPanel({
+  llmAutoAnalysis,
+  setLlmAutoAnalysis,
+  llmRouting,
+  setLlmRouting,
+}: {
+  llmAutoAnalysis: boolean
+  setLlmAutoAnalysis: (v: boolean) => void
+  llmRouting: LLMRoutingOption
+  setLlmRouting: (v: LLMRoutingOption) => void
+}) {
+  return (
+    <div className="bg-gradient-to-r from-violet-50 to-purple-50 border border-violet-200 rounded-xl p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
+            <svg className="w-5 h-5 text-violet-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div>
+            <h4 className="font-medium text-slate-800">Automatische LLM-Analyse</h4>
+            <p className="text-xs text-slate-500">KI-gestuetzte Fix-Vorschlaege fuer Backlog-Eintraege</p>
+          </div>
+        </div>
+        <label className="relative inline-flex items-center cursor-pointer">
+          <input
+            type="checkbox"
+            checked={llmAutoAnalysis}
+            onChange={(e) => setLlmAutoAnalysis(e.target.checked)}
+            className="sr-only peer"
+          />
+          <div className="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-violet-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-violet-600"></div>
+        </label>
+      </div>
+
+      {llmAutoAnalysis && (
+        <div className="mt-4 pt-4 border-t border-violet-200">
+          <p className="text-xs text-slate-600 mb-3">LLM-Routing Strategie:</p>
+          <div className="flex flex-wrap gap-2">
+            <RoutingOption
+              value="local_only"
+              current={llmRouting}
+              onChange={setLlmRouting}
+              label="Nur lokales 32B LLM"
+              badge="DSGVO"
+              badgeColor="bg-emerald-100 text-emerald-700"
+            />
+            <RoutingOption
+              value="claude_preferred"
+              current={llmRouting}
+              onChange={setLlmRouting}
+              label="Claude bevorzugt"
+              badge="Qualitaet"
+              badgeColor="bg-blue-100 text-blue-700"
+            />
+            <RoutingOption
+              value="smart_routing"
+              current={llmRouting}
+              onChange={setLlmRouting}
+              label="Smart Routing"
+              badge="Empfohlen"
+              badgeColor="bg-amber-100 text-amber-700"
+            />
+          </div>
+          <p className="text-xs text-slate-500 mt-2">
+            {llmRouting === 'local_only' && 'Alle Analysen werden mit Qwen2.5-32B lokal durchgefuehrt. Keine Daten verlassen den Server.'}
+            {llmRouting === 'claude_preferred' && 'Verwendet Claude fuer beste Fix-Qualitaet. Nur Code-Snippets werden uebertragen.'}
+            {llmRouting === 'smart_routing' && 'Privacy Classifier entscheidet automatisch: Sensitive Daten → lokal, Code → Claude.'}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function RoutingOption({
+  value,
+  current,
+  onChange,
+  label,
+  badge,
+  badgeColor,
+}: {
+  value: LLMRoutingOption
+  current: LLMRoutingOption
+  onChange: (v: LLMRoutingOption) => void
+  label: string
+  badge: string
+  badgeColor: string
+}) {
+  const isActive = current === value
+  return (
+    <label className={`flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer transition-colors ${
+      isActive
+        ? 'bg-violet-100 border-violet-300 text-violet-800'
+        : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
+    }`}>
+      <input
+        type="radio"
+        name="llm-routing"
+        value={value}
+        checked={isActive}
+        onChange={() => onChange(value)}
+        className="sr-only"
+      />
+      <span className="text-sm font-medium">{label}</span>
+      <span className={`text-xs px-1.5 py-0.5 rounded ${badgeColor}`}>{badge}</span>
+    </label>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/CoverageChart.tsx

@@ -0,0 +1,82 @@
+import type { CoverageData } from '../types'
+
+export function CoverageChart({ data }: { data: CoverageData[] }) {
+  if (data.length === 0) {
+    return (
+      <div className="text-center py-8 text-slate-400">
+        Keine Coverage-Daten verfuegbar
+      </div>
+    )
+  }
+
+  const sortedData = [...data].sort((a, b) => b.coverage_percent - a.coverage_percent)
+
+  return (
+    <div className="space-y-3">
+      {sortedData.map((item) => (
+        <div key={item.service}>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="text-slate-600 truncate max-w-[200px]">{item.display_name}</span>
+            <span
+              className={`font-medium ${
+                item.coverage_percent >= 80 ? 'text-emerald-600' : item.coverage_percent >= 60 ? 'text-amber-600' : 'text-red-600'
+              }`}
+            >
+              {item.coverage_percent.toFixed(1)}%
+            </span>
+          </div>
+          <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all ${
+                item.coverage_percent >= 80 ? 'bg-emerald-500' : item.coverage_percent >= 60 ? 'bg-amber-500' : 'bg-red-500'
+              }`}
+              style={{ width: `${item.coverage_percent}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function FrameworkDistribution({ data }: { data: Record<string, number> }) {
+  const total = Object.values(data).reduce((a, b) => a + b, 0)
+  if (total === 0) return null
+
+  const frameworkLabels: Record<string, string> = {
+    go_test: 'Go Tests',
+    pytest: 'Python (pytest)',
+    jest: 'Jest (TS)',
+    vitest: 'Vitest (SDK)',
+    playwright: 'Playwright (E2E)',
+    bqas_golden: 'BQAS Golden',
+    bqas_rag: 'BQAS RAG',
+    bqas_synthetic: 'BQAS Synthetic',
+  }
+
+  const frameworkColors: Record<string, string> = {
+    go_test: 'bg-cyan-500',
+    pytest: 'bg-yellow-500',
+    jest: 'bg-blue-500',
+    vitest: 'bg-orange-500',
+    playwright: 'bg-purple-500',
+    bqas_golden: 'bg-emerald-500',
+    bqas_rag: 'bg-teal-500',
+    bqas_synthetic: 'bg-amber-500',
+  }
+
+  return (
+    <div className="space-y-3">
+      {Object.entries(data)
+        .sort((a, b) => b[1] - a[1])
+        .map(([framework, count]) => (
+          <div key={framework} className="flex items-center gap-3">
+            <div className={`w-3 h-3 rounded-full ${frameworkColors[framework] || 'bg-slate-400'}`} />
+            <span className="text-sm text-slate-600 flex-1">{frameworkLabels[framework] || framework}</span>
+            <span className="text-sm font-medium text-slate-900">{count}</span>
+            <span className="text-xs text-slate-400">({((count / total) * 100).toFixed(0)}%)</span>
+          </div>
+        ))}
+    </div>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/GuideTab.tsx

@@ -0,0 +1,224 @@
+import Link from 'next/link'
+
+export function GuideTab() {
+  return (
+    <div className="space-y-8">
+      <div className="bg-gradient-to-r from-orange-50 to-amber-50 rounded-xl border border-orange-200 p-6">
+        <h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
+          <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+          </svg>
+          Was ist das Test Dashboard?
+        </h2>
+        <p className="text-slate-700 leading-relaxed">
+          Das <strong>Test Dashboard</strong> ist die zentrale Uebersicht fuer alle 260+ Tests im Breakpilot-System.
+          Es aggregiert Tests aus verschiedenen Services (Go, Python, TypeScript) ohne diese physisch zu migrieren.
+          Tests bleiben an ihren konventionellen Orten, werden aber hier zentral ueberwacht und ausgefuehrt.
+          Seit 2026-02 inklusive AI Compliance SDK Unit Tests (Vitest) und E2E Tests (Playwright).
+        </p>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 p-6">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Test-Kategorien</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <TestCategoryCard
+            icon="🐹" title="Go Unit Tests (~57)" color="cyan"
+            description="consent-service, billing-service, school-service, edu-search-service, ai-compliance-sdk"
+          />
+          <TestCategoryCard
+            icon="🐍" title="Python Tests (~50)" color="yellow"
+            description="backend, voice-service, klausur-service, geo-service"
+          />
+          <TestCategoryCard
+            icon="🎯" title="BQAS Golden (97)" color="emerald"
+            description="Validierte Referenz-Tests mit LLM-Judge fuer Intent-Erkennung"
+          />
+          <TestCategoryCard
+            icon="📚" title="BQAS RAG (~20)" color="teal"
+            description="RAG-Judge Tests fuer Retrieval, Citations, Hallucination-Control"
+          />
+          <TestCategoryCard
+            icon="📘" title="TypeScript Jest (~8)" color="blue"
+            description="Website Unit Tests fuer React-Komponenten"
+          />
+          <TestCategoryCard
+            icon="⚡" title="SDK Vitest (~43)" color="orange"
+            description="AI Compliance SDK Unit Tests: Types, Export, Components, Reducer"
+          />
+          <TestCategoryCard
+            icon="🎭" title="SDK Playwright (~25)" color="purple"
+            description="SDK E2E Tests: Navigation, Workflow, Command Bar, Export"
+          />
+          <TestCategoryCard
+            icon="🌐" title="Website E2E (~5)" color="slate"
+            description="End-to-End Tests fuer kritische User Flows"
+          />
+          <TestCategoryCard
+            icon="🔗" title="Integration Tests (~15)" color="indigo"
+            description="Docker Compose basierte E2E-Tests mit Backend, Consent-Service, DB"
+          />
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-slate-200 p-6">
+        <h3 className="text-lg font-semibold text-slate-900 mb-4">Architektur</h3>
+        <pre className="bg-slate-50 p-4 rounded-lg text-xs overflow-x-auto">
+{`┌────────────────────────────────────────────────────────────────────┐
+│               Admin-v2 Test Dashboard                               │
+│               /infrastructure/tests                                 │
+├────────────────────────────────────────────────────────────────────┤
+│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌─────────────┐  │
+│  │ Unit Tests │  │ SDK Tests  │  │   BQAS     │  │ E2E Tests   │  │
+│  │  (Go, Py)  │  │  (Vitest)  │  │ (LLM/RAG)  │  │ (Playwright)│  │
+│  └────────────┘  └────────────┘  └────────────┘  └─────────────┘  │
+│        │               │               │               │           │
+│        ▼               ▼               ▼               ▼           │
+│  ┌──────────────────────────────────────────────────────────────┐ │
+│  │                    Test Registry API                          │ │
+│  │              /backend/api/tests/registry.py                   │ │
+│  └──────────────────────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────────────────────────┘
+
+Tests bleiben wo sie sind:
+- /consent-service/internal/**/*_test.go
+- /backend/tests/test_*.py
+- /voice-service/tests/bqas/
+- /admin-v2/components/sdk/__tests__/*.test.ts   (Vitest)
+- /admin-v2/e2e/specs/*.spec.ts                  (Playwright)`}
+        </pre>
+      </div>
+
+      {/* CI/CD Workflow Anleitung */}
+      <div className="bg-blue-50 rounded-xl border border-blue-200 p-6">
+        <h3 className="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
+          <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          </svg>
+          CI/CD Integration
+        </h3>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <h4 className="font-medium text-blue-800 mb-2">Automatisch (bei jedem Push/PR)</h4>
+            <ul className="space-y-2 text-sm text-blue-700">
+              <CIItem icon="✓" color="green" label="Unit Tests" detail="Go & Python Tests laufen automatisch" />
+              <CIItem icon="✓" color="green" label="Test-Ergebnisse" detail="Werden ans Dashboard gesendet" />
+              <CIItem icon="✓" color="green" label="Backlog" detail="Fehlgeschlagene Tests erscheinen hier" />
+              <CIItem icon="✓" color="green" label="Linting" detail="Code-Qualitaet bei PRs pruefen" />
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-medium text-blue-800 mb-2">Manuell (Button oder Tag)</h4>
+            <ul className="space-y-2 text-sm text-blue-700">
+              <CIItem icon="▶" color="orange" label="Docker Builds" detail="Container erstellen" />
+              <CIItem icon="▶" color="orange" label="SBOM/Scans" detail="Sicherheitsanalyse ausfuehren" />
+              <CIItem icon="▶" color="orange" label="Deployment" detail="In Produktion deployen" />
+              <CIItem icon="▶" color="orange" label="Pipeline starten" detail="Im CI/CD Dashboard" />
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-blue-200">
+          <p className="text-sm text-blue-600">
+            <strong>Daten-Fluss:</strong> Woodpecker CI → POST /api/tests/ci-result → PostgreSQL → Test Dashboard
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Link
+          href="/ai/test-quality"
+          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
+        >
+          <div className="flex items-center gap-3">
+            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div>
+              <p className="font-medium text-slate-900">BQAS Dashboard</p>
+              <p className="text-xs text-slate-500">Detaillierte BQAS-Metriken und Trend-Analyse</p>
+            </div>
+          </div>
+        </Link>
+        <Link
+          href="/infrastructure/ci-cd"
+          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-orange-300 hover:bg-orange-50 transition-colors"
+        >
+          <div className="flex items-center gap-3">
+            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <div>
+              <p className="font-medium text-slate-900">CI/CD Pipelines</p>
+              <p className="text-xs text-slate-500">Gitea Actions und automatische Test-Planung</p>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Internal helper components
+// ---------------------------------------------------------------------------
+
+function TestCategoryCard({
+  icon,
+  title,
+  color,
+  description,
+}: {
+  icon: string
+  title: string
+  color: string
+  description: string
+}) {
+  const colorMap: Record<string, string> = {
+    cyan: 'bg-cyan-50 border-cyan-200 text-cyan-800 text-cyan-700',
+    yellow: 'bg-yellow-50 border-yellow-200 text-yellow-800 text-yellow-700',
+    emerald: 'bg-emerald-50 border-emerald-200 text-emerald-800 text-emerald-700',
+    teal: 'bg-teal-50 border-teal-200 text-teal-800 text-teal-700',
+    blue: 'bg-blue-50 border-blue-200 text-blue-800 text-blue-700',
+    orange: 'bg-orange-50 border-orange-200 text-orange-800 text-orange-700',
+    purple: 'bg-purple-50 border-purple-200 text-purple-800 text-purple-700',
+    slate: 'bg-slate-50 border-slate-200 text-slate-800 text-slate-700',
+    indigo: 'bg-indigo-50 border-indigo-200 text-indigo-800 text-indigo-700',
+  }
+
+  // Build explicit class strings for Tailwind to detect
+  const bgBorder = `bg-${color}-50 border-${color}-200`
+  const titleColor = `text-${color}-800`
+  const descColor = `text-${color}-700`
+
+  return (
+    <div className={`p-4 rounded-lg border ${bgBorder}`}>
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-xl">{icon}</span>
+        <h4 className={`font-medium ${titleColor}`}>{title}</h4>
+      </div>
+      <p className={`text-sm ${descColor}`}>{description}</p>
+    </div>
+  )
+}
+
+function CIItem({
+  icon,
+  color,
+  label,
+  detail,
+}: {
+  icon: string
+  color: 'green' | 'orange'
+  label: string
+  detail: string
+}) {
+  const iconColor = color === 'green' ? 'text-green-500' : 'text-orange-500'
+  return (
+    <li className="flex items-start gap-2">
+      <span className={`${iconColor} mt-1`}>{icon}</span>
+      <span><strong>{label}</strong> - {detail}</span>
+    </li>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/MetricCard.tsx

@@ -0,0 +1,53 @@
+export function MetricCard({
+  title,
+  value,
+  subtitle,
+  trend,
+  color = 'blue',
+}: {
+  title: string
+  value: string | number
+  subtitle?: string
+  trend?: 'up' | 'down' | 'stable'
+  color?: 'blue' | 'green' | 'red' | 'yellow' | 'orange' | 'purple'
+}) {
+  const colorClasses = {
+    blue: 'bg-blue-50 border-blue-200',
+    green: 'bg-emerald-50 border-emerald-200',
+    red: 'bg-red-50 border-red-200',
+    yellow: 'bg-amber-50 border-amber-200',
+    orange: 'bg-orange-50 border-orange-200',
+    purple: 'bg-purple-50 border-purple-200',
+  }
+
+  const trendIcons = {
+    up: (
+      <svg className="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
+      </svg>
+    ),
+    down: (
+      <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+      </svg>
+    ),
+    stable: (
+      <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
+      </svg>
+    ),
+  }
+
+  return (
+    <div className={`rounded-xl border p-5 ${colorClasses[color]}`}>
+      <div className="flex items-start justify-between">
+        <div>
+          <p className="text-sm font-medium text-slate-600">{title}</p>
+          <p className="mt-1 text-2xl font-bold text-slate-900">{value}</p>
+          {subtitle && <p className="mt-1 text-xs text-slate-500">{subtitle}</p>}
+        </div>
+        {trend && <div className="mt-1">{trendIcons[trend]}</div>}
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/ServiceTestCard.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import type { ServiceTestInfo } from '../types'
+
+export interface ServiceProgress {
+  current_file: string
+  files_done: number
+  files_total: number
+  passed: number
+  failed: number
+  status: string
+}
+
+export function ServiceTestCard({
+  service,
+  onRun,
+  isRunning,
+  progress,
+}: {
+  service: ServiceTestInfo
+  onRun: (service: string) => void
+  isRunning: boolean
+  progress?: ServiceProgress
+}) {
+  const passRate = service.total_tests > 0 ? (service.passed_tests / service.total_tests) * 100 : 0
+
+  const getLanguageIcon = (lang: string) => {
+    switch (lang) {
+      case 'go':
+        return '🐹'
+      case 'python':
+        return '🐍'
+      case 'typescript':
+        return '📘'
+      case 'mixed':
+        return '🔀'
+      default:
+        return '📦'
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'passed':
+        return 'bg-emerald-100 text-emerald-700'
+      case 'failed':
+        return 'bg-red-100 text-red-700'
+      case 'running':
+        return 'bg-blue-100 text-blue-700'
+      default:
+        return 'bg-slate-100 text-slate-700'
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-5 hover:border-orange-300 transition-colors">
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <span className="text-2xl">{getLanguageIcon(service.language)}</span>
+          <div>
+            <h3 className="font-semibold text-slate-900">{service.display_name}</h3>
+            <p className="text-xs text-slate-500">
+              {service.port ? `Port ${service.port}` : 'Library'} • {service.language}
+            </p>
+          </div>
+        </div>
+        <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(service.status)}`}>
+          {service.status === 'passed' ? 'Bestanden' : service.status === 'failed' ? 'Fehler' : 'Ausstehend'}
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="text-slate-600">Pass Rate</span>
+            <span className="font-medium text-slate-900">{passRate.toFixed(0)}%</span>
+          </div>
+          <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all ${
+                passRate >= 80 ? 'bg-emerald-500' : passRate >= 60 ? 'bg-amber-500' : 'bg-red-500'
+              }`}
+              style={{ width: `${passRate}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 text-center">
+          <div className="p-2 bg-slate-50 rounded-lg">
+            <p className="text-lg font-bold text-slate-900">{service.total_tests}</p>
+            <p className="text-xs text-slate-500">Tests</p>
+          </div>
+          <div className="p-2 bg-emerald-50 rounded-lg">
+            <p className="text-lg font-bold text-emerald-600">{service.passed_tests}</p>
+            <p className="text-xs text-slate-500">Bestanden</p>
+          </div>
+          <div className="p-2 bg-red-50 rounded-lg">
+            <p className="text-lg font-bold text-red-600">{service.failed_tests}</p>
+            <p className="text-xs text-slate-500">Fehler</p>
+          </div>
+        </div>
+
+        {service.coverage_percent && (
+          <div className="flex items-center justify-between text-sm pt-2 border-t border-slate-100">
+            <span className="text-slate-600">Coverage</span>
+            <span className={`font-medium ${service.coverage_percent >= 70 ? 'text-emerald-600' : 'text-amber-600'}`}>
+              {service.coverage_percent.toFixed(1)}%
+            </span>
+          </div>
+        )}
+
+        {/* Progress-Anzeige wenn Tests laufen */}
+        {isRunning && progress && progress.status === 'running' && (
+          <div className="mb-3 p-3 bg-orange-50 rounded-lg border border-orange-200">
+            <div className="flex items-center justify-between text-xs text-orange-700 mb-2">
+              <span className="font-mono truncate max-w-[180px]">{progress.current_file || 'Starte...'}</span>
+              <span>{progress.files_done}/{progress.files_total} Dateien</span>
+            </div>
+            <div className="h-1.5 bg-orange-100 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-orange-500 rounded-full transition-all"
+                style={{ width: `${progress.files_total > 0 ? (progress.files_done / progress.files_total) * 100 : 0}%` }}
+              />
+            </div>
+            <div className="flex items-center justify-between mt-2 text-xs">
+              <span className="text-emerald-600 font-medium">{progress.passed} bestanden</span>
+              <span className="text-red-600 font-medium">{progress.failed} fehler</span>
+            </div>
+          </div>
+        )}
+
+        <button
+          onClick={() => onRun(service.service)}
+          disabled={isRunning}
+          className={`w-full py-2 rounded-lg text-sm font-medium transition-all ${
+            isRunning
+              ? 'bg-orange-100 text-orange-600 cursor-wait'
+              : 'bg-orange-600 text-white hover:bg-orange-700 active:scale-98'
+          }`}
+        >
+          {isRunning ? (
+            <span className="flex items-center justify-center gap-2">
+              <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              {progress && progress.status === 'running' ? `${progress.passed + progress.failed} Tests...` : 'Laeuft...'}
+            </span>
+          ) : (
+            'Tests starten'
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/TestRunsTable.tsx

@@ -0,0 +1,64 @@
+import type { TestRun } from '../types'
+
+export function TestRunsTable({ runs }: { runs: TestRun[] }) {
+  if (runs.length === 0) {
+    return (
+      <div className="text-center py-8 text-slate-400">
+        Keine Test-Laeufe vorhanden
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-slate-200">
+            <th className="text-left py-3 px-4 font-medium text-slate-600">ID</th>
+            <th className="text-left py-3 px-4 font-medium text-slate-600">Service</th>
+            <th className="text-left py-3 px-4 font-medium text-slate-600">Zeitpunkt</th>
+            <th className="text-right py-3 px-4 font-medium text-slate-600">Tests</th>
+            <th className="text-right py-3 px-4 font-medium text-slate-600">Bestanden</th>
+            <th className="text-right py-3 px-4 font-medium text-slate-600">Dauer</th>
+            <th className="text-center py-3 px-4 font-medium text-slate-600">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {runs.map((run) => (
+            <tr key={run.id} className="border-b border-slate-100 hover:bg-slate-50">
+              <td className="py-3 px-4 font-mono text-xs text-slate-500">{run.id.slice(-8)}</td>
+              <td className="py-3 px-4 text-slate-900">{run.service}</td>
+              <td className="py-3 px-4 text-slate-600">
+                {new Date(run.started_at).toLocaleString('de-DE')}
+              </td>
+              <td className="py-3 px-4 text-right text-slate-600">{run.total_tests}</td>
+              <td className="py-3 px-4 text-right">
+                <span className="text-emerald-600">{run.passed_tests}</span>
+                <span className="text-slate-400"> / </span>
+                <span className="text-red-600">{run.failed_tests}</span>
+              </td>
+              <td className="py-3 px-4 text-right text-slate-500">
+                {run.duration_seconds.toFixed(1)}s
+              </td>
+              <td className="py-3 px-4 text-center">
+                <span
+                  className={`px-2 py-1 rounded text-xs font-medium ${
+                    run.status === 'completed'
+                      ? 'bg-emerald-100 text-emerald-700'
+                      : run.status === 'failed'
+                        ? 'bg-red-100 text-red-700'
+                        : run.status === 'running'
+                          ? 'bg-blue-100 text-blue-700'
+                          : 'bg-slate-100 text-slate-700'
+                  }`}
+                >
+                  {run.status}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/infrastructure/tests/_components/ToastContainer.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import type { Toast } from '../types'
+
+export function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border animate-slide-in ${
+            toast.type === 'success'
+              ? 'bg-emerald-50 border-emerald-200 text-emerald-800'
+              : toast.type === 'error'
+                ? 'bg-red-50 border-red-200 text-red-800'
+                : toast.type === 'loading'
+                  ? 'bg-blue-50 border-blue-200 text-blue-800'
+                  : 'bg-slate-50 border-slate-200 text-slate-800'
+          }`}
+        >
+          {toast.type === 'loading' ? (
+            <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          ) : toast.type === 'success' ? (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          ) : toast.type === 'error' ? (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          ) : (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          )}
+          <span className="text-sm font-medium">{toast.message}</span>
+          {toast.type !== 'loading' && (
+            <button onClick={() => onDismiss(toast.id)} className="ml-2 opacity-60 hover:opacity-100">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}