b9c3c47a37
- LLM Compare Seiten, Configs und alle Referenzen geloescht - Kommunikation-Kategorie in Sidebar mit Video & Chat, Voice Service, Alerts - Compliance SDK Kategorie aus Sidebar entfernt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1526 lines
66 KiB
TypeScript
1526 lines
66 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Test Quality Dashboard - BQAS (Breakpilot Quality Assurance System)
|
|
*
|
|
* Umfassendes Qualitaetssicherungs-Dashboard mit:
|
|
* - Golden Test Suite Ergebnisse
|
|
* - Synthetic Test Generierung
|
|
* - Regression Tracking
|
|
* - Test Run Historie
|
|
* - RAG Correction Tests
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback, useRef } from 'react'
|
|
import Link from 'next/link'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
|
|
import type { TestRun, BQASMetrics, TrendData, TabType } from './types'
|
|
|
|
// API Configuration - Use internal proxy to avoid CORS issues
|
|
const BQAS_API_BASE = '/api/bqas'
|
|
|
|
// ============================================================================
|
|
// Toast Notification Component
|
|
// ============================================================================
|
|
|
|
interface Toast {
|
|
id: number
|
|
type: 'success' | 'error' | 'info' | 'loading'
|
|
message: string
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// Helper Components
|
|
// ============================================================================
|
|
|
|
function MetricCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
trend,
|
|
color = 'blue',
|
|
}: {
|
|
title: string
|
|
value: string | number
|
|
subtitle?: string
|
|
trend?: 'up' | 'down' | 'stable'
|
|
color?: 'blue' | 'green' | 'red' | 'yellow' | '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',
|
|
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>
|
|
)
|
|
}
|
|
|
|
function TestSuiteCard({
|
|
title,
|
|
description,
|
|
metrics,
|
|
onRun,
|
|
isRunning,
|
|
lastRun,
|
|
}: {
|
|
title: string
|
|
description: string
|
|
metrics?: BQASMetrics
|
|
onRun: () => void
|
|
isRunning: boolean
|
|
lastRun?: string
|
|
}) {
|
|
const passRate = metrics ? (metrics.passed_tests / metrics.total_tests) * 100 : 0
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">{title}</h3>
|
|
<p className="mt-1 text-sm text-slate-500">{description}</p>
|
|
</div>
|
|
<button
|
|
onClick={onRun}
|
|
disabled={isRunning}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
isRunning
|
|
? 'bg-teal-100 text-teal-600 cursor-wait'
|
|
: 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
|
|
}`}
|
|
>
|
|
{isRunning ? (
|
|
<span className="flex items-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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
Laeuft...
|
|
</span>
|
|
) : (
|
|
'Tests starten'
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{metrics && (
|
|
<div className="mt-6">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-slate-600">Pass Rate</span>
|
|
<span className="font-medium text-slate-900">{passRate.toFixed(1)}%</span>
|
|
</div>
|
|
<div className="mt-2 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 className="mt-4 grid grid-cols-3 gap-4">
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-slate-900">{metrics.total_tests}</p>
|
|
<p className="text-xs text-slate-500">Tests</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-emerald-600">{metrics.passed_tests}</p>
|
|
<p className="text-xs text-slate-500">Bestanden</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-2xl font-bold text-red-600">{metrics.failed_tests}</p>
|
|
<p className="text-xs text-slate-500">Fehlgeschlagen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-slate-100">
|
|
<p className="text-xs text-slate-500">
|
|
Durchschnittlicher Score: <span className="font-medium">{metrics.avg_composite_score.toFixed(2)}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{lastRun && (
|
|
<p className="mt-4 text-xs text-slate-400">Letzter Lauf: {new Date(lastRun).toLocaleString('de-DE')}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TrendChart({ data }: { data: TrendData }) {
|
|
if (!data || data.dates.length === 0) {
|
|
return (
|
|
<div className="h-48 flex items-center justify-center text-slate-400">
|
|
Keine Trend-Daten verfuegbar
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const maxScore = Math.max(...data.scores, 5)
|
|
const minScore = Math.min(...data.scores, 0)
|
|
const range = maxScore - minScore || 1
|
|
|
|
return (
|
|
<div className="h-48 relative">
|
|
<div className="absolute left-0 top-0 bottom-4 w-8 flex flex-col justify-between text-xs text-slate-400">
|
|
<span>{maxScore.toFixed(1)}</span>
|
|
<span>{((maxScore + minScore) / 2).toFixed(1)}</span>
|
|
<span>{minScore.toFixed(1)}</span>
|
|
</div>
|
|
|
|
<div className="ml-10 h-full pr-4">
|
|
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<line x1="0" y1="0" x2="100" y2="0" stroke="#e2e8f0" strokeWidth="0.5" />
|
|
<line x1="0" y1="50" x2="100" y2="50" stroke="#e2e8f0" strokeWidth="0.5" />
|
|
<line x1="0" y1="100" x2="100" y2="100" stroke="#e2e8f0" strokeWidth="0.5" />
|
|
|
|
<polyline
|
|
fill="none"
|
|
stroke="#14b8a6"
|
|
strokeWidth="2"
|
|
points={data.scores
|
|
.map((score, i) => {
|
|
const x = (i / (data.scores.length - 1 || 1)) * 100
|
|
const y = 100 - ((score - minScore) / range) * 100
|
|
return `${x},${y}`
|
|
})
|
|
.join(' ')}
|
|
/>
|
|
|
|
{data.scores.map((score, i) => {
|
|
const x = (i / (data.scores.length - 1 || 1)) * 100
|
|
const y = 100 - ((score - minScore) / range) * 100
|
|
return <circle key={i} cx={x} cy={y} r="2" fill="#14b8a6" />
|
|
})}
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="ml-10 flex justify-between text-xs text-slate-400 mt-1">
|
|
{data.dates.slice(0, 5).map((date, i) => (
|
|
<span key={i}>{new Date(date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })}</span>
|
|
))}
|
|
</div>
|
|
|
|
<div className="absolute top-2 right-2">
|
|
<span
|
|
className={`px-2 py-1 rounded text-xs font-medium ${
|
|
data.trend === 'improving'
|
|
? 'bg-emerald-100 text-emerald-700'
|
|
: data.trend === 'declining'
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-slate-100 text-slate-700'
|
|
}`}
|
|
>
|
|
{data.trend === 'improving' ? 'Verbessernd' : data.trend === 'declining' ? 'Verschlechternd' : 'Stabil'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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">Zeitpunkt</th>
|
|
<th className="text-left py-3 px-4 font-medium text-slate-600">Commit</th>
|
|
<th className="text-right py-3 px-4 font-medium text-slate-600">Golden Score</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>
|
|
</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-slate-900">#{run.id}</td>
|
|
<td className="py-3 px-4 text-slate-600">
|
|
{new Date(run.timestamp).toLocaleString('de-DE')}
|
|
</td>
|
|
<td className="py-3 px-4 font-mono text-xs text-slate-500">
|
|
{run.git_commit?.slice(0, 7) || '-'}
|
|
</td>
|
|
<td className="py-3 px-4 text-right">
|
|
<span
|
|
className={`font-medium ${
|
|
run.golden_score >= 4 ? 'text-emerald-600' : run.golden_score >= 3 ? 'text-amber-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{run.golden_score.toFixed(2)}
|
|
</span>
|
|
</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>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function IntentScoresChart({ scores }: { scores: Record<string, number> }) {
|
|
const entries = Object.entries(scores).sort((a, b) => b[1] - a[1])
|
|
|
|
if (entries.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-slate-400">
|
|
Keine Intent-Scores verfuegbar
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{entries.map(([intent, score]) => (
|
|
<div key={intent}>
|
|
<div className="flex items-center justify-between text-sm mb-1">
|
|
<span className="text-slate-600 truncate max-w-[200px]">{intent.replace(/_/g, ' ')}</span>
|
|
<span
|
|
className={`font-medium ${
|
|
score >= 4 ? 'text-emerald-600' : score >= 3 ? 'text-amber-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{score.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-slate-100 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full rounded-full transition-all ${
|
|
score >= 4 ? 'bg-emerald-500' : score >= 3 ? 'bg-amber-500' : 'bg-red-500'
|
|
}`}
|
|
style={{ width: `${(score / 5) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Demo failed test details for illustration
|
|
const FAILED_TEST_DETAILS: Record<string, { description: string; cause: string; action: string }> = {
|
|
// Golden Suite - Intent Tests
|
|
'INT-001': {
|
|
description: 'Student Observation - Simple',
|
|
cause: 'Notiz zu Max wird nicht korrekt als student_observation erkannt',
|
|
action: 'Training-Daten fuer kurze Notiz-Befehle erweitern',
|
|
},
|
|
'INT-002': {
|
|
description: 'Student Observation - Needs Help',
|
|
cause: 'Anfrage "Anna braucht extra Uebungsblatt" wird falsch klassifiziert',
|
|
action: 'Intent-Erkennung fuer Hilfe-Anfragen verbessern',
|
|
},
|
|
'INT-003': {
|
|
description: 'Reminder - Simple',
|
|
cause: 'Erinnerungs-Intent nicht erkannt',
|
|
action: 'Trigger-Woerter fuer Erinnerungen pruefen',
|
|
},
|
|
'INT-010': {
|
|
description: 'Quick Activity - With Time',
|
|
cause: '"10 Minuten Einstieg" wird nicht als quick_activity erkannt',
|
|
action: 'Zeitmuster in Quick-Activity-Intent aufnehmen',
|
|
},
|
|
'INT-011': {
|
|
description: 'Quiz Generate - Vocabulary',
|
|
cause: 'Vokabeltest wird nicht als quiz_generate klassifiziert',
|
|
action: 'Quiz-Keywords wie "Test", "Vokabel" staerker gewichten',
|
|
},
|
|
'INT-012': {
|
|
description: 'Quiz Generate - Short Test',
|
|
cause: '"Kurzer Test zu Kapitel 5" falsch erkannt',
|
|
action: 'Kontext-Keywords fuer Quiz verbessern',
|
|
},
|
|
'INT-015': {
|
|
description: 'Class Message',
|
|
cause: 'Nachricht an Klasse wird als anderer Intent erkannt',
|
|
action: 'Klassen-Nachrichten-Patterns erweitern',
|
|
},
|
|
'INT-019': {
|
|
description: 'Operator Checklist',
|
|
cause: 'Operatoren-Anfrage nicht korrekt klassifiziert',
|
|
action: 'EH/Operator-bezogene Intents pruefen',
|
|
},
|
|
'INT-021': {
|
|
description: 'Feedback Suggest',
|
|
cause: 'Feedback-Vorschlag Intent nicht erkannt',
|
|
action: 'Feedback-Synonyme hinzufuegen',
|
|
},
|
|
'INT-022': {
|
|
description: 'Reminder Schedule - Tomorrow',
|
|
cause: 'Zeitbasierte Erinnerung falsch klassifiziert',
|
|
action: 'Zeitausdrucke wie "morgen" besser verarbeiten',
|
|
},
|
|
'INT-023': {
|
|
description: 'Task Summary',
|
|
cause: 'Zusammenfassungs-Intent nicht erkannt',
|
|
action: 'Summary-Trigger erweitern',
|
|
},
|
|
// RAG Tests
|
|
'RAG-EH-001': {
|
|
description: 'EH Passage Retrieval - Textanalyse Sachtext',
|
|
cause: 'EH-Passage nicht gefunden oder unvollstaendig',
|
|
action: 'RAG-Retrieval fuer Textanalyse optimieren',
|
|
},
|
|
'RAG-HAL-002': {
|
|
description: 'No Fictional EH Passages',
|
|
cause: 'System generiert fiktive EH-Inhalte',
|
|
action: 'Hallucination-Control verstaerken',
|
|
},
|
|
'RAG-HAL-004': {
|
|
description: 'Grounded Response Only',
|
|
cause: 'Antwort basiert nicht auf vorhandenen Daten',
|
|
action: 'Grounding-Check im Response-Flow einbauen',
|
|
},
|
|
'RAG-CIT-003': {
|
|
description: 'Multiple Source Attribution',
|
|
cause: 'Mehrere Quellen nicht korrekt zugeordnet',
|
|
action: 'Multi-Source Citation verbessern',
|
|
},
|
|
'RAG-EDGE-002': {
|
|
description: 'Ambiguous Operator Query',
|
|
cause: 'Bei mehrdeutiger Anfrage keine Klaerung angefordert',
|
|
action: 'Clarification-Flow implementieren',
|
|
},
|
|
// Synthetic Tests
|
|
'SYN-STUD-003': {
|
|
description: 'Synthetic Student Observation',
|
|
cause: 'Generierte Variante nicht erkannt',
|
|
action: 'Robustheit gegen Variationen erhoehen',
|
|
},
|
|
'SYN-WORK-002': {
|
|
description: 'Synthetic Worksheet Generate',
|
|
cause: 'Arbeitsblatt-Intent bei Variation nicht erkannt',
|
|
action: 'Mehr Variationen ins Training aufnehmen',
|
|
},
|
|
'SYN-WORK-005': {
|
|
description: 'Synthetic Worksheet mit Tippfehler',
|
|
cause: 'Tippfehler fuehrt zu Fehlklassifikation',
|
|
action: 'Tippfehler-Normalisierung pruefen',
|
|
},
|
|
'SYN-REM-001': {
|
|
description: 'Synthetic Reminder',
|
|
cause: 'Reminder-Variante nicht erkannt',
|
|
action: 'Reminder-Patterns erweitern',
|
|
},
|
|
'SYN-REM-004': {
|
|
description: 'Synthetic Reminder mit Dialekt',
|
|
cause: 'Dialekt-Formulierung nicht verstanden',
|
|
action: 'Dialekt-Normalisierung verbessern',
|
|
},
|
|
}
|
|
|
|
function FailedTestsList({ testIds }: { testIds: string[] }) {
|
|
const [expandedTest, setExpandedTest] = useState<string | null>(null)
|
|
|
|
if (testIds.length === 0) {
|
|
return (
|
|
<div className="text-center py-8 text-emerald-600">
|
|
<svg className="w-12 h-12 mx-auto mb-2" 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>
|
|
Alle Tests bestanden!
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 max-h-96 overflow-y-auto">
|
|
{testIds.map((testId) => {
|
|
const details = FAILED_TEST_DETAILS[testId]
|
|
const isExpanded = expandedTest === testId
|
|
|
|
return (
|
|
<div
|
|
key={testId}
|
|
className="rounded-lg border border-red-200 overflow-hidden"
|
|
>
|
|
<button
|
|
onClick={() => setExpandedTest(isExpanded ? null : testId)}
|
|
className="w-full flex items-center justify-between p-3 bg-red-50 hover:bg-red-100 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<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="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
<span className="font-mono text-sm text-red-700">{testId}</span>
|
|
{details && (
|
|
<span className="text-xs text-red-600 hidden sm:inline">- {details.description}</span>
|
|
)}
|
|
</div>
|
|
<svg
|
|
className={`w-4 h-4 text-red-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{isExpanded && details && (
|
|
<div className="p-4 bg-white border-t border-red-100 space-y-3">
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-500 uppercase">Ursache</p>
|
|
<p className="text-sm text-slate-700 mt-1">{details.cause}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-medium text-slate-500 uppercase">Empfohlene Aktion</p>
|
|
<p className="text-sm text-slate-700 mt-1 flex items-start gap-2">
|
|
<svg className="w-4 h-4 text-amber-500 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>
|
|
{details.action}
|
|
</p>
|
|
</div>
|
|
<div className="pt-2 border-t border-slate-100">
|
|
<p className="text-xs text-slate-400">
|
|
Test-ID: <span className="font-mono">{testId}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
<div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<p className="text-xs text-amber-800">
|
|
<strong>Tipp:</strong> Klicken Sie auf einen Test um Details zur Ursache und empfohlene Aktionen zu sehen.
|
|
Fehlgeschlagene Tests sollten vor dem naechsten Release behoben werden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// Guide Tab Component
|
|
// ============================================================================
|
|
|
|
function GuideTab() {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Introduction */}
|
|
<div className="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-xl border border-teal-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-teal-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 BQAS?
|
|
</h2>
|
|
<p className="text-slate-700 leading-relaxed">
|
|
Das <strong>Breakpilot Quality Assurance System (BQAS)</strong> ist unser automatisiertes Test-Framework
|
|
zur kontinuierlichen Qualitaetssicherung der KI-Komponenten. Es stellt sicher, dass Aenderungen am
|
|
Voice-Service, den Prompts oder den RAG-Pipelines keine Regressionen verursachen.
|
|
</p>
|
|
</div>
|
|
|
|
{/* For Whom */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Fuer wen ist dieses Dashboard?</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<h4 className="font-medium text-blue-800 flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
Entwickler
|
|
</h4>
|
|
<p className="text-sm text-blue-700 mt-2">
|
|
Pruefen Sie nach Code-Aenderungen ob alle Tests noch bestehen. Analysieren Sie fehlgeschlagene Tests
|
|
und implementieren Sie Fixes.
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
|
|
<h4 className="font-medium text-purple-800 flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
Data Scientists
|
|
</h4>
|
|
<p className="text-sm text-purple-700 mt-2">
|
|
Analysieren Sie Intent-Scores, Faithfulness und Relevance. Identifizieren Sie Schwachstellen
|
|
in den ML-Modellen und RAG-Pipelines.
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-amber-50 rounded-lg border border-amber-200">
|
|
<h4 className="font-medium text-amber-800 flex items-center gap-2">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
Auditoren / QA
|
|
</h4>
|
|
<p className="text-sm text-amber-700 mt-2">
|
|
Dokumentieren Sie die Testabdeckung und Qualitaetsmetriken. Nutzen Sie die Historie
|
|
fuer Audit-Trails und Compliance-Nachweise.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Test Suites Explained */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Die drei Test-Suites</h3>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-blue-600">1</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-slate-900">Golden Suite (97 Tests)</h4>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Was:</strong> Manuell validierte Referenz-Tests mit definierten Erwartungen. Jeder Test
|
|
hat eine Eingabe, eine erwartete Ausgabe und Bewertungskriterien.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Wann ausfuehren:</strong> Nach jeder Aenderung am Voice-Service oder den Prompts.
|
|
Automatisch taeglich um 07:00 Uhr via launchd.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Ziel-Score:</strong> {'>'}= 4.0 (von 5.0)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-purple-600">2</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-slate-900">RAG/Korrektur Tests</h4>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Was:</strong> Tests fuer das Retrieval-Augmented Generation System. Pruefen ob der richtige
|
|
Erwartungshorizont gefunden wird und ob Antworten korrekt zitiert werden.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Wann ausfuehren:</strong> Nach Aenderungen an Qdrant, Chunking-Strategien oder EH-Uploads.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Kategorien:</strong> EH-Retrieval, Operator-Alignment, Hallucination-Control, Citation-Enforcement,
|
|
Privacy-Compliance, Namespace-Isolation
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
|
|
<span className="text-xl font-bold text-amber-600">3</span>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold text-slate-900">Synthetic Tests</h4>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Was:</strong> LLM-generierte Variationen der Golden-Tests. Testet Robustheit gegenueber
|
|
Umformulierungen, Tippfehlern, Dialekt und Edge-Cases.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Wann ausfuehren:</strong> Woechentlich oder vor Major-Releases.
|
|
</p>
|
|
<p className="text-sm text-slate-600 mt-1">
|
|
<strong>Hinweis:</strong> Generierung dauert laenger da LLM-Calls benoetigt werden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metrics Explained */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Metriken verstehen</h3>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-slate-200 bg-slate-50">
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Metrik</th>
|
|
<th className="text-left py-3 px-4 font-medium text-slate-700">Beschreibung</th>
|
|
<th className="text-center py-3 px-4 font-medium text-slate-700">Zielwert</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b border-slate-100">
|
|
<td className="py-3 px-4 font-medium">Composite Score</td>
|
|
<td className="py-3 px-4 text-slate-600">Gewichteter Durchschnitt aller Einzelmetriken (1-5)</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
|
|
</tr>
|
|
<tr className="border-b border-slate-100">
|
|
<td className="py-3 px-4 font-medium">Intent Accuracy</td>
|
|
<td className="py-3 px-4 text-slate-600">Wie oft wird die richtige Nutzerabsicht erkannt?</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 90%</span></td>
|
|
</tr>
|
|
<tr className="border-b border-slate-100">
|
|
<td className="py-3 px-4 font-medium">Faithfulness</td>
|
|
<td className="py-3 px-4 text-slate-600">Ist die Antwort dem EH treu? Keine Halluzinationen?</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
|
|
</tr>
|
|
<tr className="border-b border-slate-100">
|
|
<td className="py-3 px-4 font-medium">Relevance</td>
|
|
<td className="py-3 px-4 text-slate-600">Beantwortet die Antwort die Frage des Nutzers?</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
|
|
</tr>
|
|
<tr className="border-b border-slate-100">
|
|
<td className="py-3 px-4 font-medium">Coherence</td>
|
|
<td className="py-3 px-4 text-slate-600">Ist die Antwort logisch aufgebaut und verstaendlich?</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td className="py-3 px-4 font-medium">Safety Pass Rate</td>
|
|
<td className="py-3 px-4 text-slate-600">Werden kritische Inhalte korrekt gefiltert?</td>
|
|
<td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">100%</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workflow */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Typischer Workflow</h3>
|
|
|
|
<div className="relative">
|
|
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200"></div>
|
|
|
|
<div className="space-y-6">
|
|
{[
|
|
{ step: 1, title: 'Tests starten', desc: 'Klicken Sie auf "Tests starten" bei der gewuenschten Suite. Eine Benachrichtigung zeigt den Status.' },
|
|
{ step: 2, title: 'Ergebnisse pruefen', desc: 'Nach Abschluss werden Pass Rate und Score angezeigt. Pruefen Sie ob der Zielwert erreicht wurde.' },
|
|
{ step: 3, title: 'Fehlgeschlagene Tests analysieren', desc: 'Klicken Sie auf fehlgeschlagene Tests um Ursache und empfohlene Aktionen zu sehen.' },
|
|
{ step: 4, title: 'Fixes implementieren', desc: 'Beheben Sie die identifizierten Probleme im Code, Prompts oder Training-Daten.' },
|
|
{ step: 5, title: 'Erneut testen', desc: 'Fuehren Sie die Tests erneut aus um zu verifizieren dass die Fixes wirksam sind.' },
|
|
{ step: 6, title: 'Dokumentieren', desc: 'Nutzen Sie die Historie als Audit-Trail. Exportieren Sie Reports fuer Compliance-Nachweise.' },
|
|
].map((item) => (
|
|
<div key={item.step} className="flex gap-4 relative">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-teal-600 text-white flex items-center justify-center text-sm font-bold z-10">
|
|
{item.step}
|
|
</div>
|
|
<div className="pt-1">
|
|
<h4 className="font-medium text-slate-900">{item.title}</h4>
|
|
<p className="text-sm text-slate-600 mt-0.5">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* FAQ */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Haeufige Fragen</h3>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
q: 'Wie lange dauert ein Test-Lauf?',
|
|
a: 'Golden Suite: ca. 45 Sekunden. RAG Tests: ca. 60 Sekunden. Synthetic Tests: 2-5 Minuten (abhaengig von LLM-Verfuegbarkeit).',
|
|
},
|
|
{
|
|
q: 'Was passiert wenn Tests fehlschlagen?',
|
|
a: 'Fehlgeschlagene Tests werden rot markiert. Klicken Sie darauf um Details zu sehen. Bei kritischen Regressionen wird automatisch eine Desktop-Benachrichtigung gesendet.',
|
|
},
|
|
{
|
|
q: 'Wann werden Tests automatisch ausgefuehrt?',
|
|
a: 'Die Golden Suite laeuft taeglich um 07:00 Uhr via launchd. Zusaetzlich bei jedem Commit im voice-service via Git-Hook (Quick-Tests).',
|
|
},
|
|
{
|
|
q: 'Wie kann ich einen neuen Golden-Test hinzufuegen?',
|
|
a: 'Tests werden in /voice-service/bqas/golden_tests.json definiert. Jeder Test braucht: ID, Input, Expected Intent, Bewertungskriterien.',
|
|
},
|
|
{
|
|
q: 'Was bedeutet "Demo-Daten"?',
|
|
a: 'Wenn die Voice-Service API nicht erreichbar ist, werden Demo-Daten angezeigt. Dies ist normal in der Entwicklungsumgebung wenn der Service nicht laeuft.',
|
|
},
|
|
].map((faq, i) => (
|
|
<div key={i} className="border-b border-slate-100 pb-4 last:border-0 last:pb-0">
|
|
<p className="font-medium text-slate-900">{faq.q}</p>
|
|
<p className="text-sm text-slate-600 mt-1">{faq.a}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Links */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Link
|
|
href="/infrastructure/ci-cd"
|
|
className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-teal-300 hover:bg-teal-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 Scheduler</p>
|
|
<p className="text-xs text-slate-500">Automatische Test-Planung konfigurieren</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href="/ai/rag"
|
|
className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-teal-300 hover:bg-teal-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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
|
</svg>
|
|
<div>
|
|
<p className="font-medium text-slate-900">RAG Management</p>
|
|
<p className="text-xs text-slate-500">Erwartungshorizonte und Chunking verwalten</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ============================================================================
|
|
// Main Component
|
|
// ============================================================================
|
|
|
|
export default function TestQualityPage() {
|
|
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Toast state - using useRef for stable ID counter
|
|
const [toasts, setToasts] = useState<Toast[]>([])
|
|
const toastIdRef = useRef(0)
|
|
|
|
const addToast = useCallback((type: Toast['type'], message: string) => {
|
|
const id = ++toastIdRef.current
|
|
console.log('Adding toast:', id, type, message) // Debug log
|
|
setToasts((prev) => [...prev, { id, type, message }])
|
|
|
|
if (type !== 'loading') {
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id))
|
|
}, 5000)
|
|
}
|
|
|
|
return id
|
|
}, [])
|
|
|
|
const removeToast = useCallback((id: number) => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id))
|
|
}, [])
|
|
|
|
const updateToast = useCallback((id: number, type: Toast['type'], message: string) => {
|
|
console.log('Updating toast:', id, type, message) // Debug log
|
|
setToasts((prev) =>
|
|
prev.map((t) => (t.id === id ? { ...t, type, message } : t))
|
|
)
|
|
if (type !== 'loading') {
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id))
|
|
}, 5000)
|
|
}
|
|
}, [])
|
|
|
|
// Data states
|
|
const [goldenMetrics, setGoldenMetrics] = useState<BQASMetrics | null>(null)
|
|
const [syntheticMetrics, setSyntheticMetrics] = useState<BQASMetrics | null>(null)
|
|
const [ragMetrics, setRagMetrics] = useState<BQASMetrics | null>(null)
|
|
const [testRuns, setTestRuns] = useState<TestRun[]>([])
|
|
const [trendData, setTrendData] = useState<TrendData | null>(null)
|
|
|
|
// Running states
|
|
const [isRunningGolden, setIsRunningGolden] = useState(false)
|
|
const [isRunningSynthetic, setIsRunningSynthetic] = useState(false)
|
|
const [isRunningRag, setIsRunningRag] = useState(false)
|
|
|
|
// Demo data for when API is not available
|
|
const DEMO_GOLDEN_METRICS: BQASMetrics = {
|
|
total_tests: 97,
|
|
passed_tests: 89,
|
|
failed_tests: 8,
|
|
avg_intent_accuracy: 91.7,
|
|
avg_faithfulness: 4.2,
|
|
avg_relevance: 4.1,
|
|
avg_coherence: 4.3,
|
|
safety_pass_rate: 0.98,
|
|
avg_composite_score: 4.15,
|
|
scores_by_intent: {
|
|
korrektur_anfrage: 4.5,
|
|
erklaerung_anfrage: 4.3,
|
|
hilfe_anfrage: 4.1,
|
|
feedback_anfrage: 3.9,
|
|
smalltalk: 4.2,
|
|
},
|
|
failed_test_ids: ['GT-023', 'GT-045', 'GT-067', 'GT-072', 'GT-081', 'GT-089', 'GT-092', 'GT-095'],
|
|
}
|
|
|
|
const DEMO_TREND: TrendData = {
|
|
dates: ['2026-01-02', '2026-01-09', '2026-01-16', '2026-01-23', '2026-01-30'],
|
|
scores: [3.9, 4.0, 4.1, 4.15, 4.15],
|
|
trend: 'improving',
|
|
}
|
|
|
|
const DEMO_RUNS: TestRun[] = [
|
|
{ id: 1, timestamp: '2026-01-30T07:00:00Z', git_commit: 'abc1234', golden_score: 4.15, synthetic_score: 3.9, total_tests: 97, passed_tests: 89, failed_tests: 8, duration_seconds: 45.2 },
|
|
{ id: 2, timestamp: '2026-01-29T07:00:00Z', git_commit: 'def5678', golden_score: 4.12, synthetic_score: 3.85, total_tests: 97, passed_tests: 88, failed_tests: 9, duration_seconds: 44.8 },
|
|
{ id: 3, timestamp: '2026-01-28T07:00:00Z', git_commit: '9ab0123', golden_score: 4.10, synthetic_score: 3.82, total_tests: 97, passed_tests: 87, failed_tests: 10, duration_seconds: 46.1 },
|
|
]
|
|
|
|
// Fetch data
|
|
const fetchData = useCallback(async () => {
|
|
setIsLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const runsResponse = await fetch(`${BQAS_API_BASE}/runs`)
|
|
if (runsResponse.ok) {
|
|
const runsData = await runsResponse.json()
|
|
if (runsData.runs && runsData.runs.length > 0) {
|
|
setTestRuns(runsData.runs)
|
|
} else {
|
|
setTestRuns(DEMO_RUNS)
|
|
}
|
|
} else {
|
|
setTestRuns(DEMO_RUNS)
|
|
}
|
|
|
|
const trendResponse = await fetch(`${BQAS_API_BASE}/trend?days=30`)
|
|
if (trendResponse.ok) {
|
|
const trend = await trendResponse.json()
|
|
if (trend.dates && trend.dates.length > 0) {
|
|
setTrendData(trend)
|
|
} else {
|
|
setTrendData(DEMO_TREND)
|
|
}
|
|
} else {
|
|
setTrendData(DEMO_TREND)
|
|
}
|
|
|
|
const metricsResponse = await fetch(`${BQAS_API_BASE}/latest-metrics`)
|
|
if (metricsResponse.ok) {
|
|
const metrics = await metricsResponse.json()
|
|
setGoldenMetrics(metrics.golden || DEMO_GOLDEN_METRICS)
|
|
setSyntheticMetrics(metrics.synthetic || null)
|
|
setRagMetrics(metrics.rag || null)
|
|
} else {
|
|
setGoldenMetrics(DEMO_GOLDEN_METRICS)
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch BQAS data, using demo data:', err)
|
|
setTestRuns(DEMO_RUNS)
|
|
setTrendData(DEMO_TREND)
|
|
setGoldenMetrics(DEMO_GOLDEN_METRICS)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [fetchData])
|
|
|
|
// Run test suites with toast feedback
|
|
const runGoldenTests = async () => {
|
|
setIsRunningGolden(true)
|
|
const loadingToast = addToast('loading', 'Golden Suite wird ausgefuehrt...')
|
|
|
|
try {
|
|
const response = await fetch(`${BQAS_API_BASE}/run/golden`, {
|
|
method: 'POST',
|
|
})
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
setGoldenMetrics(result.metrics)
|
|
updateToast(loadingToast, 'success', `Golden Suite abgeschlossen: ${result.metrics?.passed_tests || 89}/${result.metrics?.total_tests || 97} bestanden`)
|
|
await fetchData()
|
|
} else {
|
|
updateToast(loadingToast, 'info', 'Golden Suite: Demo-Modus (API nicht verfuegbar)')
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to run golden tests:', err)
|
|
updateToast(loadingToast, 'info', 'Golden Suite: Demo-Modus (API nicht verfuegbar)')
|
|
} finally {
|
|
setIsRunningGolden(false)
|
|
}
|
|
}
|
|
|
|
const runSyntheticTests = async () => {
|
|
setIsRunningSynthetic(true)
|
|
const loadingToast = addToast('loading', 'Synthetic Tests werden generiert und ausgefuehrt...')
|
|
|
|
try {
|
|
const response = await fetch(`${BQAS_API_BASE}/run/synthetic`, {
|
|
method: 'POST',
|
|
})
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
setSyntheticMetrics(result.metrics)
|
|
updateToast(loadingToast, 'success', 'Synthetic Tests abgeschlossen')
|
|
await fetchData()
|
|
} else {
|
|
updateToast(loadingToast, 'info', 'Synthetic Tests: Demo-Modus (API nicht verfuegbar)')
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to run synthetic tests:', err)
|
|
updateToast(loadingToast, 'info', 'Synthetic Tests: Demo-Modus (API nicht verfuegbar)')
|
|
} finally {
|
|
setIsRunningSynthetic(false)
|
|
}
|
|
}
|
|
|
|
const runRagTests = async () => {
|
|
setIsRunningRag(true)
|
|
const loadingToast = addToast('loading', 'RAG/Korrektur Tests werden ausgefuehrt...')
|
|
|
|
try {
|
|
const response = await fetch(`${BQAS_API_BASE}/run/rag`, {
|
|
method: 'POST',
|
|
})
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
setRagMetrics(result.metrics)
|
|
updateToast(loadingToast, 'success', 'RAG Tests abgeschlossen')
|
|
await fetchData()
|
|
} else {
|
|
updateToast(loadingToast, 'info', 'RAG Tests: Demo-Modus (API nicht verfuegbar)')
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to run RAG tests:', err)
|
|
updateToast(loadingToast, 'info', 'RAG Tests: Demo-Modus (API nicht verfuegbar)')
|
|
} finally {
|
|
setIsRunningRag(false)
|
|
}
|
|
}
|
|
|
|
// Tab content renderer
|
|
const renderTabContent = () => {
|
|
switch (activeTab) {
|
|
case 'overview':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<MetricCard
|
|
title="Golden Score"
|
|
value={goldenMetrics?.avg_composite_score.toFixed(2) || '-'}
|
|
subtitle="Durchschnitt aller Golden Tests"
|
|
trend={trendData?.trend === 'improving' ? 'up' : trendData?.trend === 'declining' ? 'down' : 'stable'}
|
|
color="blue"
|
|
/>
|
|
<MetricCard
|
|
title="Pass Rate"
|
|
value={goldenMetrics ? `${((goldenMetrics.passed_tests / goldenMetrics.total_tests) * 100).toFixed(0)}%` : '-'}
|
|
subtitle={goldenMetrics ? `${goldenMetrics.passed_tests}/${goldenMetrics.total_tests} bestanden` : undefined}
|
|
color="green"
|
|
/>
|
|
<MetricCard
|
|
title="RAG Qualitaet"
|
|
value={ragMetrics?.avg_composite_score.toFixed(2) || '-'}
|
|
subtitle="RAG Retrieval Score"
|
|
color="purple"
|
|
/>
|
|
<MetricCard
|
|
title="Test Runs"
|
|
value={testRuns.length}
|
|
subtitle="Letzte 30 Tage"
|
|
color="yellow"
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Score-Trend (30 Tage)</h3>
|
|
<TrendChart data={trendData || { dates: [], scores: [], trend: 'insufficient_data' }} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<TestSuiteCard
|
|
title="Golden Suite"
|
|
description="97 validierte Referenz-Tests fuer Intent-Erkennung"
|
|
metrics={goldenMetrics || undefined}
|
|
onRun={runGoldenTests}
|
|
isRunning={isRunningGolden}
|
|
/>
|
|
<TestSuiteCard
|
|
title="RAG/Korrektur Tests"
|
|
description="EH-Retrieval, Operatoren-Alignment, Citation Tests"
|
|
metrics={ragMetrics || undefined}
|
|
onRun={runRagTests}
|
|
isRunning={isRunningRag}
|
|
/>
|
|
<TestSuiteCard
|
|
title="Synthetic Tests"
|
|
description="LLM-generierte Variationen fuer Robustheit"
|
|
metrics={syntheticMetrics || undefined}
|
|
onRun={runSyntheticTests}
|
|
isRunning={isRunningSynthetic}
|
|
/>
|
|
</div>
|
|
|
|
{/* Quick Help */}
|
|
<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">
|
|
<strong>Neu hier?</strong> Wechseln Sie zum Tab "Anleitung" fuer eine ausfuehrliche Erklaerung
|
|
des BQAS-Systems und wie Sie es nutzen koennen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'golden':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">Golden Test Suite</h3>
|
|
<p className="text-sm text-slate-500">Validierte Referenz-Tests gegen definierte Erwartungen</p>
|
|
</div>
|
|
<button
|
|
onClick={runGoldenTests}
|
|
disabled={isRunningGolden}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
isRunningGolden
|
|
? 'bg-teal-100 text-teal-600 cursor-wait'
|
|
: 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
|
|
}`}
|
|
>
|
|
{isRunningGolden ? 'Laeuft...' : 'Tests starten'}
|
|
</button>
|
|
</div>
|
|
|
|
{goldenMetrics && (
|
|
<>
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
|
<div className="text-center p-4 bg-slate-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-slate-900">{goldenMetrics.total_tests}</p>
|
|
<p className="text-xs text-slate-500">Tests</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-emerald-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-emerald-600">{goldenMetrics.passed_tests}</p>
|
|
<p className="text-xs text-slate-500">Bestanden</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-red-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-red-600">{goldenMetrics.failed_tests}</p>
|
|
<p className="text-xs text-slate-500">Fehlgeschlagen</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-blue-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-blue-600">{goldenMetrics.avg_intent_accuracy.toFixed(0)}%</p>
|
|
<p className="text-xs text-slate-500">Intent Accuracy</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-purple-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-purple-600">{goldenMetrics.avg_composite_score.toFixed(2)}</p>
|
|
<p className="text-xs text-slate-500">Composite Score</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">Scores nach Intent</h4>
|
|
<IntentScoresChart scores={goldenMetrics.scores_by_intent} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests ({goldenMetrics.failed_tests})</h4>
|
|
<FailedTestsList testIds={goldenMetrics.failed_test_ids} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'rag':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">RAG/Korrektur Test Suite</h3>
|
|
<p className="text-sm text-slate-500">Erwartungshorizont-Retrieval, Operatoren-Alignment, Citations</p>
|
|
</div>
|
|
<button
|
|
onClick={runRagTests}
|
|
disabled={isRunningRag}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
isRunningRag
|
|
? 'bg-teal-100 text-teal-600 cursor-wait'
|
|
: 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
|
|
}`}
|
|
>
|
|
{isRunningRag ? 'Laeuft...' : 'Tests starten'}
|
|
</button>
|
|
</div>
|
|
|
|
{ragMetrics ? (
|
|
<>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="text-center p-4 bg-slate-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-slate-900">{ragMetrics.total_tests}</p>
|
|
<p className="text-xs text-slate-500">Tests</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-purple-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-purple-600">{ragMetrics.avg_faithfulness.toFixed(2)}</p>
|
|
<p className="text-xs text-slate-500">Faithfulness</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-blue-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-blue-600">{ragMetrics.avg_relevance.toFixed(2)}</p>
|
|
<p className="text-xs text-slate-500">Relevance</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-emerald-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-emerald-600">{(ragMetrics.safety_pass_rate * 100).toFixed(0)}%</p>
|
|
<p className="text-xs text-slate-500">Safety Pass</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">RAG Kategorien</h4>
|
|
<IntentScoresChart scores={ragMetrics.scores_by_intent} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests</h4>
|
|
<FailedTestsList testIds={ragMetrics.failed_test_ids} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p>Noch keine RAG-Test-Ergebnisse</p>
|
|
<p className="text-sm mt-2">Klicke "Tests starten" um die RAG-Suite auszufuehren</p>
|
|
</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">Test-Kategorien</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div className="p-4 rounded-lg border bg-blue-50 border-blue-200">
|
|
<h4 className="font-medium text-slate-900">EH Retrieval</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Korrektes Abrufen von Erwartungshorizont-Passagen</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg border bg-purple-50 border-purple-200">
|
|
<h4 className="font-medium text-slate-900">Operator Alignment</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Passende Operatoren fuer Abitur-Aufgaben</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg border bg-red-50 border-red-200">
|
|
<h4 className="font-medium text-slate-900">Hallucination Control</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Keine erfundenen Fakten oder Inhalte</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg border bg-green-50 border-green-200">
|
|
<h4 className="font-medium text-slate-900">Citation Enforcement</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Quellenangaben bei EH-Bezuegen</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg border bg-amber-50 border-amber-200">
|
|
<h4 className="font-medium text-slate-900">Privacy Compliance</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Keine PII-Leaks, DSGVO-Konformitaet</p>
|
|
</div>
|
|
<div className="p-4 rounded-lg border bg-slate-50 border-slate-200">
|
|
<h4 className="font-medium text-slate-900">Namespace Isolation</h4>
|
|
<p className="text-sm text-slate-600 mt-1">Strikte Trennung zwischen Lehrern</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'synthetic':
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">Synthetic Test Suite</h3>
|
|
<p className="text-sm text-slate-500">LLM-generierte Variationen fuer Robustheit-Tests</p>
|
|
</div>
|
|
<button
|
|
onClick={runSyntheticTests}
|
|
disabled={isRunningSynthetic}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
isRunningSynthetic
|
|
? 'bg-teal-100 text-teal-600 cursor-wait'
|
|
: 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
|
|
}`}
|
|
>
|
|
{isRunningSynthetic ? 'Laeuft...' : 'Tests starten'}
|
|
</button>
|
|
</div>
|
|
|
|
{syntheticMetrics ? (
|
|
<>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div className="text-center p-4 bg-slate-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-slate-900">{syntheticMetrics.total_tests}</p>
|
|
<p className="text-xs text-slate-500">Generierte Tests</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-emerald-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-emerald-600">{syntheticMetrics.passed_tests}</p>
|
|
<p className="text-xs text-slate-500">Bestanden</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-blue-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-blue-600">{syntheticMetrics.avg_composite_score.toFixed(2)}</p>
|
|
<p className="text-xs text-slate-500">Avg Score</p>
|
|
</div>
|
|
<div className="text-center p-4 bg-purple-50 rounded-lg">
|
|
<p className="text-2xl font-bold text-purple-600">{syntheticMetrics.avg_coherence.toFixed(2)}</p>
|
|
<p className="text-xs text-slate-500">Coherence</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">Intent-Variationen</h4>
|
|
<IntentScoresChart scores={syntheticMetrics.scores_by_intent} />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests</h4>
|
|
<FailedTestsList testIds={syntheticMetrics.failed_test_ids} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-12 text-slate-400">
|
|
<svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
|
|
</svg>
|
|
<p>Noch keine synthetischen Tests ausgefuehrt</p>
|
|
<p className="text-sm mt-2">Klicke "Tests starten" um Variationen zu generieren</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'history':
|
|
return (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-6">Test Run Historie</h3>
|
|
<TestRunsTable runs={testRuns} />
|
|
</div>
|
|
)
|
|
|
|
case 'guide' as TabType:
|
|
return <GuideTab />
|
|
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<ToastContainer toasts={toasts} onDismiss={removeToast} />
|
|
|
|
<PagePurpose
|
|
title="Test Quality (BQAS)"
|
|
purpose="BQAS Dashboard mit Golden Suite (97 Referenz-Tests), RAG/Korrektur Tests und Synthetic Test Generierung. Ueberwacht die Qualitaet der KI-Ausgaben und identifiziert Regressions."
|
|
audience={['Entwickler', 'Data Scientists', 'QA', 'Auditoren']}
|
|
architecture={{
|
|
services: ['voice-service (Port 8091)', 'embedding-service'],
|
|
databases: ['Qdrant', 'PostgreSQL'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'GPU Infrastruktur', href: '/ai/gpu', description: 'GPU-Ressourcen verwalten' },
|
|
{ name: 'RAG Management', href: '/ai/rag', description: 'Training Data & RAG Pipelines' },
|
|
]}
|
|
collapsible={true}
|
|
defaultCollapsed={true}
|
|
/>
|
|
|
|
{/* KI-Werkzeuge Sidebar */}
|
|
<AIToolsSidebarResponsive currentTool="test-quality" />
|
|
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center gap-3">
|
|
<svg className="w-5 h-5 flex-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>
|
|
<span>{error}</span>
|
|
<button onClick={fetchData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<div className="border-b border-slate-200">
|
|
<nav className="flex gap-6 px-6">
|
|
{[
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'golden', label: 'Golden Suite' },
|
|
{ id: 'rag', label: 'RAG/Korrektur' },
|
|
{ id: 'synthetic', label: 'Synthetic' },
|
|
{ id: 'history', label: 'Historie' },
|
|
{ id: 'guide', label: 'Anleitung', highlight: true },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as TabType)}
|
|
className={`py-4 text-sm font-medium border-b-2 transition-colors ${
|
|
activeTab === tab.id
|
|
? 'border-teal-600 text-teal-600'
|
|
: tab.highlight
|
|
? 'border-transparent text-blue-500 hover:text-blue-600'
|
|
: 'border-transparent text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600"></div>
|
|
</div>
|
|
) : (
|
|
renderTabContent()
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-sm text-slate-500 px-2">
|
|
<div>
|
|
<span className="font-medium">Voice Service:</span> voice-service:8091
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/infrastructure/ci-cd" className="text-teal-600 hover:text-teal-700">
|
|
Scheduler (CI/CD)
|
|
</Link>
|
|
<Link href="/ai/quality" className="text-teal-600 hover:text-teal-700">
|
|
Compliance Audit
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|